《网页设计与制作实用教程电子教案教学建议教学课件作者刘艳丽第12章节应用模板和库快速设计网页课件》由会员分享，可在线阅读，更多相关《网页设计与制作实用教程电子教案教学建议教学课件作者刘艳丽第12章节应用模板和库快速设计网页课件（20页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作实用教程,主编：刘艳丽 副主编：许晞 秦高德 高妍,第12章 应用模板和库快速设计网页,2,2019/6/26,学习目标,掌握创建和应用模板的方法； 掌握编辑和管理模板的方法； 了解创建和应用库的方法； 了解编辑与管理库项目的的方法。,第12章 应用模板和库快速设计网页,3,2019/6/26,目录,模板应用实例 库项目应用实例 本章小结 配套实训 练习题,第12章 应用模板和库快速设计网页,4,2019/6/26,模板应用实例,设计目标 页面分析 实训引导 制作步骤,第12章 应用模板和库快速设计网页,5,2019/6/26,设计目标,设计“展望太空”系列页面，效果如图12.1
2、和12.2所示。其中，图12.1所示的页面是系列中的第一个页面，本章将以图12.1的页面为模板，创建图12.2所示的风格相同的四个页面。,返回,第12章 应用模板和库快速设计网页,6,2019/6/26,页面分析,“展望太空”系列网页，不但所有页面的风格相同，而且有些内容（右上方的“展望太空”前言、左下方的导航栏）也完全一样。 像这种情况，如果用一般的编辑方法，必须在每个文档中重复设计相同的内容，既麻烦，也容易出错。 如果利用“模板”进行设计，将大大提高工作效率,返回,第12章 应用模板和库快速设计网页,7,2019/6/26,实训引导,1“展望太空”系列页面中使用的图片由配套光盘webcou
3、rsechapter12文件夹下的images文件夹提供，在制作页面之前，先将用到的图像文件拷贝到本地站点futureimages文件夹中。 2“展望太空”系列页面中使用的文字资料及用于创建模板的第一个页面outspace_1.html由配套光盘webcoursechapter12文件夹下的materials文件夹提供，请将outspace_1.html文件复制到本地站点futurewebpages文件夹下。 3页面效果请参见chapter12webpages文件夹下的outspace1.htmloutspace5.html网页文件。,返回,第12章 应用模板和库快速设计网页,8,2019/6
4、/26,制作步骤,首先精心制作第一个页面outspace1.html，本教程的配套光盘chapter12文件夹下的materials文件夹已提供有outspace1.html的参考页面，读者可将配套光盘上的material文件夹下的outspace1.html文件保存到本地站点的webpages文件夹下。接下来将依次按照以下步骤制作“展望太空”系列页面： 1将第一个页面文档outspace1.html另存为模板outspace.dwt； 2打开模板outspace.dwt，设置模板的可编辑区域； 3创建基于模板的其它页面，并修改每个页面中不同的内容； 4通过更新模板，批量更新基于模板创建的系列
5、网页。,返回,第12章 应用模板和库快速设计网页,9,2019/6/26,利用模板创建系列页面,将设计好的第一个页面outspace1.html另存为模板outspace.dwt，操作步骤参见教程P250。 将“展望太空”模板outspace.dwt中的页面左上方的题头图片部分、右下方的文章内容部分定义为可编辑区域，效果如图12.8所示。操作步骤参见教程P252。 创建基于模板的页面，操作步骤参见教程P254。,第12章 应用模板和库快速设计网页,10,2019/6/26,利用模板更新网页,修改模板outspace.dwt并更新套用该模板的系列网页文件 ，操作步骤参见教程P256。 将模板ou
6、tspace.dwt应用到outspace_1.html网页文件中，操作步骤参见教程P258。 模板的管理 ，操作步骤参见教程P260。,第12章 应用模板和库快速设计网页,11,2019/6/26,库项目应用实例,设计目标 页面分析 实训引导 制作步骤,第12章 应用模板和库快速设计网页,12,2019/6/26,设计目标,利用库项目制作“展望太空”系列网页，效果如图12.1和12.2所示。,返回,第12章 应用模板和库快速设计网页,13,2019/6/26,页面分析,如图12.22所示，文档中有三个地方属于系列网页的相同元素：左边的导航栏，右边的题头“展望太空”，右边的前言文本。把这三部分
7、制作成3个库项目，然后通过更新这些库项目，使系列网页实现相同风格的更新。,返回,第12章 应用模板和库快速设计网页,14,2019/6/26,实训引导,1本节所要用到的素材与本章12.1节所用的素材一样。其中制作中所用的素材outspace_lib1.html outspace_lib5.html由配套光盘webcoursechapter12materials文件夹提供，outspace_lib1.html是一个较为完整的页面，outspace_lib2.html outspace_lib5.html页面中只有具体内容（即不同于其他网页的内容），而与其他网页相同的元素暂时空缺。请将这些文件复制
8、到本地站点futurewebpages文件夹下。 2页面效果请参见webcoursechapter12 result文件夹下的outspace_lib1.html outspace_lib5.html网页文件。,返回,第12章 应用模板和库快速设计网页,15,2019/6/26,制作步骤,将配套光盘上的webcoursechapter12materials文件夹下的outspace_lib1.html outspace_lib5.html素材文件另存到本地站点的webpages文件夹下。接下来依次按照以下步骤制作系列页面： 1将本地站点的“展望太空”系列网页中的相同元素制作成库项目； 2将库项
9、目应用到系列网页中； 3通过更新其中库项目，实现对系列网页的快速更新。,返回,第12章 应用模板和库快速设计网页,16,2019/6/26,利用库项目创建网页, 将网页元素创建为库项目，操作步骤参见教程P263。 采用上述方法将题头所在的表格和前言所在的段落创建为库项目title.lbi和preface.lbi。 将库项目bar.lbi、title.lbi及preface.lbi应用到outspace_lib2.html outspace_lib5.html页面中，操作步骤参见教程P265。,第12章 应用模板和库快速设计网页,17,2019/6/26,利用库项目更新网页, 将库项目title
10、.lbi 中的“展望太空”标题修饰为阴影文字，操作步骤参见教程P266。 库项目的管理 ： 对库项目重新命名，操作步骤参见教程P267。 删除库项目，操作步骤参见教程P267。 解除关联的操作步骤参见教程P268。 重建库项目的操作步骤参见教程P268。,第12章 应用模板和库快速设计网页,18,2019/6/26,本章小结,本章主要介绍Dreamweaver中利用模板和库技术快速创建或维护风格一致的网页。 模板主要是帮助设计者批量生成或快速修改具有相同格式的页面； 库项目最大的好处是能快速在文档中插入或更新具有相同格式和内容的元素。,第12章 应用模板和库快速设计网页,19,2019/6/26,配套实训,参见教材第269272页，利用提供的素材文件，根据所学的模板知识，完善游戏人物介绍网站。页面效果如图7.35所示。,第12章 应用模板和库快速设计网页,20,2019/6/26,练习题,参见教材第272页，完成相应的练习题： 填空题 单选题 思考题,
