陳曦 杜鵬 杭州電子科技大學(xué)數(shù)字媒體與藝術(shù)設(shè)計學(xué)院

面向設(shè)計人員的網(wǎng)頁布局器實現(xiàn)

陳曦 杜鵬 杭州電子科技大學(xué)數(shù)字媒體與藝術(shù)設(shè)計學(xué)院

本文目標(biāo)是利用.NET技術(shù)制作一個網(wǎng)頁布局器系統(tǒng)，該系統(tǒng)面向網(wǎng)頁設(shè)計人員，拋棄了以往編寫代碼的網(wǎng)頁編輯模式，允許用戶通過簡單的操作生成美觀且充滿個性的網(wǎng)頁。

.NET技術(shù) XML 網(wǎng)頁布局器

1 引言

靜態(tài)網(wǎng)站中的網(wǎng)頁，內(nèi)容相對穩(wěn)定，不需要通過數(shù)據(jù)庫工作，但不易維護(hù)，為了更新網(wǎng)頁內(nèi)容，網(wǎng)站管理者必須不斷重復(fù)制作HTML頁面。隨著網(wǎng)站內(nèi)容和信息量的增長，維護(hù)工作將變得十分艱巨。

什么是動態(tài)網(wǎng)站呢？所謂“動”是指用戶與網(wǎng)站的互動性。動態(tài)網(wǎng)站一般滿足以下特征：交互性、通過數(shù)據(jù)庫進(jìn)行架構(gòu)、在服務(wù)器端運行。從上述特征可以看出，靜態(tài)網(wǎng)站和動態(tài)網(wǎng)站的主要區(qū)別在于：靜態(tài)網(wǎng)站內(nèi)容是在用戶發(fā)出請求之前就預(yù)先生成的，而動態(tài)網(wǎng)站內(nèi)容則是在用戶發(fā)出請求之后服務(wù)器根據(jù)用戶提供的指令執(zhí)行產(chǎn)生的。

動態(tài)網(wǎng)站是目前主流的網(wǎng)站技術(shù)，動態(tài)網(wǎng)站在發(fā)出請求之后才生成內(nèi)容，這有兩個明顯的優(yōu)點。首先，服務(wù)器端可以根據(jù)用戶提交的請求以及所提供的參數(shù)值生成需要的內(nèi)容在頁面上。其次，服務(wù)器端可以通過在客戶端更新的可用信息來設(shè)置網(wǎng)站所生成的頁面內(nèi)容。靜態(tài)網(wǎng)站和動態(tài)網(wǎng)站都有各自的長處與短處，一般在搭建網(wǎng)站采用動態(tài)或靜態(tài)技術(shù)主要還是取決于用戶對網(wǎng)站的功能需求以及網(wǎng)站內(nèi)容的更新量。如果網(wǎng)站只需要比較簡單的功能同時內(nèi)容更新量也不大的話，建立一個靜態(tài)網(wǎng)站會更簡單直接。反之，功能復(fù)雜，更新量大的網(wǎng)站一般要采用動態(tài)網(wǎng)站技術(shù)來實現(xiàn)。

2 主體設(shè)計

本系統(tǒng)主要面向網(wǎng)頁設(shè)計人員，包含五大功能：編輯模塊、模塊屬性、保存布局、已有布局和預(yù)覽當(dāng)前布局。編輯模塊允許用戶通過點擊圖標(biāo)為網(wǎng)頁增加模塊、通過拖拽改變模塊位置及大小來創(chuàng)建個性化的布局，并通過引入網(wǎng)格來布置規(guī)整的模塊；模塊屬性將顯示用戶當(dāng)前操作模塊的各項屬性如跳轉(zhuǎn)鏈接及模塊ID等；保存布局可以將當(dāng)前編輯的布局進(jìn)行保存，用戶可以通過為布局設(shè)定名稱、備注以便于日后查找；已有布局里排列出保存過的布局并可以進(jìn)行新建空白布局的操作，用戶可以在這里自由切換布局；預(yù)覽布局功能將編輯中的布局生成網(wǎng)頁，便于查看實際效果。

圖1 編輯模塊界面

如圖1所示，可以看到，頁面上方是功能模塊，用來執(zhí)行添加控件、保存布局等操作。圖標(biāo)采用的是簡潔的扁平風(fēng)格，沉穩(wěn)的商務(wù)風(fēng)配上圖標(biāo)的圓角設(shè)計使得整體風(fēng)格活潑而不失穩(wěn)重。頁面下方是編輯區(qū)，用戶在這個區(qū)域里對控件進(jìn)行縮放、移動?？丶拇绑w設(shè)計依然采用與圖標(biāo)相同的風(fēng)格，使頁面風(fēng)格統(tǒng)一?？丶疑辖堑年P(guān)閉按鈕可以將該控件從編輯區(qū)移除，字體使用標(biāo)題欄的對比色也與按鈕的作用相契合。

3 控件設(shè)計

VS2010中，可以通過添加控件功能來在widget下添加自定義控件，也可以從工具箱中拖動內(nèi)置的普通控件使用。其中既有普通的控件，即沒有特殊操作也不需要使用數(shù)據(jù)庫如日歷控件等。也有需要通過數(shù)據(jù)庫實時更新還有特殊功能的控件如通知等。

4 布局方法

XML不像HTML那樣提供了一組事先已經(jīng)定義好的標(biāo)記，而是提供了一個標(biāo)準(zhǔn)。利用這個標(biāo)準(zhǔn)，可以根據(jù)需要定義自己的新的標(biāo)記。準(zhǔn)確地說，XML是一個元標(biāo)記語言，它允許開發(fā)人員根據(jù)規(guī)則，制定各種各樣的標(biāo)記語言。本系統(tǒng)使用XML來作為一個小型數(shù)據(jù)庫。

5 結(jié)論

本文介紹了一個網(wǎng)頁布局器的制作過程，可以滿足設(shè)計人員對網(wǎng)頁制作系統(tǒng)簡單性和實用性的要求，由于時間、水平和經(jīng)驗有限，在自定義模塊、系統(tǒng)流暢度及頁面預(yù)覽等方面仍有不足之處，這將是下一步改進(jìn)重點。

[1]李德龍，王靜.網(wǎng)頁藝術(shù)設(shè)計的原則，民營科技，2009,1：28-28