• 

• 記得第一次接觸 xhtml 與 CSS 時，對于各種 html 標簽的縮寫都很有興趣，例如：h1 的 h 原意為何？ul 與 li 是哪個英文單字演變而來…..，這些似乎沒有人去研究過，不過倒也不妨礙程式的學習。我最記得友人給我的 div 標簽解釋較為有趣。他說：「div 像是一個容器，可以放很多東西進去。」這很有禪意的開示，說真的并沒有給我任何啟發，直到當我有機會教授他人網頁設計時，我開始認真去構思：「如何化繁為簡、深入淺出的方式來向一個初學者解釋 div？」
  html 語法里的 div 標簽，其原單字為：division，與area、zone、region、section 意思相同，就是指定區域。為何加入一個指定？因為配合 div 一起作用的還有：margin、padding、float 等 CSS 參數，這些參數是強化 div 這個 “容器” 的大小、性質與用途，說穿了 CSS 就是在定義 div 的外觀。
  我們可以把 div 視為一個獨立的行政區，整個中國就是一篇網頁，各縣市是網頁內的 div。縣市內還可再分各鄉鎮鄰里 div。地理疆界畫分出來后，地景地貌的規劃，要靠國土發展計畫與都市計畫，這些法律條文就是網頁設計上的 CSS。因此我們可以說：
  div 是個區域范圍，像是網頁頂端 (Head)、中段 (Body)、側區 (side) 與底端 (footer) 等區塊
  CSS 是定義區域內的樣貌，如：顏色、效果、大小….
  在區域內活動的人事物，就是我們所謂的網頁內容

• 使用 div 設計網頁，有諸多優點：
  
  網頁版面構成樣式 (Style) 與網頁內容 (Content) 分開，易于資料維護與管理
  簡化網頁頁面程式碼，加速瀏覽速度與便于搜尋引擊的檢索
  網頁外觀若要變換樣式 (變臉)，修改CSS即可，網頁內容絲毫不受影響
  可以結合 CSS framework，增快網站后臺開發時間與便于統一網頁樣式
  可以設定自由邊界，讓頁面可依照使用者的螢幕大小，自動縮放，此特色可讓網頁相容于攜帶式行動設備 (智慧型手機、平版電腦…)
  減少版面構成語法上的Bug。傳統 Table (表格) 語法，經常會自己撐大或是斷裂，往往要費時重新調整，甚至重作，徒增困擾

• 既然 div 的優點很多，為何臺灣大多數的網頁設計公司還是不太喜歡使用，反而繼續使用落伍、垂死、問題最多的表格 (Table) 語法？
  
  表格語法表較容易，無須在費時去學習陌生的 div 語法，減少麻煩
  表格語法所開發出來的網站成本較低，在程式端要注意的小地方少
  客戶在網站制作_網頁設計公司-【創新互聯】響應式網站設計公司">網頁設計上的預算不高，網站建置上的諸多專業考量就省啦
  會表格語法的網頁設計師比較好找，但擅長 div 與 CSS 語法的網頁設計師就很少了
  表格語法可以模擬平面設計概念的網頁設計。但平面設計不是網頁設計，如果沒有正視這兩者的差異，過度依賴平面設計上的美學觀，反而會造成后續程式端的問題
  客戶不懂網頁設計的眉角與奧義，未來網站的搜尋排序也不是本階段所需注意的
  在網頁設計里，魔鬼就存在技術的細節中。如果在網站建置開始就不以技術為導向，完全以視覺上的美觀為主，可以推測的將來，妖孽群舞，百病叢生，永遠無法將蟲蟲危機解除，屆時網站將是一個無法處理的痛。

名稱欄目：網頁設計新趨勢 — 什么是 div ?
標題鏈接：http://m.newbst.com/news27/79177.html

成都網站建設公司_創新互聯，為您提供標簽優化、移動網站建設、微信公眾號、面包屑導航、做網站、Google

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯