Dreamweaver网页设计 邢永峰 第11章新.ppt

Dreamweaver 网页设计 第11章 模板和库 【学习概述】 模板和库都是神奇的网页设计技术。在Dreamweaver中可以利用模板和库设计出具有统一风格的网页，同时也能更加方便网站的更新和维护。本章重点内容是：模板和库的概念、创建模板、定义可编辑区域、套用模板、修改模板和库等内容。 11.1 资源 资源是指网站中用到的图片、颜色、链接、动画等元素。执行【窗口】-【资源】命令，打开“资源”面板，如图11-1所示。 Flash： Macromedia Flash 格式文件。注意这里仅仅显示 SWF 文件（压缩的 Flash 文件，后缀名为“.swf”），而不显示 FLA（Flash 源文件，后缀名为“.fla”）文件。 Shockwave： Macromedia Shockwave 格式文件。 影片： QuickTime 或 MPEG 格式文件。 脚本： JavaScript 或 VBScript 文件。 模板：显示模板文件。 库项目：显示库项目文件。 “资源”面板右下方的几个按钮的作用如下： ：刷新站点列表。 ：新建模板或库项目。 ：编辑资源。 ：删除资源。 11.1.1 模板 模板是一项伟大的技术。模板是一种特殊的文档，只要一个网页的基本版式设计好后，把它保存为模板，以后就可以重复使用该模板来建立新的网页，新建立的网页会自动套用模板中设计好的版式。当修改完模板的版式并保存后，Dreamweaver会瞬间自动修改所套用的这个模板网页。当一个网站有成千上万个网页时，如果没有应用模板技术，在更新这个站点时会使这种工作变得极其困难。如果应用了模板这项技术，要更新这个站点，将极其容易。在“资源面板”中单击“模板”按钮 ，显示站点中所有模板。 11.4 实践检验 * * 图11-1“资源”面板 选择“站点”列表则显示站点的所有资源；选择“收藏”列表仅显示收藏的资源。读者可以使用“资源”面板来组织和管理站点中使用到的资源，“资源”面板中显示了站点中的资源，并且把它们分为以下几类： 图像：站点中各式各样的图像，包括 GIF、JPEG 或 PNG 格式的图像文件。 颜色：站点的文档和样式表中使用的颜色，包括文本颜色、背景颜色和链接颜色。 URLs：当前站点文档中的外部链接。此类别包括下列类型的链接：FTP、gopher、HTTP、HTTPS、JavaScript、电子邮件（mailto）和本地文件（file://）。 11.1.2 库 库项目是用来放置站点中重复使用的元素对象，可以被定义为库项目的元素很多，比如文字、图像、表格等。如果将网页的部分内容定义为库项目，则当更新该库项目时，所有使用库项目的页面都得到更新。模板和库有相似之类，比如瞬间更新网站内容。不同的是：使用模板是整体页面形式相同，部分元素不同；使用库是部分元素相同，整体页面形式差别很大。也就是说，模板的作用是将整个网页“共享”起来，而库的作用只是将网页中局部元素“共享”起来。当然读者完全可以在同一个网页中既应用模板又应用库项目。在“资源面板”中单击“库”按钮 ，显示库项目，如图11-2所示。 图11-2 “资源”面板－库项目 在文档中选择库项目后，会显示“库项目”属性面板，如图11- 3所示。 图11- 3 “库项目”属性面板 Src：显示库项目源文件的文件名和位置。 打开：打开库项目的源文件进行编辑。这等同于在“资源”面板中选择项目并单击“编辑”按钮。 从源文件中分离：用于断开所选库项目及其源文件之间的链接。分离库项目后，可以在文档中对其进行编辑，但它不再是库项目并且不能在更改原始库项目时更新。 重新创建：用当前选定内容更改原始库项目。使用此选项可以在丢失或意外删除原始库项目时重新创建库项目。 创建模板 在使用模板之前，要先创建模板，创建模板步骤如下： （1）这一步有两种方法，一种方法是：执行【窗口】-【资源】命令，打开“资源”面板，选择模板图标。在“资源”面板的右下方单击“新建模板”按钮，如图11-5所示，输入新模板的名字，双击打开该模板，就可以编辑该模板了；另一种方法是：先建立普通网页，再把这个网页另存为模板。 图11- 5 “资源”面板－模板 （2）在“设计”视图中，设计网页（网页中先插入一个1行2列的表格，然后在其下方再插入一个2行2列的表格），如图11-6所示。 图11-6 设计网页 （3）在第二个表格的第1个单元格内定位光标。执行【插入】-【模板对象】-【可编辑区域】命令。或在“插入”栏的“常用”类别中，单击“模板”按钮上的箭头，然后选择“可编辑区域”，如图11-7所示。如果开始选择的是第二种方法（建立普通网页，然后另存为模板），就会显示提示信息“Dreamweaver会自动将此文档转换为模板”（如图11-8所示），单击“确定”按钮，接