基于Web标准的CSS网页布局应用分析.docVIP

基于Web标准的CSS网页布局应用分析 宋亭燕 佟欧 郑小松 （沈阳药科大学 计算中心 沈阳 110016） [摘要]： 本文主要介绍了基于Web标准的网页制作方法，并以一个实例详细讲解了网页的布局规划、HTML的生成、CSS样式表的控制，最为直观的介绍了div+css的网页布局方式。这种布局方式因实现了网页表现与内容的分离而使网站的维护及更新变得更加方便，从而成为了当今非常流行的网站布局方法。 [关键字]：CSS Web标准 网页布局 引言 如今，网站设计已离不开Web标准，离不开CSS布局。更多的网站设计师开始应用Web标准来设计及建立网站，而CSS布局中的表现与内容分离则可以使网站的维护和更新变得更加容易。因此有必要了解如何应用CSS建立一个符合Web标准的网站。 关于Web标准 实际上Web标准不是某一个标准，是由W3C(World Wide Web Consortium)和其他标准化组织制定的一套规范集合，包含一系列标准。其目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。 简单的说，Web标准分成三大部分：结构(Structure)、表现(Presentation)和行为(Behavior)。结构化标准语言主要有：HTML(超文本标记语言)、XML(可扩展标记语言)和XHTML(可扩展超文本标记语言)；表现标准语言主要包括CSS行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。link rel=stylesheet type=text/css href=css_picnews.css / div+CSS的布局方式 div是XHTML中的一个标签，以div/div这种形式出现。简单的说，div就像是一个容器，是XHTML中专门用于布局设计的容器对象。传统的布局方式是用表格来布局，页面的排版设计也完全依赖于表格对象table。但这种布局方式无法做到表现与内容分离，一旦要更新页面则需要更改整个表格甚至要重新制作背景或图片素材。这样的布局方式既不符合Web标准的要求，也给后期的网站维护带来很大的麻烦。目前普遍流行的布局方式是CSS布局，而这种方式的核心对象正是div。对于一个简单的CSS布局来说，只应用div和CSS这两样东西便可，因此说CSS布局也被称为div+CSS布局。 CSS布局实际上就是利用div对象把页面划分为几个区域，区域中标记了将要显示的信息，而这些信息的样式表现则由CSS来完成。 图1 从图1可以看出，在div+CSS的布局方式中修改网页内容并不会改变样式的表现。同样地，更改CSS样式表也不会影响到网页的布局。 实例分析 本实例以一个个人博客为例，详细分析其制作过程。如图2所示，是网页的最终效果图。 图2 6.1页面布局规划 如图2所示，可以将此网页分为以下几个DIV区域： Header：包括了一个Banner图片和导航。 PageBody：其中包括了MainBody显示文章等主体内容和Sidebar侧边栏。 Footer：显示一些版权信息。 图3 6.2 创建一个HTML文件 首先创建一个网站的根目录文件夹，命名为“myblog”。接下来可以通过Dreamweaver或是记事本工具来编写网页的HTML代码，这里用Dreamweaver来实现其过程。 打开Dreamweaver并新建一个HTML文件，切换到代码视图可以看到如下信息： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title /head body /body /html 这是XHTML的基本结构，将其命名为index.htm标签对中写入DIV的基本结构，代码如下：body div id=Header !--页面头部-- /div div id=PageBody !--页面主体-- 　　div id=MainBody !--主体内容-- 　　/div div id=Sidebar !--侧边栏-- 　　/div /div div id=Footer !--页面底部-- /div /body 接下来就是要在各个DIV结构中添加文字以及图片信息，这个阶段只是对信息的简单罗列，不需要考虑样式的问题。不同的层叠样式表会展现出不同风格的网站，所以在编写HTML的时候不要把样式的问题考虑进去，这里完全是网站内容的体