网页设计与制作课件.ppt

1、 网页设计与制作网页设计与制作 杨莉杨莉任务八任务八 成都市植物园框架页成都市植物园框架页复习引课复习引课学习目标学习目标知识点拨知识点拨技能训练技能训练知识扩展知识扩展小结作业小结作业复习引课复习引课 复习复习 1.设计和创建一个设计和创建一个2*2的表格网页。的表格网页。 【要求【要求】 每个单元格中有每个单元格中有一幅图片。一幅图片。图图8-1 效果页效果页 引课引课 前几次课主要讲在浏览窗口中设计一前几次课主要讲在浏览窗口中设计一个网页，如果希望用户一次可以浏览多个个网页，如果希望用户一次可以浏览多个网页内容，则要使用框架技术来实现。下网页内容，则要使用框架技术来实现。下面就来讲解有关

2、框架的使用。面就来讲解有关框架的使用。学习目标学习目标 以以成都市植物园框架页成都市植物园框架页为参考学习框架网为参考学习框架网页的制作。页的制作。 学会在网页中运用框架技术来设置导航内学会在网页中运用框架技术来设置导航内容。容。 能够灵活运用所学知识制作各种类型框架能够灵活运用所学知识制作各种类型框架网页。网页。知识点拨知识点拨 第第7章章 制作框架制作框架 7.1 认识框架网页认识框架网页 7.2 创建框架网页创建框架网页 7.3 设置框架和框架集属性设置框架和框架集属性 7.4 框架网页的选择与链接框架网页的选择与链接7.1 认识框架网页认识框架网页 框架框架把一个窗口划分为若干个区域把

3、一个窗口划分为若干个区域, ,每每个区域个区域都有各自的都有各自的不同网页不同网页, ,总体构架出一总体构架出一个框架集。个框架集。 通过为超链接指定目标框架通过为超链接指定目标框架,可以在框可以在框架之间建立起以内容为媒介的联系架之间建立起以内容为媒介的联系,因而实因而实现页面导航的功能。现页面导航的功能。7.2 创建框架网页创建框架网页 7.2.1 使用预定义方式创建框架网页使用预定义方式创建框架网页 7.2.2 修改框架网页修改框架网页 7.2.3 保存框架网页保存框架网页7.2.1 使用预定义方式创建框架网页使用预定义方式创建框架网页图图7-2 新建文档的框架集选项新建文档的框架集选项

4、7.2.2 修改框架网页修改框架网页 菜单操作：修改菜单操作：修改-框架页框架页 【要点【要点】 四种拆分方式：四种拆分方式： 1. 左框架、右框架、上框架、下框架。左框架、右框架、上框架、下框架。 2. 拆分位置要确定好。拆分位置要确定好。7.2.3 保存框架网页保存框架网页 保存操作：文件保存操作：文件-全部保存全部保存 【注意【注意】 如果在网页中有两个框架，将来要保存如果在网页中有两个框架，将来要保存成成3个文件，一个是框架集文件，另两个是个文件，一个是框架集文件，另两个是框架文件。框架文件。 7.3 设置框架和框架集属性设置框架和框架集属性 7.3.1 设置框架属性设置框架属性 7.

5、3.2 设置框架集属性设置框架集属性 7.3.3 改变框架的背景颜色改变框架的背景颜色7.3.1 设置框架属性设置框架属性 框架属性确定了框架集内各个框架的框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小名称、源文件、边框的框架能否调整大小等。等。 图图7-3 框架属性框架属性对话框对话框7.3.2 设置框架集属性设置框架集属性 框架集属性确定框架的大小和框架之框架集属性确定框架的大小和框架之间的边框宽度和颜色等。间的边框宽度和颜色等。图图7-4 框架集属性框架集属性对话框对话框 【要点【要点】 在框架结构文档中，框架和框架集都在框架结构文档中，框架和框架集都有各自的属性设

6、置面板，它们的属性应该有各自的属性设置面板，它们的属性应该分别进行设置。分别进行设置。7.3.3 改变框架的背景颜色改变框架的背景颜色图图7-5 框架背景框架背景对话框对话框7.4 框架网页的选择与链接框架网页的选择与链接 【要点【要点】 1.选择一个框架：窗口选择一个框架：窗口-框架框架 2.选择框架集：选择框架集：alt+箭头箭头 3.链接方法：注意目标显示页的位置链接方法：注意目标显示页的位置图图 7-6 链接位置链接位置技能训练技能训练 制作制作成都市植物园框架页。成都市植物园框架页。 要点提示要点提示1. 制作一个上端固定制作一个上端固定,左侧嵌套的框架页。左侧嵌套的框架页。2.上端

7、放置成都植物园导航页，左侧放置上端放置成都植物园导航页，左侧放置简介页，右侧放置主页面。简介页，右侧放置主页面。图图7-7 成都市植物园框架页成都市植物园框架页效果图效果图 思考与动手训练思考与动手训练 创建齐鲁商城网上冲印店框架页。创建齐鲁商城网上冲印店框架页。 展开班级讨论展开班级讨论 自行设计的网页上传到教师机，由教自行设计的网页上传到教师机，由教师和同学互评。相互学习，提高制作能力。师和同学互评。相互学习，提高制作能力。图图7-8 创建齐鲁商城网上冲印店框架页效果图创建齐鲁商城网上冲印店框架页效果图知识扩展知识扩展 在在HTML中设计框架时，主要用到以下中设计框架时，主要用到以下框架和

8、属性标记符：框架和属性标记符：（1）fremeset（2）frame（3）title、id（4）rows、cols （5）frameborder、border、scrolling（6）framespacing小结与作业小结与作业 小结小结 本次课主要讲授本次课主要讲授创建框架网页、设置框创建框架网页、设置框架和框架集属性框架网页的选择与链接架和框架集属性框架网页的选择与链接。 【重点】学会框架页的制作技巧，通过技能【重点】学会框架页的制作技巧，通过技能训练加强对框架页的设计能力和制作能力训练加强对框架页的设计能力和制作能力的培养。的培养。 【难点】框架页目标显示页的位置正确设置。【难点】框架页目标显示页的位置正确设置。小结与作业小结与作业 作业作业 1.完成完成东平国家森林公园框架页的链接东平国家森林公园框架页的链接。 图图 7-9 作业作业1网页效果图网页效果图 结束结束