网页制作基础教程-模板和库的应用

10.1 应用模板制作相似网页
10.1.1 案例综述
网 页
本例通过模板设计出网页的整体风格、布局，
制
当制作各个分页时，通过模板来创建，而当修改模
作
板时，与之相链接的网页都将随之改变。
基
础
教
程
10.1 应用模板制作相似网页
10.1.2 案例分析
网 页
在制作中，可利用模板来设计其相同部分，不
制
同之处留为可编辑区域，待在具体制作网页时，再
10.2 模板的基本操作
要点提示：
网 页
1.表格布局的模板定义可编辑区域时，可将整
制
个表格或表格的某个单元格定义为可编辑区
作
域，但是不能同时将多个单元格定义为一个
基 础
单独的可编辑区域。
教
程
2.AP元素和AP元素中的内容是不同的元素，当
AP元素设为可编辑区域时，在应用该模板编
辑文档时，可改变AP元素的位置和AP元素中
教
选择【修改】|【库】｜【更新当前页】
程
10.4 资源管理
利用【资源】面板的功能可以统一管理整个站点
网
的资源，避免反复查找某些网页元素，能大大提
页
高网页设计的效率，得到事半功倍的效果。
制
作
在【资源】面板中管理的几种对象分别是：
基
【图像】
础 教 程
【颜色】 【超链接】
【Flash】
【Shockwave】
页 制
【资源】面板可对本地站点内的图像完成插入、编
作 辑和管理，其操作步骤如下:
基 础 教
（1）打开[图像]资源：单击[资源]面板左侧的图 像按钮，可进入【图像】窗口。
程
(2) 插入图像：把光标定位在网页编辑窗口的图
像插入处，然后在图像列表中选中要插入的图像，
单击【插入】即可插入的图像。
(3) 编辑图像：在图像列表中选中要编辑修改的 图像，然后单击该面板底部的编辑按钮，启动 Dreamweaver CS3默认的图像编辑软件来对选中的图 像进行编辑与修改。
网
页
制 使用模板的好处在于：
作
基
础
1.可以生成大批的风格相近的网页。
教 程
2.一旦模板修改了，就修改了一批网页（自动
更新）。
10.2 模板的基本操作
10.2.2 模板的创建与保存
网 页
1.模板的创建方法
制 作
方法一：通过菜单创建模板
基 础
1. 在文件面板中选择要创建模板的站点。
教 程
2. 选择【文件】｜【新建】｜【常规】｜模板
建该文件夹。
模板文件的扩展名为.dwt。
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 1. 创建可编辑区域
制
作
可编辑模板区域控制基于模板的页面中的
基 础
哪些区域可以编辑。设置可编辑区域，需
教
要在制作模板的时候完成。
程
不同部分（设为可编辑区域）
相似网页
完全一样部分（在模板中制作）
10.2 模板的基本操作
网 页
步骤：
制 作
1. 选择【窗口】｜【资源】｜【库】
基 础
2. 在“资源”面板中，单击“库”类别底
教
部的“新建库项目”按钮。
程
3. 一个新的库项目被添加到面板上的列表
中。
4. 为新的库项目输入一个名称。
5. 双击该库项目，在文档窗口进行编辑。
10.3 库的应用
10.3.2 插入库项目
网 页
步骤：
有更大的灵活性。
10.3 库的应用
10.3.1 创建库项目
网
页
制
创建库项目的方式有两种：作基 Nhomakorabea础
1. 选定内容创建为库项目。
教
程
2. 创建一个空白库项目
10.3 库的应用
1. 将选定内容创建为库项目
网 步骤：
页
制
1. 选择【窗口】｜【资源】命令，出现“资源”面板，
作
选择面板左侧的“库”类别。
基 础
的内容。而将AP元素的内容设为可编辑区域
时，则只能改变AP元素中的内容而不能改变
AP元素的位置。
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 2. 创建可重复区域
制
作
重复区域是可以根据需要在基于模板的页
基 础
面中复制任意次数的模板部分。
教
程
重复区域通常用于表格；但是，也可以为
其他页面元素定义重复区域。
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 2. 创建可重复区域
制 作
在模板中插入重复区域的操作步骤：
基
础
① 选择想要设置为重复区域的文本或内容。
教 程
② 选择“插入”|“模板对象”|“重复区域”。出现
“新建重复区域”对话框。
③ 在“名称”文本框中为模板区域输入唯一的名称。
④ 单击“确定”。 重复区域被插入到模板中。
制
1. 将文本光标定位于“文档”窗口中。
作
基
2. 在“资源”面板上选择面板左侧的“库”类别。
础 教
3. 将一个库项目从“资源”面板拖动到“文档”窗口
程
中，或者选择一个库项目，然后单击面板底部的
“插入”按钮。
10.3 库的应用
注意：
网 页 制
插入库项目后，会在“文档”窗口的下方出现 “库项目”属性检查器，如图所示。
网页制作基础教程 （Dreamweaver CS3）
第10章 模板和库的应用
本章重点：模板、库的创建、编辑、 应用、修改，站点的更新。
难点：如何合理的设置和定义模板 的可编辑区域。
第10章 模板和库的应用
10.1 应用模板制作相似网页 10.2 模板的基本操作 10.3 库的应用 10.4 资源管理
内容。
10.2 模板的基本操作
10.2.4 创建基于模板的网页
网 2. 使用资源面板
页 制
1. 首先新建页面，通过【窗口】菜单打开资源面板
作
2. 选择面板中的模板资源。
基
础
3. 选中欲使用的模板，单击【应用】按钮；或将选中的
教 程
模板拖到编辑窗口。应用模板文档在右上角会标明模
板名称。
4. 在应用了模板的文档的可编辑区域内编辑相关内容。
在该模板所在的站点中更新基于模板的所有
网页文档。
10.3 库的应用
库是一种用来存储想要在整个网站上经常重复使
网
用或更新的页面元素（如图像、文本和其他对象）
页 制
的方法。这些元素称为库项目
作
基
使用库的意义：如果使用了库，就可以通过改动
础 教 程
库更新所有采用库的网页，不用一个一个的修改 网页元素或者重新制作网页。使用库比使用模板，
10.2 模板的基本操作
10.2.5 更新模板及页面
网
页 1. 修改模板
制 作
① 选择【窗口】｜【资源】命令，打开资源面板，切换到
基
【模板】资源。
础
教
② 选中要修改的模板后右击鼠标，在快捷菜单中选择【编
程
辑】命令，或双击该模板，便可打开要修改的模板.
③ 在快捷菜单中选择【新建可编辑区域】╱【删除模板标 记】以添加或删除可编辑区域
2. 在“文档”窗口中，选择文档要另存为库项目的内
教
容。
程
3. 将选定内容拖到“资源”面板的“库”类别中，或
者单击“资源”面板的“库”类别底部的“新建库
项目”按钮，一个库项目被创建，此时网页文档下
方的属性检查器也变为“库项目”检查器。
4. 为新的库项目输入一个名称。
10.3 库的应用
2. 创建一个空白库项目
10.4 资源管理
10.4.2 颜色管理
网 1. 打开[资源]面板：选择【窗口】｜【资源】命
页
令，或者按F10键。
制
作
基 2. 打开[颜色]资源：单击【资源】面板左侧的
础
【颜色】按钮即可进入【颜色】管理窗口。
教
程 3. 颜色收藏夹：单击位于【资源】面板顶端的
【收藏】单选按钮，切换到颜色收藏夹列表。
程
步骤3 修改库项目，修改完成之后保存。
步骤4 在“更新库项目”对话框中点击“更 新”按钮。
步骤5 选择更新的范围，更新完成之后关闭。
10.3 库的应用
10.3.3 修改库项目和更新站点
网 2.更新整个站点或所有使用特定库项目的文档：
页 制
选择【修改】｜【库】｜【更新页面】
作
基 础
3. 更改当前文档已使用所有库项目的当前版本
10.4 资源管理
10.4.2 颜色管理
网 4. 新建颜色：单击位于【颜色】管理窗口收藏夹底
页
端的【新建颜色】按钮，此时鼠标变成吸管工具，
制
在【颜色】管理窗口中吸取一种颜色就可以创建
作
一种新的颜色类型，同时在该颜色列表上面的窗
基 础 教
口中显示具体的颜色值.可在[颜色]管理窗口中新 建颜色。
程 5. 编辑颜色:先在颜色类型列表中选中要修改的颜色，
网 1. 使用菜单方式
页 制
1. 选择【文件】｜【新建】|【新建文档】|【模板】，
作
选择新建的页面存放的站点及所用模板名称。
基 础
2. 选中【当模板改变时更新页面】的复选框时，当模板
教
被修改后，用此模板创建的网页也会被修改。
程
3. 单击【创建】按钮，此时在网页编辑窗口建立了一个
由模板生成的网页，设计者可在可编辑区域输入相关
作
基
础
教 程
“库项目”属性检查器
【从源文件分离】可以断开文档中的项目和库 之间的链接，从而使文档中的库项目可编辑。
10.3 库的应用
10.3.3 修改库项目和更新站点
网 页
当修改库项目时，可以更新使用该项目的所有文
制
档。
作 1． 修改库项目
基 础
步骤1 选中页面中的库项目。
教
步骤2 在属性面板中点击“打开”按钮。
④ 模板修改完成后，选择【文件】｜【保存】命令，保存 模板。
10.2 模板的基本操作
2. 更新页面：
网
页
保存模板时，Dreamweaver CS3会询问它是
制 作
否更新所有附着到该模板的网页。
基 础
也可以使用【修改】｜【模板】｜【更新页
教 程
面】命令。或【模板】资源窗口右上角的按
钮，选择【更新站点】命令，Dreamweaver
页，选择需创建的模板类型。单击【确定】，
创建了一个空白模板
10.2 模板的基本操作
10.2.2 模板的创建与保存
网
页 1.模板的创建方法
制 作 方法二：在【资源】面板创建模板
基
础
1. 在文件面板中选择要创建模板的站点。
教 程
2. 选择【窗口】｜【资源】命令，打开【资源】面板，
选定面板左侧的【模板】按钮，单击“添加”按钮。
页
令，或者按F10键。
制
作 基 2. 打开[超链接]资源：单击【资源】面板左侧的
础
【超链接】按钮，即可进入【超链接】管理窗
教
口。
程
3. 超链接收藏夹：单击位于【资源】面板顶端的 【收藏】单选按钮，切换到超链接收藏夹列表。
设置可编辑区域的具体步骤如下：
网 页 制
步骤1 在已创建的模板文件中，编辑网页， 其布局、制作方法与普通网页完全一致。
作
基
步骤2 将插入点放在想要插入可编辑区域的
础
地方
教
程 步骤3 在插入栏中选择【模板】，然后单击 【可编辑区域】按钮。
步骤4 在【新建可编辑区域】对话框中，输 入该区域的名称,单击【确定】按钮
【视频】
【脚本】
【模板】
【库】
10.4 资源管理
选择【窗口】｜【资源】命令，或者直接按F10键，
网
可打开【资源】面板。
页
制
作
图像管理
Shockwave
基 础
颜色管理
教 程
链接管理
Flash管理
管理 视频管理 脚本管理
库管理
模板管理
10.4 资源管理
10.4.1 图像管理
网
【资源】面板能自动管理本地站点内的每一幅图像。
方法三：利用现成网页创建模板
1. 打开欲做模板的网页。
2. 选择【文件】｜【另存为模板】命令。
10.2 模板的基本操作
2、模板的保存
网
页
新建的模板文件会保存在本地站点的
制
作
Templates文件夹中。
基
础
如果该Templates文件夹在站点中尙不存在，
教
程
Dreamweaver CS3将在保存新建模板时自动创
单击位于该面板底部的编辑按钮，对颜色进行编
辑。
6. 应用颜色：选中文本，选择【资源】面板的【颜 色】管理窗口中要应用的颜色类型，单击位于该 面板底端的【应用】按钮，或者直接把颜色类型 拖曳到文本上即可完成文本颜色的设置。
10.4 资源管理
10.4.3 超链接管理
网 1. 打开[资源]面板：选择【窗口】｜【资源】命
10.4 资源管理
10.4.1 图像管理
网 (4)图片收藏夹：
页 制 作 基
添加：单击位于【资源】面板底端的【添 加到收藏夹】按钮，可将图片收藏到收藏 夹中。
础
教 程
查看：在【图像】管理窗口的顶端选择 【收藏】单选按钮，即可在图像列表栏中
查看站点中的图片收藏情况。
删除：单击位于【资源】面板底部的【从 收藏夹中删除】按钮后即可将图像从收藏 夹中删除。
作
将具体内容填入可编辑区域。
基 础
可编辑区域
重复区域
教
程
10.1 应用模板制作相似网页
10.1.3 实现步骤
网
页
1. 制作模板
制
作
1) 基本元素的制作
基
础
2) 插入模板区域
教
程
创建可编辑区域
创建重复区域
2. 创建基于模板的网页文档
3. 修改模板并更新
10.2 模板的基本操作
10.2.1 模板的基本特点
10.2 模板的基本操作
网 10.2.3 创建模板区域
页 制
3. 修改模板区域
作 基
①在“文档”窗口中，选择区域选项卡。
础 教
②选择“修改”|“模板”|“删除模板标记”。
程
③对于“可选区域”，在选中其标识后，在
“属性”面板中单击“编辑”按钮进行修改。
10.2 模板的基本操作
10.2.4 创建基于模板的网页