6.1 设计统一风格的网页（课件）-高二《网页设计与制作》同步教学（北京出版社）

第6章 模板与网页特效 如果网站中很多网页使用相同的布局，就可以使用Dreamweaver的模板功能为这些布局相同的网页设计一个模板，然后以该模板为基础创建新的网页。 模板的主要用途是可以一次更新多个页面。当要修改这些网页的布局时，只需修改模板就可以了，方便了对网页的维护。另外，制作网页后，还可以在网页上添加一些特殊效果（如弹出特效、鼠标特效、状态栏特效等），来美化页面。 本章将学习创建模板与添加网页特效的方法。具体内容包括： （1）通过使用模板设计具有统一风格的网页。 （2）通过添加网页特效（弹出特效、鼠标特效、状态栏特效等）来美化页面。 第6章 模板与网页特效 6.1 设计统一风格的网页 6.2 添加网页特效 6.1 设计统一风格的网页 任务导入 学习目标 任务实施 思考与练习 任务导入 因为网站的需要，有很多风格一致的网页需要重复制作，看到小赵这么辛苦，老张告诉他，为保持整个网站风格一致，减轻修改工作量，可以使用模板制作其他网页。 本任务将学习创建模板设计统一风格网页的方法。 学习目标 （1）掌握网页中模板的创建和修改的方法。 （2）了解模板中定义可编辑区域的操作，并能够根据实际需要进行设置。 （3）掌握模板的使用与更新，能够根据模板页的修改而应用到利用此模板创建的网页。 任务实施 1. 模板的基础知识 模板实质上就是作为创建其他文档的基础文档。在创建模板时，可以说明哪些网页元素应该长期保留、不可编辑，哪些元素可以编辑修改。假如要为公司网站设计一个模板，就可以把公司的logo、banner和导航栏设置为锁定区（不可编辑区），把经常更新的内容设置为可编辑区。 任务实施 2. 创建模板 可以从空白HTML文档开始创建模板，也可以把现有的HTML文档存为模板，然后通过适当的修改，使之符合自己的要求。 （1）打开普通网页文件moban.htm，单击“文件”菜单→“另存为模板”命令。 “另存模板”对话框 任务实施 3. 定义可编辑区域 模板创建后，可以根据需要对模板中的具体内容进行编辑，指定哪些内容可以编辑，哪些内容不能编辑（锁定）。在模板文档中，可编辑区是页面中的变化部分（如新闻），锁定区是各页面中相对保持不变的部分（如导航栏等）。 当Dreamweaver创建模板后，默认为把所有区域标记为锁定。因此必须根据需要对模板进行编辑，把某些部分标记为可编辑的。具体操作如下： 任务实施 （1）选择需要设置为可编辑区域的文本或内容，如图所示。 （2）选择“插入记录”菜单→“模板对象”→“可编辑区域”命令。或者右键单击，在快捷菜单中选择“模板”→“新建可编辑区域”。 选择需设置为可编辑区域的内容 任务实施 4. 应用模板创建网页 有了模板，就可以应用模板快速、高效地设计出风格一致的网页。需要时，也可以通过修改模板来快速、自动更新使用模板设计的网页，使网页的维护变得轻松快捷。 任务实施 使用“文件”菜单→“新建”命令，在出现的对话框中选择一个模板，然后单击“创建”按钮，如图所示。 从模板创建新文档 任务实施 5. 更新模板并应用 模板创建好后并非一成不变，可以根据实际需要，随时修改模板以满足新的设计要求。当修改一个模板时，Dreamweaver会提示是否更新应用该模板的网页。当然也可以使用更新命令，手工更新当前网页或整个站点。 1）更新模板 要修改用于创建当前文档的模板，应选择“修改”菜单→“模板”→“打开附加模板”命令。打开模板之后，就可以根据需要修改模板的内容了。 模板修改完成后，如果需要应用当前模板的最新版本来更新当前文档时，应使用“修改”菜单→“模板”→“更新当前页”命令。 2）更新整个站点 要用模板的最新版本更新整个站点或应用特定模板的所有文档，可使用“修改”菜单→“模板”→“更新页面”命令。 思考与练习 1. 简述模板的使用方法。 2. 制作如图所示网页模板，并对新文档应用该模板，修改网页模板中的公司地址等信息，并更新应用的网页。 制作网页模板 $