第十章 使用模板和库

网站设计
创建模板举例
在使用模板之前，要先创建模板，创建模板步骤如下： (1)一种方法是：执行【窗口】->【资源】命令，打开“资 源”面板，选择模板图标。在“资源”面板的右下方单 击“新建模板”按钮，输入新模板的名字，双击打开该 模板，就可以编辑该模板了； (2) 另一种方法是：先建立普通网页，再把这个网页另存 为模板。
网站设计
（5）保存，命名为“index.html”。按快捷键【 F12】预览，如图所示。可以看到在浏览器中预览时 模板网页和普通网页没有什么区别。
在浏览器中预览模板网页
网站设计
10.9 站点资源管理面板

资源管理面板用于对站点内的资源进行管理 。使用主菜单【窗口】|【资源】或按F11键 可以打开资源管理面板。
10.2 模 板


(2) 删除可编辑区域 ① 将鼠标定位到要删除的可编辑区域 内。 ② 选择主菜单【修改】|【模板】|【 删除模板标记】即完成可编辑区域的 删除。
网站设计
10.2 模 板


14.2.3 定义可编辑标记属性 定义可编辑标记属性用于指定使用模板创 建网页文件时可以修改哪些元素的属性。 例如对网页的背景图像属性设置可编辑标 记属性后，用户在使用模板创建网页文件 时就可以更改背景图像的属性。 定义可编辑标记属性的步骤如下： ① 选择要设置可编辑标签属性的对象。
网站设计
10.2 模 板




2．可编辑区域的重命名和删除 (1) 重命名可编辑区域 如果需要对可编辑区域更名，可按以 下方法操作： ① 单击可编辑区域左上方的标签选中 该区域，并打开其属性面板。 ② 在属性面板中对其名称进行编辑修 改。 ③ 编辑完成后，在文档区内单击鼠标 激活。
网站设计
网站设计
10.2 创建自定义模板
10.2.1 将文档另存为模板 【文件】|【另存为模板】 【常用】|【模板】 |【创建模板】，打开【另存 模板】对话框，将当前的文档保存为模板文件。
网站设计
10.2 创建自定义模板
10.2.2 使用”资源“面板创建新模板 【窗口】|【资源】，打开资源面板。 单击 “模板”项。 单击”新建模板“按钮，点击新建一个模板文件 ，文件名称显示为可编辑状态。 为新模板文件命名。
网站设计
10.3 创建模板的可编辑区域
(2) 把页面中现有的一部分内容设置为可编辑区域 ① 在页面中选择要设置为可编辑区域的内容。 ② 选择主菜单【插入】|【模板对象】|【可编辑 区域】。 ③ 在“名称”后的文本框中为可编辑区域命名。 ④ 点击“确定”按钮完成设置。 页面中的可编辑区域显示为浅绿色标签，标签上显 示的是该区域名称。单击标签即可选中该区域。 在可编辑区域中可以放入各种页面元素。
10.2 模 板
网站设计
10.4 使用可选区域




可选区域用于对文档中的内容设置显示条件，为模 板参数设置特定值，或在模板中定义条件语句。 一般把模板中的可选区域设置为在基于模板的文档 中显示或隐藏。 有两种可选区域对象：一种是让模板设计者可以控 制显示隐藏哪些区域，而不让用户编辑，称为正常 可选区域； 另一种允许用户编辑内容并设置区域显示或隐藏， 称为可编辑可选区域。
网站设计
（6）接着在文档中最后一个单元格内定位光标，利 用上面的方法创建可编辑区域“EditRegion2”，最 后效果如图所示。
创建可编辑区域“EditRegion2”
（7）执行【文件】->【保存】或【另存为模板】命令，显 示 “另存为模板”对话框。 （8）在“另存为模板”对话框中给模板命名，如图所示。
网站设计
10.1 使用软件自身提供的模板

选择主菜单【文件】|【新建】，选择“空白页” 选项卡中“HTML模板“。
网站设计
10.2 创建自定义模板


利用现有的HTML文档进行必要的修改，制作出 符合自身需要的模板。 第一次保存新模板时，Dreamweaver会自动在 站点的根目录下创建一个称为Templates的特殊 文件夹，并将模板文件的扩展名默认为.dwt
网站设计
网站设计
模 板




模板是一种特殊的网页文件，使用模板可以快速 的制作出风格相同或相似的页面。 模板由可编辑区域和不可编辑区域组成，不可编 辑区域为固定区域，是制作页面时的公共部分； 可编辑区域为可替换的部分，用户可以根据不同 页面的要求输入不同的内容。 模板的功能还体现在能快速的更新多个页面，对 于网站中所有使用模板的页面，当模板中的不可 编辑区域发生改动时，这些页面都会随着更新， 方便网站的管理。
网站设计




Leabharlann Baidu


② 选择主菜单【修改】|【模板】|【令属性可 编辑】，打开如图示的对话框。 ③ 点击“添加”按钮添加要设置为可编辑的属 性。选中“令属性可编辑”。 ④ 在“标签”栏中输入要设置的标签名称。可 编辑属性支持的数据类型有：文本、布尔值、颜 色、URL和数字。 ⑤ 设置完成后点击“确定”按钮。
网站设计
10.5 使用重复区域


页面中的重复区域以浅绿色显示，左上方为标签 名。 由于重复区域不是可编辑区域，故要使重复区域 可编辑，还需要在其中插入一个可编辑区域。
网站设计
10.5 使用重复区域


2．创建重复表格 重复表格是一种特殊的重复区域，实质上就是创建 一个可以随意插入使用重复行的表格，创建的步骤 如下： ① 打开一个模板。 ② 把鼠标定位到要插入重复表格的位置上，选择 主菜单【插入】|【模板对象】|【重复表格】， 弹出对话框。
网站设计
10.5 使用重复区域




重复区域是模板中进行重复添加的区域 ，使用重复区域可以在模板中复制任意 次数的指定区域。 它还不是可编辑区域。 要使重复区域中的内容可编辑，必须在 其中插入可编辑区域。 创建重复区域分为创建正常重复区域和 创建重复表格两种。
网站设计
10.5 使用重复区域
1．创建正常重复区域 ① 打开一个模板，在其文档窗口中选择需要重复的元 素。 ② 选择主菜单【插入】|【模板对象】|【重复区域 】，弹出对话框。 ③ 在“名称”文本框中为该重复区域命名，点击“确 定”。
网站设计
10.4 使用可选区域




1．插入正常可选区域 ① 在文档窗口选择要设置为可选区域的元 素。 ② 选择主菜单【插入】|【模板对象】|【 可选区域】，弹出对话框。 ③ 点击对话框的“基本”标签，在“名称 ”框中输入参数名称。选择“默认显示” 则表示在文档中显示选定区域。
网站设计
10.4 使用可选区域
单击“模板： 可编辑区域”按钮
网站设计
“新建可编辑区域”对话框 （4）在“名称”文本框中输入一个名称，默认名称为 “EditRegion1”。（注意：不能对模板中的多个可编辑区域使 用相同的名称。） （5）单击“确定”按钮，可编辑区域“EditRegion1”创建完 成。
创建可编辑区域“EditRegion1”

网站设计
10.3 创建模板的可编辑区域
(1) 插入空的可编辑区域 ① 把鼠标定位到模板中需要插入可编辑区域的位置。 ② 在文档区中选中该区域或单击状态栏中需要插入可 编辑区域的标签，选中该区域。 ③ 选择主菜单【插入】|【模板对象】|【可编辑区 域】。 ④ 在“名称”文本框中为该可编辑区域命名。 ⑤ 点击“确定”按钮完成设置。
网站设计
10.5 使用重复区域
③ 根据需要设置表格的具体参数。 ④ 在“起始行”和“结束行”的文本框 中输入要插入重复行中可编辑区域的 起止位置。 ⑤ 在“区域名称”文本框中输入重复表 格中重复区域的名称。 ⑥ 设置完成后点击“确定”按钮即可。
网站设计
10.6 应用模板
应用模板分两种情况：使用模板创建 新文档和对现有的文档套用模板。 1．使用模板创建新文档 使用模板创建新文档，有以下两种方 法： (1) 使用【新建】命令 ① 选择主菜单【文件】|【新建】，在 图的窗口中点击“模板”标签。
“资源”面板－模板
网站设计
（2）在“设计”视图中，设计网页（网页中先插入一个1 行2列的表格，然后在其下方再插入一个2行2列的表格）， 如图所示。
设计网页
网站设计
（3）在第二个表格的第1个单元格内定位光标。执行 【插入】->【模板对象】->【可编辑区域】命令。
或在“插入”栏的“常用”类别中，单击“模板”按 钮上的箭头，然后选择“可编辑区域”。如果开始选 择的是第二种方法（建立普通网页，然后另存为模 板），就会显示提示信息“Dreamweaver会自动将 此文档转换为模板” 单击“确定”按钮，接着显示 “新建可编辑区域”对话框。
网站设计



同一个网站中的所有网页一般都具有统一的风格 ，即采用大致相同的网页布局结构、版式、导航 条、Logo和网页底部版权信息等。 如果在制作每一个网页时都重复制作这些内容， 不仅浪费时间而且不利于维护和更新。 利用模板和库很好地解决这个问题。 可以通过模板和库的功能制作所有页面上“固定 ”的模板内容，基于模板创建网页，当需要进行 更新时，它们自动更新多个页面，提高工作效率 。
网站设计
10.6 应用模板
2．对现有文档套用模板 对于已经创建的模板，除了可以使用它来创建新文 档之外，还可以把它套用到已有的页面中： ① 打开要套用模板的页面。 ② 选择主菜单【修改】|【模板】|【套用模板到 页】，弹出对话框。
网站设计
10.6 应用模板
③ 在“站点”下拉列表中选择要套用的模板 所在的站点。 ④ 在“模板”列表中选择要套用的模板。选 中“当模板改变时更新页面”。 ⑤ 点击“选定”按钮把相应模板套用到当前 页。
网站设计
（7）执行【文件】->【保存】或【另存为模板】命令， 显示 “另存为模板”对话框。 （8）在“另存为模板”对话框中给模板命名，如图所示。
“另存为模板”对话框
（9）单击“保存”按钮，模板创建完成。
网站设计
利用模板创建网页
模板创建好后，就可以利用此模板快速、高效地创 建风格一致的网页了。 基于模板创建网页步骤如下： （1）执行【文件】->【新建】命令，选择“模板” 选项卡，选择一个要使用的模板的站点，从列表 中选择想要使用的模板，选择上面刚刚建立的模 板“dhmb”。 （2）单击“创建”按钮，创建一个基于模板的新 网页。
网站设计
（3）模板网页和普通网页的文档有些区别，从“设 计”视图可以看出，模板网页的周围有淡黄色的边框， 并且在右上端显示文字“模板：myTemplate”；当 鼠标在文档中为 形状时，表示此区域不可编辑，如 图所示。
可编辑区域和不可编辑区域
网站设计
（4）在模板网页中添加新的内容只能位于可编辑 区域中。本例中，在可编辑区域“EditRegion1” 中添加文字“目前位置――公司简介”。在可编辑 区域“EditRegion2”中添加所需内容，如图所示 。
网站设计
10.3 创建模板的可编辑区域


定义可编辑区域
模板是由可编辑区域和不可编辑区域组成的。 可编辑区域是使用模板创建网页文件时用来添加、 编辑内容的区域。创建模板时，必须要定义其中哪 些区域是可编辑的，否则默认所有区域都不可编辑 ，成为固定区域。 1．可编辑区域的创建 创建可编辑区域分为两种情况，一种是插入一个空 的可编辑区域，另一种是把页面中现有的一部分内 容设置为可编辑区域。



④ 点击对话框的“高级”标签，如图所示 。 ⑤ 在“使用参数”右侧下拉列表中选择与 选定内容链接的现有参数。或选择“输入 表达式”后在文本框中输入显示条件。 ⑥ 设置完成后点击“确定”按钮。
网站设计
10.4 使用可选区域



2．插入可编辑可选区域 ① 把鼠标定位在要插入可编辑可选区 域的位置。 ② 选择主菜单【插入】|【模板对象 】|【可编辑的可选区域】。 ③ 定义的方法可仿照正常的可选区域 进行。

网站设计
10.6 应用模板
网站设计
10.6 应用模板
② 在“模板用于”列表中选择要使用的模板所在 的站点。 ③ 在“站点”列表中选择该站内要使用的模板。 ④ 点击“创建”按钮，生成一个基于所选模板的 网页。 (2) 使用资源管理面板 ① 打开资源管理面板。在名称列表中选择“模板 ”项。 ② 在面板中选择要应用的模板。 ③ 在该模板上点击鼠标右键，在弹出的快捷菜单 中选择“从模板新建”命令。