使用Dreamweaver模板快速建站
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图7-9 【文件】面板
图7-11 【新建文档】对话框
http://www.cip.com.cn
7.2.1 创建模板
(3) 在菜单栏中选择【文件】→【保存】命令，可能会弹出【警告】 对话框，如图7-12所示。 (4) 单击【确定】按钮后，弹出【另存模板】对话框进行保存即 可。
图7-9 【文件】面板
图7-12 【警告】对话框
(2) 单击对话框中的【更 新】按钮，弹出【更新页 面】对话框，并显示更新 过程，根据网页多少所需 的更新时间也不尽相同， 最后显示【完成】字样， 即更新完毕，如图7-23所 示。 (3) 关闭模板文件，打开 第一个网页进行浏览。
图7-23 【更新页面】对话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
4. 保存模板将修改更新到所有基于模板的网页上 保存模板的操作步骤如下。 (1) 在菜单栏中选择【文件】→【保存】命令，弹出【更新模板文 件】对话框，如图7-22所示。
图7-22 【更新 模板文 件】对 话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
http://www.cip.com.cn
7.1.4 识别模板和基于模板的网页
2. 在【设计】视图中识别基于模板的网页
在【设计】视图的基于模板的网页文档中，【文 档】窗口中的可编辑区域四周会显示预设高亮颜色的矩 形外框。每个区域的左上角都会出现一个小的标签，其 中显示该区域的名称。除可编辑区域的外框之外，整个 页面周围也会显示其他颜色的外框，右上角给出该文档 的基础模板的名称，如图7-6所示。这一高亮矩形提醒 相应网页文档是基于某个模板的，不能更改可编辑区域 之外的内容。
2. 通过模板生成基于模板的网页
通过模板生成基于模板的网页的 操作步骤如下。
(1) 在【资源】面板(在菜单栏中 选择【窗口】→【资源】命令， 即可打开【资源】面板)中，右击 “jx”模板文件，在弹出的右键 快捷菜单中选择【从模板新建】 命令，如图7-19所示，创建一个 基于模板“jx.dwt”的网页。
7.1 认 识 模 板
7.1.1
什么是模板 7.1.2 什么是嵌套模板 7.1.3 什么是模板区域 7.1.4 识别模板和基于模板的网页
http://www.cip.com.cn
7.1.1 什么是模板
1. 模板的概念 模板是一种特殊类型的文档(.dwt文档)，用于设计“固定的”页面布局，然 后便可以基于模板创建网页，创建的网页会继承模板的页面布局。也就是说模板 是要创建的网页的基础。在创建模板的时候，可以指定哪些区域保持不变(不可 编辑)，哪些区域可以进行修改(可编辑区域)。
(4) 单击【是】按钮，网页“5.5.2-1.html”就被另存为“jx.dwt” 模板文件。 (5) 选中图片上面单元格中的文本，如图7-15所示，将其删除(保 持插入点在文本所在单元格中)。
图7-9 【文件】面板
图 715 选 中 文 本
http://www.cip.com.cn
7.2.2 使用可编辑区域
http://www.cip.com.cn
7.2.2 使用可编辑区域
1. 创建模板 创建模板的操作步骤如下。 (1) 在【文件】面板中打开 “ch5\5.5.2-1.html”网页。
图7-9 【文件】面板
(2) 在菜单栏中选择【插入记录】 →【模板对象】→【创建模板】 命令，弹出【另存模板】对话框， 如图7-13所示。
图7-20 创建其他奥运 吉祥物的网页
http://www.cip.com.cn
7.2.2 使用可编辑区域
3. 通过模板修改导航链接 通过模板修改导航链接的操作步骤如下。 (1) 关闭所有已经打开编辑的基于模板的 网页，在【文件】面板打开模板文件 “Templates\jx.dwt”。
http://www.cip.com.cn
(6) 在【插入】工具栏的【常用】选项卡中单击【模板】按钮 ， 在弹出的菜单中选择【可编辑区域】命令，如图7-16所示，弹出 【新建可编辑区域】对话框。
图7-9 【文件】面板
图7-16 选择【可编辑区域】命令
http://www.cip.com.cn
7.2.2 使用可编辑区域
(7) 在【名称】文本框中输入 “文本”，单击【确定】按钮， 插入“文本”可编辑区域。
(2) 单击【资源】面板底部的【新建模 板】按钮 (或在右键快捷中选择菜单 【新建模板】命令)，一个新的、无标 题模板将添加到【资源】面板的模板列 表中，如图7-10所示。
图7-10 【资源】面板
http://www.cip.com.cn
7.2.1 创建模板
3. 在文件菜单中创建空白模板 在文件菜单中创建空白模板的操作步骤如下。 (1) 在菜单栏中选择【文件】→【新建】命令，弹出【新建文档】 对话框，如图7-11所示。
图7-9 【文件】面板
http://www.cip.com.cn
7.2.1 创建模板
2. 在资源面板中创建空白模板 在资源面板中创建空白模板的操作步骤 如下。
(1)【文件】面板 在【资源】面板(在菜单栏中选择 图7-9 【窗口】→【资源】命令或单击【文件】 面板中的【资源】选项卡，即可打开 【资源】面板)中，单击面板左侧的 【模板】图标 。
http://www.cip.com.cn
7.1.2 什么是嵌套模板
嵌套模板是指其设计和可编辑区域都基于另一个模板的模板。 嵌套模板对于控制共享许多设计元素的站点页面很有用，但在各页 之间有些差异。例如，基本模板中可能包含更宽广的设计区域，并 且可以由站点的许多内容提供者使用，而嵌套模板可以进一步定义 站点内特定部分页面中的可编辑区域，适合制作具有多级目录跳转 的网站，不同的栏目之间既有完全相同的区域，又有个性化区域。
图7-7 选择【创建模板】命令
http://www.cip.com.cn
7.2.1 创建模板
(2) 从【站点】下拉列表框中选择一个 用来保存模板的站点，然后在【另存为】 对话框中为模板输入一个唯一的名称 “aoyun0”。
图7-9 【文件】面板
(3) 单击【保存】按钮，Dreamweaver 将模板文件以“DWT”格式保存在站点 本地根文件夹中的“Templates”文件 夹中，如图7-9所示。如果该 “Templates”文件夹在站点中尚不存 在，Dreamweaver将在保存新建模板时 自动创建该文件夹。
http://www.cip.com.cn
7.2.1 创建模板
(1) 打开要另存为模板的文档(“ch5\5.5.2-1.html”)，执行下列操作之一。 在菜单栏中选择【文件】→【另存为模板】命令。 在菜单栏中选择【插入记录】→【模板对象】→【创建模板】命令。
在【插入】工具栏的【常用】选项卡中，单击【模板】按钮 右侧的下 三角按钮，从弹出的菜单中选择【创建模板】命令，如图7-7所示，弹出【另存 模板】对话框。
http://www.cip.com.cn
第7章 使用Dreamweaver模板快速建站
（时间：3次课，6学时）
http://www.cip.com.cn
第7章 使用Dreamweaver模板快速建站
7.1
7.2
7.3 7.4
认 识 模 板 应 用 模 板 管 理 模 板 上机实训
http://www.cip.com.cn
http://www.cip.com.cn
7.2 应 用 模 板
7.2.1
创建ຫໍສະໝຸດ Baidu板
7.2.2
7.2.3 7.2.4 7.2.5
使用可编辑区域
使用可选区域
使用重复区域
创建嵌套模板
http://www.cip.com.cn
7.2.1 创建模板
1. 基于现有网页文档创建模板
可以基于现有网页文档创建模板，这种方法适用 于已经有现成的布局好的网页，希望将设计布局应用到 模板中。
缺点：网页内容不容易实现居中对齐、网页不能精确布局。
模板的本质是在制作网页时先设计出一个模板，再通过模板创建不同的网页，修 改模板时可以自动更新基于模板的网页。在网页浏览时不依赖模板文件。 优点：建站效率高、网站运行稳定、修改布局后必须上传所有网页，主 页访问速度与主题页相同；网页能精确布局、可以实现所有效果。 缺点：如果模板与基于模板的网页存放目录级别不同时，容易产生错误； 不便于频繁更新网站内容；如果模板文件进行了结构性的修改，很有可能造成模 板不能更新网页，从而给网站更新带来很多麻烦。
http://www.cip.com.cn
7.1.4 识别模板和基于模板的网页
1. 在设计视图中识别模板
在【设计】视图中，可编辑区域出现在【文档】窗口的 预设高亮颜色的矩形外框中。每个区域的左上角都会出 现一个小的标签，其中显示该区域的名称。 通过查看【文档】窗口中的标题栏，可以识别模板文件。 模板文件的标题栏中包含“<<模板>>”字样，并且模板 文件的扩展名为.dwt。
7.2.3 使用可选区域
下面仍以“奥运吉祥物网站”为例，说明可选区域的用法。 (1) 打开模板文件“Templates\jx.dwt”，选中“图片”可编辑 区域中的“表格”，如图7-24所示，按<Ctrl>+<C>组合键将其复 制到剪贴板上。
2. 模板的作用
使用模板可以一次更新成百上千个页面，从而大大提高网站开发效率。从模板创 建的网页与该模板保持连接状态(除非分离该网页)。可以修改模板并立即更新基 于该模板的所有网页中的设计布局。
http://www.cip.com.cn
7.1.1 什么是模板
3. 模板技术与框架结构的区别 优点：建站效率高、网站运行稳定、便于频繁更新网站内容、修改布局 后只上传框架集网页，主页访问速度慢、主题页访问速度快。
图7-19 选择【从模板新建】命令
http://www.cip.com.cn
7.2.2 使用可编辑区域
(2) 在网页中的“文本”可编 辑区域[1972年的慕尼黑奥运会 (小猎狗)]和“图片”可编辑区 域(20.jpg)中插入相应内容， 保存网页为“ch7\1972.html”， 并关闭网页。 (3) 重复步骤(1)～(2)分别创 建基于模板“jx.dwt”的其他 奥运吉祥物的网页，如图7-20 所示。
图7-9 【文件】面板
(8) 将图片删除，选中图片所 在的表格，重复步骤(4)～(6)， 插入“图片”可编辑区域，如 图7-18所示。 (9) 在菜单栏中选择【文件】 →【保存】命令保存模板，并 关闭模板文件。
图7-18 插入的“图片”可编辑区域
http://www.cip.com.cn
7.2.2 使用可编辑区域
7.2.2 使用可编辑区域
(2) 选中链接文字“1972年的慕尼黑奥运会(小猎狗)”，在【属性】 面板中将链接指向到通过此模板生成的“1972.html”网页文件， 如图7-21所示。 (3) 重复步骤(2)将左侧导航栏链接全部修改到通过模板创建的相 应网页上。
图7-21 修改链接
http://www.cip.com.cn
http://www.cip.com.cn
7.1.3 什么是模板区域
1. 可编辑区域 可编辑区域控制基于模板的页面中有哪些区域可以 编辑。也就是说，当在模板文件中创建了可编辑区域后， 在通过模板生成的网页中只有这些可编辑区域才能在 Dreamweaver中修改。
http://www.cip.com.cn
7.1.3 什么是模板区域
2. 可选区域 可选区域是模板中的区域，在编辑基于模板的网页 时可将其设置为显示或隐藏，如图7-3所示。插入可选 区域以后，既可以为模板参数设置特定的值，也可以为 模板区域定义条件语句(If...else语句)。可以使用简 单的“真或假”操作，也可以定义比较复杂的条件语句 和表达式。如有必要，可以在以后对这个可选区域进行 修改。模板用户可以根据定义的条件在其创建的基于模 板的网页文档中编辑参数并控制是否显示可选区域。
图7-13 【另存模板】对话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
(3) 在【另存为】文本框中输入 “jx”保存，弹出【提示】对话 框，如图7-14所示。
图7-9 【文件】面板
图7-14 【提示】对话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
图7-11 【新建文档】对话框
http://www.cip.com.cn
7.2.1 创建模板
(3) 在菜单栏中选择【文件】→【保存】命令，可能会弹出【警告】 对话框，如图7-12所示。 (4) 单击【确定】按钮后，弹出【另存模板】对话框进行保存即 可。
图7-9 【文件】面板
图7-12 【警告】对话框
(2) 单击对话框中的【更 新】按钮，弹出【更新页 面】对话框，并显示更新 过程，根据网页多少所需 的更新时间也不尽相同， 最后显示【完成】字样， 即更新完毕，如图7-23所 示。 (3) 关闭模板文件，打开 第一个网页进行浏览。
图7-23 【更新页面】对话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
4. 保存模板将修改更新到所有基于模板的网页上 保存模板的操作步骤如下。 (1) 在菜单栏中选择【文件】→【保存】命令，弹出【更新模板文 件】对话框，如图7-22所示。
图7-22 【更新 模板文 件】对 话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
http://www.cip.com.cn
7.1.4 识别模板和基于模板的网页
2. 在【设计】视图中识别基于模板的网页
在【设计】视图的基于模板的网页文档中，【文 档】窗口中的可编辑区域四周会显示预设高亮颜色的矩 形外框。每个区域的左上角都会出现一个小的标签，其 中显示该区域的名称。除可编辑区域的外框之外，整个 页面周围也会显示其他颜色的外框，右上角给出该文档 的基础模板的名称，如图7-6所示。这一高亮矩形提醒 相应网页文档是基于某个模板的，不能更改可编辑区域 之外的内容。
2. 通过模板生成基于模板的网页
通过模板生成基于模板的网页的 操作步骤如下。
(1) 在【资源】面板(在菜单栏中 选择【窗口】→【资源】命令， 即可打开【资源】面板)中，右击 “jx”模板文件，在弹出的右键 快捷菜单中选择【从模板新建】 命令，如图7-19所示，创建一个 基于模板“jx.dwt”的网页。
7.1 认 识 模 板
7.1.1
什么是模板 7.1.2 什么是嵌套模板 7.1.3 什么是模板区域 7.1.4 识别模板和基于模板的网页
http://www.cip.com.cn
7.1.1 什么是模板
1. 模板的概念 模板是一种特殊类型的文档(.dwt文档)，用于设计“固定的”页面布局，然 后便可以基于模板创建网页，创建的网页会继承模板的页面布局。也就是说模板 是要创建的网页的基础。在创建模板的时候，可以指定哪些区域保持不变(不可 编辑)，哪些区域可以进行修改(可编辑区域)。
(4) 单击【是】按钮，网页“5.5.2-1.html”就被另存为“jx.dwt” 模板文件。 (5) 选中图片上面单元格中的文本，如图7-15所示，将其删除(保 持插入点在文本所在单元格中)。
图7-9 【文件】面板
图 715 选 中 文 本
http://www.cip.com.cn
7.2.2 使用可编辑区域
http://www.cip.com.cn
7.2.2 使用可编辑区域
1. 创建模板 创建模板的操作步骤如下。 (1) 在【文件】面板中打开 “ch5\5.5.2-1.html”网页。
图7-9 【文件】面板
(2) 在菜单栏中选择【插入记录】 →【模板对象】→【创建模板】 命令，弹出【另存模板】对话框， 如图7-13所示。
图7-20 创建其他奥运 吉祥物的网页
http://www.cip.com.cn
7.2.2 使用可编辑区域
3. 通过模板修改导航链接 通过模板修改导航链接的操作步骤如下。 (1) 关闭所有已经打开编辑的基于模板的 网页，在【文件】面板打开模板文件 “Templates\jx.dwt”。
http://www.cip.com.cn
(6) 在【插入】工具栏的【常用】选项卡中单击【模板】按钮 ， 在弹出的菜单中选择【可编辑区域】命令，如图7-16所示，弹出 【新建可编辑区域】对话框。
图7-9 【文件】面板
图7-16 选择【可编辑区域】命令
http://www.cip.com.cn
7.2.2 使用可编辑区域
(7) 在【名称】文本框中输入 “文本”，单击【确定】按钮， 插入“文本”可编辑区域。
(2) 单击【资源】面板底部的【新建模 板】按钮 (或在右键快捷中选择菜单 【新建模板】命令)，一个新的、无标 题模板将添加到【资源】面板的模板列 表中，如图7-10所示。
图7-10 【资源】面板
http://www.cip.com.cn
7.2.1 创建模板
3. 在文件菜单中创建空白模板 在文件菜单中创建空白模板的操作步骤如下。 (1) 在菜单栏中选择【文件】→【新建】命令，弹出【新建文档】 对话框，如图7-11所示。
图7-9 【文件】面板
http://www.cip.com.cn
7.2.1 创建模板
2. 在资源面板中创建空白模板 在资源面板中创建空白模板的操作步骤 如下。
(1)【文件】面板 在【资源】面板(在菜单栏中选择 图7-9 【窗口】→【资源】命令或单击【文件】 面板中的【资源】选项卡，即可打开 【资源】面板)中，单击面板左侧的 【模板】图标 。
http://www.cip.com.cn
7.1.2 什么是嵌套模板
嵌套模板是指其设计和可编辑区域都基于另一个模板的模板。 嵌套模板对于控制共享许多设计元素的站点页面很有用，但在各页 之间有些差异。例如，基本模板中可能包含更宽广的设计区域，并 且可以由站点的许多内容提供者使用，而嵌套模板可以进一步定义 站点内特定部分页面中的可编辑区域，适合制作具有多级目录跳转 的网站，不同的栏目之间既有完全相同的区域，又有个性化区域。
图7-7 选择【创建模板】命令
http://www.cip.com.cn
7.2.1 创建模板
(2) 从【站点】下拉列表框中选择一个 用来保存模板的站点，然后在【另存为】 对话框中为模板输入一个唯一的名称 “aoyun0”。
图7-9 【文件】面板
(3) 单击【保存】按钮，Dreamweaver 将模板文件以“DWT”格式保存在站点 本地根文件夹中的“Templates”文件 夹中，如图7-9所示。如果该 “Templates”文件夹在站点中尚不存 在，Dreamweaver将在保存新建模板时 自动创建该文件夹。
http://www.cip.com.cn
7.2.1 创建模板
(1) 打开要另存为模板的文档(“ch5\5.5.2-1.html”)，执行下列操作之一。 在菜单栏中选择【文件】→【另存为模板】命令。 在菜单栏中选择【插入记录】→【模板对象】→【创建模板】命令。
在【插入】工具栏的【常用】选项卡中，单击【模板】按钮 右侧的下 三角按钮，从弹出的菜单中选择【创建模板】命令，如图7-7所示，弹出【另存 模板】对话框。
http://www.cip.com.cn
第7章 使用Dreamweaver模板快速建站
（时间：3次课，6学时）
http://www.cip.com.cn
第7章 使用Dreamweaver模板快速建站
7.1
7.2
7.3 7.4
认 识 模 板 应 用 模 板 管 理 模 板 上机实训
http://www.cip.com.cn
http://www.cip.com.cn
7.2 应 用 模 板
7.2.1
创建ຫໍສະໝຸດ Baidu板
7.2.2
7.2.3 7.2.4 7.2.5
使用可编辑区域
使用可选区域
使用重复区域
创建嵌套模板
http://www.cip.com.cn
7.2.1 创建模板
1. 基于现有网页文档创建模板
可以基于现有网页文档创建模板，这种方法适用 于已经有现成的布局好的网页，希望将设计布局应用到 模板中。
缺点：网页内容不容易实现居中对齐、网页不能精确布局。
模板的本质是在制作网页时先设计出一个模板，再通过模板创建不同的网页，修 改模板时可以自动更新基于模板的网页。在网页浏览时不依赖模板文件。 优点：建站效率高、网站运行稳定、修改布局后必须上传所有网页，主 页访问速度与主题页相同；网页能精确布局、可以实现所有效果。 缺点：如果模板与基于模板的网页存放目录级别不同时，容易产生错误； 不便于频繁更新网站内容；如果模板文件进行了结构性的修改，很有可能造成模 板不能更新网页，从而给网站更新带来很多麻烦。
http://www.cip.com.cn
7.1.4 识别模板和基于模板的网页
1. 在设计视图中识别模板
在【设计】视图中，可编辑区域出现在【文档】窗口的 预设高亮颜色的矩形外框中。每个区域的左上角都会出 现一个小的标签，其中显示该区域的名称。 通过查看【文档】窗口中的标题栏，可以识别模板文件。 模板文件的标题栏中包含“<<模板>>”字样，并且模板 文件的扩展名为.dwt。
7.2.3 使用可选区域
下面仍以“奥运吉祥物网站”为例，说明可选区域的用法。 (1) 打开模板文件“Templates\jx.dwt”，选中“图片”可编辑 区域中的“表格”，如图7-24所示，按<Ctrl>+<C>组合键将其复 制到剪贴板上。
2. 模板的作用
使用模板可以一次更新成百上千个页面，从而大大提高网站开发效率。从模板创 建的网页与该模板保持连接状态(除非分离该网页)。可以修改模板并立即更新基 于该模板的所有网页中的设计布局。
http://www.cip.com.cn
7.1.1 什么是模板
3. 模板技术与框架结构的区别 优点：建站效率高、网站运行稳定、便于频繁更新网站内容、修改布局 后只上传框架集网页，主页访问速度慢、主题页访问速度快。
图7-19 选择【从模板新建】命令
http://www.cip.com.cn
7.2.2 使用可编辑区域
(2) 在网页中的“文本”可编 辑区域[1972年的慕尼黑奥运会 (小猎狗)]和“图片”可编辑区 域(20.jpg)中插入相应内容， 保存网页为“ch7\1972.html”， 并关闭网页。 (3) 重复步骤(1)～(2)分别创 建基于模板“jx.dwt”的其他 奥运吉祥物的网页，如图7-20 所示。
图7-9 【文件】面板
(8) 将图片删除，选中图片所 在的表格，重复步骤(4)～(6)， 插入“图片”可编辑区域，如 图7-18所示。 (9) 在菜单栏中选择【文件】 →【保存】命令保存模板，并 关闭模板文件。
图7-18 插入的“图片”可编辑区域
http://www.cip.com.cn
7.2.2 使用可编辑区域
7.2.2 使用可编辑区域
(2) 选中链接文字“1972年的慕尼黑奥运会(小猎狗)”，在【属性】 面板中将链接指向到通过此模板生成的“1972.html”网页文件， 如图7-21所示。 (3) 重复步骤(2)将左侧导航栏链接全部修改到通过模板创建的相 应网页上。
图7-21 修改链接
http://www.cip.com.cn
http://www.cip.com.cn
7.1.3 什么是模板区域
1. 可编辑区域 可编辑区域控制基于模板的页面中有哪些区域可以 编辑。也就是说，当在模板文件中创建了可编辑区域后， 在通过模板生成的网页中只有这些可编辑区域才能在 Dreamweaver中修改。
http://www.cip.com.cn
7.1.3 什么是模板区域
2. 可选区域 可选区域是模板中的区域，在编辑基于模板的网页 时可将其设置为显示或隐藏，如图7-3所示。插入可选 区域以后，既可以为模板参数设置特定的值，也可以为 模板区域定义条件语句(If...else语句)。可以使用简 单的“真或假”操作，也可以定义比较复杂的条件语句 和表达式。如有必要，可以在以后对这个可选区域进行 修改。模板用户可以根据定义的条件在其创建的基于模 板的网页文档中编辑参数并控制是否显示可选区域。
图7-13 【另存模板】对话框
http://www.cip.com.cn
7.2.2 使用可编辑区域
(3) 在【另存为】文本框中输入 “jx”保存，弹出【提示】对话 框，如图7-14所示。
图7-9 【文件】面板
图7-14 【提示】对话框
http://www.cip.com.cn
7.2.2 使用可编辑区域