Web design trend — What is the div ?

什麼是div

網頁設計新趨勢 — 什麼是 div ?

 

記得第一次接觸 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 語法的網頁設計師就很少了
  • 表格語法可以模擬平面設計概念的網頁設計。但平面設計不是網頁設計,如果沒有正視這兩者的差異,過度依賴平面設計上的美學觀,反而會造成後續程式端的問題
  • 客戶不懂網頁設計的眉角與奧義,未來網站的搜尋排序也不是本階段所需注意的

在網頁設計裡,魔鬼就存在技術的細節中。如果在網站建置開始就不以技術為導向,完全以視覺上的美觀為主,可以推測的將來,妖孽群舞,百病叢生,永遠無法將蟲蟲危機解除,屆時網站將是一個無法處理的痛。

Leave a comment