《网页设计与制作》.ppt

将库项目应用到网页文件中后，在Dreamweaver的 网页编辑状态，库项目的背景呈现高亮度显示。
【例7.1】利用模板技术生成网站实例，如图7.1所示。
在本网站实例主要涉及到以下知识点：
首先进行网页版面布局的设计；
划分模板锁定区域和可编辑区域；
创建模板和编辑模板，最后根据模板快速创建网页。
来自百度文库
2020-11-18
谢谢观赏
5
7.2 创建和设置模板
关于模板最显著的特征就是锁定区域和可编辑区域之分。 锁定区域主要用来锁定体现网站风格部分，而将经常要改 变的文字、图像、链接等网页元素设置成可编辑区域，网 页中只编辑可编辑区域的内容，从而得到与模板相似但又 有所不同的新的网页。
方法三：将已经编辑好的网页元素转换为库文件，首先选中要转换 为库文件的网页元素，然后选择“修改”菜单｜“库”｜“增加 对象到库”命令，当前选中的网页元素就会成为一个新的库项目 以供其它网页调用。
创建库文件后，站点中就会多出子文件夹library，库文件的默认 存储路径就是该文件夹。库文件的后缀名为lbi。库的编辑与普通 网页的编辑完全相同。
常用定义可编辑区域的方法有二种，首先在模板中将光 标单击要新建可编辑区域位置，选择“插入”菜单｜“模 板对象”｜“可编辑区域”命令，或单击“插入”栏｜ “常用”选项｜“模板”｜“可编辑区域”按钮，弹出一 个“新建可编辑区域”对话框，如图所示，输入这个区域 的名称，单击“确定”按钮。
2020-11-18
2020-11-18
谢谢观赏
12
7.4 使用库
❖ Dreamweaver中提供了库的概念。库是用来存储想要在整 个网站上经常重复使用或更新的网页元素，其它网页可调用 库文件。这样一旦需要修改重复使用的部分，只需要修改库 文件，而其它调用此库的页面将会被全部更新。
2020-11-18
谢谢观赏
13
7.4.1 创建库
打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问 题进行修改。
❖ 修改模板：对锁定区域进行修改。
❖ 删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选 择“修改”菜单｜“模板”｜“删除模板标记”命令，该可编辑区 域就不存在了。
2. 用模板更新网页和网站
一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部 与其相关联的文档。这种使用模板更新文件的方法大大节省了用户 的时间，尤其在涉及大量的改动时极为有效。
2020-11-18
谢谢观赏
6
7.2.1 创建模板
创建模板有二种常用的方法：一是创建新模板，二是将 当前网页另存为模板。 1. 创建新模板
创建新模板可通过以下两种方法来实现： 方法一：选择“文件”菜单｜“新建”命令，弹出“新 建文档”对话框中，选择“常规”选项卡｜“基本页”｜ “HTML模板”，单击“创建”按钮， 方法二：选择 “窗口”菜单｜“资源”命令，或按F11 键打开“资源”面板，单击“资源”面板左边的“模板” 选项，单击右下角的新建模板按钮，如图所示。 2. 将当前文档另存为模板 将一个编辑好的网页按照要求加以修改，然后另存为模 板。
【本章学习目的】 本章通过一个典型的网站案例重点讲解了模板和库技术
的应用，通过本章的学习，掌握利用模板和库技术创建风 格一致的网站的方法。
2020-11-18
谢谢观赏
3
2020-11-18
谢谢观赏
4
一个成功的网站首先要具备自己独特的风格，才能够在 茫茫 的网络中脱颖而出，给人留下深刻的印象。但仅凭 网站中的一两个较好的页面，很难收到良好的效果。因此 就需要整个站点内的页面体现出统一的风格。因此通过使 用模板能够生成多个具有相似结构和外观网页，从而提高 网页制作效率。
2020-11-18
谢谢观赏
7
2020-11-18
谢谢观赏
8
7.2.2 编辑模板
首先划分可编辑区域和锁定区域，然后编辑模板，通常 是像编辑网页一样先将锁定区域编辑好，然后再定义可编 辑区域。
可编辑区域：在模板中可编辑区域对应网页中的可编辑 部分，锁定区域是那些不可编辑的部分。在默认的方式下， Dreamweaver将新模板的所有部分设置为不可编辑区域， 由用户来定义可编辑区域。在编辑模板时，无论是可编辑 区域还是锁定区域都是可以编辑的。但是将模板应用到网 页中，在网页中的锁定区域是不可以编辑的。
谢谢观赏
9
2020-11-18
谢谢观赏
10
7.3 模板的应用和更新
❖ 利用模板快速生成新的网页，也可以将模板应用于已经 存在的网页。
2020-11-18
谢谢观赏
11
7.3.2 模板的更新
1. 模板的修改
模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过 程中可能会有一些不合适的地方，比如：链接有错误、网页布局中 单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域， 是无法在网页编辑状态进行修改，因此需要对模板进行修改。
库项目可以包含多种网页元素，如：图像、链接、表格、脚本等， 但CSS样式表文件不能作为库项目添加到库。
创建库的常用方法有三种：
方法一：选择“窗口”菜单｜“资源”命令，打开“资源”面板，选择 “库”选项，单击“资源”面板下方的“新建库项目”按钮。
方法一：选择“文件”菜单｜“新建”命令，弹出“新建文档”对话框， 选择“常规”选项卡｜“基本页”｜“库项目”命令，单击“创 建”按钮，如图所示。
2020-11-18
谢谢观赏
14
2020-11-18
谢谢观赏
15
7.4.2 应用库
库建立后，可以很轻松地将库应用于网页文件中。操 作步骤如下：
步骤1 打开网页，把光标定位在需要插入库的位置。
步骤2 在“资源”面板中选择“库”选项，然后单击相应 的库项目，单击“插入”按钮，或者将库项目直接拖 到网页需要插入库的位置。
《网页设计与制作》
2020-11-18
谢谢观赏
1
第七章 模板与库的应用
7.1 实例导入：利用模板生成的站点 7.2 创建模板
7.3 模板的应用和更新
7.4 使用库
7.5 利用模板和库生成站点的制作过程
2020-11-18
谢谢观赏
2
本章主要介绍了利用模板和库设计风格一致的网站，使 用模板和库的组合使得建设网站和维护网站变得很轻松， 尤其是在对一个规模较大的网站进行建设与维护时，就能 体会到模板和库的好处。