网页设计中DIV+CSS的教学研究

钟贞魁

摘 要：高职院校计算机专业学生，都开设了《网页设计》这门专业课，目前，有关这方面的教材，在讲解网页布局时，很多还是用表格布局，也有讲解DIV+CSS布局的，但笔者觉得讲解的不够清楚。结合自己网站开发和教学经验，本文从教学内容的选取、重点和难点、教学实施等，对div+css的教学进行探讨。

关键词：html；css；布局；网页设计

1 CSS+DIV网页样式与布局

CSS是Cascading Style Sheets的英文缩写，即层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它以HTML语言为基础，提供了丰富的格式化功能。

在设计网页时，能否控制好各个模块在页面中的位置是非常关键的。在使用CSS排版的页面中，

与是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。

（division）简单而言是一个区块容器标记，即

与

之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。因此，可以把

与

中的内容视为一个独立的对象，用于CSS的控制。

1.1 行内样式

行内样式是所有样式方法中最为直接的一种，它直接对HTML标记使用style属性，然后将CSS代码直接写在其中。

1.2 内嵌式

内嵌样式表就是将CSS写在与之间，并且用标记进行声明。

1.3 链接式

链接式CSS样式表是使用频率最高，也是最为实用的方法。现在大部分的网站都会使用这种方法，它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站的后台技术员与美工设计者也可以很好的分工合作。而且对于同一个CSS文件可以链接到多个HTML文件中甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。

1.4 导入样式

导入样式表与前面提到的链接样式表的功能基本相同，只是语法和运作方式略有不同。采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。

2 CSS选择器

CSS控制页面总共有四种方式：行内方式、内嵌方式、链接方式、导入方式，通过这四种方式就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器共有三种：标签选择器、ID选择器、类选择器。

2.1 标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格。

2.2 ID选择器

ID选择器在某一个HTML页面中只能使用一次，ID选择器更具有针对性。在HTML的标记中只需要利用ID属性，就可以直接调用CSS中的ID选择器。

ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记是错误的，

因为每个标记定义的ID不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同ID的标记，那么将会导致JavaScript在查找ID时出错，例如函数getElementById（）。正因为JavaScript等脚本语言也能调用HTML中设置的ID，因此ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个ID最多只能赋予一个HTML标记。从运行结果可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持多风格同时使用，类似id="one two"是完全错误的语法。

2.3 类选择器

标记选择器一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明了

标记为红色时，页面中所有的

标记都将显示为红色。如果希望其中的某一个

标记不是红色，而是蓝色，这时仅依靠标记选择器是远远不够的，还需要引入类别（class）选择器。类别选择器的名称可以由用户定义，属性和值跟标记选择器一样，也必须符合CSS规范。

3 教學实施

3.1 加强HTML代码训练

在学习这门课时，主要是要让同学们熟悉HTML代码的格式，一个基本的网页包含的HTML代码，常用网页元素的HTML代码标记。在熟悉了HTML代码的基础之后，才能引入CSS的教学内容。

3.2 由简单到复杂，从部分到整体

学习CSS，重点是学习CSS控制网页的4种形式，选择器的类型，常用的格式设置代码。在教学过程中一定要多选择一些有趣的实例讲解，光讲理论很枯燥无味，先让同学们能够理解每一个知识点，并能够实践操作。教师要布置一些针对知识点的上机练习题，在完成基础练习后，再布置一个大作业，综合运用所学内容，采用DIV+CSS完成网页布局的设计。