网页设计与制作课件

网页设计与制作

杨莉网页设计与制作杨莉1任务八成都市植物园框架页复习引课学习目标知识点拨技能训练知识扩展小结作业任务八成都市植物园框架页复习引课2复习引课复习

1.设计和创建一个2*2的表格网页。【要求】每个单元格中有一幅图片。图8-1效果页复习引课复习图8-1效果页3引课

前几次课主要讲在浏览窗口中设计一个网页，如果希望用户一次可以浏览多个网页内容，则要使用框架技术来实现。下面就来讲解有关框架的使用。引课4学习目标以成都市植物园框架页为参考学习框架网页的制作。学会在网页中运用框架技术来设置导航内容。能够灵活运用所学知识制作各种类型框架网页。学习目标以成都市植物园框架页为参考学习框架网页的制作。5知识点拨第7章制作框架7.1认识框架网页7.2创建框架网页7.3设置框架和框架集属性7.4框架网页的选择与链接知识点拨第7章制作框架67.1认识框架网页框架把一个窗口划分为若干个区域,每个区域都有各自的不同网页,总体构架出一个框架集。通过为超链接指定目标框架,可以在框架之间建立起以内容为媒介的联系,因而实现页面导航的功能。7.1认识框架网页框架把一个窗口77.2创建框架网页7.2.1使用预定义方式创建框架网页7.2.2修改框架网页7.2.3保存框架网页7.2创建框架网页7.2.1使用预定义方式创建框架87.2.1使用预定义方式创建框架网页图7-2新建文档的框架集选项7.2.1使用预定义方式创建框架网页图7-2新建文档的框97.2.2修改框架网页

菜单操作：修改-框架页

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

7.3.1设置框架属性7.3.2设置框架集属性7.3.3改变框架的背景颜色7.3设置框架和框架集属性127.3.1设置框架属性

框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。图7-3框架属性对话框7.3.1设置框架属性框架属性确定了137.3.2设置框架集属性

框架集属性确定框架的大小和框架之间的边框宽度和颜色等。图7-4框架集属性对话框7.3.2设置框架集属性框架集属性确定14

【要点】

在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。【要点】157.3.3改变框架的背景颜色图7-5框架背景对话框7.3.3改变框架的背景颜色图7-5框架背景对话框167.4框架网页的选择与链接

【要点】1.选择一个框架：窗口-框架2.选择框架集：alt+箭头3.链接方法：注意目标显示页的位置图7-6

链接位置7.4框架网页的选择与链接【要点】图7-617技能训练制作成都市植物园框架页。要点提示1.制作一个上端固定,左侧嵌套的框架页。2.上端放置成都植物园导航页，左侧放置简介页，右侧放置主页面。技能训练制作成都市植物园框架页。18图7-7成都市植物园框架页效果图图7-7成都市植物园框架页效果图19思考与动手训练

创建齐鲁商城网上冲印店框架页。展开班级讨论自行设计的网页上传到教师机，由教师和同学互评。相互学习，提高制作能力。思考与动手训练20图7-8创建齐鲁商城网上冲印店框架页效果图图7-8创建齐鲁商城网上冲印店框架页效果图21知识扩展

在HTML中设计框架时，主要用到以下框架和属性标记符：

（1）fremeset （2）frame （3）title、id （4）rows、cols（5）frameborder、border、scrolling （6）framespacing知识扩展在HTML中设计框架时，主要用到22小结与作业小结

本次课主要讲授创建框架网页、设置框架和框架集属性框架网页的选择与链接。

【重点】学会框架页的制作技巧，通过技能训练加强对框架页的设计能力和制作能力的培养。【难点】框架页目标显示页的位置正确设置。