浅谈框架网页的学习

李仙花

[摘           要]  中职学生在初学框架网页时，往往效率不高。通常表现为框架结构建立不正确，框架网页文件保存混乱，框架代码看不懂。从手绘框架结构图建立框架网页、根据关键字符命名并保存框架网页、利用框架面板辨析框架代码这三方面来论述框架网页的学习。

[关    键   词]  手绘框架图;关键字符;框架面板

[中图分类号]  G712             [文献标志码]  A                    [文章编号]  2096-0603（2019）36-0208-02

根据省对口高考招生考试计算机应用类专业考试大纲要求，学生不仅要掌握框架网页的设计，还要掌握java代码在框架网页中进行综合运用。而学生在初学框架网页时存在如下问题：创建框架网页的结构是混乱的、框架网页的保存是混乱的、无法辨析框架代码。从多年的教学来看，我觉得在初学框架网页时，手绘框架图、按关键字提示保存框架文件以及运用框架面板分析框架代码，可以快速地弄清框架网页的知识，正确建立符合要求的框架网页。

下面，我以如图1的框架结构的网页为例，谈一谈如何进行框架网页的学习。

一、手绘框架结构图

许多学生在初学框架网页时，在确定框架网页的样式后仅绘一个如图1那样由几根线条组成的结构图，这样的图是无法体现出框架网页各个对象的包含关系的，导致所建立的框架网页是凌乱的。我认为，采用手绘框架图的方法和步骤，细化各个框架，便可以帮助学生理清框架的结构及各对象的关系。

第一步：手绘框架，细化框架结构。

这里采用矩形嵌套的方法，从外到里的顺序绘制，按如图2步骤完成。先绘制外面最大的矩形（它含上方框架），再绘中间的矩形（含左侧框架），然后绘出最里面的矩形（含底部框架），最后使用一条直线将里面的矩形一分为二。这样既符合了“上方固定，左侧嵌套”的结构，又将框架页（内容页）从“底部框架”中分出来了。这样层层相套，各框架结构就很分明了。

第二步：标注框架名。

在新建框架网页时，软件会默认给各个框架命名，我们只需在提示“为每一个框架指定一个标题”时，按默认选择即可，同时在框架面板的各个框架内显示相应的框架名字。对于手绘的框架，我们也应分别为它们标上相应的框架名，为后面理解和分析代码提供了方便。如图3，在含有上方框架的大矩形内标上topFrame，在含有左侧框架的中间矩形内标上leftFrame，在含有底部框架的小矩形内标上bottomFrame，再在分出的内容页里标上mainFrame即可。这样有利于我们看懂框架图，为操作时保存各个框架文件做准备，这样的框架名将会在框架面板中对应显示。

第三步：标注所指文件。

在手绘的框架图上标注好框架名后，便是标注出要生成的框架集文件和各框架所指的文件。由于一个框架网页包含1个框架集文件和多个框架文件，其中每个框架对应一个文档，即一个文件。比方说，一个包含4个框架的框架集实际有5个文件：1个是总的框架集文件和4个分别包含了各自框架内的文件。就图1框架网页而言，共有5个文件要保存，含1个框架集文件和4个框架所指的文件。如图4，我们为这个框架集保存为index.htm的主页文件;而上方框架topFrame所指向的文件，即保存为1个文件：top.htm;左侧框架leftFrame所指向的文件，也要保存为1个文件：left.htm;里面小矩形的底部框架bottomFrame和框架页mainFrame分别要指向1个文件，即保存bottom.htm和main.htm這2个文件。依次标注这些文件名后，在保存操作时便可对照命名，提高操作的正确性。

二、根据关键字符保存框架网页文件

正确保存框架网页为后面学习和分析脚本代码提供保障。怎样才算正确保存完整的框架网页呢？由于一个框架网页文件的保存包括1个框架集文件和多个框架文件（含1个内容网页）的保存，所以需要认真对照才不至于保存的文件是混乱的。很多学生在保存时分不清是在保存“框架集”还是“框架”，我觉得最重要的一点是我们只要将关键字符Frameset是框架集、Frame是框架分别对应起来即可。

对于初学者，在首次保存框架网页时，建议选择“保存全部”命令。在“另存为”对话框中，默认会给出的文件名“UntitledFrameset-1.html”，当显示含有“Frameset”的字符时，表示这是在保存框架集文件，将它命名为之前标注的“index.htm”主页文件即可。如果给出默认的文件名中含有“Frame”的字符，我们对照“设计”窗口中毛边状的框架，再用对应的框架文件名保存就是。如果给出默认的文件名是“Untitled-1.html”，则保存为内容网页main.htm即可。

三、运用框架面板辨析框架代码

高考网页题以java代码为主，而中职学生的英文水平有限，理解能力较弱，我觉得学习框架部分的代码时，利用框架面板对照学习是最有效的。

当单击框架面板的任意边框或内容，代码窗口中相应的框架代码便会被选中，呈蓝底白字状态，且java代码和其他的程序代码一样，都是有层次感和递进效果的，具有嵌套关系。我们只需利用框架的嵌套方式来推理这些代码，就能理解哪个对象对应哪几行代码。另外，我们还可以利用代码窗口底部的状态栏上的一个个嵌套的标签，如框架集、框架，来分析代码。

图5中的代码便是上面标注好的框架图的部分框架代码（第8-17行）。

总之，在初学框架网页时，我们按照确定好的框架网页样式手绘框架图，细化框架结构，可理清框架的结构;按照提示的框架关键字符保存各个框架文件，灵活地利用框架面板分析框架部分的代码，相信框架网页的技术是不难掌握的。

参考文献：

[1]赵旭霞，刘素转，王晓娜.网页设计与制作[M].3版.北京：清华大学出版社，2018.

[2]杨杰，段欣.Dreamweaver CS5网页制作[M].北京：电子工业出版社，2013.

◎编辑 张 俐