基于web标准的css网页布局应用分析

《基于web标准的css网页布局应用分析》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、基于Web标准的CSS网页布局应用分析宋亭燕佟欧郑小松（沈阳药科大学计算中心沈阳110016）[摘要]：本文主要介绍了基于Web标准的网页制作方法，并以一个实例详细讲解了网页的布局规划、HTML的生成、CSS样式表的控制，最为直观的介绍了div+css的网页布局方式。这种布局方式因实现了网页表现与内容的分离而使网站的维护及更新变得更加方便，从而成为了当今非常流行的网站布局方法。[关键字]：CSSWeb标准网页布局1.引言如今，网站设计已离不开Web标准，离不开CSS布局。更多的网站设计师开始应用Web标准来

2、设计及建立网站，而CSS布局中的表现与内容分离则可以使网站的维护和更新变得更加容易。因此有必要了解如何应用CSS建立一个符合Web标准的网站。2.关于Web标准实际上Web标准不是某一个标准，是由W3C(WorldWideWebConsortium)和其他标准化组织制定的一套规范集合，包含一系列标准。其目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。简单的说，Web标准分成三大部分：结构(Structure)、表现(Presentation)和行为(Be

3、havior)。结构化标准语言主要有：HTML(超文本标记语言)、XML(可扩展标记语言)和XHTML(可扩展超文本标记语言)；表现标准语言主要包括CSS(层叠样式表)；行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。网页设计要符合Web标准实际上就是对网页的结构、表现与行为进行分离——即表现与内容分离。3.什么是CSSCSS（CascadingStyleSheets，层叠样式表）是控制网页布局样式的基础，是能够使网页表现与内容分离的一种样式设计语言。在网页设计中，通过CSS样式表就可以

4、轻松控制页面的布局、字体、字号、颜色、背景以及进行一些初步的页面交互设计。CSS作为一款目前最优秀的表现设计语言，它的优势主要有：可以支持众多浏览器，实现了在众多平台及浏览器下对样式的表现最为接近；真正实现了表现与内容分离；拥有样式设计的强大控制力；具有优越的继承性，最大限度的达到了代码重用，从而降低了维护成本。4.CSS与HTML的结合CSS与HTML的结合使用完美的实现了网页表现与内容的分离。网页设计通常使用CSS来控制网页的样式，其中包括页面的布局、字体、背景等等信息。而HTML则用来罗列网页中的内容

5、，其中包括文本、图片等。CSS样式表可以以多种方式应用到HTML页面当中，但最常用最好的方式是外部连接。这种方式是将CSS样式代码放入一个外部文件中，再由HTML中的LINK元素进行调用。这样做的好处是可以使多个网页调用同一个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。具体的使用方法为：在HTML页面中的head标签下使用LINK元素调用。5.div+CSS的布局方式div

6、是XHTML中的一个标签，以

7、只应用div和CSS这两样东西便可，因此说CSS布局也被称为div+CSS布局。CSS布局实际上就是利用div对象把页面划分为几个区域，区域中标记了将要显示的信息，而这些信息的样式表现则由CSS来完成。图1从图1可以看出，在div+CSS的布局方式中修改网页内容并不会改变样式的表现。同样地，更改CSS样式表也不会影响到网页的布局。1.实例分析本实例以一个个人博客为例，详细分析其制作过程。如图2所示，是网页的最终效果图。图26.1页面布局规划如图2所示，可以将此网页分为以下几个DIV区域：Header：包括了

8、一个Banner图片和导航。PageBody：其中包括了MainBody显示文章等主体内容和Sidebar侧边栏。www.docin.comFooter：显示一些版权信息。图36.2创建一个HTML文件首先创建一个网站的根目录文件夹，命名为“myblog”。接下来可以通过Dreamweaver或是记事本工具来编写网页的HTML代码，这里用Dreamweaver来实现其过程。打开Dreamweaver并新建一个HT