Important Note: Where a download link is shown I have give a direct link for
the download to make the download as easy as possible. Where mirrors have been
linked to I have chosen US ones. More experienced users should examine the link
and truncate it to go to the actual site.
Free HTML/Web Design editors
Two choices here, Nvu is one I found recently and I have been playing around
with it. It seems pretty good, has built in validation (important for us) and
also a Mambo/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.
Out of these two, the CSE Validator is probably better, but Nvu has the cool
extension. Ahh, what to do!
Overview of a Joomla Design
Note that neither of these are “WYSIWYG” html editors. In an editor such as
Dreaweaver you can create a web page without even seeing the html code. However,
this is perhaps not the best way to make a Joomla/Mambo page. Its important to
be able to see the html and css styles and the page in the index.php (as you saw
in the last article) is not really very long or complex.
Standards Compliant Browsers
Now we need a decent browser. Now if you are still using Internet Explorer,
goes outside and slap yourself around.
Finished? Good, you deserved it. Quite apart from the fact that IE is the
most buggy, security-hole ridden browser to ever be installed (or was that
Netscape?), using it has one big problem when designing to standards. We talked
a little in the last article about how support for CSS is not consistent across
browsers. IE has some of the worst support. To make a page look the same you
have to use CSS “hacks”. These are snippets of CSS that can only be seen by
certain browsers. Its very very important when trying to design to web standards
to use a browser that is standards compliant, then you make allowances for
browsers that aren’t. Doing it the other way around makes it difficult to say
the least. “Design for the best and then for the rest” goes the saying.
OK, so my choice is Firefox, and while you are at it, download the developer
toolbar, it will be essential for our design work. Note that its easiest to
get the toolbar after installing firefox by actually using
Firefox to browse the link, then the installation is somewhat automated.
Right, so next time I look at my web stats, I don’t want to see any IE,
right?
Free Graphics Editor
In keeping with our cheapskate theme, there is actually a decent graphics
editor out there and its free. Its called GIMP and your can download it here. You also need another piece of code which you can get here. More information is at http://gimp-win.sourceforge.net/stable.html.
Note that if you go to the actual gimp.org web site, you can’t really
download much of use there. Its all the source code (its open source like
Joomla). You need to go to another site like the one above to find something you
can actually install.
So make sure you have all those downloaded/set up and then we are ready for
the Basic Joomla/Mambo CSS Template
Next tutorial? We will be looking at the CSS of Joomla
Tutorial 4: A Blank Template CSS file for Joomla
Important Note!
This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla template design.
It uses a superior CSS layout strategy that does not reply on absolute
positioning, which allows easier clearing of the footer. You can find
out more at:
www.compassdesigns.net/tutorials/joomla-tutorials/joomla-template-tutorial.html
www.compassdesigns.net/joomla-library/joomla/the-official-joomla-template-tutorial.html
Compass Designs 