第7讲-使用模板和库制作网页课件.ppt

1、国家级精品课程-网页设计与制作复习复习P139 第5章 习题多媒体技术专业主干课程第第7 7讲使用模板和库制作网页讲使用模板和库制作网页国家级精品课程-网页设计与制作引入新课引入新课为了避免重复劳动，可以使用Dreamweaver CS3提供的模板和库功能，将具有相同版面结构的页面制作成模板，再通过模板来创建其他页面。也可以将相同的页面元素制作成库项目，并存储在库文件中以便随时调用 国家级精品课程-网页设计与制作教学目标教学目标v知识目标知识目标（1）了解模板的相关概念（2）了解库的相关概念（3）掌握使用多层嵌套表格布局网页（4）掌握模板和库的作用（5）掌握CSS样式的简单应用 v技能目标技能

2、目标（1）学会制作用来生成模板的网页，并将现有的网页生成模板（2）能正确编辑模板，掌握设置可编辑区域的方法（3）熟悉用模板生成新网页的操作方法，并能对新网页进行编辑加工国家级精品课程-网页设计与制作教学目标教学目标（4）能熟练地修改网页模板，并同步更新该模板生成的网页（5）学会创建库项目，并且能修改库项目，更新包含库项目的网页（6）能在网页中插入图像占位符 态度目标态度目标（1）培养独立思考问题、解决问题的能力（2）培养一定的语言表达能力（3）培养学生乐观向上的生活态度，用阳光的心态对待本职工作，热爱网页制作行业（4）培养学生的创新能力及艺术修养，提高创新能力和艺术欣赏水平（5）培养学生的观察

3、分析能力，养成认真细致的工作态度（6）培养学生在项目制作中遵守6S管理要求的习惯 国家级精品课程-网页设计与制作课前准备课前准备1.将“sucai”文件夹复制到本地硬盘2.启动Dreamweaver CS3 3.创建名称为“名城游”的本地站点,站点根目录为”sucai”文件夹4.打开用来生成网页模板的网页index0601.html 国家级精品课程-网页设计与制作课堂引导训练课堂引导训练任务：任务：使用模板和库制作网页 网页主题：网页主题：名城游国家级精品课程-网页设计与制作任务描述：任务描述：（1）创建库项目，并在网页中插入库项目（2）由现有的网页文档生成网页模板，在网页模板中定义和修改可编

4、辑区域、可选区域（3）创建基于网页模板的网页，修改和更新网页模板属性（4）修改网页模板和库项目，并更新基于网页模板的网页 课堂引导训练课堂引导训练国家级精品课程-网页设计与制作配盘素材导引：配盘素材导引：v原始文件位置：sucaitask06-1v最终文件位置：xiaoguotask06-1 课堂引导训练课堂引导训练国家级精品课程-网页设计与制作课堂引导训练课堂引导训练-任务实现流程任务实现流程创建库项目创建库项目 库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法，这些页面元素称为库项目。【操作要求操作要求】（1）将网页中的版权信息区域定义为库项目。

5、（2）将现有网页nav_left0601.html中的景点导航表格转换为库项目。国家级精品课程-网页设计与制作课堂引导训练课堂引导训练-任务实现流程任务实现流程2 2在网页中插入库项目在网页中插入库项目【操作要求操作要求】（1）在网页index0601.html的表格3-2中插入库项目nav_left0601.lbi。（2）在网页index0601.html的底部插入库项目nav_bottom0601.lbi。3 3创建网页模板创建网页模板【操作要求操作要求】利用现有的网页文档“index0601.html”创建网页模板“index0601.dwt”。国家级精品课程-网页设计与制作课堂引导训练

6、课堂引导训练-任务实现流程任务实现流程4 4定义与修改可编辑区域和可选区域定义与修改可编辑区域和可选区域【操作要求操作要求】（1）将文字“北京”定义为可编辑区域。（2）将表格3-3中的图像“002.jpg”定义为可编辑区域。（3）将表格3-4、3-5定义为可编辑区域。（4）将标签“background”和“bgcolor”定义为可编辑的标签属性。（5）将表格1定义为不可编辑的可选区域。（6）将表格3-1中的图像“001.jpg”定义为可编辑的可选区域。（7）修改可编辑区域和可选区域。国家级精品课程-网页设计与制作课堂引导训练课堂引导训练-任务实现流程任务实现流程5 5创建基于网页模板的网页创建

7、基于网页模板的网页【操作要求操作要求】（1）创建基于网页模板index0601.dwt的网页index0602.html。（2）修改和更新模板index0601.dwt的属性。显示可选区域OptionalRegion1 设置可编辑标签属性的属性值（3）编辑与更新网页index0602.html的内容。在“文档”工具栏中将网页标题修改为“畅游上海城”。将表格2中的文字“北京”修改为“上海”。国家级精品课程-网页设计与制作课堂引导训练课堂引导训练-任务实现流程任务实现流程5 5创建基于网页模板的网页创建基于网页模板的网页【操作要求操作要求】将表格3-3中的图像源文件“0601北京游/image/0

8、02.jpg”修改为“0602上海游/image/002.gif”。在表格3-4及其嵌套表格3-4-1、3-4-2、3-4-3和3-4-4中输入文字和插入图像，文字内容也可以到文本文件0602.txt中拷贝。根据图像的大小和文字内容的多少，对嵌套表格进行适当的调整。将表格3-5中第一行的文字“旅游景点导航图”修改为“上海旅游景点导航图”，并且将这些文字的“大小”设置为“18像素”，文字颜色设置为“#896449”。将第二行中的图像占位符修改为上海旅游景点导航地图，其源文件为“0602上海游/image/mapshanghai.gif”，将第二行的“高”调整为“365像素”，将图像的“高”也设置

9、为“365像素”。国家级精品课程-网页设计与制作课堂引导训练课堂引导训练-任务实现流程任务实现流程6 6修改网页模板并更新网页修改网页模板并更新网页【操作要求操作要求】对网页模板index0601.dwt进行必要的修改，然后更新由该模板生成的网页文档index0602.html。将表格3-5第二行的“高”修改为“300像素”，将表格3-5第二行单元格的图像占位符的“高”修改为“300像素”。国家级精品课程-网页设计与制作课堂引导训练课堂引导训练-任务实现流程任务实现流程7 7修改库项目并更新网页修改库项目并更新网页【操作要求操作要求】对库项目的内容进行必要的修改，然后对插入了该库项目的网页进行

10、更新。国家级精品课程-网页设计与制作课堂同步训练课堂同步训练任务：任务：使用模板和库制作海口游的网页 主题：主题：海口游 国家级精品课程-网页设计与制作课堂同步训练课堂同步训练任务描述：任务描述：（1）创建一个名称为“海口游”的站点（2）以“西安游”网页ex0601.htm为起始页，创建网页模板“ex0601.dwt”（3）将网页模板ex0601.dwt中的以下元素或区域设置为可编辑区域：网页顶部的两幅banner图片、标识网页当前位置的文字“首页-各地-城市导航-西安”、网页中部的主体内容区域（2行3列表格）、底部的导航区域（2行1列表格）（4）将底部的导航区域（2行1列表格）制作为库，且命

11、名为“bottom_nav.lbi”国家级精品课程-网页设计与制作课堂同步训练课堂同步训练任务描述：任务描述：（5）基于模板“ex0601.dwt”创建一个展示海口游游景点的网页ex0602.htm，该网页的主题为“海口游”在各个可编辑区域输入所需要的文字、插入所需要的图片，如效果图所示（6）在网页ex0602.htm底部插入库项目bottom_nav.lbi 配盘素材导引：配盘素材导引：原始文件位置：sucaitask06-2最终文件位置：xiaoguotask06-2 国家级精品课程-网页设计与制作课堂小结课堂小结 本次课主要讲解使用模板和库制作网页，使用模板和库的组合可以使网站维护变得很

12、轻松，尤其是在对一个规模较大的网站进行维护时，就更能体会使用模板的优点。另外，通过修改库项目，可以方便地对远程网站进行更新，而不用将每一个网页文件上传到远程网站中。国家级精品课程-网页设计与制作课外习题课外习题P173 第6章 习题国家级精品课程-网页设计与制作课外拓展训练课外拓展训练任务：任务：使用模板和库制作南京游的网页 任务描述：任务描述：（1）以“南京游”为主题创建一个站点（2）制作一个介绍南京市的历史沿革、地理环境、风景名胜、文化特色的网页ex0603.html，网页中所需的图片、Flash动画和文字内容从相关网站获取（3）该网页可以设计为上中下结构，将顶部导航栏区域和底部的版权信息区域定义了库项目（4）先创建一个网页模板，根据需要在该模板中设置多个可编辑区域、可选区域或可编辑标签属性（5）创建基于网页模板的网页文档ex0603.html，根据需要在该网页中输入文字、插入图片、插入Flash动画、插入库项目（6）对网页模板的内容进行修改，同步更新基于该模板的网页（7）对库项目中的内容进行修改，同步更新使用了该库项目的网页 素材准备要求：素材准备要求：利用百度、谷歌等网站搜索介绍“南京”的网站，然后从这些网站中收集有关南京的图片、文字和Flash动画，并整理成制作网页所需的素材