《Dreamweaver CS3中文版实例教程 1CD 教学课件 ppt 吴教育习题答案 09章》由会员分享，可在线阅读，更多相关《Dreamweaver CS3中文版实例教程 1CD 教学课件 ppt 吴教育习题答案 09章（18页珍藏版）》请在金锄头文库上搜索。
1、第9章 模板和库模板和库 课堂练习节日礼品购物网【练习知识要点】使用“库”面板添加库项目。使用库中注册的项目制作网页文档。如图9-1所示。【效果所在位置】光盘/Ch09/效果/节日礼品购物网/index.html。图9-19.4.1 在模板文档中定义可编辑区域（1）选择“文件 打开”命令，在弹出的对话框中选择“Ch09 clip 节日礼品购物网 index.html”文件，单击“打开”按钮，效果如图9-2所示。 图9-2（2）将光标置入到右侧的单元格中，在“插入 常用”面板中单击“表格”按钮，在弹出的对话框中进行设置，如图9-3所示，单击“确定”按钮，效果如图9-4所示。 图9-3 图9-4（
2、3）选择“文件 另保存为模板”命令，在“另存为”对话框中输入lipin，如图9-5所示，单击“保存”按钮，弹出提示对话框，如图9-6所示，单击“是”按钮，切换到模板界面。 图9-5 图9-6（4）将鼠标置入到第1行第1列单元格中，如图9-7所示。在“插入 常用”面板中单击“可编辑区域”按钮，弹出“新建可编辑区域”对话框，在“名称”选项的对话框中输入neirong1，如图9-8所示，单击“确定”按钮，效果如图9-9所示。 图9-7 图9-8图9-9（5）将鼠标置入到第1行第2列单元格，如图9-10所示。选择“插入记录 模板对象 可编辑区域”命令，弹出“新建可编辑区域”对话框，在“名称”选项的对话
3、框中输入goumai，如图9-11所示，单击“确定”按钮，效果如图9-12所示。 图9-10 图9-11图9-12（6）用相同的方法，为其他单元格设定可编辑区域，效果如图9-13所示。选择“文件 保存”命令，将模板保存。图9-139.4.2 使用模板文档制作其他网页文档（1）选择“文件 新建”命令，弹出“新建文档”对话框，单击“模板中的页”选项，选择前面制作的模板名称moban，如图9-14所示，单击“创建”按钮，如图9-15所示。 图9-14 图9-15（2）选择“文件 保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择当前站点目录保存路径，在“文件名”选项的文本框中输入“i
4、ndex1”，单击“保存”按钮，返回网页编辑窗口。（3）将第1行第1列中的内容删除，在“插入 常用”面板中单击“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘目录下“Ch09 clip 节日礼品购物网 images”文件夹中的“images_03.jpg”，单击“确定”按钮完成图片的插入，效果如图9-16所示。（4）用同样的方法删除其他单元格的内容，将图片“a_04.jpg”插入到第1行第2列、“a_06.jpg”插入到第2行第1列、“a_07.jpg”插入到第2行第2列中，效果如图9-17所示。 图9-16 图9-17（5）保存文档，按键，预览效果如图9-18所示。图9-189.4.
5、3 修改模板文档（1）调出“资源”面板，单击左侧的“模板”按钮，如图9-19所示。（2）双击面板中的名称lupin，打开模板文档，如图9-20所示。 图9-19 图9-20（3）分别单击可编辑领域的青色边框，按键，将其删除，效果如图9-21所示。图9-21（4）将表格的第1行第1列和第2行第1列单元格同时选中，如图9-22所示，单击“属性”面板中的“合并单元格”按钮，将选中的单元格合并，效果如图9-23所示。 图9-22 图9-23（5）跟据上面的制作方法，分别单击“可编辑区域”按钮后，用“biao1”、“biao2”、“neirong”重新设定编辑区域，如图9-24所示。图9-24（6）选择
6、“文件 保存”命令，弹出提示对话框，单击“更新”按钮，在弹出的对话框中选择“goumai”，如图9-25所示，在“将内容移到新区域”选项的下拉列表中选择“neirong”，如图9-26所示。用相同的方法，在列表中选择要替换的前一次的名称，在下面的列表中选择重新指定的名称，如图9-27所示。 图9-25 图9-26图9-27（7）单击“确定”按钮，弹出“更新页面”对话框，如图9-28所示，单击“关闭”按钮。（8）切换到index1.html文档窗口中，网页文档的结构生成变化，如图9-29所示。 图9-28 图9-29（9）选择如图9-30所示的图片，按键，将其删除，效果如图9-31所示。 图9-
7、30 图9-31（11）选择如图9-32所示的图片，在“属性”面板中，将“宽”、“高”选项均设为350、217，如图9-33所示。 图9-32 图9-33（12）保存文档，按键预览效果，如图9-34所示。图9-34 课堂练习啤酒世界【练习知识要点】使用可编辑区域制作可编辑区域。使用模板文档制作其他网页文档效果。如图9-35所示。【效果所在位置】光盘/Ch09/效果/啤酒世界/index.html图9-359.5.1 在模板文档中定义可编辑区域（1）选择“文件 打开”命令，在弹出的对话框中选择“Ch09 clip 啤酒世界 index.html”文件，单击“打开”按钮，效果如图9-36所示。 图
8、9-36（2）将光标置入到右侧的单元格中，在“插入 常用”面板中单击“表格”按钮，在弹出的对话框中进行设置，如图9-37所示，单击“确定”按钮，效果如图9-38所示。 图9-37 图9-38（3）选择“文件 另存为模板”命令，在“另存为”对话框中输入moban，如图9-39所示，单击“保存”按钮，弹出提示对话框，如图9-40所示，单击“是”按钮，切换到模板界面。 图9-39 图9-40（4）将鼠标置入到第1行单元格中，如图9-41所示。在“插入 常用”面板中单击“可编辑区域”按钮，弹出“新建可编辑区域”对话框，在“名称”选项的对话框中输入zixun，如图9-42所示，单击“确定”按钮，效果如图
9、9-43所示。 图9-41 图9-42 图9-43（5）将鼠标置入到第2行单元格，如图9-44所示。选择“插入记录 模板对象 可编辑区域”命令，弹出“新建可编辑区域”对话框，在“名称”选项的对话框中输入yinliao，如图9-45所示，单击“确定”按钮，效果如图9-46所示。 图9-44 图9-45 图9-46（6）用相同的方法，为其他单元格设定可编辑区域，效果如图9-47所示。选择“文件 保存”命令，将模板保存。图9-479.5.2 使用模板文档制作其他网页文档（1）选择“文件 新建”命令，弹出“新建文档”对话框，单击“模板中的页”选项，选择前面制作的模板名称moban，如图9-48所示，单
10、击“创建”按钮，如图9-49所示。 图9-48 图9-49（2）选择“文件 保存”命令，弹出“另存为”对话框，在“保存在”选项的下拉列表中选择当前站点目录保存路径，在“文件名”选项的文本框中输入“index1”，单击“保存”按钮，返回网页编辑窗口。（3）将第1行中的内容删除，在“插入 常用”面板中单击“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘目录下“Ch09 clip 啤酒世界 images”文件夹中的“img_04.jpg”，单击“确定”按钮完成图片的插入，效果如图9-50所示。（4）用同样的方法删除其他单元格的内容，将图片“img_07.jpg”插入到第2行、“img_09.
11、jpg”插入到第3行、“img_11.jpg”插入到第4行中，效果如图9-51所示。 图9-50 图9-51（5）保存文档，按键，预览效果如图9-52所示。图9-529.5.3 修改模板文档（1）调出“资源”面板，单击左侧的“模板”按钮，如图9-53所示。（2）双击面板中的名称“moban”，打开模板文档，如图9-54所示。 图9-53 图9-54（3）分别单击可编辑领域的青色边框，按键，将其删除，效果如图9-55所示。图9-55（4）将表格的第1行和第2行单元格同时选中，如图9-56所示，单击“属性”面板中的“合并单元格”按钮，将选中的单元格合并，效果如图9-57所示。 图9-56 图9-5
12、7（5）跟据上面的制作方法，分别单击“可编辑区域”按钮后，用“biao1”、“biao2”、“biao3”重新设定编辑区域，如图9-58所示。图9-58（6）选择“文件 保存”命令，弹出提示对话框，单击“更新”按钮，在弹出的对话框中选择“neirong”，如图9-59所示，在“将内容移到新区域”选项的下拉列表中选择“biao1”，如图9-60所示。用相同的方法，在列表中选择要替换的前一次的名称，在下面的列表中选择重新指定的名称，如图9-61所示。 图9-59 图9-60图9-61（7）单击“确定”按钮，弹出“更新页面”对话框，如图9-62所示，单击“关闭”按钮。（8）切换到index1.html文档窗口中，网页文档的结构生成变化，如图9-63所示。 图9-62 图9-63（9）选择如图9-64所示的图片，按键，将其删除，效果如图9-65所示。 图9-64 图9-
