Stop the presses!

tumwaterpointlessInternet and Web Development

Dec 4, 2013 (4 years and 7 months ago)


Joomla! 1.5 and Dreamweaver CS3 - Part 1
Written by Marco Conti
Monday, 10 November 2008 12:32
Stop the presses!

You may have noticed that this article is getting a bit long in the tooth and that
part 2
is not
published yet. There is a very good reason for it and I hope it will be worth the wait. In the
click here if you want to find out where Part 2 is
(or what it has become),
read this other article
on how to help me write the definitive book on Joomla Development or jump directly to the
Joomla/Dreamweaver survey
If you really can't wait to start coding your own Joomla! web sites with Dreamweaver, check my
online Joomla Classes
. But hurry because there are only a few spots open.

How to use Dreamweaver CS3/CS4 to edit your Joomla! 1.5.x website and
Revisiting the issue 2 years later...

Over 2 years ago I wrote my first blog post on how to incorporate Dreamweaver into your
Joomla development and template design. It is time now to revisit the issue and update the
technique for the newer version of Joomla and Dreamweaver.

At the time of this writing, Dreamweaver CS4 is out in Beta and it promises to bring even more
streamlining into the process. As soon as I upgrade DW to the newer version I will rewrite this
post, but I suspect most of the steps will remain the same. UPDATE: I have just downloaded the
new CS4 triial and it promises to bring some changes, but no radical departures from the
workflow described below. I will point out any differences/shortcuts as necessary.

If you are a traditional web designer, you are probably wondering how it could be possible to
edit a Joomla website, the template more specifically, with a tool like DreamWeaver.


1 / 6
Joomla! 1.5 and Dreamweaver CS3 - Part 1
Written by Marco Conti
Monday, 10 November 2008 12:32
I run
online classes for website owners and web designers
and this is usually the first question
my puzzled audience ask me. The reality is that you don't use Dreamweaver in the traditional
way you build static webpages, but you adapt your workflow to incorporate dynamically driven
websites. And it's not that hard. It just requires a few leaps of faith and some adaptation.

First, let's establish a few fundamental concepts:

Most of the work needed to modify a Joomla template consists of changing the CSS files of
the template, not the HTML/PHP files.

Wherever the HTML/PHP needs to be changed, we can do so either in the template files or in
the Joomla "Core" files (with J1.5, "Overrides" have been introduced that move the Core files
inside the template file system as needed)

You can use any text editor or
of your choice to work on Joomla templates and core
files. DreamWaever is simply the most effective and faster way of doing it.

Using a standard compliant browser like Firefox greatly reduces the development time.

File naming and proper directory structures are fundamental to the rapid development of any
website and that holds true here.


Now, let's see how Joomla, and many other website scripts, work:

Contrary to the way static websites are put together, where every page is usually a stand alone
HTML document, Joomla (and with "Joomla" I will generically include other scripts as well from
2 / 6
Joomla! 1.5 and Dreamweaver CS3 - Part 1
Written by Marco Conti
Monday, 10 November 2008 12:32
now on. The workflow may differ, but the concepts remain the same) is database driven and
therefore it does not have corresponding physical pages to what you see when you navigate
your website.

Rather, Joomla uses a dynamic "template system". A template system works by substituting
"tags" written in PHP or some custom language with HTML code generated by the program.
Whenever Joomla finds one of those tags in the template it will query the database, parse the
content and the internal code and write all that to the page on the fly.

For instance, this tag:
<jdoc:include type="component" />
is the tag Joomla uses to display the main part of a page. Be it plain content (the articles) or
another component such as the Virtuemart Shopping cart. The template designer can usually
wrap the tag with any HTML code he or she wants.

In addition, Joomla also wraps whatever content is inserted by the tag into its own HTML code.
In the case of the basic installation of Joomla, if we are calling a "Article Layout" type of page
Joomla will insert this code:
<table class="contentpaneopen">
<tr><td class="contentheading" width="100%">Article Title</td></tr>
<tr><td valign="top"><p>article text</p></td></tr>
Were it wraps the title and the content of the article in a
. (Incidentally, this is the default,
but it's entirely possible to have Joomla use
tags instead. More on that in future articles).

Naturally, not only we can wrap that output in our own HTML code, but we can also change its
appearance by applying our own CSS styles.

{loadposition tigersites}
3 / 6
Joomla! 1.5 and Dreamweaver CS3 - Part 1
Written by Marco Conti
Monday, 10 November 2008 12:32

Now the issue is to how to do that in the most efficient way possible. In my previous blog post
about the topic, I had just discovered a very effective way of incorporating DreamWeaver 8 into
my workflow. In the intervening years I perfected my system whereas it's now even more
effective, faster and more fr. The upcoming DreamWeaver CS4 promises to make my process
even better, but we'll need to wait for that.

What do you need to get started

In order to get going using my process you'll need to set up your work "space" very specifically.
A few settings are mandatory, other are completely up to you, but strongly suggested. Some
may change the way you work and organize your files, but they'll change that for the better.

Create a good file system
to handle your websites and related files. This is what I do:

I create a folder named "WWW" in "My Documents" (or corresponding area) of your

Inside it I create a folder for each website I work on: ""

Inside I create a folder called "public_html" (or httpdocs, as you prefer) to replicate the
server's file structure.

Inside public_html is where I save the entire remote file system.

Above public_html is where I save source files, images, etc. plus I create shortcuts to the
most used directories inside the website files. More on that later.

Once my file system is set, the next step is to customize your browser to make it as efficient as
possible for development purposes. I use Firefox because of the free add-ons available for it
and there are the ones I use the most:

Web Developer Toolbar
(lots of goodies)

(an advanced dev tool)

Fire FTP
(a good FTP program built into Firefox)

(beautiful screenshots and note takes)

and a few others
. I have a full list here (link coming soon)

Once I have Firefox set up properly you can use the developer toolbar's "View Source" button
and insert Dreamweaver as one of the custom choices. This will open your webpage code into
4 / 6
Joomla! 1.5 and Dreamweaver CS3 - Part 1
Written by Marco Conti
Monday, 10 November 2008 12:32
Dreamweaver directly, therefore saving a step or two.

I also make sure that the "Edit HTML", "Edit CSS" and other frequently used buttons are setup
the way I like them and open on the left side of the screen.

Now, when working on your site you'll be able to:

Open the source code in Dreamweaver

View and edit the HTML, CSS and JavaScript of your page in Firefox

Setting up Dreamweaver

It's now time to finish setting up Dreamweaver for the task. For that, it will help a great deal if
you have
as your webserver control panel. Cpanel has wonderful database and
file management tools built in, but what we need now is a way to archive, download and expand
your website's file system locally in your
directory. However you
do it, FTP or Cpanel (if you don't have Cpanel you can try using the
component for Joomla. It will do most of what's needed) it doesn't matter, but FTP is painfully
low and error prone, while moving zip files is a lot faster and it also creates a "snapshots" of
your files at that moment for backup purposes. It's a good idea to go to PhpMyAdmin and do a
database backup at the same time.

Here is what you do with "Cpanel":


Select and compress your remote files on the server below public_html (or any folder
where Joomla is installed)

Download the resulting archive right above your public_html folder for the site

Expand back the files inside public_html

Navigate to the file system and create a folder inside your "templates" folder named
something like: "working-files"

Create shortcuts for the following directories and place them in your
5 / 6
Joomla! 1.5 and Dreamweaver CS3 - Part 1
Written by Marco Conti
Monday, 10 November 2008 12:32
"" folder above public_html:






And any other folder you know you are going to use frequently in the course of your work.
For instance, many components keep their CSS files either in their component/com_component
directory or in their plugins/pluginname directory or the modules/modulename directory.

You will add folders to your list of shortcuts as you go along but these are good to start. More
later on the reason for that.

Once you have setup your files as above, (and feel free to modify your system as needed, this
is my own way of doing things) you are ready to start editing your Joomla templates and files.

Next time:
get to work and edit your Joomla website with Dreamweaver.

Where is
Part 2
Learn more here
6 / 6