第 10章 模板、库的应用
10.1 模板的基本操作
10.2 库的应用
10.3 资源管理
10.1.1 模板的基本特点
使用模板的好处在于,
1.可以生成大批的 风格相近 的网页。
2.一旦模板修改了，就修改了一批网页（ 自动更
新 ）。
10.1.2 模板的创建与保存
方法一：新建空白模板
步骤 1 在文件面板中选择要创建模板的站点。
步骤 2 选择【文件】｜【新建】｜【常规】｜ 模板页,
选择需创建的模板类型。单击【确定】，创建了一个空
白模板
方法二：在【资源】面板创建模板
步骤 1 在文件面板中选择要创建模板的站点。
步骤 2 选择【窗口】｜【资源】命令，打开【资源】面
板，选定面板左侧的【模板】按钮，单击, 添加, 按钮。
方法三：利用现成网页创建模板
步骤 1 打开欲做模板的网页。
步骤 2 选择【文件】｜【另存为模板】命令。
10.1.2 模板的创建与保存
新建的模板文件会 保存在 本地站点的
Templates文件夹中。
如果该 Templates文件夹在站点中尙不存在，
Dreamweaver MX 2004将在保存新建模板时 自
动创建该文件夹 。
模板文件的扩展名为,dwt。
10.1.3 创建可编辑区域
可编辑模板区域控制基于模板的页面中的哪
些区域可以编辑 。 设置可编辑区域, 需要在
制作模板的时候完成 。
完全一样部分 （ 在模板中制作 ）
相似网页
不同部分 （ 设为可编辑区域 ）
10.1.3 创建可编辑区域
设置可编辑区域的具体步骤如下,
步骤 1 在已创建的模板文件中, 编辑网页, 其布局,
制作方法与普通网页完全一致 。
步骤 2 将插入点放在想要插入可编辑区域的地方
步骤 3 在插入栏中选择 【 模板 】, 然后单击 【 可编辑
区域 】 按钮 。
步骤 4 在【新建可编辑区域】对话框中，输入该区域
的名称,单击【确定】按钮
10.1.3 创建可编辑区域
要点提示,
1,表格布局的模板定义可编辑区域时, 可将
整个表格或表格的某个单元格 定义为可编辑
区域, 但是不能同时将多个单元格定义为一
个单独的可编辑区域 。
2,层和层中的内容是不同的元素, 当层设为
可编辑区域时, 在应用该模板编辑文档时,
可改变层的位置和层中的内容 。 而将层的内
容设为可编辑区域时, 则只能改变层中的内
容而不能改变层的位置 。
10.1.4 模板的应用
方法一,用菜单方式
步骤 1 选择 【 文件 】 ｜ 【 新建 】 |【 新建文档 】 |【 模板 】,
选择新建的网页页面存放的站点以及所用的模板名称 。
步骤 2 选中 【 当模板改变时更新页面 】 的复选框时, 当
模板被修改后, 用此模板创建的网页也会被修改 。
步骤 3 单击 【 创建 】 按钮, 此时在网页编辑窗口建立了
一个由模板生成的网页, 设计者可根据需要在可编辑区
域输入相关内容 。
方法二,用资源面板
步骤 1 首先新建页面, 然后通过 【 窗口 】 菜单打开资源
面板 。
步骤 2 选择面板中的模板资源 。
步骤 3 选中欲使用的模板, 单击 【 应用 】 按钮；或将选
中的模板拖到编辑窗口 。 应用了模板的文档在右上角会
标明模板的名称 。
步骤 4 在应用了模板的文档的可编辑区域内编辑相关内
容 。
10.1.5 更新模板及页面
修改模板操作步骤,
步骤 1 选择 【 窗口 】 ｜ 【 资源 】 命令, 打开资源面板,
切换到 【 模板 】 资源 。
步骤 2 选中要修改的模板后右击鼠标, 在快捷菜单中选
择 【 编辑 】 命令, 或双击该模板, 便可打开要修改的模
板
步骤 3 在快捷菜单中选择 【 新建可编辑区域 】 ╱ 【 删除
模板标记 】 以添加或删除可编辑区域 。
步骤 4 模板修改完成后, 选择 【 文件 】 ｜ 【 保存 】 命令,
保存模板 。
10.1.5 更新模板及页面
保存模板时, Dreamweaver MX 2004会询问它
是否更新 所有附着到该模板的网页 。
也可以使用 【 修改 】 ｜ 【 模板 】 ｜ 【 更新页
面 】 命令 。 或 【 模板 】 资源窗口右上角的按
钮, 选择 【 更新站点 】 命令, Dreamweaver在
该模板所在的站点中更新基于模板的所有网
页文档 。
10.2 库的应用
库是一种用来存储想要在整个网站上 经常重
复使用或更新的页面元素 （如图像、文本和
其他对象）的方法。这些元素称为库项目
使用库的意义：如果使用了库，就可以通过
改动库更新所有采用库的网页，不用一个一
个的修改网页元素或者重新制作网页。使用
库比使用模板，有更大的灵活性。
10.2.1 创建库项目
1,选定内容创建为库项目。
将选定内容创建为库项目的基本操作如下,
步骤 1 选择【窗口】｜【资源】命令，出现“资源”面板，
选择面板左侧的“库”类别。
步骤 2 在“文档”窗口中，选择文档要另存为库项目的内
容。
步骤 3 将选定内容拖到“资源”面板的“库”类别中，或
者单击“资源”面板的“库”类别底部的“新建库项目”按
钮，一个库项目被创建，此时网页文档下方的属性检查器也
变为“库项目”检查器。
步骤 4 为新的库项目输入一个名称。
10.2.1 创建库项目
2,创建一个空白库项目 。
创建一个空白库项目的基本操作如下,
步骤 1 选择【窗口】｜【资源】 ｜【 库 】
步骤 2 在“资源”面板中，单击“库”类别底部的“新建
库项目”按钮。
步骤 3 一个新的库项目被添加到面板上的列表中。
步骤 4 为新的库项目输入一个名称。
步骤 5 双击该库项目，在文档窗口进行编辑。
10.2.2 插入库项目
文档中插入库项目的基本操作如下,
步骤 1 将文本光标定位于, 文档, 窗口中 。
步骤 2 在, 资源, 面板上选择面板左侧的, 库,
类别 。
步骤 3 将一个库项目从, 资源, 面板拖动到
,文档, 窗口中, 或者选择一个库项目, 然后
单击面板底部的, 插入, 按钮 。
10.2.2 插入库项目
插入库项目后, 会在, 文档, 窗口的下方出
现, 库项目, 属性检查器, 如图所示 。
, 库项目, 属性检查器
使用属性检查器可以断开文档中的项目和库
之间的链接, 从而使文档中的库项目可编辑 。
单击 【 从源文件分离 】 按钮, 可以断开文档
中的项目和库之间的链接, 从而使库项目可
编辑 。
10.2.3 修改库项目和更新站点
当修改库项目时, 可以更新使用该项目的所
有文档 。
1,修改库项目,
步骤 1 选中页面中的库项目 。
步骤 2 在属性面板中点击, 打开, 按钮 。
步骤 3 修改库项目, 修改完成之后保存 。
步骤 4 在, 更新库项目, 对话框中点击, 更新,
按钮
步骤 5 选择更新的范围, 更新完成之后关闭 。
10.2.3 修改库项目和更新站点
2.更新整个站点或所有使用特定库项目
的文档,
选择 【 修改 】 ｜ 【 库 】 ｜ 【 更新页面 】 。
3,更改当前文档以使用所有库项目的当前
版本,
选择 【 修改 】 |【 库 】 ｜ 【 更新当前页 】
10.3 资源管理
利用【资源】面板的功能可以统一管理整个
站点的资源，避免反复查找某些网页元素，
能大大提高网页设计的效率，得到事半功倍
的效果。
图像管理
颜色管理
链接管理
Flash管理
Shockwave
管理
视频 管理
脚本 管理
模板 管理 库 管理
10.4 实例制作（ 岁月回首 ）
10.4 实例制作（ 岁月回首 ）
10.4 实例制作（ 岁月回首 ）
可编辑区域
。
操作步骤,
1,制作模板
2,创建基于模板的网页文档
3,修改模板并更新
4,创建库项目，并应用
模板制作 1,
第一部分,基本元素的制作
步骤 1 页面属性：设置页面标题为：岁月回首, 背景色,#af99f2
（ 淡紫色 ）, 文本色,#000080（ 深紫色 ） 。
步骤 2 选择 【 文件 】 ｜ 【 另存为模板 】 命令, 模板文件名为
article.dwt。
步骤 3 将对齐方式设置为居中对齐 。
步骤 4 插入 1× 5表格, 宽 754像素, 高为 84像素, 单元格间距为 4，
填充为 0,边框为 0。
步骤 5 分别设置 5个单元格的宽度为,53,340,110,113,114像
素 。
步骤 6 在第二, 四单元格：垂直对齐方式为顶部对齐, 分别插入图
片 340× 57； 113× 62。
模板制作 2,
第一部分,基本元素的制作
步骤 7 另起一行, 制作导航栏 。 插入 1× 1表格, 宽,754像
素 高 18像素, 边框为 1,间距为 4,边框色为 #ffffff（ 白
色 ） 。
步骤 8 将光标定位在表的单元格中, 设置边框色, 背景色为
#deceff(淡粉紫 ),输入文章标题, 因为在模板中各文章尚
未确定, 暂用, 添加新文章, 替代, 等后面再做修改 。
步骤 9 再次另起一行, 制作正文部分 。 插入 2× 1表格, 宽
754像素, 单元格间距为 4,边框为 1。 设置单元格背景色为
#deceff(淡粉紫 )。
步骤 10 拆分第一行为 3列, 从左到右宽度分别为,100,504、
150,选中各单元格, 设置对齐方式为水平居中 。
步骤 11 在第一单元格中输入, 标题,, 第三单元格中输入
,作者：, 将字体大小设置为 9点数 。
模板制作 3,
第二部分：创建可编辑区域
步骤 1 将鼠标定位在第三个表格的第一行第二
个单元格中, 从菜单栏中选择 【 模板 】 ｜ 【 可
编辑区域 】, 会打开一个新建可编辑区域命名
的对话框, 这里命名为, title”。
步骤 2 将鼠标定位在第三个单元格中的, 作者：
,后面, 用同样的方法定义一个可编辑区域,
命名为, author”,将鼠标定位在第二行的单元
格中, 定义一个名为, content”的可编辑区域 。
创建基于模板的网页文档,
步骤 1 新建页面, 从 【 资源 】 面板, 单击 【 模板 】 按
钮, 选中刚才完成的 article模板, 将其拖入页面编辑
窗口 。
步骤 2, title”：输入, 边城续写, ；
, author”,输入, 荆棘鸟, ；
, content”：输入, 边城续写, 的文章全文 。
将网页保存为 Page1.htm。
步骤 3 同样方法制作 Page2.htm页面,
, title”：天若有情,, author”,刘舸
修改模板并更新
在模板中导航栏并没有起到它的作用, 下面进行修改,
使其链接到相应的页面 。
步骤 1 在 【 资源 】 面板中, 选中, article”模板, 双击进入模
板编辑状态 。
步骤 2 将导航栏中的, 添加新文章, 替换为各文章名称, 边
城续写, 和, 天若有情,, 并分别创建超链接到 Page1.htm
和 Page2.htm。
步骤 3 保存所修改的模板文件, 保存完成后, 会弹出一个对
话框, 询问是否要将改变应用到所有引用这个模板的页面中
去, 单击, 更新, 按钮, 则 Dreamweaver 自动更新所有用
到这个模板的文件 。
步骤 4 为了验证文件是否被改变, 可重新打开 Page1.htm或
Page2.htm,按 F12预览验证其超链接 。
创建库项目并应用之
创建,在 Page1页面的最下面的表格中输入版
权信息，设置好相应的超链接，将其拖入到
【库】管理面板中。
应用,在其他网页中将光标定位于最下面的
表格的可编辑区域中，选中【库】管理面板
相应的库项目，单击【插入】按钮。
