網頁的制作中對於用div和css結構寫靜態頁目前已經很成熟,但許多新入行的朋友對於使用div和css結構還有很多誤區,這些誤區也是我曾經經歷過的並且被“老鳥”指正的地方,所以總結下來分享給大家,希望對寫網頁有所幫助。
1、用div+css結構制作靜態html網頁不等於徹底拋棄古老的table寫法。之所以不建議用table來布局網頁是因為在網頁加載很慢的時候要等table結構加載完成才能看到網頁,其次是table的布局沒有一定的語義,網頁代碼修改起來比較麻煩。
在寫一些欄目塊時,特別是數據分類較多,比如“求購信息”的欄目塊,頂部可能出現“發布人、發布時間、信息標題、聯系方式”等項目,像這樣的地方建議還是要用table來寫,因為table是專門用來寫數據表格的,控制起來很方便,而且符合語義要求,還有頁面中出現類似excel數據的地方,也建議用table來寫。
2、div+css結構不等於通篇區域都用div包起來。遇到一個區塊就用一個div標簽,這樣你寫完代碼後全篇都是div,失去了語義的存在價值,區塊修改起來也不容易找到,合理的利用dl、ul、ol、span、等標簽,不僅讓你的網頁看起來條理清晰,而且修改起來很方便,見名知意,比如你要修改一個新聞列表,先找到新聞列表所在的div或者dl標簽,然後再找其中的ul,修改具體內容就很容易。
3、並不是css文件一定要和html代碼分開。之所以將css文件和html分開,是因為有些css同時為多個頁面服務,而用戶訪問時css文件可以緩存在本地,這樣下次再訪問其他頁面時就不用重復加載css,可以節約時間和流量,提高訪問速度,但是如果你的頁面有些區域的css是獨一無二的,其他頁面用不到的,就不用把css剝離出去,直接用style標簽包括在html網頁裡就可以。
4、用div和css寫網頁一定要在不同類型和不同版本的浏覽器進行測試。建議最好是同時打開多個浏覽器,如果說你認為你的網站訪客還沒有養成使用火狐、谷歌等浏覽器的習慣,那最少也得兼容ie6、7、8幾個版本,由於軟件限制,沒有辦法在一個電腦上裝不同版本的多個浏覽器,因此要借助版本模擬軟件,我常用的是ietest,用來測試網頁足夠了。
對於經驗不太豐富的頁面制作者來說最好是寫一個小區塊就在不同浏覽器下看一看效果,如果出現問題可以及時調整代碼,不要只在一個浏覽器裡測試,一口氣寫完,那麼當你在其他浏覽器測試時發現網頁奇形怪狀時你就抓狂了(我曾經就這麼干過)。
總結的要點暫時就這麼多,剩下的就是拼寫代碼的功力了,建議新手還是不要用代碼提示類的軟件,最好是自己動手寫出完整的語句,當你寫熟練的時候你會發現你寫代碼的速度比用代碼提示要快的多。