网页设计与制作项目6多媒体

6.2 网页制作
步骤2 单击“创建”按钮，即可利用模板创 建网页文档，保存并命名为“guangxi.html”， 如图所示。
利用模板创建网页
6.2 网页制作 步骤3 在可编辑区域EditRegion1中 定位光标，输入文本“当前位置>目的地>桂 林”，如图所示。
在可编辑区域EditRegion1输入文本
6.2 网页制作
步骤3 设置表格第一行单元格属 性，水平方式为居中对齐，高60像素， 背景颜色为白色（即#FFFFFF）；设 置第二行单元格属性，水平方式为左对 齐，高100像素，背景颜色为白色 （即#FFFFFF）；设置第三行单元格 属性，水平方式为居中对齐，高450 像素，背景颜色为白色（即 #FFFFFF）；设置第四行单元格属性， 水平方式为左对齐，高70像素，背景 颜色为白色（即#FFFFFF）；参考 “桂林”子页面操作。 步骤4 依次在可编辑区域 EditRegion2中表格的第一行、第二 行、第四行单元格输入文字，第三行插 入图像“苏州园林1.jpg”，如图所示。
插入多媒体元素
6.2 网页制作
6.2.1 在“桂林”子页中插入Flash动画
步骤1 启动Dreamweaver CS6后，利用模板创 建网页，执行【文件】︱【新建】菜单命令，打开【新建 文档】对话框，选择“模板中的页”选项，从中选择 “mudidimoban”，如图所示。
在【新建文档】窗口中选择模板
【对象标签辅助功能属性】对话框
6.2 网页制作
步骤6 单击“确定”按钮，即完成了SWF—— FlashPaper的插入。显示效果如图所示。
在文档中插入FlashPaper对象
6.2 网页制作
步骤7 单击“在浏览器中预览”按钮 ，预览效果如图所
Байду номын сангаас
示。
插入FlashPaper对象的预览效果
6.2 网页制作
插 入 表 格 后 的 预 览 效 果
6.2 网页制作
步骤3 设置表格第一行单元格 属性，水平方式为居中对齐，高40 像素，背景颜色为白色（即 #FFFFFF）；第二行单元格属性， 水平方式为左对齐，高80像素，背 景颜色为白色（即#FFFFFF）；设 置第三行单元格属性，水平方式为居 中对齐，高460像素，背景颜色为白 色（即#FFFFFF）；设置第四行单 元格属性，水平方式为左对齐，高 90像素，背景颜色为白色（即 #FFFFFF）；设置完毕后，效果如 图所示。
6.2 网页制作 步骤4 在可编辑区域EditRegion2中定位 光标，执行【插入】︱【表格】菜单命令，插入 表格为4行1列，表格宽度97%，设置如图所示。
【表格】对话框中设置参数
6.2 网页制作
步骤5 设置表格第一行单元 格属性，水平方式为居中对齐，高 50像素，背景颜色为白色（即 #FFFFFF）；第二行单元格属性， 水平方式为左对齐，高70像素， 背景颜色为白色（即#FFFFFF）； 设置第三行单元格属性，水平方式 为居中对齐，高500像素，背景颜 色为白色（即#FFFFFF）；设置 第四行单元格属性，水平方式为左 对齐，高140像素，背景颜色为白 色（即#FFFFFF）；设置完毕后 表格效果如图所示。
在【选择SWF】对话框中选择文件
显示提示信息
6.2 网页制作
步骤8 在弹出的【复制文件为】对话框中选择路径 “D：\letuweb\ch6\img”，如图所示。 步骤9 单击“保存”按钮，在弹出的【对象标签辅助 功能属性】对话框中输入标题等，如图所示。
在【复制文件为】对话框中选择复制文件路径
【对象标签辅助功能属性】对话框
对表格设置后的页面效果
6.2 网页制作 步骤6 依次在可编辑区域EditRegion2中 表格的第一行、第二行、第四行单元格输入文字， 如图所示。
插入文字后页面效果
6.2 网页制作
步骤7 在表格的空白单元格中定位光标，执行【插 入】︱【媒体】︱【SWF】菜单命令，在弹出的【选择 SWF】对话框中选择文件“桂林.swf”，如图所示。单 击“确定”按钮，在出现如图所示的提示框中单击“是” 按钮。
“苏州园林”页面效果
6.2 网页制作
步骤5 在表格的空白处定位光标，执行【插入】︱ 【媒体】︱【插件】菜单命令，弹出【选择文件】对话框， 选择文件“江南好.mp3”，如图所示。 步骤6 单击“确定”按钮，即完成了背景音乐的插入， 显示效果如图所示。
【选择文件】对话框
在文档中插入插件对象
6.2 网页制作
6.2 网页制作
6.2.2 在“北京”子页中插入FLV动画
步骤2 单击“创建”按钮，即可利用模板创建网页文档， 并命名为“beijing.html”。在可编辑区域EditRegion1中 定位光标，输入文本“当前位置>目的地>北京”， 在可编辑 区域EditRegion2中定位光标，执行【插入】︱【表格】菜单 命令，插入表格为4行1列，表格宽度97%，同上一小节操作。 效果如图所示。
【选择文件】对话框
【对象标签辅助功能属性】对话框
6.2 网页制作
表格设置后的效果
6.2 网页制作
步骤4 依次在可编辑区域EditRegion2中表格的第一 行、第二行、第四行单元格输入文字，如图所示。 步骤5 在表格的空白单元格中定位光标，执行【插入】 ︱【媒体】︱【FLV】菜单命令，弹出【插入FLV】对话框， 如图所示。
输入文字后效果
【插入FLV】对话框
6.2 网页制作
【Applet标签辅助功能属性】对话框
在文档中插入Applet对象
插入Applets对象的预览效果
6.2 网页制作
6.2.6 在“九寨沟”子页中插入Shockwave影片
步骤1 鉴于目的地页面布局大致相同，可以直接打开 “huangshan.html”，另存为“sichuan.html”。 步骤2 在可编辑区域EditRegion1中定位光标，修改文本为 “当前位置>目的地>九寨沟”。 步骤3 在可编辑区域EditRegion2中定位光标，将所有关于 “黄山”的文字内容改为“九寨沟”的文字，如图所示。
项目6
丰富视听效果——应用多媒体元素
知识要点
1 2 3 4
掌握使用模板批量创建网页
掌握插入Flash动画、文本及其属性设置的方法
掌握插入Shockwave对象及其属性设置的方法
掌握插入Java Applets程序的方法
5
6
掌握插入ActiveX控件的方法
掌握在网页中插入背景音乐、视频的方法
6.1 网页展示：在“目的地”子页面中应用多媒体元素 在网页中应用多媒体 效果十分普遍，例如插入 Flash动画、视频、声音、 Java Applet等使网页富 于变化、动感十足。 在“乐途网”的“目 的地”子页面中分别插入 了Flash动画、FLV动画、 FlashPaper文本、背景 音乐和Java Applets程 序等，网页效果如图所示。
【选择文件】对话框
6.2 网页制作
步骤6 单击“确定”按钮，在如图所示的提示框中输入“替换 文本”和“标题”后，单击“确定”按钮。 步骤7 单击“确定”按钮，即完成了Java Applets动画的插 入。设置Applets对象的属性，宽为300，高为350，在文档中插 入Applets对象后的显示效果如图所示。 步骤8 单击“在浏览器中预览”按钮 ，预览效果如图所示。
6.2.4 在“苏州园林”子页中插入背景音乐
步骤1 启动Dreamweaver CS6后，利用模板创建网 页，执行【文件】︱【新建】菜单命令，打开【新建文档】 对话框，选择【模板中的页】选项，从中选择 “mudidimoban”，同上一小节操作。 步骤2 单击“创建”按钮，即可利用模板创建网页文 档，并命名为：“jiangsu.html”。在可编辑区域 EditRegion1中定位光标，输入文本“当前位置>目的地> 苏州”，在可编辑区域EditRegion2中定位光标，执行 【插入】︱【表格】菜单命令，插入表格为4行1列，表格 宽度97%，同上一小节操作。
【插入FLV】对话框内的其他参数设置
在文档中插入FLV对象
6.2 网页制作
步骤10 单击“在浏览器中预览”按钮 ，预览效果如图所示。
插入FLV对象的预览效果
6.2 网页制作
6.2.3 在“预订酒店”子页中插入FlashPaper文本 步骤1 启动Dreamweaver CS6后，利用模板创 建网页，执行【文件】︱【新建】菜单命令，打开【新建 文档】对话框，选择【模板中的页】选项，从中选择 “mudidimoban”，同上一小节操作。 步骤2 单击“创建”按钮，即可利用模板创建网页 文档，并命名为“QA.html”。在可编辑区域 EditRegion1中定位光标，输入文本“当前位置>目的 地>酒店预订”， 在可编辑区域EditRegion2中定位光 标，执行【插入】︱【表格】菜单命令，插入表格为2行 1列，表格宽度97%，同上一小节操作。
6.2 网页制作
步骤4 依次在可编辑区域EditRegion2中表格的第一 行、第二行、第四行单元格输入文字，如图所示。 步骤5 在表格的空白单元格中定位光标，执行【插入】 ︱【媒体】︱【Applet】菜单命令，在弹出的【选择文件】 对话框中选择文件“ShowImage.class”，如图所示。
“黄山”页面效果
步骤7 在【插件】属性面板中输入“宽”和“高”的 值均为0，如图所示，表示隐藏该插件对象。 步骤8 单击“在浏览器中预览”按钮 ，预览网页时， 即可播放优美的音乐。
【插件】属性面板
6.2 网页制作
6.2.5 在“黄山”子页中插入Java Applets程序 步骤1 启动Dreamweaver CS6后，利用模板创 建网页，执行【文件】︱【新建】菜单命令，打开【新建 文档】对话框，选择【模板中的页】选项，从中选择 “mudidimoban”，同上一小节操作。 步骤2——步骤 3 ，同上一小节操作。