13带框架网页的设计.docVIP

/SHANGJIANFANG123 /SHANGJIANFANG123 第13课 带框架网页的设计 一、教学目标： 知识目标 认识框架网页的作用 熟悉常见的布局方式 理解导航条的作用 能力目标 能根据网页的内容选择合适的框架类型 能制作正确的超级链接 能设置适宜的框架属性 情感目标 培养学生对美的鉴赏能力 培养学生自主探究的精神 二、学情分析 通过前面课程的学习，学生已经基本掌握了单个网页的制作方法，能制作超级链接，对导航条有了初步认识。 三、教学方法 演示法、讲授法、任务驱动法 四、教学准备 一个网站范例（非框架网页） 五、教学过程 导入：展示一个网站，内容是带导航条和横幅的若干网页 问题：这个网站的不同网页有什么相似的地方或是有什么特点？ 不同的网页布局类似，有重复的部分。这些重复的部分会造成制造网页时重复的工作量，那怎么解决这个问题呢？然后告诉学生可以利用一种特殊的网页来解决这个问题。 环节1：讲解框架网页 框架网页是一种特殊的网页，它可将浏览器窗口分成不同的区域，这些区域我们称之为框架，每个框架都可以显示不同的网页，这样相似内容的网页只要做一个就可以了，以刚才这个网站为例，我们可以将网页内容分成三个框架 横幅框架主框架 横幅框架 主框架 目录 框架 环节2：新建框架网页演示创建过程，根据刚才的分析，我们应选择那种类型的框架网页？“横幅和目录” 框架建立好以后，有两种方式来完成各框架网页的内容： （1）“设置初始网页”，引入一个已经存在的网页； （2）“新建网页”； 任务：制作框架网页 环节3：保存网页，并观察这样一个框架网页实际上包含有几个网页，各个网页的内容与框架之间有什么联系，可以单独打开每个网页文件查看其内容。 学生操作、回答 保存时要注意什么？文件名要取得有意义，这样就可以通过文件名来了解这个网页实际上是对应的哪个框架。 环节4：制作其他内容的网页 三个框架中哪些框架的是重复的？哪些是不重复的？重复的内容与不重复的内容在制作网页时有什么不同？ （重复的内容只需要做一个网页就可以了，不重复的内容需要做不同的网页） 环节5：制作超级链接 网页已经做好了，现在需要将它们链接起来，和以前做超级链接有什么不同？请大家自己尝试一下，制作好后自己测试一下网页能否按照你的意图进行链接 环节6：进一步完善框架网页（设置框架属性） 默认的框架有一条边框，让人一眼就能看出这是框架网页，另外看上去也不是很舒服，使网页支离破碎缺乏整体感。能否让这个边框线消失呢？ 学生操作 小结：利用框架属性设置除了可以不显示边框线之外还可以对框架网页其他属性进行修改，例如框架的大小、是否可以在浏览器中调整页面的大小、显示滚动条等等。 环节6： 总结：框架在网页制作中起了什么作用？ 六、教学建议