DIV+CSS布局的好處（一）

2013-04-17 12:57 作者：周艷紅 瀏覽量：

DIV+CSS布局的好處（一）

第一 內容和形式分離，網頁前臺只需要顯示內容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。
　　這個是DIV+CSS技術最現著的特點，也是CSS存在的根源。完全的顛覆現在傳統(table)網頁設計的技術。所有現在用table制作的內容，都可以用CSS來解決掉，而且解決的更完美，更強大。不需要大家再表格套表格，只需要用div套div就可以實現以往表格套表格所有的美工，這樣的結果就是使用div+CSS技術，讓生成的網頁文件大小更精簡，更小。table時代，一個頁面表格達到10個以上是非常普遍的事情，但是現在用DIV+CSS，一個table都可以不用，就完全達到之前的效果，這就直接導致網頁文件大小比使用table時減少50%-80%，更節約各位站長的硬盤空間，訪問者打開網頁時更快，而且用div+CSS時，不像以往使用table時，必須把全部table讀取完了才顯示頁面內容，現在是可以讀一個div就顯示一個效果，大家打開網頁不用等。好處真是明顯而強大。
　　這個優點的確是顯著的，凡是使用傳統table建的網頁，內容多的話，有時候達到30K左右都有可能，文件打了打開時，肯定就有0.0幾秒的延遲。使用DIV+CSS,由于沒有表格使用，你前臺打開看到的全是直接內容，CSS文件都是導入鏈接的，是另一個文件，根本和HTML文件大小沒關系，這種生成的HTML文件，一個也就10K左右大小。文件數量少時看不出來，但是文件萬級以上時，還是會節約幾十M大小的。
　　table雖然生成的HTML文件要大一些，占空間多點，但是現在的虛擬主機空間幾百塊錢就可以達到3G以上，一個中小型門戶或是網站，完全夠用，就算不夠用，你數據量達到十萬級別以上，生成的HTML文件也用不了2G，這個成本其實對于中小型網站長來說完全可以不計。再說使用table說的是打開速度慢。這個在現在的網絡環境下面來說，也可以忽略的，現在大家上網都是用的寬帶，至少也是512K以上，一個網頁30K，打開也就一秒不到的時候，使用DIV+CSS也就快那么0.0幾秒，這基本上是大家感覺不到的。而且既然都是生成HTML，那對服務器來說影響的效果是一樣的，只要你的虛擬主機網絡穩定，那么在table和div+css上就沒差別。
　　但是使用table制作網頁框架和表格時，全是選擇化制作的，也就是說不用大家去寫代碼，很簡單輸入邊框和行數列數就可以達到制作出來的要求，但是使用div+CSS時，完全是靠手寫代碼，一個表格寫四行代碼的話，如果一個頁面涉及十多個div表格生成，手寫代碼將超過50行，而且如果你數學不好，或是邏輯思維能力不強的話，你手寫出來的表格將是亂78糟，出現表格重疊和位置完全不正確。因為用div+css寫表格時，表格間的邏輯排列關系完全是靠自己手寫代碼判斷，如果你沒有很強的手寫代碼能力和邏輯性，你所花費的時間，比你用table制作時間至少是4倍左右。基本上一個頁面定義的ID和class類，完整頁面是不會少于20個的，一個ID或class手寫5句，你制作一個HTML頁面將超過100句代碼，當然其中很多是可以存成一個CSS文件來重復調用的。也就是說相同的頁面內容的話，排版一樣的情況下，可以直接導入鏈接CSS來實現。
　　這個就很像之前生成HTML時，制作一個網頁模板。但制作這個模板花的時間是用table制作時的幾倍。這里有些人要說，但是我改版的時候，就只需要再寫一個css就可以了，不用再生成HTML了。那么我要說，當你再寫一個CSS文件改版時，我可能都已經用table制作好一個頁面模板，而且還自動生成HTML全站的頁面了。這不是不可能的。
待續div+css布局的好處、、、
 

   --- 版權最終歸艾銻無限所有http://m.maosdadas.net/ 如需轉載，請標明出處。