第6章 模板和库在网页中的应用

第6章模板和库在网页中的应用主要内容模板和库的概念及作用。模板的创建、编辑及管理使用模板进行页面设计和管理库项目的创建、编辑及管理使用库项目进行页面设计和管理6.1模板和库概述6.1.1模板模板是一种特殊的页面文档，当需要制作某种带有共同格式和特征的文档时，可以首先设计一个模板文档，然后利用模板文档设计制作其他的网页。例如：对于商业站点，大多数文档上通常会出现相同的内容，如公司的徽标和公司的名称等。在编辑网页时，如果在每个文档中都重复添加这些内容，则显得既麻烦，又容易出错。如果将这些格式存储为模板，再通过该模板创建新文档，所生成的新文档中会自动出现这些共有内容，这样，在设计制作网页时，只需编辑文档中不同的内容就行了。6.1模板和库概述6.1.2库库是通过Dreamweaver库技术生成的一类特殊资源，构成库的资源称为库项目。每一个库项目都是Web站点的页面元素。当把站点页面的某个元素设置为库的一个项目后，通过库技术改变该项目内容后，所有使用该项目的页面都可以自动更新。对于Web站点中需要重复使用或频繁更新的某些页面元素，通常使用库技术进行设计和管理。6.1模板和库概述6.1.3模板与库的功能比较模板和库都是批量制作和管理网页的技术。模板主要针对网页的版式进行设计，利用模板可以快速设计出版式相同或相近的页面。库主要针对页面的某些元素设计，利用库项目可以对不同页面的相同网页元素进行管理。模板规定了网页中不可编辑的页面内容，这些页面内容将呈现在关联页面的相同的位置，如利用图6-5的模板生成的所有网页，其锁定的区域在所有网页中均出现的位置是不变的。对于库项目，在网页中没有固定的位置，一个库项目在页面中使用时，可以出现在任何位置上；也可以在一个页面中多次使用同一个库项目。如果将模板中的页面元素设为库项目，则更改该库项目后，使用该模板的所有页面都可能更新。6.2.1模板的创建与编辑1．创建模板⑴打开要创建为模板的文档。若要利用已有文档创建模板，则打开要创建模板的文档；若要从新建的空文档创建模板，则使用“文件/新建”菜单，打开一个新的空文档。⑵将当前文档另存为模板。使用“文件/另存为模板”菜单，打开“另存为模板”对话框，从“站点”弹出式菜单中选择一个用来保存模板的站点，并在“另存为”文本框中为模板输入新建模板名称。⑶保存模板。6.2.1模板的创建与编辑说明：⑴Dreamweaver将模板文件保存在站点的本地根文件夹中的Templates文件夹中，使用文件扩展名.dwt。⑵当另存为模板的文档含有超链接时，将更新已有的链接。⑶使用Dreamweaver的资源面板也可以创建模板。单击“资源”面板底部的“新建模板”按钮，一个新的、无标题模板即空模板将被添加到“资源”面板的模板列表中。6.2.1模板的创建与编辑2．打开模板⑴按照打开普通文档的方法打开模板。站点中所有的模板存储在Templates文件夹中，它们带有.dwt的扩展名。只要从站点窗口中选中要编辑的模板项，双击其图标，即可启动Templates的文档窗口，载入模板文件。⑵在模板面板中打开模板。打开模板面后，当前站点中所有的模板都将显示在模板文档列表中。选中要编辑的模板，双击模板项，或是单击模板面板右下角的编辑钮，即可启动Dreamweaver的文档窗口，载入模板文件。6.2.1模板的创建与编辑3．设置模板的可编辑区域⑴在模板文档中插入新的可编辑区域①打开模板文件，然后将插入点放置在要标记为可编辑区域的位置。②选择“插入/模板对象/可编辑区域”或使用插入工具栏的模板按钮，显示“新建可编辑区域”对话框。③在“名称”文本框中输入可编辑区域的名称，“确定”后即可创建可编辑区域。⑵将现有内容标记为可编辑区域。选中模板中文档的文字、图像或层等内容后，施行如上所述的建立可编辑区域操作，即可将选中对象标记为可编辑区域6.2.1模板的创建与编辑4.取消对可编辑区域的标记按照如下方法，取消对某个可编辑区域的标记：⑴在文档或标签选择器中，选择想要更改的可编辑区域。⑵选择“修改/模板/删除模板标记”菜单。经过上述操作的可编辑区域，即被重新设置为锁定区域。6.2.2模板的管理1.在站点窗口中查找模板文件⑴在模板面板中的模板列表中，选择要查找的模板。⑵单击模板面板右上角的三角形按钮，打开面板菜单，选择“在站点定位”命令后，则自动切换到站点窗口中，同时打开相应的文件夹，并选中该模板对应的文件。6.2.2模板的管理2.重命名模板要重命名模板，一般采用如下的方法：⑴在模板面板中的模板列表中，单击要重新命名的模板项名称，即可激活其文本编辑状态；也可以单击面板右上角的三角形按钮，打开面板菜单，然后选择“重命名”命令，同样会激活其文本编辑状态。⑵输入需要的新名称。⑶单击模板名称区域外任意位置，或是按下回车键，即可重新命名模板。6.2.2模板的管理3.删除模板⑴在模板面板的模板列表中，选中要删除的模板项。⑵单击面板右上角的三角形按钮，打开面板菜单，然后选择“删除”命令，或直接单击模板面板右下角的删除按钮。6.2.3应用模板1．创建基于模板的文档⑴选择“文件/新建”菜单，打开“新建文档”对话框，然后单击“模板”选项卡，显示“从模板新建”对话框。⑵在“模板用于”列表中，选择包含要使用的模板的Dreamweaver站点，然后从右侧的列表中选择一个模板。⑶单击“创建”按钮后，即可启动一个新的Dreamweaver文档窗口，并根据模板创建新的文档。6.2.3应用模板也可以通过资源面板，建立基于模板的文档。一般过程如下：⑴打开资源面板，打开模板窗口。⑵在模板列表中选择模板后打开命令菜单，使用“从模板新建”命令。此时即打开如图6-18所示基于模板建立文档的窗口。⑶施行编辑操作，建立新文档。6.2.3应用模板2.在现有文档上应用模板在现有文档上应用模板的一般方法如下：⑴打开要应用模板的现有文档。⑵在模板面板上的模板列表中，选中要应用的模板。⑶执行如下操作之一完成操作：①单击“应用”按钮；②打开面板菜单，选择“应用”命令；③直接从模板面板上，将需要的模板拖动到文档窗口中。说明：当对现有的文档应用模板时，文档和模板在区域上应有一定的对应关系，否则，模板在文档中将不能正常应用。6.2.3应用模板3．从模板分离文档若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。从模板分离文档的一般操作如下：⑴打开想要分离的基于模板的文档。⑵选择“修改/模板/从模板中分离”菜单。6.2.3应用模板4．修改模板和更新站点⑴打开文档的附加模板①打开附着模板的文档。②使用“修改/模板/打开附加模板”菜单。③这时会启动Dreamweaver的文档窗口，并载入相应的模板。此时可对模板进行编辑。6.2.3应用模板4．修改模板和更新站点⑵更新当前页如果希望对某个文档进行更新，可以采用如下的方法：①打开文档附着的模板，按照需要进行修改，并保存。②打开要更新的文档。③使用“修改/模板/更新当前页”菜单。这时当前文档的风格就被更新了，也即重新应用了修改后的模板。6.2.3应用模板4．修改模板和更新站点⑶更新整个站点如果希望将整个站点中应用同一模板的文档进行批量更新，可以按照如下方法进行操作：①打开相应的模板，按照需要进行修改，并保存。②在文档窗口中，打开“修改/模板/更新页面”菜单。这时会出现“更新页面”对话框，提示选择更新方式。③在“查看”下拉列表框中，设置更新的范围。当选用“整个站点”选项时，则对整个站点中所有的文档进行更新。6.2.3应用模板5．导入和导出XML内容XML是可扩展标记语言（ExtensibleMarkupLanguage），它是一种结构化文档的标记语言,它允许根据需要按照某种规范自行定义语言标记。⑴导出XML档①打开通过模板建立的文档，在其中包含相应的可编辑区域。②使用“文件/导出/作为XML的数据模板”菜单，打开对话框，选择导出可编辑区域时使用的标记方式，然后按“确定”按钮。③在出现的Windows标准文件操作对话框中，选择要保存的文件文件夹，输入要生成的XML文件名称，保存后，即将现有文档导出为XML文档。6.2.3应用模板⑵导入XML文档导入XML文档的一般操作过程如下：①在Dreamweaver环境中选择“文件/导入/XML到模板”菜单，打开图6-23所示对话框。②选中要导入的XML文件，单击“打开”按钮，即可导入XML文档。在导入XML文档时，Dreamweaver会将XML文档内容同XML中指定的模板相融合，并在一个新的Dreamweaver窗口中显示它。6.2.4模板应用示例示例：应用模板技术完成如下设计。⑴设计如前所述“五岳揽胜”的一组页面。⑵将所有网页中右上部区域的“五岳览胜”更换为“会当凌绝顶，一览众山小”6.2.4模板应用示例设计过程如下：1．利用模板设计页面⑴制作模板。⑵设定可编辑区域。⑶对page_1.html文档应用模板page.dwt。⑷利用模板设计“五岳览胜”的系列页面。2．利用模板批量更新页面⑴修改page.dwt模板。利用资源面板打开page.dwt模板，将右上部区域的“五岳览胜”更换为“会当凌绝顶，一览众山小”，按保存按钮。⑵更新页面。保存page.dwt模板文档后，选择“更新”基于该模板的所有文件模式，更新“五岳览胜”的所有页面。6.3库的应用6.3.1创建库项目1．基于文档内容创建项目可以将单独的文档对象创建为库项目，也可以将多个文档对象的组合创建为库项目。⑴打开要创建项目的文档，打开资源面板，选择库类别。⑵在文档窗口中，选择要保存为库项目的内容，然后将选中的内容拖动到库面板的库项目列表区中。⑶拖动内容到项目区后松开鼠标。⑷修改默认项目文件名称，命名库项目文件，完成项目的创建。6.3.1创建库项目建立库项目的其他方法以下任何一种方法都可创建库项目：①在文档窗口中选择内容后，单击库面板的新建库项目按钮；②在文档窗口中选择内容后，单击库面板右上角的三角形按钮，打开面板菜单，使用库面板的“新建库项”命令；③在文档窗口中选择内容后，使用Dreamweaver的“修改/库/增加对象到库”菜单。6.3.1创建库项目2．创建空白库项目基于文档内容创建项目时需要在文档中选定内容，而创建空白库项目时则不能选定任何内容。一般过程如下：⑴确保没有在“文档”窗口中选择任何内容。如果选择了内容，则该内容将被放入新的库项目中。⑵在库面板中，单击新建库项目按钮。此时一个新的、无标题的库项目将被添加到库项目列表中。⑶在项目仍然处于选定状态时，为该项目输入一个名称，然后按Enter键。空白库项目创建后，即可打开库项目文档的编辑窗口，对该库项目进行编辑。6.3.2管理库项目1.在站点窗口中查找库项目文件我们知道，站点中的库项目文件都存储在站点目录中的“Library”文件夹中，利用如下的方法，可以从站点窗口中快速查找相应的库项目文件：⑴在库项目面板中选中要查找的库项目。⑵单击面板右上角的三角形按钮，打开面板菜单。⑶选择“在站点中定位”命令，这时会自动切换到站点窗口中，同时打开相应的文件夹，并选中该库项目对应的文件。6.3.2管理库项目2.重命名库项目要对库项目重新命名，可以按照如下方法进行操作：⑴从库面板的库项目列表中选中要重新命名的库项目。⑵在要重新命名的库项目项名称上单击一次鼠标，即可激活其文本编辑状态；也可以打开面板菜单，再选择“重命名”命令，同样会激活其文本编辑状态。⑶输入新名称。⑷设置完毕，单击库项目文字编辑区之外任意位置，或是按下回车键，即可完成对库项目的重命名。6.3.2管理库项目3.删除库项目要删除库项目，可以采用如下方法：⑴从库面板中的库项目列表中，选中要删除的库项目项。⑵单击面板右上角的三角形按钮，打开面板菜单，然后选择“删除”命令，或是直接单击面板右下角的删除库项目按钮。这时Dreamweaver会打开一个删除确认对话框，确认后，库项目将被删除。6.3.3应用库项目1．在文档中插入库项目在文档中插入库项目的一般过程如下：⑴在文档窗口中，将插入点放置到要插入库项目的位