当前位置:首页 >> 其它课程 >>

10.6框架网页制作


框架网页制作 教学目标: 1.知识与技能: (1)理解框架的概念及用途。 (2)掌握框架网页的新建、制作、编辑与保存,了解框架的拆分方法。 (3)初步掌握将框架结构与表格布局结合使用来制作网页。 2.过程与方法: (1)通过对表格网页的分析,体验新知识(框架结构网页)的优点,从而促进其 学习新知识。 (2)理解框架的概念与组成,学会分析网站的结构。 3.情感态度与价值观: (1)通过以“人与动物”为主题的框架结构网页制作活动,了解更多有关人与动 物和谐相处的知识,通过故事趣闻,增强学生关注动物的兴趣和意识。 (2)能够将表格与框架结构网页结合使用,在创作中体验乐趣。 教学重、难点: 1.重点:框架的概念、用途, 创建、编辑与保存框架网页的方法。 2.难点:框架的拆分。 教学方法: 对比教学法、探究学习法、模仿学习法。 教学准备: 整理、归类相关素材,并按要求摆放。 教学过程: 1.引入 老师展示一组利用表格制作的网页, 要求学生仔细观察, 找出它们的一个共同特点 (学生答:网页上方和左侧内容都是相同的,仅右下部分内容不一样) ,并提问如何快捷地 制作这种网页?(学生答:使用复制粘贴快捷地制作) 尽管复制、 粘贴能为我们节省时间, 但有没有更好的方法呢?相同的区域我们能否 只做一遍呢?今天我们要学习的内容——框架网页制作,就能给我们带来更多便捷。 (让学 生明确框架网页使用的场合) 2. 新授 (1)框架网页概念 由以上例子入手,再展示一个框架网页,教师引导学生理解框架网页的概念 (2)框架网页的新建与保存 教师要求学生先阅读教材中的操作步骤,再尝试进行探究操作。 任务 1 创建“横幅和目录”结构的框架网页,新建 top 和 left 页面,并学会保存。 框架结构中的每个框都是一个独立的选项文件, 即网页文件, 因此当框架确定之后, 需要为每个框分别指定其网页文件的来源,可以通过每个框中的“新建网页”按钮和“设置 初始网页”按钮进行选择。在 top 和 left 页面中,单击“保存”按钮,随即开始保存。 此处为教学难点,可先由框架的概念入手,再针对保存页面中的蓝色部分,教师进 行讲解,教会学生注意观察。 学生要理解框架网页的概念,通过阅读教材中的内容,自学新建框架网页的操作,

初步了解“新建网页”和“设置初始网页”两个按钮的不同,并认真聆听教师的讲解,注意 观察,按要求模仿操作。 设计意图:培养学生自主学习能力,课堂教学难点在教师的讲解后模仿操作,有效突破 难点。 (3)相关页面的制作与设置 框架网页中相关页面的制作, 需要结合表格来布局, 插入文字、 图片和交互式按钮。 任务 2 top 和 left 页面的制作。 要求: ○1top 页面内插入 1 行 2 列的表格, 左边单元格插入 logo 图片, 右边单元格插入 banner 图片。 ○2 left 页面内插入 5 行 1 列的表格, 在每个单元格内依次插入交互式按钮 (共 4 个) , 交互式按钮文字为展示介绍的相关内容概括,在第 5 个单元格内插入一个邮箱指示的图片。 ○3 调整表格边框的粗细。 ○4 为 main 区域设置初始页面。 (该网页由教师提供现成的) 学生制作相关页面,同时也是对前面所学内容的复习和回顾。老师反馈学生的操 作情况,开展比一比、评一评活动,对表现好的学生给予表扬。 (4)框架网页属性的设置 创建好框架网页后,可以根据实际需要改变框架的属性。 任务 3 调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。 提高任务:框架的拆分。 学生自主探究学习,可向老师寻求帮助。完成设置后请同学示范操作,并说明自己 设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。 3. 总结与评价 老师可以给出一些常见的框架结构应用界面, 如 Web 邮箱页面等, 引导学生总结本 课内容,梳理课堂知识,并让学生分组,推荐一些优秀作品进行全班展示。 设计意图:开拓学生的视野,使学生了解框架的应用,教会学生要善于总结,要学会学 习的方法。


相关文章:
第十课给框架网页添加内容
六年级信息技术教案课 题 给框架网页添加内容 刘慧丽 总课时 第 10 课时 1 ...2、通过教师的讲解和课堂演示,让学生切实的感受制作网页 教学目标 的快乐。 3....
HTML从入门到精通 第10章 框架结构_图文
· 176· HTML 网页设计参考手册 第 章框 架结构 窗口框架简介 设置框架集的...frame> 运行这段程序,效果如图 10-6 所示。 10.2.6 框架的边框颜色...
10个H5页面制作工具,功能全面评测_图文
点击 滑动切换 H5:手机相册 典型案例—— 初页的 H5 页面 付费情况——无 6...是面向建站的 H5 页面制作工具,有很多固 定样式的框架,可以直接往里面填内容。...
9_网站创建与网页制作
9_网站创建与网页制作_互联网_IT/计算机_专业资料...(5)、注意保存框架集和框架文件的区别。 (6) 、...文档贡献者 lhxyxf11 贡献于2016-10-13 ...
网页制作题目
(A)制作网页比较美观 (B)使用简单 (C)是一种...(A)5 (B)6 (C)7 (D)8 21 下述关于框架的...10 分值:1 得分:1 答案:D 题号:11 分值:1 ...
实训九 框架型网页的制作
实训九课时: 2 班级: 计算机班 12 框架网页制作编写时期: 2013-4-10 ...“海洋类”的网页效果图; 图 5 单击左侧“邮票类”的网页效果图; 图 6 ...
使用框架布局页面_图文
框架除了用于页面布局,还可用于制作目录。包含框架的...(6)保存好之后,我们将要给各框架插入表格,同时设置...(10)选择“文件” →“保存全部”命令,保存所有...
手把手教你10步快速制作网站实例
手把手教你10步快速制作网站实例_IT/计算机_专业资料...的布局与表现除网页主要框架之外的附加结构的表现(...绝大部分用户使用的是 IE6.0,因此您几乎 不需要...
制作网页框架及设计网页保护环境
制作网页框架设计网页保护环境_IT认证_资格考试/认证_教育专区。制作网页框架及...(10 分) 5、网页的制作质量如何,是否切合实际?(50 分) 6、成果展示的同学...
网页制作操作题
6行2列、表格宽度100%、表格边框粗细为0、单元格边距为10,间距为10; ⑤设置...3、将目录框架的初始网页设为已有网页left.htm。 4、将标题框架的初始网页设为...
更多相关标签: