DIV+CSS布局在《网页制作》课程中的教学改革探究

王爱菊　杨金川

摘要：在《网页制作》课程中，布局方法—直是学习本门课程的重点与难点，DIV+CSS的网页布局方法越来越广泛地应用于网页设计中，表现与内容的分离不仅精减了大量Table标签所产生的冗余代码，而且大大提高了页面的浏览速度。针对学生学习DIV+CSS教学环节的特点，从教学内容和教学手段等方面对该环节进行改革。

关键词：DIV+CSS；网页布局；web标准

随着计算机互联网的飞速发展，通过网页获取信息、交流信息是不可缺少的一个重要途径。网站制作应用的技术和显示页面效果的好坏直接影响到使用者的数量，因DIW+CSS布局方式使网页加载速度快、便于维护、便于更新，采用这种布局方式已成为网页制作中的主要潮流。那么从教学过程中如何加强这方面的改进，培养出更适合网页设计和开发的人才，是我们研究的主题。

1 课程中DIV+CSS教学环节现状

DIV+CSS是网站标准中常用的术语之一，通常以此说明与html网页设计中表格定位方式的区别，因在XHTML网站设计标准中，不再使用表格定位技术了，早期网页设计中使用table进行布局，但是由于table布局非常不灵活，后期维护困难，且不利于网页浏览。因此现在很多的网站多采用DIV+CSS布局页面的方式进行各种定位。

DIV是用来为HTML文档内大块内容提供结构和背景的一个元素。DIV的开始标签和结束标签之间的内容都是用来构成这个块的，其所包含元素的特性一部分是由DIV标签的属性进行控制，一部分通过使用样式表格式化这个块进行控制。

采用CSS+DIV布局页面与传统的表格布局页面有以下几个优势。

1.1 表现和内容相分离

它使得页面格式设置与页面内容独立开来，可以单独设置样式然后应用到页面中，使网页设计和管理维护的效率大为提高。

1.2 提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替了嵌套的标签，搜索引擎将会更有效地搜索到网页内容，并给出一个比较高的评价。

1.3 使页面载入得更快

因将大部分的页面代码写到CSS中，使页面体积容量相对变得较小。相对于表格嵌套布局的方式，DIV+CSS布局将页面独立分成了更多的区域，当打开页面时，是逐层加载的，这不像表格嵌套那样将整个页面套在一个大表格中，使页面加载速度相对较慢。

1.4 方便修改与维护

使用了DIV+CSS布局方式，后期的维护和修改变得更加容易，省时省力。根据区域内容标记，找到CSS里对应的ID，修改页面很方便，也不会破坏到页面中其他部分的布局样式。如果一个站点中很多html页面都应用了同一个CSS文件，那么可以通过修改CSS文件，同时更新应用这个CSS文件的所有网页风格的格式，不需要再一个一个的页面进行更新了，并且风格容易统一化。也可将站点所有的网页风格都使用同一个CSS文件控制，修改页面风格时，只需要修改这个CSS文件相应的行，则整个站点的所有页面都会随之发生变化。也可以在一个文档中应用一个格式的CSS样式，那么只要应用这个格式的文档中的部分也实现了统一的管理。

1.5 提高易用性

用CSS可以结构化html语言，如：p标签用来控制段落，h1标签用来控制文档标题，a：link用来控制链接等。可增加很多的用户，并且不需要建立独立的版本。

DIV+CSS教学通常是采用两种模式，其一教师仅根据教材叙述进行简单的理论讲解。其二教师在讲授DreamWeaver网页制作工具时，

向学生介绍如何通过相应的菜单和对话框创建和使用的，这样做的好处是学生可以很快的入手使用这门技术，但是同样的学生只知其然不知所以然，无法了解该技术的本质与应用，在实际应用中往往无从下手。因此在这方面教学中做如下改进。

2 教学内容改革

（1）了解网页结构原理。网页本质上来讲主要由三部分组成：结构、表现和行为。对应的web标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型、ECMAScript等。这些标准大部分是由W3C起草和发布的，也有一部分是由其他标准组织制订的，比如ECMA的ECMAScript标准。准确的说DIV+CSS应叫做xHTML+CSS，即结构+表现。

（2）根据原理在讲授《网页制作》课程中的DIV+CSS时，应先建立网页整体的结构，使学生明白这种技术在网页设计中的定位。其次分成三步走的方式来讲述：第一步讲述div在网页中排版定位的方式，采用盒模型方式，第二步讲述CSS控制网页样式的方式，三种主要的选择器类型：标签选择器、ID选择器、类选择，四种调用方式：行内样式、内嵌样式、链接样式、导入样式。第三步将DIV与CSS结合，详细讲述CSS控制页面中的细节。

3 教学方法改革

3.1 贯彻模块化教学方法，加强理论课程体系教学与实践性环节教学的有机统一

在网页设计教学过程中，一直采用将每个环节的课程体系划分多个模块。对于DIV+CSS教学环节，划分如下几个模块：其一为CSS讲解过程，以学校网站为例，将学校网站源码分解，分离出CSS部门讲解，分为CSS选择器模块、CSS应用方法模块、CSS修改和维护模块。其二讲解DIV部分，将DIV分为手写代码方式模块展示及Dreamweaver制作方法应用模块；其三讲解DIV+CSS部分。将Div盒模型方式用自制实例化为三个模块，Photoshop制作效果图模块，草图划分区块模块及实施CSS引用模块。每个模块讲解后让学生在实践环节充分练习，巩固学习效果，做到理论与实际的有机统一。

3.2 基于工作过程的案例教程

在每个模块实施过程中，搜集并选用多个网站和本环节相关的案例，应用不同的实际案例作为范本，让学生在模拟的同时能够开阔眼界，了解技术现状。学生可以通过模仿，来实现所展示的网站，掌握相应的知识点。与此同时，让学生以大作业的给出若干题目，或者自选题目，建立网站。多个网页设计中应用DIV+CSS技术，然后风格一致，以及后期实现一处修改多处使用的优势。

3.3 分组创作讨论法

以问题为导向，以学生为主体，培养学生自主学习的能力。在布置的教学情境中，依照实际的工作过程，结合相应的任务为分发教学任务书，接着对学生进行分组，然后按照任务书的具体要求再进行“咨询——决策——计划——实施——检查——评估”。让各小组成员利用业余时间完成任务，每组的组长组织任务的实施，记录小组各个成员的完成情况，最后由组长给出小组各成员的成绩。各组之间根据任务的完成情况给出等级。通过这种方式能增强小组成员间的合作意识、沟通能力，并能充分发挥出创新精神，提高他们的整体素质。

3.4 学生参与讲课法

在传统课堂均以教师为主，学生为辅的讲课模式。为了激发学生主动学习的意识，鼓励学生在部分章节，部分任务中将查阅资料及自身体会在课堂上讲解给其他同学，教师和学生做点评和讨论。有效的提高的学生自主学习的积极性和学习能力。

3.5 开展课外活动法

除了课堂讲述外，课外积极组织学生开展课外活动，引导学生通过互联网了解课程前沿动态，积极参与学术活动和科学实验。并且听一些相关内容的讲座知识，从网上下载一些学习资源，看一些赏心悦目的网站，也提高他们对这个课学习的积极性。

3.6 去公司参观和学习法

如果有相应合作的单位或企业做相关网站建设方面的项目，可以让学生去参与和锻炼，并且让相关的设计师给他们讲一讲需要的基础知识和主要技术，做项目整个架构到细节的一个过程，他们切身体会到做这个的流程，也给他们将来学习指引方向。

4 教学效果

通过对教学内容及教学方法的改革，提高了学生学习网页设计课程及DIV+CSS的兴趣及认识，学生通过实验，能够基本掌握DIV+CSS的技能，可以做出对应的项目，使学生思维更加活跃，提高了个人能力和团队协作精神，个人操作能力也有了明显的提高。但是如何更好的运用这个技术设计网页，还需要更进一步的学习和研究。