《网页设计与制作》.ppt

《《网页设计与制作》.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作》.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作,第七章模板与库的应用,实例导入：利用模板生成的站点,创建模板,模板的应用和更新,使用库,利用模板和库生成站点的制作过程,本章主要介绍了利用模板和库设计风格一致的网站，使用模板和库的组合使得建设网站和维护网站变得很轻松，尤其是在对一个规模较大的网站进行建设与维护时，就能体会到模板和库的好处。【本章学习目的】本章通过一个典型的网站案例重点讲解了模板和库技术的应用，通过本章的学习，掌握利用模板和库技术创建风格一致的网站的方法。,一个成功的网站首先要具备自己独特的风格，才能够在茫茫的网络中脱颖而出，给人留下深刻的印象。但仅凭网站中的一两个较好的页面，很难收到良好的效果。因此就需要整个站

2、点内的页面体现出统一的风格。因此通过使用模板能够生成多个具有相似结构和外观网页，从而提高网页制作效率。【例7.1】利用模板技术生成网站实例，如图7.1所示。在本网站实例主要涉及到以下知识点：首先进行网页版面布局的设计；划分模板锁定区域和可编辑区域；创建模板和编辑模板，最后根据模板快速创建网页。,7.2创建和设置模板,关于模板最显著的特征就是锁定区域和可编辑区域之分。锁定区域主要用来锁定体现网站风格部分，而将经常要改变的文字、图像、链接等网页元素设置成可编辑区域，网页中只编辑可编辑区域的内容，从而得到与模板相似但又有所不同的新的网页。,7.2.1创建模板,创建模板有二种常用的方法：一是创建新模板

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

4、分，锁定区域是那些不可编辑的部分。在默认的方式下，Dreamweaver将新模板的所有部分设置为不可编辑区域，由用户来定义可编辑区域。在编辑模板时，无论是可编辑区域还是锁定区域都是可以编辑的。但是将模板应用到网页中，在网页中的锁定区域是不可以编辑的。常用定义可编辑区域的方法有二种，首先在模板中将光标单击要新建可编辑区域位置，选择“插入”菜单“模板对象”“可编辑区域”命令，或单击“插入”栏“常用”选项“模板”“可编辑区域”按钮，弹出一个“新建可编辑区域”对话框，如图所示，输入这个区域的名称，单击“确定”按钮。,7.3模板的应用和更新,利用模板快速生成新的网页，也可以将模板应用于已经存在的网页。,

5、7.3.2模板的更新,1.模板的修改模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过程中可能会有一些不合适的地方，比如：链接有错误、网页布局中单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域，是无法在网页编辑状态进行修改，因此需要对模板进行修改。打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问题进行修改。修改模板：对锁定区域进行修改。删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选择“修改”菜单“模板”“删除模板标记”命令，该可编辑区域就不存在了。2.用模板更新网页和网站一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部与其相关联的文档。这种使用模

6、板更新文件的方法大大节省了用户的时间，尤其在涉及大量的改动时极为有效。,7.4使用库,Dreamweaver中提供了库的概念。库是用来存储想要在整个网站上经常重复使用或更新的网页元素，其它网页可调用库文件。这样一旦需要修改重复使用的部分，只需要修改库文件，而其它调用此库的页面将会被全部更新。,7.4.1创建库,库项目可以包含多种网页元素，如：图像、链接、表格、脚本等，但CSS样式表文件不能作为库项目添加到库。创建库的常用方法有三种：方法一：选择“窗口”菜单“资源”命令，打开“资源”面板，选择“库”选项，单击“资源”面板下方的“新建库项目”按钮。方法一：选择“文件”菜单“新建”命令，弹出“新建文

7、档”对话框，选择“常规”选项卡“基本页”“库项目”命令，单击“创建”按钮，如图所示。方法三：将已经编辑好的网页元素转换为库文件，首先选中要转换为库文件的网页元素，然后选择“修改”菜单“库”“增加对象到库”命令，当前选中的网页元素就会成为一个新的库项目以供其它网页调用。创建库文件后，站点中就会多出子文件夹library，库文件的默认存储路径就是该文件夹。库文件的后缀名为lbi。库的编辑与普通网页的编辑完全相同。,7.4.2应用库,库建立后，可以很轻松地将库应用于网页文件中。操作步骤如下：步骤1打开网页，把光标定位在需要插入库的位置。步骤2在“资源”面板中选择“库”选项，然后单击相应的库项目，单击

8、“插入”按钮，或者将库项目直接拖到网页需要插入库的位置。将库项目应用到网页文件中后，在Dreamweaver的网页编辑状态，库项目的背景呈现高亮度显示。,7.4.3修改库,库被应用到网页文档中，在网页中是无法修改的。要修改库，必须首先打开库文件才能进行编辑。对库的修改则会自动更新所用与之关联的网页文档。1.编辑库打开“资源”面板，选中“库”选项，然后双击某个库文件，进入库文件的编辑状态，对库文件进行修改。将库文件修改完毕，保存库文件。此时弹出“更新库项目”对话框，或选择“修改”菜单“库”“更新”页面。单击“更新”按钮。2.删除库打开“资源”面板，选中“库”选项，然后单击库文件名，按DEL键即可

9、。删除库后，不会改变任何调用此库的其它网页内容。3.使网页中库项目可编辑如果网页中添加了库项目，库项目以高亮显示，无法编辑。如果想要编辑调用库在当前网页的内容，则必须断开当前网页与库之间的关联。操作步骤如下：在当前网页中选中项目，在“属性”面板中单击“从源文件分离”按钮。,7.5利用模板和库生成站点的制作过程,本节讲解【例7.1】利用模板和库快速创建一个网站实例。,本章小结本章通过网站实例的讲解，重点介绍了以下几点：模板：创建模板，编辑模板，利用模板快速创建网页；库：将多个网页重复使用的网页元素存储在库项目。本章练习题1.选择题：（1）模板中（）的可以在网页编辑状态被使用者编辑。A可编辑区域B

10、锁定区域C任何区域D以上都可以（2）（）不可以作为库项目。A图像BCSS样式表文件C文本DJAVASCRIPT脚本（3）下面叙述不正确的是（）。A模板和库的作用是有相同的地方。B模板主要应用在外观相同而内容不同的页面中，库主要应用在多个页面的相同部分C在应用模板的网页文档中可以直接修改模板文件D在应用库的网页文档中可以直接修改库文件2.简答题（1）什么是模板？在Dreamweaver中如何使用模板？（2）如何将库项目从源文件中分离？（3）模板和库的区别是什么？,1.背景知识根据本章所学的模板和库的知识，并结合前面所学的网页编辑、表格排版的知识，进行网站设计与制作。2.实训准备工作将网站的页面草图和网站的素材资料准备好，发送到学生主机，以供学生参考使用。3.实训要求利用模板创建站点要求：根据给定的网页素材，结合网页草图，创建和编辑模板，并利用模板快速生成相同风格、相似结构的网站。在站点的多个网页上添加库项目要求：在上一个实训的基础上，结合库项目独特优势，将多个网页中重复使用的网页元素存储为一个文件，即为库项目，然后在其它需要调用的网页或模板中调用，从来达到提高网页设计的效率。4.课时安排：2课时,上机实训,