DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 暈倒:“用web2.0來制作符合標准的頁面”
暈倒:“用web2.0來制作符合標准的頁面”
編輯:關於網頁技巧     

今天有人和我談一個網站開發項目,當說到具體要求時,他給我來了這麼一句“用web2.0來制作符合標准的頁面”,我當場暈倒,心想你不懂也別裝啊,不過最後還是決定進行一次面談,可是他的這句話卻引起了我對網站重構的重新思考。

web2.0是一個歷史性概念,是一個階段,更是一種互聯網模式,但絕對不是一種技術;而web標准是一系列標准的集合,它的核心是內容,結構,表現和行為的徹底分離(我自己將內容也添加進去了),這對於以後改版和維護是十分方便的,如果要說對浏覽速度有多麼大的改進,我不感苟同。

說到重構,當然得從內容說起,因為任何的改進都是為了更好的顯示內容。那什麼是內容?內容應該是頁面實際要傳達的真正信息,包含數據、文檔或者圖片等,從本質上簡潔地講,內容就是指最原始的數據,是構成頁面的基礎。

下面就得主要說頁面重點–結構了,因為脫離了結構的內容幾乎不能使用,一個具有良好語義的結構會使內容更加具有邏輯性和易用性,所以說內容和結構是無法分割的整體,也許這也是標准未把內容分離明確指出的原因。

一提起結構,很多人大腦裡就迸出“用div+css布局”的概念,我先不管這種意識的對錯,因為我一直很喜歡先弄清楚一個事物的概念:結構目前劃分為兩部分,一是語義結構,二是代碼結構,語義結構是靠標簽自身的語義產生(附注:關於到底什麼是語義,我一直沒有大搞明白,不過現在自己可以明確的一點是:語義含有部分結構的概念,卻不等於結構,同樣語義也和樣式無關),代碼結構則是面向程序的,需要人工的參與。下來說我對上面那種意識的看法,首先我認為布局這個詞匯是不應該出現的,也許這都是IE惹的禍,另外必須糾正一個錯誤的概念,標准是提倡用xhtml+css而不是div+css,這個就得歸罪於那些推廣標准的朋友了,不能為快速取得成效而迷惑學習者啊,開個玩笑。既然說到div與table了,我想順便說下二者的區別:div有語義且是面向代碼結構的,它代表部分,用於在文檔中定義一個分割,通過分割來展現xml化的節點結構,通過分割產生具有結構的行,關於節點和行的具體應用,在即將出世的xhtml2.0中已經出現了,它用section代表節點,line表示行;table的重心應該是在產生數據列,顯示表狀數據,而絕不應該用來劃分結構。但這時候可能有朋友要提出問題了:如果顯示的表狀數據是單列多行,那麼使用ul/ol不也可以實現嗎?假如你真有如此疑問,那我得說你不清楚表狀數據的概念了,表狀數據指擴展趨勢是列的數據,所以當你預計擴展的趨勢是產生列的時候,哪怕它只有一列也應該使用table,而不能運用列表,因為ul/ol的重心是在產生數據級上,對於二者的正確把握和應用,關鍵得看個人對未來頁面結構的預見性.

不往下說了,好象有點跑題了,回到結構上來,根據設計給出的效果圖,我們在開始之前應通盤考慮所有要素, 爭取用通用的結構來獲得相同的效果, 而不是不斷定義那些小巧的div單元,從而努力達到設計中最理想的境界:前台閉著眼睛都能知道後台輸出的是什麼樣的xhtml結構代碼,為了這一目的我們就必須得固定xhtml,具體實現方法就是用H系列來劃分頁面的大結構,用div來模塊化局部區域。

在模塊化局部的時候,由於xhtml中有意義的專用元素可能不夠用,且它又不能象XML那樣創建自己的元素,所以就必須通過添加id或class來賦予它們額外的意義。關於二者的區別,簡單來講就是,id是先找到結構/內容,再給它定義樣式;class是先定義好一種樣式,再套給多個結構/內容。具體說來,在XHTML的結構中,科學的方法是大結構尤其外圍元素盡量用id,而class盡量在結構內部使用,使其具有通用性,但最好不要讓class包含id,它倆之間有點類似於父子關系,但絕不理解為就是父子或爺孫關系。

關於表現和行為我不想多說什麼,只進行一下簡單的描述:沒有添加樣式的純xhtml結構是有UE的,但沒有UI,這就使得css的地位永遠都不可能超越xhtml的核心地位,當然我並沒有說表現不重要,因為就我個人而言,一份沒有調料的燒烤或一部沒有藝術的電影對我都是沒有吸引力的。至於javascript,隨著對ajax的接觸和了解,越來越體會到了它的特效作用,不過站在行為層而言,它的使用更多是和CSS結合在一起的,這也就讓你在學習CSS時多了另一個任務。

原文連接:http://blog.5u96.cn/article.asp?id=30

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