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

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


相关文章:
网页制作--插入和设置框架
, 6. 选择顶部框架,然后在【属性】面板中设置边框为“否” 其他保持默认设置...10.选中中间框架,然后在【属性】面板中设置边框为“默认” ,滚动设置为“自动...
用Dreamweaver建立框架页面
6. 将光标停放到下部分框架的左边框家中,选择菜单...10. 单击框架面板上的 topFrame 框架,选中 top....制作好 right.htm 页面的内容之后,然后选择菜单“...
实训九 框架型网页的制作
实训九课时: 2 班级: 计算机班 12 框架网页制作编写时期: 2013-4-10 ...“海洋类”的网页效果图; 图 5 单击左侧“邮票类”的网页效果图; 图 6 ...
网页制作题目
(A)5 (B)6 (C)7 (D)8 21 下述关于框架的...(D)编辑 41 在网页制作中,我们可以通过CSS来设定...10 分值:1 得分:1 答案:D 题号:11 分值:1 ...
2016网页设计与制作样题
2016网页设计与制作样题_职高对口_职业教育_教育专区...6. 为右框架新建网页,设置右框架标题为 main;右...文档贡献者 jszhangjx 贡献于2016-06-10 ...
开发部web界面设计规范
2. 设计命名规范页面基本框架结构 container header 1 2 3 navbar menu 4 5 ...—中间区域结束 --> 6) 样式属性代码优化缩写 10 不同类有相同属性及属性值...
10-2 制作网站(5)
10-2 制作网站(5)_互联网_IT/计算机_专业资料。课时数 NO: 教学 内容 教学 第 2 节 制作网站(第 5 课时) 6、制作框架网页 1、理解框架的概念及用途。 ...
使用框架布局页面_图文
框架除了用于页面布局,还可用于制作目录。包含框架的...(6)保存好之后,我们将要给各框架插入表格,同时设置...(10)选择“文件” →“保存全部”命令,保存所有...
计算机网页制作题10
在DreamWeaver网页设计中,关于框架选择说法正确的是( )(A) 按Ctrl键并单击某...题号:1 题号:2 题号:3 题号:4 题号:5 题号:6 题号:7 题号:8 题...
制作网页框架及设计网页保护环境
制作网页框架设计网页保护环境_IT认证_资格考试/认证_教育专区。制作网页框架及...(10 分) 5、网页的制作质量如何,是否切合实际?(50 分) 6、成果展示的同学...
更多相关标签:
网页制作框架 | 如何制作框架网页 | 制作框架网页教案 | 网页制作框架代码 | 网页制作的框架 | 记事本制作网页框架 | 手机端网页制作框架 | 静态网页制作10页 |