Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

As part of the Official Joomla Documentation program, this tutorial has been developed by Barrie North of Compass Design. As well as here at the official Joomla Dev site (dev.joomla.org) it is also available at www.compassdesigns.net in various complete formats, Word, PDF and HTML.

In this tutorial, we'll go through the steps of creating a joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. Specifically, we will create a template that uses cascading style sheets (CSS) to produce a layout without use of tables. This is a desirable goal as it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain and perform better in search engines. We will discuss these issues in detail later in the tutorial.

Included in this tutorial are the following chapters

• What is a Joomla Template?
  Explains what functions are performed by a Joomla template and the difference between a template with no content and when content is added into the CMS
• Localhost Design Process
  How the design process differs to that when designing a static (X)HTML web page.
• W3C and Tableless Design
  The implications of tableless design in Joomla and the relationship between W3C standards, usability and accessibility
• The Template Components
  What files make up a Joomla template and what functions they perform
• Using CSS to create a layout
  How to create a source ordered 3 column layout using CSS rather than tables
• The Default Joomla CSS
  An introduction to basic CSS styles that should be used with Joomla, along with the default list of styles that are used by the Joomla core
• Modules
  How to place, and style modules, including new techniques for rounded corners.
• Menus
  A simple strategy to produce lean CSS menus that mimic the effect of those developed with Javascript
• Hiding Columns
  How to control when columns are shown and how to hide them when no content is present
• Conclusion
• Appendix A:Tips and Tricks
  Variable Page Widths, Rounded Corners, Text Resizers and More