资源简介

第2节 制作网站——应用框架布局网页
【教学目标】
知识与技能目标
（1）了解框架结构网页的概念及作用，以及它与表格布局网页的区别。
（2）掌握框架结构网页的建立、框架结构的拆分、删除等操作方法。
（3）能够区分框架结构属性设置与页面属性设置的不同点。
（4）掌握框架中页面设置及保存的方法。
（5）通过框架结构网页设计，对网页的整体结构有更进一步的认识。
过程与方法
通过类似功能的表格网页的赏析，理解框架结构网页的特点及优势，并通过创建“人与动物”框架结构网页任务，在四个小任务中逐步带领学生学会框架结构网页的制作及保存，最后再通过两个探究问题，引导学生做进一步的比较和思考，形成结论。
情感态度与价值观
（1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，增强学生关注动物的兴趣和意识。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
【教学重点】
框架网页的作用和功能，框架建立与属性设置。
框架中各个页面之间的关联，每个框中页面的设置方法。
框架网页的保存方法。
【教学难点】
（1）框架结构网页中框架属性与页面属性的设置方法。
（2）理解框架结构的多网页存储方法及各网页的设置方法。
【教学方法】
比较法、任务驱动法、讲演法、分组协作法。
【课时安排】
1课时
【教学过程】
教学环节 教师活动 学生活动 设计意图
一、导入 展示一组表格制作的网页 （上方和左侧内容相同，仅右下部分内容有变化） 提问：该如何简化制作这样的网页呢？ （复制粘贴） ——引入主题：框架结构网页 （相同的区域我们只需要制作一遍） 欣赏 思考 释疑 师生赏析，引出主题。
二、新授 （一）框架网页概念 1、打开“d:\dongwu”站点，展示“人与动物”页面，明确本课操作内容，引导学生理解框架网页的概念。 框架结构网页的特点：能够将浏览器页面分割成若干个区域，各个区域既相互独立，又保持一定联系，且部分区域内容相对固定。 （二）创建与设置框架结构网页 【任务1：】在“d:\dongwu”站点中新建一个“上方固定，左侧嵌套”结构的框架网页，并设置框架相关属性（如：显示框架边框，宽度设为1，颜色设为红色等） （课本P70-71实践学习） 提示：框架集属性面板的切换及设置（单击框架集任一边框即可切换）。如图所示： 相关链接： 框架的拆分与合并 https://zhidao./question/1494196567615170739.html 过渡语： 记录框架结构需要一个独立的网页文件，框架结构中的每个框也都是独立的网页文件。（如：一所学校与每个班级之间的关系）因此，当框架确定之后，需要为每个框分别制作网页，完成后保存各网页文件。(注意) （三）新建各框中的初始页面 【任务2：】在“上方固定，左侧嵌套”样式的框架网页中，一般将3个框分别命名为top、left和main，这里请将各子框架分别保存为“top.html”、“left.html”、“main.html”，框架整体保存为“kuangjia.html”。 （演示视频） (
方法：
子框架页的保存
：
文件——
>
保存框架
)提示： 1、保存top框架页面 2、保存left框架页面 3、保存main框架页面 保存框架整体 方法：整体框架页的保存：文件——>保存全部（“kuangjia.html”） （四）制作各个网页页面 【任务3：】制作“人与动物”框架网页中每个页面内容。 制作top框架页面 在Top区域单击，定位插入点。 单击“属性窗口”中的“页面属性”按钮，设置“背景图片”为“logo.jpg”。 将指针移动到框架分割线，拖动调节框架区域的大小至合适位置。 单击“文件”菜单中的“保存框架页”命令，覆盖保存。 制作left框架页面 在Left区域单击，定位插入点。 使用表格布局，插入一个7行1列的表格，并设置表格“边框粗细”为“0”。 从上至下，单元格内依次插入图片nav-1、nav-2……nav-7。 拖动框架分割线，调节左侧框架区域的大小至合适位置。 单击“文件”菜单中的“保存框架页”命令，覆盖保存。 制作main框架页面 在Main区域单击，定位插入点。 对照图示，粘贴相关文本，并在合适的位置插入相关图片。 考虑框架整体效果，设置页面属性，如设置合适的网页背景颜色等。 单击“文件”菜单中的“保存框架页”命令，覆盖保存。 ★覆盖保存框架整体 单击“文件”菜单中的“保存全部”命令，覆盖保存整个框架网页。 过渡：预览网页，发现框架大小和边框有问题，需要调整修改。 （五）预览再设置 【任务4：】预览完成的框架网页，查看整体效果，根据实际情况适当调整框架的大小、设置框架的边框等。 相关链接： 如何设置框架集及其属性 https://jingyan./article/93f9803fe3a2ede0e46f55f3.html 观察、理解 了解 生参考样图和课本步骤，自行操作完成，个别学生演示。 关于框架集的属性设置，生在老师的讲演提示下完成操作，框架的拆分与合并操作，学生自行课后学习。 学生参看提示和演示视频进行保存操作，搞清楚各框架页间的关系，然后参照样图，根据步骤或演示视频完成各框架网页制作，组内互助，共性问题视学生实际学习情况，师生有选择性地轮换讲演。 学生根据提示自行探究，个别展示交流。 相关链接内容自行学习。 明确本节课任务，让学生对框架结构网页有一个初步的认识。 关于框架集的属性设置及拆分合并问题，课本中并未提到，但是实际操作过程中会有涉及，这里老师无需面面俱到，只提醒学生有这样的操作内容和方法，但具体是否应用，要视实际需要。 这部分会耗时较长，但一定要给学生充足的时间，因为这部分既是对前面知识的一个巩固运用，也是对框架结构网页的一个实践认知。 时间有限，可以分3组，制作不同的框架页内容，但是需要提醒学生不要忘记最后的“覆盖保存”。 学生完成后，可以选择个别提交，然后由老师讲演合并，让学生通过此过程中进一步理解框架整体页与各子框架页之间的关系。同时，这样的学习和操作过程，实质也是对第三部分探究第一题的先行认知。 这部分是框架网页的完善，实际操作仍然秉持按需操作的原则，而非越多操作设置越好。
三、探究 （1）若Main框架页面设置的初始网页有误，该如何修改？ （2）如果使用表格来设计类似框架结构的网页，它与框架结构网页的区别在哪？ 学有余力的学生自行思考探究，得出结论并分享。 这部分两个问题其实在以上导入和新授部分已经初步涉及，这里老师只需要提点，让学生自己去好好体会思考即可。
四、小结 今天，我们应用框架布局了“人与动物”网页，相信同学们定是收获满满，本节课的最后时间，请大家踊跃发言，大胆分享吧！ 学生分享，梳理知识，总结经验。 及时归纳总结。
教学后记

展开更多......

收起↑