Blogs - The Conticreative Joomla Blog

Joomla! 1.5 and Dreamweaver CS3 - Part 1

Attention: open in a new window.

Written by Marco Conti Monday, 10 November 2008 12:32

How to use Dreamweaver CS3/CS4 to edit your Joomla! 1.5.x website and templates.
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.

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:

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

02Wherever 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)

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

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

05File 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 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>
</table>

Were it wraps the title and the content of the article in a <td>. (Incidentally, this is the default, but it's entirely possible to have Joomla use <div> 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.

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 computer.
Inside it I create a folder for each website I work on: "Websitename.com"
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)
Firebug (an advanced dev tool)
Fire FTP (a good FTP program built into Firefox)
Fireshot (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 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 Cpanel/WHM 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 www/websitename.com/public_html/ directory. However you do it, FTP or Cpanel (if you don't have Cpanel you can try using the eXtplorer 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 "websitename.com" folder above public_html:
- working-files
- components
- modules
- plugins
- administrator
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.