DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 什麼是DIV+CSS?有哪些優勢?
什麼是DIV+CSS?有哪些優勢?
編輯:布局實例     

  對於新手或入門者來說,往往會有這幾方面的疑問:

  什麼是DIV+CSS?實質是什麼?

  DIV+CSS的優勢何在?

  新手學習div+css,該如何入門?

  使用什麼軟件來布局頁面和編輯css呢?

  能不能提供幾個實例具體講解一下怎麼來實現?

  諸如此類的問題,是新手們最常問的。回答這些問題,也是仁者見仁,智者見智了。不過從嚴格的角度來講,div+css的叫法是不對,只不過像我們這些菜鳥級的都這樣叫,習慣了而已。

  1、那麼DIV+CSS是什麼意思呢?實質是什麼?

  要弄懂這個意思,首先你要對網頁有一定了解,對和div相對的table布局有很好的認識,這樣理解起來就不難了。

  DIV+CSS是網站標准(或稱“WEB標准”)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標准中,不再使用表格定位技術,而是采用DIV+CSS的方式實現各種定位。 用div盒模型結構給各部分內容劃分到不同的區塊,然後用css來定義盒模型的位置、大小、邊框、內外邊距、排列方式等。

  CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫,它是一種用來表現 HTML 或 XML 等文件式樣的計算機語言。在我們用table布局時,都曾接觸和應用到css。

  DIV元素是用來為HTML文檔內大塊(block-level)的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。

  簡單地說,div 用於搭建網站結構(框架)、css 用於創建網站表現(樣式/美化),實質即使用XHTML對網站進行標准化重構,使用CSS將表現與內容分離,便於網站維護,簡化html頁面代碼,可以獲得一個較優秀的網站結構便於日後維護、協同工作和搜索引擎蜘蛛抓取。

  當然不是所有的網頁都需要用div布局,例如數據頁面、報表之類的頁面的時候還是會用table,web 標准裡並沒有說要摒棄table。所謂DIV+CSS布局的叫法讓人更為擔心,不要讓DIV成為Table的替代品,多層嵌套的DIV會嚴重影響代碼的可閱讀性,活用HTML為我們提供的標簽吧。

  2、DIV+CSS的優勢何在?

  1:表現和內容相分離

  將設計部分剝離出來放在一個獨立樣式文件中,HTML文件中只存放文本信息。符合W3C標准,微軟等公司均為W3C支持者。這一點是最重要的,因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。

  2:提高搜索引擎對網頁的索引效率

  用只包含結構化內容的HTML代替嵌套的標簽,搜索引擎將更有效地搜索到你的網頁內容,並可能給你一個較高的評價。

  3:代碼簡潔,提高頁面浏覽速度

  對於同一個頁面視覺效果,采用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小得多,代碼更加簡潔,前者一般只有後者的1/2大小。對於一個大型網站來說,可以節省大量帶寬。並且支持浏覽器的向後兼容,也就是無論未來的浏覽器大戰,勝利的是IE7或者是火狐,您的網站都能很好的兼容。

  4:易於維護和改版

  樣式的調整更加方便。內容和樣式的分離,使頁面和樣式的調整變得更加方便。你只要簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。現在YAHOO,MSN等國際門戶網站,網易,新浪等國內門戶網站,和主流的WEB2.0網站,均采用DIV+CSS的框架模式,更加印證了DIV+CSS是大勢所趨。

  3、新手學習div+css,該如何入門?

  學習任何東西都是一樣,從小學、中學、大學,除了學習知識外就是去學習方法!要想學好網頁標准化布局,要先擯棄傳統的table布局時形成的固定思維方式,用div布局,從內容出發。而且必須要對html標簽有很好的認識,起碼見了要知道它怎麼用,干什麼的。因為一個樣式它是不可能脫離HTML頁面的,HTML不與樣式結合的話, CSS就失去了存在的意義。接下來就是css了,必須能寫出常用css的樣式。

  學習方式可以從網上找現在的教程或資料學,如本站2010年9月新增的《十天學會web標准(div+css)》、6月新增的《新手常見問題系列視頻教程》和之前的CSS網頁布局初級入門教程、DIV+CSS網頁設計視頻教程(後邊兩系列有點老,建議學習前邊的),都是非常不錯的教程,相信通過這一系列的學習,你就可以很快入門了。

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

  4、使用什麼軟件來布局頁面和編輯css呢?

  關於這個問題,只要已經能達到會手寫的程度,用什麼軟件都可以,比如記事本。對於新手來說推薦使用DreamWeaver(本站主頁提供有下載入口)、微軟出的FrontPage的替代品Microsoft Expression Web或TopStyle。

  5.能不能提供幾個實例具體講解一下怎麼來實現?

  關於實例方面,本站推出一篇詳細的從制作效果圖、頁面切割、div布局、css定位美化等從頭到尾的詳細教程:http://www.aa25.cn/div_css/911.shtml,共分三篇,希望對大家有所幫助。如果直接學習這篇文章有點難,那麼就從《十天學會web標准(div+css)》的第一天開始學習喲!

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