DIV+CSS是目前互聯(lián)網(wǎng)網(wǎng)頁制作最熱門的方法,但對于完全手寫代碼,許多網(wǎng)頁設計師都望而止步。
其實DIV+CSS是很簡單的一種布局方式,甚至比任何一種編程語言都要簡單(雖然它不能算是編程語言)。
首先你要知道,當你開始學習DIV+CSS的時候,你要把以前所有用DW畫布局表格的思維方法忘的一干二凈(如果你以前是用TABLE布局的話),然而這項技術更適合剛接觸網(wǎng)頁制作的人。
然后你要知道,DIV+CSS是高成本開發(fā),速度當然是沒有你畫TABLE來的快,但是好處更多,相信如果你能看到這里,你一定對DIV+CSS的好處也有一定的了解了。
最后你還得知道,你所用的工具,你可能認為dreamweaver很好,沒錯,它的確不錯,但你要認識到,當你熟練使用了這門技術,你就可以在任何文本編輯器中編寫網(wǎng)頁,甚至在記事本中,而dreamweaver只是充當一個文本編輯器的角色,而你所有的工作基本都在代碼視圖中完成,在這里我推薦adobe最新的dreamweaver cs4。當然如果CS5出現(xiàn)了我也會去試用它。
切入正題,其實DIV+CSS正確的說法應該是XHTML+CSS,說成DIV的原因只是讓它能更明確地和TABLE布局方法區(qū)分開來,并不是說一個頁面里沒有TABLE,而是在什么地方使用TABLE,你要認識到TABLE是表格,是存放數(shù)據(jù)用的,而不是用來布局的。
接下來是布局思維方式,可能大家在接觸DIV+CSS的時候無從下手,我現(xiàn)在向大家推薦最著名的盒子模型,我也是看了這個模型后一下子就開竅了。
你可能會說,好多英文看不懂,不過我告訴你,很抱歉那三個英文你必須記住,而且是最重要的三個,你可以把這么個盒子看成一個DIV,而所有標簽都帶有這三個屬性。
正如你所見到的這個是一個方塊,而網(wǎng)頁呢,是由這么多大大小小的方塊組成的,可能以下實例會更明確的讓你了解這個盒子。
我在這里借用了某博客的盒子來說明下,大家可能發(fā)現(xiàn)了,其實邊框border往往就只有1px的寬度,誰叫它是邊框呢。而外補丁margin呢,它代表了DIV(盒子)和DIV(盒子)之間的距離,而內補丁padding則是大盒子(DIV)和里面的盒子(DIV)的距離(盒子(DIV)里面可以放盒子(DIV)哦)。
軟考站考試吧 |
軟考站點加入收藏夾 |
|