css|web|設計 這半年參與了一個基於asp.net的中型應用系統開發，其間經曆種種，收穫不少。前段時間做了一個基於Web的CSS設計器，雖然技術不算複雜，不過綜合了C#/XML/HTC等技術，對於大家應該有一定參考價值；而且該設計器相對於系統比較獨立，因此在這裡和大家共用，供大家參考，並請多提意見！
設計器的主要功能就是在web介面上設計操作CSS樣式表，目的是方便使用者自訂系統介面。
相信做過Web開發的人大多用過Dreamweaver或者做asp.net開發也應該用過vs.net，那麼應該熟悉裡面的樣式（style）設計器，這裡就是在Web上實現這個設計器。
1.系統流程
下面我們先來瞭解一下整個系統流程
流程再簡單說明一下
·先傳入參數包括檔案名稱/樣式名/操作方法/可視化樣式元素；其中可視化樣式元素是要在設計器中即時顯現，供效果預覽的，同時也是承載樣式定義內容的要素（樣式就載入在元素的style屬性上）。
·然後設計器根據傳入參數操作，根據操作方法-建立檔案/建立樣式/修改樣式，前兩者在初始化時不用讀取樣式檔案，最後者需要讀取樣式進行初始化；利用一個設計的C#類來對樣式檔案和樣式類進行操作。
·在用戶端利用Javascript操作XmlDocument對象讀取XML定義的樣式檔案，進行設計器構建。
·利用Javascript通過樣式元素的cssText屬性讀取樣式值，對設計器初始化。
·使用者操作設計器，利用HTC組件操作設計樣式。
·儲存，利用C#類操作。
2.CSS設計器之樣式表操作類
下面，我們來詳細察看流程的每個環節。
為了操作樣式表，設計了一個簡單的樣式表操作類。功能主要是解析操作指定樣式表檔案，實現對樣式類的添加、修改、刪除、儲存。
機制：讀取Web伺服器上某樣式表檔案,將文本轉化為一個ArrayList，數組元素為自訂的ClassItem對象,包含Name和Text屬性（Name即樣式名稱，Text即樣式的內容）；然後通過對ArrayList操作，控制樣式，最後儲存。
由於在伺服器段我們不作具體樣式定義，因此該類只操作到樣式類層級，不涉及樣式屬性和值。
下面提供該類的UML圖 ClassItem 是一個結構體，僅包含兩個屬性；
3.CSS設計器之XML樣式屬性定義
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屬性，將顯示在設計器中，否則直接顯示該元素的常值內容
架構圖
此為縮圖，請點擊開啟
4.CSS設計器之介面互動
整個操作互動過程，除了最後儲存檔案外，其他都是由javascript完成。
首先DesignerBuild函數通過XmlDocumnet讀取XML樣式屬性定義檔案，構建整個設計器介面。然後Init函數讀取伺服器端賦給設計項目的Style.cssText屬性，並把屬性作為輸入控制項ID在設計器中尋找並賦值，完成初始化。
在操作過程中，根據輸入控制項的樣式類Class，觸發綁定的HTC組件，做相應的用戶端操作。
最後再讀取設計項目的style屬性，儲存。
設計器介面
不同的設計項目
不同輸入控制項的不同class屬性（根據XML中ActionType產生）觸發不同HTC組件，實現不同輸入模式。
由於商業原因，這裡不便提供原始碼；我將在後面提供部分關鍵代碼供參考。
由於時間有限，無法一次完成，請見諒。
謝謝大家捧場看了這麼久 :)
