2019-02-11 分類: 網(wǎng)站建設(shè)
記得第一次接觸 xhtml 與 CSS 時(shí),對(duì)于各種 html 標(biāo)簽的縮寫都很有興趣,例如: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。縣市內(nèi)還可再分各鄉(xiāng)鎮(zhèn)鄰里 div。地理疆界畫分出來(lái)后,地景地貌的規(guī)劃,要靠國(guó)土發(fā)展計(jì)畫與都市計(jì)畫,這些法律條文就是網(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)站制作_網(wǎng)頁(yè)設(shè)計(jì)公司-【創(chuàng)新互聯(lián)】響應(yīng)式網(wǎng)站設(shè)計(jì)公司">網(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ú)法處理的痛。
網(wǎng)站題目:網(wǎng)頁(yè)設(shè)計(jì)新趨勢(shì) — 什么是 div ?
URL網(wǎng)址:http://www.rwnh.cn/news/79177.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、搜索引擎優(yōu)化、外貿(mào)建站、商城網(wǎng)站、微信公眾號(hào)、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容