资源描述：
《开发基于web的css设计器》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、开发基于Web的CSS设计器http://www.21tx.com2004年05月17日Bloglinnchord这半年参与了一个基于ASP.net的中型应用系统开发，其间经历种种，收获不少。前段时间做了一个基于Web的CSS设计器，虽然技术不算复杂，不过综合了C#/XML/HTC等技术，对于大家应该有一定参考价值；而且该设计器相对于系统比较独立，因此在这里和大家共享，供大家参考，并请多提意见！设计器的主要功能就是在web界面上设计操作CSS样式表，目的是方便用户自定义系统界面。相信做过Web开发的人大多用过Dreamweav
2、er或者做ASP.NET开发也应该用过VS.net，那么应该熟悉里面的样式（style）设计器，这里就是在Web上实现这个设计器。1.系统流程下面我们先来了解一下整个系统流程流程再简单说明一下·先传入参数包括文件名/样式名/操作方法/可视化样式元素；其中可视化样式元素是要在设计器中即时显现，供效果预览的，同时也是承载样式定义内容的要素（样式就加载在元素的style属性上）。·然后设计器根据传入参数操作，根据操作方法-新建文件/新建样式/修改样式，前两者在初始化时不用读取样式文件，最后者需要读取样式进行初始化；利用一个设计的C#
3、类来对样式文件和样式类进行操作。·在客户端利用JavaScript操作XmlDocument对象读取XML定义的样式文件，进行设计器构建。·利用Javascript通过样式元素的cssText属性读取样式值，对设计器初始化。·用户操作设计器，利用HTC组件操作设计样式。·保存，利用C#类操作。2.CSS设计器之样式表操作类下面，我们来详细察看流程的每个环节。为了操作样式表，设计了一个简单的样式表操作类。功能主要是解析操作指定样式表文件，实现对样式类的添加、修改、删除、保存。机制：读取Web服务器上某样式表文件,将文本转化为一个
4、ArrayList，数组元素为自定义的ClassItem对象,包含Name和Text属性（Name即样式名称，Text即样式的内容）；然后通过对ArrayList操作，控制样式，最后保存。由于在服务器段我们不作具体样式定义，因此该类只操作到样式类级别，不涉及样式属性和值。下面提供该类的UML图ClassItem是一个结构体，仅包含两个属性；3.CSS设计器之XML样式属性定义CSS样式中包含很多属性设置，设计器中当然要包含相应的属性；那么这些属性信息从哪里来呢？采用XML定义是一种很自然就会想到的方式。经常使用DW和VS.NE
5、T，所以在交互设计上采用了类似的模式；先将样式属性按应用分类，再设置详细属性。CSS属性是比较复杂的，如果要完全按照DW或VS.NET的模式，实现会比较复杂。为了简化，我把值的输入简化为两种形式，选择和文本输入。对于选择，直接在XML文件中定义；对于文本输入，抽象几种输入类型，在设计器生成时根据类型设定不同的HTC组件操作。这样就将一些复杂的属性输入封装到HTC组件中，整个构架就简洁起来。XML文件描述首先是属性分类文字......背景......系统分为文字、背景、文本、位置、布局、方框、边框和其他，每种类型有一个Name子元素和若干Style子元素。每个Style子元素表示一个Style属性，结构如下
