网页设计课件第3章 节 网页文件的基本操作.pptVIP

3.2 图像 案例【3.3】在网页中添加图像并设置属性 ④ 打开“CH03/other/摄影文本3.doc”，将文本复制到网页中。 打开图片“CH03/pic/e0703.jpg”和CH03/pic/e0704.jpg”，在网页中选择图片e0703，在“属性”面板中设置宽度为219，高度为130；单击“对齐”下拉列表框选择“左对齐”，“水平间距”文本框中输入20；选择图片e0704，宽度为500，高度为239；单击“对齐”下拉列表框选择“右对齐”，“水平间距”文本框中输入20。 ⑤ 选择图片e0702，按住Ctrl键拖动，复制到下方，设置高度为5。 ⑥ 分别选择e0703和e0704，在“替换文本”中都输入“摄影大师”。 3.2 图像 3.2.3 插入鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。必须用以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。 鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同， Dreamweaver 将调整第二个图像的大小以与第一个图像的属性匹配。 单击【插入记录】→【图像对象】→【鼠标经过图像】或者在“插入”栏的“常用”选项卡中单击“图像”按钮，然后选择“鼠标经过图像”图标，来实现插入鼠标经过图像。 3.2 图像 【案例3.4】插入鼠标经过图像。 ① 打开上例中网页tuxiang.html，在网页最后单击鼠标，选择插入点，单击【插入记录】→【图像对象】→【鼠标经过图像】，在打开如图所示的对话框。 ② 单击“原始图像”和“鼠标经过图像”后的“浏览”按钮，选择两张图片“CH03/pic/e0705.jpg”和“CH03/pic/e0706.jpg”插入，并复制到本站点pic文件夹下。 ③ 保存修改并浏览网页。 3.3 插入Flash 【案例3.5】为网页添加Flash。 ① 在上例中新建一网页，命名为flash.html。 ② 插入图片“CH03/pic/e0707.jpg” ③ 单击【插入记录】→【媒体】→【Flash】；或者选择“插入”栏的“媒体”选项卡，单击“Flash”图片按钮。 ④在弹出对话框中选择文件“CH07/素材/视点摄影.swf”双击，在弹出的提示复制对话框中单击“是”，将文件复制到站点flash目录里，此时弹出的对话框，可不输入直接单击“确定”或“取消”，将Flash添加到了网页中。 ⑤ 选中插入的Flash，在“属性”面板如图7.33所示，为其设置属性。单击“播放”可在设计状态下观看Flash内容。 3.3 插入Flash 为了美化网页，增加动态效果，可插入Fash按钮，使按钮具有动态效果，插入Fash按钮的操作步骤如下： ① 单击【插入记录】→【媒体】→【Flash按钮】；或者选择“插入”栏的“媒体”选项卡，单击“Flash按钮”。 ② 在弹出的对话框中进行设置，选择合适的样式，输入按钮上要显示的文本并设置字体，也可以设置链接等。如图所示。 3.3 插入Flash ③ 单击确定，将Flash按钮插入到文档中。为在案例3.21中所创建的网页“tuxiang.html”中删除图片e7202.jpg，添加Flash按钮后的效果，其中样式选择“Translucent Tab”，字体为“宋体”，大小为20，背景色为黑色。 ④ 如果想修改Fash按钮，可双击Fash按钮，会再次打开如图所示对话框供设置。 注意：插入Flash按钮时，文档的路径和文件名中不能有中文，否则会提示出错。 3.3 插入Flash 3.3 Flash文本 【案例3.5】修改“tuxiang.html”，添加Flash文本。 ① 打开“CH03/tuxiang.html”，删除文字“国际顶尖商业摄影大师代表作图赏”。 ②单击【插入记录】→【媒体】→【Flash文本】；或者选择“插入”栏的“媒体”选项卡，单击“Flash文本”，在打开的如图所示的文本框中进行设置 3.3 插入Flash ③ 单击确定，效果如图所示，当鼠标移动到文本上，文本会变色。 ④ 如果要修改插入的Flash文本，可以双击再次打开“插入Flash文本”对话框设置。 3.4 插入导航条 执行下列操作可以创建一个导航条： 单击【插入记录】→【图形对象】→【导航条】。 选择“插入”栏的“图像”选项卡，单击“导航条”按钮。 【案例7.6】为网页添加导航条。 ①“CH03/flash.html”，将插入点定位在网页头图像下方。 ② 单击【插入记录】→【图形对象】→【导航条】，打开如图所示的对话框。 3.4 插入导