王懷宇 李景麗

1 河北大學(xué)數(shù)學(xué)與計(jì)算機(jī)學(xué)院 河北保定 071000 2 保定學(xué)院信息技術(shù)系 河北保定 071000

利用Flash交互技術(shù)實(shí)現(xiàn)個(gè)性化網(wǎng)頁布局

王懷宇1,2李景麗2

1 河北大學(xué)數(shù)學(xué)與計(jì)算機(jī)學(xué)院 河北保定 071000 2 保定學(xué)院信息技術(shù)系 河北保定 071000

隨著計(jì)算機(jī)技術(shù)的發(fā)展和網(wǎng)站訪問者的多樣化，單一的網(wǎng)頁布局形式已經(jīng)不能滿足用戶需求，個(gè)性化的網(wǎng)頁布局形式必將成為網(wǎng)站發(fā)展的方向。就目前固定式網(wǎng)頁布局形式所存在的一些問題，提出利用Flash交互技術(shù)和CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁個(gè)性化布局的思路和方法。

Flash交互技術(shù)；個(gè)性化；網(wǎng)頁布局；層疊樣式表

Author’s address

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

1 固定式網(wǎng)頁布局存在的弊端

1.1 固定式布局不能充分發(fā)揮顯示設(shè)備的特性

當(dāng)前網(wǎng)頁布局的整體設(shè)計(jì)都是按照現(xiàn)有顯示設(shè)備的最低配置來進(jìn)行的，設(shè)計(jì)者需要滿足大多數(shù)訪問者的最低顯示需求?，F(xiàn)在顯示設(shè)備的最低配置是17英寸顯示器，橫向分辨率標(biāo)準(zhǔn)為1024，因此，絕大多數(shù)的網(wǎng)頁都是按照1024這個(gè)寬度來進(jìn)行設(shè)計(jì)和規(guī)劃。但是，目前主流的顯示設(shè)備多為19英寸以上，甚至24英寸，且大多為寬屏顯示器。以19英寸寬屏顯示器為例，標(biāo)準(zhǔn)顯示分辨率為1440，按照1024分辨率來設(shè)計(jì)網(wǎng)頁布局，大約有30%的寬度被浪費(fèi)了。

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

網(wǎng)頁各版塊在網(wǎng)頁上的位置在設(shè)計(jì)時(shí)順序固定，設(shè)計(jì)者是根據(jù)大多數(shù)人關(guān)注的重點(diǎn)而設(shè)計(jì)的顯示順序和顯示位置，而不同的瀏覽者的關(guān)注重點(diǎn)是有差異的，瀏覽者更愿意把他們關(guān)注的重點(diǎn)和興趣點(diǎn)放到網(wǎng)頁的醒目位置上和排列在最前面。

1.3 固定式布局不能改變內(nèi)容顯示區(qū)域

網(wǎng)頁內(nèi)容的顯示區(qū)域，特別是瀏覽內(nèi)容的顯示局限在一個(gè)固定大小的區(qū)域內(nèi)，導(dǎo)致內(nèi)容顯示分屏或分頁顯示，使瀏覽內(nèi)容邏輯上不夠完整，需要反復(fù)翻頁或滾屏觀看，從而造成思維不連續(xù)性。瀏覽者更希望可以通過調(diào)整顯示區(qū)域的大小從而在一屏上看到完整或相對(duì)完整的內(nèi)容，保持邏輯上的連續(xù)性。

2 個(gè)性化布局

所謂個(gè)性化布局就是針對(duì)用戶個(gè)體的需求而進(jìn)行的布局設(shè)計(jì)。由于網(wǎng)站在設(shè)計(jì)時(shí)就已經(jīng)針對(duì)大多數(shù)用戶進(jìn)行了布局設(shè)計(jì)，即默認(rèn)的網(wǎng)頁布局，本文所指的網(wǎng)頁個(gè)性化布局就是在默認(rèn)的網(wǎng)頁布局基礎(chǔ)上，用戶可以根據(jù)需要而自行調(diào)整。因此，只有登錄用戶才能進(jìn)行個(gè)性化設(shè)置。網(wǎng)站將每一個(gè)注冊(cè)用戶的個(gè)性化布局參數(shù)保存在數(shù)據(jù)庫中，每次用戶登錄，系統(tǒng)從數(shù)據(jù)庫中讀取用戶瀏覽環(huán)境的布局參數(shù)，并按照這些參數(shù)顯示個(gè)性化的瀏覽環(huán)境。登錄用戶可以通過個(gè)性化布局設(shè)計(jì)器，調(diào)整網(wǎng)頁布局的位置和形態(tài)，并把調(diào)整后的個(gè)性化參數(shù)存儲(chǔ)到用戶數(shù)據(jù)庫中，從而實(shí)現(xiàn)個(gè)性化布局。

圖1 個(gè)性化網(wǎng)頁設(shè)計(jì)布局

圖2 可拖動(dòng)影片剪輯模型

3 個(gè)性化布局的設(shè)計(jì)與實(shí)現(xiàn)

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

3.1 數(shù)據(jù)庫設(shè)計(jì)

網(wǎng)頁布局的設(shè)置主要涉及DIV容器的相關(guān)屬性的設(shè)置，包括寬度、高度、顯示方式等。因此，需要設(shè)置相關(guān)的數(shù)據(jù)表保存相關(guān)參數(shù)。

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

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

User（ID,Name,…,Personal），在用戶表中添加Personal字段，用來判斷用戶是否進(jìn)行過個(gè)性化布局設(shè)置。如果為0，表示沒有進(jìn)行個(gè)性化設(shè)置，直接調(diào)用默認(rèn)網(wǎng)頁即可；否則，讀取DivPara表中的個(gè)性化參數(shù)，生成個(gè)性化布局頁面。

3.2 個(gè)性化布局的交互設(shè)計(jì)

實(shí)現(xiàn)Web交互的方法很多，本文采用Flash作為個(gè)性化布局的設(shè)計(jì)工具。Flash作為一種可視化的交互設(shè)計(jì)工具，既可以設(shè)計(jì)版面布局，又可以實(shí)現(xiàn)對(duì)頁面元素進(jìn)行交互控制。

1）布局界面設(shè)計(jì)。根據(jù)網(wǎng)頁的DIV布局，利用Flash的繪圖功能設(shè)計(jì)可以定制的用戶界面，并標(biāo)注可以進(jìn)行個(gè)性化設(shè)置的部分，如圖1所示。網(wǎng)頁的頁眉（包括用戶登錄區(qū)、標(biāo)題和導(dǎo)航）和頁腳（包括快速導(dǎo)航和版權(quán)）部分不在調(diào)整的范圍之內(nèi)。用戶可以調(diào)整的主要限于主體部分，由于DIV容器的嵌套結(jié)構(gòu)導(dǎo)致DIV層次不同，相同層次的容器用相同的顏色標(biāo)識(shí)，只有同層的DIV才能進(jìn)行位置的調(diào)整。DIV高度的調(diào)整任意，DIV寬度的調(diào)整受上層DIV容器寬度的限制，最外層DIV的寬度受顯示設(shè)備的寬度限制。

2）交互設(shè)計(jì)。利用Flash中影片剪輯元件可操作性強(qiáng)的特點(diǎn)，將可以定制的部分設(shè)計(jì)成影片剪輯元件，從而實(shí)現(xiàn)鼠標(biāo)交互，尤其是拖放操作的控制。影片剪輯模型設(shè)計(jì)如圖2所示。

①寬度、高度感應(yīng)區(qū)：主要用于感知鼠標(biāo)指針的位置是否為影片剪輯邊界，當(dāng)鼠標(biāo)指針進(jìn)入感應(yīng)區(qū)，鼠標(biāo)指針改為縮放樣式，可以拖動(dòng)邊界改變區(qū)域大?。ㄗⅲ褐豢梢源笥谀J(rèn)寬度和高度）。當(dāng)網(wǎng)頁的整體寬度改變時(shí)，內(nèi)部各部分的寬度按比例進(jìn)行調(diào)整；當(dāng)內(nèi)部容器的寬度和高度改變時(shí)，相鄰位置的容器自動(dòng)進(jìn)行匹配調(diào)整。

圖3 個(gè)性化布局參數(shù)的導(dǎo)入和保存流程

圖4 用戶個(gè)性化界面生成過程

②位置感應(yīng)區(qū)：位于區(qū)域下部和右部，當(dāng)拖動(dòng)的影片剪輯的注冊(cè)點(diǎn)與感應(yīng)區(qū)重合時(shí)，表示2個(gè)區(qū)域的位置需要互換或調(diào)整；當(dāng)停止拖動(dòng)操作時(shí)，相關(guān)的區(qū)域進(jìn)行調(diào)整。

③顯示隱藏按鈕：控制本區(qū)域顯示還是隱藏，隱藏狀態(tài)下，影片剪輯折疊顯示。

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

3.3 個(gè)性化布局頁面的實(shí)現(xiàn)

用戶登錄后，系統(tǒng)首先驗(yàn)證用戶是否進(jìn)行過個(gè)性化界面的設(shè)置，如果沒有，就直接打開系統(tǒng)默認(rèn)的布局頁面；否則從數(shù)據(jù)庫中讀取用戶的個(gè)性化參數(shù)表中的相關(guān)數(shù)據(jù)，通過個(gè)性化頁面生成器生成登錄用戶的CSS文件，然后再生成相應(yīng)的網(wǎng)頁文件，傳遞給用戶，從而呈現(xiàn)用戶定制的網(wǎng)頁布局界面。個(gè)性化布局頁面實(shí)現(xiàn)的流程圖如圖4所示。

實(shí)現(xiàn)個(gè)性化布局的前提是網(wǎng)頁采用DIV+CSS設(shè)計(jì)方式，各個(gè)部分要盡可能地采用獨(dú)立的DIV容器設(shè)計(jì)，保持各部分設(shè)置的最大靈活性和操作的簡易性。如果DIV容器嵌套過多，將增加檢測的難度和用戶設(shè)置的復(fù)雜性，從而消耗更多的系統(tǒng)資源而導(dǎo)致系統(tǒng)響應(yīng)速度降低，用戶興趣下降。

4 結(jié)束語

隨著計(jì)算機(jī)技術(shù)的發(fā)展和網(wǎng)站訪問者的多樣化，單一的網(wǎng)頁布局形式已經(jīng)不能滿足用戶需求，個(gè)性化的網(wǎng)頁布局形式必將成為網(wǎng)站發(fā)展的方向。只有通過網(wǎng)頁交互方式與用戶充分的溝通，了解用戶的特點(diǎn)和多樣化需求，進(jìn)而挖掘和發(fā)現(xiàn)用戶潛在的需求，才能設(shè)計(jì)出用戶滿意的網(wǎng)站。

[1]方惠敏.基于人性化網(wǎng)站界面設(shè)計(jì)的用戶建模[J].計(jì)算機(jī)技術(shù)與發(fā)展,2008(2):188-190

[2]聶璐.論網(wǎng)頁設(shè)計(jì)中的人性化因素[D].長沙:湖南師范大學(xué),2010

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

[4]趙英杰.Flash網(wǎng)頁編程寶典[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