SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Building Documents with XML, XSL, and CSS
By Scott Isaacs

The current set of web recommendations and proposed recommendations is starting to look a lot like alphabet soup. Web designers currently have to deal with XML, XSL, CSS, HTML, and the DOM. In this article, we demonstrate how these technologies are very complementary and will change the future of building web-sites.

Many months ago we ran a series of articles explaining our back-end template system. The user-interface for every page on SiteExperts.com is created by a set of include files around the actual content. Depending on the change, our approach makes it relatively easy for us to quickly update the user-interface. For example, we can add a new choice to our navigation menu, move the banner ad around, or change the color scheme of the page by changing one file. However, if we want to manipulate and highlight information in an article (eg., create pull-quotes) we need to go and update the content directly.

With the introduction of XML and XSL we are starting to explore a richer and more powerful solution to managing the site and our content. To prove this, we decided to author this article completely in XML (demonstration for IE5 user's later), use XSL to transform the document to HTML, and use CSS to add additional formatting to create the final page.

This approach provides us with a number of benefits:

  1. We can bring authors on we can give them a detailed set of XML elements for writing their articles. This enforces a more rigid authoring scheme making it easier for us to process the articles.
  2. We are no longer tied to our templating system. Our templating system required each article to be adorned with extra template and semantic information. With XML we can separate the article from the template description.
  3. By transforming the XML using XSL to HTML, we can quickly change any aspect of the page. You can create multiple views of the same document quickly and efficiently all without modifying the original page.
  4. Last, using CSS, we can apply simple styling to the created HTML. This is important as simple rendering changes can be made to your document without requiring the overall XSL template to be modified or the page to be regenerated.

We are now going to take you on a tour through our use of XML, XSL, HTML, and CSS. While we will introduce many XML and XSL topics, this article is not intended as a complete tutorial to using those technologies. Rather, we hope to clearly demonstrate in detail how these technologies complement each other, their ease of use, and to leave you with some ideas on how to apply these technologies. We will write more detailed tutorials in the future.

Page 1:Building Documents with XML, XSL, and CSS
Page 2:XML Tips for HTML Authors
Page 3:Our XML Article Format
Page 4:Presenting the XML
Page 5:Transforming with XSL
Page 6:Transforming with XSL II