Dreamweaver应用之模版应用.pptVIP

《网页设计与网站建设》 【本章学习目的】 本章通过一个案例重点讲解了模板和库技术的应用，通过本章的学习，掌握利用模板和库技术创建风格一致的网站的方法。 在实际的网页制作过程中，有时会遇到很多的页面具有相同的布局。制作时为了避免这种重复的操作，设计者可以使用Dreamweaver 提供的“模板”功能，将具有相同整体布局结构的页面制作成模板，模板是一种特殊类型的文档，用于设计“ 固定的” 页面布局；然后便可以基于模板创建文档，创建的文档会继承模板的页面布局。模板最大的作用就是可以大大提高设计者的工作效率。 当设计者对模板进行修改后，所有使用了这个模板的网页内容都将随之被修改。简单地说，就是一次可以更新多个页面，这也是模板强大的功能之一。 将相同的布局对象（如页面头部，页脚等）制作成库文件。这样，当设计者再次制作该页面时，可以直接使用库文件，从而可以节省很多不必要的重复操作。 【例10.1】利用模板技术生成网站实例。 在本网站实例主要涉及到以下知识点： 首先进行网页版面布局的设计； 划分模板锁定区域和可编辑区域； 创建模板和编辑模板，最后根据模板快速创建网页。 10.2 创建和设置模板 模板就是网页的样板，关于模板最显著的特征就是锁定区域和可编辑区域之分。锁定区域主要用来锁定体现网站风格部分，而将经常要改变的文字、图像、链接等网页元素设置成可编辑区域，网页中只编辑可编辑区域的内容，从而得到与模板相似但又有所不同的新的网页。 10.2.1 创建模板 创建模板有二种常用的方法：一是可以基于现有文档创建模板，二使用资源面板来创建新模板。 基于现有文档创建模板 可以基于现有文档创建模板 1 打开要另存为模板的文档。 2 执行下列操作之一： ? 选择“ 文件”“ 另存为模板”。 ? 在“ 插入” 面板的“ 常用” 类别中，单击“ 模板” 按钮，然后从弹出菜单中选择“ 创建模板”。 3 从“ 站点” 弹出菜单中选择一个用来保存模板的站点，然后在“ 另存为” 框中为模板输入一个唯一的名称。 4 单击“ 保存”。Dreamweaver 将模板文件以文件扩展名 .dwt 保存在站点的本地根文件夹中的 Templates 文件夹中。 使用资源面板来创建新模板 1 在“ 资源” 面板（“ 窗口”“ 资源”）中，选择面板左侧的“ 模板” 类别 。 2 单击“ 资源” 面板底部的“ 新建模板” 按钮 。 一个新的、无标题模板将添加到“ 资源” 面板的模板列表中。 3 在模板仍处于选定状态时，输入模板的名称，然后按 Enter。Dreamweaver 在“ 资源” 面板和 Templates 文件夹中创建一个空模板。 10.2.2 创建可编辑区域 可编辑模板区域控制在基于模板的页面中用户可以编辑哪些区域。在插入可编辑区域之前，将要插入该区域的文档另存为模板。 可编辑区域：在模板中可编辑区域对应网页中的可编辑部分，锁定区域是那些不可编辑的部分。在默认的方式下，Dreamweaver将新模板的所有部分设置为不可编辑区域，由用户来定义可编辑区域。在编辑模板时，无论是可编辑区域还是锁定区域都是可以编辑的。但是将模板应用到网页中，在网页中的锁定区域是不可以编辑的。 创建可编辑区域的方法如下： 1 在“ 文档” 窗口中，执行下列操作之一选择区域： ? 选择想要设置为可编辑区域的文本或内容。 ? 将插入点放在想要插入可编辑区域的地方。 2 执行下列操作之一插入可编辑区域： ? 选择“ 插入”“ 模板对象”“ 可编辑区域”。 ? 右键单击，然后选择“ 模板”“ 新建可编辑区域”。 ? 在“ 插入” 面板的“ 常用” 类别中，单击“ 模板” 按钮，然后从弹出菜单中选择“ 可编辑区域”。 3 在“ 名称” 框中为该区域输入唯一的名称。（不能对特定模板中的多个可编辑区域使用相同的名称) 演示： 1、创建模板。根据布局图，画出模板布局。 2、在页面上插入 模板对象 可编辑区。 3、保存 10.3 模板的应用和更新 利用模板快速生成新的网页，也可以将模板应用于已经存在的网页。 1、单击“文件”-“新建”命令，调出“新建文档”对话框。单击“模板”标签，“新建文档”对话框变为“从模板新建”对话框。在“模板用于”列表框中单击“站点”列表项。 2、在可编辑区内输入内容，完成后单击保存，文件格式是html，完成网页制作。 实例演示 1、从模板创建页面 2、在可编辑区插入页面元素 3、保存 10.3.2 模板的更新 1. 模板的修改 模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过程