《小学五年级信息技术（人教版三起）下册 第13课 制作框架网页 巅峰复习知识清单》

《小学五年级信息技术（人教版三起）下册第13课制作框架网页巅峰复习知识清单》

一、核心概念与基本原理

（一）网页布局与框架结构【基础】【必会】

本课的核心在于理解“框架”这一概念在网页设计中的特殊作用。框架，英文为Frameset，是一种将浏览器窗口划分为多个独立区域的技术，每个区域（称为框架Frame）都可以加载并显示一个独立的HTML页面。这与我们之前学习的单元格合并的表格布局有本质区别：表格是将内容分割存储在同一个页面的不同单元格中，而框架则是将多个完整的、独立的页面组合起来，在同一个浏览器窗口中显示。例如，一个常见的“目录-内容”型框架网页，左侧框架显示一个包含所有章节标题的页面（A.html），右侧框架则显示与当前标题对应的具体内容页面（B.html）。当用户点击左侧的不同链接时，右侧框架的内容会动态更新为C.html、D.html等，而左侧的目录页面和顶部的Logo页面始终保持不变。这种结构极大地提高了网站维护的效率，并创造了清晰的信息导航层次。

（二）框架集文件（FramesetPage）与嵌套关系【核心】【难点】

理解“框架集文件”是整个课时的重中之重。框架集文件本身并不包含要在框架中显示的具体内容，它仅仅是一个“容器”或“蓝图”，用于定义框架的结构：包括如何分割窗口（行分割Rows或列分割Cols）、每个框架的大小（像素值或百分比）、以及每个框架中最初要加载哪个独立的HTML页面（Src属性）。当我们创建一个包含三个框架的页面时，实际上需要至少四个HTML文件：一个定义整体结构的框架集文件（如index.html），以及三个分别填充左、上、右框架的内容页面（如left.html、top.html、right.html）。更复杂的布局往往需要框架的嵌套，即在一个框架内部再次划分行或列。例如，先通过Cols将窗口分为左、右两列，然后在右侧的框架中，再通过Rows将其分为上、下两行，这就形成了嵌套的框架结构。

（三）框架属性与目标显示（Target）【高频考点】【操作关键】

每个框架都是一个独立的对象，拥有可精细调控的属性。Src属性指定了框架默认显示的源页面。Name属性是为框架指定的唯一标识名称，这是实现链接精准跳转的“灵魂”。当我们在左侧框架的页面中设置超链接时，不能简单地使用_self或_blank，而必须将链接的Target（目标）属性设置为右侧框架的Name值。例如，给右侧框架命名为“main”，那么左侧所有内容链接的Target都应指向“main”。这样，点击链接后，新页面才会在指定的“main”框架区域内打开，而不会覆盖整个框架集页面。滚动条（Scrolling）属性可以控制框架是否显示滚动条（Yes/No/Auto），边框（Border）和边框颜色（Bordercolor）属性则决定了框架之间分隔线的样式。理解并灵活运用这些属性，是制作出功能完善、界面友好的框架网页的基础。

二、操作流程与技法精讲

（一）创建框架网页的标准流程【操作规范】

1.构思布局：在动手操作前，首先在纸上或脑中规划好窗口的划分方式，确定是上下分割、左右分割还是混合嵌套，并估算每个区域的大致尺寸。

2.新建框架集：启动Dreamweaver或其他网页编辑软件，在“新建文档”中选择“框架集”或“框架页”，然后根据构思选择预设的框架布局样式，如“左侧固定”、“上方固定”等。软件会自动生成框架集文件，并在每个框架内创建一个临时的占位页面。

3.保存框架集与所有文件：这是最容易出错的一步。点击“文件-保存全部”。系统会首先提示保存框架集文件（通常命名为index.html或default.html，文件名会高亮显示整个窗口边框），然后会依次提示保存每个框架中的页面（如left.html、top.html、main.html，文件名高亮显示对应的单个框架）。务必清晰区分正在保存的是框架集还是某个内容页。

4.编辑内容页面：在各个框架内直接编辑内容，如同编辑普通网页一样，可以插入文字、图片、表格、表单等元素。也可以在单独的窗口中打开每个内容页进行编辑。

5.设置链接与目标：在作为导航栏的框架中创建超链接，并在属性面板的“目标”下拉菜单中，选择要显示内容的框架名称（如mainFrame）。

6.调整框架属性：通过“框架属性”面板或“框架集属性”面板，调整边框、滚动条、边距宽度等细节，使页面视觉效果更协调。

7.再次保存：完成所有编辑和设置后，再次执行“保存全部”命令，以确保所有修改都被正确保存。

（二）Dreamweaver中框架的操作技巧【实践技能】

选中框架：按住Alt键的同时在某个框架内单击，可以快速选中该框架。在“框架”面板（通过“窗口”菜单打开）中点击，可以更直观地选中框架或整个框架集。

调整框架大小：在编辑界面，可以直接用鼠标拖动框架的分隔线来粗略调整大小。更精确的设置，需要在框架集属性面板中，为“行”或“列”指定具体的数值和单位（像素、百分比、相对值）。

拆分框架：若预设的框架布局不满足需求，可以选中一个已有的框架，然后通过“修改-框架页”菜单，选择“拆分左、右、上、下”命令，进行二次拆分，实现嵌套。

设置无框架内容（NoFrames）：考虑到部分老旧浏览器或特殊设备可能不支持框架，可以在框架集文件的代码视图中，找到<noframes>和</noframes>标签，在中间添加一段提示文字，如“您的浏览器不支持框架，请点击此处访问无框架版本”，这体现了网页设计的兼容性思维。

三、易错点与难点突破【决胜关键】

（一）文件保存混乱症【高频失分点】

症状：所有文件都胡乱保存，或者只保存了框架集，忘了保存内容页，导致下次打开时某些区域空白或报错。

诊断与处方：必须建立清晰的“一集多页”概念。每次新建框架集，第一步就应执行“保存全部”，并在保存时根据文件的高亮状态，为每个文件赋予有意义的名称（如index_frameset.html,nav.html,content.html）。编辑过程中，养成随时按Ctrl+S的习惯，并定期执行“保存全部”。

（二）链接目标张冠李戴【核心操作障碍】

症状：点击导航链接后，新页面要么覆盖了整个框架集窗口（Target设为_self或默认为空），要么弹出一个全新的浏览器窗口（Target设为_blank）。

诊断与处方：这是对Target属性理解不清造成的。必须牢记，要让内容在指定的框架中显示，必须先在属性面板中为那个目标框架命名（Name属性），然后在链接的Target下拉菜单中选择这个名称。Target不是凭空想象出来的，而是建立在已命名的框架基础之上的。

（三）框架大小单位混淆【布局失准】

症状：设定左右框架宽度为50%和50%，但当浏览器窗口缩小时，两个框架比例虽然不变，但内容可能被挤压变形。

诊断与处方：理解三种单位的应用场景。像素（Pixels）：适用于固定宽度的导航栏或Logo区域，如左侧导航菜单宽度设为200像素，它不会随窗口大小变化。百分比（Percent）：适用于需要按比例自适应伸缩的区域，如右侧主内容区宽度设为（剩余部分）或80%。相对值（Relative）：在Dreamweaver中常用“

”星号表示，意为“分配所有剩余空间”，常用于与固定宽度搭配。正确的做法是，将固定部分设为像素，将自适应部分设为1星号或百分比。

（四）滚动条设置不合理【用户体验问题】

症状：内容很少的框架也出现了灰色的、不可用的滚动条；或者内容很多的框架却没有滚动条，导致部分内容无法看到。

诊断与处方：滚动条属性有三个选项。是（Yes）：强制显示滚动条，即使内容很少。否（No）：强制不显示滚动条，即使内容超长被隐藏。自动（Auto）：浏览器根据内容是否超出框架范围，自动判断是否显示滚动条。通常情况下，内容区域框架设置为“自动”是最佳选择，导航区域若内容固定，可设置为“否”。

四、跨学科视野与设计思维拓展

（一）与信息架构的关联【思维提升】

框架网页的设计思想，完美体现了信息架构学中的“模块化”与“复用性”原则。网站的Logo、导航菜单、版权信息等公共模块，可以单独做成一个页面，通过框架技术复用在网站的每一个页面中。当需要修改导航菜单时，只需修改这一个公共的导航页面文件，整个网站所有使用了该框架的页面就会自动更新。这种“一处修改，全局更新”的思维方式，是软件工程和大型网站后台管理系统（如CMS内容管理系统）的核心思想，为学生未来学习更复杂的编程和系统设计埋下了思维的种子。

（二）美学原理在框架设计中的应用【审美素养】

一个优秀的框架网页，不仅仅是功能实现，更要符合视觉美学。框架的分割比例需要遵循“黄金分割”或视觉平衡原则，避免过于呆板的二等分。框架边框的处理也很有讲究，可以设置Bordercolor使其与页面主色调协调，或者将边框宽度（BorderWidth）设为0，消除明显的分隔线，通过不同背景色或subtle的阴影来区分不同区域，使页面看起来更像一个无缝衔接的整体。这融合了平面构成和色彩构成的知识。

（三）框架技术的现代演变与前瞻【知识拓展】

虽然纯粹的框架集标签（<frameset>）在HTML5标准中已被废弃（出于可用性和搜索引擎优化的考虑），但它所代表的“多文档组合显示”的思想从未消失。现代的Web开发中，这种思想以更先进、更灵活的方式得以继承和发展。例如，利用Ajax技术异步加载页面局部内容；利用iframe（内联框架）在页面内嵌入另一个独立的HTML文档；利用服务端包含（SSI）或模板引擎（如PHP的include，PythonJinja2的extends）来复用页眉、页脚等公共部分。学习框架网页，正是理解这些现代前沿技术思想的最佳启蒙课。

五、考点聚焦与题型剖析

（一）理论考点【基础得分点】

概念辨析：主要考查框架集（Frameset）与框架（Frame）、框架与表格、框架与iframe的区别。常见题型为选择题和判断题。例如，“以下关于框架网页的说法，正确的是：A.框架集文件中包含了所有要显示的内容。B.一个框架网页只需要保存一个文件。C.框架的Name属性用于设置链接的显示位置。D.框架的大小只能使用百分比设置。”答案应为C。

属性识记：考查Src、Name、Scrolling、Border等关键属性的作用。例如，填空题：“若要为框架指定默认显示的页面，应设置其______属性。”

目标（Target）值辨析：考查_blank、self、parent、top以及自定义框架名的区别。例如，“若希望链接在新窗口中打开，Target应设为

___。”

（二）操作考点【核心能力考查点】

新建与保存：上机题中，第一步就是按要求新建指定布局的框架集，并正确保存所有文件。文件名和保存位置是重要的评分点。

链接与目标设置：题目会提供一个目录页面（如left.html）和几个内容页面（如page1.html,page2.html），要求考生在目录页制作超链接，并实现点击后内容在右侧主框架中显示。这是最常见的上机考题。

属性精确设置：例如，“将左侧导航框架的宽度设为180像素，不显示滚动条；将右侧主框架的上边距设为20像素。”考查对属性面板的精细操作。

框架的拆分与删除：给出一个简单的框架集，要求通过拆分操作，将其变为一个2行2列的复杂嵌套框架结构。

（三）综合应用题与解题步骤【拉分题】

典型题目：使用框架技术，制作一个介绍“我的家乡”的微型网站。要求：顶部框架显示网站标题“我的家乡”，高度100像素；左侧框架宽度200像素，显示四个链接：家乡简介、风景名胜、特色美食、著名人物；右侧主框架用于显示对应的具体内容。所有页面风格统一，美观大方。

解题步骤：

1.规划与准备：在本地硬盘新建一个站点文件夹（如MyHometown）。准备四篇介绍家乡的文字和图片素材。

2.创建内容页：新建四个普通的HTML页面，分别编辑好“家乡简介”、“风景名胜”、“特色美食”、“著名人物”的详细内容，并分别保存为intro.html,view.html,food.html,people.html。同时，再新建一个用于顶部标题的页面（top.html），输入“我的家乡”并设置格式；一个用于左侧导航的页面（left.html），制作四个文字的链接（先不设链接）。

3.创建框架集：新建一个“上方固定，左侧嵌套”的框架集。此时软件界面出现上、左下、右下三个框架。

4.保存全部：立即执行“保存全部”。将框架集文件保存为index.html。保存顶部页面时，确认选中顶部框架，将其保存为top.html。保存左侧页面时，确认选中左下框架，将其保存为left.html。保存右侧页面时，确认选中右下框架，将其保存为main.html。

5.设置内容：点击顶部框架，里面已经是top.html的内容。点击左侧框架，里面是left.html，尚未添加链接。点击右侧框架，里面是main.html，可以先清空，留待显示内容。

6.设置框架属性：选中整个框架集，在属性面板中将顶部框架的行高设为100像素。选中左侧框架，将宽度设为200像素，滚动条设为“否”。选中右侧主框架，滚动条设为“自动”。

7.命名框架：非常重要的一步！选中右侧主框架，在属性面板的“框架名称”框中，将其命名为“main”（或其他易记的名字）。

8.制作导航链接：在左侧框架的left.html页面中，为“家乡简介”四个字创建超链接，链接到intro.html文件。然后，在链接的属性面板中，找到“目标”下拉菜单，选择我们刚才命名的“main”。重复此步骤，将“风景名胜”链接到view.html，目标指向“main”；“特色美食”链接到food.html，目标指向“main”；“著名人物”链接到people.html，目标指向“main”。

9.设置默认显示页面：再次选中右侧主框架，在属性面板的“源文件”或“Src”中，将其设置为intro.html。这样，一打开网站，右侧默认显示的就是“家乡简介”。

10.保存与预览：最后执行一次“保存全部”。按F12键在浏览器中预览，点击左侧的各个链接，检查右侧内容是否正确切换。

易错点提示：在整个过程中，最容易出错的是第8步忘记设置“目标”或目标选错，以及第4步和第10步的保存不完整。务必在预览前确保所有修改都已保存。

六、复习策略与能力进阶

（一）构建知识图谱【系统复习法】

将本课知识点整理成思维导图。中心是“框架网页”。第一层分支：“核心概念”（什么是框架、框架集、内容页）、“核心操作”（创建、保存、设置属性、设置链接）、“核心属性”（Src,Name,Target,Scrolling,Border）、“易错难点”（保存混淆、目标错误、单位混淆）。每个分支再细化到具体操作和注意事项。通过图谱将零散的知识点串联成一个有机的整体。

（二）对比学习法【深化理解法】

将本课知识与前序知识进行对比。制作一个对比表格（此处用文字描述其思路），对比普通网页、表格布局网页、框架网页在“文件数量”、“内容组织方式”、“修改