利用Flash交互技術實現個性化網頁布局

王懷宇 李景麗

1 河北大學數學與計算機學院 河北保定 071000 2 保定學院信息技術系 河北保定 071000

利用Flash交互技術實現個性化網頁布局

王懷宇1,2李景麗2

1 河北大學數學與計算機學院 河北保定 071000 2 保定學院信息技術系 河北保定 071000

隨著計算機技術的發展和網站訪問者的多樣化，單一的網頁布局形式已經不能滿足用戶需求，個性化的網頁布局形式必將成為網站發展的方向。就目前固定式網頁布局形式所存在的一些問題，提出利用Flash交互技術和CSS技術實現網頁個性化布局的思路和方法。

Flash交互技術；個性化；網頁布局；層疊樣式表

Author’s address

隨著Internet的發展，網絡在人們學習和生活中發揮著越來越大的作用，成為人們獲取知識和信息的重要平臺。但是大多數網站采用單一的網頁布局形式，缺乏用戶個性化的設置，忽視用戶多樣性的特點。目前，網頁的布局形式都是在設計階段固定下來，只有網站的設計維護人員才可以修改和變動，網站的瀏覽者只能接受和習慣這種一成不變的網頁構成形式，缺乏個性化的符合個人習慣的布局環境。對于網頁設計人員來說，網頁的內容決定了網頁的布局形式，網頁所采用的布局形式是網頁內容的最佳呈現方式，隨意改動布局結構可能會影響網頁的瀏覽效果。這種擔心不無道理。雖然有些網站也做了用戶個性化定制的嘗試，但僅限于某些版塊的顯示與隱藏。在網絡技術和計算機技術不斷發展的今天，尤其是網絡用戶的多樣化需求的增加，這種單一的方式帶來越來越多的弊端。如果忽視用戶的這些需求，長此以往，千篇一律的網頁布局會使用戶慢慢地產生審美疲勞，從而失去訪問的興趣。如何能夠讓用戶按照個人習慣設置個性化的網頁布局，對于網站的進一步發展有著重要的現實意義。

1 固定式網頁布局存在的弊端

1.1 固定式布局不能充分發揮顯示設備的特性

當前網頁布局的整體設計都是按照現有顯示設備的最低配置來進行的，設計者需要滿足大多數訪問者的最低顯示需求。現在顯示設備的最低配置是17英寸顯示器，橫向分辨率標準為1024，因此，絕大多數的網頁都是按照1024這個寬度來進行設計和規劃。但是，目前主流的顯示設備多為19英寸以上，甚至24英寸，且大多為寬屏顯示器。以19英寸寬屏顯示器為例，標準顯示分辨率為1440，按照1024分辨率來設計網頁布局，大約有30%的寬度被浪費了。

1.2 固定式布局版塊顯示順序不能按用戶興趣排列

網頁各版塊在網頁上的位置在設計時順序固定，設計者是根據大多數人關注的重點而設計的顯示順序和顯示位置，而不同的瀏覽者的關注重點是有差異的，瀏覽者更愿意把他們關注的重點和興趣點放到網頁的醒目位置上和排列在最前面。

1.3 固定式布局不能改變內容顯示區域

網頁內容的顯示區域，特別是瀏覽內容的顯示局限在一個固定大小的區域內，導致內容顯示分屏或分頁顯示，使瀏覽內容邏輯上不夠完整，需要反復翻頁或滾屏觀看，從而造成思維不連續性。瀏覽者更希望可以通過調整顯示區域的大小從而在一屏上看到完整或相對完整的內容，保持邏輯上的連續性。

2 個性化布局

所謂個性化布局就是針對用戶個體的需求而進行的布局設計。由于網站在設計時就已經針對大多數用戶進行了布局設計，即默認的網頁布局，本文所指的網頁個性化布局就是在默認的網頁布局基礎上，用戶可以根據需要而自行調整。因此，只有登錄用戶才能進行個性化設置。網站將每一個注冊用戶的個性化布局參數保存在數據庫中，每次用戶登錄，系統從數據庫中讀取用戶瀏覽環境的布局參數，并按照這些參數顯示個性化的瀏覽環境。登錄用戶可以通過個性化布局設計器，調整網頁布局的位置和形態，并把調整后的個性化參數存儲到用戶數據庫中，從而實現個性化布局。

圖1 個性化網頁設計布局

圖2 可拖動影片剪輯模型

3 個性化布局的設計與實現

目前網頁的設計方法主要采用內容與形式分離的方法，即DIV+CSS，網頁的內容主要放置在DIV容器中，通過CSS（層疊樣式表）控制DIV的顯示方式。因此，個性化布局設計主要是對CSS樣式表的控制，通過修改CSS樣式表的相關參數來更改網頁的布局。將網頁布局中可以調整的DIV容器的名稱及相關參數保存在數據庫中，每次修改都根據調整后的參數重新生成CSS樣式表文件和網頁文件。下面就個性化布局的設計和實現方法進行介紹。

3.1 數據庫設計

網頁布局的設置主要涉及DIV容器的相關屬性的設置，包括寬度、高度、顯示方式等。因此，需要設置相關的數據表保存相關參數。

DivPara(ID,DIVname,Width,Height,PDIVid,Ord er,Show)，主要用于保存調整后的布局參數。Width和Height分別為DIV容器的寬度和高度；PDIVid為父DIV容器的ID；Order為當前DIV在父DIV容器中的排列次序；Show確定當前DIV容器的可見性，Show為1表示顯示，為0表示隱藏。

DivDefault(ID,DIVName,Width,Height,PDIVid,Or der,Show)，主要用于保存缺省的布局參數，便于用戶在調整失敗后快速恢復默認布局。

User（ID,Name,…,Personal），在用戶表中添加Personal字段，用來判斷用戶是否進行過個性化布局設置。如果為0，表示沒有進行個性化設置，直接調用默認網頁即可；否則，讀取DivPara表中的個性化參數，生成個性化布局頁面。

3.2 個性化布局的交互設計

實現Web交互的方法很多，本文采用Flash作為個性化布局的設計工具。Flash作為一種可視化的交互設計工具，既可以設計版面布局，又可以實現對頁面元素進行交互控制。

1）布局界面設計。根據網頁的DIV布局，利用Flash的繪圖功能設計可以定制的用戶界面，并標注可以進行個性化設置的部分，如圖1所示。網頁的頁眉（包括用戶登錄區、標題和導航）和頁腳（包括快速導航和版權）部分不在調整的范圍之內。用戶可以調整的主要限于主體部分，由于DIV容器的嵌套結構導致DIV層次不同，相同層次的容器用相同的顏色標識，只有同層的DIV才能進行位置的調整。DIV高度的調整任意，DIV寬度的調整受上層DIV容器寬度的限制，最外層DIV的寬度受顯示設備的寬度限制。

2）交互設計。利用Flash中影片剪輯元件可操作性強的特點，將可以定制的部分設計成影片剪輯元件，從而實現鼠標交互，尤其是拖放操作的控制。影片剪輯模型設計如圖2所示。

①寬度、高度感應區：主要用于感知鼠標指針的位置是否為影片剪輯邊界，當鼠標指針進入感應區，鼠標指針改為縮放樣式，可以拖動邊界改變區域大小（注：只可以大于默認寬度和高度）。當網頁的整體寬度改變時，內部各部分的寬度按比例進行調整；當內部容器的寬度和高度改變時，相鄰位置的容器自動進行匹配調整。

圖3 個性化布局參數的導入和保存流程

圖4 用戶個性化界面生成過程

②位置感應區：位于區域下部和右部，當拖動的影片剪輯的注冊點與感應區重合時，表示2個區域的位置需要互換或調整；當停止拖動操作時，相關的區域進行調整。

③顯示隱藏按鈕：控制本區域顯示還是隱藏，隱藏狀態下，影片剪輯折疊顯示。

3）導入和保存布局參數。調整結束后，利用Flash與ASP的接口通過ASP，將修改后的布局參數保存到數據庫的DivPara表中，以便下次登錄時顯示個性化布局。同樣，在設置個性化布局時，通過ASP讀取數據庫的DivPara表中的布局參數，將參數傳遞給Flash生成個性化設置界面。個性化布局參數的導入和保存流程如圖3所示。

3.3 個性化布局頁面的實現

用戶登錄后，系統首先驗證用戶是否進行過個性化界面的設置，如果沒有，就直接打開系統默認的布局頁面；否則從數據庫中讀取用戶的個性化參數表中的相關數據，通過個性化頁面生成器生成登錄用戶的CSS文件，然后再生成相應的網頁文件，傳遞給用戶，從而呈現用戶定制的網頁布局界面。個性化布局頁面實現的流程圖如圖4所示。

實現個性化布局的前提是網頁采用DIV+CSS設計方式，各個部分要盡可能地采用獨立的DIV容器設計，保持各部分設置的最大靈活性和操作的簡易性。如果DIV容器嵌套過多，將增加檢測的難度和用戶設置的復雜性，從而消耗更多的系統資源而導致系統響應速度降低，用戶興趣下降。

4 結束語

隨著計算機技術的發展和網站訪問者的多樣化，單一的網頁布局形式已經不能滿足用戶需求，個性化的網頁布局形式必將成為網站發展的方向。只有通過網頁交互方式與用戶充分的溝通，了解用戶的特點和多樣化需求，進而挖掘和發現用戶潛在的需求，才能設計出用戶滿意的網站。

[1]方惠敏.基于人性化網站界面設計的用戶建模[J].計算機技術與發展,2008(2):188-190

[2]聶璐.論網頁設計中的人性化因素[D].長沙:湖南師范大學,2010

[3]劉贛華.個性化Web頁面研究設計[J].科技廣場,2009(1):48-49

[4]趙英杰.Flash網頁編程寶典[M].北京:北京希望電子出版社,2002

Making Use of Flash Interactive Technology to Realize Personalized Layout in Web Pages

//Wang Huaiyu, Li Jingli

1 College of Mathematics and Computer Science, Hebei University, Baoding, Hebei, China 071000
2 Department of Information Technology, Baoding University, Baoding, Hebei, China 071000

With the development of computer technology and diversification of website visitors,single layout form in web pages will not be able to meet the needs of users, personalized layout in web pages will be the trends of website’s development. According to the existing problems of the current fixed layout in web pages, this article puts forward the concepts and methods of realizing personalized layout in web pages using Flash interactive technology and CSS technology.

Flash interactive technology; personalized; layout in web pages; CSS

TP393.092

B

1671-489X(2011)12-0096-03

10.3969/j.issn.1671-489X.2011.12.096