視覺描繪模型 (CSS2)

HTML 最主要的缺點(其他任何類似的標記語言亦是如此)在於文件的內容與格式是互相混和在一起的。舉例來說,HTML 的 標 籤讓瀏覽器將某個元素顯示成一個表格。你可以自行設定表格各項屬性來改變表格的外觀風貌,例如寬度與對齊方式。然而如果你想要修改頁面中所有表格的外觀, 那麼你必須逐一修改各個表格。進一步來說,如果妳要修改整個網站中所有表格的外觀,那麼你必須一個一個修改網站中每個頁面的每一個表格!這樣的工作別的不 說,光是冗長乏味以及浪費的時間就足夠讓人難以接受了。

不過,結構化的 HTML 原始碼撰寫方式所帶來的彈性不足的問題通常還是最不需要擔心的部分。當你使用了一些進階技巧,例如分割視窗,你便有可能將一些仍在使用舊版本瀏覽器的訪客 拒於門外。因此為了彌補這個問題,你必須另外設計一個頁面讓那些不支援分割視窗的瀏覽器使用,這表示你現在必須製作與維護兩個版本的頁面了。

如果你在這個使用了分割視窗的頁面裡頭又加上一些由 標籤所組成的圖層,那麼類似的問題又會再度發生。目前為止僅有 Netscape Navegator 4.x 瀏覽器支援這個 標籤,因此如果你用了這個標籤,那表示你必須為其他不支援這個標籤的瀏覽器另外設計一個頁面,這麼一來你的同一個頁面現在便有了第三個版本要設計與維護了。

藉由將每個格式化的元素視為一個包含內容的容器(container),CSS-2 的視覺描繪模型(visual rendering model)能夠讓你將頁面的內容與格式完全分離開來。在每個這樣的容器裡面可以包含用來容納次內容的其他容器,就像一個表格里面可以包含標題與內容格子 (cells)那樣。要注意的是,這個容器的概念僅適用於結構化的元素,例如段落(paragraphs,P 標籤),區塊(divisions, DIV 標籤)或者表格( tables,TABLE 標籤),對於其他純粹用來設定樣式的標籤(例如 [b] , [i] 等標籤)而言是不適用的。

將頁面元素視為容器這個觀念為網頁設計開啟了一扇新的大門,並且終於提供了一套能夠將頁面內容與樣式分離開來的 機制。你 可以藉由改變該容器中的內容編排方式來控制某個容器中所包含內容的版面配置。而藉由控制容器的座標設定,你可以將該容器精確地定位在網頁的適當位置上。此 外你更可以製作出各種不同類型的容器,例如表格,分割視窗甚至圖層等等。

當你在樣式表中設定一些進階元素(例如分割視窗或者圖層),你並不需要擔心舊版本瀏覽器會無法顯示這個頁面,而 且也不再 需要為不同瀏覽器製作並且維護同一頁面的不同版本。你只需要在樣式表裡面定義好各項樣式設定,支援樣式表的瀏覽器會精確地顯示你所設定的樣式,而其他不支 援的瀏覽器則會直接忽略他們看不懂的樣式表設定。

更有趣的部分還在後頭。你曾經想像如果能夠在同一個地方控制整個網站的各種進階格式設定的話,網站的維護工作會有怎樣的 改變嗎?CSS-2 便提供了這樣的功能。你只需要將網站的樣式定義記錄在一個外部獨立的樣式表檔案裡面即可。當你要修改網站的樣式設定的時候,只需要修改這個外部獨立樣式表 檔案,網站中所有連結到這個樣式表的頁面都會同時反應你的修改。而由於這些外部樣式表可以用來設定表格,分割視窗以及圖層等等元素的樣式,你可以很輕鬆地 大幅改變整個網站的外觀與感覺!

0 Comments:

 
© 2008 Blogger Template Layout Design by [ Fanchie AirHead ]