09框架布局网页教案
框架布局网页教案设计
教学目标：
知识目标：
1、理解框架结构的含义和用途；
2、掌握建立框架网页的方法；
3、掌握框架属性的设置方法；
4、掌握框架网页的保存方法。
能力目标：
1、掌握建立网页框架及设置框架属性的能力；
2、能够应用网页框架建立简单的网页。
情感目标：
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。
教学重点、难点：
教学重点：
1、网页框架的建立。
2、理解“设置初始网页”和“新建网页”的含义。
教学难点：
掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。
教学模式（或方法）：
任务驱动法、情景教学法、合作学习法、自主学习法和分组讨论法。
教学手段：
1、实施任务驱动，把学生的主动权交给学生，引导学生动手尝试、观察辨析、合作探究、运用教、练结合的方法，让学生体验并制作框架网页。
2、采用半成品加工策略，提供一些素材，让学生直接制作，提高学习的效率。
教学准备：
1、教师准备一些文字和图片素材。
2、教师提供一些制作框架网页的演示动画。
3、教师准备一些用网页框架制作的优秀作品。
网页设计框架布局 教案
重点：1、网页框架的建立。
2、理解“设置初始网页”和“新建网页”的含义。
难点：掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。
教学方法与手段
任务驱动法、情景教学法、合作学习法、自主学习法和分组讨论法。
教学内容
批注
一、知识回顾，做实铺垫（3min）
1.表格布局
教师：课件展示与本节课相关的能为本节课服务的旧的知识，以题的形式出现，提问后进生。
学生：各小组对减振器工作原理中仍有疑问之处进行提出交流，暴露问题，先由其他组同学帮忙解答，疑难部分则共同研究解决，共同完善，时间3min。
五．课堂小结，形成体系（3min）
教师：隐藏板书，给学生留出3分钟时间来复习本节课所学内容。
1；建立框架网页方法
2；设置框架网页
3；保存框架网页的方法
学生：合上课本，从知识上，数学方法上，易错点上，梳理回忆本节课有什么收获，并进行补充完善，形成资源共享。
课程名称
网页设计与制作
专业班级
2018级信息2、4班
总学时
120
授课章节
框架布局
授课学时
2
课堂性质
新授课
授课时间
2019.2.21
教学目标
知识目标
1.理解框架结构的含义和用途2.掌握建立框架网页的方法
能力目标
1、掌握建立网页框架及设置框架属性的能力。
2、能够应用网页框架建立简单的网页。
素质目标
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。
教师：将本节课的重要框架板书在黑板上，以帮助学生内化目标；
学生：齐读学习目标，找出目标中的重点关键词用红色标记，并简单理解，做到有目的的听课，提高效率。
(教学课件)chapter9利用框架设计与制作网页
8
任务2 ——保存框架网页
分别保存框架集网页和各个框架中的网页文件
网页设计与制作实用教程（第3版）
9
任务3 ——编辑框架页面元素
直接在顶端和左侧区域（框架）中分别插入相应的 页面内容。 在右侧区域（框架）中插入页面内容。
网页设计与制作实用教程（第3版）
10
任务4 ——设置框架中的链接目标
高等教育出版社
学习目标
了解框架的基本概念； 掌握创建框架结构的方法； 掌握编辑框架页面的方法； 掌握框架页面导航的链接方法； 掌握设置框架和框架集属性的方法； 了解iframe框架的使用方法。
网页设计与制作实用教程（第3版）
2
实训项目
深圳慧衡科技有限公司需要设计一个二级页面“网站 设计与开发技术”（简称“技术”），详细介绍 “Drupal网站管理系统”、“Magento电子商务平台”、 “Open Atrium社交网络平台”和“ShopEx网上商店系 统”等相关内容。 要求页面具有明显的分区结构和灵活的导航作用。
选择一种合适框架集，将页面top.html、left.html、main.html分别 装载在相应的框架中。其中至少有一个框架用于定义页面的导航区域， 有一个框架用于定义页面的内容区域。利用导航区域灵活选择兴趣栏 目，利用内容区域同步显示所选栏目的内容（网页文件main.html、 sudi.html、quyuan.html）。 为框架集网页设置网页标题。
网页设计与制作实用教程（第3版）
3
项目分析
设计思路：
（1）页面元素：网站banner、网站导航 条、技术栏目分类、对技术介绍的一 些文字元素、宣传图像等。 （2）版面布局：采取常用的“厂”字形 结构，顶部区域用于装载网站的 banner和导航条；左侧区域用于装载 技术分类栏目列表；占据页面最大空 间的右侧区域，用于装载主体内容。 （3）配色方案：由于本页面为二级页面， 从设计角度上来说，最好和整体网站 风格保持一致，因此色彩搭配仍然以 蓝白色为基调。
第9章 使用框架布局网页
第9章使用框架布局网页除表格外，框架也是网页的一种重要布局工具。
第3章介绍了使用表格构建网页布局的方法，本章介绍框架的应用，主要包括框架网页的创建，以及框架和框架集的基本操作。
对初学者来说，本章内容可能不太好理解，希望大家认真学习。
9.1框架网页的创建与使用表格布局网页不同的是，框架布局通常适合页面中有一个区域发生变化，而其它区域不发生变化的网页，如网站后台管理界面和一些论坛网页。
9.1.1 关于框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架，每个框架可显示不同的文档内容，彼此之间互不干扰。
框架网页最明显的特征就是当一个框架的内容固定不动时，另一个框架中的内容仍可以通过滚动条进行上下翻动。
框架网页主要包括两部分，一是框架集，二是框架。
框架记录具体的网页内容，每个框架对应一个网页；框架集是特殊的HTML文件，它定义整个框架页面中各框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档。
要在浏览器中查看一组框架，需要输入框架集文件的URL，浏览器随后打开要显示在这些框架中的相应文档。
使用框架的最常见情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。
例如，图9-1-1显示了一个由两个框架组成的框架网页：一个较窄的框架位于左侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。
当访问者浏览站点时，单击左侧框架中的某一超链接，要么展开或收缩其中的栏目，要么更改右侧框架的内容。
图9-1-1 由两个框架组成的框架网页知识库：学完本节后，大家可能会问，到底应该使用框架还是应该使用表格布局网页呢？使用框架时，访问者容易确认自己的位置，也比较方便跳转到其它网页。
但是如果使用过多的框架，加载框架的时间就会变长，而且在使用框架制作网页时，搜索引擎只会检索当前的框架，因此大多数情况下还是使用表格制作网页，或同时使用表格和框架布局网页。
第九课框架布局网页
坐姿端正，精神抖擞。 准备好书、练习本并且打开，准备好双色笔，笔尖向外。 随时准备大声、大方、大胆地回答问题。 预习70页至74页的内容。
LOGO
第九课
框架布局网页
第一课时
2015-4-1
此处添加公司信息
2
学习目标：
1、理解记忆框架的作用、分类。 2、能够使用框驾布局网页、创建导航链接、 在页面设置浮动图片。 自学指导：
请同学们认真看书70页至75页， 用括号括出下列检测题，8分钟后老师 将提问检测题。
LOGO
检
测
题
1、 什么是框架？框架的组成是 什么？分别简述。 2、框架式网页的组成是什么？框 架集标记及框架标记分别是什么？ 3、简述制作“我的作品”页面。 4、如何创建导航链接？ 5、如何设置浮动图片？
课堂小结
LOGO
回归目标， 由学生总结，师做点评。
2015-4-1
此处添加公司信息
当堂训练
LOGO
1、背记知识点。 2、P75页实践与探索。
2015-4-1
此处添
制作框架网页教案
制作框架网页教案教案标题：制作框架网页教案教学目标：1. 学生能够理解什么是框架网页，并能够解释其作用和优势。
2. 学生能够使用HTML和CSS创建框架网页的基本结构和样式。
3. 学生能够利用框架网页设计和布局内容。
教学资源：1. 计算机和互联网连接2. HTML和CSS编辑器（如Sublime Text、Notepad++等）3. 网页浏览器（如Chrome、Firefox等）教学步骤：引入：1. 向学生介绍框架网页的概念，并解释其在网页设计中的作用。
2. 引导学生思考框架网页与普通网页的区别，并列举框架网页的一些应用场景。
主体：3. 讲解HTML框架标签的基本语法和用法，包括`<frameset>`、`<frame>`和`<noframes>`标签。
4. 演示如何创建一个简单的框架网页结构，包括水平和垂直分割的框架。
5. 引导学生实践创建自己的框架网页结构，并帮助他们解决可能遇到的问题。
6. 讲解CSS样式表的基本语法和用法，包括如何为框架网页添加样式和布局。
7. 演示如何为框架网页添加背景颜色、边框、字体等样式效果。
8. 引导学生实践为自己的框架网页添加样式和布局，并鼓励他们发挥创造力。
总结：9. 回顾框架网页的概念和创建过程，确保学生对所学内容有一个清晰的理解。
10. 鼓励学生分享他们创建的框架网页，并提供反馈和建议。
教学评估：1. 观察学生在实践中的表现，包括他们是否能够正确创建框架网页的结构和样式。
2. 收集学生的框架网页作品，评估其创意和设计水平。
3. 进行小组或个人讨论，让学生分享他们对框架网页的理解和应用。
拓展活动：1. 鼓励学生进一步探索框架网页的高级功能，如跨框架通信、动态调整框架大小等。
2. 引导学生学习响应式网页设计的基本概念和技巧，以适应不同设备和屏幕尺寸。
教学反思：1. 教学过程中，及时观察学生的学习情况，根据需要进行适当的调整和辅导。
冀教版八年级信息技术 第九课《框架布局网页》教案教学设计2
第九课框架布局网页教学目标：1、理解框架结构的含义和用途；2、掌握建立框架网页的方法；3、掌握框架属性的设置方法；4、掌握框架网页的保存方法。
教学重点：1、网页框架的建立。
2、理解“设置初始网页”和“新建网页”的含义。
教学难点：掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。
教学方法：任务驱动法、情景教学法、合作学习法、自主学习法和分组讨论法。
教学准备：1、教师准备一些文字和图片素材。
2、教师提供一些制作框架网页的演示动画。
3、教师准备一些用网页框架制作的优秀作品。
教学过程：导入：除表格外，框架也是网页的一种重要布局工具。
使用表格构建网页布局的方法，本章介绍框架的应用，主要包括框架网页的创建，以及框架和框架集的基本操作。
对初学者来说，本章内容可能不太好理解，希望大家认真学习。
框架网页的创建与使用表格布局网页不同的是，框架布局通常适合页面中有一个区域发生变化，而其它区域不发生变化的网页，如网站后台管理界面和一些论坛网页。
关于框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架，每个框架可显示不同的文档内容，彼此之间互不干扰。
框架网页最明显的特征就是当一个框架的内容固定不动时，另一个框架中的内容仍可以通过滚动条进行上下翻动。
框架网页主要包括两部分，一是框架集，二是框架。
框架记录具体的网页内容，每个框架对应一个网页；框架集是特殊的HTML文件，它定义整个框架页面中各框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档。
要在浏览器中查看一组框架，需要输入框架集文件的URL，浏览器随后打开要显示在这些框架中的相应文档。
使用框架的最常见情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。
例如，图9-1-1显示了一个由两个框架组成的框架网页：一个较窄的框架位于左侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。
网页制作 第九章使用框架
除了前面两种选取方法外，还可以在选 取一个框架的基础上用快捷键选取其他框架， 其方法为：按住【Alt】键再按键盘上的左右 方向键即可选取同级框架或框架集；按住 【Alt】键再按键盘上的向上方向键可以从文 档编辑状态、框架、框架集逐步扩大范围选 取，即升级选取，反之按向下方向键就是降 级选取。
图9-17
图9-3
图9-4
如果单击 按钮，该框架集将出 现在文档中，但Dreamweaver不会将它与 辅助功能标签或属性相关联。另外，默 认情况下，Dreamweaver不会显示“框架 标签辅助功能属性”对话框，除非在 “首选参数”中进行了相应的设置，设 置方法如下。 （1）选择[编辑][首选参数]菜单命 令，打开“首选参数”对话框。
创建框架及框架集
在Dreamweaver中有两种创建框架集的方法，既 可以从若干预定义的框架集中选择，也可以自己设 计框架集。 选择预定义的框架集将自动设置创建布局所需 的所有框架集和框架，它是迅速创建基于框架的布 局的最简单方法。只能在“文档”窗口的“设计” 视图中插入预定义的框架集。
保存框架集文档
保存框架集文档的具体操作如下。 （1）选中要保存的框架集。 （2）选择[文件][保存框架页]菜单命令， 打开“另存为”对话框。 （3）在“保存在”下拉列表框中指定框架集 的保存路径，在“文件名”文本框中为框架集命 名。 （4）单击 按钮即可保存框架集。
第9章
课前导读 课堂讲解 上机实战 课后练习
使用框架
课前导读
基础知识 重点知识
基础知识
框架及框架集的概念、 框架及框架集的创建。
重点知识
框架及框架集的属 性设置、框架及框架集 的各种操作。
课堂讲解
创建框架集及框架 框架集与框架的选择及删除操作 框架及框架集的属性设置 框架及框架集的保存 处理不能显示框架的浏览器
使用框架布局网页学习教案
(shǔxìng)设置 选中框架后，“属性”面板上将(shàngjiàng)
显示相应框架的属性。
显示框架 源文件的 保存路径
选择是 否显示 框架的
边框
设置框架 滚动条的 属性
第9页/共16页
第十页，共16页。
2．设置(shèzhì)框架集属性
选中框架(kuànɡ jià)集，属 性面板中将显示框架(kuànɡ jià)集的属性。
该面板中各参数的含义同框架属性面板基本相同， 不同的是在“行”或“列”文本框中可设置框 架的行高或列宽，在“单位(dānwèi)”下拉列 表框中可选择具体单位(dānwèi)。
第10页/共16页
第十一页，共16页。
5.5
➢
保存(bǎocún)框架和 保存框架和框架集：一个包含n个框架的网页实际上由n+1个独立的html页面组成，1个框架集文件和n个包含在框架中显示的文件。这n+1个页面必须(bìxū)单独保存，才能在浏览器中正常工作。插入的网页元素位于哪个框架，就保存在哪个框架的网页中。
第五页，共16页。
5.2 创建(chuàngjiàn) 框架集
用户可以直接(zhíjiē)创建框架集，也可以在普通页面 中加载预定义的框架集。其中，直接(zhíjiē)创建框 架集的方法与创建普通页面的方法相似。
选择(xuǎnzé)“文 件”>“新建”菜单， 打开“新建文档”对 话框
在“类别”列表中选择“框架集” 选项，右侧将显示系统预定义的 框架集类型，选择其中一种，然 后单击“创建”按钮
作业布置： 1、使用框架的优点是什么？ 2.课后习题 本章主要内容(nèiróng)结束，谢谢合作！
第15页/共16页
第十六页，共16页。
驻操营学区初中信息技术第二册 第九课 框架布局网页教案 新人教版
第九课框架布局网页本课介绍的是网页制作中的重要方面——框架和导航条，它们可以使网页的结构更加清晰明了，同时显示几个不同的页面，使这些页面之间互相联系，以条理清晰的架构来表达信息，使信息的表达更加准确和便捷。
本课安排的活动是设计制作“我的作品”页面，让学生在活动过程中感受框架与导航条带来的方便，从而认识它们的作用。
本课建议1个课时完成。
一、框架1．教材一开始就介绍了框架在网页中的作用，这是核心知识。
本课内容主要是需要思考、理解，理清各部分的关系，这是难点，初次接触的学生可能会很难理解，这就需要教师带领他们，通过活动来理解和认识。
教材设计的活动是通过框架在网站中展示自己的作品，框架网页就像一个向导，能通过它找到所需要的信息，可以使学生用网页把自己做过的各种形式的信息技术作品连结起来，实现共同展示的效果，增强他们的兴趣。
这个活动中，信息表达的顺序是：框架——框架中的作品类别——具体的作品，因此，必须先有准备好的链接目标文件，再进行文字的超链接，如：框架中的文字链接到作品类别，作品类别中的作品名称链接到相应作品。
2．框架网页、作品类型网页和各个作品文件，都放在“myweb”下的“zuopin”文件夹中，这样比较容易查找。
把各个作品文件复制到“zuopin”文件夹下，并在作品类型网页中创建超链接到这些作品之后，就可以将作为向导的框架页面进行布局设置了。
如果一个框架内的图文太多，无法在一个页面中显示，就需要借助滚动条，选择了“滚动”栏中的“自动”选项之后，当信息在一页无法显示时，就会自动出现水平或垂直滚动条。
可以让学生尝试“滚动”栏中的“默认”等其他选项并观察效果变化。
3．插入的表格用来显示作品类别，将每个作品类别的文字链接到相应网页文件后，在“目标”列表中选择“mainframe”，是为了将网页显示在主框架中。
设置完成之后，要保存框架文件和框架集，才能进行预览。
在“属性”面板中将“mainframe”的源文件改为某个作品类别网页文件后，主框架中就会出现该类别的作品名称列表。
第九课创建框架网页
课题
创建框架网页
总课时
第9课时
教学目标
1、了解框架结构的特点与用途。
2、掌握框架网页建立的方法与步骤。
3．让学生自主独立探索操作，从而激发学生的学习兴趣。
教学重点难点
重点：框架网页的结构特点及其用途。
难点：快速创建框架网页的方法和步骤。
教
学
过
程
一、引入课题：
引导学生围绕“美在心灵”这一主题，设计一个框架网页，把我们对美的理解做成网页保留下来。
我们可以通过‘设置初始网页’按钮，为框架设置一个已经存在的初始网页，也可以通过‘新建网页’按钮为框架创建一个新的网页。
3、拆分框架。
方法如下：选定要拆分的框架，单机菜单栏中的‘框架’菜单，在弹出的‘拆分框架’对话框中进行设置。
4、比较认识框架网页与表格网页的不同特点及其广泛应用。
小组交流合作，讨论帮助解决学习中的问题，分享自己的学习心得。
二、学习与探究：
1、让学生按方案中提供的方法与要求完成本方案中的学习操作任务。
2、巡视检查学生学习情况，适时提供学习帮助。
三、教学过程
1、设计框架网页结构。
标题图
修饰主题图及主题文字相关
图片链接
网页页脚
2、创建框架。
在菜单栏单击:文件.新建,打开新建窗格，选取‘其他网页模板’中‘框架网页’选项卡，选择名成为‘标题、页脚和目录’的框架结构。
四、操作实践：
人们常说“鸟美在羽毛，人美在心灵”，让我们围绕“美在心灵”这一主题设计一个框架结构网页。
五、课堂小结
先抽学生总结，归纳总结
1.框架网页及其中的每个框架要放在网站根目录里。
2.为了初次学习方便，可用中文命名框架网页及其中的每个框架。