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

第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 单击【从模板新建】命令 在默认情况下，基本模板中的所有可编辑区域都将通过嵌套模板传递到基于该嵌套模板的文档中。这意味着如果在基本模板中创建一个可编辑区域，然后再创建一个嵌套模板，只要读者没有在嵌套