Dreamweaver网页设计 第11章模板和库
Dreamweaver 网页设计 第11章 模板和库
【学习概述】 模板和库都是神奇的网页设计技术。在 Dreamweaver中可以利用模板和库设计出 具有统一风格的网页,同时也能更加方便 网站的更新和维护。本章重点内容是:模 板和库的概念、创建模板、定义可编辑区 域、套用模板、修改模板和库等内容
【学习概述】 模板和库都是神奇的网页设计技术。在 Dreamweaver中可以利用模板和库设计出 具有统一风格的网页，同时也能更加方便 网站的更新和维护。本章重点内容是：模 板和库的概念、创建模板、定义可编辑区 域、套用模板、修改模板和库等内容
11.1资源 资源是指网站中用到的图片、颜色、链接、动画等元素。执行【窗口】 >【资源】命令,打开“资源”面板,如图11-1所示。 件资源代码片断 图像:⊙站点O收目 台式 人 图11-1“资源”面板 选择“站点”列表则显示站点的所有资源;选择“收藏”列表仅显示收藏的资 读者可以使用“资源”面板来组织和管理站点中使用到的资源,“资源 面板中显示了站点中的资源,并且把它们分为以下几类: 图像:站点中各式各样的图像,包括G|F、JPEG或PNG格式的图像文件。 颜色:站点的文档和样式表中使用的颜色,包括文本颜色、背景颜色和链接颜 色 URLs:当前站点文档中的外部链接。此类别包括下列类型的链接:FTP gopher、HTTP、Https、JavaScript、电子邮件(mailto)和本地文件 (file 1)
11.1 资源 资源是指网站中用到的图片、颜色、链接、动画等元素。执行【窗口】- >【资源】命令，打开“资源”面板，如图11-1所示。 图11-1“资源”面板 选择“站点”列表则显示站点的所有资源；选择“收藏”列表仅显示收藏的资 源。读者可以使用“资源”面板来组织和管理站点中使用到的资源，“资源” 面板中显示了站点中的资源，并且把它们分为以下几类： 图像：站点中各式各样的图像，包括 GIF、JPEG 或 PNG 格式的图像文件。 颜色：站点的文档和样式表中使用的颜色，包括文本颜色、背景颜色和链接颜 色。 URLs：当前站点文档中的外部链接。此类别包括下列类型的链接：FTP、 gopher、HTTP、HTTPS、JavaScript、电子邮件（mailto）和本地文件 （file://）
Flash: Macromedia flash格式文件。注意这里仅仅显示SWF文件 压缩的 Flash文件,后缀名为“SW),而不显示FLA( Flash源 文件,后缀名为“fa”)文件 Shockwave: Macromedia shockwave格式文件 影片: Quick Time或MPEG格式文件 脚本: JavaScript或 VBScript文件。 模板:显示模板文件 库项目:显示库项目文件。 “资源”面板右下方的几个按钮的作用如下 刷新站点列表 新建模板或库项目。 编辑资源 删除资源
• Flash： Macromedia Flash 格式文件。注意这里仅仅显示 SWF 文件 （压缩的 Flash 文件，后缀名为“.swf”），而不显示 FLA（Flash 源 文件，后缀名为“.fla”）文件。 • Shockwave： Macromedia Shockwave 格式文件。 • 影片： QuickTime 或 MPEG 格式文件。 • 脚本： JavaScript 或 VBScript 文件。 • 模板：显示模板文件。 • 库项目：显示库项目文件。 • “资源”面板右下方的几个按钮的作用如下： • ：刷新站点列表。 • ：新建模板或库项目。 • ：编辑资源。 • ：删除资源
1111模板 模板是一项伟大的技术。模板是一种特殊的文档,只要一个网页的基本 版式设计好后,把它保存为模板 就可以重复使用该模板来建 的网页会百动套用模板中设计好的版 模板的版式并保存后, Dreamweaver会瞬间自动修改所套用的这个模 板网页 个网站有成 页时,如果没有应用模板技术 在更新这个站点时会使这种工作变得极其困难。如果应用了模板这项 术,要更新这个站点,将极其容易。在“资源面板”中单击“模板” 钮,显示站点中所有模板 111.2库 库项目是用来放置站点中重复使用的元素对象,可以被定义为库 项目的元素很多,比如文字、图像、表格等。如果将网页的部分 内容定义为库项目,则当更新该库项目时,所有使用库项目的页 面都得到更新。模板和库有相似之类,比如瞬间更新网站内容。 不同的是:使用模板是整体页面形式相同,部分元素不同;使用 库是部分元素相同,整体页面形式差别很大。也就是说,模板的 作用是将整个网页“共享”起来,而库的作用只是将网页中局部 元素“共享”起来。当然读者完全可以在同一个网页中既应用模 板又应用库项目。在“资源面板”中单击“库”按钮,显示库项 目,如图112所示
11.1.1 模板 模板是一项伟大的技术。模板是一种特殊的文档，只要一个网页的基本 版式设计好后，把它保存为模板，以后就可以重复使用该模板来建立 新的网页，新建立的网页会自动套用模板中设计好的版式。当修改完 模板的版式并保存后，Dreamweaver会瞬间自动修改所套用的这个模 板网页。当一个网站有成千上万个网页时，如果没有应用模板技术， 在更新这个站点时会使这种工作变得极其困难。如果应用了模板这项 技术，要更新这个站点，将极其容易。在“资源面板”中单击“模板” 按钮 ，显示站点中所有模板。 11.1.2 库 库项目是用来放置站点中重复使用的元素对象，可以被定义为库 项目的元素很多，比如文字、图像、表格等。如果将网页的部分 内容定义为库项目，则当更新该库项目时，所有使用库项目的页 面都得到更新。模板和库有相似之类，比如瞬间更新网站内容。 不同的是：使用模板是整体页面形式相同，部分元素不同；使用 库是部分元素相同，整体页面形式差别很大。也就是说，模板的 作用是将整个网页“共享”起来，而库的作用只是将网页中局部 元素“共享”起来。当然读者完全可以在同一个网页中既应用模 板又应用库项目。在“资源面板”中单击“库”按钮，显示库项 目，如图11-2所示
图11-2“资源”面板一库项目 在文档中选择库项目后,会显示“库项目”属性面板,如图11-3所示 Src /Library/jianeng1bi[打开]从文件中分离 C重新创健 图11-3“库项目”属性面板 src:显示库项目源文件的文件名和位置 打开:打开库项目的源文件进行编辑。这等同于在“资源”面板中选择项目并单击 “编辑”按钮。 从源文件中分离:用于断开所选库项目及其源文件之间的链接。分离库项目后,可 以在文档中对其进行编辑,但它不再是库项目并且不能在更改原始库项目时更新。 重新创建:用当前选定内容更改原始库项目。使用此选项可以在丢失或意外删除原 始库项目时重新创建库项目
图11-2 “资源”面板－库项目 在文档中选择库项目后，会显示“库项目”属性面板，如图11- 3所示。 图11- 3 “库项目”属性面板 Src：显示库项目源文件的文件名和位置。 打开：打开库项目的源文件进行编辑。这等同于在“资源”面板中选择项目并单击 “编辑”按钮。 从源文件中分离：用于断开所选库项目及其源文件之间的链接。分离库项目后，可 以在文档中对其进行编辑，但它不再是库项目并且不能在更改原始库项目时更新。 重新创建：用当前选定内容更改原始库项目。使用此选项可以在丢失或意外删除原 始库项目时重新创建库项目
创建模板 在使用模板之前,要先创建模板,创建模板步骤如下 (1)这一步有两种方法,一种方法是:执行【窗口】→>【资源】命令,打 开“资源”面板,选择模板图标。在“资源”面板的右下方单击“新建 模板”按钮,如图115所示,输入新模板的名字,双击打开该模板,就 可以编辑该模板了;另一种方法是:先建立普通网页,再把这个网页另 存为模板 文件[资漫入代码片影 让d 图11-5“资源”面板一模板 (2)在“设计”视图中,设计网页(网页中先插入一个1行2列的 表格,然后在其下方再插入一个2行2列的表格),如图11-6所示。 电子商蟾品牌台式机 图11-6设计网页 刨建超级链接,比如文字“公司简介链
创建模板 在使用模板之前，要先创建模板，创建模板步骤如下： （1）这一步有两种方法，一种方法是：执行【窗口】->【资源】命令，打 开“资源”面板，选择模板图标。在“资源”面板的右下方单击“新建 模板”按钮，如图11-5所示，输入新模板的名字，双击打开该模板，就 可以编辑该模板了；另一种方法是：先建立普通网页，再把这个网页另 存为模板。 图11- 5 “资源”面板－模板 （2）在“设计”视图中，设计网页（网页中先插入一个1行2列的 表格，然后在其下方再插入一个2行2列的表格），如图11-6所示。 图11-6 设计网页
3)在第二个表格的第1个单元格内定位光标。执行【插入】→>【模板对象 【可编辑区域】命令。或在“插入”栏的“常用”类别中,单击“模板”按 钮上的箭头,然后选择“可编辑区域”,如图117所示。如果开始选择的是第 二种方法(建立普通网页,然后另存为模板),就会显示提示信息 “ Dreamweaver会自动将此文档转换为模板”(如图11-8所示),单击“确定” 按钮,接着显示“新建可编辑区域”对话框,如图11-9所示。 Q回愚国回昌··属, m 一便校 图11-7单击“模板:可编辑区域”按钮 Dreanveavc 新建可编辑区城 (m会自动将此文档换为板 名称: Edi tRezionl 口[不再显示此信息 以在基于模板的文档 确定 图11-8将此文档转换为模板 图11-9“新建可编辑区域”对话框 (4)在“名称”文本框中输入一个名称,默认名称为“ EditRegion”。(注 意:不能对模板中的多个可编辑区域使用相同的名称。 (5)单击“确定”按钮,可编辑区域“ EditRegion1"创建完成,如图110所
（3）在第二个表格的第1个单元格内定位光标。执行【插入】->【模板对象】- >【可编辑区域】命令。或在“插入”栏的“常用”类别中，单击“模板”按 钮上的箭头，然后选择“可编辑区域”，如图11-7所示。如果开始选择的是第 二种方法（建立普通网页，然后另存为模板），就会显示提示信息 “Dreamweaver会自动将此文档转换为模板”（如图11-8所示），单击“确定” 按钮，接着显示“新建可编辑区域”对话框，如图11-9所示。 图11-7 单击“模板： 可编辑区域”按钮 图11-8 将此文档转换为模板 图11- 9 “新建可编辑区域”对话框 （4）在“名称”文本框中输入一个名称，默认名称为“EditRegion1”。（注 意：不能对模板中的多个可编辑区域使用相同的名称。） （5）单击“确定”按钮，可编辑区域“EditRegion1”创建完成，如图11-10所 示
电子商城4M品牌台式机 可编辑区域" EditRegion1刨建完成 企文化 图11-10创建可编辑区域“ EditRegion1 (6)接着在文档中最后一个单元格内定位光标,利用上面的方法创 建可编辑区域“ EditRegion2",最后效果如图11所示 电子商罐腿品牌台式机 ditRegit 两个可编辑区 图11-11创建可编辑区域“ EditRegion2 7)执行【文件】->【保存】或【另存为模板】命令,显示“另存为 模板”对话框 (8)在“另存为模板”对话框中给模板命名,如图11-12所示
图11-10 创建可编辑区域“EditRegion1” （6）接着在文档中最后一个单元格内定位光标，利用上面的方法创 建可编辑区域“EditRegion2”，最后效果如图11-11所示。 图11-11 创建可编辑区域“EditRegion2” （7）执行【文件】->【保存】或【另存为模板】命令，显示 “另存为 模板”对话框。 （8）在“另存为模板”对话框中给模板命名，如图11-12所示
站点:mbA 保存 现存的模板:「(有模板 厂取消 描述:一个导航模 另存为:蝨n 助0 图11-12“另存为模板”对话框 (9)单击“保存”按钮,模板创建完成 11.22利用模板创建网页 模板创建好后,就可以利用此模板快速、髙效地创建风格一致的网页了 基于模板创建网页步骤如下 (1)执行【文件】->【新建】命令,选择“模板”选项卡,选择一个要使用的 模板的站点,从列表中选择想要使用的模板,选择上面刚刚建立的模板“dhmb”, 如图113所示 (2)单击“创建”按钮,创建一个基于模板的新网页
图11-12“另存为模板”对话框 （9）单击“保存”按钮，模板创建完成。 11.2.2 利用模板创建网页 模板创建好后，就可以利用此模板快速、高效地创建风格一致的网页了。 基于模板创建网页步骤如下： （1）执行【文件】->【新建】命令，选择“模板”选项卡，选择一个要使用的 模板的站点，从列表中选择想要使用的模板，选择上面刚刚建立的模板“dhmb”， 如图11-13所示。 （2）单击“创建”按钮，创建一个基于模板的新网页