Dreamweaver CS5实例教程 第2版 习题答案 作者 管小清 祖宝明 06章.pdf 13页VIP

使用框架 6.3 课堂练习——摩托车俱乐部网页 【练习知识要点】使用“链接”选项设置链接效果，如图6-1 所示。 【效果所在位置】光盘/Ch06/效果/摩托车俱乐部网页/index.html 图6-1 （1 ）选择“文件 打开”命令，在弹出的对话框中选择光盘“Ch06 素材 摩托车俱乐 部网页 index.html”文件，单击“打开”按钮，效果如图6-2 所示。 Dreamweaver CS5 中文版实例教程 图6-2 （2 ）选中如图6-3 所示的图片。单击“属性”面板“链接”选项右侧的“浏览文件”按钮 ， 弹出“选择文件”对话框，在光盘目录下的“Ch06 素材 摩托车俱乐部网页”文件夹中选择 文件“left.html”，单击“确定”按钮，在“目标”选项下拉列表中选择“leftFrame”选项，“边框” 选项的数值框中输入0 ，“属性”面板中如图6-4 所示。 图6-3 图6-4 （3 ）使用相同的方法为图片“01_08.jpg”、“01_10.jpg”添加链接效果，如图6-5、图6-6 所示。 图6-5 图6-6 （4 ）按F12键预览效果，如图6-7 所示，单击第二张图片，下面的内容更换为相应的页面， 效果如图6-8 所示, 单击第三张图片，下面的内容更换为相应的页面，效果如图6-9 所示。 2 第6 章 使用框架 图6-7 图6-8 图6-9 6.4 课堂练习——时尚素材网页 【练习知识要点】使用“上方固定”框架制作的网页的结构图效果。使用“属性”面板改 变框架的大小。使用“表格”和“图像”按钮插入表格和图像制作完整的框架网页效果，如 图6- 10 所示。 【效果所在位置】光盘/Ch06/效果/时尚素材网页/index.html 图6-10 3 Dreamweaver CS5 中文版实例教程 1. 创建框架并保存 （1 ）选择“文件 新建”命令，弹出“新建文档”对话框，在左侧的选项中选择“示例中 的页”选项，在“示例文件夹”列表框中选择“框架页”选项，在右边的“示例页”列表框中选 择“上方固定，下方固定”选项，如图6-11 所示，单击“创建”按钮，创建一个框架网页，效果 如图6-12 所示。 （2 ）将光标置入到顶部框架中，选择“文件 保存框架”命令，弹出“另存为”对话框， 在“保存在”选项的下拉列表中选择当前站点目录保存路径，在“文件名”选项的文本框中输入 “top”，如图6-13 所示，单击“确定”按钮，保存顶部框架。 （3 ）使用相同的方法保存其他框架，依次命名为“main”、“bottom”，如图6-14 所示。 图6-11 图6-12 图6-13 图6-14 （4 ）选择“文件 保存全部”命令，弹出“另存为”对话框，在“保存在”选项的下拉列 表中选择当前站点目录保存路径，在“文件名”选项的文本框中输入“index”，如图6-15 所示， 单击“确定”按钮，保存顶部框架。 （5 ）将鼠标光标置到顶部框架中，选择“修改 页面属性”命令，在弹出的“页面属性” 对话框中将“左边距”、“右边距”、“上边距”、“下边距”选项均设为0 ，如图6-16 所示，单击“确 定”按钮。使用相同的方法设置其他框架的页边距。 4 第6 章 使用框架 图6-15 图6-16 2. 插入图片 （1 ）单击上下边界线，如图6-17 所示，在“属性”面板中，在“行”选项的数值框中输入 73 ，“单位”选项下拉列表中选择“像素”，如图6-18 所示。 （2 ）将光标置入到顶部框架中，在“插入 常用”面板中单击“图像”按钮 ，在弹出的 “选择图像源文件”对话框中选择光盘目录下“Ch06 素材 时尚素材网页 images”文件夹中 的“01_01.jpg”，单击“确定”按钮完成图片的插入，效果如图6-19 所示。 图6-17 图6-18 图6-19 （3 ）将光标置入到中间框架中，在“插入”面板“常用”选项卡中单击“表格”按钮 ， 在弹出的“表格”对话框中进行设置，如图 5-20 所示，单击“确定”按钮，效果如图 5-21 所示。 （4 ）选中第1 列单元格，单击 “合并所选单元格”按钮 ，合并单元格，效果如图5-22 所示。 5 Dreamweaver CS5 中文版实例教程 图6-20 图6-21 图6-22 （5 ）分别将光盘目录下“Ch06 素材 时尚素材网页 images”文件夹中的“01_02.jpg、 01_03.jp、01_04.jpg”文件插入到单元格，效果如图6-23 所示。 图6-23 （6 ）单击底部框架边线，如图6-24 所示。向上拖曳，改变框架大小，如图6-24 所示， 释放鼠标，效果如图6-25 所示。 （7 ）将光标置入到底部框架中，在“插入 常用”面板中单击“图像”按钮 ，在弹 出的“选择图像源文件”对话框中选择光盘目录下“Ch06 素材 时尚素材网页 images” 文件夹中的“01_05.jpg”，单击“确定”按钮完成图片的插入，效果如图6-26 所示。 （8 ）保存文档，按F12键，预览效果如图6-27 所示。 6 第6 章 使用框架 图6-24 图6-25 图6-26 图6-27 6.5 课后习题——香茶公司网页 【习题知识要点】使用“链接”选项设置链接效果。使用“目标”选项设置框架，如图 6-28 所示。 【效果所在位置】光盘/Ch06/效果/香茶公司网页/index.html 图6-28 7 Dreamweaver CS5 中文版实例教程 1. 制作由上下框架构成的第一界面 （1 ）选择“文件 新建”命令，弹出“新建文档”对话框，单击“确定”按钮，创建新文 档，单击“插入 布局”面板中的“顶部框架”按钮 ，在网页文档中创建框架，如图6-29 所 示。 （2 ）单击上下边界线，如图 6-30 所示，在“属性”面板中，在“行”选项的数值框中输入 60 ，如图6-31 所示，文档窗口中效果如图6-32 所示。 图6-29 图6-30 图6-31 图6-32 （3 ）将鼠标光标置到下方框架中，选择“文件 保存框架”命令，弹出“另存为”对话框， 在 “保存在”选项的下拉列表中选择当前站点目录保存路径，在 “文件名”选项的文本框中输入 “main2”，如图6-33 所示，单击“保存”按钮，返回到文档窗口。 （4 ）选择“文件 保存全部”命令，弹出“另存为”对话框，在 “保存在”选项的下拉列 表中选择当前站点目录保存路径，在 “文件名”选项的文本框中输入 “index”，单击“保存”按 钮，返回到文档窗口。 （5 ）选择“窗口 框架”命令，弹出“框架”面板，单击面板中的上方框架，如图6-34 所 示，单击“属性”面板“源文件”选项右侧的 “浏览文件”按钮 ，弹出“选择HTML 文件” 对话框，在光盘目录下的“Ch06 素材 香茶公司网页”文件夹中选择文件“top.html”，如图 6-35 所示，单击“确定”按钮，上方框架中显示选定的网页文档，效果如图6-36 所示。 8 第6 章 使用框架 图6-33 图6-34 图6-35 图6-36 （5 ）在“框架”面板中单击下方框架，如图6-37 所示。在“属性”面板中单击“源文件”选 项右侧的 “浏览文件”按钮 ，弹出“选择HTML 文件”对话框，在光盘目录下的“Ch06 素 材 香茶公司网页”文件夹中选择文件“main.html”，如图6-38 所示。 图6-37 图6-38 （6 ）单击“确定”按钮，效果如图6-39 所示。保存文档，按F12键预览效果，如图6-40 所 示。 9 Dreamweaver CS5 中文版实例教程 图6-39 图6-40 2. 制作单击菜单时显示的框架集 （1 ）选择“文件 新建”命令，弹出“新建文档”对话框，单击“确定”按钮，创建新文档， 单击“插入 布局”面板中的 “顶部和嵌套的左侧框架”按钮 ，在网页文档中创建框架，如图 6-41 所示。 （2 ）单击顶部框架边界线，在“属性”面板中，在“行”选项的数值框中输入248 ，如图6-42 所示。文档窗口中效果如图6-43 所示。单击左侧框架边线，在“属性”面板中，在“列”选项的 数值框中输入 187，效果如图6-44 所示。 图6-41 图6-42 图6-43 图6-44 （3 ）在“框架”面板中单击顶部框架，如图6-45 所示。在“属性”面板中单击 “源文件”选 项右侧的 “浏览文件”按钮 ，弹出“选择HTML 文件”对话框，在光盘目录下的“Ch06 素 10 第6 章 使用框架 材 香茶公司网页”文件夹中选择文件“top1.html”，单击“确定”按钮，框架中显示选定的网 页文档，效果如图6-46 所示。 图6-45 图6-46 （4 ）在“框架”面板中单击左侧框架，如图6-47 所示。在“属性”面板中单击“源文件”选 项右侧的 “浏览文件”按钮 ，弹出“选择HTML 文件”对话框，在光盘目录下的“Ch06 素 材 香茶公司网页”文件夹中选择文件“left.html”，单击“确定”按钮，框架中显示选定的网页 文档，效果如图6-48 所示。 图6-47 图6-48 （5 ）在“框架”面板中单击框架，如图6-49 所示。在“属性”面板中单击“源文件”选项右 侧的 “浏览文件”按钮 ，弹出“选择HTML 文件”对话框，在光盘目录下的“Ch06 素材 香茶公司网页”文件夹中选择文件“main1.html”，单击“确定”按钮，弹出提示对话框，单击“否” 按钮，框架中显示选定的网页文档，效果如图6-50 所示。 图6-49 图6-50 11 Dreamweaver CS5 中文版实例教程 （7 ）选择“文件 保存全部”命令，保存框架页。打开光盘目录下的“Ch06 素材 香茶 公司网页”文件夹中选择文件“index.html”。 （8 ）选中图片“茶道步骤”，如图6-51 所示。单击“属性”面板“链接”选项右侧的“浏 览文件”按钮 ，弹出“选择文件”对话框，在光盘目录下的“Ch06 素材 香茶公司网 页”文件夹中选择文件“Buzhu.html ”，单击“确定”按钮，在 “属性”面板的 “目标”选项 的下拉列中选择“_top ”，如图6-52 所示。 图6-51 图6-52 （9 ）按F12键预览效果，如图6-53 所示，单击菜单“茶道步骤”，显示链接页面，效果如 图6-54 所示。 图6-53 图6-54 3. 在服务菜单中设定链接 （1 ）打开Buzhu.html 网页文档，在“框架”面板中单击右侧框架，在“属性”面板中，在“框 架名称”对话框中将“mainFrame”更改为“subright”，如图6-55 所示，“框架”面板中如图6-56 所示。 12