儘管對於現如今的頻寬來說,網頁文件那僅以K來算的大小實在是微不足道,但如何將這以K來計算的網頁文件精簡到最小還是網頁設計師們所應該考慮的問題之一。
眾所周之,在不影響整個網頁架構與功能的情況下,網頁文件越小越好,因為更小的網頁文件有利於瀏覽器對網頁的解釋時間縮到更短,自然訪客也就不用面臨等待網頁緩慢呈現的煩躁了,這點對於那些頻寬少網速慢的用戶猶為明顯。試想一下,你會是希望打開一個網站的時候整個網站馬上呈現在你面前呢?還是喜歡花上十幾秒甚至是幾分釧來看整個網站一點一點的被瀏覽器解釋出來呢?
在Table版面的時代,程式碼無數次的隨著表格在頁面裡重複,致使整個網頁檔案變得臃腫無比,程式碼的可讀性也降到最低,瀏覽器的解釋時間自然也增加了不少。而自從DIV+CSS的佈局替代Table佈局之後,這一切都得到了極大的改善,讓Table回歸到它原本用於顯示資料的位置上去,而佈局就交給DIV+CSS來做,這樣程式碼的可讀性與復用性都得到了提高,而DIV+CSS更為重要的一點就是將網頁文件的表現與結構區分開來,再也不用為了表現而去改動整個網頁文件的結構了。
即使DIV+CSS的佈局方式將先前Table佈局時程式碼的臃腫降到了最低,但對於網頁設計師來說,如何將網頁檔案的大小控製到最小是永遠值得探索和追求的一個問題。
看如下一段程式碼:
#header { |
這樣的一段CSS程式碼,在條理上很清晰,結構也很明了,可讀性很強,可是這樣的一段程式碼卻沒有做精簡,也就是說它是最原始的CSS程式碼,下面看精簡後的程式碼:
#header { margin:10px 15px; backgroung:#333 url(Images/header.jpg); } |
在CSS中有複合屬性這一說法,也就是說可以將很多屬性參數整合在一起的,比如說上面的“margin-top; margin-right; margin-bottom; margin-left;”可以整合成一個“ margin」屬性,然後為其配上參數。
透過這一點,我們就可以在原始CSS程式碼的基本上將程式碼進一步的精簡。而且這樣寫的結構也合理,可讀性也同樣強。可是對於要精簡到徹底來說,這還不夠。為了讓這段CSS程式碼的結構明了,我們用上了空格換行等佔用空間的東西,如果將這些佔用空間的去掉呢?
#header{margin:10px 15px;background:#333 url(Images/header.jpg);} |