网站生成静态页面，及网站数据采集的攻、防原理和策略
. h5 {$ X% ~% p3 v, X2 n2 d8 d5 c/ e$ p
$ S' b' z! B- l" M" ~9 R! Z这是在网页设计师上看到的一篇文章，很适合入门div＋css布局的人看，转了过来收藏，hoho～～
1 l) s! W7 a6 f( H$ g
" A$ M* e% u& o; X! `: M# I" K你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：
' R m6 H; q" o
6 D: _6 v, ]4 K6 Y
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
" Z- S7 J# L- N( L, |+ \+ R3 F
/ Y$ h$ M- t4 |9 V8 j o
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
+ L# A/ _. j2 Y
2 f0 }3 S8 z/ Z1 T2 s- A0 y: d结构化HTML
% S, G" s* g$ S0 K, i我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
% {# a& h' o) ~
6 A4 a3 s6 ~ L( }. b2 ^9 z
如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
v) t: M8 |0 w& j1 M6 L2 h7 V' R4 c- W: c' Y5 x; s( I. P
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
4 K% I2 w& u5 K) {9 t' g* z
l* l2 |: T6 D1 [HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
7 O) w5 e) ~$ B! S; d
9 F- p) U' V+ [5 A2 I. G3 L开始思考
8 w$ j7 w$ a/ m4 Q% [# W/ `* b) Q首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
+ e( G. i) y6 t: x
3 I0 W1 H2 J3 s2 ?( @' a+ G+ s; ]
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
5 o5 A) p: j) H/ a3 i/ o
% a# ^# _% n" c8 q1 d# S7 C! g8 f标志和站点名称
7 V& x# C6 w2 h主页面内容
/ n0 u. N/ v2 i8 A
站点导航(主菜单)
( p4 P1 D4 L) Q, ^子菜单
$ D* q) n" x' ~- U6 k% S0 }
搜索框
! L1 r7 y% e0 T9 i% {4 M$ \1 ^
功能区(例如购物车、收银台)
* U) L+ p( w ?% T( h页脚(版权和有关法律声明)
7 @2 q- {* `1 m
我们通常采用DIV元素来将这些结构定义出来，类似这样：
+ g9 W+ }; a- E# X( n, O
) h; }. G) g1 I# ^<div id="header"></div>
$ _) Y' r+ g u- Q
Z7 [ o/ h+ o<div id="content"></div>
0 _. W4 i2 q q; A- D
! n! q: y& S) h2 H i. e<div id="globalnav"></div>
0 _, x2 v' ?# `8 C c
2 X. p% f) G1 ]* ?, u<div id="subnav"></div>
R9 q& E: g# b1 @+ W2 @; N" Z) C8 X p
<div id="search"></div>
/ q/ Q5 [0 J5 ]% D0 j: }
# S+ C$ k* S' t# U/ H8 G! k/ n( P% `<div id="shop"></div>
: W3 I- z* j R! E! _
( j7 N. c" t6 i: Z, n8 r<div id="footer"></div>
9 H6 x- J( e& I! k w" y3 \7 v& w! L, [0 _
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
) S a6 C6 w0 b7 }8 g! w
, H2 f5 Z$ \4 {# i1 k
根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
2 U8 R2 R; I9 I7 K, t% i
0 @7 i- i6 f% d
使用选择器是件美妙的事
* r$ j: z- _2 }
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
( x' A1 m. A( @7 l% ?2 L2 u4 o; ?9 T( K: J1 v- V5 q* Q! S
另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
0 m4 C3 @+ M- |. ~
" i0 W" [3 M9 e& l一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)
+ f N9 A7 \1 ~; s0 |( G
# j: k4 S) p. J1 f, L) y a
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width="80%" cellpadding="3" border="2" align="left">，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。
& F) h( C8 i+ n
6 H) j3 F* \+ u! l( N亲自实践一下结构化
- F9 u" ^% j! U# }上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：
, |. O# U0 |; H t: o
8 T+ W, m9 l& b9 k1 T<div id="navcontainer">
2 ^- J( G1 c/ S* g. U
6 n. u E* \" D8 ?. Q2 ^ Z
<div id="globalnav">
# [! T" V5 y/ k: X6 z5 Y
3 ?0 H+ J7 S0 j
<ul>a list</ul>
/ ~& R! I. B* D G( e9 \# {# e# Y; I4 d. N) }) ^! w
</div>
3 w% u* G8 H; K: N( @" P- ^ C
0 N/ S8 p8 u$ q6 f
<div id="subnav">
5 W, J5 v" U; e9 @( d5 M1 Z7 k
/ o8 t7 L6 x" _* ?, ^! G- W
<ul>another list</ul>
% Q& h! ^* E$ z
9 k6 t, t1 W, u# _
</div>
4 D0 _6 @( r. C" i5 d% F, i
' C; Y$ c D+ y4 d6 Q2 d& e& F7 j
</div>
: x2 M: s& z9 h* J% N
2 B& [8 ]6 Q7 n7 a
嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
6 N4 T' D( Z- I8 t2 S( n0 p, |- o4 r( Z9 l5 X1 @, b
用CSS替换传统方法
0 K2 o( T I+ L& A: t1 q下面的列表将帮助你用CSS替换传统方法：
( N) I' b+ o V
! b- v5 q, M- y! A% @
HTML属性以及相对应的CSS方法
' s/ ^9 f. H2 Q( J9 h+ y% f9 }' jHTML属性 CSS方法 说明
" V# B; a. `) {$ }; y- M( H8 V9 p1 X: Qalign="left"
T+ d( c5 x1 C5 V" Q& K, W
9 X7 d0 b9 Y7 b; t4 |+ ?align="right" float: left;
: s; O$ N/ [% S, l
/ }, d3 q' T- u, S5 X Wfloat: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
, r4 g4 B! n) l& n
8 {/ @5 p, s. e# z; p# Y( {
当你使用float属性，必须给这个浮动元素定义一个宽度。
+ A; B) p( J9 v8 d, m% J* e; h: N# N. c) f8 j7 j- X
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。
' p5 o4 ~ b$ {2 `; T' E% }/ k8 p% O, t* ^
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
9 W* A' L' ?) R
. ^4 R8 O6 t. z; ia:visited: #339;
# N7 Q8 {* n" M1 e/ u
) m* M+ |$ ^% l8 [a:hover: #999;
! [! @4 c6 H: _' i: Q0 H7 `& f6 o+ E! H- u+ e
a:active: #00f;
* U' ?- K! M7 } t在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。
1 I. a ?! u: |' R! k! |4 _
: \: s: G+ y1 s7 D" }* N* g# N
bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。
& s, a# Q# E3 P6 w$ Q- _
% v, ?+ r G- ~, ?& Q7 S7 N ]bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left
" R) S% |2 [4 R6 K; ?2 _4 b# W3 h; }; ^5 X2 ~/ K2 `3 A( l, F
border="3"
3 m# y$ v& c6 H; d4 T+ @, o( D1 [0 \' S9 l8 L. O- R8 e4 K
cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
y+ b+ k' X0 `' S" c
) A4 {3 S' S" w/ M
你可以使用 table, td or th 这些选择器.
6 ^. B; W* H- `# `2 H) G7 [5 r& j4 `
- J, n- k+ p- X& c0 U! |如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;
0 I6 a0 {, j" G% P- F) O2 ~! u$ R, I+ P3 d) w2 @0 ^8 I4 ^
<br clear="left">
; B/ F6 F1 g/ j* ^! l9 n# l8 D! B
7 n: {# D) Z+ c% f) q, {4 V2 K<br clear="right">
B' \- y* k8 C$ G% v$ d9 _) t; q! P; [$ _$ h" Y
<br clear="all">
2 N3 T' A' @6 ^$ v/ b/ r9 M) {
clear: left;
! U d; T" l/ N( w4 K0 v$ |
. @% `% o9 F/ Dclear: right;
& ~' l0 f3 I/ \' A/ I1 l
% A# g C0 ?7 c5 f3 ~clear: both;
, y: `* W4 j9 o- U: `: J- R; F
许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.
! v. T% g4 d7 ]" D4 l
( g$ Z, t3 F! M$ f; ?5 Qcellpadding="3"
8 u$ J9 S! j* D! p/ Y, ~! B" R" X0 e7 t- Q0 a
vspace="3"
/ y8 o: L( T2 r+ X0 l% ^" u3 I& y
/ n+ z6 y* f. [/ v% o" P$ `hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。
9 @' o% }9 y$ g' }5 u7 W+ Q N( w
& R# M* Y1 Z; s! I2 ~0 v" ^align="center" text-align: center;
; N% b) d) {, \" g
. I, z% ^' A) a- Z; Qmargin-right: auto; margin-left: auto;
* Y5 a$ ]( R$ R$ zText-align 只适用于文本.
* R% [; c% L8 L g) ~) O% I4 ^4 n2 d$ p3 T) ]# _8 f! M3 A
象div，p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中
4 O6 t; H5 K3 ^- o
- N9 t/ r$ L( ]7 A2 y: S P
$ x' j) m7 ~' b* b9 ^( ?: D2 v' I3 A
一些令人遗憾的技巧和工作环境
, v& \" }. R3 m! E( M$ k
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。
! m* L& d5 y) C6 K9 E
i Q9 Q( _, F1 `3 t
另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。
) @) L! l- F& O5 V$ r$ e8 p4 [+ u
7 \' r- K1 q* X7 I5 x理解浮动行为
" }% R/ l% O4 H3 j6 p: REric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear)，阅读《How To Clear Floats Without Structural Markup》将非常有帮助。
9 z D' N2 z5 }- w( X
! }7 J9 P+ c0 I! K e更多帮助
/ ^9 V& e: j- `$ b$ B
已有的《CSS Discussion》列表是很好的资源，它收集了一个WiKiA讨论组的信息，其中包括CSS布局总结(css-discuss.incutio.com/?page=CssLayouts)，CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多
