网页设计与制作09.pptVIP

第9章 模板与CSS样式 本章要点： u??????? 模板的用途 u??????? 创建模板和设定可编辑区域 u??????? 应用模板 u??????? 编辑模板和网页更新 u??????? CSS样式的用途 u??????? 设计CSS样式并更新网页 9.1 模板 9.1.1 模板概述 所谓模板，实际上是一个范例页面，利用它可以生成具有统一结构与外观的多个页面。Dreamweaver将所有的模板文件存放在站点根目录的Templates子目录下，其扩展名为.dwt。 9.1.2 创建模板 操作实例9-1 将当前文档另存为模板 操作步骤： ①在“文件”菜单选择“打开”选项，选取一个文件。 ②文件打开后，继续在“文件”菜单选择“另存为模板”选项。 ③在“另存模板”对话框中，在“站点”下拉列表中选取站点，然后在“另存为”文本框中输入模板的名称。 ④单击“保存”按钮。模板文件将保存到指定站点的Templates文件夹中，文件扩展名为.dwt。 操作实例9-2 创建新的模板 操作步骤： ①在“窗口”菜单选择“模板”选项，打开“资源”面板。 ②单击“模板”按钮，显示模板面板。 ③在资源面板单击面板底部的“新建模板”按钮，一个新的无标题模板将被添加到模板列表中。 ④当模板仍处于选中状态时，为该模板输入一个名称。例如，“mainn ⑤选中新建模板，单击“资源”面板底部的“编辑”按钮，进入新模板的编辑状态。 ⑥设计模板页面与设计普通网页基本一样，同样可以加入表格、层、图片、动画、设置页面属性等。一般先设计布局，然后填入一些固定不变的内容。例如，站点徽标（logo）、标题栏、导航栏、联系方式等。其他允许变化的内容可设定为可编辑区。 ⑦编辑完毕，按快捷键Ctrl + S保存模板文件。 9.1.3 设定模板的可编辑区域 可编辑区是该模板页面中可以修改的部分；锁定区是在所有页面中保持不变的页面布局部分。 操作实例9-3 将当前模板的内容设定为可编辑区 操作步骤： ①在当前模板文件中，选取需要设置可编辑区的文本或其他内容。 ②在“常用”工具栏的“模板”下拉列表中，选择“可编辑区域”选项，打开“新建可编辑区域”对话框。 ③在“新建可编辑区域”对话框中，为区域输入惟一的名称。 ④单击“确定”按钮，可编辑区被一个有色矩形框环绕。 ⑤参照步骤①~③设置其他可编辑区。 ⑥按快捷键Ctrl + S保存模板文件。 操作实例9-5 锁定可编辑区 如果模板文件的某个区域已标记为可编辑区，而现在又需要将它重新锁定，使之不可编辑，可以使用“移除可编辑区域”命令重新锁定区域。 操作步骤： ①选中指定的“可编辑区”。 ②在“修改”菜单选择“模板”、“删除模板标记”选项，选中的“可编辑区”将被删除。 9.1.4 应用模板 操作实例9-6 创建基于模板的新文档 操作步骤： ①在“文件”菜单选择“新建”选项。弹出“新建文档”对话框。 ②选择“模板”标签，显示如图9-7所示的“从模板新建”对话框。 ③在“模板用于”列表中选择指定站点，在“模板列表”中选择所需要的模板，“预览”窗口将显示该模板的页面。 ④当创建一个基于模板的新文档时，可以选择该文档是否保持依附于模板。如果选择“当模板改变时更新页面”选项时，一旦修改模板后，基于该模板的文档也将更新以反映在模板中所做的修改。如果不选择该选项，新建文档将作为模板的一个拷贝，并且是一个独立的HTML文件，不存在所谓的可编辑区或锁定区。因此，模板发生变化时并不修改该文档。 ⑤单击“创建”按钮，创建新文档。 ⑥编辑文档并保存。 操作实例9-7 对已建文档应用模板 操作步骤： ①打开指定文档。 ②执行下列操作之一，对当前文档应用模板。 ·在“修改”菜单选择“模板”、“应用模板到页”选项，弹出“选择模板”对话框。从列表中选择所需要的模板，单击“选定”按钮。如图9-10所示。 ·在“资源”面板的“模板”分类中选择所需要的模板，然后单击“应用”按钮。 ·从“资源”面板的“模板”分类中将所需要的模板拖动到文档窗口。 9.1.5 编辑模板 操作实例9-12 编辑一个当前文档所基于的模板文件 操作步骤： ①打开一个基于模板所创建的文档。 ②在“修改”菜单选择“模板”、“打开附加模板”选项，则打开所套用的模板文件。 ③按需要修改模板的内容或修改模板的页面属性。 ④按快捷键Ctrl + S保存所做的修改。 ⑤更新基于该模板的网页文件。 操作实例9-15 删除模板文件 操作步骤： ①在“资源”面板选中指定模板。 ②单击“删除”按钮。 ③在“确认删除”对话框单击“是”按钮。 9.1.6 更新基于模板的网页文件 操作实例9-18 更新整个站点或使用某特定