dhtmldev.com

Building basic templates for the Joomla content management system is straightforward, but remembering the basic code snippets to include is not, unless you have the Joomla Dreamweaver Extension. The extension installs the Joomlasolutions toolbar for Joomla template code snippets.

Technology Overview

If you are wondering what the Joomla Dreamweaver Extension would be used for, then are probably not familiar with Joomla or Dreamweaver Extensions. Maybe after reading this, you will install Joomla and start using Dreamweaver Extensions for Joomla and for many other Web development and design coding tasks.

Joomla Content Management System

Joomla is an open source, content management system. Everything you read in this article should also apply to Mambo, because Joomla is a version of Mambo. Joomla was created after the Mambo developers decided to leave the Mambo project.

Installing Joomla requires a Web server with PHP and MySQL. There are many hosting solutions that include Joomla pre-installed. The one I use is 23dimensions.

Dreamweaver Extensions

Dreamweaver Extensions allow third-party developers to create custom extensions that install into Dreamweaver. The installation files are MXP files. To install an MXP file, you simple double click it. The Macromedia Extension Manager will install the extension.

For more details and extensions, Visit the Macromedia Exchange site. The Macromedia Exchange site provides a repository for various extensions created by Macromedia Developers as well extensions submitted by users. Some extensions are free and others are commercial. Also, there are extensions for more than just Dreamweaver. Extensions are available for most, if not all, Macromedia products, such as Flash and Fireworks.

Installing the Joomla Dreamweaver Extension

The Joomla Dreamweaver Extension is an MXP file, which is the format used for Dreamweaver Extensions. The extension will install the Joomlasolutions toolbar in Dreamweaver. The Joomlasolutions toolbar will make creating new Joomla templates much easier.

1. Download the Joomla Dreamweaver Extension (an .mxp file)
2. Double-click the MXP file. You should message that extension installed successfully. The Extension Manger window will open.
3. After installing the extension, you need to make sure it is turned on in the Extension Manager. If the Extension Manager did not open in the previous step, open the Extension Manager. Go to Start»Programs and in the Macromedia programs start the Macromedia Extension Manager.
4. Because the Extension Manager is used to administer extensions for all Macromedia applications installed on your computer, make sure that Dreamweaver is selected in the applications drop down list at the top of the Extension Manager.
5. In the On/Off column, place a check next to the Joomla extension.
6. If Dreamweaver was already running, restart Dreamweaver so it can load the new extension.

Here is a screenshot of how the installed Joomla extension in Extension Manager.

Using the Joomla Dreamweaver Extension

Using the Joomla Dreamweaver Extension will save you a lot of time when creating new Joomla templates. To get started, you will create a new PHP document in Dreamweaver (because all Joomla templates must be PHP files):

1. Start Dreamweaver.
2. Create a new PHP document. Click File»New and then select Dynamic Page and PHP. Click the Create button. A new PHP document will open in Dreamweaver.
3. Delete all the default code that Dreamweaver added to the new PHP document. Will do not need it, because we will create all the basic code using the Joomla Dreamweaver Extension.
4. Now it is time to use your new extension. Make sure the toolbar for the extension is visible. Click Window and place a checkmark next to Insert so that toolbars used to insert code snippets are visible. If you still do not see the toolbar for the Joomla Dreamweaver Extension, select the drop down on the Insert toolbar and choose Joomlasolutions. To see all Insert toolbars, select Show as Tabs instead of selecting Joomlasolutions. Then Joomlasolutions will be one of many tabs on the Insert toolbar.
5. Place your cursor in the empty PHP document. Click the Insert Head Code icon on the Joomlasolutions toolbar. All head code for a Joomla template will be added to your new PHP document.

Here is a screenshot showing the Joomlasolutions toolbar that was added using the Joomla Dreamweaver Extension. The Joomlasolutions toolbar has many icons for adding everything you need in the standard Joomla template. In this screenshot, the Insert Head Code icon was selected to add the head code for a Joomla template.

Conclusion

You have learned about Joomla, Dreamweaver Extensions, how to install a Dreamweaver Extension, and how to use the Joomlasolutions toolbar to create a new template for Joomla. Also, because Joomla was created by the former Mambo developers, everything in this article also applies to Mambo.

This has been an overview of installing and using the Joomlasolutions toolbar. To create a Joomla template, you need a few tutorials. For additional reading, I highly recommend the following:

• A guide to creating Mambo 4.5.x or Joomla 1.0.x templates
• 1. Basic Templating and Site Design
• Joomla Resources by Joseph LeBlanc