面向設計人員的網頁布局器實現

陳曦 杜鵬 杭州電子科技大學數字媒體與藝術設計學院

面向設計人員的網頁布局器實現

陳曦 杜鵬 杭州電子科技大學數字媒體與藝術設計學院

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

.NET技術 XML 網頁布局器

1 引言

靜態網站中的網頁，內容相對穩定，不需要通過數據庫工作，但不易維護，為了更新網頁內容，網站管理者必須不斷重復制作HTML頁面。隨著網站內容和信息量的增長，維護工作將變得十分艱巨。

什么是動態網站呢？所謂“動”是指用戶與網站的互動性。動態網站一般滿足以下特征：交互性、通過數據庫進行架構、在服務器端運行。從上述特征可以看出，靜態網站和動態網站的主要區別在于：靜態網站內容是在用戶發出請求之前就預先生成的，而動態網站內容則是在用戶發出請求之后服務器根據用戶提供的指令執行產生的。

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

2 主體設計

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

圖1 編輯模塊界面

如圖1所示，可以看到，頁面上方是功能模塊，用來執行添加控件、保存布局等操作。圖標采用的是簡潔的扁平風格，沉穩的商務風配上圖標的圓角設計使得整體風格活潑而不失穩重。頁面下方是編輯區，用戶在這個區域里對控件進行縮放、移動。控件的窗體設計依然采用與圖標相同的風格，使頁面風格統一。控件右上角的關閉按鈕可以將該控件從編輯區移除，字體使用標題欄的對比色也與按鈕的作用相契合。

3 控件設計

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

4 布局方法

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

5 結論

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

[1]李德龍，王靜.網頁藝術設計的原則，民營科技，2009,1：28-28