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

《网页设计与制作案例教程-电子教案第14单元》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、7.5　利用模板和库制作网页在进行大量的页面制作时，很多页面会用到相同的布局、图片和文字等元素。为了避免重复劳动，可以使用Dreamweaver8提供的模板和库功能，将具有相同版面结构的页面制作成模板，将相同的页面元素制作成库项目，并存储在库文件中以便随时调用。课程引导（1）理解模板和库的作用。（2）学会将已有网页生成模板的操作方法。（3）掌握如何编辑模板和将模板生成新网页的操作方法。（4）掌握如何应用库项目制作网页。知识技能目标网页浏览效果展示网页08.html的浏览效果如图所示。图7-71应用模板制作的网

2、页效果本章操作任务（1）在站点“长沙世界之窗”下创建子文件夹“08模板和库”，在“08模板和库”文件夹中创建一个网页文档081.html。（2）利用上一步所创建的网页081.html制作成模板文件“08.dwt”。（3）在模板文件中定义可编辑区域、可选区域、可编辑标签属性。（4）创建一个基于模板08.dwt的网页，该网页命名为“08.html”。（5）创建一个应用库的网页083.html。7.5.1　模板概述在Dreamweaver8中，模板是一种特殊的文档，可被理解成一种模型，用这个模型可以方便地制作出很多

3、的页面，然后在此基础上可以对每个页面进行改动，加入个性化的内容。7.4.2　框架的创建与设置创建一个网页模板文件“08.dwt”，其详细操作过程如下：1．新建网页在“长沙世界之窗”站点下创建文件夹“08模板和库”，在“08模板和库”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。在同一文件夹下创建一个命名为“081.html”的网页文档。保存该网页文档。（1）插入表格网页081.html用4个表格来布局网页元素。2．插入表格，布局网页将光标置于文档窗口左上角，插入一个1行1列的表格1。然后在

4、1行1列表格下面，插入一个9行3列的表格2。接着在9行3列表格下面，插入一个3行1列的表格3。三个表格插入完成后如图7-72所示。将表格2中的单元格“a”至单元格“i”合并为一个单元格，将单元格“j”至单元格“s”合并为一个单元格。然后在右边的合并单元格中插入一个6行3列的嵌套表格4。（2）设置表格属性按表7-1中的尺寸，利用表格“属性”面板设置四个表格的尺寸。表格名称行列宽高对齐背景图像背景颜色表格111780140居中对齐表格293780755居中对齐image/bj08.jpg表格331780居中对齐#

5、CCFFCC表格463100%默认表7-1各个表格的主要参数设置三个表格插入完成后如图7-72所示。表格2三列的宽度分别设置为：39px、181px、560px；表格3三行的高度分别设置为：22px。将表格1、表格2、表格3的“边框”设置为0，表格4的“边框”设置为“1px”。（3）在表格中输入文字、插入图像在表格1中插入一幅图像，在表格2中插入四幅图像，在表格3中分别输入三行文字，三行文字都设置为“居中”。第一行中的文字用“

6、”分隔，且所有的文本的“链接”都设置为“#”。（4）保存该网页文档。设置完成后如图

7、7-74所示。利用上一步所创建的网页081.html制作成模板，如果该网页已被关闭，应先打开该网页。将该网页另存为模板的步骤如下：（1）在Dreamweaver8主窗口中，单击菜单【文件】→【另存为模板…】，弹出“另存模板”对话框。3．创建模板（2）在“另存为模板”对话框中，“站点”下拉列表框选择模板保存的站点，本项目选择“长沙世界之窗”；“现存的模板”列表框中显示了当前站点中的所有模板；“描述”用于输入对模板的说明文字；“另存为”文本框输入模板的名称，本项目输入“08”。（3）设置完毕后，在“另存为模板”对

8、话框中，单击【保存】按钮，会出现一个“要更新链接吗？”提示信息对话框，在该对话框中单击【是】按钮。7.5.3　编辑和更新模板对模板“08.dwt”按以下要求进行编辑：（1）将表格1中的图像，表格2中插入图像的单元格设置为可编辑区域。（2）将表格3设置为不可编辑的可选区域。（3）将表格4设置为可编辑的可选区域。（4）将表格2的“背景图像”设置为可编辑标签属性。对模板08.dwt进行编辑的操作过程如下：1．打开Templates文件夹中模板文件08.dwt。2．定义可编辑区域设置表格1中的图像为可编辑区域，操作步

9、骤如下：（1）单击表格1中的图像，选中该图像。（2）在Dreamweaver8主窗口中，单击菜单【插入】→【模板对象】→【可编辑区域】。（3）在“新建可编辑区域”对话框中给该可编辑区域命名，例如名称为“EditRegion1”，然后单击【确定】按钮。（4）页面中的可编辑区域有蓝色标签，标签上有可编辑区域的名称。设置可编辑区域后，可以在日后更改它的名称，更改可编辑区域名称的步骤如下：（1）单击图7-7