《网页制作基础(Dreamweaver CS6)(第3版)》项目7 使用模板和库_第1页
《网页制作基础(Dreamweaver CS6)(第3版)》项目7 使用模板和库_第2页
《网页制作基础(Dreamweaver CS6)(第3版)》项目7 使用模板和库_第3页
《网页制作基础(Dreamweaver CS6)(第3版)》项目7 使用模板和库_第4页
《网页制作基础(Dreamweaver CS6)(第3版)》项目7 使用模板和库_第5页
已阅读5页,还剩46页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

项目七使用模板和库理解模板和库在网页制作中的作用;学习模板和库的创建与编辑;能够应用模板和库制作和更新网页。

教学目标:教学重点:模板和库的作用模板和库的应用教学难点:

模板和库的应用教学方法:

任务驱动法任务一、认识模板

知识点:理解什么是模板;理解模板的作用;了解模板的优点。任务描述

本任务主要学习什么是模板,模板在网页制作中起到什么作用,以及使用模板制作和更新网页具有什么优点。任务分析

在使用Dreamweaver软件建设一个大规模的网站时,通常需要制作很多的页面,而且还要保证这些页面的风格统一。为了提高网站建设与维护的工作效率,避免重复操作,这就要用到模板。模板实质上就是创建其他具有相同版式和风格文档的基础文档,它是一种特殊类型的文档,模板文件的扩展名为“.dwt”,是Dreamweaver提供的一种对站点中文档的管理功能,而非HTML本身的功能。

当创建一个模板或将一个网页另存为模板时,Dreamweaver默认将所有区域标志为“锁定”。通过模板生成网页时,Dreamweaver会自动生成网页共用部分(即在模板中制作的相同布局网页的公共部分),并且这些锁定区域处于不可编辑的状态,也称为不可编辑区域,用户无法修改。要更新公共部分时,只能在模板中编辑。只需要更改模板,所有应用该模板的页面都会随之改变。

用户可以根据需要在模板中创建可编辑区域,模板的可编辑区域是指基于模板创建的网页中用户可以编辑的区域。在制作模板时,可以创建可编辑区域决定模板中的哪些部分是基于模板生成的网页中可自由编辑的,应用该模板的页面只能在可编辑区域内进行编辑,用户可以在可编辑区域放置各页面之间不同的主体内容部分。模板的作用

模板的最大作用就是用来快速创建及更新具有统一结构和风格的网页,省去了重复操作的麻烦,提高工作效率,维护网站更轻松。单就快速创建来讲,复制网页内容、另存网页等也能实现,但是快速更新大批量网页是模板特有的功能,具有高效性的特点。使用模板的优点:(1)省去了重复劳动的麻烦,提高了设计者的工作效率。(2)更新站点时,如果要修改共同的页面元素,只要更改应用的模板就可以了,所有相同模板的网页文件可快速更新,不必一个一个地逐页修改。(3)基于模板生成的网页文件与模板之间保持关联,公共内容可保证完全一致,风格统一,看起来比较系统。任务二、创建模板知识点:掌握空白模板的创建方法;了解空白模板保存并关闭的方法;掌握使用已有文档生成模板以及保存并关闭的方法。

任务描述

本任务主要学习如何创建空白模板,以及如何将已有文档转换成模板。任务分析在创建模板前一定要先创建站点,才能在保存一个新模板时保存在Dreamweaver在站点根目录下自动生成的Templates文件夹中,才能在新建“模板中的页”时找到该模板,也才能有效管理站点中应用模板的页面。不能将模板文件移动到其它位置存放,如果模板文件改变了位置,Dreamweaver将无法识别该模板文件。可以直接创建空白模板,也可以将已有文档转换为模板。新创建的模板中用户如果没有定义任何可编辑区域,那么由模板生成的网页是不可编辑的,用户无法编辑网页之间不同的内容部分,虽然快速创建相似网页是模板的优点,但一个站点中的页面如果全都一样就没有现实意义了,因此在保存或关闭模板时Dreamweaver都会弹出“此模板不含有任何可编辑区域”的警告框提醒用户进行设置。一、操作体验操作步骤按照教材操作步骤完成任务二。试一试

打开素材文件夹myweb中的公司简介文档“myweb\html\GuanYuWoMen\42.html”,将该网页文档转换成保留页头、页脚及主体部分右侧“用户登录、服务项目、最新客户及网站调查”四个版块为公共内容的模板“blycmoban.dwt”。任务三、编辑模板知识点:了解编辑模板的方法;掌握在模板中设置可编辑区域的方法。任务描述

前面学习了如何创建模板,下面就来学习如何制作模板以及如何在模板中设置可编辑区域的方法。任务分析

空白模板就如同空白网页一样,创建好空白模板后,可以像编辑普通网页一样在模板中一步步制作完成需要的相同结构及公共内容。如果已经有制作好的网页文档包含了所需要的公共部分,可以复制粘贴到模板中,也可以直接将其转换为模板,再像编辑修改普通网页一样对模板文档稍作修改得到需要的公共部分。

可编辑区域是可以在基于该模板的文档中进行编辑的区域。模板的制作与普通网页的制作方法相同。但要使模板生效,其中至少要设置一个可编辑区域,否则基于该模板的页面是不可编辑的。在关闭或保存模板文件时,用户如果没有创建任何可编辑区域,Dreamweaver都会弹出警告框提醒用户。一、操作体验操作步骤按照教材操作步骤完成任务三。二、知识链接1.模板的特征2.可编辑区域的显示3.可编辑区域的删除4.使用可编辑区域的注意事项三、拓展与提高1.模板重复区域2.模板可选区域试一试

打开上一任务试一试中创建的模板“blycmoban.dwt”,保留页头、页脚及主体区域右侧的“用户登录、服务项目、最新客户、网站调查”四个版块等公共内容不变,将Banner条下方时间条前端class为"path"的Div定义成可编辑区域“导航路径”,将主体区域左侧id为"main-left"的Div设置为可编辑区域“主体左侧”。任务四、应用模板知识点:了解编辑模板的方法;掌握在模板中设置可编辑区域的方法。任务描述

前面学习了创建及编辑模板,下面就来学习如何应用模板。任务分析

将页面中相同的部分制作成一个模板文件后,就可以通过模板来快速创建这些相似的页面。我们只需要在套用了模板的页面中进行修改,就可以制作出风格相似,但又有区别的页面。模板一旦被更新,应用了模板的页面都可以随之更新,从而极大地提高工作效率,避免了反复修改几十乃至上百次的重复劳动。当需要对页面中受不可编辑区域限制被锁定的区域进行编辑时,可以将网页脱离模板。不仅可以创建基于模板的新页,也可以将模板应用于已经存在的网页。一、操作体验操作步骤按照教材操作步骤完成任务四。二、知识链接1.应用模板到空白页2.应用模板到已经进行编辑过的页三、拓展与提高1.应用“资源”面板管理模板

有关模板的创建、编辑、重命名、分离、应用等操作,都可以在“资源”面板完成。试一试

创建基于上一任务定义了可编辑区域模板“mobanblyc.dwt”的网页,如经典案例页面,编辑如图7-17所示主体区域左侧内容后保存,再进行更新、分离等操作。任务五、应用库项目知识点:理解库项目的作用;掌握创建库项目的方法;掌握插入库项目的方法;掌握更新库项目的方法;掌握分离库项目的方法。任务描述

在Dreamweaver中,除了提供模板功能减少重复性劳动,还可以使用库项目达到这一目标。任务分析

可以将站点中多个页面都要用到的相同内容创建成库项目,可以满足反复使用或经常需要更新维护的需要。利用库项目,可以将一个固定内容插入到不同页面中,当需要更新时,只要改变库项目一个文件就能使站点中的相关页面都得到更新。库项目是一种特殊的Dreamweaver文档,其后缀名为“.lbi”,存储在站点中的Library文件夹中,这个文件夹是在第一次在“资源”面板创建库项目时自动生成的,不能随意对其修改,否则库项目将不能正常使用。库项目比模板灵活,可以插入到页面的任何位置,而不是固定在同一位置。

可以新建一个空白库文件,也可以使用文档<body>部分中的任意元素创建库文件。将经常用到的图片、文字、链接、广告条、页头、页脚等制作成库项目是最合适的。

当修改库项目时,会更新使用该项目的所有文档。如果选择不更新,那么文档保持与库项目的关联,可以在以后进行更新。一、操作体验操作步骤按照教材操作步骤完成任务五。二、知识链接1.库项目的作用2.库项目的显示三、拓展与提高

库项目实际上是要插入到页面中的一段代码。把库项目插入到页面中,就是把该库项目的源代码的一份拷贝插入到页面中,并创建一个对外部库项目的引用。重命名库项目会断开其与文档或模板的连接。创建库项目时不复制样式表信息,因为这些对象的代码位于文档的head段。将带有行为的对象创建为库项目时,系统将把对象及其行

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论