Home Conticreative Blogs The Joomla Blog Joomla! 1.5 and Dreamweaver CS3 - Part 1

Blogs - The Conticreative Joomla Blog

Joomla! 1.5 and Dreamweaver CS3 - Part 1

Attention: open in a new window. PDFPrintE-mail

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

Share |
User Rating: / 55
PoorBest 

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 meantime, 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 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:

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:

  1. Open the source code in Dreamweaver
  2. 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.

Where is Part 2? Learn more here.

Trackback(0)

TrackBack URI for this entry

Comments (14)

Subscribe to this comment's feed

Show/hide comments
 1 2 > 
Please change FireShot homepage
Dear author!
I'm the developer of the FireShot plugin and I found that the homepage link
to FireShot specified at your webpage
is not correct.

I'd greatly appreciated it you could change it to http://screenshot-
program.com/fireshot instead.

If you're interested in a FREE FireShot Pro key, kindly please let me know.

Thank you.
Evgeny Suslikov , November 25, 2011
Are we ready for joomla 1.6??
Latest version of joomla is coming... are we need to change anything in our existing joomla webs to make them compatible with joomla 1.6?

can we edit/manage our old joomla webs in new cms of joomla 1.6??

Regards,
Joomla Development
joomla development , March 14, 2011
Thanks
I was planning to do a "part 2" of this article sooner rather than later, but then I submitted the idea of writing a book to a publisher thinking they would not be interested.
club penguin cheats
Maryabc , February 28, 2011
Joomla 1.5
part 2 would be really helpful, as i seem to have a harder time switching to joomla than wordpress (which is what i'm a little more familiar with...) so any help i can get along those lines would be great!!
Jim Renoth [url]http://www.hardyteam.ca[/url] , November 24, 2010
Good
Good to hear.I'm trying to experience joomla to develop my website.Can't wait for your part 2.Keep it coming.
abbotsford real estate , November 14, 2010
Codelobster PHP Edition
I use free PHP IDE - Codelobster PHP Edition with special Joomla plug-in.
Stas , April 27, 2010
Re: web design
Hi Marco,

I'm developing my own webiste and started off by using the hosts standard template package which were all fairly boring and restrictive for design changes. I have now purchaced dreamweaver cs4 but haven't got much experience with programming other than some very basic HTML code, starting to think i made the wrng choice to go it alone! I have some Joomla templates and was hoping just to open them up with dreamweaver and start adding content to the template design but it seems much more complicated than that after reading your article. Any words of wisdom that may help!?
Colin , March 30, 2010
I would like part 2 of your Dreamweaver/Joomla article please
I would like part 2 of your Dreamweaver/Joomla article please, I have been a developer for 6 years, and have tried over and over to figure out Joomla, and now I believe I could understand it, but part 2 would really help.

Thanks, and great work.
jerryLee , March 09, 2010 | url
...
Am interested in seeing part 2 draft.

Thanks!
jpenglish98@yahoo.com
JP English , February 01, 2010 | url
Elisete's web builder
Hello,
I read the article and it sounded like what I was looking for. I am not a very experienced Joomla user and I would very much like to learn more from your article part 2 or to buy the book.
Can I get any of the two?

Thanks

Miki Retter
miki@elisete.com
www.elisete.com
Miki Retter , November 23, 2009 | url
 1 2 > 

Write comment

You can add your comment here

busy

10 Minute Joomla! Tips Blog

Conticreative joomla book reviews

Independent joomla hosting reviews

Joomla Training

Conticreative offers Individual and Corporate training (in person or online) on Joomla, Wordpress, Zen Cart and other leading Open Source scripts.

[Read More...]

Books

Books we suggest...

 

Spreadfirefox Affiliate Button
switch the positions on