毕业论文使用div+css开发个人网站

第二章 DIV+CSS详解

第一节 DIV+CSS简介

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介：

① 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

② 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

③ 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

④ 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

⑤ CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

⑥ 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

5

第二节 级联样式表简介

有三种方法可以在站点网页上使用样式表： ①将网页链接到外部样式表。 ②在网页上创建嵌入的样式表。 ③应用内嵌样式到各个网页元素。 ④每一种方法均有其优缺点：

当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 — 中作一次更改 — 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。

使用内嵌样式以应用级联样式表属性到网页元素上。

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

第三节 DIV+CSS布局的优点

一、利于搜索引擎蜘蛛爬行

根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，缩减页面代码量，可以提高页面浏览速度。而且也有益于蜘蛛爬行到网站深处。

6

二、易于修改

提高易用性，使用CSS可以结构化HTML，可以轻松控制页面的布局。CSS编写容易，可以像写html代码一样轻松地编写CSS。在一般情况下，div+css布局的网站，都是将html页面和css文件分开的，div+css的特点就是能将网页的内容和表现形式分离，将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。网站改版方便，只要修改CSS文件就可以重新构建网站。所以，假如你要修改网站整站布局的话，一般只需要修改css文件里的的个别属性即可，而这种特点是table不具备的。可重复使用，编程完成多处使用。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

三、减少网页加载时间

缩减页面代码量，可以提高页面浏览速度，在几乎所有的浏览器上都可以使用。前面就提到过，div+css是将css文件和html文件分开的，当用户点击网站时，是在同时下载css文件和html文件，所以可以提高打开网页的速度，而table是必须以标签开始到结束才能显示网页内容。另外，div的html文件则是边加载边显示，这样是不是提高了用户体验? Google已经将网页加载速度列入了排名的因素，尽管这个因素只能影响排名的一小部分，甚至可以忽略，但是有利于seo的办法，我们为什么不用?

四、代码精简

如果使用DIV+CSS布局，网页的页面代码精简，使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

7

五、相对表格的嵌套问题

在一些文章是称，搜索引擎一般不喜欢抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的也不能完全肯定是不是，就目前掌握的情况来看，在解析Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，解析时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

六、搜索排名的影响

页面结构简洁清晰，容易被搜索引擎搜索到完成了对网站优化工作。如果我们在设计时运用于基于XTHML标准的DIV+CSS布局，在设计完成要尽可能的完善到能通过W3C验证。事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但至少这样不会有什么坏处。方便搜索引擎的搜索，用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价。

第四节 div+css布局方式

对于网站DIV+CSS设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将DIV+CSS作为了业界标准。

如果用DIV+CSS来构建和美化网站，那么DIV就是整个网站的骨架，CSS样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从DIV的布局开始。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样

8