Localhost Design Process
The web page you see at a Joomla powered web site is not static. That means it is generating dynamically from content stored in the database. The page that you see is created through various PHP commands that are in the template. This presents some difficulties in the design phase.
It's common now to use a "what you see is what you get" (WYSIWYG) HTML editor such as Dreamweaver. This means that the designer does not even need to code the HTML. However, this is not possible in the Joomla template design process, WYSIWYG editors cannot display a dynamic page. This means that the designer must code "by hand" and the view the output page from the PHP on a served page. With a fast enough connection this could be a web server, but most designers use a "local server" on their own computer. This is a piece of software that will serve the web pages on the designer's computer.
There is no "right way" to create a web page, it depends on the designer's own background. Those more graphical make an "image" of a page in a graphics program like Photoshop and then break up the images to use (known as slice and dice). More technologically inclined designers will often just jump straight into the CSS and start coding. However, as mentioned above, the Joomla template designer is limited in that he cannot instantly see the effect of his/her coding in the same editor, the modified design process is:
- Make edits with HTML editor, save changes
- Have localhost server running in background to "run" Joomla.
- View edits in a web browser
- Go to 1.
Localhost Server Options
Several local host servers are available:
- JSAS - Joomla Stand Alone Server. WAMP server that serves up Joomla on Windows based PCs. A self contained Apache - MySQL - PHP server
jsas.joomlasolutions.com - XAMPP is an easy to install Apache Distribution for Linux, Windows, Mac OS X, and Solaris. The package includes the Apache web server, MySQL, SQLite, PHP, etc
www.apachefriends.org/en/xampp.html
JSAS does have a significant amount of advertising on it should that concern you.
Easy CSS Styling
One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor. For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then View_Source. You then copy and paste that into your editor. You can now easily style the page using CSS and not have to go through the cycle of steps described above.
Some HTML Editor Options for Joomla Designers
For those not able to pay for a commercial editor such as Dreamweaver, there a some free editors available.
Nvu is a solid choice and has built in validation. It also a Mambo/Joomla extension which will be helpful. Nvu is 100% open source. This means anyone is welcome to download Nvu at no charge, including the source code if you need to make special changes. You can get the extension from Mamboforge. The complete forge project is here.
Another choice is actually more of a validator. The "CSE HTML Validator" is an all-in-one HTML, XHTML, CSS, link, spelling, and accessibility checker. You can get the free version html validator here.
Note that neither of these are "WYSIWYG" html editors.