DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS制作網頁心得
DIV+CSS制作網頁心得
編輯:CSS詳解     

DIV+CSS是目前互聯網網頁制作最熱門的方法,但對於完全手寫代碼,許多網頁設計師都望而止步。

  其實DIV+CSS是很簡單的一種布局方式,甚至比任何一種編程語言都要簡單(雖然它不能算是編程語言)。

  首先你要知道,當你開始學習DIV+CSS的時候,你要把以前所有用DW畫布局表格的思維方法忘的一干二淨(如果你以前是用TABLE布局的話),然而這項技術更適合剛接觸網頁制作的人。

  然後你要知道,DIV+CSS是高成本開發,速度當然是沒有你畫TABLE來的快,但是好處更多,相信如果你能看到這裡,你一定對DIV+CSS的好處也有一定的了解了。

  最後你還得知道,你所用的工具,你可能認為dreamweaver很好,沒錯,它的確不錯,但你要認識到,當你熟練使用了這門技術,你就可以在任何文本編輯器中編寫網頁,甚至在記事本中,而dreamweaver只是充當一個文本編輯器的角色,而你所有的工作基本都在代碼視圖中完成,在這裡我推薦adobe最新的dreamweaver cs4。當然如果CS5出現了我也會去試用它。

  切入正題,其實DIV+CSS正確的說法應該是XHtml+CSS,說成DIV的原因只是讓它能更明確地和TABLE布局方法區分開來,並不是說一個頁面裡沒有TABLE,而是在什麼地方使用TABLE,你要認識到TABLE是表格,是存放數據用的,而不是用來布局的。

  接下來是布局思維方式,可能大家在接觸DIV+CSS的時候無從下手,我現在向大家推薦最著名的盒子模型,我也是看了這個模型後一下子就開竅了。

  你可能會說,好多英文看不懂,不過我告訴你,很抱歉那三個英文你必須記住,而且是最重要的三個,你可以把這麼個盒子看成一個DIV,而所有標簽都帶有這三個屬性。

  正如你所見到的這個是一個方塊,而網頁呢,是由這麼多大大小小的方塊組成的,可能以下實例會更明確的讓你了解這個盒子。

  我在這裡借用了新浪博客的盒子來說明下,大家可能發現了,其實邊框border往往就只有1px的寬度,誰叫它是邊框呢。而外補丁margin呢,它代表了DIV(盒子)和DIV(盒子)之間的距離,而內補丁padding則是大盒子(DIV)和裡面的盒子(DIV)的距離(盒子(DIV)裡面可以放盒子(DIV)哦)。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved