第8章旅游网站模板和库制作()

DreamweaverCS5网页制作基础教程本章将介绍使用库和模板制作网页的基本方法。第8章旅游网站模板和库制作学习目标了解库和模板的含义和主要作用。了解常用模板对象的含义和作用。掌握【资源】面板的使用方法。掌握创建和应用库项目的方法。掌握创建和应用模板的方法。8.1设计思路在一个网站中，许多网页除了内容不同外，往往具有相同的结构，如果这些具有相同结构的网页都需要一个一个地去制作势必浪费很多时间和精力，同时日后如果需要改变网页结构再一个一个地去修改也不现实。在网站中，许多网页往往有一部分具有相同的内容，如广告、页眉和页脚，如果相同的内容每次重复制作也实在没有必要。本书实例“旅游网站”也一样，除了主页面只有一个，可以直接制作外，二级页面都具有相同的结构，只是显示的主要内容不同，因此为了省时省力，可以首先制作一个模板，通过模板生成需要的网页，再添加具体内容即可。其中页眉、导航栏和页脚以及每个栏目的二级导航栏制作成库，放置在网页的相应位置。8.2创建模板认识模板直接创建新模板将现有网页保存为模板模板是一种特殊类型的文档，用于设计固定的并可重复使用的页面布局结构，基于模板创建的网页文档会继承模板的布局结构。因此，在批量制作具有相同版式和风格的网页文档时，使用模板是一个不错的选择，它可使网站拥有统一的布局和外观，而且模板变化时可以同时更新基于该模板创建的网页文档，提高了站点管理和维护的效率。8.2.1认识模板在设计模板时，设计者可在模板中插入模板对象，从而指定在基于模板的网页文档中哪些区域是可以进行修改和编辑的。实际上在模板中操作时，模板的整个页面都可以进行编辑，这与平时设计网页没有差别。惟一不同的是最后一定要插入可编辑的模板对象，否则创建的网页没有可编辑的区域，无法添加内容。在基于模板创建的网页文档中，只能在可编辑的模板对象中添加或更改内容，不能修改其他区域。在DreamweaverCS5中，常用的模板对象有可编辑区域、重复区域、重复表格和令属性可编辑等类型。模板操作必须在Dreamweaver站点中进行，如果没有站点，在保存模板时会提示创建Dreamweaver站点。在Dreamweaver中，创建的模板文件保存在站点的“Templates”文件夹内，“Templates”文件夹是自动生成的，不能对其名称进行修改。通过【新建文档】对话框和【资源】面板可直接从空白文档开始创建新模板。在菜单栏中选择【文件】/【新建】命令，打开【新建文档】对话框，选择【空模板】/【HTML模板】/【无】选项。8.2.2直接创建新模板新建可编辑区域的方法：1.在菜单栏中选择【插入】/【模板对象】/【可编辑区域】命令。2.用鼠标右键单击，在弹出的快捷菜单中选择【模板】/【新建可编辑区域】。3.在【插入】面板的【常用】类别中，单击按钮。可编辑区域是指可以进行添加、修改和删除网页元素等操作的区域，可编辑区域控制着在基于模板创建的网页中用户可以编辑哪些区域。可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。修改可编辑区域等模板对象名称的方法是，单击模板对象的名称将其选中，然后在【属性】面板的【名称】文本框中修改模板对象名称即可。如果已经将模板文件的某个区域设置为可编辑，现在要取消这一设置，使其在基于模板的文档中不再可编辑，可使用【删除模板标记】命令。方法是，单击可编辑区域左上角的标签以选中它，选择【修改】/【模板】/【删除模板标记】命令，也可单击鼠标右键，然后选择【模板】/【删除模板标记】命令。插入重复表格的方法：在菜单栏中选择【插入】/【模板对象】/【重复表格】命令，打开【插入重复表格】对话框。重复表格是指包含重复行的表格格式的可编辑区域，可以定义表格的属性并设置哪些单元格可编辑。重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。另外，在将现有网页保存为模板时，不能将选定的区域变成重复表格，只能插入重复表格。如果在【插入重复表格】对话框中不设置【单元格边距】、【单元格间距】和【边框】的值，则大多数浏览器按【单元格边距】为“1”、【单元格间距】为“2”和【边框】为“1”显示表格。【插入重复表格】对话框的上半部分与普通的表格参数没有什么不同，重要的是下半部分的参数。插入重复区域的方法：选择想要设置为重复区域的文本或内容或将插入点放入文档中要插入重复区域的位置，然后在菜单栏中选择【插入】/【模板对象】/【重复区域】命令，打开【新建重复区域】对话框，在【名称】文本框中输入惟一的重复区域名称，然后加以确认即可。重复区域是指可以复制任意次数的指定区域。重复区域是模板的一部分，这一部分可以在基于模板的页面中重复多次。重复区域通常与表格一起使用，也可以为其他页面元素定义重复区域。使用重复区域，可以通过重复特定项目来控制页面布局。实际上，重复表格就是重复区域和可编辑区域两种模板对象的综合应用。重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。除了通过【新建文档】对话框来直接创建模板外，实际上也可以使用【资源】面板来直接创建模板文件。除了直接创建模板外，也可以将现有网页保存为模板。如果模板文件是通过将现有网页另存为模板来创建的，则新模板在“Templates”文件夹中，并且模板文件中的所有链接都将更新以保证相应的文档相对路径是正确的。如果以后基于该模板创建文档并保存该文档，则所有文档相对链接将再次更新，从而依然指向正确的文件。8.2.3将现有网页保存为模板8.3创建库项目认识库项目直接创建库项目基于选定内容创建库项目库是一种特殊的Dreamweaver文件，其中包含可放置到网页中的一组单个资源或资源副本。库中的这些资源称为库项目，也就是要在整个网站范围内反复使用或经常更新的元素。在网页制作实践中，经常遇到要将一些网页元素在多个页面内应用。当修改这些重复使用的页面元素时如果逐页修改相当费时，此时便可以使用库项目来解决这个问题。每当编辑某个库项目时，可以自动更新所有使用该项目的页面。8.3.1认识库项目使用库项目时，DreamweaverCS5将在网页中插入该项目的链接，而不是项目本身。也就是说，Dreamweaver向文档中插入该项目的HTML源代码副本，并添加一个包含对原始外部项目的引用的HTML注释。自动更新过程就是通过这个外部引用来实现的。在Dreamweaver中，创建的库项目保存在站点的“Library”文件夹内，“Library”文件夹是自动生成的，不能对其名称进行修改。8.3.2直接创建库项目通过【新建文档】对话框和【资源】面板可直接创建库项目。除了直接创建库项目外，也可以基于选定现有网页内容创建库项目。选择要保存为库项目的对象，选择【修改】/【库】/【增加对象到库】命令，该对象即被添加到库项目列表中，库项目名为系统默认的名称，输入新的库项目名称后按Enter键确认。基于选定内容创建库项目还可以通过以下方法进行。1.选定内容拖入【库】类别。2.单击“库”类别底部的（新建库项目）按钮。8.3.3基于选定内容创建库项目8.4使用模板和库创建网页使用模板创建新网页将现有文档套用模板在网页文档中插入库项目在菜单栏中选择【文件】/【新建】命令，打开【新建文档】对话框。选择【模板中的页】选项，然后在【站点】列表框中选择站点“laoshan”，在模板列表框中选择模板“class”，并选中【当模板改变时更新页面】复选框。8.4.1使用模板创建新网页利用【资源】面板或通过菜单命令可以将模板应用于现有文档。选择要应用的模板“class”，然后单击【资源】面板底部的按钮（也可将要应用的模板从【资源】面板拖到文档窗口），弹出【不一致的区域名称】对话框，根据需要进行设置。8.4.2将现有文档套用模板库项目创建完毕后，只有将它插入到其他页面中才能发挥作用。当向页面添加库项目时，实际内容将随该库项目的引用一起插入到文档中。在【资源】面板的【库】分类中，选中要插入的库项目，单击【资源】面板底部的【插入】按钮，将库项目插入到网页文档中。直接将其拖入到可编辑区域也可插入库项目。8.4.3在网页文档中插入库项目8.5模板和库的维护模板的维护库的维护一、打开附加模板：打开网页文档所使用的模板的快速方法是，首先打开使用模板的网页文档，然后在菜单栏中选择【修改】/【模板】/【打开附加模板离】命令即可，这样就可根据需要快速地编辑模板了。二、重命名模板：在【资源】面板的【模板】类别中，单击模板的名称以选择该模板，再次单击模板的名称以便使文本可选，然后输入一个新名称，按Enter键使更改生效。三、在【资源】面板的【模板】类别中，选择要删除的模板。单击面板底部的【删除】按钮或按Delete键，然后确认要删除该模板。8.5.1模板的维护四、更新应用了模板的文档：在菜单栏中选择【修改】/【模板】/【更新当前页】命令，DreamweaverCS5基于模板的更改来更新该网页文档。可以更新站点的所有页面，也可以只更新特定模板的页面。选择【修改】/【模板】/【更新页面】，打开【更新页面】对话框，根据需要进行设置。五、将网页从模板中分离：首先打开想要分离的基于模板的文档，然后在菜单栏中选择【修改】/【模板】/【从模板中分离】命令。文档被从模板分离，所有模板代码都被删除。网页文档脱离模板后，模板中的内容将自动变成网页中的内容，网页与模板不再有关联，用户可以在文档中的任意区域进行编辑。一、快速打开库项目：在引用库项目的当前网页中，选择库项目后，在【属性】面板中单击【打开】按钮，可打开库项目的源文件进行编辑，这等同于在【资源】面板中双击打开库项目进行编辑。其中，【Src】显示库项目源文件的文件名和位置，不能编辑此信息。8.5.2库的维护二、重命名库项目：重命名模板的方法是，在【资源】面板的【库】类别中，选择库项目暂停，再次单击库项目的名称，然后输入一个新名称，按Enter键使更改生效。在弹出的【更新文件】对话框中选择是否更新使用该项目的文档。三、删除库项目：在【资源】面板的【库】类别中，选择要删除的库项目，单击面板底部的【删除】按钮或按Delete键，然后确认要删除该库项目。8.5.2库的维护四、更新应用库项目的页面：选择【修改】/【库】/【更新当前页】命令，来更新当前文档以使用所有库项目的当前版本。选择【修改】/【库】/【更新页面】命令，可打开【更新页面】对话框来更新整个站点或所有使用特定库项目的文档。五、从源文件中分离库项目：在当前文档中选择库项目，在【属性】面板中，单击按钮根据提示操作即可。8.6拓展训练根据操作要求创建模板和库项目，然后使用模板和库项目创建网页。