网页设计与网站建设(第二版) 教学课件 作者 杜永红第8章 模板与库的应用.ppt

《网页设计与网站建设(第二版) 教学课件 作者 杜永红第8章 模板与库的应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页设计与网站建设》主讲人：杜永红第8章模板与库的应用8.28.38.48.1模板的创建和编辑模板的应用和更新使用库利用模板和库生成站点的制作过程利用模板和库设计风格一致的网站，使用模板和库的组合使得建设网站和维护网站变得很轻松，尤其在对一个规模较大的网站进行建设与维护时，就会体会到模板和库的好处。【本章学习目的】（1）掌握模板的创建与编辑（2）掌握模板的应用与更新（3）了解如何应用库一个成功的网站首先要具备自己独特的风格，才能够在茫茫的网络中脱颖而出，给人留下深刻的印象。但仅凭网站中的一两个较好的页面，很难收到良好的效果。因此就需要整个站点内的页面体现出统一的风格。因此通过使用模板能

2、够生成多个具有相似结构和外观网页，从而提高网页制作效率。本实例为利用模板和库技术生成网站实例—西京园酒店网站实例，如下图所示。在本网站实例主要涉及到以下知识点：网页版面布局的设计；划分模板锁定区域和可编辑区域；创建模板和编辑模板，最后根据模板快速创建网页。案例导入：8.1模板的创建和编辑模板最显著的特征就是锁定区域和可编辑区域之分。锁定区域主要用来锁定体现网站风格部分，而将经常要改变的文字、图像、链接等网页元素设置成可编辑区域，网页中只编辑可编辑区域的内容，从而得到与模板相似但又有所不同的新的网页。8.1.1创建模板创建模板有二种常用的方法：一是创建新模板，二是将当前网页另存为模板。1.

3、创建新模板创建新模板可通过以下两种方法来实现：方法一：选择“文件”菜单｜“新建”命令，弹出“新建文档”对话框中，选择“空白页”选项卡｜“HTML模板”，单击“创建”按钮，方法二：选择“窗口”菜单｜“资源”命令，或按F11键打开“资源”面板，单击“资源”面板左边的“模板”选项，单击右下角的新建模板按钮。2.将当前文档另存为模板将一个编辑好的网页按照要求加以修改，然后另存为模板。8.1.2编辑模板首先划分可编辑区域和锁定区域，然后编辑模板，通常是像编辑网页一样先将锁定区域编辑好，然后再定义可编辑区域。可编辑区域：在模板中可编辑区域对应网页中的可编辑部分，锁定区域是那些不可编辑的部分。在默认的

4、方式下，Dreamweaver将新模板的所有部分设置为不可编辑区域，由用户来定义可编辑区域。在编辑模板时，无论是可编辑区域还是锁定区域都是可以编辑的。但是将模板应用到网页中，在网页中的锁定区域是不可以编辑的。常用定义可编辑区域的方法有二种，首先在模板中将光标单击要新建可编辑区域位置，选择“插入”菜单｜“模板对象”｜“可编辑区域”命令，或单击“插入”栏｜“常用”选项｜“模板”｜“可编辑区域”按钮，弹出一个“新建可编辑区域”对话框，如图所示，输入这个区域的名称，单击“确定”按钮。8.2模板的应用和更新在网站建设中，可以为网站设计几套不同的模板，为网站的风格提供不同的方案，这样也可以不定期地改

5、变网站的风格，提高网站的吸收力。利用模板快速生成新的网页，也可以将模板应用于已经存在的网页。8.2.1模板的应用1．模板的应用选择“文件”菜单→“新建”命令，弹出“新建文档”对话框，选择“模板中的页”选项卡，单击左侧列表框中站点名称，再单击右侧的模板文件，选中“当模板改变时更新页面”复选框，然后单击“创建”按钮，实现通过模板快速创建网页，2．将模板应用于当前网页方法一：选择“窗口”菜单→“资源”命令，打开“资源”面板，在“资源”面板中选中要插入的模板，单击“应用”按钮，或直接拖动模板到页面中。方法二：选择“修改”菜单→“模板”选项→“应用模板到页”命令。如果模板与当前文档出现不匹配的情况

6、，弹出“不一致的区域名称”对话框，选中可编辑区域名称，在“将内容移到新区域”下拉列表中，设置移动或丢弃不匹配区域。3．当前网页不再使用模板当不再需要对一个网页使用模板时，选择“修改”菜单→“模板”选项→“从模板中分离”命令，将网页和与之关联的模板文件脱离。脱离之后的网页将变成普通网页，不再有可编辑区域和锁定区域之分。8.2.2模板的更新1.模板的修改模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过程中可能会有一些不合适的地方，比如：链接有错误、网页布局中单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域，是无法在网页编辑状态进行修改，因此需要对模板进行修改。打开模板文件，

7、对模板文件进行修改，针对在网页编辑中发现的问题进行修改。修改模板：对锁定区域进行修改。删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选择“修改”菜单｜“模板”｜“删除模板标记”命令，该可编辑区域就不存在了。2.用模板更新网页和网站一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部与其相关联的文档。这种使用模板更新文件的方法大大节省了用户的时间，尤其在涉及大量的改动时极为有效。8.3使用库Dreamweaver中提供