記得第一次接觸 xhtml 與 CSS 時(shí)，對(duì)于各種 html 標(biāo)簽的縮寫(xiě)都很有興趣，例如：h1 的 h 原意為何？ul 與 li 是哪個(gè)英文單字演變而來(lái)…..，這些似乎沒(méi)有人去研究過(guò)，不過(guò)倒也不妨礙程式的學(xué)習(xí)。我最記得友人給我的 div 標(biāo)簽解釋較為有趣。他說(shuō)：「div 像是一個(gè)容器，可以放很多東西進(jìn)去。」這很有禪意的開(kāi)示，說(shuō)真的并沒(méi)有給我任何啟發(fā)，直到當(dāng)我有機(jī)會(huì)教授他人網(wǎng)頁(yè)設(shè)計(jì)時(shí)，我開(kāi)始認(rèn)真去構(gòu)思：「如何化繁為簡(jiǎn)、深入淺出的方式來(lái)向一個(gè)初學(xué)者解釋 div？」
html 語(yǔ)法里的 div 標(biāo)簽，其原單字為：division，與area、zone、region、section 意思相同，就是指定區(qū)域。為何加入一個(gè)指定？因?yàn)榕浜?div 一起作用的還有：margin、padding、float 等 CSS 參數(shù)，這些參數(shù)是強(qiáng)化 div 這個(gè) “容器” 的大小、性質(zhì)與用途，說(shuō)穿了 CSS 就是在定義 div 的外觀。
我們可以把 div 視為一個(gè)獨(dú)立的行政區(qū)，整個(gè)中國(guó)就是一篇網(wǎng)頁(yè)，各縣市是網(wǎng)頁(yè)內(nèi)的 div?？h市內(nèi)還可再分各鄉(xiāng)鎮(zhèn)鄰里 div。地理疆界畫(huà)分出來(lái)后，地景地貌的規(guī)劃，要靠國(guó)土發(fā)展計(jì)畫(huà)與都市計(jì)畫(huà)，這些法律條文就是網(wǎng)頁(yè)設(shè)計(jì)上的 CSS。因此我們可以說(shuō)：
div 是個(gè)區(qū)域范圍，像是網(wǎng)頁(yè)頂端 (Head)、中段 (Body)、側(cè)區(qū) (side) 與底端 (footer) 等區(qū)塊
CSS 是定義區(qū)域內(nèi)的樣貌，如：顏色、效果、大小….
在區(qū)域內(nèi)活動(dòng)的人事物，就是我們所謂的網(wǎng)頁(yè)內(nèi)容
使用 div 設(shè)計(jì)網(wǎng)頁(yè)，有諸多優(yōu)點(diǎn)：
網(wǎng)頁(yè)版面構(gòu)成樣式 (Style) 與網(wǎng)頁(yè)內(nèi)容 (Content) 分開(kāi)，易于資料維護(hù)與管理
簡(jiǎn)化網(wǎng)頁(yè)頁(yè)面程式碼，加速瀏覽速度與便于搜尋引擊的檢索
網(wǎng)頁(yè)外觀若要變換樣式 (變臉)，修改CSS即可，網(wǎng)頁(yè)內(nèi)容絲毫不受影響
可以結(jié)合 CSS framework，增快網(wǎng)站后臺(tái)開(kāi)發(fā)時(shí)間與便于統(tǒng)一網(wǎng)頁(yè)樣式
可以設(shè)定自由邊界，讓頁(yè)面可依照使用者的螢?zāi)淮笮。詣?dòng)縮放，此特色可讓網(wǎng)頁(yè)相容于攜帶式行動(dòng)設(shè)備 (智慧型手機(jī)、平版電腦…)
減少版面構(gòu)成語(yǔ)法上的Bug。傳統(tǒng) Table (表格) 語(yǔ)法，經(jīng)常會(huì)自己撐大或是斷裂，往往要費(fèi)時(shí)重新調(diào)整，甚至重作，徒增困擾既然 div 的優(yōu)點(diǎn)很多，為何臺(tái)灣大多數(shù)的網(wǎng)頁(yè)設(shè)計(jì)公司還是不太喜歡使用，反而繼續(xù)使用落伍、垂死、問(wèn)題最多的表格 (Table) 語(yǔ)法？
表格語(yǔ)法表較容易，無(wú)須在費(fèi)時(shí)去學(xué)習(xí)陌生的 div 語(yǔ)法，減少麻煩
表格語(yǔ)法所開(kāi)發(fā)出來(lái)的網(wǎng)站成本較低，在程式端要注意的小地方少
客戶在網(wǎng)頁(yè)設(shè)計(jì)上的預(yù)算不高，網(wǎng)站建置上的諸多專業(yè)考量就省啦
會(huì)表格語(yǔ)法的網(wǎng)頁(yè)設(shè)計(jì)師比較好找，但擅長(zhǎng) div 與 CSS 語(yǔ)法的網(wǎng)頁(yè)設(shè)計(jì)師就很少了
表格語(yǔ)法可以模擬平面設(shè)計(jì)概念的網(wǎng)頁(yè)設(shè)計(jì)。但平面設(shè)計(jì)不是網(wǎng)頁(yè)設(shè)計(jì)，如果沒(méi)有正視這兩者的差異，過(guò)度依賴平面設(shè)計(jì)上的美學(xué)觀，反而會(huì)造成后續(xù)程式端的問(wèn)題
客戶不懂網(wǎng)頁(yè)設(shè)計(jì)的眉角與奧義，未來(lái)網(wǎng)站的搜尋排序也不是本階段所需注意的
在網(wǎng)頁(yè)設(shè)計(jì)里，魔鬼就存在技術(shù)的細(xì)節(jié)中。如果在網(wǎng)站建置開(kāi)始就不以技術(shù)為導(dǎo)向，完全以視覺(jué)上的美觀為主，可以推測(cè)的將來(lái)，妖孽群舞，百病叢生，永遠(yuǎn)無(wú)法將蟲(chóng)蟲(chóng)危機(jī)解除，屆時(shí)網(wǎng)站將是一個(gè)無(wú)法處理的痛。
