面向设计人员的网页布局器实现

陈曦 杜鹏 杭州电子科技大学数字媒体与艺术设计学院

面向设计人员的网页布局器实现

陈曦 杜鹏 杭州电子科技大学数字媒体与艺术设计学院

本文目标是利用.NET技术制作一个网页布局器系统，该系统面向网页设计人员，抛弃了以往编写代码的网页编辑模式，允许用户通过简单的操作生成美观且充满个性的网页。

.NET技术 XML 网页布局器

1 引言

静态网站中的网页，内容相对稳定，不需要通过数据库工作，但不易维护，为了更新网页内容，网站管理者必须不断重复制作HTML页面。随着网站内容和信息量的增长，维护工作将变得十分艰巨。

什么是动态网站呢？所谓“动”是指用户与网站的互动性。动态网站一般满足以下特征：交互性、通过数据库进行架构、在服务器端运行。从上述特征可以看出，静态网站和动态网站的主要区别在于：静态网站内容是在用户发出请求之前就预先生成的，而动态网站内容则是在用户发出请求之后服务器根据用户提供的指令执行产生的。

动态网站是目前主流的网站技术，动态网站在发出请求之后才生成内容，这有两个明显的优点。首先，服务器端可以根据用户提交的请求以及所提供的参数值生成需要的内容在页面上。其次，服务器端可以通过在客户端更新的可用信息来设置网站所生成的页面内容。静态网站和动态网站都有各自的长处与短处，一般在搭建网站采用动态或静态技术主要还是取决于用户对网站的功能需求以及网站内容的更新量。如果网站只需要比较简单的功能同时内容更新量也不大的话，建立一个静态网站会更简单直接。反之，功能复杂，更新量大的网站一般要采用动态网站技术来实现。

2 主体设计

本系统主要面向网页设计人员，包含五大功能：编辑模块、模块属性、保存布局、已有布局和预览当前布局。编辑模块允许用户通过点击图标为网页增加模块、通过拖拽改变模块位置及大小来创建个性化的布局，并通过引入网格来布置规整的模块；模块属性将显示用户当前操作模块的各项属性如跳转链接及模块ID等；保存布局可以将当前编辑的布局进行保存，用户可以通过为布局设定名称、备注以便于日后查找；已有布局里排列出保存过的布局并可以进行新建空白布局的操作，用户可以在这里自由切换布局；预览布局功能将编辑中的布局生成网页，便于查看实际效果。

图1 编辑模块界面

如图1所示，可以看到，页面上方是功能模块，用来执行添加控件、保存布局等操作。图标采用的是简洁的扁平风格，沉稳的商务风配上图标的圆角设计使得整体风格活泼而不失稳重。页面下方是编辑区，用户在这个区域里对控件进行缩放、移动。控件的窗体设计依然采用与图标相同的风格，使页面风格统一。控件右上角的关闭按钮可以将该控件从编辑区移除，字体使用标题栏的对比色也与按钮的作用相契合。

3 控件设计

VS2010中，可以通过添加控件功能来在widget下添加自定义控件，也可以从工具箱中拖动内置的普通控件使用。其中既有普通的控件，即没有特殊操作也不需要使用数据库如日历控件等。也有需要通过数据库实时更新还有特殊功能的控件如通知等。

4 布局方法

XML不像HTML那样提供了一组事先已经定义好的标记，而是提供了一个标准。利用这个标准，可以根据需要定义自己的新的标记。准确地说，XML是一个元标记语言，它允许开发人员根据规则，制定各种各样的标记语言。本系统使用XML来作为一个小型数据库。

5 结论

本文介绍了一个网页布局器的制作过程，可以满足设计人员对网页制作系统简单性和实用性的要求，由于时间、水平和经验有限，在自定义模块、系统流畅度及页面预览等方面仍有不足之处，这将是下一步改进重点。

[1]李德龙，王静.网页艺术设计的原则，民营科技，2009,1：28-28