基于模板和ＣＳＳ技術的Ｗｅｂ頁面定制

摘 要：提出了一種將內容定制與布局定制相結合的解決方案，在使用模板技術完成內容定制的基礎上，使用腳本和CSS技術實現了布局定制，使得用戶能隨意調整頁面的內容和布局，給予用戶更大的自定義空間。

關鍵詞：定制； 布局； Web應用； 模板； 層疊樣式表

中圖分類號：TP311

文獻標志碼：A

文章編號：1001-3695(2008)07-2100-04



Web page customization based on template and CSS technology

LUO Wei， CHEN Wei

(Laboratory for Internet Software Technologies， Institute of Software， Chinese Academy of Sciences， Beijing 100080， China)

Abstract:This paper proposed a solution which combined page content customization with layout customization.This solution used template technology to realize content customization， and used script and CSS technology to implement layout customization. After applying it， the users can adjust the content and layout of the pages according to their wishes， thus boosting customization extent to a higher level.

Key words：customization;layout; Web application; template; CSS(cascading style sheets)



0 引言

Web 1.0時代的網站，所有的內容完全由網站建設者來提供。建設者為了維持網站的生命力，通常需要花費大量的精力來收集新素材，然后將它們編輯成HTML文檔發布作為網站的更新。然而，網站建設者的精力畢竟是有限的，他們能獲得的素材也有很大的局限。單靠這樣的模式，網站難以保證持久的生命力^[1]。

Web 2.0的正式提出是在2004年第一屆Web 2.0大會上。在會議的開場白上，Tim O’Reilly和John Battelle總結了他們認為的表現了Web 2.0應用特色的一些關鍵原則。其中包括重要的一條：豐富的使用者體驗^[2]。事實上，如果將目前不斷涌現的Web 2.0應用與舊的Web 1.0應用進行比較，一個突出的區別就體現在兩者的用戶體驗上。舊式應用的內容更加固定、更新少、用戶能參與的程度低；而新式應用強調用戶參與的重要性，它應當提供豐富且輕量級的在線工具，供用戶向整個社區提供新的數據^[3]。很多內容如社區論壇、blog、評論等均由用戶來提供和更新，用戶的參與極大地增強了網站的生命力。

Web 2.0應用強調用戶參與的重要性，而要滿足不同用戶的需要，頁面就必須具備更強的可定制性。很多著名網站如Google、Yahoo!均為用戶提供了個人主頁的定制。在這里用戶可以保留自己需要的內容而去掉不需要的，可以按照自己的意愿安排這些元素的順序，從而盡可能地滿足自己的需要并且體現出自己的個性。新一代Web應用給了用戶更大的自定義空間，令用戶能夠設計出屬于自己的頁面。與舊式的Web應用的靜態頁面相比，可定制的動態頁面更容易獲得用戶的青睞。然而，現有的頁面定制方式仍存在一定的局限性，如前面提到的網站，用戶通常只能在網站建設者提供的若干類內容中進行選擇，選擇的內容集合必須是所有內容集合的子集。盡管這些網站提供了豐富的內容供用戶選擇，用戶仍然受到一定的限制。

一種解決方案是根據用戶的要求，通過生成頁面的方式來產生一個包含用戶需要內容的頁面。這種方式突破了內容的限制，用戶提供內容的原則得到了體現。然而，這種生成頁面的布局方式通常比較死板，用戶很難修改各個元素的大小、位置。對于布局，通常不同的用戶有著不同的需求，統一死板的頁面并不總能滿足用戶的需要。如何讓用戶在能夠無限量地向頁面添加新內容的同時，又能夠隨心所欲地控制它們的布局。本文提出了一種基于模板和CSS技術的頁面定制解決方案，將內容定制與布局定制結合起來，使用戶不僅能選擇想要的內容，更能自己安排頁面的布局。

1 內容定制

1．1 內容定制的產生和發展

Web 2.0時代，改善用戶體驗成為網站設計過程中的重要考慮因素。不同用戶對同一個網頁可能有著不同的需要，如一個新聞主頁，不同的用戶所關注的新聞領域也不盡相同。如何讓用戶更快更精確地獲得自己關心的信息，而不必被不關心的信息干擾，很多網站采用內容定制技術來解決這個問題。

條件判斷式的內容定制是最常見的一種內容定制方式。在這種方式中，頁面首先被模塊化，如上述的新聞主頁，可以按照新聞領域的不同劃分成各個模塊。用戶進行定制時，每個模塊均提供了一個可選項，用戶通過選擇可選項來告知網站他是否需要對應的模塊。這些選項的值被網站記錄，在下次用戶加載該頁面時，將會按照這些值來判斷各個模塊是否顯示給用戶。

條件判斷式的內容定制給了用戶定制個人頁面的能力，不同的用戶可以各取所需，按照自己的需要安排頁面。用戶定制出的頁面是個性化的，用戶體驗大大地改善了。然而，這種定制方式在內容上有著限制，用戶只能在網站建設者提供的所有內容模塊中選擇。如前所述，網站建設者終究有著自己的局限性，用戶并不總能從他們提供的內容中找到自己想要的。

按照Web 2.0的思想，發布者不應再局限于網站建設者，網站用戶同時也可以是更新者^[1]。網站不再單單靠提供內容來吸引用戶瀏覽，而是通過提供服務讓用戶來發布自己的數據。這樣既提高了用戶對網站的認同感，同時又解決了更新的問題，大量的更新會吸引更多的用戶來瀏覽、發布，網站的生命力大大增強了。Flickr、YouTube以及一些博客網站就是靠這樣的模式獲得了巨大的成功。

這種完全由用戶提供數據并進行定制的模式，在帶來更大的靈活性同時也帶來了更大的實現難度。如果定制的對象是靜態頁面，目前常見的動態頁面技術（如ASP、JSP等）可以實現^[4]。但是當用戶定制的對象本身就是動態頁面時，就需要采用頁面生成技術預先完成動態頁面的生成。

1．2 頁面生成

對于將用戶提供的大量數據轉換成頁面，基于模板的頁面生成技術是一種常見的解決方案。通常，模板本身就是一個頁面，它包含了頁面加載時的所有顯示信息，包括頁面的布局、顏色、背景等，以及一些相對固定的內容，如站點的導航鏈接等。但是，模板本身包含的數據很少，主要的數據都存放在專門進行內容數據管理的地方，如數據庫中。

用戶通過網站提供的輸入接口，將要發布的數據傳遞到服務器數據庫保存。當有人請求相應的數據時，服務器會讀取數據庫中的內容數據，在現有頁面模板中嵌入這些數據，從而形成一個由用戶提供數據的頁面。圖1顯示了頁面生成的一般流程。



為了能夠在模板中適當的位置嵌入數據，必須在這些地方設置標記，如$title、$content對應文章的標題和內容。當頁面生成代碼解析模板時，會對這些標記進行替換，用從數據庫獲得的實際數據代替它們；而對于模板中的其他內容，則直接復制。這樣就生成了一個顯示格式特定而包含用戶數據的頁面。

將模板與數據分離，實現了頁面內容與其顯示風格的解耦合。當用戶想要更新數據時，他只需要關注所要提供的數據。用戶提交了新數據后，服務器也只需要處理這些數據，而不必關注頁面顯示。同樣，當用戶想要更改頁面風格及布局時，他（以及服務器）則只需要關注頁面模板，而不用關心數據庫中的內容數據。這樣的解耦使得系統的擴展性大大增強。

然而，這樣的系統往往沒有很強的頁面布局定制能力。頁面模板相對固定，用戶的選擇空間有限，而布局美觀又有很強的主觀因素，不同的用戶對頁面布局的要求通常是千差萬別的，有限的幾個模板并不總能滿足用戶的需求。

2 布局定制

2．1 問題分析

本文對已有的頁面生成技術進行了改進，使得在利用現有的使用頁面生成技術進行內容定制的基礎上，還能夠讓用戶對頁面布局進行調整和定制。

要使程序界面上元素的布局可調整，對于通常的客戶端程序是很常見的需求。由于客戶端技術提供了豐富的API，實現起來難度并不大。然而，當同樣的需求轉移到Web應用之上，情況就不同了。Web應用的特性是系統無關，無論用戶走到哪里，或是使用什么樣的設備，他只需要安裝有瀏覽器，而無須安裝任何依賴于操作系統的客戶端，就能順利地運行Web應用。這種靈活性是客戶端程序無法比擬的。

雖然有著更高的靈活性，Web應用在瀏覽器端的開發難度也較客戶端程序高得多。缺少了面向對象語言API的支持，Web應用只能通過瀏覽器端腳本來實現類似的效果。另外出于安全考慮，Web應用無法將大量的配置信息記錄到用戶的計算機上，而必須發送到服務器保存。

根據上面的分析，要使用戶能定制Web頁面的布局，主要面臨兩個問題：a)如何讓頁面元素的布局變得可調整。所謂布局調整，通常包括頁面元素的位置調整和大小調整。通過位置調整，用戶將元素移動到自己希望的位置；通過大小調整，用戶將元素尺寸變到自己認為合適的大小。有了這兩點，用戶便可以對頁面布局進行隨心所欲的調整。b)如何將用戶所作的調整保存下來。用戶所作的布局調整需要保存下來，這通常是指保存在服務器上，并且保證以后每次用戶訪問該頁面時都能加載該布局。這樣就保證了用戶定制的有效性。

對于第一個問題，即讓頁面元素布局可調整，在目前的Web技術下已經有了成熟的解決方案：通過頁面腳本（如JavaScript）對頁面DOM元素的style屬性進行修改，以達到令頁面布局變化的目的。DOM(document object model)即文檔對象模型，是由W3C制定的一組用于訪問、瀏覽和操作HTML與XML文檔的API接口，它與具體的語言及平臺無關^[5]。DOM對象的style屬性包含了該元素大量的顯示屬性，瀏覽器通過解析這些屬性來完成對DOM元素的最終顯示。使用頁面腳本對這些屬性進行修改，就能改變該元素的顯示效果。

而對于第二個問題，可以分為三步：將用戶對布局的修改從頁面抽出，發送到服務器端；然后按照特定方式保存以方便下次加載。前兩步都可以使用腳本技術完成。而對于布局保存的方式，CSS技術是一個很好的選擇。

CSS(cascading style sheets，層疊樣式表）是W3C定義和維護的標準，是一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。CSS最主要的目的是將文件的結構與文件的顯示分隔開來。這個分隔有許多好處：文件的可讀性被加強；文件的結構更加靈活；作者和讀者可自己決定文件的顯示；文件的結構簡化了^[6]。

通常，CSS由網站建設者來定義，主要用于描述頁面的顯示方式，如字體的顏色、背景、如何排列、邊緣、連線等。如果以后網站的顯示風格要改變，則只需要修改CSS即可，頁面的內容無須改動。要讓用戶能夠定制頁面布局就需要賦予用戶定義CSS的能力。這樣一來，用戶修改頁面的布局，只是修改了CSS文件，而頁面內容無須修改，大大縮小了問題的范圍。用戶對布局的修改被記錄成CSS格式，不同的用戶可以加載相同的頁面文件和不同的CSS屬性，這保留了重用頁面文件的可能。

2．2 方案描述

2．2．1 頁面布局調整

并不是每個用戶對新技術都有足夠的悟性。好的Web 2.0系統必須提供簡明的用戶界面，讓各類用戶都能方便地上手^[3]。在選擇使用什么樣的操作來完成頁面元素的位置和大小修改時，按照上述理念，操作過程應當能盡可能地符合用戶的習慣。在實際項目中使用了目前多數圖形化界面程序選用的方式：在鼠標左鍵按下并拖動的情況下，讓頁面元素的位置或大小隨鼠標的拖動而變化，直到鼠標左鍵松開為止。但是，由于要完成大小和位置兩種變化，實際上需要兩個頁面元素來響應上面的操作。在常見的Windows操作系統中，如果用戶點擊的是窗口上方的標題欄，則相應的動作是窗口移動；如果用戶點擊的是窗口的邊框，則相應的動作是窗口大小的調整。同樣，在頁面中要完成頁面元素的大小和位置調整，也需要兩個元素來響應用戶的點擊。對于一個頁面元素，點擊什么地方進行位置移動、點擊什么地方進行大小調整可以有很多不同的設計。在后面將要介紹的實際應用項目中，采取了在一個表單控件（如文本框、下拉框等）外圍套上一個div元素作為載體的做法，如果點擊在表單控件上，則完成控件（及div）大小的調整；如果點擊在外圍的div上，則完成控件（及div）位置的調整。

在定義了上面的操作后，就可以進一步將一個操作分解成一系列步驟。比如調整大小，包括以下幾步：

a)監視鼠標左鍵點擊事件，如果用戶進行了點擊并且點擊對象是某個控件，則開始對鼠標移動事件進行監視；

b)監視鼠標左鍵松開事件，如果用戶松開了鼠標左鍵，則解除對鼠標移動事件的監視；

c)如果在鼠標移動事件被監視下發現了鼠標有移動，則根據鼠標的新坐標計算控件的新大小，這可以通過更新元素style屬性的width和height值實現^[7]。

調整位置的過程與上述過程類似，只是修改的是style中的top和left屬性。不管使用怎樣的瀏覽器端腳本技術，布局調整的基本方式均類似。在實際項目中使用的是JavaScript腳本，上述步驟實際上對應了三個回調函數。圖2顯示了從用戶執行調整操作到頁面元素布局改變的完整流程。

需要注意的是，在進行鼠標坐標計算時，不同瀏覽器的坐標表示方式并不相同，需要分別考慮。另外根據設計的需要，還需要考慮一些邊緣情況，如元素大小是否應該有上限和下限，是否在用戶的拖拽到計算出的元素大小超出這個范圍時進行一些特殊處理。



2．2．2 頁面布局的提取、發送與保存

布局經過調整后，頁面元素的style屬性的一些值發生了改變。想要以后的頁面均保持相同的布局，就需要將這些值提取出來，并進行持久化保存。然而，由于不同瀏覽器的實現方式不同，并沒有一種統一的方法來提取元素的style屬性值，仍然需要分瀏覽器來考慮。對于最常見的微軟IE瀏覽器，可以使用元素的currentStyle屬性^[8]。在頁面剛加載時，該屬性保存了元素被賦予的CSS屬性；當元素的位置或大小被調整，即元素的style屬性被修改后，currentStyle屬性則保存style屬性新被賦予的值。利用此特點，筆者總可以通過currentStyle屬性提取出元素當前的顯示屬性，這為之后的保存創造了條件。與IE不同，Mozilla Firefox和Opera并沒有currentStyle屬性。它們按照W3C規范，為window.defaultView對象提供了一個getComputedStyle()方法^[9]。它總是返回元素當前已計算出的style屬性值。

通過上面的屬性和方法，已經能夠獲得所需元素的style屬性值了。需要提取的屬性包括top、left、width、height，它們反映了元素的位置和大小信息。提取出這些屬性后，再將這些信息按照CSS2標準的形式轉換為文本，如#element-id {top:100; left:50; width:500; height:100;} 的形式。這樣，只要頁面再次加載時加載了這些CSS文本，對應元素就會按照這段文本賦予的值來布局。

提取出來并格式化好的CSS文本需要發送到服務器端保存。發送可以有多種方式，考慮到這個步驟只需要服務器返回一個表示發送成功與否的狀態值，而不需要對頁面進行全面刷新，可以利用AJAX技術的局部刷新特性，使用xmlHttpRequest來發送^[10]。

CSS保存時，需要考慮到將來的使用方便。常見的CSS使用方式有三種^[11]：

a)連接到一個外部的樣式表。如某頁面想要加載位于style文件夾中的style.css，可以在頁面中作如下聲明：

〈link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\" /〉

當頁面加載時，該.css文件也會加載。

b)使用style元素在文檔中嵌入，如

〈style type=\"text/css\"〉

〈!--body{background-color: #FF0000;}--〉

〈/style〉

它將頁面背景設為紅色。

c)使用style屬性內聯，如

〈P style=\"color: red; font-family:′New Century Schoolbook′， serif\"〉

聲明了段落內文本的顏色和字體。

從瀏覽器端傳來的CSS文本可以很容易地按第一種和第二種方式保存。如果使用外部.css文件保存，需要為它確定一個文件名，它可以是用戶的ID、生成的日期等。只要與頁面文件中的link指向的.css文件名稱一致，那么僅僅只需要新建或修改這個.css文件，而無須對頁面文件作任何修改，就可以在再次加載頁面時令布局修改生效。但該方法也有弊端：有些瀏覽器(如Firefox)會對 .css文件進行緩存，這將導致服務器端 .css文件的修改有時不能被瀏覽器加載，需要多次刷新才能生效。如果使用第二種方式，則首先需要對CSS文本進行預處理，在其前后添加style標簽；然后對頁面文件進行修改，在頁面文件的任意位置嵌入CSS文本。這樣做的優點是CSS能及時生效，缺點是頁面文件將不能重復利用。

要使用第三種方式在頁面中嵌入CSS文本，需要對CSS文本和頁面文件分別進行解析，然后按照ID將CSS文本分散到頁面文件中。這種做法沒有前兩種效率高，并且容易出錯。

完成了CSS的保存，則只要下次頁面再次加載，這些CSS也會一起加載，用戶進行的布局定制也就生效了。

需要注意的是，使用上述的布局定制技術可能會產生一些問題。由于CSS是層疊的，越接近目標元素，CSS定義的優先級越高。如果生成的頁面本身在元素聲明處也使用了style屬性內聯，則保存在外部.css文件中的用戶定制的style效果會被覆蓋。在設計頁面生成方法時必須小心，應當盡可能地避免使用style屬性內聯。

圖3顯示了解決方案的完整流程。其中的第a）步是對圖2的概括。

3 實際應用

上述頁面定制解決方案在實際應用中取得了良好的效果。下面以一個實際項目中的應用為例。

測試管理工具（以下簡稱TM）的出發點是為了便于對軟件測試過程進行管理和跟蹤，其中涉及了軟件開發過程中兩個重要的概念，即需求與（測試）用例的管理功能。然而，不同的企業或機構對需求和用例的描述方式通常也不盡相同，如有的用戶認為用例應該有一個優先級屬性，并且它應該分為高、中、低三類來表示用例的重要程度。

滿足用戶特定的行業約束是提升用戶體驗的重要一環^[12]。為了滿足不同用戶的需要，TM提出了符合Web 2.0思想的定制功能，使用戶能夠按照自己的需要為需求和用例定義屬性。要實現上面需求，用戶只需在TM中為用例添加一個優先級屬性，并為它定義可選值（包括高、中、低）即可。

由于需求和用例描述屬性的不確定性，兩者的基本信息頁面是采用頁面生成技術按照用戶的配置產生的。然而，生成的頁面在布局上比較單一，并不總能滿足用戶的需要。引入了前文中描述的布局定制技術，希望能改善用戶體驗。

圖4是預覽頁面的初始布局，對其中的“需求描述”屬性對應的文本區域進行大小調整后，再對“RM需求編號”屬性和“保存”按鈕進行了位置調整。調整后的頁面布局如圖5所示。

應用上述頁面定制方案后，用戶對需求和用例的基本信息頁面有了極大的自定義空間，可以隨心所欲地調整表單控件的位置和大小，用戶體驗得到改善，達到了最初的構想。



4 結束語

對于Web 2.0時代的Web應用，定制能力正逐漸成為其設計過程中的重要考慮因素。用戶對個性化的需求是多方面的，僅僅提供內容定制而忽視布局定制并不總能滿足用戶的需要。針對當前Web應用在頁面布局定制上存在的局限，本文提出了將頁面生成技術與基于CSS的布局定制技術相結合的解決方案，使用戶在擁有內容定制能力的基礎上，對頁面的布局也獲得了極大的自主權。在實際項目中應用該方案取得了良好的效果。同時，得益于CSS技術本身的特點，在已有頁面生成技術基礎上所要作的修改并不大，工作量主要體現在瀏覽器端腳本上。CSS與頁面的分離增加了設計的靈活性，實現了解耦合。



參考文獻： 

[1]KOLBITSCH J， MAURER H. The transformation of the Web:how emerging communities shape the information we consume[J]. Journal of Universal Computer Science， 2006， 12(2):187-213.

[2]Wikipedia.Web 2.0[EB/OL]. [2007-05-22]. http://en.wikipedia.org/wiki/Web_2.0.

[3]LIN K J. Building Web 2.0[J]. Computer， 2007， 40(5):101-102.

[4]翟大昆. 動態Web頁的JSP技術分析[J]. 云南大學學報：自然科學版， 2001， 23(2):104-107.

[5]WOOD L. Programming the Web: the W3C DOM specification[J]. IEEE Internet Computing， 1999， 3(1):48-54.

[6]Wikipedia.Cascading style sheets[EB/OL]. [2007-05-22]. http://en.wikipedia.org/wiki/Css.

[7]FLANAGAN D. JavaScript權威指南[M].張銘澤，等譯. 4版.北京: 機械工業出版社， 2003.

[8]Microsoft MSDN. Current style object[EB/OL]. [2007-05-22].http://msdn2.microsoft.com/en-us/library/ms535231.aspx.

[9]W3C. W3C DOM level 2 version 1.0 Java API:interface ViewCSS [EB/OL]. [2007-05-22]. http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/ViewCSS.html.

[10]呂林濤，萬經華，周紅芳. 基于Ajax的Web無刷新頁面快速更新數據方法[J]. 計算機應用研究， 2006， 23(11):199-200，223.

[11]HTML.NET.CSS的工作原理[EB/OL]. [2007-05-22].http://zh.html.net/tutorials/css/lesson2.asp.

[12]MILLER J. The user experience[J]. IEEE Internet Computing， 2005， 9(5):90-92.

注：“本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文。”