采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点。8OHY N5Pw+4!]\ k@
p&FT:Jp9..]
[ /kop
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：!kV@;2MU-o|5ddp(A�
1：表现和内容相分离|WsNxlk8nF9!|.kq
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。{!{BF)JA' 6f"�Ju
2：提高搜索引擎对网页的索引效率/ERt Ve ] ~Eb0k_M
用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。q A70J(]GIU f?&Q
3：提高页面浏览速度
/iwouO}d $QBa'
对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。,s:K9�g%%=DUa$%YL
4：易于维护和改版 ^!fx
YV8=&u 4-4
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。8,9fE&?
O}R. qb[&[
从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。R :WK?n=Kix2#S.
CSS+DIV所以成为目前网页布局主流，在我看主要核心原因，其实不仅仅是其符合W3C标准，而是通过采用CSS+DIV，网页工程从此： Gll[ n'o{�j],4Rl
(.,0Bj qB*79Os
表现与内容分离2mg-v�BW mm yng&
@f5?;g.Q{d, S#6N Y
现在div+css已经很风靡了,各大网站都纷纷重构为div+css模式,网易就是最好的例子,采用层和CSS后,给用户最直观的体验就是网页打开速度快了很多。能给用户好的体验，为什么不做呢？AA2lhaLC3]po,
从SEO的角度来分析用DIV+CSS进行网站制作或重构的必要性: ?;.{6XU+Zs
QyU=/
用div+css构架的网站容易向W3C 标准靠拢，网站是否符合W3C标准是搜索引擎给网页排名的一个影响因素，特别是YAHOO，它看的比较重。 e
Ch "4qzZ
doP
网站源代码简洁，除了几个div,ul,li,dl,dd,dt之类的标签外，几乎不用其他标签，这样，是网站内容完全裸露在搜索引擎的蜘蛛面前，便于抓取关键内容，增大关键内容的页面的比重，从而为排名因素增加比重。 ~rjk'MZoO YV&Us
可轻松做到关键内容先被蜘蛛读取。一般的站点都是左中右三栏式，页面的主要内容是在中间一栏，而蜘蛛读取页面内容是按照从上而下，从左至右的顺序进行的，如果你的左栏内容比较多，那就麻烦了，你的页面主要内容权值就会下降。而用div+css就可以把主要先写在前面，在写左栏，右栏内容，然后通过CSS一定位就可以了 8ya EQUKxAMS8@:
方便调整网站结构布局。对于常用的表格布局，若想改下布局，可谓牵一发而动全身，网站层结构如果设计的合理，可以用CSS很轻松的改变网站的表现，这就是结构和内容，行为的分离。如果网站结构定期改动，自然对搜索引擎的蜘蛛吸引力不小的。nclL| _z
?*B[cn~
一个用层和css做好根基的网站，以后的优化工作自然会省力不少的。 q(R ;^ y'2lgUh+#O 4X
问：W&A)7YavIS ]?opf
ttL_~0$M'`Bd )
1、简介：为何使用表格排版是不明智的？ |
aB ?a/Ho7\OEh
表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止，表格仍然主导着视觉丰富的网站的设计方式，但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法。x7PVLgU'Wk{@
m,*u_y
2、概览：这对我有什么用处？bZM`a T p huKh
它会：.&t"(]iv%2{(}X:
使你的页面载入得更快(表格要加载到</table>才能显示表格内的内容，而CSS+DIV则不必要。当我们发现一个网站半天才突然显示出来的，基本上就是因为用了大大的的TABLE相互嵌套引起的。如果用CSS+DIV，我们会非常明显的发现，网站一部分一部分的显示出来，当网速慢时，效果非常的明显。H? E5]Qg#p#Kv
{{~)b _T7se�|;_m
降低你的流量费用 因为CSS代码可以缓存，所以只下载一次就行了。并且，DIV本身的写法代码量就小于TABLE;Qx-1u['9v[pK/Y
让你在修改设计时更有效率而代价更低nB\wWZ?=S h}O)ct8
}N= 8\|0)v9Y,/p& [*
帮助你的整个站点保持视觉的一致性cxzz4r-s5O +
z71,y
]WKtS7?c=pN"Y0o=(p
让你的站点可以更好地被搜索引擎找到C \'eA fG*L�&'(
6?0X?L/M!Zim8
使你的站点对浏览者和浏览器更具亲和力T`d nX\tWI5^vnd
or +%[hp :
m!f
{kK0+
3、表格带来的问题Y0Ln s Lf,+"j*Z
把格式数据混入你的内容中。%mAk)h*a\@pC4]IF!W
这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。51mB!{BI&HD%7L.:8
带宽并非免费。0jh#1Ava[7^p~J9.A
这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。*w1uH39@w#(w KTa
这还使我们保持整个站点的视觉的一致性极难，花费也极高。EcQ ?zvYer9k;6:
基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。TCq*+Q8Vu1~&(j
4、过渡性的设计 /,z51ov@h;W[QY
使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。Xtye$p*z kG M?%49
使用 link 和 @import 来载入样式。前者用于早期浏览器，后者给现在的浏览器。V9} H[5)ca^ zn_A7
<link href="/basic.css" rel="stylesheet" type="text/css">UrMc�iKG$uA6p,
<style type="text/css" media="screen"><!--&rum]~\43 3"4UUofg
@import url(modern.css) screen;?nsj-$ZadPhGZkQmj
--></style>#V['_d?Q,x2|dyV
5、结构化标记：所写即所想，所想即所写X fr?%5mD}Al\0_
即便书写 CSS 很简单，使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。Arh!}MCi=h\UiBl`
我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。\X((7U076s! rf1 ~Z
我们用 <h1> 标记来标示最重要的头条；次一级的条目则用 <h2> 来标记，以此类推；而段落则放在 <p> 标记中。_hi/LXa
9Ix+D{
这就是我们称之为“结构标记”或“语义标记”的东西。M??sFeX*s_Rsr_
你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。}~ !|dz--xmgcL4jv\C
当你把某个对象设为斜体时，大概要么就是想强调它，要么是想 引用某个书中标题吧？ 如果是前者，应该用 <em>；如果是后者，其实得用 <cite>。 ZYnNK(n"ffH E
q
如果某个对象被标记为粗体，事实上它应该被标记的是， <strong>。ouya&W\?{$=3"D V
如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头，会不会是某种在你的站点中出现过的class (类型)？在上面两种情况下，你都应该用 CSS 替换 <br>。NCg%FLb^8Y %SjDM#
.foo {display:block}Xwy i _x y"aRnao
考虑你需要导航的内容是一些无序的链接这种情况：ly[N/Y
5kV&]=(}~K
用 <ul> 标签来编辑它们。OL~
hR\?HG3,'=?jaN
link1[IUgdK}K4?#t#f_=4
link2x kxPF/d|C8rt\ gQ
link3d4@a}cKg1.vX!7u08.
link4{|^E?A
OvS}l_=\
link51%"W pXjJ egraX;v
水平导航条qs+Kp2e^.?"riLe
我们可以用 CSS 来控制这个列表显示在网页上的外观。mTh [6]~57TMLCT4 \
通过使用 display:inline 我们可以创建水平导航条。= q)tR/ =0a,MGk
link1$8j?UHjN\JswfBnu'%
link2LnXd7WFCDO $
X�d=_
link3OrGI2m=+E^H(" ?
link4Q]Pf2 }-U2'=E;~=�s
link59l )88FC[WRo`M�
这是上面这个导航条用到的代码：=XE|4m9#Q�b$k:o@wol
#nav1{V *!_X ggO"Pc MTnH
margin-top: 1em;L#O-mAhETn!
margin-bottom: 0.5em;-*YUY ?
=V}Dt)6);
} B8 S(;!2W:p
#nav1 ul {3]4 *tw@a2o2R4a
background-color: silver;9wb,DPZ ?o F a6rC
text-align: center;EYk&i3?= z01_z
margin-left: 0;}2~55_/)]q4 e2o1
padding-left: 0;ZxX=y!L62*6=|^R=a
border-bottom: 1px solid gray#H+G}03`U/QS/'xTho
}vrixEjmFnW6%BDjH8b0
#nav1 li {fQ7H&S=`rCrxC/\j;
list-style-type: none;1n2ZHnh1Gh64 uMC
padding: 0.25em 1em;-x�P z]B G
?i?Xs
border-left: 1px solid white;Au;}l~Vi;I6]p
display: inlineQXO{T Wr,rx5!kQ=,
}9?f�Ub0!jrh8,6 7{ z
#nav1 li:first-child {&S5| m Rn[*o&(?9�
border: none;ip*C{AB}gU ?='X(fL
}&9OPZI$49F&mzcMR
垂直导航条H, xGZX5j=B.EMt
link1;+)|s6
qkbgVh
8+.S
link2_rq
E9GUUqxn'�e}
link3RWPM3BJ)_K&j(Pk
link47vl$_g"Lc *
link5'=m?y5Z!+IsFT)eX{X
这是垂直导航条的代码：rI] T]U j[A;pYZ
#nav2 {j1z~,kix&|Q�^7/8bS
background-color: silver;
9E*U pje/+J*K?
border: solid 1px gray;(}=w49 q84tV\"K
width: 8em;!eq*n+2-M6UD
} /3C7i~;- jd pe
#nav2 ul {r=AC0@Nx-\~?_R&
list-style-type: none;:/[mHz93u XgA7�z
4
margin: 0;Z ':fK1ry?3zL -f
padding: 0;;wYVs4"Zb�?\Vd`1
border: noneDliMi2Yx0~
}wE{ol
}x`\i
~!rNeX,%s
#nav2 li {c} |/ ;uxO^M&;WOzWd
margin: 0;(KrV b?O|;:HR jf
padding: 0.25em 0.5em 0.25em 1em; G.\�C_Yu%Awzs
border-top: 1px solid gray;McQ0t}u 6n D uqiTj
width: 100%;{Hsv=ng5_%=AG =jS
display: block)7l&
`29C{)y#x?
}Z�SA=r}5y1}6hSn0
html>body #nav2 li {0O2}=SM%gz]bE ~/m
width: auto;YdW@u
xx3K:^V
}z;!K3b\-v�mVZo?EL
#nav2 li:first-child {RE2m2o!\z, By:[
border: none+;6u}?, '*o[u)=
}s?/ h;L6x%\8~_ ?b
6、从玩弄表格技巧到遵循 Web 标准：通盘考虑H3sflVaAcZPTqu
如果你已经把站点的内容分好了类，那么是时候分析每个页面，把它们按照逻辑关系进行分解了。.-Id El_'b/1v`,]YZ
主导航条N2Jq U^4;_?gd
子导航条TH4R(1v
a.3Whqx|:S
页眉与页脚i|]&]�Z:'/ABx!YSWkf
内容8WI:2 }BjB Sm:Wm{
相关信息+$`pL i0G5o=Xi,?
其他LKpO}!Yf.@X2k:o
注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。M ,fi&,{)&Hz#d$
一旦你分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。sem[yy iNFEu.
作为一个完美主义者，消灭所有的 <font> 标记和间隔 GIF 吧！II3iH"B x{ L ?
同样的，一并搞定 <b> 和 <br> 标记。Os[w?MR% rs=je?
去除表格中的那些外观标记 (bgcolor, background, 等等)。*v|d6NV*_F8?
pn $
把纯粹用来表示外观的那些 CSS 调用 (比如 <span class="header">) 改成结构化的标记。&=UTnn=@Y?3?\W+:dwE
7、把描述外观的标记改为描述结构的标记eIqTD+? =dRR},pMq
你可以使用“查找加替换”(或者正则表达式)，不过最好的方法还是在浏览器里打开这个页面，然后把文本复制粘贴到你的 HTML 编辑器里。* h$@xbC?
.�E]8bU`
关键还是要用结构化的方式来思考！仅仅把 <b> 标记替换为 <strong> 是远远不够的。k?}M5'"7{[WV?3B]o
最重要的条目是哪个？用 <h1> 来标记它。次要一点的就用 <h2>，依此类推。用 <p> 来标记段落。把导航条标记为无序列表。j_fY@=JTvEUi=K/
NU
选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional，除非你是此道高手，否则别用 XHTML strict。)*i =3(\Abb,_KMp#m
8、把你的页面合理分布在的 div 中C I%3:Mqf~ 8(];_O
把你的主导航条放在一个 id 属性设为 mainnav 的 div 中，子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式：<div id="footer">，至于整个页面，它被放在 <div id="content"> 里边。$4@ `K|%RLp P^k
即便现在它还不怎么讨人喜欢，但只要你开始给样式表添加规则，它就会马上变得可爱起来。u?BO@#}_`ZlkgCX|
9、是开始自己编写 CSS 的时候了 i?X84
LML?5#6`Rc
首先，给每个 div 设置一个边界。例如： div {border: 1px dotted gray; padding: .5em} 这可以帮助你完完整整地看到里边的内容，也不再需要卷动屏幕了。SLw0Q!Q=GqC[E7
首先为以定义的元素编写 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)�8+F- !3RLR~zc
尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导航栏的 div 中的列表项。a�%gQ/ULVeSnF=|
在尽可能多的浏览器下进行测试，毕竟你可以让朋友帮助你用它们自己的浏览器测试。=�[~ lfy: / c{4\bs [版权归原作者及coolcxm共同拥有，转载请注明出处]
|
