第6章 模板和库应用

《网页设计与制作教程》作者：孟显勇北京理工大学出版社第六章模板和库应用网站设计过程中需要建立大量风格和布局一致的网页，为避免网页设计人员重复制作网页中相同部分，Dremweaver提供了制作网页模版的功能。网页设计过程中经常会重复使用某些页面元素，为简化操作Dreamweaver提供了库项目，并将重复使用的元素设置为库项目。6.1模板网站页面格式统一是网站版式设计的基本要求，因此，网站设计过程中需要建立大量风格和布局一致的网页。避免网页设计人员重复制作网页中相同部分，例如，页面徽标、版权信息、导航栏等。Dremweaver提供了制作网页模版的功能，根据网站版式设计要求设计模版。模版内容分锁定区域、可编辑区域、重复区域和可选区域。6.1模板锁定区域是网站统一部分，体现网站的风格，此区域内容固定，不能编辑，Dreamweaver设计的网页模版默认条件下都是锁定区域。6.1模板可编辑区域是网页中可以修改部分，根据网页设计的具体内容，设计者可以在可编辑区域添加信息。网站模版实现了网站风格控制和网站内容分开，当修改网站风格时，通过修改网站模版就可以使整个站点内基于模版的网页实现更新。6.1模板重复区域是模版中提供可重复添加网页元素的区域，网页设计中需要重复添加某些页面元素，以达到扩展页面布局的目的，例如，添加表格的行或列。重复区域主要分两类：重复区域和重复表格。6.1模板可选区域是根据设计需要，设置使用条件。使用时根据条件来决定是否显示某个页面对象。使用模版制作网页时，根据条件来决定是否显示某一页面对象。可编辑的可选区域就是根据条件来决定是否显示页面对象，并可以对显示的对象进行编辑。6.1.1创建模版使用Dreamweaver创建模版时，选择菜单栏的【文件】→【新建】，弹出【新建文档】对话框，其中类别选择【模版页】，模版页选择【HTML模版】，然后创建模版页。6.1.1创建模版Dreamweaver可以将网页存储为模版，打开要存储为模版的网页，选择菜单栏的【文件】→【另存为模版】，弹出【另存为模版】对话框，设置存储位置保存。6.1.2创建可编辑区在Dreamweaver中选择将要被设置为可编辑区域的文字和内容，或者将光标定位到插入可编辑区域的位置。选择菜单栏的【插入】→【模版对象】→【可编辑区域】，添加可编辑区域，并给可编辑区域取名。也可以使用插入栏工具添加可编辑区域，选择插入栏里的【常用】→【模版】中的按钮，选择【可编辑区域】插入可编辑区域。6.1.2创建可编辑区若选中可编辑区域，可以用鼠标点击可编辑区域左上角的选项卡，或者选择菜单栏的【修改】→【模版】，在子菜单底部列表中选择可编辑区域名称。若删除可编辑区域，可以选中可编辑区域的选项卡，然后选择菜单栏的【修改】→【模版】→【删除模版标记】。6.1.3创建重复区域重复区域是在基于模板的页面中可以重复创建的区域。网页设计过程中通过创建重复对象，实现页面布局的扩展。重复区域有两种模板对象：重复区域和重复表格。6.1.3创建重复区域插入重复区域时，在Dreamweaver中选择将要设置为重复区域的文字和内容，或者将光标定位到插入重复区域的位置。选择菜单栏的【插入】→【模版对象】→【重复区域】。也可以使用插入栏的【常用】选项单，选择【模版】→【重复区域】。基于模版的网页的重复区域中的内容是不能被修改的，因此，必须在重复区域中加入可编辑区域，才能在基于模版的网页中修改重复区域的内容。6.1.3创建重复区域插入重复表格，在Dreamweaver中将光标定位到插入重复表格的位置。选择菜单栏的【插入】→【模版对象】→【重复表格】。也可以使用插入栏【常用】选项单，选择【模版】→【重复表格】。重复表格与重复区域的区别在于重复表格每个单元格的内容是可以修改的，基于模版的网页可以在重复表格单元格里添加内容。Dreamweaver在插入重复表格时自动将单元格设置成可编辑区域。6.1.4创建可选区域可选区域是模版中根据条件决定显示或隐藏的区域。设计者使用模版制作网页时可以根据条件设置对象的显示或隐藏，可选区域是否显示主要由模版设置的条件来决定的，条件符合就显示区域，否则就隐藏区域。6.1.4创建可选区域可选区域的条件设置，可以通过设置模板参数或在模板中定义条件语句来实现，网页设计者可以在创建基于模板的文档时通过设置参数来控制是否显示可选区域。插入可选区域时，在Dreamweaver中将光标定位到插入可选区域的位置。选择菜单栏的【插入】→【模版对象】→【可选区域】。也可以使用插入栏的【常用】选项单，选择【模版】→【可选区域】。6.1.4创建可选区域插入可编辑的可选区域，就是在可选区域里提供可编辑区域。可选区域是根据条件显示或隐藏某个页面对象，当需要对显示页面对象进行编辑时，将其设置为可编辑的可选区域。创建可选区域插入可编辑的可选区域时，在Dreamweaver中将光标定位到插入可编辑的可选区域的位置。选择菜单栏的【插入】→【模版对象】→【可编辑的可选区域】。也可以使用插入栏的【常用】选项单，选择【模版】→【可编辑的可选区域】。6.1.5创建嵌套模版嵌套模版是基于当前模版创建的模版，创建嵌套模版需要基于原始模版创建一个网页，按照设计要求对网页进行编辑，将编辑合格后的网页另存为模版，这样就得到了嵌套模版。嵌套模版是在原始模版的基础上创建的，继承了原始模版的基本特征，同时又添加了一些新的对象，嵌套模版实现了具有共同基本特征的模版多样性。6.1.5创建嵌套模版嵌套模版可以在整个站点内共享网站的基本设计元素，网站中页面在保持同一风格的基础上，具有一定的个性化。基本模版包含着网站设计的基本元素，并且提供大量的可编辑区域，使嵌套模板可以定义更具体和更具个性化的页面设计。6.1.5创建嵌套模版嵌套模版继承了基本模板中的可编辑区域，在可编辑区域里定义嵌套模版的对象。当基本模版更新时，基于此模版的嵌套模板和基于嵌套模版的页面都会更新，这样就实现了整个站点的集中控制。6.1.5创建嵌套模版创建嵌套模版，首先在Dreamweaver中基于基本模版创建一个新的页面，对页面的元素和布局进行编辑，将编辑好的页面另存为新的模版，这样新的模版就是嵌套模版。选择菜单栏的【新建】→【从模版新建】，选择基本模版，建立基于基本模版的页面，并对页面编辑。6.1.5创建嵌套模版创建嵌套模版，也可以选择【资源】面板的【模版】类别，选择基本模版，点击右键菜单，选择【从模版新建】，建立基于基本模版的网页，并对其进行编辑，编辑合格后将其另存为模版，这样就建立了嵌套模版。6.1.6制作模版使用Dreamweaver制作模版时，选择菜单栏的【新建】，在新建文档对话框里，选择【常规】选项单，选择【模版页】→【HTML模版】，就可以创建一个新的模版。使用Dreamweaver创建模版的可编辑区域，重复区域和可选区域。6.2库在网页设计过程中经常会重复使用某些页面元素，为简化操作Dreamweaver提供了库项目，将重复使用的元素设置为库项目，并将网站的库项目集中存放在库中进行管理和控制。库中可以存储各种类型的页面元素，例如，文字、图像、音频、表单、表格等。库项目内容发生变化时，6.2库整个站点引用该库项目的页面都会自动更新，库项目简化了维护和管理站点工作。例如，站点将某个广告图像设置为库项目，站点内每个页面都需要引用此图像，站点定期更新广告图像时，只需要更改相应的库项目就可以更新整个站点的广告图像。Dreamweaver将库项目存储在站点根目录里的Library子目录中。6.2.1创建库项目可以将任何独立的页面元素设置为库项目，例如代码段、文本、图像、视频、表格、表单、JavaScript、插件、ActiveX元素等。页面元素设置成为库项目后，可以被重复引用，通过更新库项目实现每个引用页面的更新。6.2.1创建库项目创建库项目时，选择菜单栏的【窗口】→【资源】→【库】，打开“资源管理”面板。在代码视图或设计视图中选择页面元素，用鼠标拖拉到库窗口，建立库项目。在库项目列表中可以修改库项目名称，点击【右键】→【重命名】。创建库项目也可以选择库管理面板的【新建库项目】按钮，在代码视图和设计视图对新建立的库项目进行编辑。6.2.1创建库项目建立库项目也可以先在设计视图中选择要制作成库项目的页面元素，然后选择【修改】→【库】→【增加对象到库】，所选页面元素被设置成为库项目。6.2.2库项目操作库项目操作主要是指库项目的建立、编辑和使用过程。通过库项目的使用可以大大提高网页设计和编程的效率。6.2.2库项目操作一、文档中插入库项目库项目可以被站点内的页面重复引用。在页面插入库项目时，首先在“资源管理”面板里选中待插入的库项目，将它拖到代码视图或设计视图中的插入位置。可以先选中要插入的库项目，然后点击设计视图或代码视图的插入点，点击“库管理”面板的【插入】按钮。6.2.2库项目操作一、文档中插入库项目htmlheadtitle插入库项目/title/headbody!--#BeginLibraryItem/Library/ch6-2.lbi--imgsrc=images/Garden.jpgwidth=150height=118/!--#EndLibraryItem--/body/html编辑库项目Dreamweaver可以通过编辑库项目来修改引用库项目的页面，实现集中控制和管理。修改库项目后，所有引用该库项目的页面全部更新。在Dreamweaver打开需要编辑的库项目，可以对其内容和对象属性进行编辑。编辑库项目时，选中库面板中的库项目编辑按钮，可以在设计视图和代码视图对库项目进行编辑；也可以通过属性面板对库项目内的对象属性进行修改和设置；也可以在库项目列表里选中待编辑库项目双击鼠标，编辑所选库项目。本章小结本章主要讲解Dreamweaver设计网页模版和库的基本知识。需要重点掌握模版的基本功能，并熟悉模版各类区域的设置方法；掌握可编辑区域、重复区域与可选区域的功能和使用方法；掌握库的基本功能，并熟悉库项目的制作与编辑方法。思考与练习1.请简述网页模版在网站设计与制作中的功能和作用。2.请简述模版中的可编辑区域、重复区域和可选区域的功能。3.请简述库在网页设计过程中的功能与作用。4.请简述库项目的创建、编辑和管理的基本操作步骤。实例1.创建如图6-9所示网页设计模版，模版名称为case6.dwt，基于模版的页面名称为case6.html，请使用Dreamweaver创建上述模版。