1、基于 Web 标准的 CSS 网页布局应用分析宋亭燕 佟欧 郑小松（沈阳药科大学 计算中心 沈阳 110016）摘要： 本文主要介绍了基于 Web 标准的网页制作方法，并以一个实例详细讲解了网页的布局规划、HTML 的生成、CSS 样式表的控制，最为直观的介绍了 div+css 的网页布局方式。这种布局方式因实现了网页表现与内容的分离而使网站的维护及更新变得更加方便，从而成为了当今非常流行的网站布局方法。关键字：CSS Web 标准 网页布局1. 引言如今，网站设计已离不开 Web 标准，离不开 CSS 布局。更多的网站设计师开始应用 Web 标准来设计及建立网站，而 CSS 布局中的表现与内
2、容分离则可以使网站的维护和更新变得更加容易。因此有必要了解如何应用 CSS 建立一个符合 Web 标准的网站。2. 关于 Web 标准 实际上 Web 标准不是某一个标准，是由 W3C(World Wide Web Consortium)和其他标准化组织制定的一套规范集合，包含一系列标准。其目的在于创建一个统一的用于 Web 表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。简单的说，Web 标准分成三大部分：结构(Structure)、表现(Presentation)和行为(Behavior)。结构化标准语言主要有：HTML(超文本标记语言)、XML(可扩展标记语言)和
3、XHTML(可扩展超文本标记语言)；表现标准语言主要包括 CSS(层叠样式表)；行为标准主要包括对象模型（如 W3C DOM） 、ECMAScript 等。网页设计要符合 Web 标准实际上就是对网页的结构、表现与行为进行分离即表现与内容分离。3. 什么是 CSS CSS（Cascading Style Sheets，层叠样式表）是控制网页布局样式的基础，是能够使网页表现与内容分离的一种样式设计语言。在网页设计中，通过 CSS 样式表就可以轻松控制页面的布局、字体、字号、颜色、背景以及进行一些初步的页面交互设计。CSS 作为一款目前最优秀的表现设计语言，它的优势主要有：可以支持众多浏览器，实现
4、了在众多平台及浏览器下对样式的表现最为接近；真正实现了表现与内容分离；拥有样式设计的强大控制力；具有优越的继承性，最大限度的达到了代码重用，从而降低了维护成本。4. CSS 与 HTML 的结合CSS 与 HTML 的结合使用完美的实现了网页表现与内容的分离。网页设计通常使用 CSS 来控制网页的样式，其中包括页面的布局、字体、背景等等信息。而 HTML 则用来罗列网页中的内容，其中包括文本、图片等。CSS 样式表可以以多种方式应用到 HTML 页面当中，但最常用最好的方式是外部连接。这种方式是将 CSS 样式代码放入一个外部文件中，再由 HTML 中的 LINK 元素进行调用。这样做的好处是
5、可以使多个网页调用同一个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。具体的使用方法为：在 HTML 页面中的 head 标签下使用 LINK 元素调用。5. div+CSS 的布局方式div 是 XHTML 中的一个标签，以这种形式出现。简单的说，div 就像是一个容器，是 XHTML 中专门用于布局设计的容器对象。传统的布局方式是用表格来布局，页面的排版设计也完全依赖于表格对象 table。但这种布局方式无法做到表现与内容分离，一旦要更新页面则需要更改整个表格甚至要重新制作背景或图片素材。这样的布局方式既不符合 Web 标准的要求，也给后期的网站维护带来很大的麻烦。目前普遍流
6、行的布局方式是 CSS 布局，而这种方式的核心对象正是div。对于一个简单的 CSS 布局来说，只应用 div 和 CSS 这两样东西便可，因此说 CSS 布局也被称为 div+CSS 布局。CSS 布局实际上就是利用 div 对象把页面划分为几个区域，区域中标记了将要显示的信息，而这些信息的样式表现则由 CSS 来完成。图 1从图 1 可以看出，在 div+CSS 的布局方式中修改网页内容并不会改变样式的表现。同样地，更改 CSS 样式表也不会影响到网页的布局。6. 实例分析本实例以一个个人博客为例，详细分析其制作过程。如图 2 所示，是网页的最终效果图。图 26.1 页面布局规划如图 2
7、所示，可以将此网页分为以下几个 DIV 区域：Header：包括了一个 Banner 图片和导航。 PageBody：其中包括了 MainBody 显示文章等主体内容和 Sidebar 侧边栏。Footer：显示一些版权信息。图 36.2 创建一个 HTML 文件首先创建一个网站的根目录文件夹，命名为“myblog” 。接下来可以通过 Dreamweaver 或是记事本工具来编写网页的 HTML 代码，这里用 Dreamweaver 来实现其过程。打开 Dreamweaver 并新建一个 HTML 文件，切换到代码视图可以看到如下信息：无标题文档这是 XHTML 的基本结构，将其命名为 ind
8、ex.htm。接下来开始在标签对中写入DIV 的基本结构，代码如下：接下来就是要在各个 DIV 结构中添加文字以及图片信息，这个阶段只是对信息的简单罗列，不需要考虑样式的问题。不同的层叠样式表会展现出不同风格的网站，所以在编写 HTML 的时候不要把样式的问题考虑进去，这里完全是网站内容的体现。6.3 CSS 样式表与 HTML 的连接在 Windows 的开始菜单下打开记事本程序，保存文件并命名为“blogcss.css” （要注意这里的文件后缀名为 css） 。接下来要把 index.html 与 blogcss.css 关联起来，这里采用外部连接的形式，在标签中加入如下代码：宋亭燕s b
9、log6.4 CSS 样式控制为了便于 CSS 代码的编写，可以在 Dreamweaver 中打开 blogcss.css 文件，利用 Dreamweaver中的代码提示功能减轻工作量。首先，先写入一些 CSS 代码来观察网页的框架结构。CSS 代码如下：body font:12px Tahoma;margin:0px;text-align:center;/*页面头部*/#Header width:900px;height:118px;margin:0px auto; background-color:#00CCFF;/*页面主体*/#PageBody width:900px;height:4
10、17px;margin:0px auto;background:#f5d1ae;/*主体内容*/#MainBodywidth:599px;/*当两个 Div 结构左右并列时应减少一个像素的宽度*/height:415px;margin:0px auto;float:left;/*向左浮动*/*页面侧边栏*/#Sidebarwidth:300px;height:415px;margin:0px auto;float:left;/*向左浮动*/*页面底部*/#Footer width:900px;height:65px;margin:0px auto; background-color:#CCCC
11、CC;现在浏览 index.html 页面就可以看到该页的框架结构了，根据页面设计可以进行适当的调整。6.4.1 头部 banner在“页面头部”的 DIV 中，可以再分成上下两个 DIV 来分别显示头部的 banner 和导航，HTML 代码如下：宋亭燕s blog 首页博文关于这里用制作好的头部 banner 图片去代替其标题，CSS 代码如下：#bannerwidth:900px;height:81px;background:url(img/banner.jpg)no-repeat;text-indent:-9999px;/*这里使用负值可以让文本左移到不可视区域*/6.4.2 头部导航
12、上面已经给出了导航的 Div 结构，导航中有三个列表数据，分别为“首页” 、 “博文” 、 “关于” ，相应的 CSS 代码如下：#menu padding:20px 20px 0 0#menu ul list-style:none; /*取消列表项前的点*/margin:0px; /*删除列表块 ul 的缩进*/float:left; /*使导航位于页面左侧*/#menu ul li float:left; /*使所有列表项向左浮动，显示在一行内*/margin:0px 10px; /*给列表项之间留有一定的空隙，使其更加美观*/.menuLine width:1px;height:25px
13、;background:#666; /*列表项之间的分隔竖线*/7. 结束语div+css 的布局模式给网页设计注入了新的生命力，同样的 HTML 代码却可以呈现出数以百计风格迥异的网站。但想熟练的掌握这种布局方式还需要更多的实践经验和学习积累，能够灵活掌握CSS 语言并能设计制作出符合 Web 标准的网页才是学习 CSS 的最终目标。参考文献：1 李超.CSS 网站布局实录(第 2 版)M. 北京：科学出版社，20072 弗里曼(Freeman，E.)等.Head First HTML 与 CSS、XHTML(中文版)M. 北京：中国电力出版社，2008作者简介：宋亭燕（1983-） ，女，本科，助理工程师，研究方向：多媒体教学，网页设计。佟欧（1982-） ，女，本科，助教，研究方向：多媒体教学。郑小松（1980-） ，男，本科，助教，研究方向：网页后端开发，数据库。联系方式：宋亭燕，单位：沈阳药科大学 地址：辽宁省沈阳市文化路 103 号沈阳药科大学 43#信箱邮编：110016 电话：13514209070，13940076458 E-mail：styx-
