《网页设计基础教程与上机指导(第2版)》第9章：使用模板与库

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