Joomla! 1.5: A User's Guide: Building a Successful Joomla! Powered Website
The Localhost Design Process
The web page you see at a Joomla-powered website is not
static; it is generated dynamically from content stored in
the database. When content in the database is changed, all
pages that display that content are instantly changed. The
page you see is created through various PHP commands in the
template that query the database. Because the template looks
like lines of code instead of content, it 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, so you don't
need to code the HTML. However, using such an editor is not
possible in the Joomla template design process because
WYSIWYG editors cannot display and edit dynamic pages.
Therefore, you must code a template and its CSS manually and
view the output page from the PHP on a served page that you
frequently refreshed as you make changes. With a fast enough
connection, this could be a web server, but most designers
use a local server, or localhost, on their own computer—a
piece of software that serves the web pages on your
computer, such as the localhost setups described in Chapter
2, "Downloading and Installing Joomla!"
There is no "right way" to create a web page; how you do
it depends on your background. Those who are more graphics
inclined tend to make an "image" of a page in a graphics
program such as Photoshop and then break up the images so
that they can be used for the Web (known as slicing and
dicing). More technology-based designers often jump straight
into the CSS and start coding fonts, borders, and
backgrounds. However, as just mentioned, as a Joomla
template designer, you're limited by the fact that you
cannot instantly see the effect of your coding in the same
editor. You can therefore use the following modified design
process:
Have a localhost server loaded with content running in
the background to "run" Joomla.
Make your edits to the HTML and CSS with an editor and
then save your changes to the server.
View the pages affected by your edits in a web
browser.
Return to step 2. When creating a template, you have to
have Joomla "running" on a server so you can make changes
and refresh the resulting pages to check them.
Localhost Server Options
In Chapter 2, you saw how to install a web server
(WampServer) that will run on your computer. To move further
along in this chapter, you need to have WampServer
installed. If you haven't done so yet, go ahead and install
it. I'll wait right here.
TIP - One useful technique for making the design process
more efficient is to serve a web page that you are designing
and then copy and paste the generated source from your
browser into an editor. For example, once the CSS for your
layout is set up, you can use a localhost server to serve a
page, and then you can view the source of the page. You can
then copy and paste the source code into your editor, and
then you can easily style the page using CSS, without having
to go through the cycle of steps described earlier. When you
have completed your editing, you can copy your perfected CSS
styles back to the server.
On a hosted web server, you can edit the HTML template
and CSS files in the backend while having the frontend open
in another tab of your browser. As you save your changes,
you can simply refresh the frontend view in order to see the
impact.
With a localhost setup, you have the added convenience of
direct access to the files to edit them with the editor of
your choice. As you save your changes, without having to
close the editor, you can refresh the frontend view in your
browser and see the impact.
TIP - When using Firefox as you're designing a
template, you can use three add-in tools that are of
particular help the Web Developer toolbar, Firebug, and
ColorZilla.
What Is a Joomla! Template?
What Is a Joomla! Template?
W3C and Tableless Design
|
