3.2.5应用框架布局网页 教学设计 2023—2024学年苏科版（2018）初中信息技术八年级全一册

第2节 制作网站——应用框架布局网页 【教学目标】 1． 知识与技能目标 （1）了解框架结构网页的概念及作用，以及它与表格布局网页的区别。 （2）掌握框架结构网页的建立、框架结构的拆分、删除等操作方法。 （3）能够区分框架结构属性设置与页面属性设置的不同点。 （4）掌握框架中页面设置及保存的方法。 （5）通过框架结构网页设计，对网页的整体结构有更进一步的认识。 2． 过程与方法 通过类似功能的表格网页的赏析，理解框架结构网页的特点及优势，并通过创建“人与动物”框架结构网页任务，在四个小任务中逐步带领学生学会框架结构网页的制作及保存，最后再通过两个探究问题，引导学生做进一步的比较和思考，形成结论。 3． 情感态度与价值观 （1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，增强学生关注动物的兴趣和意识。 （2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。 【教学重点】 （1） 框架网页的作用和功能，框架建立与属性设置。 （2） 框架中各个页面之间的关联，每个框中页面的设置方法。 （3） 框架网页的保存方法。 【教学难点】 （1）框架结构网页中框架属性与页面属性的设置方法。 （2）理解框架结构的多网页存储方法及各网页的设置方法。 【教学方法】 比较法、任务驱动法、讲演法、分组协作法。 【课时安排】 1课时 【教学过程】 教学环节 教师活动 学生活动 设计意图 一、导入 1、 展示一组表格制作的网页 （上方和左侧内容相同，仅右下部分内容有变化） 2、 提问：该如何简化制作这样的网页呢？ （复制粘贴） ——引入主题：框架结构网页 （相同的区域我们只需要制作一遍） 欣赏 思考 释疑 师生赏析，引出主题。 二、新授 （一）框架网页概念 1、打开“d:\dongwu”站点，展示“人与动物”页面，明确本课操作内容，引导学生理解框架网页的概念。 框架结构网页的特点：能够将浏览器页面分割成若干个区域，各个区域既相互独立，又保持一定联系，且部分区域内容相对固定。 （二）创建与设置框架结构网页 【任务1：】在“d:\dongwu”站点中新建一个“上方固定，左侧嵌套”结构的框架网页，并设置框架相关属性（如：显示框架边框，宽度设为1，颜色设为红色等） （课本P70-71实践学习） 提示：框架集属性面板的切换及设置（单击框架集任一边框即可切换）。如图所示： 相关链接： 框架的拆分与合并 https://zhidao.baidu.com/question/1494196567615170739.html 过渡语： 记录框架结构需要一个独立的网页文件，框架结构中的每个框也都是独立的网页文件。（如：一所学校与每个班级之间的关系）因此，当框架确定之后，需要为每个框分别制作网页，完成后保存各网页文件。(注意) （三）新建各框中的初始页面 【任务2：】在“上方固定，左侧嵌套”样式的框架网页中，一般将3个框分别命名为top、left和main，这里请将各子框架分别保存为“top.html”、“left.html”、“main.html”，框架整体保存为“kuangjia.html”。 （演示视频） ( 方法： 子框架页的保存 ： 文件 —— >保存框架 )提示： 1、保存top框架页面 2、保存left框架页面 3、保存main框架页面 4、 保存框架整体 方法：整体框架页的保存：文件——>保存全部（“kuangjia.html”） （四）制作各个网页页面 【任务3：】制作“人与动物”框架网页中每个页面内容。 制作top框架页面 （1） 在Top区域单击，定位插入点。 （2） 单击“属性窗口”中的“页面属性”按钮，设置“背景图片”为“logo.jpg”。 （3） 将指针移动到框架分割线，拖动调节框架区域的大小至合适位置。 （4） 单击“文件”菜单中的“保存框架页”命令，覆盖保存。 制作left框架页面 （1） 在Left区域单击，定位插入点。 （2） 使用表格布局，插入一个7行1列的表格，并设置表格“边框粗细”为“0”。 （3） 从上至下，单元格内依次插入图片nav-1、nav-2……nav-7。 （4） 拖动框架分割线，调节左侧框架区域的大小至合适位置。 （5） 单击“文件”菜单中的“保存框架页”命令，覆盖保存。 制作main框架页面 （1） 在Main区域单击，定位插入点。 （2） 对照图示，粘贴相关文本，并在合适的位置插入相关图片。 （3） 考虑框架整体效果，设置页面属性，如设置合适的网页背景颜色等。 （4） 单击“文件”菜单中的“保存框架页”命令，覆盖保存。 ★覆盖保存框架整体 单击“文件”菜单中的“保存全部”命令，覆盖保存整个框架网页。 过渡：预览网页，发现框架大小和边框有问题