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

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 邮箱页面等, 引导学生总结本 课内容,梳理课堂知识,并让学生分组,推荐一些优秀作品进行全班展示。 设计意图:开拓学生的视野,使学生了解框架的应用,教会学生要善于总结,要学会学 习的方法。


相关文章:
HTML从入门到精通 第10章 框架结构_图文
· 176· HTML 网页设计参考手册 第 章框 架结构 窗口框架简介 设置框架集的...10.2.6 框架的边框颜色——bordercolor 图 10-6 设置框架的边框宽度 使用...
使用框架布局页面_图文
框架除了用于页面布局,还可用于制作目录。包含框架的...(6)保存好之后,我们将要给各框架插入表格,同时设置...(10)选择“文件” →“保存全部”命令,保存所有...
手把手教你10步快速制作网站实例
手把手教你10步快速制作网站实例_IT/计算机_专业资料...的布局与表现除网页主要框架之外的附加结构的表现(...绝大部分用户使用的是 IE6.0,因此您几乎 不需要...
CIW页面设计与制作HTML附答案
6、Spry 中的“高亮颜色”主要作用是什么(D) A、...spry 框架页面设计中的作用( D) A 可以使用 ...按三次 Enter 键(windows) 10.表单可以和()放在...
tp6 - 网站设计和网页布局技术(一)
malin2140贡献于2011-10-16 0.0分 (0人评价)暂无...tp6 - 网站设计网页布局技术(一) HTML相关知识HTML...*浏览器兼容性差 *保存框架网页麻烦(不但要保存...
前端网页设计代码大全
top.location.href = "frames.htm"; //frames.htm 为框架网页 // --> 24...6 左到右刷新 7 右到左刷新 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11...
开发部web界面设计规范
2. 设计命名规范页面基本框架结构 container header 1 2 3 navbar menu 4 5 ...—中间区域结束 --> 6) 样式属性代码优化缩写 10 不同类有相同属性及属性值...
制作网页框架及设计网页保护环境
制作网页框架设计网页保护环境_IT认证_资格考试/认证_教育专区。制作网页框架及...(10 分) 5、网页的制作质量如何,是否切合实际?(50 分) 6、成果展示的同学...
网站设计指导书(2014.6.10)伍琳瑜
网站设计指导书(2014.6.10)伍琳瑜_管理学_高等教育_教育专区。南京邮电大学 ·...网页特效、至少有一个网页使用框架式结构,并且至 少有两个网页的内容显示在框架...
网页框架语言——html
网页制作网页框架语言——html 1. HTML 的基本结构...10%表示第 2 个横向 框架的大小为浏览器当前窗口...-6- behavior scroll:设置文字单向流动,side 设置文字...
更多相关标签: