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中有三种方式插入样式表，分别是：