I’m Steve Schermerhorn, one of the new developers on the Expression Web team.
When I’m developing a website or application I’m typically dealing with a wide range of colors throughout my project. On more than one occasion it would have been really handy to have a visual reference that also mapped the colors to their names and hex values. I eventually managed to come up with a solution using an XSL to transform an XML file into a nice little color reference table I could print off and hang on my wall. This little ‘how to’ is going to give you a very hands on example on how you can take an XML file and create an HTML page.
- The data
For this example I started with an XML file I that I created referencing the system colors used by Windows. [ http://msdn.microsoft.com/en-us/library/system.drawing.systemcolors.aspx ].
- Create a dataview of the XML file
- Add style to the XML data
You can format the dataview of your XML file as you would any other table or text in Expression Web. When you format the table or text in a data view, Expression Web automatically updates the XSL file for you. For example, I used the Highlight button in the toolbar to add a color background to the top header row of the table, changed the font of the header cells, and reduced the width of my columns. I also added a new column to the left of the first column.When I saved my page, Expression Web prompted me to save the changes it made to the XSL file.
Next I opened up the XSL file that Expression Web generated, located my new blank column, and added the following attribute to the <td> tag for that column:
That attribute sets the background column of every cell to the value of the ColorValue specified for that row in the Color Value column.