网页设计与制作案例教程-电子教案第14单元.pptx

7.5　利用模板和库制作网页 课程引导 在进行大量的页面制作时，很多页面会用到相同的布局、图片和文字等元素。为了避免重复劳动，可以使用Dreamweaver 8提供的模板和库功能，将具有相同版面结构的页面制作成模板，将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。第一页，共五十八页。 知识技能目标 （1）理解模板和库的作用。 （2）学会将已有网页生成模板的操作方法。 （3）掌握如何编辑模板和将模板生成新网页的操作方法。 （4）掌握如何应用库项目制作网页。第二页，共五十八页。网页浏览效果展示 网页08.html的浏览效果如图所示。 图7-71　　应用模板制作的网页效果第三页，共五十八页。 本章操作任务 （1）在站点“长沙世界之窗”下创建子文件夹“08模板和库”，在“08模板和库”文件夹中创建一个网页文档081.html。 （2）利用上一步所创建的网页081.html制作成模板文件“08.dwt”。 第四页，共五十八页。 （3）在模板文件中定义可编辑区域、可选区域、可编辑标签属性。 （4）创建一个基于模板08.dwt的网页，该网页命名为“08.html”。 （5）创建一个应用库的网页083.html。第五页，共五十八页。7.5.1　模板概述 在Dreamweaver 8中，模板是一种特殊的文档，可被理解成一种模型，用这个模型可以方便地制作出很多的页面，然后在此基础上可以对每个页面进行改动，加入个性化的内容。第六页，共五十八页。7.4.2　框架的创建与设置 创建一个网页模板文件“08.dwt”，其详细操作过程如下：第七页，共五十八页。1．新建网页 在“长沙世界之窗”站点下创建文件夹“08模板和库”，在“08模板和库”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。在同一文件夹下创建一个命名为“081.html”的网页文档。保存该网页文档。 第八页，共五十八页。2．插入表格，布局网页（1）插入表格 网页081.html用4个表格来布局网页元素。 将光标置于文档窗口左上角，插入一个1行1列的表格1。然后在1行1列表格下面，插入一个9行3列的表格2。接着在9行3列表格下面，插入一个3行1列的表格3。第九页，共五十八页。三个表格插入完成后如图7-72所示。第十页，共五十八页。 将表格2中的单元格“a”至单元格“i”合并为一个单元格，将单元格“j”至单元格“s”合并为一个单元格。然后在右边的合并单元格中插入一个6行3列的嵌套表格4。第十一页，共五十八页。（2）设置表格属性 按表7-1中的尺寸，利用表格“属性”面板设置四个表格的尺寸。表7-1　　各个表格的主要参数设置表格名称行列宽高对齐背景图像背景颜色表格111780140居中对齐表格293780755居中对齐image/bj08.jpg表格331780居中对齐#CCFFCC表格463100%默认第十二页，共五十八页。三个表格插入完成后如图7-72所示。第十三页，共五十八页。 表格2三列的宽度分别设置为：39px、181px、560px；表格3三行的高度分别设置为：22px。将表格1、表格2、表格3的“边框”设置为0，表格4的“边框”设置为“1px”。 第十四页，共五十八页。 （3）在表格中输入文字、插入图像 在表格1中插入一幅图像，在表格2中插入四幅图像，在表格3中分别输入三行文字，三行文字都设置为“居中”。第一行中的文字用“|”分隔，且所有的文本的“链接”都设置为“#”。 第十五页，共五十八页。 （4）保存该网页文档。设置完成后如图7-74所示。第十六页，共五十八页。3．创建模板 利用上一步所创建的网页081.html制作成模板，如果该网页已被关闭，应先打开该网页。将该网页另存为模板的步骤如下： （1）在Dreamweaver 8主窗口中，单击菜单【文件】→【另存为模板…】，弹出“另存模板”对话框。 第十七页，共五十八页。（2）在“另存为模板”对话框中，“站点”下拉列表框选择模板保存的站点，本项目选择“长沙世界之窗”；“现存的模板”列表框中显示了当前站点中的所有模板；“描述”用于输入对模板的说明文字；“另存为”文本框输入模板的名称，本项目输入“08”。第十八页，共五十八页。 （3）设置完毕后，在“另存为模板”对话框中，单击【保存】按钮，会出现一个“要更新链接吗？”提示信息对话框，在该对话框中单击【是】按钮。第十九页，共五十八页。7.5.3　编辑和更新模板 对模板“08.dwt”按以下要求进行编辑： （1）将表格1中的图像，表格2中插入图像的单元格设置为可编辑区域。 （2）将表格3设置为不可编辑的可选区域。 （3）将表格4设置为可编辑的可选区域。 （4）将表格2的“背景图像”设置为可编辑标签属性。第二十页，共五十八页。 对模板08.dwt进行编辑的操作过程如