DIV+CSS网页布局案例在教学中的应用

张景峰 王丽芬 胡晓红

摘要：该文将案例教学与兴趣教学相结合，提出了将实际应用案例融入课程的思路。同时也针对课程中采用案例的选取和设计进行了论述。

关键词：案例设计；案例制作；整体思路；课堂教学

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）03-0128-02

1 概述

网页设计的实现一般通过两种方式：传统的表格布局方式和CSS布局方式。

1） 表格布局

传统的表格布局模式主要运用html中的table元素的无边框特性，设计一个能满足版式要求的表格结构，将内容装入每个单元格中。大量的样式设计代码混杂在单元格中，构成一个多重嵌套的复杂的表格。这种布局方法，不利于页面的灵活设计和后期修改完善，降低页面的可读性，而且对于页面的维护增加了难度，也提高了成本。复杂的表格设计使得修改非常繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。

2） div+css布局

div可以理解为“图层”或者“块”，它是一种比表格简单的元素。Div的功能仅仅是将一段信息标记出来，用于后期的样式定义。而CSS布局的重点不再放在表格元素的设计中，CSS是一个非常灵活的工具，可以将文档的样式内容脱离出来。CSS样式表可以用来改变从文本样式到页面布局的一切，并且能够与JavaScript结合产生动态地显示效果。如：文本格式和颜色；图形外观和布局；还有动态操作等等。

3） 在HTML中有三种方式插入样式表，分别是：

（1） 内联样式表（直接写在HTML标签中）

如：

（2） 嵌入样式表：是将CSS样式表统一放置在页面的一个固定的位置。

如：

…

最后，在页面main标签之后，创建一个id为bottom的div，用以编辑页脚的内容。同时在css中设置页脚div的样式：

#bottom {

width：1007；

height：89px；

color：#000；

text-align：center；

line-height：20px；

background-image：url（../images/2506.png）；

background-repeat：no-repeat；

background-position：center bottom；

border-top：#093 dashed 1px；

margin-top：20px；}

其中，在頁眉与主体或主体与页脚之间经常会创建一条相应样式的分割线，使页面看上去既美观又条例。分割线的设置需要一个重要的属性border来实现，包含线条样式、线条颜色以及线条粗细等参数设置。

案例来自一个实际应用的作品，虽然结构简单，但非常典型的概括了网页布局的流程，以及div与css样式的相互作用。课堂上老师先给学生分析分解页面结构，然后一步一步引导学生完成案例，同时，学生掌握了相关知识，了解了页面制作流程。

2） 典型案例解决教学难点

掌握了div+css制作网页的基本流程后，通过接下来的典型案例来学习掌握不太规范的页面结构如何合理布局和实现。

首先，在body样式设置中添加背景，同时在box的div样式中采用另一种方式定义页面宽度，即百分比的方式：width：100%，说明不管在怎样尺寸的显示屏上，在怎样的浏览器上，宽度上都是满屏显示。

其次，在这种页面的制作中，页眉的元素比较零碎不规则。如何合理规划页眉是一个重要的课题。由于logo区域和导航条区域，结构不一，所以分别设置比较合理。先在box的开始标签之后添加top1，再在top1的开始标签之后添加top1-1来容纳logo图片，并且该div靠左摆放，以插入图片大小为依据，定义css样式。然后再在top1的右侧插入新的div（top1-2），来存放入口链接。其中右侧的位置定义需要依靠float：right来实现，同时适当定义该图层的右边距。

第三，导航条的制作。导航的制作，方法不一，比较灵活快捷的方法，不妨先将导航的各链接以段落形式垂直摆放，选中所有链接内容，添加项目列表，然后添加无序列表的css样式：

#top2 li {

width：100px；

height：25px；

float：left；

list-style-type：none；

text-align：center；

margin-top：10px；}

其中，确保各链接一字排列，浮动定位属性的设置至关重要。同时还需要将列表样式的类型设置为“无”，并使文本居中对齐。

第四，主体div左侧的数据符号与段落文字的排版，是一个值得学习的方式。先将数字序号以图片形式制作完成，然后将各数字序号作为背景加入文本各层。为了避免文字与序号重叠，设置文字图层左侧的内边距，将内容错开。另外，多个标题的样式，采用类样式形式，并在属性面板上选择添加。

通过这个案例的引入，使得课堂气氛变得活跃热烈，学生主动学习的热情高涨，很多学生一边探索尝试，一边与身边同学讨论，努力尝试，检验自己编辑的样式的实现效果。

3） 举一反三，鼓励学生独立完成，增强熟练操作和自主完成能力

除了课堂上带领学生共同完成的案例，还可以设定一些相应主题的案例，鼓励学生独立完成。学生在亲自搜集素材，亲自设计实现的过程中，会出现很多五花八门的问题。在学生实现的过程中，面对问题，不断寻求解决办法，真正掌握各个属性的具体应用。这样的学习方式，会使学生开拓眼界，提升学生的思维，挖掘学生的潜能。

3 结论

在DIV+CSS网页制作课程授课中运用实际案例教学，能很好地调动学生学习的主动性和积极性，活跃课堂气氛，教学效果也有相应提升。但对老师却提出了更高的要求。要想让案例教学发挥更好的作用，老师有必要注意以下几点：

1） 课前做好充分准备，如何引导启发学生，可以将案例做成一些半成品，让学生在此基础上完成，将案例结合到课程设计中，充分发挥作用。

2） 认真甄选课堂案例。案例规模、难度都要适中，要简洁、有趣、实用。作品难度过大或者操作性差，会起到反作用。

3） 要将知识点有机的与案例结合，让学生真正在玩中学，在学中玩。知识点过于分散，反而会让知识体系不够系统。

4） 案例制作完成之后要有恰当的总结。在总结中，要揭示出案例中包含的理论知识，让学生不只是完成了一个案例的制作，还知道用了哪些知识制作的这个作品，如何用这些知识完成其他案例的设计制作。

案例教学法是在新教学理念改革的前提下，确立以学生为主体，以培养学生动手能力、创新思维为基本方向的一个有效手段。案例教学法能促进教学相长，在学生的整体积极性得到提高的同时，突出教师教学实践的亮点，使教师在教学中获得充分的满足感，从而使程序教学的效能得到稳步提升。