CSS World Awards Winners 2006
星期一, 07月 17th, 2006
cssmania.com搞了一个CSS World Awards，选出了几些采用css构建的web网站精品，很不错的网站。
Site Of Year
更多内容可见http://awards.cssmania.com/2006/07/07/css-world-awards-winners-2006.php
CSS设计器代码参考.3
星期一, 05月 17th, 2004
界面交互
在XML中一共定义了 select/ input_ColorSelect / input_SizeSelect / input_BorderSelect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下
/* 颜色输入模式input框的样式类 */
.input_ColorSelect
{
width:100px;
font-family:Tahoma;
behavior:url(htc/effColorSelect.htc);
}
通过behavior属性，把该输入控件和相应的组件相关联，该组件effColorSelect.htc代码如下
<public:ATTACH EVENT="onfocus" ONEVENT="getShow()"/> <public:METHOD NAME="getChange"/> <script LANGUAGE="JScript"> function getShow() { element.blur(); //记录当前交互控件的ID effElement=element.id; //在页面中加载输入控件 ShowControl ("SelectColor"); } function getChange() { //当值发生变化时，对可视化样式元素赋值 SetAttribute(element.id,element.value); } </script>
其他
设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。
另外还需要注意的是，XML文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据CSS标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档，所以只有经过实际测试来验证。
OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考
另外再列出部分技术参考，如果大家对其中的技术细节如HTC和XmlDom等有所疑问，可以再详细研究一下，也欢迎大家来和我交流。
这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧 
(最近MSDN不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)
网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。
CSS设计器代码参考.2
星期三, 05月 12th, 2004
设计器初始化
Js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值
//设计器初始化
function Init()
{
//获得由服务器端赋值的样式属性值
var txt=document.all("DemoShow").style.cssText;
if (txt.length>0)
{
var strClassName;
//解析字符串
var aryClass = txt.split(/[:;]/);
for( i in aryClass)
{
var str = aryClass[i].replace(/(^s*)|(s*$)/g, "");
if(!(i%2==1))
{
//当i为奇数时，解析的字符串应该为样式属性名称
strClassName=str;
}
else
{
//当i为偶数时，获得属性值
//属性名称即控件ID
//判断该属性对应的控件是输入框还是选择列表
if(document.all(strClassName).type=="select-one")
{
//如果是选择列表通过setIndexOfValue函数设定选择项
setIndexOfValue(strClassName,str);
}
else
{
document.all(strClassName).value=str;
}
}
i++;
}
}
}
CSS设计器代码参考.1
星期一, 05月 10th, 2004
这里对前面讲的CSS设计器系统关键代码作一些小结，如果没有看过前面文章请先参看前文
解析CSS样式文件
这段代码主要作用是把CSS文件分解为多个样式类，并按名称/文本属性生产ClassItem对象，并保存在一个ArrayList(cssList)中(C#代码)
//读取文件 FileInfo theSource= new FileInfo (@m_filePath); StreamReader reader = theSource.OpenText(); //将文件流转化为文本 m_cssText = reader.ReadToEnd(); reader.Close(); //定义CSS文本分割符 char[] delimiters = new char[] { '{','}'}; int iCheck = 1;string className = null; //将文本转化为ArrayList foreach ( string substring in m_cssText.Split(delimiters)) { if (iCheck%2==0) //当iCHeck为偶数时,字符串为样式属性内容 //将解析的样式名和属性作为ClassItem对象存入cssList cssList.Add( new ClassItem ( className, substring.Trim() ) ); else //当iCHeck为奇数时,字符串为样式名,暂存 className = substring.Trim(); iCheck++; }
交互界面构建
交互界面由Javascript通过XmlDocument读取Xml文件动态生成。
首先要读取XML文件，然后遍历整个XML文件，先遍历样式分类，再对每个分类遍历其下的所有样式属性。比较关键的代码是对XML的遍历，下面是对样式分类的遍历代码。
//LoadXML是XML文件读取函数 var dom = LoadXML("css.xml"); //通过XPath和selectNodes方法返回一个XMLDOMNodeList对象 var oNode = dom.selectNodes("//Category/Name"); //获取该对象长度，即XML文档中该路径节点的数量 var intCategory = oNodes.length; for (i=0; i<intCategory; i++) { //获取集合中的节点 oNode = oNodes.nextNode; if (oNode != null) { //样式分类界面构建代码-略 …… } }
样式输入控件构建函数，该函数作用是根据XPath路径查询XML定义，生成交互控件
function BuildInput ( path ) { var str=""; var aNode=null; var attValue=null; //通过selectSingleNode返回符合条件的第一个节点 var actNode = dom.selectSingleNode(path+"ActionType"); var nameNode = dom.selectSingleNode(path+"CssName"); //如果属性为选择输入，则读取SelectItems，并构建select控件 if (actNode.text=="select") { str += "<select id='"+nameNode.text+"' name='"+nameNode.text+"'class='eSelect'>"; //查询该项的所有选择列表项 var itemsNodes = dom.selectNodes (path+"SelectItems/Item"); str += "<option value='-1'>未设置</option>"; for (ii=0;ii<itemsNodes.length;ii++){ aNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]"); //如果该项含有Name属性则在列表中显示Name属性值 attValue = aNode.getAttribute("Name") var txtNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]"); if (attValue==null) str += "<option value='"+txtNode.text+"'>"+txtNode.text+"</option>"; else str += "<option value='"+txtNode.text+"'>"+attValue+"</option>"; } str += "</select>"; } else //如果属性为其他模式，则构建input输入，设置class属性为ActionType { str = "<input name='"+nameNode.text+"' id='"+nameNode.text+"' class='"+actNode.text+"'>"; } return(str); }
CSS设计器之XML样式属性定义
星期二, 04月 27th, 2004
CSS样式中包含很多属性，设计器中当然要包含相应的属性类型；那么这些属性信息从哪里来呢？
采用XML定义是一种很自然就会想到的方式。
经常使用DW和VS.NET，所以在交互设计上采用了类似的模式；先将样式属性分类，再设置详细属性。
CSS属性是比较复杂的，如果要完全按照DW或VS.NET的模式，实现会比较复杂。为了简化，我把值的输入简化为两种形式，选择和文本输入。对于选择，直接在XML文件中定义；对于文本输入，抽象几种输入类型，在设计器生成时根据类型设定不同的HTC组件操作。这样就将一些复杂的属性输入封装到 HTC组件中，整个构架就简洁起来。
XML文件描述
首先是属性分类
<cssdesign> <category> <name>文字</name> <style> <name>字体</name> ...... </style> <style> <name>样式</name> ...... </style> ...... </category> <category> <name>背景</name> <style> <name>颜色</name> ...... </style> ...... </category> </cssdesign>
系统分为文字、背景、文本、位置、布局、方框、边框和其他，每种类型有一个Name子元素和若干Style子元素。
每个Style子元素表示一个Style属性，结构如下
<style> <name>字体</name> <cssName>font-family</cssName> <actionType>select</actionType> <selectItems> <item>verdana,arial</item> <item Name="宋体">SimSun</item> <item Name="黑体">SimHei</item> </selectItems> </style> <style> <name>大小</name> <cssName>font-size</cssName> <actionType>select</actionType> <selectItems> <item>12px</item> <item>14px</item> <item>9px</item> </selectItems> </style> <style> <name>颜色</name> <cssName>background</cssName> <actionType>input_ColorSelect</actionType> </style>
Name为该属性的描述名称，在设计器中为文本描述；
CssName为属性名，在设计器中即输入字段的ID；
ActionType为属性设置方法，在设计器中为输入字段的样式类名，该样式中含有Behavior属性，制定HTC组件；
SelectItems为选择项，如果ActionType为Select，将会在此列出选择项；其子元素Item如果含有Name属性，将显示在设计器中，否则直接显示该元素的文本内容
框架图
CSS设计器之样式表操作类
星期一, 04月 26th, 2004
为了操作样式表，设计了一个简单的样式表操作类。功能主要是解析操作指定样式表文件，实现对样式类的添加、修改、删除、保存。
机制：读取Web服务器上某样式表文件,将文本转化为一个ArrayList，数组元素为自定义的ClassItem对象,包含Name和Text属性（Name即样式名称，Text即样式的内容）；然后通过对ArrayList操作，控制样式，最后保存。
由于在服务器段我们不作具体样式定义，因此该类只操作到样式类级别，不涉及样式属性和值。
下面提供该类的UML图 ClassItem 是一个结构体，仅包含两个属性；
