Web開發設計的五大準則

若是倉促而爲，設計一個專題或者網站必定會成爲惡夢。Web設計須要遵循一些準則並有計劃地去作。

Rule #1 : 先出設計圖

這是必須的。不要假設設計圖在你的頭腦中就開始設計web，必需要放到紙上。能夠這樣作：

1，  拿尺子、筆和紙，按照具體的尺寸一行一行地畫下來；

2，  記得慮分界線的長度等，這樣才能符合CSS的像素；

3，  記下設計的每個細節省得忘記，若是把全部細節都累積到最後將是巨大的麻煩。

Rule #2 :配色

這是設計的核心部分，只有顏色搭配合適才能使你的網頁看起來不錯。首先要決定的是主色，也即你在網頁中多數使用的顏色；而後選擇跟主色調搭配的第二顏色；不要選擇超過三種顏色否則你的設計看起來會很亂。若是你想要更多的顏色，可使用淺色或者深色的陰影來搭配主色調。

1，  瀏覽十個跟你網頁有一樣主色調的網頁；

2，  給幾我的看你的配色方案並取得反饋；

3，  從瀏覽的網頁和反饋你將更好地完善你的顏色搭配。

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 文檔

咱們都知道，使用瀏覽器能夠輕易地看到網頁的輸出，但使用另外一瀏覽器的時候則可能發現輸出不正常。這不是什麼稀奇事兒，由於每一個瀏覽器對HTML和CSS的處理方式都不同。

爲避免這種狀況，每一個瀏覽器準備一個CSS文檔，這樣全部瀏覽器均可以正常瀏覽。雖然這有必定的難度，可是記着期望一個CSS文檔來知足全部瀏覽器是不可能的。