與我們合作
我們專注:網(wǎng)站策劃設(shè)計、網(wǎng)絡(luò)多媒體傳播、網(wǎng)站優(yōu)化及網(wǎng)站營銷、品牌策略與設(shè)計
主營業(yè)務(wù):網(wǎng)站建設(shè)、移動端微信小程序開發(fā)、VI設(shè)計、網(wǎng)絡(luò)運營、云產(chǎn)品·運維解決方案
有一個品牌項目想和我們談?wù)剢?
您可以填寫右邊的表格,讓我們了解您的項目需求,這是一個良好的開始,我們將會盡快與您取得聯(lián)系。當然也歡迎您給我們寫信或是打電話,讓我們聽到您的聲音
您也可通過下列途徑與我們?nèi)〉寐?lián)系:
地 址:蘇州吳中區(qū)東環(huán)路999號正基大廈A座
電 話:0512-65982570
手 機:189-1350-2096
網(wǎng) 址:http://www.jnsmsl.com
快速提交您的需求 ↓
什么是DIV+CSS?做網(wǎng)站有哪些優(yōu)勢?
發(fā)布日期:2014/2/16 13:41:11
對于新手或入門者來說,往往會有這幾方面的疑問:
什么是DIV+CSS?實質(zhì)是什么?
DIV+CSS的優(yōu)勢何在?
新手學習div+css,該如何入門?
使用什么軟件來布局頁面和編輯css呢?
能不能提供幾個實例具體講解一下怎么來實現(xiàn)?
諸如此類的問題,是新手們最常問的?;卮疬@些問題,也是仁者見仁,智者見智了。不過從嚴格的角度來講,div+css的叫法是不對,只不過像我們這些菜鳥級的都這樣叫,習慣了而已。
1、那么DIV+CSS是什么意思呢?實質(zhì)是什么?
要弄懂這個意思,首先你要對網(wǎng)頁有一定了解,對和div相對的table布局有很好的認識,這樣理解起來就不難了。
DIV+CSS是網(wǎng)站標準(或稱“WEB標準”)中常用的術(shù)語之一,通常為了說明與HTML網(wǎng)頁設(shè)計語言中的表格(table)定位方式的區(qū)別,因為XHTML網(wǎng)站設(shè)計標準中,不再使用表格定位技術(shù),而是采用DIV+CSS的方式實現(xiàn)各種定位。 用div盒模型結(jié)構(gòu)給各部分內(nèi)容劃分到不同的區(qū)塊,然后用css來定義盒模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。
CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫,它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計算機語言。在我們用table布局時,都曾接觸和應(yīng)用到css。
DIV元素是用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標簽和結(jié)束標簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的,其中所包含元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。
簡單地說,div 用于搭建網(wǎng)站結(jié)構(gòu)(框架)、css 用于創(chuàng)建網(wǎng)站表現(xiàn)(樣式/美化),實質(zhì)即使用XHTML對網(wǎng)站進行標準化重構(gòu),使用CSS將表現(xiàn)與內(nèi)容分離,便于網(wǎng)站維護,簡化html頁面代碼,可以獲得一個較優(yōu)秀的網(wǎng)站結(jié)構(gòu)便于日后維護、協(xié)同工作和搜索引擎蜘蛛抓取。
當然不是所有的網(wǎng)頁都需要用div布局,例如數(shù)據(jù)頁面、報表之類的頁面的時候還是會用table,web 標準里并沒有說要摒棄table。所謂DIV+CSS布局的叫法讓人更為擔心,不要讓DIV成為Table的替代品,多層嵌套的DIV會嚴重影響代碼的可閱讀性,活用HTML為我們提供的標簽吧。
2、DIV+CSS的優(yōu)勢何在?
1:表現(xiàn)和內(nèi)容相分離
將設(shè)計部分剝離出來放在一個獨立樣式文件中,HTML文件中只存放文本信息。符合W3C標準,微軟等公司均為W3C支持者。這一點是最重要的,因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡(luò)應(yīng)用的升級而被淘汰。
2:提高搜索引擎對網(wǎng)頁的索引效率
用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標簽,搜索引擎將更有效地搜索到你的網(wǎng)頁內(nèi)容,并可能給你一個較高的評價。
3:代碼簡潔,提高頁面瀏覽速度
對于同一個頁面視覺效果,采用CSS+DIV重構(gòu)的頁面容量要比TABLE編碼的頁面文件容量小得多,代碼更加簡潔,前者一般只有后者的1/2大小。對于一個大型網(wǎng)站來說,可以節(jié)省大量帶寬。并且支持瀏覽器的向后兼容,也就是無論未來的瀏覽器大戰(zhàn),勝利的是IE7或者是火狐,您的網(wǎng)站都能很好的兼容。
4:易于維護和改版
樣式的調(diào)整更加方便。內(nèi)容和樣式的分離,使頁面和樣式的調(diào)整變得更加方便。你只要簡單的修改幾個CSS文件就可以重新設(shè)計整個網(wǎng)站的頁面?,F(xiàn)在YAHOO,MSN等國際門戶網(wǎng)站,網(wǎng)易,新浪等國內(nèi)門戶網(wǎng)站,和主流的WEB2.0網(wǎng)站,均采用DIV+CSS的框架模式,更加印證了DIV+CSS是大勢所趨。
3、新手學習div+css,該如何入門?
學習任何東西都是一樣,從小學、中學、大學,除了學習知識外就是去學習方法!要想學好網(wǎng)頁標準化布局,要先擯棄傳統(tǒng)的table布局時形成的固定思維方式,用div布局,從內(nèi)容出發(fā)。而且必須要對html標簽有很好的認識,起碼見了要知道它怎么用,干什么的。因為一個樣式它是不可能脫離HTML頁面的,HTML不與樣式結(jié)合的話, CSS就失去了存在的意義。接下來就是css了,必須能寫出常用css的樣式。
學習方式可以從網(wǎng)上找現(xiàn)在的教程或資料學,如本站2010年9月新增的《十天學會web標準(div+css)》、6月新增的《新手常見問題系列視頻教程》和之前的CSS網(wǎng)頁布局初級入門教程、DIV+CSS網(wǎng)頁設(shè)計視頻教程(后邊兩系列有點老,建議學習前邊的),都是非常不錯的教程,相信通過這一系列的學習,你就可以很快入門了。
另外推薦幾本書:《CSS權(quán)威指南》《網(wǎng)站重構(gòu)》《網(wǎng)站布局實錄》《HTML參考大全》。閱讀一本書,一般來說第一次要先把整個書通讀一遍,不理解的也要往下看,在往下看的過程中你也許會找到那個問題的答案。看完后你有一個大概的印象,但一定有很多不明白的地方,沒關(guān)系,繼續(xù)往下看。第二遍你就要邊看邊做學習筆記了,把你認為是重點的部分寫上,還有,你覺得有疑問的部分也要記下,帶著疑問看下去,如果沒有答案,你可以去BBS上發(fā)一個貼子,好心人還是很多的,提示一句:“一定要學會如何去問問題!” 。你還要上機去練習書上的例子,最讓你困惑的:“一是記不住,二是對概念的理解有誤(這一條可能是書譯的不好,另外就是你的理解不對)”,對于第一條你就要樹立信心,堅持再堅持下去。當你到達終點時你回發(fā)現(xiàn)一切都是順理成章的事。因為你努力了,努力了就會有回報,有結(jié)果。
4、使用什么軟件來布局頁面和編輯css呢?
關(guān)于這個問題,只要已經(jīng)能達到會手寫的程度,用什么軟件都可以,比如記事本。對于新手來說推薦使用DreamWeaver、微軟出的FrontPage的替代品Microsoft Expression Web或TopStyle。

