網頁健康新主張LSM第三課 : LSM 的優點太多啦!

on 2009年7月11日

這是系列文章,建議您可以先閱讀:


很多人可能會懷疑說:我用表格排版排的好好的,而且好不容易才研究出了一套有效率的切圖和表格排版做法,為什麼又要大費周章的改變自己的工作習慣,使用LSM的方法來製作網頁呢?那是因為小正正還沒告訴你LSM的好處嘛!

  • 有效減少檔案大小:去除了一大堆用來排版但和資訊內容毫無關係的<table> <td> <tr>和<font>標籤後,網頁的HTML原始碼不但變得簡潔、可閱讀性高,更重要的是檔案大小也大幅的減少了!若將傳統的表格排版和CSS排版的頁面比較起來,通常會減少30%-50%的檔案大小。別忘記了CSS樣式檔案還可以多個頁面共用呢!

  • 檔案快取:瀏覽器會快取(cache)獨立的外部CSS和Javascript檔案,還有寫在CSS中的圖形檔案。如果你將整個網站所有的樣式都寫在一個CSS檔案裡面,那麼不論網友在你的網站中看了多少頁面,CSS只有在第一次進入網站時會下載而已,不需要每次換頁都重新下載。對於外部Javascript檔案也是一樣的。

  • 減少頻寬、省錢!每個頁面的檔案都變小了(因為少了一堆沒意義的標籤和共用CSS、Javascript的關係)、下載的檔案數目變少了(因為快取的關係),網路流量自然就降低。別忘了網路頻寬可都是要花錢租來的呢!

  • 頁面呈現的速度較快:很明顯的,檔案小了載入的速度變快,看到頁面的時間就變快。除此之外,傳統的表格排版有一個特性,必須要等到整個表格完整載入後,瀏覽器才會一次顯示出整個表格的內容,並不會一部份一部份的內容逐漸顯示出來。所以如果頁面中所有的內容都是放在一個表格之中,便要等到整個頁面完全載入後才會顯示,感覺上從按下超連結換頁後到新內容真正出現的時間就會比較久。CSS則能讓一個一個區塊分別顯示,下載多少就先顯示出多少,網頁內容便會由上而下逐漸出現,坐在那空等待的時間便縮短了很多。

  • 樣式風格統一:網站中有很多區域是每個頁面都會出現的,像是頁首頁尾和導覽列,也有很多東西不只在一個頁面中出現。與其將這些會重複出現的樣式分別寫在每一個頁面裡面,倒不如使用一個共用的外部CSS檔案,不僅能夠減少每一頁的檔案大小,更能夠統一整個網站的樣式風格。若要修改調整也更方便,只要改一個地方就好,不用每一頁都分別開啟來修改。

  • 支援更多裝置,存取性高:除了電腦螢幕以外,CSS本身就支援多種裝置,像是印表機、掌上型裝置、TV等等。依據LSM的做法,HTML只有資料內容和文件結構,所有的外觀呈現都是由CSS來控制,因此只要針對不同的裝置特性來設計CSS,網頁內容幾乎不用變動,馬上就能夠支援各種裝置的瀏覽。讓你的網頁在PDA、手機甚至是PS3或Wii上面都能正常瀏覽而且漂漂亮亮的,而又不需要個別去維護好幾份網站,只要切換不同的CSS就可以了。就算不支援CSS的裝置,還是可以看到HTML和正確的資料內容,讓更多裝置都能夠存取你的網站,成為名符其實的無障礙網頁。

  • 改版容易:同樣的道理,因為外觀樣式完全都交給CSS負責,如果網站想要改版改變樣式,只要重新設計共用的CSS檔案即可,不需要將整個網站全部重做,大幅降低了改版所需要的資源和時間。

  • 撰寫容易,工作流程順暢:資料庫網頁製作的流程都是先設計好頁面,再交給工程師去套程式。小正正就常常聽到這樣的抱怨:美術設計用表格排版所製作出來的頁面原始碼十分混亂,工程師要加程式碼進去不僅難度高,而且很容易就會因為少了一個結束的標籤而將整個版面打亂。如果雙方都能夠符合LSM的做法,那麼HTML原始碼就會乾乾淨淨的只包含資料內容和結構,要加程式碼進去便簡單的多,也不比較不會出錯。再也不會有一堆惱人又看不出所以然的<table> <td> <tr>和<font>標籤了!

接下來的是... LSM第四課 : 什麼叫做有語意的標籤? Semantic Markup

0 意見:

張貼留言