《Dreamweaver CS5实例教程 第2版 习题答案 作者 管小清 祖宝明 09章》由会员分享，可在线阅读，更多相关《Dreamweaver CS5实例教程 第2版 习题答案 作者 管小清 祖宝明 09章（12页珍藏版）》请在金锄头文库上搜索。
1、 模板和库 9.4 课堂练习室内设计网页 【练习知识要点】使用“另存为模板”命令制作模板页。使用“可编辑区域”和“重复区域” 按钮制作可编辑区域和重复可编辑区域效果，如图 9-1 所示。 【效果所在位置】光盘/Ch09/效果/室内设计网页/index.html 图 9-1 1打开文件存为模板页 （1）选择“文件 打开”命令，在弹出的对话框中选择“Ch09 素材 室内设计网页 index.html”文件，单击“打开”按钮，如图 9-2 所示。 （2）在“插入”面板“常用”选项卡中，单击“模板”展开式按钮，选择“创建模板”按 钮，在弹出的对话框中进行设置，如图 9-3 所示，单击“保存”按钮，弹出
2、提示对话框，如图 9-4 所示，单击“是”按钮，将当前文档转换为模板文档，文档名称也随之改变，如图 9-5 所示。 Dreamweaver CS5 中文版实例教程 2 图 9-2 图 9-3 图 9-4 图 9-5 2创建重复区域和可编辑区域 （1）选中如图9-6 所示表格，在“插入”面板“常用”选项卡中，单击“模板”展开式按钮， 选择“可编辑区域”按钮，弹出“新建可编辑区域”对话框，在“名称”选项的文本框中输入 名称，如图 9-7 所示，单击“确定”按钮创建可编辑区域，如图 9-8 所示。 图 9-6 图 9-7 图 9-8 （2） 选中如图 9-9 所示表格， 在 “插入” 面板 “常用”
3、 选项卡中， 单击 “模板” 展开式按钮， 选择“可编辑区域”按钮，弹出“新建可编辑区域”对话框，在“名称”选项的文本框中输入 名称，如图 9-10 所示，单击“确定”按钮创建可编辑区域，如图 9-11 所示。 第 9 章 模板和库 3 图 9-9 图 9-10 图 9-11 （3）选中如图 9-12 所示表格，再次创新可编辑区域，效果如图 9-13 所示。 图 9-12 图 9-13 （4）模板网页效果制作完成，如图 9-14 所示。 图 9-14 9.5 课堂练习美女购物网页 【练习知识要点】使用模板文档制作其他网页文档效果。如图 9-15 所示。 【效果所在位置】光盘/Ch09/效果/美
4、女购物网页/index.html Dreamweaver CS5 中文版实例教程 4 图 9-15 1. 在模板文档中定义可编辑区域 （1）选择“文件 打开”命令，在弹出的对话框中选择“Ch09 素材 美女购物网页 index.html”文件，单击“打开”按钮，效果如图 9-16 所示。 图 9-16 （2）将光标置入到右侧的单元格中，在“插入 常用”面板中单击“表格”按钮，在弹 出的对话框中进行设置，如图 9-17 所示，单击“确定”按钮，效果如图 9-18 所示。 图 9-17 图 9-18 （3）选择“文件 另保存为模板”命令，在“另存为”对话框中输入 lipin，如图 9-19 所示，
5、 单击“保存”按钮，弹出提示对话框，如图 9-20 所示，单击“是”按钮，切换到模板界面。 第 9 章 模板和库 5 图 9-19 图 9-20 （4）将鼠标置入到第 1 行第 1 列单元格中，如图 9-21 所示。在“插入 常用”面板中单击 “可编辑区域” 按钮， 弹出 “新建可编辑区域” 对话框， 在 “名称” 选项的对话框中输入 neirong1， 如图 9-22 所示，单击“确定”按钮，效果如图 9-23 所示。 图 9-21 图 9-22 图 9-23 （5）将鼠标置入到第 1 行第 2 列单元格，如图 9-24 所示。选择“插入 模板对象 可编辑 区域”命令，弹出“新建可编辑区域”
6、对话框，在“名称”选项的对话框中输入 goumai，如图 9-25 所示，单击“确定”按钮，效果如图 9-26 所示。 图 9-24 图 9-25 图 9-26 （6）用相同的方法，为其他单元格设定可编辑区域，效果如图 9-27 所示。选择“文件 保 存”命令，将模板保存。 图 9-27 2. 使用模板文档制作其他网页文档 （1）选择“文件 新建”命令，弹出“新建文档”对话框，单击“模板中的页”选项，选 择前面制作的模板名称 moban，如图 9-28 所示，单击“创建”按钮，如图 9-29 所示。 Dreamweaver CS5 中文版实例教程 6 图 9-28 图 9-29 （2）选择“文
7、件 保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中 选择当前站点目录保存路径，在“文件名”选项的文本框中输入“index1” ，单击“保存”按钮， 返回网页编辑窗口。 （3）将第 1 行第 1 列中的内容删除，在“插入 常用”面板中单击“图像”按钮，在弹 出的“选择图像源文件”对话框中选择光盘目录下“Ch09 素材 美女购物网页 images”文 件夹中的“01_03.jpg” ，单击“确定”按钮完成图片的插入，效果如图 9-30 所示。 （4）用同样的方法删除其他单元格的内容，将图片“01_04.jpg”插入到第 1 行第 2 列、 “01_06.jpg”插入到第 2 行第
8、1 列、 “01_07.jpg”插入到第 2 行第 2 列中，效果如图 9-31 所示。 图 9-30 图 9-31 （5）保存文档，按键，预览效果如图 9-32 所示。 图 9-32 第 9 章 模板和库 7 3. 修改模板文档 （1）调出“资源”面板，单击左侧的“模板”按钮，如图 9-33 所示。 （2）双击面板中的名称 lipin，打开模板文档，如图 9-34 所示。 图 9-33 图 9-34 （3）分别单击可编辑领域的青色边框，按键，将其删除，效果如图 9-35 所示。 图 9-35 （4）将表格的第 1 行第 2 列和第 2 行第 3 列单元格同时选中，如图 9-36 所示，单击“
9、属性” 面板中的“合并单元格”按钮，将选中的单元格合并，效果如图 9-37 所示。 图 9-36 图 9-37 （5） 跟据上面的制作方法， 分别单击 “可编辑区域” 按钮后， 用 “biao1” 、 “biao2” 、 “neirong” 重新设定编辑区域，如图 9-38 所示。 图 9-38 Dreamweaver CS5 中文版实例教程 8 （6）选择“文件 保存”命令，弹出提示对话框，单击“更新”按钮，在弹出的对话框中 选择“goumai” ，如图 9-39 所示，在“将内容移到新区域”选项的下拉列表中选择“neirong” ，如 图 9-40 所示。用相同的方法，在列表中选择要替换的
10、前一次的名称，在下面的列表中选择重新指 定的名称，如图 9-41 所示。 图 9-39 图 9-40 图 9-41 （7）单击“确定”按钮，弹出“更新页面”对话框，如图 9-42 所示，单击“关闭”按钮。 （8）切换到 index1.html 文档窗口中，网页文档的结构生成变化，如图 9-43 所示。 图 9-42 图 9-43 （9）选择如图 9-44 所示的图片，按键，将其删除，效果如图 9-45 所示。 第 9 章 模板和库 9 图 9-44 图 9-45 （10）保存文档，按键预览效果，如图 9-46 所示。 图 9-46 9.6 课后习题精品沙发网页 【习题知识要点】使用“库”面板添
11、加库项目。使用库中注册的项目制作网页文档，如图 9-47 所示。 【效果所在位置】光盘/Ch09/效果/精品沙发网页/index.html 图 9-47 Dreamweaver CS5 中文版实例教程 10 1. 把经常用的图标添加到库中 （1）选择“文件 打开”命令，在弹出的对话框中选择“Ch09 素材 精品沙发网页 index.html”文件，单击“打开”按钮，效果如图 9-48 所示。 （2）选择“窗口 资源”命令，弹出“资源”面板，在“资源”面板中，单击左侧的“库” 按钮，进入“库”面板，选中如图 9-49 所示的表格。单击“库”面板下方的“新建库项目” 按钮，选定的对像添加为库项目，
12、在可输入状态下，将其命名，按键，如图 9-50 所示。 图 9-48 图 9-49 图 9-50 （3）选中下方的表格，如图 9-51 所示，在选中的状态下拖曳到“库”面板中，选定的图像添 加为库项目，将重命名并按键，效果如图 9-52 所示。 图 9-51 图 9-52 （4）选中如图 9-53 所示的文字，在选中的状态下拖曳到“库”面板中，选定的图像添加为库 项目，将重命名并按键，效果如图 9-54 所示。 第 9 章 模板和库 11 图 9-53 图 9-54 （5）选中如图 9-55 所示的图片，将其拖曳到“库”面板中，选定的文字添加为库项目，将重 命名并按 Enter 键，效果如图
13、9-56 所示。文档窗口中文本的背景变成黄色。 图 9-55 图 9-56 2. 利用库中注册的项目制作网页文档 （1）选择“文件 打开”命令，在弹出的对话框中选择“Ch09 素材 精品沙发网页 index2.html”文件，单击“打开”按钮，效果如图 9-57 所示。 图 9-57 Dreamweaver CS5 中文版实例教程 12 （2）将鼠标置入到单元格中，如图 9-58 所示。选择“库”面板中的“shafa-logo 项” ，如图 9-59 所示，将其拖曳到单元格中，如图 9-60 所示效。 （3）使用相同的方法，选择其他添加的项目插入到网页空白单元格，效果如图 9-61 所示。 图 9-58 图 9-59 图 9-60 图 9-61 （4）保存文档，按键，预览效果如图 9-62 所示。 图 9-62
