下载文档原格式
第9章使用框架布局网页除表格外，框架也是网页的一种重要布局工具。
第3章介绍了使用表格构建网页布局的方法，本章介绍框架的应用，主要包括框架网页的创建，以及框架和框架集的基本操作。
对初学者来说，本章内容可能不太好理解，希望大家认真学习。
9.1框架网页的创建与使用表格布局网页不同的是，框架布局通常适合页面中有一个区域发生变化，而其它区域不发生变化的网页，如网站后台管理界面和一些论坛网页。
9.1.1 关于框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架，每个框架可显示不同的文档内容，彼此之间互不干扰。
框架网页最明显的特征就是当一个框架的内容固定不动时，另一个框架中的内容仍可以通过滚动条进行上下翻动。
框架网页主要包括两部分，一是框架集，二是框架。
框架记录具体的网页内容，每个框架对应一个网页；框架集是特殊的HTML文件，它定义整个框架页面中各框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档。
要在浏览器中查看一组框架，需要输入框架集文件的URL，浏览器随后打开要显示在这些框架中的相应文档。
使用框架的最常见情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。
例如，图9-1-1显示了一个由两个框架组成的框架网页：一个较窄的框架位于左侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。
当访问者浏览站点时，单击左侧框架中的某一超链接，要么展开或收缩其中的栏目，要么更改右侧框架的内容。
图9-1-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. 教学过程中，及时观察学生的学习情况，根据需要进行适当的调整和辅导。
第九课框架布局网页教学目标：1、理解框架结构的含义和用途；2、掌握建立框架网页的方法；3、掌握框架属性的设置方法；4、掌握框架网页的保存方法。
教学重点：1、网页框架的建立。
2、理解“设置初始网页”和“新建网页”的含义。
教学难点：掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。
教学方法：任务驱动法、情景教学法、合作学习法、自主学习法和分组讨论法。
教学准备：1、教师准备一些文字和图片素材。
2、教师提供一些制作框架网页的演示动画。
3、教师准备一些用网页框架制作的优秀作品。
教学过程：导入：除表格外，框架也是网页的一种重要布局工具。
使用表格构建网页布局的方法，本章介绍框架的应用，主要包括框架网页的创建，以及框架和框架集的基本操作。
对初学者来说，本章内容可能不太好理解，希望大家认真学习。
框架网页的创建与使用表格布局网页不同的是，框架布局通常适合页面中有一个区域发生变化，而其它区域不发生变化的网页，如网站后台管理界面和一些论坛网页。
关于框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架，每个框架可显示不同的文档内容，彼此之间互不干扰。
框架网页最明显的特征就是当一个框架的内容固定不动时，另一个框架中的内容仍可以通过滚动条进行上下翻动。
框架网页主要包括两部分，一是框架集，二是框架。
框架记录具体的网页内容，每个框架对应一个网页；框架集是特殊的HTML文件，它定义整个框架页面中各框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档。
要在浏览器中查看一组框架，需要输入框架集文件的URL，浏览器随后打开要显示在这些框架中的相应文档。
使用框架的最常见情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。
例如，图9-1-1显示了一个由两个框架组成的框架网页：一个较窄的框架位于左侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。
第九课框架布局网页本课介绍的是网页制作中的重要方面——框架和导航条，它们可以使网页的结构更加清晰明了，同时显示几个不同的页面，使这些页面之间互相联系，以条理清晰的架构来表达信息，使信息的表达更加准确和便捷。
本课安排的活动是设计制作“我的作品”页面，让学生在活动过程中感受框架与导航条带来的方便，从而认识它们的作用。
本课建议1个课时完成。
一、框架1．教材一开始就介绍了框架在网页中的作用，这是核心知识。
本课内容主要是需要思考、理解，理清各部分的关系，这是难点，初次接触的学生可能会很难理解，这就需要教师带领他们，通过活动来理解和认识。
教材设计的活动是通过框架在网站中展示自己的作品，框架网页就像一个向导，能通过它找到所需要的信息，可以使学生用网页把自己做过的各种形式的信息技术作品连结起来，实现共同展示的效果，增强他们的兴趣。
这个活动中，信息表达的顺序是：框架——框架中的作品类别——具体的作品，因此，必须先有准备好的链接目标文件，再进行文字的超链接，如：框架中的文字链接到作品类别，作品类别中的作品名称链接到相应作品。
2．框架网页、作品类型网页和各个作品文件，都放在“myweb”下的“zuopin”文件夹中，这样比较容易查找。
把各个作品文件复制到“zuopin”文件夹下，并在作品类型网页中创建超链接到这些作品之后，就可以将作为向导的框架页面进行布局设置了。
如果一个框架内的图文太多，无法在一个页面中显示，就需要借助滚动条，选择了“滚动”栏中的“自动”选项之后，当信息在一页无法显示时，就会自动出现水平或垂直滚动条。
可以让学生尝试“滚动”栏中的“默认”等其他选项并观察效果变化。
3．插入的表格用来显示作品类别，将每个作品类别的文字链接到相应网页文件后，在“目标”列表中选择“mainframe”，是为了将网页显示在主框架中。
设置完成之后，要保存框架文件和框架集，才能进行预览。
在“属性”面板中将“mainframe”的源文件改为某个作品类别网页文件后，主框架中就会出现该类别的作品名称列表。
《设计框架网页》教学设计设计框架网页教学设计一、教学目标本教学设计旨在帮助学生掌握设计框架网页的基本原理和技巧，并能够独立完成一个简单的设计框架网页。
二、教学内容1. 什么是设计框架网页？- 简要介绍设计框架网页的定义和作用。
2. 设计框架网页的基本原理- 探讨设计框架网页的基本原理，包括网页结构、布局和导航等方面。
3. 常用的设计框架网页工具和技术4. 设计框架网页实例分析- 分析一些设计框架网页的实例，让学生理解并研究实际应用。
5. 实操：设计一个简单的框架网页- 学生将运用所学知识，通过实操环节设计一个简单的框架网页。
三、教学方法1. 讲授法：通过讲解基本概念和原理，帮助学生建立基础知识。
2. 案例分析法：通过分析实际案例，让学生感受设计框架网页在实际应用中的作用。
3. 实践操作法：通过让学生在实践中设计一个简单的框架网页，锻炼他们的技能和创造能力。
四、教学评估1. 学生作品评估：对学生设计的简单框架网页进行评估，包括网页结构、布局和设计等方面。
2. 学生知识检测：通过考试、小测验等形式，检测学生对设计框架网页的理解和掌握程度。
五、教学资源1. 电脑设备和互联网连接。
2. 设计框架网页相关的教材和教学资料。
3. 设计框架网页工具和软件。
六、教学计划本教学设计共计两周，每周三节课，具体安排如下：- 第一周：- 第一节课：介绍设计框架网页的定义和基本原理。
- 第二节课：讲解设计框架网页的工具和技术。
- 第三节课：通过案例分析，深入理解设计框架网页的实际应用。
- 第二周：- 第一节课：回顾设计框架网页的基本原理和技术。
- 第二节课：实操环节，学生设计一个简单的框架网页。
- 第三节课：学生作品评估和知识检测。
七、教学展望通过本教学设计，学生将能够掌握设计框架网页的基本原理和技巧，并具备设计一个简单框架网页的能力。
同时，通过实践操作和案例分析，将对设计框架网页在实际应用中的作用有更深入的理解。
希望学生能够在实践中不断提升自己的设计能力，并拓展更广阔的创造空间。
框架网页教案
教案标题：框架网页教案
教学目标：
1. 了解框架网页的基本概念和特点
2. 掌握框架网页的基本结构和语法
3. 能够设计和创建简单的框架网页
教学重点：
1. 框架网页的定义和作用
2. 框架网页的基本结构和语法
3. 框架网页的设计和创建
教学难点：
1. 框架网页的嵌套和布局
2. 框架网页的交互和链接
教学准备：
1. 计算机和网络设备
2. 编辑器软件
3. 实例框架网页代码
教学过程：
1. 导入：通过展示一个框架网页的实例，引出框架网页的概念和作用。
2. 讲解：介绍框架网页的基本结构和语法，包括框架的定义、嵌套和布局方式。
3. 演示：通过实例演示如何设计和创建一个简单的框架网页，包括框架的设置
和页面的链接。
4. 练习：让学生在计算机上动手操作，设计和创建自己的框架网页，包括多个框架的嵌套和页面的交互。
5. 总结：总结框架网页的知识要点，强化学生的理解和记忆。
6. 拓展：引导学生进一步了解和探索框架网页的应用和发展，包括响应式设计和移动端适配等内容。
教学评价：
1. 观察学生在课堂上的学习情况，包括理解和操作框架网页的能力。
2. 布置作业，要求学生设计和创建一个包含多个框架的网页，并提交代码和效果展示。
3. 结合学生的作业和表现，进行评价和反馈，指导学生进一步提升和完善自己的框架网页设计能力。
第九课框架布局网页教学目标：（1）掌握框架网页的概念及用途。
（2）掌握框架网页的创建、制作、编辑与保存。
（3）能够在浏览器中预览网页，了解框架的拆分方法。
（4）初步掌握将框架结构与表格布局结合使用来制作网页。
教学重点：框架网页的概念、用途，创建、编辑、保存与拆分框架网页的方法。
教学难点：创建、编辑框架网页的方法。
教学过程：导入：浏览器窗口被分割成了3个区域，类似这样的网页被称为框架结构网页。
这种结构的特点在于能够将浏览器页面分割成若干个区域，各个区域既相互独立，又保持一定联系，且部分区域内容相对固定。
（图一）“人与动物”框架网页利用框架结构设计如图一所示的“人与动物”网页：在网页的上部显示“人与动物”标题与宣传语。
在网页的左下侧制作四个悬停按钮。
在网页的右下侧显示该页的内容。
1．创建框架结构网页任务一：请结合“实践指导一”，创建框架网页。
实践指导一：Step1打开站点“dongwu”。
Step2创建框架网页。
执行“文件→新建→网页”命令，在弹出的“新建”对话框中单击“框架网页”标签，选择“横幅和目录”样式。
如图二所示。
（图二）横幅和目录单击“确定”按钮，窗口出现横幅和目录结构的框架，如图三所示。
（图三）框架页面Step3保存网页为“kuangjia.htm”。
注：记录框架结构需要一个独立的页面，此外，框架结构中的每个框都是一个独立的网页文件。
通过每个网页中的“新建网页”按钮、“设置初始网页”按钮进行选择。
2．新建或指定各框中的初始页面任务二：结合“实践指导二”，制作top框架页面、left框架页面和main框架页面。
在横幅和目录的框架网页中，一般将三个框分别命名为top、left、main/right （如图三），其中top框用来显示本页主题或横幅广告，left框用来显示超级链接的目录，main框用来显示与目录对应的内容。
实践指导二：Step1制作top框架页面。
单击top框中的“新建网页”按钮，top框中会出现一个空白页面。
《建立框架网页》教学设计建立框架网页教学设计一、目标本教学设计旨在帮助学生研究如何建立框架网页，并理解其基本原理和操作步骤。
二、教学内容1. 什么是框架网页2. 框架网页的基本结构3. 创建框架网页的步骤4. 常见的框架网页的应用场景三、教学步骤1. 导入：通过提问引入框架网页的概念，激发学生的兴趣和思考。
2. 知识讲解：通过展示示例框架网页和图解，向学生介绍框架网页的基本结构和工作原理。
3. 操作演示：在电脑上进行实际演示，向学生展示如何创建框架网页，并逐步解释每个步骤和相关概念。
4. 学生练：分发练材料，让学生通过跟随指导创建自己的框架网页，并解决可能出现的问题。
5. 小结：通过回顾和总结，确保学生对框架网页的基本原理和操作步骤有清晰的理解。
6. 作业布置：要求学生在家中实践创建更复杂的框架网页，并在下节课进行分享和讨论。
四、教学评估1. 课堂观察：观察学生在操作演示和练环节的表现，评估他们的理解和掌握程度。
2. 练作业：对学生完成的练作业进行评估，检查他们是否能独立创建符合要求的框架网页。
3. 课后讨论和分享：在下节课中，让学生分享他们在家中实践创建的框架网页，并进行互动讨论和评价。
五、教学资源与材料1. 电脑和投影仪2. 示例框架网页和图解3. 练材料4. 课堂笔记和教学录像（可选）六、教学扩展1. 鼓励学生探索更高级的框架网页设计和定制化功能。
七、教学反思本教学设计通过结合理论讲解和实际操作，促进了学生对框架网页的理解和掌握。
在未来的教学中，可以进一步增加实践环节，提供更多的案例分析和讨论，以帮助学生更深入地学习和应用框架网页的知识。
框架布局网页教案设计
教学目标：
知识目标：
1、理解框架结构的含义和用途；
2、掌握建立框架网页的方法；
3、掌握框架属性的设置方法；
4、掌握框架网页的保存方法。
能力目标：
1、掌握建立网页框架及设置框架属性的能力；
2、能够应用网页框架建立简单的网页。
情感目标：
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力。
教学重点、难点：
教学重点：
1、网页框架的建立。
2、理解“设置初始网页”和“新建网页”的含义。
教学难点：
掌握框架属性的设置：调整框架大小、设置框架边界、改变边框线的宽度等。
教学模式（或方法）：
任务驱动法、情景教学法、合作学习法、自主学习法和分组讨论法。
教学手段：
1、实施任务驱动，把学生的主动权交给学生，引导学生动手尝试、观察辨析、合作探究、运用教、练结合的方法，让学生体验并制作框架网页。
2、采用半成品加工策略，提供一些素材，让学生直接制作，提高学习的效率。
教学准备：
1、教师准备一些文字和图片素材。
2、教师提供一些制作框架网页的演示动画。
3、教师准备一些用网页框架制作的优秀作品。
