采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点。��H+O3 7xE4_ =
| ykb*.vy i Ks(E
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：= )X?J gvA2b {Ib
1：表现和内容相分离h^�A_X8$2&-Gce$�
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。ZOpHkxoX@Ysr%2o
2：提高搜索引擎对网页的索引效率d0sl^OG[ i+FQV&A
用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。T"-;n?
yffWnSnt
3：提高页面浏览速度2�vn=f}@\@i$N,x
对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。B 0_&HdWe]v/lG;
4：易于维护和改版$T&gyUmR2!M4_
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。6 _Y@KdP?Q9|7
从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。_Cr 5U }T%QmT$|�
CSS+DIV所以成为目前网页布局主流，在我看主要核心原因，其实不仅仅是其符合W3C标准，而是通过采用CSS+DIV，网页工程从此： =zD5^
D5~l}
G\
&\Wg-zY`y]wQcXT=
表现与内容分离E_$FXShM~s xMf$
Zc_[p/w( � B= xS
现在div+css已经很风靡了,各大网站都纷纷重构为div+css模式,网易就是最好的例子,采用层和CSS后,给用户最直观的体验就是网页打开速度快了很多。能给用户好的体验，为什么不做呢？= =H0o
yWif2�}W|=
从SEO的角度来分析用DIV+CSS进行网站制作或重构的必要性: =lk9 # [ |%?mLa"
用div+css构架的网站容易向W3C 标准靠拢，网站是否符合W3C标准是搜索引擎给网页排名的一个影响因素，特别是YAHOO，它看的比较重。 b9oQ{ BiTp-,KR(
网站源代码简洁，除了几个div,ul,li,dl,dd,dt之类的标签外，几乎不用其他标签，这样，是网站内容完全裸露在搜索引擎的蜘蛛面前，便于抓取关键内容，增大关键内容的页面的比重，从而为排名因素增加比重。 !_vxq}tK( 9~
4 8"
可轻松做到关键内容先被蜘蛛读取。一般的站点都是左中右三栏式，页面的主要内容是在中间一栏，而蜘蛛读取页面内容是按照从上而下，从左至右的顺序进行的，如果你的左栏内容比较多，那就麻烦了，你的页面主要内容权值就会下降。而用div+css就可以把主要先写在前面，在写左栏，右栏内容，然后通过CSS一定位就可以了 *3I){+H#POx7DW%~!G]
方便调整网站结构布局。对于常用的表格布局，若想改下布局，可谓牵一发而动全身，网站层结构如果设计的合理，可以用CSS很轻松的改变网站的表现，这就是结构和内容，行为的分离。如果网站结构定期改动，自然对搜索引擎的蜘蛛吸引力不小的。V3`K FArRO2[zkhT\{2
一个用层和css做好根基的网站，以后的优化工作自然会省力不少的。 ^
.zHmL`E M_a*o
问：/KVLwFP6C
dcw_5!N
L6eM `M0'\ZJSaJD\
1、简介：为何使用表格排版是不明智的？]vpk hA|o@ @P7w1
H
表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。Bm9&F'YzL4xop=JA,
2、概览：这对我有什么用处？0:P* ?]3
!pVGC9W@
它会：Xnn59zDV{+:}P
使你的页面载入得更快(表格要加载到</table>才能显示表格内的内容，而CSS+DIV则不必要。当我们发现一个网站半天才突然显示出来的，基本上就是因为用了大大的的TABLE相互嵌套引起的。如果用CSS+DIV，我们会非常明显的发现，网站一部分一部分的显示出来，当网速慢时，效果非常的明显。0)#^JeOWhQQ:|3?
U2qab3? !q?lg}Z
降低你的流量费用 因为CSS代码可以缓存，所以只下载一次就行了。并且，DIV本身的写法代码量就小于TABLEGfpVt#
!GC=\S ?d/=
让你在修改设计时更有效率而代价更低 H5%
5?=KB
wXV4kGJ0
':;DZ�r)1QH?G�g5!
帮助你的整个站点保持视觉的一致性AUEL(Y33Qq'@\
@Ia5
zBxFa=|;tafH j
让你的站点可以更好地被搜索引擎找到CtaP=C\H=6\g'9 [?=^X
Ske8{2cHLc
H`GE+
使你的站点对浏览者和浏览器更具亲和力,bAYHN]k e(kvqd67jf
MNQ#2-4]-1?aO`NL
3、表格带来的问题? 7+ RI1)?af@
把格式数据混入你的内容中。^ H^)5}=4F[ _Vo 7/
这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。^%Luz_LP?#0C=j
带宽并非免费。kD=T?�_K@uBsJ
这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。_N oO{ty)V[R!E
这还使我们保持整个站点的视觉的一致性极难，花费也极高。~]=\ u1n=7-S LEv&
基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。S1kxw{Wc?B+rb91
4、过渡性的设计GiWm@="Z^X|2yt
使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。EjNd5~
B %W,0jp_K
使用 link 和 @import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。2o~80M�} /+z=;?8W
<link href="/basic.css" rel="stylesheet" type="text/css">{k" !)t&4r! %;31@
<style type="text/css" media="screen"><!--unD:HGesh)kj|0Jx .
@import url(modern.css) screen;VC%~+U=v5 Gl$_@J
--></style>TL[�wY{tA%/%_X:##;
5、结构化标记：所写即所想，所想即所写?o$bu0?$j[v.dDS
即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。q*bM+-d?})t�J oHCt
我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。Pf@8Yt *B S6m
我们用 <h1> 标记来标示最重要的头条；次一级的条目则用 <h2> 来标记，以此类推；而段落则放在 <p> 标记中。Ti8635;_B{G5E�*X
这就是我们称之为“结构标记”或“语义标记”的东西。 X * %cK
ub*`o'g+
你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。*@]'?i$@!K? [~,][
当你把某个对象设为斜体时，大概要么就是想强调它，要么是想 引用某个书中标题吧？ 如果是前者，应该用 <em>；如果是后者，其实得用 <cite>。 [Y69q7:_O7M9(
如果某个对象被标记为粗体，事实上它应该被标记的是， <strong>。=pi8:
v?u|a\$wy
如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头，会不会是某种在你的站点中出现过的class (类型)？在上面两种情况下，你都应该用 CSS 替换 <br>。#ni t
u\#SKH PK
P8
.foo {display:block})L 5 Yg'28a 0 sQ
考虑你需要导航的内容是一些无序的链接这种情况：uG3�?1_1#1/O!\R)
用 <ul> 标签来编辑它们。2b
;
p}lP-4!M[331
link1-}95 !2;E1fwX#CU[Q
link229?() �;:eFrg/W
link3CRcP#pq8?QW/A6jS
link4_Z&G(,EF6
6luTe_C%
link5%r?&hKg 1AYvHOZ
水平导航条)`~2LKKno&l$c@
我们可以用 CSS 来控制这个列表显示在网页上的外观。5'qkN)&;1.1o7OO7 �'
通过使用 display:inline 我们可以创建水平导航条。[v V\W;*E:$ :yw
link18d(?*T's~g 9jMMn
link2A6&cz^u@&9g~MBu}xcE
link3_MU'(aJ
5k92w'u
link4-PqH_bn ?IfNlG
link5mR=b#) [T XhavN7
这是上面这个导航条用到的代码：
R=G=/ W p2)#NV :F
#nav1{ys8B/�
t:t;=
&Z]
margin-top: 1em;KUL& fhK .zXU
j{
margin-bottom: 0.5em;,h^1ulW[TW tMU;eJ#
}`Ni C�_7(d e" S
J
#nav1 ul {/+c|9 g~@R3^&
background-color: silver;"O WCL!Md�],*,N P
text-align: center;b N(_mn:x(T:XmL
margin-left: 0;1p|97y=Ek9.NP7t
padding-left: 0;B?)h6fXte}L*P-J
border-bottom: 1px solid gray:9vb+Bb1. =wZ/:;
}Xub $ H2C]7EA4 5/
#nav1 li {uOA$$$AIjPYI1F=uP#.
list-style-type: none;k%:hk9fO/1Q m})
padding: 0.25em 1em;,dDW!lw-V1]?(\!
border-left: 1px solid white;*WI`Qsf\}tNxi~_U?^
display: inlineK 6o]+i|5_
Aq
}LOVI.BP{W( C;
f7yK
#nav1 li:first-child {$!I.D0v;~veO@XnK.
|Q
border: none;&!ZlSDMg"0z5PZ0K?
}dheo[2]4;:Y EZVIu
垂直导航条hWkEJ{@ ON?X$r n*`
link1G0"#d|{|OP\$B]##`
link2K y"\0'i*xn" QZ
link3% -jicKmt,QVc�ur3|
link4W TI|1uV#6sGD lc}c
link5nn6%|&Q0iS?t+:I^w^
这是垂直导航条的代码：?nQ
1P+lJ c"] $t
#nav2 {j|;UYNh.FT!}TkN@R
background-color: silver;?
^ [BmCT!@NzKQlL
border: solid 1px gray;q,SEnm]?! y ) K8c
width: 8emdN]zT*=t^D52 "TG
}1k 2 _Eu)c
#nav2 ul {./ 4 YO6""%%E_^i
list-style-type: none;#[vW1l\C$ ZPoG
margin: 0;sKG k@.qz:q*}CKOT
padding: 0;oOJ@%=W8�"*U"DCC
border: noneeSU" a=;m v
|hrl
}(NJjH
Y�bN #d#�s*
#nav2 li {+
Yz8SAn
)%U$
margin: 0;:e3b ?Q:^) OB5o#
padding: 0.25em 0.5em 0.25em 1em;q=NwA
SGTom??Rt:;4l
border-top: 1px solid gray;{%/0%U1qHp$_&~!.'
width: 100%;JF=Q/Z6MR7gUU8
display: blockA7hK3fE]yul8Z .a5$
}/jVsQ[ Hi6x'[==wL
html>body #nav2 li {q5k='fCO|[Jg*'
width: auto;{| /jWjL^q5iay IR
}
e})D/qC:[@2~e4Xm
#nav2 li:first-child {C3"p2}#qD+ |oeOHz
border: none&SR}[jZZyl6l&
}:?jtBlalA3=L509l
6、从玩弄表格技巧到遵循 Web 标准：通盘考虑=z}emn@ ?) tgZT
如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。B\{,&*}=JWNe"~lqq_
主导航条16J(Ec AXZdMUl1
子导航条U-N ad?k^8r
页眉与页脚?iWsIFieI#g kB'
内容$ %p6gfn "kZ d,z5H
相关信息F6 gR_F}S4Z$K!9=
其他J6((5Z {K=~2'*9
注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。"g0oX?_WcvQ^QE?)\�
一旦你分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。47 Z0x[5y05 * l`i
作为一个完美主义者，消灭所有的 <font> 标记和间隔 GIF 吧！;!ZE6hw6)Xn :j=7
同样的，一并搞定 <b> 和 <br> 标记。Kr"LA=/ %i'[
Dy
去除表格中的那些外观标记 (bgcolor, background, 等等)。k]JtzUY: 1
__f9
把纯粹用来表示外观的那些 CSS 调用 (比如 <span class="header">) 改成结构化的标记。vMigPdPN^ TOnzX
7、把描述外观的标记改为描述结构的标记_5[@�
86p
你可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览器里打开这个页面，然后把文本复制粘贴到你的 HTML 编辑器里。�5?lyg.Z/#XFAg
关键还是要用结构化的方式来思考！仅仅把 <b> 标记替换为 <strong> 是远远不够的。HSDs5x'ks fCU=a:X #
最重要的条目是哪个？用 <h1> 来标记它。次要一点的就用 <h2>，依此类推。用 <p> 来标记段落。把导航条标记为无序列表。`HM?C h3-+1Um0z?c
选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional，除非你是此道高手，否则别用 XHTML strict。)38avZ=~6uxI�8t) DuW
8、把你的页面合理分布在的 div 中B)Rr}]]S
4*Ncz+K
把你的主导航条放在一个 id 属性设为 mainnav 的 div 中，子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式：<div id="footer">，至于整个页面，它被放在 <div id="content"> 里边。c Z6O?%Lg 9 U/
%``
即便现在它还不怎么讨人喜欢，但只要你开始给样式表添加规则，它就会马上变得可爱起来。'rJOqneqVzRxrSw
?jd
9、是开始自己编写 CSS 的时候了ZG+6Gtcl! LHo 0Ml):d
首先，给每个 div 设置一个边界。例如： div {border: 1px dotted gray; padding: .5em} 这可以帮助你完完整整地看到里边的内容，也不再需要卷动屏幕了。#+] (\r%w{V 7 P-
首先为以定义的元素编写 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)JQ5X^x:h}b�Isg(+
尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导航栏的 div 中的列表项。f 8 w@pu| 0S)];i
在尽可能多的浏览器下进行测试，毕竟你可以让朋友帮助你用它们自己的浏览器测试。[p
^uQ)SU5gxww9 [版权归原作者及coolcxm共同拥有，转载请注明出处]
|
