Dreamweaver网页设计 模板和库
Dreamweaver 网页设计 模板和库
【学习概述】 模板和库都是神奇的网页设计技术。在 Dreamweaver中可以利用模板和库设计出 具有统一风格的网页，同时也能更加方便 网站的更新和维护。本章重点内容是：模 板和库的概念、创建模板、定义可编辑区 域、套用模板、修改模板和库等内容
【学习概述】 模板和库都是神奇的网页设计技术。在 Dreamweaver中可以利用模板和库设计出 具有统一风格的网页，同时也能更加方便 网站的更新和维护。本章重点内容是：模 板和库的概念、创建模板、定义可编辑区 域、套用模板、修改模板和库等内容
11.1资源 资源是指网站中用到的图片、颜色、链接、动画等元素。执行【窗口】- >【资源】命令，打开“资源”面板，如图11-1所示。 图11-1“资源”面板 选择“站点”列表则显示站点的所有资源：选择“收藏”列表仅显示收藏的资 源。读者可以使用“资源”面板来组织和管理站点中使用到的资源，“资源” 面板中显示了站点中的资源，并且把它们分为以下几类： 图像：站点中各式各样的图像，包括GIF、JPEG或PNG格式的图像文件。 颜色：站点的文档和样式表中使用的颜色，包括文本颜色、背景颜色和链接颜 色。 URLS:当前站点文档中的外部链接。此类别包括下列类型的链接：FTP gopher、HTTP、HTTPS、JavaScript、电子邮件(mailto)和本地文件 (file)
11.1 资源 资源是指网站中用到的图片、颜色、链接、动画等元素。执行【窗口】- >【资源】命令，打开“资源”面板，如图11-1所示。 图11-1“资源”面板 选择“站点”列表则显示站点的所有资源；选择“收藏”列表仅显示收藏的资 源。读者可以使用“资源”面板来组织和管理站点中使用到的资源，“资源” 面板中显示了站点中的资源，并且把它们分为以下几类： 图像：站点中各式各样的图像，包括 GIF、JPEG 或 PNG 格式的图像文件。 颜色：站点的文档和样式表中使用的颜色，包括文本颜色、背景颜色和链接颜 色。 URLs：当前站点文档中的外部链接。此类别包括下列类型的链接：FTP、 gopher、HTTP、HTTPS、JavaScript、电子邮件（mailto）和本地文件 （file://）
Flash:Macromedia Flash格式文件。注意这里仅仅显示SWF文件 (压缩的Flash文件，后缀名为“.swf),而不显示FLA(Flash源 文件，后缀名为“a”)文件。 Shockwave:Macromedia Shockwave格式文件。 影片：QuickTime或MPEG格式文件。 脚本：JavaScript或VBScript文件。 模板：显示模板文件。 库项目：显示库项目文件。 “资源”面板右下方的几个按钮的作用如下： :刷新站点列表。 新建模板或库项目。 ·:编辑资源。 ·:删除资源
• Flash： Macromedia Flash 格式文件。注意这里仅仅显示 SWF 文件 （压缩的 Flash 文件，后缀名为“.swf”），而不显示 FLA（Flash 源 文件，后缀名为“.fla”）文件。 • Shockwave： Macromedia Shockwave 格式文件。 • 影片： QuickTime 或 MPEG 格式文件。 • 脚本： JavaScript 或 VBScript 文件。 • 模板：显示模板文件。 • 库项目：显示库项目文件。 • “资源”面板右下方的几个按钮的作用如下： • ：刷新站点列表。 • ：新建模板或库项目。 • ：编辑资源。 • ：删除资源
11.1.1模板 模板是一项伟大的技术。模板是 种特殊的文档 设计好后，把它保存为模 以后就可以重 新的网页， 新建立的网贡会首动套角模板中设好的版 模板的版式并保存后， Dreamweaver会瞬间自动修改所 饭网页 个网站有成干上万个网页时： 如果没有 在更新这个站点时会使这种工作 变得极其困难。 要更新这个站点 将极其容易。 在“资源面板 按钟， 示站点中所有模板。 11.1.2库 库项目是用来放置站点中重复使用的元素对象，可以被定义为库 项目的元素很多，比如文字、图像、表格等。如果将网页的部分 内容定义为库项目，则当更新该库项目时，所有使用库项目的页 面都得到更新。模板和库有相似之类，比如瞬间更新网站内容。 不同的是：使用模板是整体页面形式相同，部分元素不同：使用 库是部分元素相同，整体页面形式差别很大。也就是说，模板的 作用是将整个网页“共享”起来，而库的作用只是将网页中局部 元素“共享”起来。当然读者完全可以在同一个网页中既应用模 板又应用库项目。在“资源面板”中单击“库”按钮，显示库项 且，如图11-2所示
11.1.1 模板 模板是一项伟大的技术。模板是一种特殊的文档，只要一个网页的基本 版式设计好后，把它保存为模板，以后就可以重复使用该模板来建立 新的网页，新建立的网页会自动套用模板中设计好的版式。当修改完 模板的版式并保存后，Dreamweaver会瞬间自动修改所套用的这个模 板网页。当一个网站有成千上万个网页时，如果没有应用模板技术， 在更新这个站点时会使这种工作变得极其困难。如果应用了模板这项 技术，要更新这个站点，将极其容易。在“资源面板”中单击“模板” 按钮 ，显示站点中所有模板。 11.1.2 库 库项目是用来放置站点中重复使用的元素对象，可以被定义为库 项目的元素很多，比如文字、图像、表格等。如果将网页的部分 内容定义为库项目，则当更新该库项目时，所有使用库项目的页 面都得到更新。模板和库有相似之类，比如瞬间更新网站内容。 不同的是：使用模板是整体页面形式相同，部分元素不同；使用 库是部分元素相同，整体页面形式差别很大。也就是说，模板的 作用是将整个网页“共享”起来，而库的作用只是将网页中局部 元素“共享”起来。当然读者完全可以在同一个网页中既应用模 板又应用库项目。在“资源面板”中单击“库”按钮，显示库项 目，如图11-2所示
器e 人口c日V自 图11-2“资源”面板一库项目 在文档中选择库项目后，会显示“库项目”属性面板，如图11-3所示。 库项目 see小：a1G打开 图11-3“库项目”属性面板 SrC:显示库项目源文件的文件名和位置 打开：打开库项目的源文件进行编辑。这等同于在“资源”面板中选择项目并单击 “编辑”按钮。 从源文件中分离：用于断开所选库项目及其源文件之间的链接。分离库项目后，可 以在文档中对其进行编辑，但它不再是库项目并且不能在更改原始库项目时更新。 重新创建：一用当前选定内容更改原始库项目。使用此选项可以在丢失或意外删除原 始库项目时重新创建库项目
图11-2 “资源”面板－库项目 在文档中选择库项目后，会显示“库项目”属性面板，如图11- 3所示。 图11- 3 “库项目”属性面板 Src：显示库项目源文件的文件名和位置。 打开：打开库项目的源文件进行编辑。这等同于在“资源”面板中选择项目并单击 “编辑”按钮。 从源文件中分离：用于断开所选库项目及其源文件之间的链接。分离库项目后，可 以在文档中对其进行编辑，但它不再是库项目并且不能在更改原始库项目时更新。 重新创建：用当前选定内容更改原始库项目。使用此选项可以在丢失或意外删除原 始库项目时重新创建库项目
创建模板 在使用模板之前，要先创建模板，创建模板步骤如下： (1)这一步有两种方法，一种方法是：执行【窗口】->【资源】命令，打 开“资源”面板，选择模板图标。在“资源”面板的右下方单击“新建 模板”按钮，如图115所示，输入新模板的名字，双击打开该模板，就 可以编辑该模板了；另一种方法是：先建立普通网页，再把这个网页另 存为模板。 ■用 图11-5“资源”面板一模板 (2)在“设计”视图中，设计网页（网页中先插入一个1行2列的 表格，然后在其下方再插入一个2行2列的表格)，如图11-6所示。 子商城u 品牌台式机 图11-6设计网页 精质视装文字公司省价性
创建模板 在使用模板之前，要先创建模板，创建模板步骤如下： （1）这一步有两种方法，一种方法是：执行【窗口】->【资源】命令，打 开“资源”面板，选择模板图标。在“资源”面板的右下方单击“新建 模板”按钮，如图11-5所示，输入新模板的名字，双击打开该模板，就 可以编辑该模板了；另一种方法是：先建立普通网页，再把这个网页另 存为模板。 图11- 5 “资源”面板－模板 （2）在“设计”视图中，设计网页（网页中先插入一个1行2列的 表格，然后在其下方再插入一个2行2列的表格），如图11-6所示。 图11-6 设计网页
(3)在第二个表格的第1个单元格内定位光标。执行【插入】->【模板对象】 >【可编辑区域】命令。或在“插入”栏的“常用”类别中，单击“模板”按 钮上的箭头，然后选择“可编辑区域”，如图11-7所示。如果开始选择的是第 二种方法（建立普通网页，然后另存为模板），就会显示提示信息 “Dreamweaver会自动将此文档转换为模板”（如图11-8所示），单击“确定” 按钮，接着显示“新建可编辑区域”对话框，如图11-9所示。 回&里回三·0·园日四甲 这板福包 图11-7单击“模板：可编辑区域”按钮 新建可编辑区城 ①r4r合自袖将北文造换为损版。 口不再显示此信息 定 图11-8将此文档转换为模板 图11-9“新建可编辑区域”对话框 (4)在“名称”文本框中输入一个名称，默认名称为“EditRegion1"”。(注 意：不能对模板中的多个可编辑区域使用相同的名称。)、 (5)单击“确定”按钮，可编辑区域“EditRegion1"创建完成，如图11-10所 示
（3）在第二个表格的第1个单元格内定位光标。执行【插入】->【模板对象】- >【可编辑区域】命令。或在“插入”栏的“常用”类别中，单击“模板”按 钮上的箭头，然后选择“可编辑区域”，如图11-7所示。如果开始选择的是第 二种方法（建立普通网页，然后另存为模板），就会显示提示信息 “Dreamweaver会自动将此文档转换为模板”（如图11-8所示），单击“确定” 按钮，接着显示“新建可编辑区域”对话框，如图11-9所示。 图11-7 单击“模板： 可编辑区域”按钮 图11-8 将此文档转换为模板 图11- 9 “新建可编辑区域”对话框 （4）在“名称”文本框中输入一个名称，默认名称为“EditRegion1”。（注 意：不能对模板中的多个可编辑区域使用相同的名称。） （5）单击“确定”按钮，可编辑区域“EditRegion1”创建完成，如图11-10所 示
电子商城题 品牌台式机 、可媚辑区i1完减 图11-10创建可编辑区域“EditRegion1' (6)接着在文档中最后一个单元格内定位光标，利用上面的方法创 建可编辑区域“EditRegion2”,最后效果如图11-11所示。 电子商城u 品牌台式机 >丙个可编裤区城 支型 图11-11创建可编辑区域“EditRegion:2” (7)执行【文件】->【保存】或【另存为模板】命令，显示“另存为 模板”对话框。 (8)在“另存为模板”对话框中给模板命名，如图1112所示
图11-10 创建可编辑区域“EditRegion1” （6）接着在文档中最后一个单元格内定位光标，利用上面的方法创 建可编辑区域“EditRegion2”，最后效果如图11-11所示。 图11-11 创建可编辑区域“EditRegion2” （7）执行【文件】->【保存】或【另存为模板】命令，显示 “另存为 模板”对话框。 （8）在“另存为模板”对话框中给模板命名，如图11-12所示
男存为粮板 姑点：ab 保行 现存的腰板：液有议做 取消 带注：一个载积殿 另存为：y 图11-12“另存为模板”对话框 (9)单击“保存”按钮，模板创建完成。 11.2.2利用模板创建网页 模板创建好后，就可以利用此模板快速、高效地创建风格一致的网页了。 基于模板创建网页步骤如下： (1)执行【文件】>【新建】命令，选择“模板”选项卡，选择一个要使用的 模板的站点，从列表中选择想要使用的模板，选择上面刚刚建立的模板“dmb”, 如图11-13所示。 (2)单击“创建”按钮，创建一个基于模板的新网页
图11-12“另存为模板”对话框 （9）单击“保存”按钮，模板创建完成。 11.2.2 利用模板创建网页 模板创建好后，就可以利用此模板快速、高效地创建风格一致的网页了。 基于模板创建网页步骤如下： （1）执行【文件】->【新建】命令，选择“模板”选项卡，选择一个要使用的 模板的站点，从列表中选择想要使用的模板，选择上面刚刚建立的模板“dhmb”， 如图11-13所示。 （2）单击“创建”按钮，创建一个基于模板的新网页