基于ＤＩＶ＋ＣＳＳ的网页设计技术 王 薇 （黑龙江农垦职业学院哈尔滨１５００２５） 【摘要】本文首先介绍了ＤＩＶ和ＣＳＳ技术的特点，然后对ＣＳＳ盒子模型进行了分析，最后通过具体的实例讲解了ＤＩＶ＋ＣＳＳ网页布局技术的方法和 实现流程，实例表明，该技术具有代码简沽、表现和内容相分离等优势。 【关．＿【词】ＤＩＶ ＣＳＳ网页设计 ０、引言 ２、ＤｌＶ＋ｃｓＳ的基本设计 ＨＴＭＬ［１］（ＨｙｐｅｒＴｅｘｔ Ｍａｒｋ—ｕｐ Ｌａｎｇｕａｇｅ），即超文本标记语言，是当 若采取ＤＩＶ＋ＣＳＳ的网页布局结构，首先需要用ＤＩＶ来分块，定义语义 前网络上应用最为广泛的语言，也是组成网页文档的基本语言。ＨＴ＾ｉＬ主要 结构；然后用ＣＳＳ来定位和添加样式，如浮动、位置、对齐属性、加入背景 包括头部（Ｈｅａｄ）、主体（Ｂｏｄｙ）两大部分，头部是描述浏览器所需要的信息， 等；晟后在这个ＣＳＳ定义的各个块中添加相应的样式，如文字、图片等。下 主体则包含所要说明的具体内容。在一般网页设计中，我们需要设计的内 面通过最常用的三栏式自适应宽度布局实例介绍使用ＤＩＶ＋ＣＳＳ布局网页 容就体现在主体中。 ， 的基本方法。 ＤＩＶ元素是用来为ＨＴＭＬ文档内大块的内容提供布局的结构和背景。 用＜ｄｉｖ＞标记把网页区分成不同的区块，包括ｈｅａｄｅｒ、ｃｏｎｔｅｎｔ（其中 它是ＨＴＭＬ中的一个标签，此标签的作用就是定位网页内容中的图片、文 有ｓｉｄｅｂａｒ边栏区域和ｍａｉｎ主体区域）、ｆｏｏｔｅｒ三个区域，分别作为网页 字、视频等相关信息。一般我们也叫为ＤＩＶ层定位。 的头部、内容和版权区域。编写ＨＴＭＬ文档代码如下： ＣＳＳ（ｃａｓｃａｄｉｎｇ ｓｔｙｌｅ ｓｈｅｅｔ），层叠样式表，是用于控制网页样式 ＜ｂｏｄｙ＞ 并允许将样式信息与网页分离的一种标识性语言。ＣＳＳ是１９９６由Ｗ３Ｃ审 ＜ｄｉｖ ｉｄ＝ ｃｏｎｔａｉｎｅｒ ＞ 核通过，并且推荐使用的。ＣＳＳ的引入就是为了使ＨＴＭＬ语言更好的适应页 ＜ｄｉｖ ｉｄ＝ ｈｅａｄｅｒ ＞头部＜／ｄｉｖ＞ 面的美工设计。它以ＨＴＭＬ语言为基础，提供了丰富的格式化功能，如字体、 ＜ｄｉｖ ｉｄ＝ ｃｏｎｔｅｎｔ ＞ 颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包 ＜ｄｉｖ ｉｄ＝ ｓｉｄｅｂａｒ ＞边栏＜／ｄｉｖ＞ 括显示器、打印机、打字机、投影仪和ＰＤＡ等）来设置不同的样式风格。ＣＳＳ ＜ｄｉｖ ｉｄ＝ ｍａｉｎ ＞主要内容＜／ｄｉｖ＞ 的引入引发了网页设计一个又一个的新高潮。使用ＣＳＳ设计的优秀页面层 ＜／ｄｉｖ＞ 出不穷。 ＜ｄｉｖ ｉｄ＝ ｆｏｏｔｅｒ ＞版权＜／ｄｉｖ＞ ｌ、ＣＳｓ盒子模型【２】 ＜／ｄｉｖ＞ 盒子模型是ＣＳＳ控制页面时一个很重要的概念，只有很好的掌握了盒 ＜／ｂｏｄｙ＞ 子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。 设置其ＣＳＳ样式文件代码如下： 所有页面中的元素都可以看成是盒子，占据着一定的页面空间，一般 ＃ｃｏｎｔａｉｎｅｒｌｍａｒｇｉｎ：０ ａｕｔｏ：ｗｉｄｔｈ：９０％：｝ 说来这些被占据的空间往往要比单纯的内容大 换句话说，可以通过调整 ＃ｈｅａｄｅｒ｛ｈｅｉｇｈｔ：２００ｐｘ：ｍａｒｇｉｎ—ｔｏｐ：２０ｐｘ；ｂｏｒｄｅｒ：２ｐｘ ｓｏｌｉｄ：） 盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这 ＃ｃｏｎｔｅｎｔ｛ｈｅｉｇｈｔ：５００ｐｘ：ｗｉｄｔｈ：１００％：ｍａｒｇｉｎ—ｂｏｔｔｏｍ：ｌＯｐｘ：｝ 样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两方 ＃ｓｉｄｅｂａｒ ｛ｆｌｏａｔ：ｒｉｇｈｔ：ｗｉｄｔｈ：３０％：ｈｅｉｇｈｔ：５００ｐｘ：ｂｏｒｄｅｒ：ｌｐｘ 面来理解。一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间 ｓｏｌｉｄ：） 的相互关系。 ＃ｍａｉｎ｛ｆｌｏａｔ：ｌｅｆｔ：ｗｉｄｔｈ：７０％：ｈｅｉｇｈｔ：４００ｐｘ：ｂｏｒｄｅｒ：２ｐｘ ｓｏｌｉｄ：｝ 在ＣＳＳ中，一个独立的盒子模型由ｃｏｔｅｎｔ内容，ｂｏｒｄｅｒ边框， ＃ｆｏｏｔｅｒ｛ｈｅｉｇｈｔ：６０ｐｘ：ｂｏｒｄｅｒ：ｌｐｘ ｓｏｌｉｄ：Ｊ ｐａｄｄｉｎｇ内边距和ｍａｒｇｉｎ外边距４个部分组成。如图ｌ所示。 其中，ｗｉｄｔｈ属性设置为百分比形式，表示当窗口大小发生变化时，页 一个盒子实际所占有的宽度或高度是由内容＋内边距＋边框＋外边 面的宽度也随之变化。ｃｏｎｔａｉｎｅｒ的ｍａｒｇｉｎ属性为０ ａｕｔｏ，表示上下边 框组成的。在ｃｓｓ中，可以通过设定ｗｉｄｔｈ和ｈｅｉｇｈｔ的值来控制内容所占 距为０像素，ａｕｔｏ表示左右边距为自动，实现网页的居中显示。ｓｉｄｅｂａｒ的 的矩形的大小，并且对于任何一个盒子，都可以分别设定４条边各自的 ｆｌｏａｔ属性为ｒｉｇｈｔ，标识靠右对齐，ｍａｉｎ的ｆｌｏａｔ属性为ｌｅｆｔ，表示靠左 ｂｏｄｅｒ、ｐａｄｄｉｎｇ与ｍａｒｇｉｎ。因此只要利用好这些属性就很够实现各种各样 对齐，实现中间两列竖栏的显示效果。ｂｏｒｄｅｒ属性为２ｐｘ ｓｏｌｉｄ，表示２ 的排版效果。 个像素宽的实线边框。 ３、总结 基于ＤＩＶ＋ＣＳＳ方法实现了网页的布局定位，具有表现和内容相分离等 优势，已经成为一种网页设计的趋势和标准。通过对ＤＩＶ和ＣＳＳ技术的研 究，介绍网页布局应用实例和使用该技术布局网页的方法和流程。在实际 操作过程中还须要根据不同的风格和内容灵活应用各布局元素及ＣＳＳ样 式。一 参考文献 ｖ●时遣 ［１］曾顺．精通ＣＳＳ＋ＤＩＶ网页样式与布局［蛔．北京：人民邮电出版社，２００７． －－■Ｉ嵋—●年越●土一柏ｌＥ■ ｍｒｌｒｉｍ与舞■舡一静ｌＥ一 ［２］Ｃｒａｉｇ Ｇｒａｎｎｅｌ１．ＣＳＳ与ＨＴＭＬ Ｗｅｂ设计实践指南［Ｍ］．北京：人民邮 图１盒子模型 电出版社，２００９． ［３］Ｐ．Ｄ．Ｓｐａｎｏｓ，Ｓｔｏｃｈａｓｔｉｃ ｌｉｎｅａｒｉｚａｔｉｏｎ ｉｎ ｓｔｒｕｃｔｕｒａｌ ｄｙｎａｍ－ Ｅｎｇｉｎｅｅｒｓ ４５（１９７８）３９３—３９９ ｉａｓ，Ａｐｐ１．Ｍｅｃｈ．Ｒｅｖ．３４（１９８１）卜８． ［６］Ｂａｉ Ｚｈａｎ—Ｗｕ，Ｍｅｎｇ Ｇａｏ—Ｏｉｎｇ，Ｔｈｅ ｓｍａｌｌ ｐａｒａｍｅｔｅｒ ｅｘｐａｎｓｉｏｎ ［４］Ｊ．Ｂ．Ｒｏｂｅｒｔｓ．Ｐ．Ｄ．Ｓｐａｎｏｓ．Ｒａｎｄｏｍ Ｖｉｂｒａｔｉｏｎ ａｎｄ Ｓｔａｔｉｓｔｉｃａｌ ｓｏｌｕｔｉｏｎ ｔｏ Ｆｏｋｋｅｒ—ｐｌａｎｋ ｅｑｕａｔｉｏｎ ｆｏｒ Ｂｒｏｗｎｉａｎ ｍｏｔｉｏｎ ｉｎ Ｌｉｎｅａｒｉｚａｔｉｏｎ．Ｗｉｌｅｙ，Ｎｅｗ Ｙｏｒｋ，１９９０． ８ ｐｅｒｉｏｄｉｃ ｐｏｔｅｎｔｉａｌ ｗｉｔｈ ｉｎｔｅｒｎａｌ ｔｉｍｅ ｄｅｒｉｖａｔｉｖｅ ＯｒＴｒ－ ［５ＪＲ．Ｎ．Ｉｙｅｎｇａｒ，Ｐ．Ｋ．Ｄａｓｈ，Ｓｔｕｄｙ ｏｆ ｔｈｅ ｒａｎｄｏｍ ｖｉｂｒａｔｉｏｎ ｏｆ ｓｔｅｉｎ—Ｕｈｌｅｎｂｅｃｋ ｎｏｉｓｅ，Ａｃｔａ Ｐｈｙｓｉｃａ Ｓｉｎｉｃａ Ｖｏ１．５７．１２。Ｄｅｃｅｍ－ ｎｏｎｌｉｎｅａｒ ｓｙｓｔｅｍｓ ｂｙ ｔｈｅ Ｇａｕｓｓｉａｎ ｃｌｏｓｕｒｅ ｔｅｃｈｎｉｑｕｅ，Ｊｏｕｒ— ｂｅｔ，２００８［白占武，蒙高庆，物理学报第５７卷第１２期２００８年ｌ２ ｎａｌ ｏｆ Ａｐｐｌｉｅｄ Ｍｅｃｈａｎｉｃｓ，Ａｍｅｒｉｃａｎ Ｓｏｃｉｅｔｙ ｏｆ Ｍｅｃｈａｎｉｃａｌ 月］ ２６１ 一