浅谈网页设计中页面布局的教学

杨明学

【摘要】网页布局影响着网页的可浏览性、实用性及下载速度。在网页设计课程中，网页布局是课程的重点内容。在教学过程中，从学生的学习情况和课程内容和需求出发，采用实用的案例讲解表格、框架、CSS+DIV三种网页布局，并对三种方法布局网页的优缺点进行比较。

【关键词】网页设计 页面布局 CSS+DIV

随着互联网应用的普及，互联网+在各行各业中得到了广泛的应用，社会对网站设计人员及网页美工的需求量也在增加。《网页设计》是培养网页设计人员的基础课程，是计算机网络专业和设计类专业的专业基础课。在《网页设计》课程的教学中，网页的布局方法是本课程的重点和难点内容，针对网页布局教学环节的特点和学生的学习情况，本人从教学内容、教学手段及教学方法等方面对教学进行了设计和改进。

一、网页布局在网页设计中的重要性

网页布局是指以一定形式或标准对页面中的信息进行加工组织，从而使网页易于阅读并达到一定的审美标准，使之符合大多数浏览者的习惯[1]。网页由文本、各种类型的图像、动画、列表、超级链接、表单等网页元素构成，网页布局合理，以最适合用户浏览的方式展示图片和文字等网页元素，不仅吸引浏览者便于浏览，还可以加快网页的下载速度，提升网站的品质。

二、网页布局的教学方法

根据网站的类型不同以及网页呈现的内容不同，网页常用的布局有T型结构布局、“口”型布局、“三”型布局、对称对比布局、“同”字型布局、“国”字型、“匡”字型、海报型和Flash型网页等各种布局方式。使用Dreamweaver CS5作为网页编辑的工具，实现网页布局主要有表格、框架及CSS+DIV三种方法。

表格是网页中常用的信息展示方式，是在HTML页面中排列数据与图像的非常有力的工具。表格可以用来布局网页，也可以在网页上以一个实际的表格呈现。在教学中采用两种表格实例，第一种实例是在网页上显示一个具有实际意义的表格，如在网页上设计一个个人简历，在简历的设计过程中，引导学生着重理解掌握表格的基本操作方法，理解表格的绝对宽度、相对宽度、边框粗细、单元格间距、单元格边距以及对齐方式、背景等相关属性的意义及设置方法，掌握嵌套表格的使用方法；第二种实例是用表格设计网页布局，设计一个服装销售网站的主页面，在主页面的设计过程中，讲述利用表格对网页上的文本和图像进行布局及设计栏目的方法。通过该主页的设计，使学生理解在实际网页布局中，如何利用表格控制页面元素在页面上的位置，通过设置表格的宽度、高度和彼此之间的比例大小等，把不同的页面元素分别“框”在不同的单元格之中实现对页面元素的准确定位，以达到页面的平衡，合理地布局页面。在讲授过程中将表格和该表格自动生成的HTML代码进行比较，使学生能更好地理解前面章节中讲述的HTML语言中表格部分的代码，并能利用修改HTML代码的方法快速地修改设置表格的属性。

框架是实现页面布局的又一種方法，框架网页是—种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域，每个区域都可以显示不同的网页。在这部分的教学中，我们选择设计电子书的阅读界面为实例，建立一个上方固定，左侧嵌套的框架，在底部增加一个框架，此时浏览器窗口被分成了四个框架区域，上方框架用于显示书名等相关信息，底部框架用于显示书的版权信息，左侧框架用于书籍的导航设计，右侧框架用于显示具体章节的内容，当左侧框架的导航切换时，右侧框架中显示的章节内容随之切换。该实例中融入了框架的建立，修改、保存及框架的应用等相关概念，通过该实例将利用框架布局网页的方法完整地呈现给学生。

CSS+DIV页面布局是将DIV标签放在页面上作为容器，网页元素添加到DIV标签中，DIV可以添加到网页的任何位置，在添加DIV标签时，同时设计该标签的CSS样式，通过设置CSS样式，设定DIV在网页中的精确位置，同时对网页元素进行排版、修饰、美化。为了和表格布局页面的方法相比较，在教学案例上，仍然选择服装销售网站的首页，利用CSS+DIV布局网页的方法重新设计该页面。将整个网页划分成top、bottom、main1、main2共四个模块，每个模块都采用CSS+DIV实现，网页共需要添加四个DIV标签，每个DIV标签都需设置其CSS样式。DIV的样式是由CSS来控制的，CSS样式的语法、选择器的类型及使用方法是这部分的难点，在网页上添加DIV标签时，讲述设置该DIV的CSS样式选择器的类型，CSS的语法，CSS的分类中的具体项目的设置，便于学生理解掌握如何利用CSS控制页面中细节，实现网页的布局。

表格、框架、CSS+DIV是网页设计常用的布局方法，三种布局方法各有其优缺点。利用表格布局页面，需要修改表格的属性对单元格中定位的网页元素进行修饰，网页元素和元素的修饰美化是融合在一起的，不能相互独立，不利于后期对网站的维护；CSS+DIV布局将页面独立分成了更多的区域，当打开页面时，是逐层加载的，这不像表格嵌套那样将整个页面套在一个大表格中，使用了CSS+DIV布局方式，后期的维护和修改变得更加方便，也不会破坏到页面中其他部分的布局样式。三种布局方法中，CSS+DIV是目前主流的网页布局方法，但在网页布局中，三种方法不是孤立的，是相互融合的，在使用框架或CSS+DIV布局页面时，整体的方法是利用框架或CSS+DIV，网页的具体元素的定位还需用表格实现。

三、总结

网页布局是网页设计课程的重点和难点内容，在这部分的教学过程中，贯穿使用案例教学的方法，从简单到复杂，从部分到整体，将教学内容涉及的概念及操作融入到案例中，提出问题、分析问题、解决问题，分解教学难点，使学生既掌握了网页布局的实现方法，又能举一反三，提升了学生的网页设计技能。

参考文献：

[1]崔利.浅谈网页设计中页面的布局方式[J].软件开发

[2]王爱菊，杨金川. DIV+CSS布局在《网页制作》课程中的教

学改革探究[J].无线互联科技，2015（9）：116-117

[3]翁敏峰.《网页设计技术》教学方法探讨[J].福建电脑，

2015（10）：159

[4]邢玉凤，张晓燕.基于 DIV + CSS 网页布局的教学难点

分析[J].科技展望，2016（15）：220