Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第12章一网页风格.ppt

第12章 统一网页风格 12.1 模板和库的功能 模板是一种以.dwt为扩展名的特殊文档，用于设计固定的页面布局。模板由两种区域组成：锁定区和可编辑区。锁定区域包含了在所有页面中共有的元素，即构成页面的基本框架，比如导航条、标题等。第一次创建模板时，所有的区域都是锁定的。而可编辑区域是根据用户需要而指定的用于设置页面不同内容的区域，通过编辑可编辑区的内容，可以得到与模板风格一致，但又有所不同的新的网页。 模板还有一种特殊形式，即嵌套模板。嵌套模板是指其设计和可编辑区域都基于另一个模板的模板。生成嵌套模板所基于的模板称为基模板，相对于嵌套模板而言，基模板中包含更宽广的设计区域，并且可以由站点的多个内容提供者使用；而嵌套模板可以进一步定义站点内特定部分页面中的可编辑区域。 库用于存放这些广泛地用在整个站点中，并能够重复地被使用或需要经常更新的元素，它们被称为库项目。与模板相似，库也是Dreamweaver中处理重复元素的有力工具之一。库可以使重复性的更新工作更快、更容易，并且无差错。例如，每个页面上都有一个版权声明。在网站的建设过程中，设计者可能需要经常改变该声明。如果一个一个页面地修改，不仅要花费很多的精力和时间，而且很可能出错或遗漏。如果使用库，只要修改库中的项目，就可以保证站点中使用该库项目的页面全部自动更新。 库项目和模板与应用它们的文档都保持关联，在更改库项目或模板的内容时，可以同时更新所有与之关的页面。因此使用库与模板可以更方便地维护网站；合理地利用模板和库的功能可以极大地提高工作效率。 12.2 创建模板和嵌套模板 在Dreamweaver CS6中创建空模板有两种方式，一种是在“新建文档”对话框中创建；另一种是在“模板”面板中创建。下面分别简要介绍其步骤。 1．执行“文件”/“新建”菜单命令，打开“新建文档”对话框。 2．在对话框左侧的“类别”栏选中“空模板”，在“模板类型”列表中选择需要的模板类型，在“布局”列表中选择模板的页面布局，然后单击“创建”按钮。 3．执行“文件”/“保存”命令保存空模板文件，此时会弹出一个对话框，提醒用户本模板没有可编辑区域。 若选中“不再警告我”复选框，那么下次保存没有可编辑区域的模板文件时将不再弹出此对话框。 4．单击“确定”按钮完成存档。 在“模板”面板中创建空模板的步骤如下： 1．在Dreamweaver CS6界面中选择“窗口”/“资源”菜单命令，调出“资源”面板，单击模板图标按钮 ，切换到“模板”面板。 2．单击“模板”面板底端的“新建模板”图标 ，模板列表中会出现一个新模板，且名称为可编辑状态。 3．输入模板名称之后按Enter键，或单击面板其他空白区域。至此，一个空模板就制作完成了。 12.2.1 创建空模板 12.2.2 将网页保存为模板 用户也可以将已编辑好的文档存储为模板，这样生成的模板中会带有现在文件中已编辑好的内容，而且可以在该基础上对模板进行修改，使之满足设计需要。 打开的普通文件 转换为模板的文档 12.2.3 定义可编辑区域 可编辑区域用于在基于模板创建的HTML网页中改变页面内容，可以是文本、图像或其他的媒体，如Flash动画或Java小程序。编辑完成之后，可以将该文档保存为独立的HTML文件。 新建一个空模板文件。然后在文档窗口的“设计”视图中插入一个三行三列的表格，合并第一列单元格之后插入图像，并在其他单元格中输入文字。插入的可编辑区在模板文件中默认用蓝绿色高亮显示，并在顶端显示指定的名称，如图所示。 页面效果 插入的可编辑区域 如果希望将模板中的某个可编辑区域变为锁定区域，可以在“设计”视图中选中要删除的可编辑区域，然后执行“修改”/“模板”/“删除模板标记”菜单命令，即可将可编辑区域变为不可编辑区域。 12.2.4 定义可选区域 “可选区域”是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。例如，如果可选区域中包括图像或文本，用户可设置该内容在基于模板的新文档中是否显示。 可选区域是由条件语句控制的。用户可以在“新建可选区域”对话框中创建模板参数和表达式，或通过在“代码”视图中键入参数和条件语句来控制可选区域。 如果选择“使用参数”，则使用指定的参数控制可选区域。 如果选择“输入表达式”，则根据指定的表达式的值确定是否显示可选区域。表达式值为真时，显示可选区；表达式值为假