通过DreamweaverCS3学习HTMLDIVCSS教学第17章 模板制作与应用.ppt

建网站 http// 第17章 模板制作与应用 在实际的网页制作过程中，有时会遇到很多的页面（如不同的栏目）具有相同的布局。制作时为了避免这种重复的操作，设计者可以使用Dreamweaver CS3提供的“模板”功能，将具有相同整体布局结构的页面制作成模板，将相同的布局对象（如页面头部，页脚等）制作成库文件。这样，当设计者再次制作该页面时，可以直接使用库文件，从而可以节省很多不必要的重复操作。本章将从模板简介、模板的制作和模板的应用三个方面对模板进薪樯堋 17.1 模板简介 Dreamweaver CS3中的模板是一种特殊类型的文档，它用于设计布局比较固定的页面。用户可以创建基于模板的页面布局。 17.1.1 模板的作用 模板最大的作用就是可以大大提高设计者的工作效率。当设计者对模板进行修改后，所有使用了这个模板的网页内容都将随之被修改。简单地说，就是一次可以更新多个页面，这也是模板强大的功能之一。在实际工作中，尤其是针对一些大型的网站，其效果更是非常明显。所以，模板与基于模板的网页之间保持了一种连接的状态，这两者之间共同的内容也将能够保持完全的一致。 17.1.2 适合使用模板的网页 如果一个网站的布局比较统一，拥有相同的导航，且显示不同栏目内容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。这类似于前面章节中介绍的框架技术。有些类型的网站采用框架技术或模板技术，最终的效果基本相同。例如，下面的网站就适合采用模板来进行布局，如图所示。这些页面虽然是不同的栏目，拥有不同的内容，但却具有相同的布局版式。 适合使用模板的布局栏目（一） 适合使用模板的布局栏目（二） 17.2 模板元素的操作 模板实际上就是一种文档，其扩展名为.dwt，存放在根目录下的Templates文件夹中。如果该文件夹在站点中不存在，Dreamweaver将会在保存新建模板时自动创建。 17.2.1 创建模板 在Dreamweaver CS3中有两种创建模板的方法：一种是将现有的网页文件另存为模板，然后根据需要进行修改；另一种是直接新建一个空白模板，再在其中插入需要显示的文档内容。下面就以前做过的页面头部、主体版面和页脚构成的页面为例，分别使用两种方法将其制作成模板文件。 1．使用网页另存为的方法创建模板 使用网页另存为的方法创建模板的具体步骤如下： 17.2.1 创建模板 2．使用新建空白模板的方法创建模板 使用新建空白模板的方法创建模板的具体步骤如下： 17.2.2 创建可编辑区域 创建模板后接着要进行的操作是创建可编辑区域。可编辑区域可以控制模板页面哪些区域可以编辑，哪些区域不可以编辑。模板的可编辑区域主要包括以下操作。 1．插入可编辑区域 插入可编辑区域的具体步骤如下： 17.2.2 创建可编辑区域 2．选择可编辑区域 图 直接选择可编辑区域 在模板文档和基于模板文档中，都可以很容易地标识和选择模板区域。选择的方法可分为两种：直接选择和菜单选择。 17.2.2 创建可编辑区域 3．删除可编辑区域 如果已经将模板文件的一个区域标记为可编辑，而现在想再次锁定它（使其在基于模板的文件中不可编辑），可先选中该可编辑区域，然后单击【修改】|【模板】|【删除模板标记】命令，可编辑区域即会被删除，而之前其中的内容会被保留。如果要删除某个可编辑区域和其中的内容，选中该可编辑区域后按Delete键即可。 17.2.2 创建可编辑区域 4．更改可编辑区域的名称 已经插入的可编辑区域仍然可以再次更改它的名称。具体的操作步骤如下： 17.2.3 创建基于模板的文档 在创建模板后，就可以向空白文档中应用模板了。创建基于模板的新文档有很多方法，如可以使用【资源】浮动面板，或单击菜单【文件】|【新建】命令。本章主要介绍【资源】浮动面板的方法，其他方法也大同小异，读者可以自己进行尝试。使用【资源】浮动面板创建基于模板文档的具体操作步骤如下： 17.2.4 分离文档中使用的模板 若要更改基于母本的文档的锁定区域，必须将该文档从模板中分离。将文档分离后，整个文档中的内容都将变为可编辑的状态。分离文档中的模板具体的操作步骤如下： 17.2.5 更新模板及基于模板的网页 更改并保存模板时，Dreamweaver CS3可以自动更新基于该模板的所有文档。读者也可以手动更新这些文档。更新模板的具体操作步骤如下： 17.2.6 模板的嵌套 与表格和层相同，模板也可以进行嵌套。嵌套模板是基本模板的一种扩展。读者可以通过保存一个基于模板的文档，然后将该文档另存为一个新模板的方式来嵌套模板。嵌套多个模板会使布局变得更加精确。图17.19 单击【从模板新建】命令 在默认情况下，基本模板中的所有可编辑区域都将通过