由于本人才疏學淺,對DIV+CSS也沒有深入徹底研究透,只是憑自己的一點認識而寫,希望高手不要扔磚。
廢話少說,直接進行正題。
現(xiàn)在全國大大小小的網(wǎng)站都在搞一場技術(shù)“革命”,就是所謂“網(wǎng)站重構(gòu)”說簡單點就是DIV+CSS進行網(wǎng)站制作。用DIV+CSS代替?zhèn)鹘y(tǒng)的Table制作框架和美化頁面。
在重構(gòu)之前,肯定要了解為什么重構(gòu),為什么要用DIV+CSS技術(shù)?了解了這個問題,那么大家才有使用此技術(shù)重構(gòu)網(wǎng)站的動力。各大CSS學習網(wǎng)站和教程無一例外都會列舉出以下使用DIV+CSS的好處:
1、內(nèi)容和形式分離,網(wǎng)頁前臺只需要顯示內(nèi)容就行,形式上的美工交給CSS來處理。生成的HTML文件代碼精簡,更小打開更快。
2、改版網(wǎng)站更簡單容易了,不用重新設(shè)計排版網(wǎng)頁,甚至于不用動原網(wǎng)站的任何HTML和程序頁面,只需要改動CSS文件就完成了所有改版。對于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易。
3、搜索引擎更友好,排名更容易靠前。
以上三點是N多好處最吸引人,最突出的三點。我就這三點進行一一介紹:
{dy}點、內(nèi)容和形式分離,網(wǎng)頁前臺只需要顯示內(nèi)容就行,形式上的美工交給CSS來處理。生成的HTML文件代碼精簡,更小打開更快。
這個是DIV+CSS技術(shù)最現(xiàn)著的特點,也是CSS存在的根源。wq的顛覆現(xiàn)在傳統(tǒng)(table)網(wǎng)頁設(shè)計的技術(shù)。所有現(xiàn)在用table制作的內(nèi)容,都可以用CSS來解決掉,而且解決的更wm,更強大。不需要大家再表格套表格,只需要用div套div就可以實現(xiàn)以往表格套表格所有的美工,這樣的結(jié)果就是使用div+CSS技術(shù),讓生成的網(wǎng)頁文件大小更精簡,更小。table時代,一個頁面表格達到10個以上是非常普遍的事情,但是現(xiàn)在用DIV+CSS,一個table都可以不用,就wq達到之前的效果,這就直接導(dǎo)致網(wǎng)頁文件大小比使用table時減少50%-80%,更節(jié)約各位站長的硬盤空間,訪問者打開網(wǎng)頁時更快,而且用div+CSS時,不像以往使用table時,必須把全部table讀取完了才顯示頁面內(nèi)容,現(xiàn)在是可以讀一個div就顯示一個效果,大家打開網(wǎng)頁不用等。好處真是明顯而強大。
這個優(yōu)點的確是顯著的,凡是使用傳統(tǒng)table建的網(wǎng)頁,內(nèi)容多的話,有時候達到30K左右都有可能,文件打了打開時,肯定就有0.0幾秒的延遲。使用DIV+CSS,由于沒有表格使用,你前臺打開看到的全是直接內(nèi)容,CSS文件都是導(dǎo)入鏈接的,是另一個文件,根本和HTML文件大小沒關(guān)系,這種生成的HTML文件,一個也就10K左右大小。文件數(shù)量少時看不出來,但是文件萬級以上時,還是會節(jié)約幾十M大小的。
這些優(yōu)點其實拿到現(xiàn)在來說,個人感覺用處不大,為什么呢?
因為table雖然生成的HTML文件要大一些,占空間多點,但是現(xiàn)在的虛擬主機空間幾百塊錢就可以達到3G以上,一個中小型門戶或是網(wǎng)站,wq夠用,就算不夠用,你數(shù)據(jù)量達到十萬級別以上,生成的HTML文件也用不了2G,這個成本其實對于中小型網(wǎng)站長來說wq可以不計。再說使用table說的是打開速度慢。這個在現(xiàn)在的網(wǎng)絡(luò)環(huán)境下面來說,也可以忽略的,現(xiàn)在大家上網(wǎng)都是用的寬帶,至少也是512K以上,一個網(wǎng)頁30K,打開也就一秒不到的時候,使用DIV+CSS也就快那么0.0幾秒,這基本上是大家感覺不到的。而且既然都是生成HTML,那對服務(wù)器來說影響的效果是一樣的,只要你的虛擬主機網(wǎng)絡(luò)穩(wěn)定,那么在table和div+css上就沒差別。
但是使用table制作網(wǎng)頁框架和表格時,全是選擇化制作的,也就是說不用大家去寫代碼,很簡單輸入邊框和行數(shù)列數(shù)就可以達到制作出來的要求,但是使用div+CSS時,wq是靠手寫代碼,一個表格寫四行代碼的話,如果一個頁面涉及十多個div表格生成,手寫代碼將超過50行,而且如果你數(shù)學不好,或是邏輯思維能力不強的話,你手寫出來的表格將是亂78糟,出現(xiàn)表格重疊和位置wq不正確。因為用div+css寫表格時,表格間的邏輯排列關(guān)系wq是靠自己手寫代碼判斷,如果你沒有很強的手寫代碼能力和邏輯性,你所花費的時間,比你用table制作時間至少是4倍左右。基本上一個頁面定義的ID和class類,完整頁面是不會少于20個的,一個ID或class手寫5句,你制作一個HTML頁面將超過100句代碼,當然其中很多是可以存成一個CSS文件來重復(fù)調(diào)用的。也就是說相同的頁面內(nèi)容的話,排版一樣的情況下,可以直接導(dǎo)入鏈接CSS來實現(xiàn)。
這個就很像之前生成HTML時,制作一個網(wǎng)頁模板。但制作這個模板花的時間是用table制作時的幾倍。這里有些人要說,但是我改版的時候,就只需要再寫一個css就可以了,不用再生成HTML了。那么我要說,當你再寫一個CSS文件改版時,我可能都已經(jīng)用table制作好一個頁面模板,而且還自動生成HTML全站的頁面了。這不是不可能的。
如果作為站長的你,對于手寫代碼不是特別有信心,成都建設(shè)網(wǎng)站邏輯思維能力不是特別強,建議還是使用傳統(tǒng)的table制作網(wǎng)頁更熟練和快捷。
第二點,改版網(wǎng)站更簡單容易了,不用重新設(shè)計排版網(wǎng)頁,甚至于不用動原網(wǎng)站的任何HTML和程序頁面,只需要改動CSS文件就完成了所有改版。
DIV+CSS對于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易,改版時,不用改動全站HTML頁面,只需要重新寫CSS,再用新CSS覆蓋以前的CSS就可以實現(xiàn)改版了。方便吧。
方便是方便了,但是一個網(wǎng)站,我想問一下是不是一個月就要改次版?或是半年就要改一次?估計這么頻繁的網(wǎng)站少的很哦。現(xiàn)在很多知名網(wǎng)站,行業(yè)的,門戶的,包括個人網(wǎng)站,最多也是一年改一次版。一年改一次版,你一年才用一次重新寫CSS,而且你寫的CSS時間所用時間,比我用table制作時慢一二倍(技術(shù)熟練情況下)。那我何必還要用CSS啊?我用table一樣可以完成的效果,二分鐘就做好了表格,你用css寫要用十分鐘。
全國中小型站長的網(wǎng)站數(shù)據(jù)量一般也就在十萬條數(shù)據(jù)之內(nèi),現(xiàn)在用自動批量生成HTML功能,生成完也用不了幾個小時時間吧。費這點神一年也就一次,沒什么大不了的。
所以除非你網(wǎng)站一個月改一次版,那么你還是用最熟練和方便的方法來實現(xiàn)網(wǎng)頁設(shè)計為妙。
當然如果你CSS已經(jīng)學的如火純青了,而且是代碼狂人。你當我說的廢話。
第三點,搜索引擎更友好,排名更容易靠前。
當我看到CSS優(yōu)點有這個時,我冷笑了二聲。翻譯和編寫者真的是太不了解中國的網(wǎng)絡(luò)環(huán)境了,這條拿到國外來說,的環(huán)境下,wq可行。但是拿到中國以百度為壟斷的網(wǎng)絡(luò)環(huán)境下,wq可以忽略。
搜索引擎主要的排名依據(jù)不管百度和google,都是title和權(quán)重為主。他們不可能拿到這二點不用,而是用你的content內(nèi)容來為主抓數(shù)據(jù)吧。而且最重要的一點,中小型網(wǎng)站主80%左右的流量是百度來的,百度現(xiàn)在wq是人工在排序,你以為你用了div+CSS百度就先排你在前面啊??如果你這樣認為你就是太不配做中國站長了。
退一萬不說,就算你DIV+CSS有這優(yōu)點,能讓你頁面在百度搜索時排前幾位,你以為這個位置你能坐的長啊?不出一個月只要你這頁面給你帶去的流量達到一定數(shù)量,百度K你沒商量。(我是指K這個關(guān)鍵字)
綜上所述,個人感覺DIV+CSS不能太迷信它的很好很強大,它作為制作網(wǎng)頁,美化網(wǎng)頁的一個重要輔助是很強大方便的。可以彌補table制作框架和表格時的很多不足和美工上的缺點,但是wq只用它來做,太費時費力,對于全國中小型網(wǎng)站長來說,真的不太適合。我個人覺得用table+DIV+CSS是{zh0}的組合,也是最省時省力的辦法。
我的廢話太多,寫了一長竄,不足之處非常多,認識也不夠深入。大家不要介意哈。
PS:很多CSS資料宣傳的CSS生成網(wǎng)頁代碼少,指的是生成的HTML文件的代碼少,因為這種HTML文件根本沒有美化過的,美化過程語句全在CSS文件中,一個CSS文件代碼是奇多mb。
一個HTML要配合一個CSS文件來用,不能單獨使用。
{dy}題:在 <div class=tzh>I am TZH!</div> 這段語句中有什么錯誤?
1. 標點符號問題。這其實也是大家最容易忽視的問題,其實就是小小的兩個引號,就造成了這個錯誤。雖然很多瀏覽器在不加引號的情況下仍然能正確識別渲染。但是這樣想要通過嚴格的W3C XHTML國際標準是不可能的,請大家記住等號后面一定要接引號。正確寫法:<div class="tzh">I am TZH!</div>
第二題:在 <SPAN class="tzh">TZH is me!</SPAN> 這段語句中有什么錯誤?
2. 大小寫注意。這和{dy}個問題一樣,都是特別容易忽視的細節(jié)問題。在W3C標準中是{jd1}不允許大寫的,其中我仍記得我在檢測一段javascript代碼的時候,由于為了讓自己一目了然寫出的也被判斷成了錯誤,原因就是L不能大寫。正確寫法:<span class="tzh">TZH is me!</span>
第三題:在 <p>I am TZH!</p><br><p>TZH is me!</p> 這段語句中有什么錯誤?
3. <br />標簽問題。對于強制換行標簽<br />來說,很多新手都分不清它和<br>的區(qū)別,甚至在FCKeditor編輯器中有時都會時不時冒出個<br>來充當<br />。雖然同樣很多瀏覽器都能自動糾錯,將<br>作為<br />識別。但{zh0}的編輯方法還是推薦大家使用Dreamweaver進行編輯,當你按下Ctrl+Enter,就會自動寫上一個<br />。正確寫法: <p>I am TZH!</p><br /><p>TZH is me!</p>
第四題:在 <h1>~tangzhehao~hey~</h1> 這段語句中有什么錯誤?
4. 注意標簽結(jié)束后面接的標點符號,很多標簽結(jié)束后都不能接特殊標點符號,比如這里的"~"波浪號,但你要問,那叫我怎么用呢?那就使用ISO Latin-1字符集(ISO Latin-1 Character Set),在這里,查找到“~”波浪號相對應(yīng)的字符集十進制編碼是~,然后就用這個十進制編碼代替~波浪號,記住{zh1}的分號不能丟。在ISO Latin-1字符集中以已命名實體(Named entity){zy}先,十進制編碼(Decimal code)其次,也就是說,一個符號在同時有十進制編碼和已命名實體的時候,優(yōu)先選用已命名實體而不使用十進制編碼。
P.S.:ISO Latin-1字符集地址:http:///css/z_iso.html
第五題:在 <form id="54tzh"></form> 這段語句中有什么錯誤?
5. 注意id和class特殊情況。W3C XHTML1.0 標準中規(guī)定,在id或class中,{dy}個字符是不能是數(shù)字的,必須是字母。正確寫法:<form id="tzh45"></form>
第六題:在 <img src="logo.gif"> 這段語句中有什么錯誤?
6. <img>標簽注意。W3C XHTML1.0 標準中規(guī)定,在<img>標簽中,必須包括alt元素。正確寫法:<img alt="Logo" src="logo.gif">
第七題:在<script language="JavaScript"> 這段語句中有什么錯誤?
7. <script>標簽注意。W3C XHTML1.0 標準中規(guī)定,在<img>標簽中,必須包括type元素。正確寫法:<script language="JavaScript" type=text/javascript>
第八題:在<div><h1>I am TZH!</div></h1> 這段語句中有什么錯誤?
8. 注意標簽開始結(jié)束順序?qū)?yīng)。正確寫法:<div><h1>I am TZH!</h1></div>
9. 注意特殊套裝。比如:<dl><dd><ul><li>等一些特殊標簽,套裝順序中缺一不可。必須按照順序?qū)?lt;dl><dd><ul><li>四個標簽寫wq。類似的還有許多。
10. 注意未打開標簽。所謂未打開來自于W3C檢測,這類錯誤顯示的錯誤是 is not open,翻譯過來也就是未打開的意思。如果按照中文的意思來理解就是有首無尾或者有尾無首。通常這種錯誤出現(xiàn)的原因都是因為有一段代碼在修改的時候被刪除,而沒有顧及到相對較遠的結(jié)束或者開始標簽。
W3C CSS國際標準:
1. 少用偏門。類似break-word斷行,z-index手動分層,還有像垂直對齊等等這些偏門CSS{zh0}少用,因為不一定所有瀏覽器都支持,而且極難通過W3C檢測。
2. center不是float的值。很多新手都會把center誤認為是float的值,而偏偏不是如此。center只是text-align的值。
3. 對齊不能包括兩個值。很多新手會在float或者text-align中填寫兩個值,比如:float:left top。這是不允許的,瀏覽器也無法識別。
4. 滾動條顏色{zh0}不要自定義。很多瀏覽器不能正常識別自定義顏色的滾動條,況且很多自定義顏色都不能通過W3C。
5. 單獨滾動條設(shè)置。現(xiàn)在經(jīng)常使用overflow-x(橫向滾動條)或者overflow-y(縱向滾動條),在設(shè)置這個的時候經(jīng)常會發(fā)現(xiàn)并不是所有的客戶端上都有效果,大家在設(shè)置的時候{zh0}在body和html同時進行設(shè)置。然而這個CSS也不是CSS2.1支持的(CSS2.1支持overflow,同時定義橫縱滾動條),直到CSS3才支持這種定義方式。盡量少用。
6. background和color顏色相同會受到警告。
在{zh1},如果你的站通過了W3C的檢測之后,將獲得檢測通過W3C認證Logo,下圖(左圖為W3C XHTML 1.0通過,右圖為W3C CSS通過):