Joomla Tutorials by Compass Design
Localhost Design Process
The web page you see at a Joomla powered web site is not static. That means it is generatingdynamically from content stored in the database. The page that you see is created through various PHPcommands 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 asDreamweaver. This means that the designer does not even need to code the HTML. However, this is notpossible in the Joomla template design process, WYSIWYG editors cannot display a dynamic page. Thismeans that the designer must code "by hand" and the view the output page from the PHP on a servedpage. 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'scomputer.There is no "right way" to create a web page, it depends on the designer's own background. Those moregraphical make an "image" of a page in a graphics program like Photoshop and then break up the imagesto use (known as slice and dice). More technologically inclined designers will often just jump straightinto the CSS and start coding. However, as mentioned above, the Joomla template designer is limited inthat he cannot instantly see the effect of his/her coding in the same editor, the modified design processis:1.
Make edits with HTML editor, save changes2.
Have localhost server running in background to "run" Joomla.3.
View edits in a web browser4.
Go to 1.
Localhost Server Options
Several local host servers are available:
- Joomla Stand Alone Server. WAMP server that serves up Joomla on Windows basedPCs. A self contained Apache - MySQL - PHP server jsas.joomlasolutions.com
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, etcwww.apachefriends.org/en/xampp.htmlJSAS 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 designingand then copy and paste the source into an editor. For example, once your layout CSS is set up, you can useone of these localhost servers to serve a page, then View_Source. You then copy and paste that into your
The author, Barrie North createsJoomla Templates and Tutorialsat his Joomla consultancy,www.compassdesigns.net. This
work is licensed under aCreative Commons Attribution NonCommercial ShareAlike 2.5 License.This attributation must be reproduced in full. Pleaseemail meif you'd like to use this article on your site.