21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第十二章 利用模板和库设计网页

第12章利用模板和库设计网页 通过本章学习,应该掌握以下内容: 1.模板原理 2.创建、使用和管理模板的方法 3.利用模板更新网页 4.创建管理库项目 5.利用库更新网页

通过本章学习，应该掌握以下内容： 1. 模板原理 2. 创建、使用和管理模板的方法 3. 利用模板更新网页 4. 创建管理库项目 5. 利用库更新网页 第12章 利用模板和库设计网页

121利用模板创建网页 利用 Dremweaver mX的模板技术可以创建具有相 同页面布局的一系列文件,模板最大的好处还在于后 期维护方便,可以快速的改变整个站点的布局和外观 121.1模板原理 Dreamweaver模板是一种特殊类型的文档,也 可以说是一种用来制作具有相同风格页面的“模子”, 用户利用模板可以在短时间内设计大量风格相同或相 近的页面

12.1 利用模板创建网页 Dreamweaver 模板是一种特殊类型的文档，也 可以说是一种用来制作具有相同风格页面的“模子” ， 用户利用模板可以在短时间内设计大量风格相同或相 近的页面。 12.1.1 模板原理 利用Dremweaver MX的模板技术可以创建具有相 同页面布局的一系列文件，模板最大的好处还在于后 期维护方便，可以快速的改变整个站点的布局和外观

1212创建模板 1.将现有的文档保存为模板 将现有的文档保存为模板的操作步骤: (1)在 Dreamweaver mX中打开已有的网页。 (2)选择“文件”|“另存为模板”命令,打开“另存 模板”对话框,如图所示。 (3)在“站点”下拉列表框中选择站点名称,在“另 存为”文本框中输入模板名称。如果选择“现存的模 板”列表中的模板,则可用新的模板覆盖已有的模板, (4)单击“保存”按钮,就把当前页面保存为模板

将现有的文档保存为模板的操作步骤： （1）在Dreamweaver MX中打开已有的网页。 （2）选择“文件”|“另存为模板”命令，打开“另存 模板”对话框，如图所示。 （3）在“站点”下拉列表框中选择站点名称，在“另 存为”文本框中输入模板名称。如果选择“现存的模 板”列表中的模板，则可用新的模板覆盖已有的模板。 （4）单击“保存”按钮，就把当前页面保存为模板。 12.1.2 创建模板 1. 将现有的文档保存为模板

2.通过“资源”面板创建新模板 (1)选择“窗口”“资源”命令或按F11键,打开 “资源”模板。 (2)单击左边的“模板”按钮,打开“资源”面板 的模板类别。 (3)单击“资源”面板右下角的“新建模板”按钮, 这时在模板列表框中添加了一个“无标题”的模板。 (4)输入模板名称,并保存模板,就创建了一个 空白模板

2. 通过“资源”面板创建新模板 （1）选择“窗口”|“资源”命令或按F11键，打开 “资源”模板。 （2）单击左边的“模板”按钮，打开“资源”面板 的模板类别。 （3）单击“资源”面板右下角的“新建模板”按钮， 这时在模板列表框中添加了一个“无标题”的模板。 （4）输入模板名称，并保存模板，就创建了一个 空白模板

3.创建嵌套模板 创建嵌套模板的方法如下: (1)创建一个基于模板的文档。 (2)选择“文件”“另存为模板”命令,或单击插 入“模板”面板上的“创建嵌套模板”按钮,打开 “另存模板”对话框,将新文档另存为模板 (3)在新模板中可编辑区域添加其他内容, (4)保存该模板

创建嵌套模板的方法如下： （1）创建一个基于模板的文档。 （2）选择“文件”|“另存为模板”命令，或单击插 入“模板”面板上的“创建嵌套模板”按钮，打开 “另存模板”对话框，将新文档另存为模板。 （3）在新模板中可编辑区域添加其他内容。 （4）保存该模板。 3. 创建嵌套模板

121.3定义可编辑区域 模板创建完成后,就要为模板定义可编辑区域, 没有定义可编辑区域的模板是不能被使用的,因为 它的所有部分都是锁定的。“可编辑区域”是指基 于模板的页面中可以更改的内容,而基于模板的页 面中不可更改的部分为“不可编辑区域”或“锁定 区域是义可编辑区域 定义可编辑区域有两种方法。一种是选择已有的 部分页面内容将它指定为可编辑区域,另一种是 在当前光标处插入一个空的可编辑区域。(演示)

模板创建完成后，就要为模板定义可编辑区域， 没有定义可编辑区域的模板是不能被使用的，因为 它的所有部分都是锁定的。 “可编辑区域”是指基 于模板的页面中可以更改的内容，而基于模板的页 面中不可更改的部分为“不可编辑区域”或“锁定 区域” 。 12.1.3 定义可编辑区域 定义可编辑区域有两种方法。一种是选择已有的 一部分页面内容将它指定为可编辑区域，另一种是 在当前光标处插入一个空的可编辑区域。(演示) 1. 定义可编辑区域

2.删除可编辑区域 如果已经将模板文件的一个区域定义为可编辑区 域,而现在想要再次锁定它,使其为不可编辑区域, 可执行“删除模板标记”操作。 (1)在文档或标签选择器中,选择想要更改的可 编辑区域。 (2)按 Delect键,即可删除该可编辑区域;如果 选择“修改”|“模板”‖“删除模板标记”命令,可 以删除可编辑区域的标记,但区域还保留

2. 删除可编辑区域 如果已经将模板文件的一个区域定义为可编辑区 域，而现在想要再次锁定它，使其为不可编辑区域， 可执行“删除模板标记”操作。 （1）在文档或标签选择器中，选择想要更改的可 编辑区域。 （2）按Delect键，即可删除该可编辑区域；如果 选择“修改”|“模板”|“删除模板标记”命令，可 以删除可编辑区域的标记，但区域还保留

121.4应用模板 1.创建基于模板新页面 创建基于模板新页面的方法是:选择“文件”|“新 建”命令,打开“新建文档”对话框,选择“模板” 标签,打开“从模板新建”对话框,在对话框中选择 需要的模板,单击“创建”按钮即可。 示范演示

创建基于模板新页面的方法是：选择“文件”|“新 建”命令，打开“新建文档”对话框，选择“模板” 标签，打开“从模板新建”对话框，在对话框中选择 需要的模板，单击“创建”按钮即可。 12.1.4 应用模板 1. 创建基于模板新页面 示范演示

2.将模板应用到现有文档 在很多时候,已经有了大量未使用模板的页面, 现在想要将其转换为统一的外观,此时就可以利用将 模板应用到现有文档的方法来统一这些页面的风格 示范演示

在很多时候，已经有了大量未使用模板的页面， 现在想要将其转换为统一的外观，此时就可以利用将 模板应用到现有文档的方法来统一这些页面的风格。 2. 将模板应用到现有文档 示范演示

12.1.5管理模板 1.重命名模板 重新命名模板的方法如下: (1)打开“资源”面板的模板类别,选中要重命名的 模板,在模板名称上再单击一次,即可激活其文本编 辑状态;右击要重命名的模板,在打开的快捷菜单中 选择“重命名”命令,同样可以激活其文本编辑状态 (2)输入模板的新名称。 (3)单击模板名称区域外的任何位置,或按回车键 即可修改模板名称

12.1.5 管理模板 重新命名模板的方法如下： （1）打开“资源”面板的模板类别，选中要重命名的 模板，在模板名称上再单击一次，即可激活其文本编 辑状态；右击要重命名的模板，在打开的快捷菜单中 选择“重命名”命令，同样可以激活其文本编辑状态。 （2）输入模板的新名称。 （3）单击模板名称区域外的任何位置，或按回车键， 即可修改模板名称。 1. 重命名模板