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

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

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

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

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

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

1 引言

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

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

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

2 主體設(shè)計(jì)

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

圖1 編輯模塊界面

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

3 控件設(shè)計(jì)

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

4 布局方法

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

5 結(jié)論

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

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