第2章 网页元素的添加4 翻转图和Flash对象　课件

学习目标 掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局 2.1 第2章 网页元素的添加 2.4.1 案例制作：网站“美联”导航部分 2.4 翻转图 最终效果如图所示。 2.1 第2章 网页元素的添加 2.4.1 案例制作：网站“美联”导航部分 2.4 翻转图 1） 新建文件夹meilian，在该文件夹中新建子文件夹image，将所有的素材拷贝到image文件夹中。在Dreamweaver CC中，单击菜单“站点” →“新建站点”命令，打开“站点设置对象”对话框进行站点定义，设站点名称为“美联”，站点文件夹定义为文件夹meilian。 2）新建网页，保存为index.html，设网页的标题为“美联”。单击菜单命令“插入”→“表格”新建表格，在弹出的对话框中设定表格为1行2列，宽778像素，其余参数全为0，单击“确定”按钮插入表格。 3）光标移到左侧单元格中，插入图像image/logo.gif。 2.1 第2章 网页元素的添加 2.4.1 案例制作：网站“美联”导航部分 2.4 翻转图 4）光标移到右侧单元格，在表格属性面板中设“垂直”对齐方式为底部，这样使得后面插入的翻转图像与左面的徽标图像底部对齐。单击菜单命令“插入”→“图像”→“鼠标经过图像”，打开“插入鼠标经过图像”对话框，单击“原始图像”右侧的“浏览”按钮，找到image/link_1.gif, 再单击“鼠标经过图像”右侧的“浏览”按钮，找到image/link_11.gif，单击“确定”按钮，则插入第1个翻转图像。光标移到翻转图像右侧，按照相同的操作，插入其他翻转图像。 2.1 第2章 网页元素的添加 2.4.2 新知解析 2.4 翻转图 翻转图是最简单的一种动态网页，当光标指向图像时会变为另一幅图像，光标移出后又变回原先的图像。 要制作翻转图，只需单击菜单命令“插入”→“图像”→“鼠标经过图像”，打开“插入鼠标经过图像”对话框，如图2-75所示，各选项的含义如下。 “图像名称”：输入图像名称。 “原始图像”：单击“浏览”按钮可以选择初始图像。 “鼠标经过图像”：单击“浏览”按钮可以选择替换的图像。 预载鼠标经过图像”复选框：选中该项可以使浏览器一开始就下载更换的图像，不必等到光标指向图像时再下载，可以避免翻转不连贯的现象。 “替换文本”：为翻转图像添加注释。 “按下时，前往的URL”：设置单击图像时跳转的链接页面。 2.1 第2章 网页元素的添加 2.4.3 技巧提示 2.4 翻转图 翻转图像链接的设置方法 当网页中需插入翻转图像，并为其设置超链接时，可以在插入翻转图像时直接在对话框中的“按下时，前往的URL”文本框中输入超链接的地址。也可以先插入翻转图像，然后再选中翻转图像，在HTML属性面板的“链接”文本框中输入链接地址。 2.1 第2章 网页元素的添加 2.4.4 实战演练：网站“闪闪作坊”页眉局部 2.4 翻转图 最终效果如图所示。 2.1 第2章 网页元素的添加 2.4.4 实战演练：网站“闪闪作坊”页眉局部 2.4 翻转图 1）新建文件夹shanshan，在该文件夹中新建子文件夹image，将所有的素材拷贝到image文件夹中。在Dreamweaver CC中，单击菜单“站点” →“新建站点”命令，打开“站点设置对象”对话框进行站点定义，设站点名称为“闪闪作坊”，站点文件夹定义为文件夹shanshan。 2）新建网页，保存为shanshan.html，设网页的标题为“闪闪作坊”。 3）单击菜单命令“插入”→“表格”新建表格，在弹出的对话框中设定表格为4行3列，宽531像素，其余参数全为0，单击“确定”按钮插入表格。选中表格，在属性面板中设“Align”为“居中对齐”。 2.1 第2章 网页元素的添加 2.4.4 实战演练：网站“闪闪作坊”页眉局部 2.4 翻转图 4）光标移到第1行左侧单元格中，插入图像为image/fm01.gif。光标移到第2行中间单元格中，单击菜单命令“插入”→“图像”→“鼠标经过图像”插入翻转图像，在对话框中设原始图像为image/fm02.gif，鼠标经过图像为image/fm02x.gif。光标移到第2行右侧单元格中，插入图像为image/fm03.gif。 2.1 第2章 网页元素的添加 2.4.4 实战演练：网站“闪闪作坊”页眉局部 2.4 翻转图 5）选中第4行的所有单元格，单击表格属性面板中的合并单元格按钮合并单元格。光标移到该行单元格中，单击菜单命令“插入”→“图像”→“鼠标经过图像”，打开“插入鼠标经过图像”对话框，设“原始图像”为image/01.gif,“鼠标经过图像”为image/01x.gif，单击“确定”按钮，则插入第1个翻