通过DreamweaverCS3学习HTML+DIV+CSS教学PPT第17章 模板制作与应用课件

第17章

模板制作与应用在实际的网页制作过程中，有时会遇到很多的页面（如不同的栏目）具有相同的布局。制作时为了避免这种重复的操作，设计者可以使用DreamweaverCS3提供的“模板”功能，将具有相同整体布局结构的页面制作成模板，将相同的布局对象（如页面头部，页脚等）制作成库文件。这样，当设计者再次制作该页面时，可以直接使用库文件，从而可以节省很多不必要的重复操作。本章将从模板简介、模板的制作和模板的应用三个方面对模板进薪樯堋第17章模板制作与应用在实际的网页制作过程中，有时会遇到17.1模板简介DreamweaverCS3中的模板是一种特殊类型的文档，它用于设计布局比较固定的页面。用户可以创建基于模板的页面布局。17.1模板简介DreamweaverCS3中的模板是17.1.1模板的作用模板最大的作用就是可以大大提高设计者的工作效率。当设计者对模板进行修改后，所有使用了这个模板的网页内容都将随之被修改。简单地说，就是一次可以更新多个页面，这也是模板强大的功能之一。在实际工作中，尤其是针对一些大型的网站，其效果更是非常明显。所以，模板与基于模板的网页之间保持了一种连接的状态，这两者之间共同的内容也将能够保持完全的一致。17.1.1模板的作用模板最大的作用就是可以大大提高设计17.1.2适合使用模板的网页如果一个网站的布局比较统一，拥有相同的导航，且显示不同栏目内容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。这类似于前面章节中介绍的框架技术。有些类型的网站采用框架技术或模板技术，最终的效果基本相同。例如，下面的网站就适合采用模板来进行布局，如图所示。这些页面虽然是不同的栏目，拥有不同的内容，但却具有相同的布局版式。

适合使用模板的布局栏目（一）

适合使用模板的布局栏目（二）17.1.2适合使用模板的网页如果一个网站的布局比较统一17.2模板元素的操作模板实际上就是一种文档，其扩展名为.dwt，存放在根目录下的Templates文件夹中。如果该文件夹在站点中不存在，Dreamweaver将会在保存新建模板时自动创建。17.2模板元素的操作模板实际上就是一种文档，其扩展名为17.2.1创建模板在DreamweaverCS3中有两种创建模板的方法：一种是将现有的网页文件另存为模板，然后根据需要进行修改；另一种是直接新建一个空白模板，再在其中插入需要显示的文档内容。下面就以前做过的页面头部、主体版面和页脚构成的页面为例，分别使用两种方法将其制作成模板文件。1．使用网页另存为的方法创建模板使用网页另存为的方法创建模板的具体步骤如下：17.2.1创建模板在DreamweaverCS3中有17.2.1创建模板2．使用新建空白模板的方法创建模板使用新建空白模板的方法创建模板的具体步骤如下：17.2.1创建模板2．使用新建空白模板的方法创建模板17.2.2创建可编辑区域创建模板后接着要进行的操作是创建可编辑区域。可编辑区域可以控制模板页面哪些区域可以编辑，哪些区域不可以编辑。模板的可编辑区域主要包括以下操作。1．插入可编辑区域插入可编辑区域的具体步骤如下：17.2.2创建可编辑区域创建模板后接着要进行的操作是创17.2.2创建可编辑区域2．选择可编辑区域图直接选择可编辑区域在模板文档和基于模板文档中，都可以很容易地标识和选择模板区域。选择的方法可分为两种：直接选择和菜单选择。17.2.2创建可编辑区域2．选择可编辑区域17.2.2创建可编辑区域3．删除可编辑区域如果已经将模板文件的一个区域标记为可编辑，而现在想再次锁定它（使其在基于模板的文件中不可编辑），可先选中该可编辑区域，然后单击【修改】|【模板】|【删除模板标记】命令，可编辑区域即会被删除，而之前其中的内容会被保留。如果要删除某个可编辑区域和其中的内容，选中该可编辑区域后按Delete键即可。17.2.2创建可编辑区域3．删除可编辑区域17.2.2创建可编辑区域4．更改可编辑区域的名称已经插入的可编辑区域仍然可以再次更改它的名称。具体的操作步骤如下：17.2.2创建可编辑区域4．更改可编辑区域的名称17.2.3创建基于模板的文档在创建模板后，就可以向空白文档中应用模板了。创建基于模板的新文档有很多方法，如可以使用【资源】浮动面板，或单击菜单【文件】|【新建】命令。本章主要介绍【资源】浮动面板的方法，其他方法也大同小异，读者可以自己进行尝试。使用【资源】浮动面板创建基于模板文档的具体操作步骤如下：17.2.3创建基于模板的文档在创建模板后，就可以向空白17.2.4分离文档中使用的模板若要更改基于母本的文档的锁定区域，必须将该文档从模板中分离。将文档分离后，整个文档中的内容都将变为可编辑的状态。分离文档中的模板具体的操作步骤如下：17.2.4分离文档中使用的模板若要更改基于母本的文档的17.2.5更新模板及基于模板的网页更改并保存模板时，DreamweaverCS3可以自动更新基于该模板的所有文档。读者也可以手动更新这些文档。更新模板的具体操作步骤如下：17.2.5更新模板及基于模板的网页更改并保存模板时，D17.2.6模板的嵌套与表格和层相同，模板也可以进行嵌套。嵌套模板是基本模板的一种扩展。读者可以通过保存一个基于模板的文档，然后将该文档另存为一个新模板的方式来嵌套模板。嵌套多个模板会使布局变得更加精确。图17.19单击【从模板新建】命令在默认情况下，基本模板中的所有可编辑区域都将通过嵌套模板传递到基于该嵌套模板的文档中。这意味着如果在基本模板中创建一个可编辑区域，然后再创建一个嵌套模板，只要读者没有在嵌套模板的区域中插入新的可编辑区域，则原可编辑区域将会出现在基于嵌套模板的文档中。17.2.6模板的嵌套与表格和层相同，模板也可以进行嵌套17.3模板的应用实际中使用模板，首先需要分析该模板中适合插入的可编辑区域的分布，也就是栏目之间拥有不同内容的位置。一般网页的不同大部分都位于页面的主体部分。然后，编辑可编辑区域，以制作适合特定栏目的页面。在上一节中介绍了模板的操作方法，在本节中，将根据之前制作的页面讲解模板的应用。17.3模板的应用实际中使用模板，首先需要分析该模板中适17.3.1分析布局打开之前创建的模板文档muban.dwt，如图所示。此页面是一个作品展示页，各栏目页面的不同主要是作品展示栏的不同。17.3.1分析布局打开之前创建的模板文档muban.d17.3.2插入可编辑区域删除了主体版面相关内容之后，需要在模板中创建可编辑区域，以便在后面的步骤中可以对基于模板的文档进行编辑。具体操作步骤如下：17.3.2插入可编辑区域删除了主体版面相关内容之后，需17.3.3应用模板设置模板后就可以使用这个模板了。具体操作步骤如下：17.3.3应用模板17.3.3应用模板至此基于模板创建的栏目页就制作完成了，可以发现，制作的步骤简单了许多，只需要做简单的文字输入和图片插入，大大提高了工作效率。17.3.3应用模板至此基于模板创建的栏目页就制作完成了17.4专家总结本章主要介绍了如何创建模板、如何创建可编辑区域、创建基于模板的文档和模板在网页中的相关应用。在第3节中通过实例说明了模板在网页制作中的应用过程。希望通过这一章的学习，读者能够掌握模板的精髓，并能熟练使用，以便在以后的网页设计过程中节省工作时间，提高工作效率。17.4专家总结本章主要介绍了如何创建模板、如何创建可编第17章

模板制作与应用在实际的网页制作过程中，有时会遇到很多的页面（如不同的栏目）具有相同的布局。制作时为了避免这种重复的操作，设计者可以使用DreamweaverCS3提供的“模板”功能，将具有相同整体布局结构的页面制作成模板，将相同的布局对象（如页面头部，页脚等）制作成库文件。这样，当设计者再次制作该页面时，可以直接使用库文件，从而可以节省很多不必要的重复操作。本章将从模板简介、模板的制作和模板的应用三个方面对模板进薪樯堋第17章模板制作与应用在实际的网页制作过程中，有时会遇到17.1模板简介DreamweaverCS3中的模板是一种特殊类型的文档，它用于设计布局比较固定的页面。用户可以创建基于模板的页面布局。17.1模板简介DreamweaverCS3中的模板是17.1.1模板的作用模板最大的作用就是可以大大提高设计者的工作效率。当设计者对模板进行修改后，所有使用了这个模板的网页内容都将随之被修改。简单地说，就是一次可以更新多个页面，这也是模板强大的功能之一。在实际工作中，尤其是针对一些大型的网站，其效果更是非常明显。所以，模板与基于模板的网页之间保持了一种连接的状态，这两者之间共同的内容也将能够保持完全的一致。17.1.1模板的作用模板最大的作用就是可以大大提高设计17.1.2适合使用模板的网页如果一个网站的布局比较统一，拥有相同的导航，且显示不同栏目内容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。这类似于前面章节中介绍的框架技术。有些类型的网站采用框架技术或模板技术，最终的效果基本相同。例如，下面的网站就适合采用模板来进行布局，如图所示。这些页面虽然是不同的栏目，拥有不同的内容，但却具有相同的布局版式。

适合使用模板的布局栏目（一）

适合使用模板的布局栏目（二）17.1.2适合使用模板的网页如果一个网站的布局比较统一17.2模板元素的操作模板实际上就是一种文档，其扩展名为.dwt，存放在根目录下的Templates文件夹中。如果该文件夹在站点中不存在，Dreamweaver将会在保存新建模板时自动创建。17.2模板元素的操作模板实际上就是一种文档，其扩展名为17.2.1创建模板在DreamweaverCS3中有两种创建模板的方法：一种是将现有的网页文件另存为模板，然后根据需要进行修改；另一种是直接新建一个空白模板，再在其中插入需要显示的文档内容。下面就以前做过的页面头部、主体版面和页脚构成的页面为例，分别使用两种方法将其制作成模板文件。1．使用网页另存为的方法创建模板使用网页另存为的方法创建模板的具体步骤如下：17.2.1创建模板在DreamweaverCS3中有17.2.1创建模板2．使用新建空白模板的方法创建模板使用新建空白模板的方法创建模板的具体步骤如下：17.2.1创建模板2．使用新建空白模板的方法创建模板17.2.2创建可编辑区域创建模板后接着要进行的操作是创建可编辑区域。可编辑区域可以控制模板页面哪些区域可以编辑，哪些区域不可以编辑。模板的可编辑区域主要包括以下操作。1．插入可编辑区域插入可编辑区域的具体步骤如下：17.2.2创建可编辑区域创建模板后接着要进行的操作是创17.2.2创建可编辑区域2．选择可编辑区域图直接选择可编辑区域在模板文档和基于模板文档中，都可以很容易地标识和选择模板区域。选择的方法可分为两种：直接选择和菜单选择。17.2.2创建可编辑区域2．选择可编辑区域17.2.2创建可编辑区域3．删除可编辑区域如果已经将模板文件的一个区域标记为可编辑，而现在想再次锁定它（使其在基于模板的文件中不可编辑），可先选中该可编辑区域，然后单击【修改】|【模板】|【删除模板标记】命令，可编辑区域即会被删除，而之前其中的内容会被保留。如果要删除某个可编辑区域和其中的内容，选中该可编辑区域后按Delete键即可。17.2.2创建可编辑区域3．删除可编辑区域17.2.2创建可编辑区域4．更改可编辑区域的名称已经插入的可编辑区域仍然可以再次更改它的名称。具体的操作步骤如下：17.2.2创建可编辑区域4．更改可编辑区域的名称17.2.3创建基于模板的文档在创建模板后，就可以向空白文档中应用模板了。创建基于模板的新文档有很多方法，如可以使用【资源】浮动面板，或单击菜单【文件】|【新建】命令。本章主要介绍【资源】浮动面板的方法，其他方法也大同小异，读者可以自己进行尝试。使用【资源】浮动面板创建基于模板文档的具体操作步骤如下：17.2.3创建基于模板的文档在创建模板后，就可以向空白17.2.4分离文档中使用的模板若要更改基于母本的文档的锁定区域，必须将该文档从模板中分离。将文档分离后，整个文档中的内容都将变为可编辑的状态。分离文档中的模板具体的操作步骤如下：17.2.4分离文档中使用的模板若要更改基于母本的文档的17.2.5更新模板及基于模板的网页更改并保存模板时，DreamweaverCS3可以自动更新基于该模板的所有文档。读者也可以手动更新这些文档。更新模板的具体操作步骤如下：17.2.5更新模板及基于模板的网页更改并保存模板时，D17.2.6模板的嵌套与表格和层相同，模板也可以进行嵌套。嵌套模板是基本模板的一种扩展。读者可以通过保存一个基于模板的文档，然后将该文档另存为一个新模板的方式来嵌套模板。嵌套多个模板会使布局变得更加精确。图17.19单击【从模板新建】命令在默认情况下，基本模板中的所有可编辑区域都将通过嵌套模板传递到基于该嵌套模板的文档中。这意味着如果在基本模板中创建一个可编辑区域，然后再创建一个嵌套模板，只要读者没有在嵌套模板的区域中插入新的可编辑区域，则原可编辑区域将会出现在基于嵌套模板的文档中。17.2.6模板的嵌套与表格和层相同，模板也可以进行嵌套17.3模板的应用实际中使用模板，首先需要分析该模板中适合插入的可编辑区域的分布，也就是栏目之间拥有不同内容的位置。一般