Recently, Adobe released Dreamweaver CS5. One of its major new features is the ability to integrate with the CMS of your choice. They seem to push Drupal, Joomla, and WordPress in particular, but in theory, it works with any CMS.
I have been very skeptical of this integration from the beginning, because Joomla manages its files very differently than Drupal or WordPress.
We all know that God kills a kitten when you edit Joomla’s core code. (Right? Right???) You are supposed to make a template override if you need to change something, leaving the core intact, so that your updates won’t get overwritten when you upgrade the site to its next version.
So, it seemed to me that this Dreamweaver/Joomla integration was nothing but trouble.
First off, though, an explanation of how to set this up, in a few “easy” steps.
- Install Joomla somewhere.
- You can install Joomla locally on your machine, using MAMP, XAMPP, or WAMP. This is what I did, for testing purposes.
- You can also install Joomla on a web host and hook up to it from there.
- Make sure Joomla is running correctly, regardless of where you run it. If Joomla isn’t running correctly, Dreamweaver isn’t about to help you.
- Open up Dreamweaver CS5. You can download a 30 day free trial from the Adobe site if you’d like to give this a try.
- Go to Site – New Site.
Note that the Site definition dialog box is quite a bit different in Dreamweaver CS5! The basic/advanced options are now gone. I like this version much better because it’s much simpler.
Under the “Site” tab, there are only two items to define, and these are the only two items that must be defined to create a Dreamweaver site. Give the site a name (like Joomla 1.6 test), and define the local site folder. Since I am working with WAMP locally on my PC, this path becomes C:wampwww (because I’ve installed Joomla directly in the www folder).
4. Now go to the Servers tab, just under Site:
Click the + item at the lower left of the window (red square above)
This will pull up this dialog box:
Under the Basic tab, for a Joomla site installed locally on WAMP on a PC (see how much qualification I am putting into this? If your setup is different, you’re going to need to enter different information), complete the screen as shown:
- Server name: localhost
- Connect using: Local/Network
- Server folder: c:wampwww (this is the same as your local folder)
- Web URL: http://localhost/
Now switch to the Advanced tab. Complete the dropdown as shown:
Change the testing server dropdown to PHP/MySQL, since that is what Joomla is running.
Save everything. Your new site should load.
The above image shows the Files panel on the right side of the screen in Dreamweaver. If you don’t see this, you can get it by gonig to the Window menu item and choosing Files (or F8).
5. Double-click on index.php from the Files panel, as shown above. You should see absolutely nothing. Yes, this is the index.php at the root of the site. Do NOT open a template index.php page, or any other page on the site — it WILL NOT WORK CORRECTLY. You can certainly use PHP to edit those pages (see note above regarding dead kittens and core Joomla files, you’ve been warned), but you can’t work with them in this context.
At the top of the page, in the red box, see where it says something about discovering dynamic files? Click the link for Discover.
6. The message about Discover changes to this message:
So click the Live View link.
I’ve installed Joomla 1.6, but you can use Joomla 1.5 if you wish. Procedures are exactly the same.
You are now working in Live View. Use control-click on PC (Mac use command-click) to actually click the links and go to other pages. If you do a regular click of the links, you can select items.
Let’s say you select the word Joomla! in the main content area. The CSS panel will update with the latest information, as shown below:
Dreamweaver sorts through several stylesheets to display exactly the styles that apply to this particular heading. Using Dreamweaver’s tools, you could now edit these colors, fonts, or whatever other aspect of this heading you’d like to change.
But what file are we editing? That’s not really clear from this view.
Note at the top of the page, there are a bunch of files listed. I’ve outlined them in the red box. If you click the double arrow (at the end of the red box), you’ll see even more files. Some of them have the same names. This is every single file that goes into displaying Joomla’s home page. In fact, by my count, there are 140 files for Joomla 1.6 that make up this very simple home page. There are no extensions installed! This is just Joomla’s sample data that we’re looking at!
Now, how on earth do you get through 140 files to figure out which one you can change?
Fortunately, Dreamweaver has provided us with a filter to change these files. That’s the little funnel icon just after the double arrows.
You can limit the kinds of file types to display by selecting which extensions you want. .css is CSS, .js is Javascript, .otf has to do with fonts and font substitution, and .php is a PHP file. You can also choose Custom Filter to look for a specific file.
You can switch off everything except .css and you’ll see just the stylesheets that apply to this page.
Using the custom filter, you could tell it to look for index.php — that would be the template page for this site. In this case, the page is running the Beez 2.0 template, and it would load its index.php file, since that’s the template that’s in use here.
So what is this amazing new Dreamweaver feature good for?
So glad you asked.
Joomla-Dreamweaver integration is GREAT if:
- You want to edit an EXISTING Joomla template within the context of Joomla. Perhaps you don’t know CSS very well, or you just like Dreamweaver’s productivity tools.
- You know that the ONLY files you should edit are index.php (the template HTML file) and the CSS files associated with this template.
- Maybe you’re a bit confused by the CSS and what you should edit. Dreamweaver does a nice job of pulling out the relevant declarations that you can edit to change something.
- For those of you who like Artisteer, this might be a godsend for you. You didn’t know enough HTML/CSS to create your own Joomla template in the first place, and now you want to change the way something looks but you can’t figure out the CSS to make the change. Dreamweaver may be the perfect solution for you.
Joomla-Dreamweaver integration is AN ABSOLUTE NIGHTMARE if:
- You think you can use this to edit any random PHP file in Joomla’s structure. Do not do this. Kittens. Cute, cuddly kittens. Or, possibly worse, you could blow up the whole site, and you would be very unhappy about that.
- You are easily overwhelmed by long lists of file names, many with the same names, and you just are paralyzed by fear about what you can touch. That’s probably a good reaction.
Joomla-Dreamweaver integration DOES NOT DO:
- THIS DOES NOT CONVERT YOUR HTML WEB PAGE TO A JOOMLA TEMPLATE. There are a bunch of steps to creating a custom Joomla template. If you want to learn how to do this, watch my Lynda.com videos on the topic of template creation.
- THIS DOES NOT PUT THE JOOMLA CODES IN YOUR HTML DOCUMENT. See bullet #1 above.
- You are using Dreamweaver as the way to view your Joomla site. If you’ve done more than 5 hours of web development, you know it’s not uncommon that sites look different in different browsers. Dreamweaver is acting as the browser in this case. Just because it looks great in Dreamweaver DOES NOT reflect on how good/bad it looks in IE 7 (ugh), Safari (dear God), or IE 6 (Nooooooooo!!!!). You must still do browser testing, and if you wind up with some kind of weird Safari bug (which seems to be the bane of my existence), I’m not sure Dreamweaver will help you out much. Yes, Dreamweaver does now integrate with Adobe BrowserLab. But still. Test in real browsers.
You mean, I still have to learn hand-coded HTML and CSS to do my best template work in Joomla?
Yes. Yes, you do.
Would you recommend using Dreamweaver and Joomla together?
I have actually been using Dreamweaver and Joomla together for 5 years. But I use Dreamweaver as a CODE EDITOR, not in Design View. Dreamweaver is a productivity tool for me. I’ve used it for 10 years, and it’s what I know.
If I was just getting into the Joomla business now, I would probably NOT go with Dreamweaver. I’d probably use a tool like KompoZer or any one of a zillion code editors.
For Joomla and Dreamweaver, the only real reason to integrate these two would be if you do not know CSS and you’d like a nice comfy familiar tool like Dreamweaver to work [ad#co-1] with instead of that rugged WYSIWYG-free Joomla interface. If you are a one-person shop, it’s unlikely you’ll be in this situation. But if you’re in a multi-person work environment, say you have a designer who codes the HTML/CSS, but knows NOTHING about PHP. Dreamweaver and Joomla might make a great way for this person to work on the CSS, once the engineers have taken the original HTML design and turned it into a Joomla template. In that case, this might be useful.
But the truth of the matter is this. If you want to do custom work with a CMS in 2010, you have got to get your hands dirty and get into the HTML and CSS. You might be able to skip knowing the PHP, but you can’t get out of knowing HTML and CSS. Or you stick to canned templates. There is not a lot of in-between, and this Dreamweaver/Joomla integration is not going to save you from that reality.