网页制作学习：DIV+CSS技术如何入门
CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化，越来越多的人在学习而很多初学者没有一个头绪，整理了一些学习的方法给大家。% a# [/ f( w$ }8 }2 d
! j9 I% h/ S6 I& Z
一. CSS学习重在方法!
" M- E2 s* G8 }7 U# G& O- r6 D C/ H9 H6 S. `. X5 z" J
学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法!
, W' O; W- T" Q+ D' m4 T4 J! U# b0 p& B W" ]. L, J
要想掌握CSS, 首先要学会HTML!; e, _: n4 [! u0 p$ X9 r0 x( l
3 B+ S4 @0 L8 G! K7 Q: O 再来谈一下学习过程中的细节，因为一个样式它是不可能脱离HTML页面的，HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好，千里马也罢，只要有恒心，一定会到达终点的。3 w+ r8 h9 t) ^9 H
4 t* T M; F8 j# g% g9 ` 阅读一本书，一般来说第一次要先把整个书通读一遍，不理解的也要往下看，在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象，但一定有很多不明白的地方，没关系，继续往下看。第二遍你就要边看边做学习笔记了，把你认为是重点的部分写上，还有，你觉得有疑问的部分也要记下，带着疑问看下去，如果没有答案，你可以去BBS上发一个贴子，好心人还是很多的，提示一句：“一定要学会如何去问问题!” 。你还要上机去练习书上的例子，最让你困惑的：“一是记不住，二是对概念的理解有误(这一条可能是书译的不好，另外就是你的理解不对)”，对于第一条你就要树立信心，坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了，努力了就会有回报，有结果。$ I7 @5 k2 o5 s( b2 F4 r! b$ F
% t4 _7 [+ R; j) K9 t
有好多人也看了，但是没有什么进步，主要有以下几个原因：
, u+ w, Y4 M. h5 }0 M$ ]. q8 e% Q* B% t e
原因一：压力不够，因为有不少人比如美工学CSS，因为是看别人学，所以学之，不学就没优势!这样的压力是很小的，学不好还有美工这碗饭。
7 ~+ m8 t$ U* h2 f9 N4 ^
% L d1 R) V+ R 原因二：只是业余学习，这样学还只是玩一玩，因为你不一定非要以这门技术吃饭。
6 E' X- y: {2 Z% }0 E/ q, J! r. A8 L, W w* e) \
原因三：方法不对，有的人只是在看教程，但他不动手去做，我以前就是看的太多，做的太少，所以有了实践你才能把理论的东西揉进去。
; Y0 K. s7 {. Q1 V+ F. @/ J/ ]. Z9 P" V
二. 掌握CSS的四个学习阶段
0 q. M- Q1 x) d9 H4 i* H, P
) e% A3 g- M: P 阶段一：不去想浏览器的兼容性问题的情况下能做出页面，但页面里到处用TABLE的 模式DIV写出的页面。3 X0 ~ [% D1 K9 l! r
* i! o! C- p4 \& V( D1 h3 h
阶段二：想到了兼容性问题，但无法提前预防，只会修补问题，大量使用HACK技术(我对HACK技术只是知道，但用的很少)
6 Y% y/ Z2 v% K$ F. F
; N0 B3 y, \7 g 阶段三：可提前预防BUG，但样式表中大量应用了ID,CLASS，CSS译过来是重叠样式表，比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN，这样写就可以定义SPAN的样式了，不用在SPAN中加入CLASS了。这也就是CSS的优点所在，为什么不好好利用而一定要定义一个CLASS呢!
" y" j& _: K1 j& S3 ]. ]1 F* o6 W1 p I' j$ _& Q* [
阶段四：这一阶段是最难的，良好的HTML语义结构、合理的CSS、可重复利用的样式。良好的语义有这方面的文章,合理的CSS，这两方面以后一定会写专题来研究。
N3 K) W: q E- z( t1 G% o+ B0 I8 a3 m4 u' m
三. CSS初学者常见问题：
M5 _. Y: b g8 ?% d. R; i" ^- D1 }0 I* a3 @" z
第一个要求是缩图的正下方要有个标题。作法相当直接了当：在你的 HTML 里放上图片，接着一个断行 (BR)，再把标题放在一个段落 (P) 里并且置中 (利用 CSS)。4 w" [( b( p+ z. E9 n- i
- B2 K! f. i4 l* }2 R2 L2 u- l" Y
接着要让这些缩图跟标题成对地排列在浏览器窗口里。使用表格排版时，这一对对的缩图跟标题会被分别放置在 TD 里。在使用 CSS 排版时，我们要把它们分别放置在 DIV 里。为了让它们能水平排列在窗口上，我们用 CSS 让这些 DIV 往左浮动 (FLOAT)。) v, w q9 K( |4 Z, Z
4 E1 |/ C; O: J2 L
问题1：学CSS应该选什么样书来读?! {" X" f- s4 Q2 d
$ C0 }" ^2 V% j 先推荐几本：《CSS权威指南》《网站重构》《网站布局实录》《HTML参考大全》 o$ z, a7 E0 U/ U3 u+ B2 A
( r- y* ~% E' M1 e' f& b0 J; ^ 问题2：用什么软件编辑CSS代码?
1 ^: ~- b. a& P }5 v7 h {" N8 A+ B- ~' h
只要已经能达到会手写的程度，用什么软件都可以，推荐使用DreamWeaver外挂TopStyle(最新版本是Pro V3.12)。
% o1 W# r7 O& j' b, e+ |1 `7 n0 b5 k. t( U# L/ C! H7 c' Z+ \9 M
问题3：先写HTML还是先写CSS?
/ W/ Z, [& U6 k8 ?
. D8 N# s$ j1 t- A 网上有很多种答案：先写HTML后写CSS;先写CSS后写HTML;两者同时写。两者一起写更适合初学者，先写CSS或者先写HTML对于初学者都不是恰当得的方法。如果让一个人编写代码，你告诉他先写HTML,写完后 HTML不能修改了，然后你写CSS，如果他可以写出来，那这个人一定是一个水平非常高的Builder了!所以对于初学者，多数情况下建议同时编写，具体说一下步骤：9 s1 U; k: V* d. z; ^) ^6 x# R! U
# m8 f& v1 v5 `0 v) H' G+ H) B$ W/ v# d
先要把站点建好，目录建好，比如我们建好文件夹CSS,IMAGES,这两个是最其本的，然后新建一个HTML文件，一个style.css一个空 的样式表，把HTML页连接到这个外部样式表。
5 J: U8 c% i- I9 P( {0 }, `3 p n- j5 B) F4 T: L7 B5 w) z
然后我们先写HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，这些 布局部分包括外套部分，头部分，中间部分，左，中，右，版权部分等。+ g+ l* V1 Y0 `# G
3 s. O. _/ y5 C* ]
写好这些后，这时你可以到样式表中写样式，或者你在接着写布局里的部分，拿头部为例，在头部写入LOGO部分，NAV部分也同样加入ID或CLASS。其它同理。# p8 ^: k4 u' T: t
; U, w1 ?: K( V' S1 l 为什么说我们不可能一次性把HTML部分写好呢，因为人都是可能犯错误的，可能你的想法写的过程就是有问题的，或者为了浏览器的兼容性问题，有些是你由于经验的不足没有提前预料到的，所以当你写样式时发现了问题时就有可能要改动你的HTML的代码。大至的写法就是这样，你也可以HTML/CSS同时进行，都是可以的，看你的习惯。我们写代码时很多时候是边写代码边测试，也不是说写一句测试一句，而是写了一段代码后就进行浏览器的测试，一个优秀的制作师他们的代码多数情况写了很多时他们才测试一下，是因为一个人如果经验多的话，他们就会知道并提前预防浏览器错误显示的发生了!所以他们写代码的速度比没有经验的人快。他们已经经历过了你所要经历的错误，你第一次遇到错误的浏览器显示问题你要花时间去修补，而他们可提前防止或遇到了可立即解决问题!这就是你与他们的不同点之一。
1 Y, J' o% t% x9 Q* Q& F' x5 E
0 r0 y/ w+ _6 l. B A 初学者与高手不同点之处还有一个就是高手们使用了大量的快捷键，所以一定要记住那些常用的快捷键，每一个小的细节都有一点提高，综合在一起就是很大的提高。' K+ \" s: U$ k) n' U: S3 g
! ~( |/ T6 Q" c0 W 另外提高自己的水平最好的方法就是多实践，多找一些比较好的HTML+CSS的模板进行编码实践，开始时要选一个简单点的，把页面截图，然后把这张图用自己的想法还原成HTML页面……
