返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

DIV布局入門

時間:2018-12-28 13:42來源:知行網www.ayratv.icu 編輯:麥田守望者

使用DIV布局已經成為一種習慣,越來越感覺到得心應手了。總結一下整個學習過程,把這個思路寫出來,希望能對初學者有所啟發。

傳統的表格布局的特點

1.表格布局的根本是結構層和表現層混雜在了一起,當我們只修改一些簡單頁面時,或者感覺沒有什么影響。但如果在哪一天,我們需要重復修改成百上千的頁面,問題就接踵而來了。假如由于某些原因我們需要把背景替換成黑色,邊框變成1px黃色,文字變成白色,所有文字居中。使用表格布局的網頁,可能就要一頁一頁的去修改。

2.我們在使用表格布局的時候通常會一個表格加一個表格嵌套的寫下去,這樣的代碼冗長繁瑣,維護麻煩,重復代碼較多,增加了帶寬的消耗和成本。

3.表格布局由于表現形式的要求,經常會出現表格的多重嵌套,而瀏覽器對于表格的解析是將一個表格全部全部下載解析后才會呈現出來,過多的嵌套嚴重影響網頁打開的速度。

使用WEB標準布局的優勢

1.數據的多樣顯示。制作的網站可以調用不同的樣式表適應不同的設備,做到內容與設備無關。

2.保持整個站點的視覺一致性變得非常簡單,在網站改版修改樣式表就可以輕松改版。

3.由于結構清晰,網站數據的集成、更新和頁面處理更加方便靈活。

4.代碼簡潔,對于頁面打開速度有很大的改善。

5.關于兩者的更多特點請看DIV布局和table布局的區別 。

DIV布局入門知識

剛開始的時候理解結構和表現的不同之處可能很困難,特別是初學的時候不習慣于思考文檔的語義結構時。當結構和表現分離后,用CSS文檔來控制表現就是很容易的一件事了。理論上講,我們應該用一個HTML文檔來保存內容與結構,用一個CSS文檔來控制整個文檔的表現。抽象點說,內容可以理解成最基礎層,然后是附加上去結構層和表現層,最后再給他們加上“行為”,這樣一個基本的網站頁面就布局完成了。下面分別說下內容、結構、表現和行為的概念。

1.內容:內容就是頁面實際要傳達的真正信息,可以包含數據、文檔或者圖片等。注意這里強調的“真正”,是指純粹的數據信息本身。比如一個不包含任何輔助的信息,比如導航菜單、裝飾性圖片、完全沒有經過排版的古詩等。舉個例子:我的博客的導航菜單“首頁,SEO專題,WEB標準專題,關于我”些就是屬于真正要傳達的信息,這就是所謂的“內容”。

2.結構(Structure):我們可以看到上面的文本菜單是不經過排版的隨便放置的,讓人難以閱讀和理解,我們必須給它格式化一下。比如我們看到許多古詩通常有標題、作者、章、節、段落和列表等內容,所有這些就是頁面的結構。結構使頁面內容更加具有邏輯性和易用性。

3.表現(Presentation):我們雖然定義了結構,但是內容還是原來的樣式沒有改變,例如導航的字體沒有變大,導航也沒有背景,沒有任何修飾。所有這些用來改變內容外觀的東西,我們稱之為“表現”。下面的圖片就是對上面的內容文本用表現處理過后的效果:
關于“表現”的范例圖片

4.行為(Behavior):行為就是對內容的交互及操作效果。例如,我們最熟悉不過的JavaScript。使用JavaScript我們可以使內容動起來,可以判斷一些表單提交,可以響應讀者的一些操作等。我們在上網時經常遇到的留言版像這類動作都會用到行為。

小提示:網頁標準并不是完全不使用表格

在我剛接觸網頁標準時,我進入了一個誤區,那就是在布局網站時完全不再使用table標簽。后來在遇到一些數據表時,比如公司員工聯系表,產品與型號對應表等,發現在這個時候表格非常好用。園子想提醒大家,對于表格型數據,還是應該使用table。在HTML和XHTML里,表格不僅僅是行(row)和單元格(cell),還有很多其他元素,運用好這些元素,你就可以更好的設計出有親合力的表格布局。

------分隔線----------------------------
標簽(Tag):DIV布局
------分隔線----------------------------
推薦內容
猜你感興趣
pk10赛车直播视频