浅谈网页设计与制作中的页面布局

代娟娟

当今社会，互联网的发展日新月异，网页设计已经成为热门领域，理所当然网页设计与制作成为大中专院校计算机专业的一门必修课。网页设计中，页面布局是第一步，也是非常重要的内容之一，是制作网页的最基本的技能，因此学会网页的页面布局是重中之重。下面简单介绍两种常用的网页页面布局的方法及两种方法的优缺点的比较。

一、利用表格布局网页

表格是网页设计与制作的一个重要的组成部分，是最常见的网页布局元素之一。在表格布局方面，通过设置表格及单元格的属性，对页面中的元素进行准确定位。下面以笔者所在学校学生上课时做的网页“学院网站”为例来说明表格布局网页的步骤。

第一，选择[插入]菜单栏中[表格]命令来插入需要的表格。并对表格的参数进行設置。这里需要设置参数为“5行1列”，并在[属性]面板中设置对齐方式为“居中对齐”。

第二，用和第一步相同的方法在第一行嵌入一个l行2列的表格，在第二行嵌入一个l行8列的表格。

第三，在第一行的嵌入表格中插入站点文件夹“images”中的图片。然后分别在第二行、第三行表格中插入图片。

第四，在第四行嵌入一个1行6列的表格，在嵌入表格中分别插入图片。

第五，在第五行插入文字：关于我们l联系我们I常见问题I站点地图I隐私策略I用户协议I法律声明l诚聘英才I友情链接。并设置颜色为：#C C C C C C。

第六，最后设置所有表格的边框粗细为“0”。

第七，按下F12键，保存网页文件，同时打开浏览器查看网页内容。

利用表格进行网页页面布局，可以对网页元素进行准确定位，可以使布局更加合理。灵活地使用表格的背景、框线等属性可以使网页更加美观。

二、利用框架布局页面

1.框架的概念

框架是把浏览器窗口分成若干个区域，每个区域可以显示不同的网页文件。每个框架都是浏览器窗口中的一个独立区域，在这个区域中可以显示一个单独的网页而不影响其他区域中的显示内容。使用框架可以非常方便地完成导航工作。

2.利用框架进行网页页面布局的步骤

下面以笔者所在学校学生课堂制作的“旅游景点介绍”为例，说明如何利用框架布局页面。

第一，选择[文件]菜单栏中的[新建]命令，创建一个新的页面。

第二，选择[插入]工具栏中[布局]任务栏中的[框架]命令，选择下拉菜单中其中一种框架类型，如“上方固定，左侧嵌套”类型。

第三，弹出[标签辅助功能属性]对话框，采用默认的每一个框架标题，单击“确定”按钮，创建框架集页面。

第四，选择[文件]菜单中的[保存全部]，保存框架文件及框架集文件。分别命名为“topframe.html”“leflframe.html”“mainframe.html”及“框架示例html”。

第五，单击菜单“窗口”中的[框架]，显示[框架]面板，在[框架]面板中，选中“mainFrame”，在[属性]面板中将“滚动”设为“自动”。

第六，在顶部的框架中插入图像。在左侧的框架中插入一个7行1列的表格，在表格中输入文字。

第七，在左框架的表格中选中文字，分别设置文字的超链接。

第八，按下F12键，打开浏览器查看网页内容。

这个例子用框架布局整个页面，但在框架里又嵌套了表格，这就实现了框架和表格有机结合，让页面布局更加灵活。

三、表格和框架的优缺点

表格是用于划分页面区域的。使用表格布局页面的好处是：表格方便排列有规律、结构均匀；使用表格会使页面结构清晰、布局整齐；表格可被绝大部分的浏览器所支持，具有很好的兼容性。表格的缺点是容易产生垃圾代码，影响页面下载时间，灵活性不大，难于修改。

框架则是用于分割浏览器窗口的，框架可以将一个页面拓展为多个页面，每个页面都可以显示不同的网页。框架的优点是支持滚动条，方便导航。框架的缺点是：难以实现在不同框架中精确地对齐各个页面元素；保存时不方便，应用范围有限；兼容性不好，并不是所有浏览器都提供良好的框架支持。

使用表格和框架对网页进行布局，各有利弊。初学者要根据不同网页页面的要求做出良好判断。

四、小结

随着互联网的飞速发展，人们对网站的要求也日益增高。要想设计出更为优秀的网页，页面的布局将是一项长期的任务。

（作者单位：临汾高级技工学校）