如果倉促而為，設計一個專題或者網(wǎng)站一定會成為惡夢。Web設計需要遵循一些準則并有計劃地去做。
Rule #1：先出設計圖
這是必須的。不要假設設計圖在你的頭腦中就開始設計web，必須要放到紙上?？梢赃@樣做：
1、拿尺子、筆和紙，按照具體的尺寸一行一行地畫下來；
2、記得考慮分界線的長度等，這樣才能符合CSS的像素；
3、記下設計的每一個細節(jié)免得忘記，如果把所有細節(jié)都累積到最后將是巨大的麻煩。
Rule #2：配色
這是設計的核心部分，只有顏色搭配合適才能使你的網(wǎng)頁看起來不錯。首先要決定的是主色，也即你在網(wǎng)頁中多數(shù)使用的顏色；然后選擇跟主色調搭配的第二顏色；不要選擇超過三種顏色不然你的設計看起來會很亂。如果你想要更多的顏色，可以使用淺色或者深色的陰影來搭配主色調。
1、瀏覽十個跟你網(wǎng)頁有同樣主色調的網(wǎng)頁；
2、給幾個人看你的配色方案并取得反饋；
3、從瀏覽的網(wǎng)頁和反饋你將更好地完善你的顏色搭配。
Rule #3：從基本的版塊開始著手
定下配色和設計圖之后，從最基本的框架開始構建——我的意思是說不添加任何文本。因為在版面中加入文本會使得架構混亂。方法如下：
1、每一個版塊設定邊界線，這樣能夠看到具體的尺寸和位置；
2、對不同的版塊使用不同的顏色，在完成版塊后再改成你想要的顏色。
Rule #4：理清CSS
不要在你的HTML文件中將styling元素搞得太復雜，不然等到你修改的時候你就不得不到處搜索。所以將所有styling元素歸置在一個單獨的CSS文檔中。
在styling之前理清你的CSS免得太過雜亂，導致你多次重復同一件事。CSS支持繼承，也即parent block的style可以用于child block.，充分利用這條特性。命名CSS分類名也要易懂易記。比如使用“main_content”而不是“div_1”。
Rule #5：制訂多重CSS文檔
我們都知道，使用瀏覽器可以輕易地看到網(wǎng)頁的輸出，但使用另一瀏覽器的時候則可能發(fā)現(xiàn)輸出不正常。這不是什么稀奇事兒，因為每個瀏覽器對HTML和CSS的處理方式都不一樣。
為避免這種情況，每個瀏覽器準備一個CSS文檔，這樣所有瀏覽器都可以正常瀏覽。雖然這有一定的難度，但是記著指望一個CSS文檔來滿足所有瀏覽器是不可能的?？荚嚧缶庉嬚?BR>
Rule #1：先出設計圖
這是必須的。不要假設設計圖在你的頭腦中就開始設計web，必須要放到紙上?？梢赃@樣做：
1、拿尺子、筆和紙，按照具體的尺寸一行一行地畫下來；
2、記得考慮分界線的長度等，這樣才能符合CSS的像素；
3、記下設計的每一個細節(jié)免得忘記，如果把所有細節(jié)都累積到最后將是巨大的麻煩。
Rule #2：配色
這是設計的核心部分，只有顏色搭配合適才能使你的網(wǎng)頁看起來不錯。首先要決定的是主色，也即你在網(wǎng)頁中多數(shù)使用的顏色；然后選擇跟主色調搭配的第二顏色；不要選擇超過三種顏色不然你的設計看起來會很亂。如果你想要更多的顏色，可以使用淺色或者深色的陰影來搭配主色調。
1、瀏覽十個跟你網(wǎng)頁有同樣主色調的網(wǎng)頁；
2、給幾個人看你的配色方案并取得反饋；
3、從瀏覽的網(wǎng)頁和反饋你將更好地完善你的顏色搭配。
Rule #3：從基本的版塊開始著手
定下配色和設計圖之后，從最基本的框架開始構建——我的意思是說不添加任何文本。因為在版面中加入文本會使得架構混亂。方法如下：
1、每一個版塊設定邊界線，這樣能夠看到具體的尺寸和位置；
2、對不同的版塊使用不同的顏色，在完成版塊后再改成你想要的顏色。
Rule #4：理清CSS
不要在你的HTML文件中將styling元素搞得太復雜，不然等到你修改的時候你就不得不到處搜索。所以將所有styling元素歸置在一個單獨的CSS文檔中。
在styling之前理清你的CSS免得太過雜亂，導致你多次重復同一件事。CSS支持繼承，也即parent block的style可以用于child block.，充分利用這條特性。命名CSS分類名也要易懂易記。比如使用“main_content”而不是“div_1”。
Rule #5：制訂多重CSS文檔
我們都知道，使用瀏覽器可以輕易地看到網(wǎng)頁的輸出，但使用另一瀏覽器的時候則可能發(fā)現(xiàn)輸出不正常。這不是什么稀奇事兒，因為每個瀏覽器對HTML和CSS的處理方式都不一樣。
為避免這種情況，每個瀏覽器準備一個CSS文檔，這樣所有瀏覽器都可以正常瀏覽。雖然這有一定的難度，但是記著指望一個CSS文檔來滿足所有瀏覽器是不可能的?？荚嚧缶庉嬚?BR>