Sharing Dreamweaver Code Snippets Manually and Through Snippet Extensions

Creating a Snippet Extension

While you may be comfortable with copying and pasting your snippet files manually, many of your work colleagues may not be comfortable with it. To avoid others from having to perform this task by hand, you can create your very own snippet extension, which will automatically install them into the correct location.

To create a snippet extension, you will need the following:

• The Extension Manager (also known as the EM): Use the EM to install, remove, and create extensions.

  You should already have the EM installed. If not, download the latest version, version 1.6, from the following web address:

  www.macromedia.com/exchange/em_download/

• The Snippet files that will make up the extension.
• An extension installation file. This is an XML file with an MXI file suffix and contains all of the instructions the EM will need to successfully install your snippet extension.

The following simulation walks you through the process of linking your style sheet to your HTML documents.

Play the demo: Creating a Snippet Extension

Setting Up the Extension Installation File

1. Download the file snippet_extension_start.xml CSS Filter Snippets contained in the sample files linked from the beginning of this article.

2. Open this file in Dreamweaver MX 2004 and switch to Code view.

   Before you start looking at the structure of this file, it is important to understand that because the extension installation file is an XML file, like all other XML files, it does have fairly strict syntax requirements. Therefore, when you are creating or editing a file of this type, you should always make sure you use correct XML syntax.

You can learn more about the MXI XML syntax by reading the Extension Installation File Format document available at the following URL:

• Launch printable document (PDF, 419K)

The first element that will need your attention is the <author> element.

<author name="Mark Fletcher"> </author> 

Here, using the name attribute, you can enter your full name.

Next comes the product element:

<products> 
	<product name="Dreamweaver" version="6" primary="true" required="true"/> 
</products>
 

The <product> element specifies which Macromedia product or products your extension is compatible with; the name and version attributes are self explanatory. They hold information about the product and version. In this case I have specified the version number to version 6 to ensure that both Dreamweaver MX 2004 and Dreamweaver MX users will be able to use the snippets.

The Primary attribute indicates whether the specified Macromedia product (in this case Dreamweaver) is the product this extension is primarily intended to be used with.

The last attribute associated with this element is the required attribute. Required indicates whether the specified Macromedia product is required for the extension to function properly. In this instance, Dreamweaver is necessary to use this extension and therefore I specified true as the value.

   <description> 
     <![CDATA[A collection of CSS Filter Snippets]]>  
   </description> 

<ui-access> specifies the text that will appear in the Extension Manager window when the extension is selected. Here you include information about where to find the item in the product's user interface as well as a brief description of the item's use.

  <UI-Access>  
   <![CDATA[Open the Snippets Panel, select the folder CSS Filters]]>  
   </UI-Access> 
   

Lastly, using the <file> element you need to provide about the specific files to be installed as part of the extension. It is important to bear in mind that filenames should be a total of 30 characters or less. For this snippet extension I am using the attribute's source and destination. Source is the name of the file; destination is the name of the folder the file will be copied to. If the folder doesn't exist, the Extension Manager will create it during installation.

Having made changes to the XML file, it is always a good idea to validate your code. To do this, select File > Check Page > Validate as XML. As long as no warnings or other messages appear in the Results panel, your code complies with XML's strict syntax.

Compiling the Extension File

Having successfully edited and validated your extension installation file, the next step is to save and package it and save it as an MXP file.

1. In Dreamweaver MX 2004, save your XML as CSS_Snippets_1 file with the MXI file suffix.
2. Open the Extension Manager.
3. From the File menu, select Package Extension.
4. Browse to the folder where you saved the file CSS_Snippets_1.mxp file and click OK.
5. You will be asked to save the extension and CSS_Snippets_1.mxp will already be set as the name.

6. Click Save.

   Note: You can also double-click CSS_Snippets_1.mxp to start the packaging process.

Installing the Extension

Having complied your extension, you should now install it and try it out.

1. Close Dreamweaver.
2. Open the Extension Manager.
3. From the File menu, select Install Extension.
4. Browse to locate the CSS_Snippets_1.mxp file and click Install.
5. You will be greeted with an Extension Disclaimer dialog box. Click Accept.

Having accepted the extension disclaimer, the extension installs and confirms that the installation was successful.

Note: You can also install the MXP file by double-clicking the file.

Using the Snippets Extension

Having installed the snippets extension, you can start using the CSS snippets to solve all your browser rendering woes!

1. Open Dreamweaver MX 2004.
2. Select Window > Snippets.
3. Expand the CSS Snippets folder.
4. Select the CSS Filter you wish to apply.
5. Click Insert.

Where to Go From Here

Now that you know how to share your snippets both manually and by creating snippet extensions, I encourage you to create your own snippets, package them up as extensions, and submit them to the Dreameaver Exchange. Don’t forget to browse through all the snippets that ship with Dreamweaver. The snippet you are about to create may already be there. Additionally, check the Dreamweaver Exchange to see what snippets other Dreamweaver users have created and posted. Happy snippeting!

Page 3 of 3

Previous Page