Cha04使用模版与库规范.ppt

第4章 使用模版与库 在Dreamweaver CC中利用模板和库项目能够创建具有统一风格的网页，使按钮、菜单及版权信息等模块保持一致。从而简化操作，提高网页制作效率，同时也能更方便网站的维护。 本章介绍模板与库项目的基础知识和应用：如何创建模板、如何编辑模板，如何创建和设置库项目。 第4章 使用模版与库 4.1 使用模板 4.2 使用库项目 4.3 上机练习——制作模板和基于模板的网页 4.4 思考与练习 4.1 使用模板 大多数网站的页面要求风格一致或功能相似，使用Dreamweaver CC的模版功能可以创建出具有相同页面布局、设计风格一致的网页。通过模板来创建和更新网页不仅可以大大地提高工作效率，而且还为后期维护网站提供了方便，可以快速改变整个站点布局和外观。 使用模板创建文档可以使网站和网页具有统一的结构和外观。模板实质上就是作为创建其他文档的基础文档。在创建模板时，可以通过创建可编辑区域来区分哪些网页元素应该长期保留、不可编辑，哪些元素可以编辑修改。 模板的功能就是把网页布局和内容分离，在布局设计好之后将其保存为模板，这样，相同布局的页面就可以通过模板创建，从而极大地提高了工作效率。 模板的运用在网页设计过程中主要表现为创建模板、定义模板可编辑区域和管理模板等操作。 4.1.1 使用模板的优点 模板具有以下几个优点： 风格一致、系统性强，方便制作同一的网页页面。 免除了以前没有此功能时还要常常另存为，一不小心就会覆盖重要档案的困扰。 如果要修改共同的页面元素，不必一页一页地修改页面中的元素，只要更改应用它们之上的模板就可以了。 4.1.2 创建空白模板 Dreamweaver CC中的模板是一种特殊类型的文档，用于设计类似的页面布局。模板的编辑过程和普通文档的制作是一样的，既然是编辑模板，那么编辑的当然就是页面中公共的部分，这些公共的部分在生成普通网页时是不能随意修改的。 模板由可编辑区域和不可编辑区域两部分组成。不可编辑区域包括了页面中的所有元素，构成页面的基本框架；可编辑区域是为了添加相应的内容而设置的，在后期维护中，可通过改变模板的不可编辑区域，快速更新整个站点中所有应用了模板的页面布局。 根据设计需要，可以创建空白的模板，经过修改后应用到文档。创建新空白模板的具体操作步骤如下。 4.1.2 创建空白模板 (1) 打开Dreamweaver CC软件，执行【文件】|【新建】命令，打开【新建文档】窗口。 (2) 在【新建文档】窗口中，选择【空白页】，将【页面类型】选择为【HTML模版】，【布局】选择为【无】，如图4.1所示。 (3) 单击【创建】按钮即可创建一个空白模版，如图4.2所示。 4.1.2 创建空白模板 在【资源】面板中也可以创建空白模版。执行【窗口】|【资源】命令，打开【资源】面板。在【资源】面板中的左侧选择【模板】 按钮，单击【新建模板】 按钮，在【资源】面板中双击模板名称，即可打开空白模板进行编辑，如图4.3所示。 4.1.3 创建和删除可编辑区域 创建模板后可以插入模板区域，也可以为代码颜色和模板区域高亮颜色设置模板首选参数。 在插入可编辑区域之前，应该将文档另存为模板。如果在文档（而不是模板文件）中插入一个可编辑区域，Dreamweaver会警告该文档将自动另存为模板。 在网页页面中新建可编辑区域的操作步骤如下： 4.1.3 创建和删除可编辑区域 (1) 打开随书附带光盘中的CDROM\素材\Cha04\ index01.html文件，如图4.4所示。 (2) 将鼠标光标插入到要创建可编辑区域的区域，如图4.5所示。 4.1.3 创建和删除可编辑区域 (3) 在菜单栏中选择【插入】|【模板】|【可编辑区域】命令，如图4.6所示。 (4) 弹出将文档转换为模板对话框，单击【确定】按钮 ，如图4.7所示。 4.1.3 创建和删除可编辑区域 (5) 在弹出的【新建可编辑区域】对话框中为可编辑区域命名，如图4.8所示。 (6) 单击【确定】按钮，添加可编辑区域标记后的文档如图4.9所示。 4.1.3 创建和删除可编辑区域 如果已经将模板文件的一个区域标记为可编辑，而现在想要再次锁定它（使其在基于模板的文档中不可编辑），请使用【删除模板标记】命令，操作步骤如下： 4.1.4 创建可选区域和重复区域 在Dreamweaver CC中的模板中可选区域是模板中的区域。设计者可将其设置为在基于模板的文档中显示或隐藏。当想要为在文档中显示内容设置条件时，请使用可选区域。插入可选区域以后，既可以为模板参数设置特定的值，也