“You cannot build dynamic websites until you forget most of what you learned building static sites.”
Written by Marco Conti Monday, 10 November 2008 12:32
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.
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.
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:
<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 <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.
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:
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:
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":
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.
Where is Part 2? Learn more here.
|< Prev||Next >|
Conticreative offers Individual and Corporate training (in person or online) on Joomla, Wordpress, Zen Cart and other leading Open Source scripts.