浙教版（广西、宁波）信息技术七年级下册 第十三课 复杂网页的制作——带框架网页的设计 教学设计

第十三课 复杂网页的制作——带框架网页的设计
【教材分析】
本章学习更高级的网页设计，也是最常见的网页。
【教学目标】
知识与技能
1、理解框架结构的含义和用途；
2、掌握建立框架网页的方法；
3、掌握框架属性的设置方法；
4、掌握框架网页的保存方法
过程与方法
通过讲授与模仿，建立起框架的概念。通过修改网页框架，提高学习的效率。3.情感态度价值观
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。
【教学重点、难点】
重点：网页框架的建立。
难点：掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。
【教学思路和方法】
本节教学内容的展开按照了解Photoshop 功能——认识Photoshop 界面——对图片的简单处理层层递近的任务来进行的。从贴近生活的语言简单了解 Photoshop 的功能，接着环环相扣的 3 个任务：一自主探究，认识 Photoshop 界面，任务二：小组协作，简单处理图片， 任务三：创造性地处理图片。整个的教学过程以这 3 个任务为引领，学生自主探索和小组协作相结合。学生在解决问题的过程中如果遇到困难，可以阅读学案或小组同伴中得到帮
助。整个课堂以学生为主体，教师适时进行点拨、启发。
【课时安排】2 课时。
【教学准备】
电脑教室、极域电子教室平台。
【教学设计】
教学过程
教学环节
教师活动
预设学生行为
设计意图
导入
教师演示TED 大会上的酷炫网页
，提问：这些网页是如何制作的呢？
感受框架网
页的强大。
框架网页是一种特殊的网页， 它可将浏览器窗口分成 称为框架的不同区域，每个区域都可以显示不同的网页。
例如：
1、 理解框架网页的特点和概念（创设情境、对比教学）
（1） 教师展示普通页面的
网页和框架结构的网页，请学生仔
学生对比两种网页，得出结论。
细观察对比框架网页的特点
（2） 教师对比生活中的布告栏，总结什么是框架结构的网页
1.创建带框架的网页
打开站点文件，由“新建网页”引入“新建框架网页”，在“新建”对话框中的“框架网页”选项卡中选取 1～2 个框架模板说明内容网页在框架中的作用；
调整框架结构：拆分和删除框架结构
填充框架网页：“设置初始网页”和“新建网页”，插入悬停按钮和横幅广告器
框架网页的保存：教师引
导学生观察框架结构中各网页的名
学生阅读材料，跟随操作， 创建一个带框架网页。
称，引入网页的保存
突破重点
在框架网页上右击，在弹出的菜单中选择“框架属性”,打开“框架属性”对话框。
针对网页中的每一个框架—— 横幅、目录或主框架，我们都可以指定以下属性:
名称：
框架大小|宽度和高度(3)边距大小：
是否可以在调整页面的大小、是否显示滚动条。
是否显示边框、框架间距是
多少，如图 13-4。
学生跟随操作，打开属性对话框，观察选项。
任务探究
任务：制作网页的框架，填充
内容。
学生尝试制作框架网页。
3.带框架网页的超链接
带框架结构网页建立超链接时，特别要注意:选定好目标框架, 否则可能会在你不希望的框架中打开了超链接的网页。
例如：要通过单击目录框架中的 “嫦娥奔月”，在主框架中打开相应的 网页，就必须在“目标设置”中指定“主框架(main) ”为目标框架(用
鼠标单击一下主框架区域）。
学生动手操作，按教师要求，链接到到指定的框架。
成果展示
任务：学生完成简单的框架网页。
学生制作网页。
相互交流。
通过数据让
学生感受
分析点拨
由学生存在的问题引入“框架属性” 的设置：
（1）由“新建网页”更改为“设置初始网页”引入问题，提问：当我们在制作网页时若需要设置网页的背景颜色或背景图片时，我们该如何操作设置？从“网页属性”引入“框架属性”。（2）由网页的美观引入“边距”的设置，其余设置让学生在实践
任务二中体会
学生体验框架设置。
带框架网页的保存
每一个框架都是作为单独网页
（文件）分别保存的，而整个框架又是以另一文件保存的。例如，“横幅和框架网页结构在保存时，横幅架（banner)、目录框架（contents) 及主框架网页通常是以 top.htm、left.htm 和 main.htm 三个文件保存的，而整个框架则以另一个 HTML 文本保存。
任务驱动
任务：修改框架网页。
教师发送任务说明。
学生按照说明，对框架网页
进行修改。
展示与评价
展示优秀作品，评价作品（让学生
在观看同学的作品时，领会“框架属性”的不同设置）
总结
尝试回答下列问题：
框架在网页制作中起什么作用？
目录框架、标题框架、横幅和
目录框架分别适用什么样的网页？
课外延伸
板书设计
学生学习活动评价设计
教学反思