Page 3 of 11
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:
1. Make edits with HTML editor, save changes
2. Have localhost server running in background to "run" Joomla.
3. View edits in a web browser
4. 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.
