网页设计与制作实用教程电子教案教学建议第12章　应用模板与库快速设计网页.pptVIP

第12章　应用模板和库快速设计网页 网页设计与制作实用教程 主编：刘艳丽　副主编：许晞 秦高德 高妍 学习目标 掌握创建和应用模板的方法； 掌握编辑和管理模板的方法； 了解创建和应用库的方法； 了解编辑与管理库项目的的方法。 目录 模板应用实例 库项目应用实例 本章小结 配套实训 练习题 模板应用实例 设计目标 页面分析 实训引导 制作步骤 设计目标 设计“展望太空”系列页面，效果如图12.1和12.2所示。其中，图12.1所示的页面是系列中的第一个页面，本章将以图12.1的页面为模板，创建图12.2所示的风格相同的四个页面。 页面分析 “展望太空”系列网页，不但所有页面的风格相同，而且有些内容（右上方的“展望太空”前言、左下方的导航栏）也完全一样。 像这种情况，如果用一般的编辑方法，必须在每个文档中重复设计相同的内容，既麻烦，也容易出错。 如果利用“模板”进行设计，将大大提高工作效率 实训引导 1．“展望太空”系列页面中使用的图片由配套光盘webcourse\chapter12文件夹下的images文件夹提供，在制作页面之前，先将用到的图像文件拷贝到本地站点future\images文件夹中。 2．“展望太空”系列页面中使用的文字资料及用于创建模板的第一个页面outspace_1.html由配套光盘webcourse\chapter12文件夹下的materials文件夹提供，请将outspace_1.html文件复制到本地站点future\webpages文件夹下。。 3．页面效果请参见chapter12\webpages文件夹下的outspace1.html~outspace5.html网页文件。 制作步骤 首先精心制作第一个页面outspace1.html，本教程的配套光盘chapter12文件夹下的materials文件夹已提供有outspace1.html的参考页面，读者可将配套光盘上的material文件夹下的outspace1.html文件保存到本地站点的webpages文件夹下。接下来将依次按照以下步骤制作“展望太空”系列页面： 1．将第一个页面文档outspace1.html另存为模板outspace.dwt； 2．打开模板outspace.dwt，设置模板的可编辑区域； 3．创建基于模板的其它页面，并修改每个页面中不同的内容； 4．通过更新模板，批量更新基于模板创建的系列网页。 利用模板创建系列页面 将设计好的第一个页面outspace1.html另存为模板outspace.dwt，操作步骤参见教程P250。 将“展望太空”模板outspace.dwt中的页面左上方的题头图片部分、右下方的文章内容部分定义为可编辑区域，效果如图12.8所示。操作步骤参见教程P252。 创建基于模板的页面，操作步骤参见教程P254。 利用模板更新网页 修改模板outspace.dwt并更新套用该模板的系列网页文件 ，操作步骤参见教程P256。 将模板outspace.dwt应用到outspace_1.html网页文件中，操作步骤参见教程P258。 模板的管理 ，操作步骤参见教程P260。 库项目应用实例 设计目标 页面分析 实训引导 制作步骤 设计目标 利用库项目制作“展望太空”系列网页，效果如图12.1和12.2所示。 页面分析 如图12.22所示，文档中有三个地方属于系列网页的相同元素：左边的导航栏，右边的题头“展望太空”，右边的前言文本。把这三部分制作成3个库项目，然后通过更新这些库项目，使系列网页实现相同风格的更新。 实训引导 1．本节所要用到的素材与本章12.1节所用的素材一样。其中制作中所用的素材outspace_lib1.html ?outspace_lib5.html由配套光盘webcourse\chapter12\materials文件夹提供，outspace_lib1.html是一个较为完整的页面，outspace_lib2.html ?outspace_lib5.html页面中只有具体内容（即不同于其他网页的内容），而与其他网页相同的元素暂时空缺。请将这些文件复制到本地站点future\webpages文件夹下。 2．页面效果请参见webcourse\chapter12\ result文件夹下的outspace_lib1.html ?outspace_lib5.html网页文件。 制作步骤 将配套光盘上的webcourse\chapter12\materials文件夹下的outspace_lib1.html ?outspace_lib5.html素材文件另存到本地站点的webpages文件夹下。接下来依次按照以下步骤制作系列页面： 1．将本地站点的“展望太空”系列网页中的相同元素制作成库项