http:/www.wenuan.com.cn第9章 使用模板与库教学提示和教学目标 9.1 模板的创建 9.2 库 的 创 建http:/www.wenyuan.com.cn教学提示和教学目标n教学提示：在网页设计与制作过程中，为了保证网站中各个网 页在设计风格上的一致性，通常采用一级、二级、三级页面等 方法来设计网页。每一级的网页具有很多相同的地方，如相同 的导航栏、网站的版权信息等。按照常规方法，制作这些网页 需要很多重复的工作，在Dreamweaver中提供了模板和库工 具，可以一次性把相同的部分做成模板或库，把那些网页中都 不相同的部分做成可编辑区，具体设计时添加相应的内容就可 以，这样就大大简化了网页设计，提高了工作效率。n教学目标： 掌握模板的创建和应用 掌握利用模板更新页面 掌握创建库文件 掌握利用库更新站点网页http:/www.wenyuan.com.cn9.1 模板的创建n在Dreamweaver中，模板是一种特殊的文档 ，可以利用模板创建新网页，从而得到与模板 相似但又有所不同的新网页，当修改模板时使 用该模板创建的所有网页可以一次自动更新， 这就大大提高了网页更新和维护的效率。n9.1.1 创建模板n9.1.2 定义可编辑区域n9.1.3 应用模板n9.1.4 更新网页http:/www.wenyuan.com.cn9.1.1 创建模板n创建模板一般有以下三种方法。 1. 从新文档创建模板 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框，在 对话框中选择【常规】选项卡中【类别】列表框中的【模板页】选 项，在【模板页】列表框中选择【HTML模板】选项。 (2) 单击【创建】按钮，创建一空白模板网页。 (3) 选择【文件】|【另存为】命令，弹出Dreamweaver 8提示 框。 (4) 单击【确定】按钮，弹出【另存为】对话框，在对话框中的【 文件名】文本框中输入index，【文件类型】选择模板文件 (*.dwt) ，单击【保存】按钮，即可完成模板的创建。 2. 从资源管理器中创建模板 3. 从现在文档创建模板http:/www.wenyuan.com.cn9.1.2 定义可编辑区域n可编辑模板区域就是基于模板页面中的那些可编辑的区域。可以将整个表格或 单独的表格单元格标记为可编辑区域，但不能将多个表格单元格标记为单个可 编辑区域。在插入可编辑区域之前，应该将正在其中工作的文档另存为模板。n共有四种类型的模板区域：可编辑区域、重复区域、可选区域和可编辑标签属 性。 【可编辑区域】：在创建模板文档的时候，可以进行添加、修改、删除等 操作的区域。可以将模板的任何区域定义为可编辑区域，一个模板中至少 要包含一个可编辑区域，否则，利用该模板创建的页面将无法编辑。 【重复区域】：可以在文档内重复添加的区域。 【可选区域】：在模板中定义为可选的区域。 【可编辑标签属性】：可以在模板中解锁标签属性，以便该属性可以在基 于模板的页面中编辑。 http:/www.wenyuan.com.cn9.1.3 应用模板n可以使用【新建文档】对话框从Dreamweaver 8定义的任何站点中选择模板，有 了模板，就可以快速、高效地设计出风格一致的网页。利用模板创建网页的具体操 作步骤如下。 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框，如图9.18所示。 (2) 在对话框中选择【模板】选项卡中【模板用于】列表框中的【站点“9.1”】，在【站 点“9.1”】列表框中选择index1，如图9.19所示 (3) 单击【创建】按钮，利用模板创建网页。 (4) 将鼠标指针置于可编辑区域中，选择【插入】|【表格】命令，插入2行1列的表格 。 (5) 将光标置于第1行单元格中，插入图像。 (6) 将光标置于第2行单元格中，输入文字. (7) 保存文档，按F12键在浏览器中预览效果。http:/www.wenyuan.com.cn9.1.4 更新网页n应用模板创建网页既可以保持整个网站的风格一致，又可节省时间，模板 最大的作用就是一次更新多个应用了该模板的页面。n当对模板进行了修改，Dreamweaver 8会提示更新所有基于该模板的页 面，也可以手动更新当前页面或整个站点。 (1) 打开模板文档，选中文字“返回首页”，在【属性】面板中单击【链 接】文本框右边的【浏览】按钮，在弹出的【选择文件】对话框中选 择相应的链接文件，单击【确定】按钮，创建链接。 (2) 用同样的方法将其他的导航链接到相应的网页文档，选择【文件】 |【另存为】命令，弹出【更新模板文件】对话框。 (3) 单击【更新】按钮，基于该模板制作的网页都会自动更新。http:/www.wenyuan.com.cn9.2 库 的 创 建n在Dreamweaver 8中除了模板外，还有一种 网页快速编辑工具，就是库。库是一种用来存 储在整个网站上经常重复使用或更新的页面元 素的方法，这些元素称为库项目， Dreamweaver 8将库项目存储在每个站点的 本地根文件夹内的Library文件夹中。n9.2.1 创建库项目n9.2.2 使用库项目http:/www.wenyuan.com.cn9.2.1 创建库项目n可以从文档body标签之间的任意元素创建库项目，这些元素包括文本、表 格、表单、Java Applets、插件、ActiveX元素、导航栏和图像。创建库 项目具体操作步骤如下。 (1) 选择【文件】|【新建】命令，弹出【新建文档】对话框。 (2) 选择【常规】选项卡中的【类别】列表框的【基本页】选项，在【基本页 】列表中选择【库项目】选项。 (3) 单击【创建】按钮，创建一个空白网页。 (4) 选择【文件】|【另存为】命令，弹出【另存为】对话框，在对话框中的 【文件名】文本框中输入名称top.lbi，【保存类型】选择库文件。 (5) 将鼠标指针置于页面中，选择【插入】|【表格】命令，插入2行1列的表 格。 (6) 将鼠标指针置于第1行单元格中，选择【插入】|【图像】命令，弹出【选 择图像源文件】对话框，在对话框中选择相应的图像文件，单击【确定】按钮 ，插入图像，如图9.33所示 。 (7) 将鼠标指针置于第2行单元格中，在【属性】面板中单击【背景】文本框 后的按钮，弹出【选择图像源文件】对话框，在对话框中选择相应的背景图像 ，单击【确定】按钮，插入背景图像，将【高】设置为150，如图9.34所示。 (8) 选择【文件】|【保存】命令，即可创建库项目。http:/www.wenyuan.com.cn图9.33 插入图像 图9.34 插入背景图像http:/www.wenyuan.com.cn9.2.2 使用库项目n库项目是可以在多个网页中重复使用的网页元素，每当更改某 个库时，都可以同时更新所有使用该库的网页文档，具体操作 步骤如下。 (1) 打开网页文档，将鼠标指针置于要插入库项目的位置。 (2) 选择【窗口】|【资源】命令。 (3) 选择命令后，打开【资源】面板，在【资源】面板中单击【库】图 标，选择【库】 (4)单击【资源】面板中的【插入】按钮，将库 文件插入到网页中，如图9.38所示。 (5) 保存文档，按F12键在浏览器中预览效果，如图9.39所示。