高中信息技术选修三《创建网站的主页-框架网页布局》教学设计

高中信息技术选修三《创建网站的主页——框架网页布局》教学设计一、教材分析本课选自沪科版高中信息技术选修三《网络技术应用》第四章第二节任务二，是“创建网站的主页”这一单元中关于框架网页布局的核心内容。在此之前，学生已经完成了站点建立、主页基本元素插入等学习任务，掌握了用表格进行页面排版的基本方法。本课将引入框架这种新的页面组织方式，让学生体会到“一个窗口、多个页面协同显示”的设计理念，为后续完整网站的搭建与发布奠定结构基础。框架网页在技术上并不难，但其背后蕴含的“分而治之、协同呈现”的结构化思想，恰恰是普通高中信息技术课程标准所强调的数字化学习与创新能力的重要落点。教材以创建网站主页为任务主线，将框架集的新建、框架属性的设置、目标框架的链接、框架的保存四个关键环节串联起来，具有清晰的实践路径。二、学情分析授课对象为高二年级学生。这个阶段的学生已经具备较为熟练的计算机基本操作能力，在前期学习中掌握了FrontPage的基本界面、表格布局与超链接设置，对网页制作有比较浓厚的兴趣，尤其对自己动手搭建一个“像模像样”的个人网站充满期待。但同时也存在三个实际困难。一是学生在浏览网页时极少留意“框架”这一概念，对顶部导航点击后只更新局部内容的现象熟视无睹，缺少将其抽象为技术方案的意识。二是框架网页的保存机制与普通网页不同，需要分别保存框架集和各个子框架页面，这是历届学生最易出错的环节。三是部分学生容易陷入“为了用框架而用框架”的误区，忽视布局是否真正服务于内容表达，需要在评价环节加以引导。三、教学目标信息意识方面，学生能够从日常浏览的门户网站、学习平台中识别框架结构，感知框架布局在导航类页面中的独特价值，形成“结构服务于内容”的页面设计意识。计算思维方面，学生能够理解框架网页“一个框架集统辖多个子页面”的模型，能用自己的语言描述框架集、框架、目标框架三者之间的关系，并能将该模型迁移到其他分栏式页面结构的分析中。数字化学习与创新方面，学生能够综合运用新建框架网页、拆分与调整框架、设置初始页面、指定目标框架、保存框架集等操作，独立完成一个包含横幅区、导航区和内容区的三层式主页框架，并在配色、栏目命名上体现个人创意。信息社会责任方面，引导学生在网页素材选择与栏目内容设计中遵守网络规范，尊重知识产权，认识到网站是面向他人的公共表达空间。四、教学重点与难点教学重点是框架网页的创建流程与目标框架的设置。只有理解了“点击导航链接时，页面在哪个框架中打开”这一机制，框架布局才算真正学会。教学难点有两个：一是框架集与各个框架页面分别保存的理解与操作；二是目标框架下拉列表中各选项的含义辨析，需要结合具体链接效果反复体会。五、教学方法与课前准备本课采用任务驱动、对比体验与问题链引导相结合的教学策略。教师提前准备两类成品：一个是用表格布局制作的普通主页，一个是用框架布局制作的同主题主页，供学生对比体验。机房学生机安装FrontPage2003，教师机配有广播教学软件与屏幕演示环境。学生每人携带前期制作好的导航按钮图片与内容页面素材，素材主题的选取不设硬性要求，允许以班级风采、社团介绍、学科资源整理等为主题。课前将全班划分为四人协作小组，组内确定一名操作能力较强的学生担任“技术协理”，负责同伴答疑，教师巡回时重点关注操作链条完整的小组外成员。六、教学过程（一）情境对比，问题导入上课伊始，教师通过广播同时展示两个网站主页：第一个是传统表格布局主页，学生点击“校园新闻”栏目后，整个窗口刷新，顶部的校名横幅和左侧导航全部重新加载；第二个是框架布局主页，学生点击同样的栏目，只有右侧内容区发生变化，顶部横幅与左侧导航纹丝不动。教师抛出问题：同样是切换内容，两个主页的表现有什么不同？第二种效果给你什么感受？如果让你来实现第二种效果，你会猜测它是怎么做出来的？学生自由发言后，教师示意学生查看第二种主页浏览器地址栏的变化细节，并指出：这个页面窗口其实被切分成了几个相对独立的区域，每个区域各自调用一个网页文件，它们组合成一个整体，这就是今天要学习的框架网页。用一句话概括，框架网页就像一扇被分成几格的窗户，每一块玻璃分别是独立的一页，而窗框就是统辖它们的框架集。设计意图在于通过可感知的操作对比，让“框架”这个抽象概念获得可视化的第一印象，并借“猜测实现方式”激活学生的探究欲。（二）原理建构，概念厘清教师以板书与示意图结合的方式讲解三个核心概念。框架，即窗口中被分割出的每一个独立区域，每个区域显示一个独立的网页文件。框架集，是描述这些区域如何划分的特殊网页文件，它本身不显示具体内容，只记录分割方式、各区域名称和初始内容。目标框架，指点击某个框架中的超链接后，链接页面准备在哪个框架中打开。随后进行一个快速辨析练习。教师展示新浪教育频道某页面的截图，让学生圈画出其中的框架区域，并回答：如果点击左侧的“高考政策”链接，新页面最可能出现在哪个区域？学生口头作答，教师以动图演示验证。这一环节控制在八分钟以内，讲清概念即转入操作，避免纯理论讲授消磨学生动手热情。（三）任务驱动，分层实操本环节设置三个递进的任务，学生随教师广播演示逐步操作，每完成一个任务由小组互查确认后再进入下一任务。任务一：搭建三栏框架骨架。教师演示：打开FrontPage，执行“文件—新建—其他网页模板—框架网页”命令，在模板列表中选择“横幅和目录”样式。屏幕上随即出现上部横幅区、左侧目录区、右侧主内容区三部分。教师强调，此时窗口中出现了与普通网页不同的虚线边界和每个区域内的“新建网页”“设置初始网页”两个按钮，这是框架网页的标志性界面特征。学生新建同一模板后，教师引导其观察下方的“网页”标签与多出来的“框架集”保存结构，先形成直观印象，不急于解释。任务二：填充内容，认识初始页面。教师提出两条路径供学生选择：能力较强的学生在每个框架中单击“新建网页”，分别为横幅区输入网站名称、为目录区输入栏目名称列表；已有现成页面的学生单击“设置初始网页”，将前期制作的banner.htm、目录页和欢迎页分别载入对应框架。教师巡视中提示框架大小的调整方法：将鼠标指针移到框架边框，指针变为双向箭头后拖动即可，同时提醒控制横幅高度比例，避免喧宾夺主。此时穿插讲解框架属性的设置：右键单击任一框架选择“框架属性”，可修改框架名称、调整边框显示与否、设置滚动条出现的方式。教师特别指出，给框架起一个见名知意的名称，是为下一步设置目标框架做准备，命名混乱会导致后面给自己制造麻烦。任务三：建立联动，设置目标框架。这是本课成败的关键一步。学生在左侧目录框架中选中“校园新闻”文字并创建超链接时，教师引导学生注意“插入超链接”对话框右上角的“目标框架”按钮，单击后在弹出的对话框中选择右侧主内容区（main），让链接页面在内容框架中打开。操作完成后，教师让学生保存预览：先不点击目录链接，再依次点击各栏目，观察窗口刷新的范围，并与上课初看到的演示页面进行对照。学生亲眼看到自己做出的页面实现了“局部刷新”，课堂情绪会达到一个高点，这是框架教学独有的成就感时刻，教师应让学生充分体验，不要急于推进。随后组织一次人为出错体验：教师请学生将某个链接的目标框架故意改选为“整页”，保存后重新预览，学生发现新页面撑满整个窗口、导航消失。教师顺势提问：这个错误现象说明目标框架的作用是什么？如果目标框架选成“新建窗口”又会怎样？让学生动手一试，在试错中把目标框架各选项的含义彻底讲透。（四）难点攻坚，框架保存保存阶段先让学生自主执行“文件—保存”，观察出现的“另存为”对话框有什么异样。学生很快发现对话框右侧出现了框架示意图，并且正在保存的区域以深色突出显示。教师讲解保存的本质：框架网页由多个文件构成，每保存一次，系统依次询问每一个子框架页面的文件名，最后才保存框架集文件本身。教师给出保存规范的口诀：子页起名见内容，框架集名定为index。学生按照“内容区页面命名反映栏目、框架集统一命名为index.htm”的规则完成保存，并在文件夹中查看生成的多个htm文件，理解“一次保存、多个文件”的结构本质。教师在这里安排一个两分钟的小组检查任务：每组组长核对组员保存结果，确认文件数量与框架数量加一的对应关系，发现只有单个文件的小组立即排查。这一环节针对历年学生最常见的“只保存了框架集、子页面丢失”问题，防患于未然。（五）拓展创作，个性表达基础任务全部完成后，进入自选拓展阶段。教师给出三个提升方向供学生按需选择。其一，尝试使用“拆分视图”观察框架集的HTML代码，找到frameset与frame标签，感受代码与可视化编辑的对应关系，为有能力向代码层面迈进的学生打开窗口。其二，为框架页面设置统一的配色方案与文本样式，使横幅、目录、内容三区风格协调。其三，有意通过“框架—拆分框架”命令将内容区再上下分割，实现四字型布局，并思考这种布局适合什么类型的网站。教师巡视时为不同基础的学生提供差异化指导，对基础薄弱的学生只要求完成三栏骨架与正确保存，对学有余力的学生则追问其布局选择的理由，迫使学生将技术操作与表达意图关联起来。（六）展示评价，总结提升最后十分钟进行作品展示。教师随机抽取三名学生的作品进行广播展示，全体学生依据课前下发的评价量表从四个维度打分：框架结构是否清晰合理、目标框架设置是否全部正确、页面内容是否充实、整体设计是否美观统一。每件作品由一名学生做一分钟点评，要求必须说出一条优点和一条改进建议。教师总结时，用“一扇窗、几块玻璃、各管各天，合起来才是一幅完整的画”再次点化框架网页的思想，并预告下一课将对整个网站进行整合与发布，让今天的框架主页真正成为整个站点的门面。七、板书设计板书采用结构图形式呈现：中间是“框架网页”四字，向左分出“框架集（窗框：index.htm）”，向下分出“框架（玻璃：各子页面）”，向右分出“目标框架（链接在哪开）”，三条线末端分别标注“统辖分割”“各显其页”“链接的落点”，并在角落记下保存提示：子页多名，框架集index。八、教学评价设计本课采用过程性评价与结果性评价结合的方式。过程性评价由小组协理完成，记录组员在三个任务中的完成进度与互助情况。结果性评价以作品量表为主，四项指标各占四分之一定量打分。另设匿名反思条一张，学生课后写下本课操作中自己最易出错的一步及原因，教师