常州市新北區(qū)典雅商業(yè)廣場2號樓501、502、525、526
熟悉網站架設的朋友都知道,table結構的網站需要先對table進行加載,然后讀取table內的內容,而div是直接加載,所以div在一定程度上在加載速度優(yōu)于table結構的網頁。
但這是絕對的嗎?
答案是:不一定。
最近,鳳凰涅磐做了4個頁面進行測試,兩個形式的網頁,兩種網頁結構。同樣的數據量的情況下,首先的結論是div一定快于table結構,但快了多少呢? 經過同一個服務器測試,兩種結構的頁面、同一個數據量的情況,div快于table的速度微乎其微.以調用動易2006beat1核心為例:文章調用5個 欄目,各調用10個標題;下載調用2個欄目,各調用10個欄目;商城調用4個標題+圖片;圖片頻道調用6個圖片;網站統(tǒng)計隱藏調用。帶寬10M,經過精確 的讀秒計算,div結構的網頁僅僅比table快不到1秒。由此可見,如果table網頁結構的代碼優(yōu)化的好,速度一樣可以提升!!!
以模板263三個版本進行測試:測試環(huán)境:服務器雙至強,20M獨享帶寬,本地測試連接帶寬10M。午夜二時左右開始測試。以目前模板263使用的 VLO8測試時間為:4秒30左右可以全部打開;測試模板263 2006_V2版(div結構),全部打開為2秒30左右,測試模板263_2006_V3版(div)結構,全部打開時間為2秒。但需要注意的是,模板 263測試的DIV結構網站數據為不完全型,即:數據沒有全部加載,但所差的速度為1秒左右。
誠然,div作為一個行業(yè)標準會慢慢的走近我們,而作為從事這個行業(yè)的朋友和愛好者也是應該掌握的一種技術。但我個人認為,技術和思路都會存在一個盲區(qū), 而這個div就是一個網頁行業(yè)的盲區(qū),首先我們得知道,動態(tài)網站即使生成靜態(tài)頁面的情況,也是有從數據庫讀取的情況,比如:網站調查。網站統(tǒng)計等。。。。 所以在對于一定的動態(tài)網站上速度并沒有太大的提高;
而W3C標準很多代碼是不能用的,例如:iframe,這些如果去校驗的話,都屬于不合格產品而已。而對于div結構的網站,手工代碼很多,DW編輯中屬 于不可視狀態(tài)(即便可視,也不是瀏覽器的狀態(tài)),所以代碼需要自己一行一行的敲出來,而后臺的css也是同樣,而且css用量更大,因為div是用id進 行定義的。但可以肯定的是,div對手寫代碼鍛煉性極佳!!!
就我個人為例:寫一個首頁代碼div+css,用div需要寫一天左右,而這個時間,我能做出一個首頁+一個頻道的首頁了。例如:某些表格的邊框,我使用table的話,只要填充就可以,而div結構需要對這個ID進行定義,等于加大了css的工作量。
而且作為目前商業(yè)發(fā)展看,我們最后加工的網頁是交給客戶,div結構的網頁客戶如何維護?如果客戶能夠進行熟練的維護div結構的網頁(包含前臺的部分改 動),那么他可能已經不需要你了。而table客戶拿到后,客戶相對可以容易的維護和擴展。而相對的DIV結構的網站造價也要比table高,這僅僅是制 作的費用,還不包括后期的維護!
其實,這里并不是說div有多么的不好,本身模板263也開始制作和啟用div結構的模板,只是這種結構的網站需要熟悉代碼和結構人使用而已.
而目前動易系統(tǒng)部分結構還不支持div結構,比如:鏈接標簽、欄目模板(如果使用w3c標志會出現500錯誤),后臺編輯會去掉屬性引號(在w3c中這是絕對不允許的).
記得做完檢查:IE、Firefox 、Opera三種瀏覽器的兼容性。
這里只想告訴大家:技術不要盲從!!!
CSS+DIV是網站標準(或稱“WEB標準”)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區(qū)別,因為XHTML網站設計標準中,不再使用表格定位技術,而是采用css+div的方式實現各種定位。
CSS+DIV網站設計的優(yōu)勢
首先,CSS的極大優(yōu)勢表現在簡潔的代碼,對于一個大型網站來說,可以節(jié)省大量帶寬,而且眾所周知,搜索引擎喜歡清潔的代碼(其真正意義在于,增加了有效關鍵詞占網頁總代碼的比重),因此使用CSS+DIV的web標準制作的網站具有搜索引擎友好的一定優(yōu)勢。
其次,CSS+DIV制作的網站使得網站改版相對簡單,很多問題只需要改變CSS而不需要改動程序,從而降低了網站改版的成本。
盡管CSS+DIV具有一定的優(yōu)勢,不過現階段CSS+DIV網站建設存在的問題也比較明顯,主要表現在:
第一,對于CSS的高度依賴使得網頁設計變得比較復雜。相對于HTML4.0中的表格布局(table),CSS+DIV盡管不是高不可及,但至少要比表 格定位復雜的多,即使對于網站設計高手也很容易出現問題,更不要說初學者了,這在一定程度上影響了XHTML網站設計語言的普及應用。
第二,CSS文件異常將影響整個網站的正常瀏覽。CSS網站制作的設計元素通常放在幾個l外部文件中,這一個或幾個文件有可能相當復雜,甚至比較龐大,如果CSS文件調用出現異常,那么整個網站將變得慘不忍睹。
第三,對于CSS網站設計的瀏覽器兼容性問題比較突出。基于HTML4.0的網頁設計在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問題,但 CSS+DIV設計的網站在IE瀏覽器里面正常顯示的頁面,到火狐瀏覽器(FireFox )中卻可能面目全非(這也是為什么建議網絡營銷人員使用火狐瀏覽器的原因所在 )。CSS+DIV還有待于各個瀏覽器廠商的進一步支持。
用過div+css作個整個網站,如果是純粹的div的布局是比較麻煩的,尤其是你div里面嵌套div的,div布局的時候,你有些頁面效果還是要舍棄 一點的,比如圖片的圓角,這些如果套div比較麻煩,在一個div在VS2005設計器里面可能變形,如果過多的套div,你實現ajax拖動效果的時候 比較麻煩,所以我覺得眼下還是div+嵌套table比較好。
圓角——可以用div+css做出一樣漂亮的圓角,而且不用圖片,而且是寬度、高度自適應的
怎么實現?挖挖Google Talk的css模板
忘掉 div 和 table 吧!
html 最大的特點就是兼容性和自適應性。
使用了復雜的 div+css 后,你也許會發(fā)現在 IE 中很美觀的頁面在其他瀏覽器中看起來象一團漿糊。做一個網站而只服務與特定的瀏覽器,是不可取的。如果看到哪個網頁上有“請用 XXX 瀏覽”的字樣,一個字的評價“爛”!
html 瀏覽器會自動根據頁面的內容進行排版,這是普通的應用程序難以做到的。做出“請用 X*Y 以上分辨率瀏覽”的、在高分辨率顯示器上浪費了大量頁面左右空白而使用長長滾動條的、使用了固定字體大小的,統(tǒng)統(tǒng)都是從開發(fā)應用程序轉過來的“半路出家的 和尚”。
千萬不要模仿所謂的“XX優(yōu)秀網站設計”,那如果不是主辦方有意的推廣某種技術,就是作者的美術功底太過優(yōu)秀的。一個好的網站,只有先做到內容充實、簡潔、合理組織、方便閱讀,再去考慮錦上添花的修飾。
已經完全轉型div/css 剛開始還是比較麻煩,動不動就查樣式文檔,現在基本實現手寫。
推薦用VS2005布局,比如一個頁面在VS2005的標準樣式布局后,再將一個個樣式取出到單獨css文件中,這是比較快的辦法。
SPAN 和 DIV 的區(qū)別在于,DIV(division)是一個塊級元素,可以包含段落、標題、表格,乃至諸如章節(jié)、摘要和備注等。而SPAN 是行內元素,SPAN 的前后是不會換行的,它沒有結構的意義,純粹是應用樣式,當其他行內元素都不合適時,可以使用SPAN。
下面以一個實例來說明這兩個屬性的區(qū)別。
代碼:
SPAN標記有一個重要而實用的特性,即它什么事也不會做,它的唯一目的就是圍繞你的HTML代碼中的其它元素,這樣你就可以為它們指定樣式了。在此例中,標識符允許你將一個段落分成不同的部分。
還有一個標識符具有類似的功能,
DIV也被用來在HTML文件中建立邏輯部分。但與
SPAN不同,
工作于文本塊一級,它在它所包含的HTML元素的前面及后面都引入了行分隔。
效果:
SPAN標記有一個重要而實用的特性,即它什么事也不會做,它的唯一目的就是圍繞你的HTML代碼中的其它元素,這樣你就可以為它們指定樣式了。在此例中,標識符允許你將一個段落分成不同的部分。
還有一個標識符具有類似的功能,
DIV也被用來在HTML文件中建立邏輯部分。但與
SPAN不同,
工作于文本塊一級,它在它所包含的HTML元素的前面及后面都引入了行分隔
1.網頁背景色的設置
犯錯機率:很大
普遍性:較廣
犯錯可能性:懶/不知道
約2年前我曾發(fā)現21cn上出現過一次沒有設置背景色的情況,當時我用Email通知了他們,自此之后這個問題我從沒犯過。
絕大部分人的窗口背景顏色都是白色,但如果象我這樣個性的人,就會把windows窗口的背景顏色改成灰色或其他色,這樣一來,如果你沒有設置網頁的背景顏色的話,你以為正常的網頁在我的電腦上看起來會是一團糟。
2.Align center(自動居中)的濫用
犯錯機率:非常大
普遍性:非常廣
犯錯可能性:以為方便/以為好用
工作中,修改、維護別人的網頁是家常便飯,發(fā)現不少人有一個陋習:
在表格中的文字或圖片,你是這樣來令它居中、靠左或靠右過?
當有些表格很多、文字很多、內容分得很細的時候,愛用這種方法(它在DW里的快捷鍵是Ctrl+Alt+C,FP不知道是什么)的人往往會狂用,慘了,我 一碰到這樣的網頁就頭痛,為什么要用那么多
來居中呢?tell me why?難道表格沒有居中屬性嗎?為什么要加入這些垃圾代碼?特別修改的時候也不能把文字或圖片刪除了就能自動清除
這個代碼,還要手工去清除,在復雜點的網頁中就會無故地浪費維護者一筆時間。
建議使用 來居中,當需要多重定位的時候,才考慮,因為這個代碼并不好處理,所以能用表格代替就用表格替代。
3.重復使用實現相同功能的代碼、或雜七雜八的亂套代碼
犯錯機率:非常普遍
普遍性:非常普遍
犯錯可能性:復雜多樣
大家先來看一看下面的代碼:
標 題
你覺得這樣的代 碼看起來感覺怎么樣呢?
我不知道讀者有什么感覺,壓根我一看到這樣的代碼就會先自我麻木十來秒,這十來秒目的是為了找一個能表達我的思想感情的詞(我?你想反問我嗎?sorry~~,我一般不犯,因為我做網頁至少有一半以上的時間在瀏覽代碼,代碼中多了不該多的東西我一眼就能看出來。)。
看看上面的代碼,使用了2個class,4個font來定義2個文本,其實這樣的問題很多時候是在大家不斷的修改中產生的,對代碼不熟、或懶查看代碼、又 或不喜歡查看代碼的人犯這些問題特別嚴重,當然,事實上別人瀏覽這個網頁的時候,是沒有任何問題的,但維護的人就…………。
這些多余的垃圾代碼完全是可以省略掉的,其實上面的例子不夠嚴重,更恐怖的我都見過。
另外還有一個問題也要提提的,就是
...
和...,為什么要用它們呢?tell me why~~,有甚者是這樣的:
標 題
< /td>你覺得這樣的代碼看起來感覺怎么樣呢?
< /div>
看到這樣的代碼我是會很無奈的(更無奈的是我經常看到,而且必須看),我來簡化一下:
標題
你覺得這樣的 代碼看起來感覺怎么樣呢?
是不是看起來覺得這個世界安靜了很多?'標題'后面的文字完成可以定義在 的class里,就算不用css,再用多一個<.font>也沒問題,一樣很清爽。
4.表格不正確嵌套
犯錯機率:一般
普遍性:普遍
犯錯可能性:對這個不了解
其實這是一個街知巷聞的問題了,但還是不斷有人犯,不正確的嵌套表格,可能會令到你被老總叫到辦公室里臭罵一頓,會令到你以為正常的網頁用ADSL開2、3分鐘都開不了。
先講第一個問題,就是在一個大表格里不斷地嵌套表格,這樣會令到打開網頁的速度變慢(雖然說現在的IE改善了這一問題,但還是不建議這樣做),另一方面維護、修改也極不方便,一般來說簡單的套用是沒有問題的,甚至3、4層,但是不要把所有內容都放到一個表格里去。
第二個問題就是在一個大表格里放入所有內容,而其中包括一個免費的計數器代碼,嘻嘻,你猜有可能出現什么情況呢?其實也沒什么大不了的,最嚴重的就是你的IE象死機了一樣,什么都沒顯示。解決方法就是把計數器單獨放在一個表格里,別和其他內容一起放在同一表格。
5.寫代碼縮進的時候,不是使用Tab而是使用空格
犯錯機率:一般
普遍性:較少
犯錯可能性:不知道Tab更好用
這一個問題針對js、vbs、asp、php之類,html不能使用Tab會寫一點程序的都知道什么叫縮進,怎么樣縮進?有人使用空格,有人使用Tab,如果你是使用空格的,那么從現在起,改用Tab吧。
使用空格有二大壞處:1、縮進速度慢、修改速度慢。2、增大網頁體積,會影響速度。