什麽是DIV＋CSS？做(zuò)網站(zhàn)有(yǒu)哪些(xiē)優勢？

對于新手或入門(mén)者來(lái)說，往往會(huì)有(yǒu)這幾方面的疑問：

    什麽是DIV＋CSS？實質是什麽？

    DIV+CSS的優勢何在？

    新手學習div＋css，該如何入門(mén)？

    使用什麽軟件來(lái)布局頁面和(hé)編輯css呢？

    能不能提供幾個(gè)實例具體(tǐ)講解一下怎麽來(lái)實現？

    諸如此類的問題，是新手們最常問的。回答(dá)這些(xiē)問題，也是仁者見仁，智者見智了。不過從嚴格的角度來(lái)講，div＋css的叫法是不對，隻不過像我們這些(xiē)菜鳥級的都這樣叫，習慣了而已。

1、那(nà)麽DIV＋CSS是什麽意思呢？實質是什麽？

    要弄懂這個(gè)意思，首先你(nǐ)要對網頁有(yǒu)一定了解，對和(hé)div相對的table布局有(yǒu)很(hěn)好的認識，這樣理(lǐ)解起來(lái)就不難了。

    DIV+CSS是網站(zhàn)标準（或稱“WEB标準”）中常用的術(shù)語之一，通(tōng)常為(wèi)了說明(míng)與HTML網頁設計(jì)語言中的表格（table）定位方式的區(qū)别，因為(wèi)XHTML網站(zhàn)設計(jì)标準中，不再使用表格定位技(jì)術(shù)，而是采用DIV+CSS的方式實現各種定位。 用div盒模型結構給各部分內(nèi)容劃分到不同的區(qū)塊，然後用css來(lái)定義盒模型的位置、大(dà)小(xiǎo)、邊框、內(nèi)外邊距、排列方式等。

    CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來(lái)表現 HTML 或 XML 等文件式樣的計(jì)算(suàn)機語言。在我們用table布局時(shí)，都曾接觸和(hé)應用到css。

    DIV元素是用來(lái)為(wèi)HTML文檔內(nèi)大(dà)塊（block-level）的內(nèi)容提供結構和(hé)背景的元素。DIV的起始标簽和(hé)結束标簽之間(jiān)的所有(yǒu)內(nèi)容都是用來(lái)構成這個(gè)塊的，其中所包含元素的特性由DIV标簽的屬性來(lái)控制(zhì)，或者是通(tōng)過使用樣式表格式化這個(gè)塊來(lái)進行(xíng)控制(zhì)。

    簡單地說，div 用于搭建網站(zhàn)結構（框架）、css 用于創建網站(zhàn)表現（樣式/美化），實質即使用XHTML對網站(zhàn)進行(xíng)标準化重構，使用CSS将表現與內(nèi)容分離，便于網站(zhàn)維護，簡化html頁面代碼，可(kě)以獲得(de)一個(gè)較優秀的網站(zhàn)結構便于日後維護、協同工作(zuò)和(hé)搜索引擎蜘蛛抓取。

    當然不是所有(yǒu)的網頁都需要用div布局，例如數(shù)據頁面、報表之類的頁面的時(shí)候還(hái)是會(huì)用table，web 标準裏并沒有(yǒu)說要摒棄table。所謂DIV+CSS布局的叫法讓人(rén)更為(wèi)擔心，不要讓DIV成為(wèi)Table的替代品，多(duō)層嵌套的DIV會(huì)嚴重影(yǐng)響代碼的可(kě)閱讀性，活用HTML為(wèi)我們提供的标簽吧(ba)。

2、DIV+CSS的優勢何在？

    1：表現和(hé)內(nèi)容相分離

    将設計(jì)部分剝離出來(lái)放在一個(gè)獨立樣式文件中，HTML文件中隻存放文本信息。符合W3C标準，微軟等公司均為(wèi)W3C支持者。這一點是最重要的，因為(wèi)這保證您的網站(zhàn)不會(huì)因為(wèi)将來(lái)網絡應用的升級而被淘汰。

    2：提高(gāo)搜索引擎對網頁的索引效率

用隻包含結構化內(nèi)容的HTML代替嵌套的标簽，搜索引擎将更有(yǒu)效地搜索到你(nǐ)的網頁內(nèi)容，并可(kě)能給你(nǐ)一個(gè)較高(gāo)的評價。

    3：代碼簡潔，提高(gāo)頁面浏覽速度

對于同一個(gè)頁面視(shì)覺效果，采用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小(xiǎo)得(de)多(duō)，代碼更加簡潔，前者一般隻有(yǒu)後者的1/2大(dà)小(xiǎo)。對于一個(gè)大(dà)型網站(zhàn)來(lái)說，可(kě)以節省大(dà)量帶寬。并且支持浏覽器(qì)的向後兼容，也就是無論未來(lái)的浏覽器(qì)大(dà)戰，勝利的是IE7或者是火(huǒ)狐，您的網站(zhàn)都能很(hěn)好的兼容。

    4：易于維護和(hé)改版

樣式的調整更加方便。內(nèi)容和(hé)樣式的分離，使頁面和(hé)樣式的調整變得(de)更加方便。你(nǐ)隻要簡單的修改幾個(gè)CSS文件就可(kě)以重新設計(jì)整個(gè)網站(zhàn)的頁面。現在YAHOO,MSN等國際門(mén)戶網站(zhàn)，網易，新浪等國內(nèi)門(mén)戶網站(zhàn)，和(hé)主流的WEB2.0網站(zhàn)，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大(dà)勢所趨。

3、新手學習div＋css，該如何入門(mén)？

    學習任何東西都是一樣，從小(xiǎo)學、中學、大(dà)學，除了學習知識外就是去學習方法！要想學好網頁标準化布局，要先擯棄傳統的table布局時(shí)形成的固定思維方式，用div布局，從內(nèi)容出發。而且必須要對html标簽有(yǒu)很(hěn)好的認識，起碼見了要知道(dào)它怎麽用，幹什麽的。因為(wèi)一個(gè)樣式它是不可(kě)能脫離HTML頁面的，HTML不與樣式結合的話(huà), CSS就失去了存在的意義。接下來(lái)就是css了，必須能寫出常用css的樣式。

    學習方式可(kě)以從網上(shàng)找現在的教程或資料學，如本站(zhàn)2010年9月新增的《十天學會(huì)web标準（div+css）》、6月新增的《新手常見問題系列視(shì)頻教程》和(hé)之前的CSS網頁布局初級入門(mén)教程、DIV+CSS網頁設計(jì)視(shì)頻教程（後邊兩系列有(yǒu)點老，建議學習前邊的），都是非常不錯的教程，相信通(tōng)過這一系列的學習，你(nǐ)就可(kě)以很(hěn)快入門(mén)了。

    另外推薦幾本書(shū)：《CSS權威指南》《網站(zhàn)重構》《網站(zhàn)布局實錄》《HTML參考大(dà)全》。閱讀一本書(shū)，一般來(lái)說第一次要先把整個(gè)書(shū)通(tōng)讀一遍，不理(lǐ)解的也要往下看，在往下看的過程中你(nǐ)也許會(huì)找到那(nà)個(gè)問題的答(dá)案。看完後你(nǐ)有(yǒu)一個(gè)大(dà)概的印象，但(dàn)一定有(yǒu)很(hěn)多(duō)不明(míng)白的地方，沒關系，繼續往下看。第二遍你(nǐ)就要邊看邊做(zuò)學習筆記了，把你(nǐ)認為(wèi)是重點的部分寫上(shàng)，還(hái)有(yǒu)，你(nǐ)覺得(de)有(yǒu)疑問的部分也要記下，帶着疑問看下去，如果沒有(yǒu)答(dá)案，你(nǐ)可(kě)以去BBS上(shàng)發一個(gè)貼子，好心人(rén)還(hái)是很(hěn)多(duō)的，提示一句：“一定要學會(huì)如何去問問題!” 。你(nǐ)還(hái)要上(shàng)機去練習書(shū)上(shàng)的例子，最讓你(nǐ)困惑的：“一是記不住，二是對概念的理(lǐ)解有(yǒu)誤(這一條可(kě)能是書(shū)譯的不好，另外就是你(nǐ)的理(lǐ)解不對)”，對于第一條你(nǐ)就要樹(shù)立信心，堅持再堅持下去。當你(nǐ)到達終點時(shí)你(nǐ)回發現一切都是順理(lǐ)成章的事。因為(wèi)你(nǐ)努力了，努力了就會(huì)有(yǒu)回報，有(yǒu)結果。

4、使用什麽軟件來(lái)布局頁面和(hé)編輯css呢？

    關于這個(gè)問題，隻要已經能達到會(huì)手寫的程度，用什麽軟件都可(kě)以，比如記事本。對于新手來(lái)說推薦使用DreamWeaver、微軟出的FrontPage的替代品Microsoft Expression Web或TopStyle。