浅析高校计算机实验室安全管理对策.doc

基于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） x表现（Presentation）和行为（Behavior） 0 结构化标准语言主要有：HTML（超文本标记语言）、XML（可扩展标记语言）和XHTML（可扩展超文本标 记语言）；表现标准语言主要包括CSS（层叠样式表）；行为标准主要包括对彖模型（如W3C D0M）、 ECMAScript等。网页设计要符合Web标准实际上就是对网页的结构、表现与行为进行分离——即表 现与内容分离。 什么是CSS CSS （Cascading Style Sheets,层叠样式-衣）是控制网页布局样式的基础，是能够使网页农现 与内容分离的一种样式设计语言。在网页设计中，通过CSS样式表就可以轻松控制页而的布局、字 体、字号、颜色、背景以及进行一些初步的页面交互设计。 CSS作为一款目前最优秀的表现设计语言，它的优势主要有：可以支持众多浏览器，实现了在 众多平台及浏览器下对样式的表现最为接近；真正实现了表现与内容分离；拥有样式设计的强大控 制力：具有优越的继承性，最大限度的达到了代码重用，从『U降低了维护成本。 CSS与HTML的结合 CSS与HTML的结合使用完美的实现了网页表现与内容的分离。网页设计通帘使用CSS來控制网 页的样式,其中包括页面的布局、字体、背景等等信息。而HTML则用来罗列网页中的内容,其中包 括文本、图片等。 CSS样式表可以以多种方式应用到HTML页而当中，但最常用最好的方式是外部连接。这种方式 是将CSS样式代码放入一个外部文件中，再山HTML中的LINK元素进行调用。这样做的好处是可以 使多个网页调用同一?个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。 具体的使用方法为：在HTML 面中的head标签下使用LINK元素调用Klink rel二stylesheet type=text/css href二css picnews. css / div乂SS的布局方式 div是XHTML中的一个标签,WdivX/div这种形式出现。简单的说,div就像是一个容器, 是XHTML中专门用于布局设计的容器对■象。传统的布局方式是用表格来布局，贝而的排版设计也完全依赖于农格对象tableo但这种布局方式无法做到表现与内容分离，一一日?要更新页面则需要更改 整个表格其至要重新制作背景或图片素材。这样的布局方式既不符合Web标准的耍求，也给后期的 网站维护带来很大的麻烦。冃前普遍流行的布局方式是CSS布局，血这种方式的核心对象止是divo 对于-?个简单的CSS如局来说,只应用div和CSS这两样东西便可，因此说CSS布局也被称为div+CSS 布局。 CSS布局实际上就是利用div对彖把页面划分为几个区域,区域中标记了将要显示的信息,而 这些信息的样式表现则山CSS來完成。 div+CSS 布局 CSS CSS样式表 表现 内容 图1 从图1可以看出，在div+CSS的布局方式中修改网页内容并不会改变样式的表现。同样地，更 改CSS样式表也不会影响到网页的布局。 6.实例分析 关于关于我文章文策分类? ITXL/CSS/XML XSL宋事勲.中CB?il宁沈阳?P■设计”? 关于 关于我 文章 文策分类 ? ITXL/CSS/XML XSL 宋事勲.中CB?il宁沈阳?P■设计”?MM ■于ItlHNW犬学计鼻中心.81力^WebBM 配合形成具体的符合VebPace的设计 佝快速制作分斥高品横PSD. PM的能力 能迅速将PSD、PNG的内容构恩成di”c”或Stable等HDIL代码 Flash