。戥＿手ｔ术 网页设计中ＤＩＶ＋ＣＳＳ的教学研究 钟贞魁（江西环境工程职业学院，江西赣州３４１０００） 摘 要：高职院校计算机专业学生，都开设了《网页设计》这门专业课，目前，有关这方面的教材，在讲解网页布局时，很多还是用表格布局， 也有讲解ｏＩｖ＋ｃｓｓ￣＆的，但笔者觉得讲解的不够清楚。结合自己网站开发和教学经验，本文从教学内容的选取、重点和难点、教学实施等， 对ｄｉｖ＋ｃｓｓ的教学进行探讨。 关键词：ｈｔｍｌ；ＣＳ ｓ；布局；网页设计 １ ＣＳＳ＋ＤＩＶ网页样式与布局 ＣＳＳ是Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ的英文缩写，即层叠样式 ２．１标签选择器 一个完整的ＨＴＭＬ页面是有很多不同的标签组成，而标签选 表，它是用于控制网页样式并允许将样式信息与网页内容分离 择器，则是决定哪些标签采用相应的ＣＳＳ样式。每一个ＣＳＳ选择 生和值可以设置多个， 的一种标记性语言。它以ＨＴＭＬ语言为基础，提供了丰富的格式化 器都包含选择器本身、屙性和值，其中屙ｌ功能。 在设计网页时，能否控制好各个模块在页面中的位置是非 常关键的。在使用ｃｓｓ排版的页面中，＜ＤＩＶ＞与＜ＳＰＡＮ＞是两个常 用的标记。利用这两个标记，加上ＣＳＳ对其样式的控制，可以很 方便的实现各种效果。＜ＤＩＶ＞（ｄｉｖｉｓｉｏｎ）简单而言是一个区块 容器标记，Ｒ￣＜ｄｉｖ＞与＜／ｄｉｖ＞￣间相当于一个容器，可以容纳段 落、标题、表格、图片，乃至章节、摘要和备注等各种ＨＴＭＬ元素。 因此，可以把＜ｄｉｖ＞与＜／ｄｉｖ＞中的内容视为一个独立的对象，用 于ＣＳＳ的控制。 １．１行内样式 行内样式是所有样式方法中最为直接的一种，它直接对 ＨＴＭＬ标记使用ｓｔｙｌｅ属ｌ生，然后将ＣＳＳ代码直接写在其中。 １．２内嵌式 内嵌样式表就是将ＣＳＳ写在＜ｈｅａｄ＞与＜／ｈｅａｄ＞２＿间，并且用 ＜ｓｔｙｌｅ＞和＜／ｓｔｙｌｅ＞标记进行声明。 １．３链接式 链接式ＣＳＳ样式表是使用频率最高，也是最为实用的方 法。现在大部分的网站都会使用这种方法，它将ＨＴＭＬ页面本 身与ＣＳＳ样式风格分离为两个或者多个文件，实现了页面框架 ＨＴＭＬ代码与美３ＩＣＳＳ代码的完全分离，使得前期制作和后期维 护都十分方便，网站的后台技术员与美工设计者也可以很好的 分工合作。而且对于同一个ＣＳＳ文件可以链接到多个ＨＴＭＬ文件中 甚至可以链接到整个网站的所有页面中，使得网站整体风格统 一、协调，并且后期维护的工作量也大大减少。 １．４导入样式 导入样式表与前面提到的链接样式表的功能基本相同，只 是语法和运作方式略有不同。采用ｉｍｐｏｒｔ方式导入的样式表， 在ＨＴＭＬ文件初始化时，会被导入到ＨＴＭＬ文件内，作为文件的一部 分，类似内嵌式的效果。而链接式样式表则是在ＨＴＭＬ的标记需 要格式时才以链接的方式引入。 ２ ＣＳＳ选择器 ＣＳＳ控制页面总共有四种方式：行内方式、内嵌方式、链接 方式、导入方式，通过这四种方式就可以实现ＣＳＳ对ＨＴＭＬ页面 样式的控制，如果要让这些样式对ＨＴＭＬ页面中的元素实现一对 ，一对多或者多对一的控制，这就需要用Ｎｃｓｓ选择器，ＨＴＭＬ 页面中的元素就是通过ＣＳＳ选择器进行控制的。 ＣＳＳ选择器共有三种：标签选择器、ＩＤ选择器、类选择器。 ２００口圜日圆 从而实现对同一个标记，声明多种样式风格。 ２．２ ｌＤ选择器 ＩＤ选择器在某一个ＨＴＭＬ页面中只能使用一次，ＩＤ选择器更 具有针对性。在ＨＴＭＬ的标记中只需要利用ＩＤ属性，就可以直接 调用ＣＳＳ中的ＩＤ选择器。 ＩＤ选择器也可以用于多个标记。但这里需要指出的是，将 ＩＤ选择器用于多个标记是错误的， 因为每个标记定义的ＩＤ不只是ＣＳＳ可以调用，ＪａｖａＳｃｒｉｐｔ 等其他脚本语言同样也可以调用。如果一个ＨＴＭＬ中有两个相同 ＩＤ的标记，那么将会导致ＪａｖａＳｃｒｉｐｔ在查找ＩＤ时出错，例如函 数ｇｅｔＥ１ｅｍｅｎｔＢｙＩｄ（）。正因为ＪａｖａＳｃｒ ｉｐｔ等脚本语言也能调用 ＨＴＭＬ中设置的ＩＤ，因此ＩＤ选择器～直被广泛地使用。网站建设 者在编写ＣＳＳ代码时，应该养成良好的编写习惯，一个ＩＤ最多只 能赋予一个ＨＴＭＬ标记。从运行结果可以看到，最后一行没有任 何ＣＳＳ样式风格显示，这意味着ＩＤ选择器不支持多风格同时使 用，类似ｉｄ＝，，０ｎｅ ｔｗｏ 是完全错误的语法。 ２．３类选择器 标记选择器一旦声明，那么页面中所有的该标记都会相 应地产生变化。例如当声明了＜ｐ＞标记为红色时，页面中所有的 ＜ｐ＞标记都将显示为红色。如果希望其中的某一个＜ｐ＞标记不是 红色，而是蓝色，这时仅依靠标记选择器是远远不够的，还需 要引入类别（ｃｌａｓｓ）选择器。类别选择器的名称可以由用户定 义，屙性和值跟标记选择器一样，也必须符合ＣＳＳ规范。 ３教学实施 ３．１加强ＨＴＭＬ代码训练 在学习这门课时，主要是要让同学们熟悉ＨＴＭＬ代码的格 式，一个基本的网页包含的ＨＴＭＬ代码，常用网页元素的ＨＴＭＬ代 码标记。在熟悉了ＨＴＭＬ代码的基础之后，才能引入ＣＳＳ的教学内 容。 ３．２由简单到复杂，从部分到整体 学习ＣＳＳ，重点是学习ＣＳＳ控制网页的４种形式，选择器的类 型，常用的格式设置代码。在教学过程中一定要多选择一些有 趣的实例讲解，光讲理论很枯燥无味，先让同学们能够理解每 一个知识点，并能够实践操作。教师要布置一些针对知识点的 上机练习题，在完成基础练习后，再布置一个大作业，综合运 用所学内容，采用ＤＩＶ＋ＣＳＳ完成网页布局的设计。