基于XHTML+CSS布局网页技术的

为您写信息技术毕业论文和职称论文提供关于信息技术学士学位论文范文,与基于XHTML+CSS布局网页技术的相关论文范文数据库,包括关于信息技术及电子商务及操作系统方面的论文题目、提纲、开题报告、文献综述、参考文献的大学硕士和本科毕业论文，是免费优秀的信息技术论文范文。

【摘 要 】本文首先介绍了XHTML设计标准与HTML、XML语言之间的关系,分析了CSS技术和DIV技术的特点,将传统的HTML标准下的TABLE布局的特点与CSS+DIV布局方式进行了对比,通过一个互动社区网页讲解使用CSS+DIV布局网页的方法.

【关 键 词 】XHTML,DIV,CSS,布局

一、HTML与XHTML的区别

HTML是一种用来制作超文本文档的标记语言.用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台.使用HTML语言描述的文件需要通过WWW浏览器显示出效果.HTML是一种纯文本语言,HTML代码在运行时不用事先编译为二进制代码,而是直接通过网页浏览器逐行解释执行.

XHTML是The Extensible HyperText Markup Language（可扩展超文本标记语言）的缩写.HTML是一种基本的Web网页设计语言,XHTML是一个基于XML的置标语言,XHTML是一个扮演着类似HTML角色的XML,从本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性.

二、CSS的介绍

CSS是用来进行网页样式设计的标识语言,与HTML一样属于解释性语言.通过设计样式表,可以统一控制HTML中各个标签的显示属性.CSS样式表可以使用户更有效地控制网页外观,精确指定网页元素位置,创建以及观察特殊效果.

使用CSS,可以将网页结构和内容与表现形式分离开来,网页结构和内容被存放在HTML文档中,而用于定义表现形式的CSS规则则被存放在另一个CSS样式表文件中.

三、Table和CSS+DIV布局页面的优缺点

使用表格进行页面布局会带来很多问题：

（1）把格式数据混入你的内容中.这使得文件的大小无谓地变大,而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费,

（2）这使得重新设计现有的站点和内容极为消耗劳力,

（3）这还使保持整个站点的视觉的一致性极难,花费也极高,

（4）基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力.

而使用CSS+DIV进行网页布局,它会：

（1）使你的页面载入得更快,

（2）降低你的流量费用,

（3）让你在修改设计时更有效率而代价更低,

（4）帮助你的整个站点保持视觉的一致性,

（5）让你的站点可以更好地被搜索引擎找到,

（6）使你的站点对浏览者和浏览器更具亲和力,

其优点如下：

（1）内容和形式分离

网页前台只需要显示内容就行,形式上的美工交给CSS来处理.生成的HTML文件代码精简,更小打开更快.

（2）改版网站更简单容易了

不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版.

（3）搜索引擎更友好,确实能够对SEO起到一定的帮助.

通过DIV+CSS对网页的布局,可以让一些重要的链接、文字信息,优先让搜索引擎蜘蛛爬取.这对于SEO也有帮助.

四、通过实例讲解TABLE+DIV+CSS布局页面的使用

（1）整体布局与公共CSS定义

通过分析页面布局可得页面主要分5大块,顶部Logo、导航条N、Banner、Content、Footer,如图1所示.

图1 网页结构

这样HTML就很容易写出来了

<,div id等于"Logo">,<,/div>,

<,div id等于"N">,<,/div>,

<,div id等于"Banner">,<,/div>,

<,div id等于"Content">,<,/div>,

<,div id等于"Footer">,<,/div>,

这5块的宽度都是900像素,并且都是水平居中的,其相应CSS代码如下：

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin：0,padding：0,}

#logo,#N,#Banner,#Content,#Footer{width：900px, margin：0 auto,}

（2）布局Logo栏

首先我们需要把页面上的logo给切割出来,其大小为173*46,名字为：logo.gif.

一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了,代码一般会这么写：

<,a href等于"#" id等于"logoLink">,<,img src等于"#" />,<,/a>,

不过笔者要介绍另外一种方法,将图片做成链接a的背景,同样可以达到上面说的效果,并且HTML代码就会更精简,少了<,img...>,,看看下面Logo栏的页面代码,红色的为将logo.gif作为背景的链接

HTML代码：

<,div id等于"Logo">,<,a href等于"#" id等于"logoLink">,<,/a>,<,/div>,

CSS代码 #Logo{height：80px, }

#logoLink{

display：block,/*将链接a转化成块状元素,这样才能显示出背景*/

width：17x,height：46px,background：url（../Images/logo.gif） no-repeat,

float：left,margin-top：20px, }

好到这里,头部含有logo的区域已经写完.

（3）布局导航栏N

HTML代码：

<,div id等于"N">,

<,ul>,<,li>,<,a href等于"#">,HOME<,/a>,<,/li>,

<,li>,<,a href等于"#">,PHOTOS<,/a>,<,/li>,

<,li>,<,a href等于"#">,ABOUT<,/a>,<,/li>,

<,li>,<,a href等于"#">,LINKS<,/a>,<,/li>,

<,li>,<,a href等于"#">,CONTACT<,/a>,<,/li>,<,/ul>,<,/div>,

CSS代码

#N{height：42px,}

#N ul{height：42px,list-style：none,background：#56990c,}

#N ul li{height：42px, float：left,}

#N ul li a{

display：block,height：42px,color：#FFF,padding：0 10px,

line-height：42px,font-size：14px,font-weight：bold,

font-family：Arial,text-decoration：none, float：left,/*这句一定要加,不然在IE6中会出现,这种效果*/}

#N ul li a：hover{background：#68acd3,}

（4） Banner布局

这个就更简单了,有两种方法

第一种：将图片作为<,div id等于”Banner”>,<,/div>,背景

第二种：直接将图片插入<,div id等于”Banner”>,<,/div>,之间,代码：<,div id等于”Banner”>,<,img src等于”” />,<,/div>,

大家可以根据需求和实际情况选择用哪一种,在这里我们用第一种,HTML代码没有什么变化,只需要在CSS里面定义一下就OK了.

CSS代码：

#Banner{height：290px,background：url（../Images/banner.jpg） no-repeat,}

（5）内容Content板块布局

从图片上我们看到,内容板块分为左右两个区域,左边ContentL宽度是600px,右边ContentR宽度是300px,但是由于我们要将内边距设置成15px,所以ContentL的宽度在CSS中就要设置成600-15*2等于570px,而右侧的ContentR则需要设置成300-15*2等于270px,

HTML代码：

<,div id等于"Content">,

<,div id等于”ContentL”>,此处为左边ContentL<,/div>,

<,div id等于”ContentR”>,此处为左边ContentR<,/div>,<,/div>,

CSS代码：

#Content #ContentL,#Content #ContentR{float：left, padding：15px,}

#Content #ContentL{width：570px, background：#f0f0f0,}

#Content #ContentR{width：270px, background：#d3e7f2,}

（6）Footer布局

五、总结

综上所述,笔者认为不能太迷恋DIV+CSS强大的功能,它作为制作网页,美化网页的一个重要辅助是很强大方便的.可以弥补TABLE制作框架和表格时的很多不足和美工上的缺点,但是完全只用它来做,太费时费力,做的页面也能说是标准,很多用Table就可以简单实现的效果,非要用DIV去实现,不仅使CSS文件相当的臃肿,而且使页面加载速度变慢.对于中小型网站长来说,笔者觉得用TABLE+DIV+CSS是最好的组合,也是最省时省力的办法.