《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-