案例网站模板页的设计

案例网站模板页的设计教学设计课型：新授课时：2教学目标了解模板的根本概念掌握模板的设计方法重点模板的设计方法难点模板的设计方法关键结合程序实例理解教学方法：工程实例教学

教学准备教具资料网络教室、多媒体播送环境准备Dreamweavercs3

内容提要1.模板的根底知识

2.案例网站的模板设计

Dreamweaver模板的概念Dreamweaver模板是一种特殊类型的文档，用于设计“锁定的〞页面布局。模板创作者设计页面布局，并在模板中创立可在基于模板的文档中进行编辑的区域。在模板中，设计者控制哪些页面元素可以由模板用户进行编辑。模板最强大的用途之一在于一次更新多个页面。从模板创立的文档与该模板保持连接状态〔除非用户以后别离该文档〕。可以修改模板并立即更新所有基于该模板的文档中的设计。模板控制基于模板的文档的可编辑区域和固定区域。可以在文档中包括数种类型的模板区域。

定义模板区域模板确定文档的根本结构，并包含诸如文本、图像、页面布局、样式和可编辑区域之类的元素。将文档另存为模板时，Dreamweaver自动锁定文档的大局部区域。模板创作者定义基于模板的文档中的哪些区域可编辑，方法是在模板中插入可编辑区域或可编辑参数。创立模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。有四种类型的模板区域：可编辑区域、重复区域、可选区域和可编辑标记属性。可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的局部。模板创作者可以将模板的任何区域定义为可编辑的。要让模板生效，它应该至少包含一个可编辑区域；否那么，基于该模板的页面将无法编辑。

创立Dreamweaver模板可以从现有文档〔如HTML、MacromediaColdFusion或MicrosoftActiveServerPages文档〕创立模板，或者从新建的空文档创立模板。“新建文档〞对话框〔“文件〞>“新建〞〕提供了用于创立新模板和基于模板的页面的几种选项。Dreamweaver用文件扩展名.dwt来保存模板。模板被保存在站点的本地根文件夹中的一个特殊Templates文件夹中。如果该Templates文件夹在站点中尚不存在，Dreamweaver将在保存新建模板时自动创立该文件夹。注意：不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。此外，不要将Templates文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。

创立模板：1、在“文档〞窗口中翻开想要另存为模板的文档，可以采用以下两种方法之一：●假设要翻开一个现有文档，请选择“文件〞>“翻开〞并选择该文档。●假设要翻开一个新的空文档，请选择“文件〞>“新建〞。在翻开的对话框中选择“根本页〞或“动态页〞。在文档列表中选择想要使用的页面类型，然后单击“创立〞。2、文档翻开时，选择“文件〞>“另存为模板〞。注意：除非您选择了“不再显示此对话框〞，否那么您将收到一个警告，表示您正在保存的文档中没有可编辑区域。单击“确定〞将文档另存为模板，或单击“取消〞退出此对话框而不创立模板。3、在出现的对话框中，从“站点〞出式菜单中选择一个用来保存模板的站点，并在“另存为〞文本框中为模板输入一个唯一的名称。4、单击“保存〞。模板文件被保存在站点的Templates文件夹中，文件扩展名为.dwt。

创立可编辑区域“可编辑模板区域〞控制基于模板的页面中的哪些区域可以编辑。可以将整个表格或单独的表格单元格标记为可编辑的，但不能将多个表格单元格标记为单个可编辑区域。如果<td>被选定，那么可编辑区域中包括单元格周围的区域；如果未选定，那么可编辑区域将只影响单元格中的内容。

编辑和更新模板保存模板时，Dreamweaver会询问它是否应该更新所有附着到该模板的文档。可以使用“修改〞>“模板〞>“刷新页面〞命令。Dreamweaver在该模板所在的站点中更新基于模板的文档。Dreamweaver将自动更新基于该模板的文档，包括基于正在更新的模板的嵌套模板。

模板结构通常在一个网站中会有几十甚至几百个风格根本相似的页面，如果每次都重新设定网页结构以及相同栏目下的导航条、各类图标就显得非常麻烦，因此我们可以借助DreamweaverMX的模板功能来简化操作。其实模板的功能就是把网页布局和内容别离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创立，因此能够极大提高工作效率。

案例网站“西部汽车王〞的模板设计在网站工程进行规划之后，在动手设计网站具体页面之前，为了使网站整体风格统一，同