Working with Code Snippets


The process of developing and maintaining websites often consists of reusing the same code elements again and again. Rather than retyping that code for each page, you can store the code in a snippet and then reuse and customize it when you need to use it again. For those Dreamweaver users who are used to writing their own scripts and functions, this is a very useful feature that can be leveraged to create your own personal code library.

Snippets are managed via the Snippets panel in the Files panel group. By default, Dreamweaver ships with a number of snippets that might be useful. For instance, if you want to add a drop-down menu to a form that contains the months of the year, simply expand the Form Elements folder in the Snippets panel and then expand the Dropdown Menus subfolder. You can then drag the Months, 112 snippet into any form on your page (see Figure 24.5) without writing a single line of code or building a drop-down menu with the Dreamweaver interface.

Figure 24.5. Predefined snippets can make it easy to add content to your web pages.


You can create new folders and subfolders for organizing your own snippets by clicking the New Snippet Folder button at the bottom of the Snippets panel.

Creating a Code Snippet

Creating a snippet is a relatively easy process. However, creating a snippet the right way takes a little more effort, but is worth the extra energy in the long run. When I speak about the "right way" to create a snippet, I mean you should take into account that you might not be the only person to ever view your snippet, so the snippet should include detailed commenting that describes what the snippet is supposed to do.

For instance, suppose that you want to create a new JavaScript snippet that validates that two form fields are not left blank. Start the process by clicking the New Snippet button on the Snippets panel. In the Snippet dialog box (see Figure 24.6), type the name of the snippet and be sure the name is something that clearly defines the nature of the code and the language in which it was developed. For instance, JS-FormValidation would be a good name for this form validation code.

Figure 24.6. The Snippet dialog box enables you to store the details and description of your code.


The next step in defining the snippet is to type a description of how the code works. Remember, the more detailed you are in the description, the more easily someone else can understand what the code is intended to do. So, instead of typing a short description such as "performs form validation," you might try typing a description such as: "This JavaScript snippet checks the values entered into form fields. If the value of the form is null, then the script pops a notice to the end user to complete the field and returns a false value to the form function that calls the snippet."

The next step in creating the snippet is to choose how the snippet code will be inserted into your overall code. If you choose Insert Block, the entire code block that you type is inserted into your page code when you apply the snippet. If, however, you choose Wrap Selection, Dreamweaver can apply the code before the insertion point and after the insertion point if necessary. For instance, if you select an image, Dreamweaver can place <a href="http://www.mysite.com"> before the object and </a> after the object, creating an effective hyperlink.

The third step is to actually type the code. If you have not already typed the code into a page, you can enter the code in the appropriate field or fields (in the case of a wrapped snippet). Otherwise, select the code in the Code view prior to clicking the New Snippet button and Dreamweaver automatically assumes that you want to create a snippet based on the selected code and populates this field with the selected code.

When creating your snippets, be sure to include comments that detail who created the snippet, what the snippet does, any variables that need to be assigned, and so on. This is where creating a snippet the correct way comes into play. The more documentation your snippet has, the more likely someone else will be able to understand easily what the code does, and the more portable the code becomes. This becomes important when colleagues ask you whether you have authored any code that could help them out with a project. If you properly document your snippets, you can send them the snippet and the comments will help them understand how to apply the code and how it is expected to function. For instance, using the previous example to create a snippet that adds a hyperlink to an image, the code inserted before the image would be

<a href="http://www.mysite.com">


However, the following code adds a comment to further explain how the snippet works:

<!-- The following line of code adds the preliminary HREF tag and URL to add a hyerlink to an object. --> <a href="http://www.mysite.com">


In addition, a comment should also be included with the code that follows the image, such as:

<!-- The following line of code closes the HREF tag --> </a>


The final step in creating a snippet is to choose in which format the snippet will be displayed when it is previewed. Code that produces a visible object in the Design view (such as a drop-down menu or an image) can be set to Design so that the object rather than the code can be previewed. Code that performs strictly behind the scenes (such as form validation or complex calculations) should be set to Code so that the preview pane displays only the code.

Organizing Snippets

As mentioned previously, Dreamweaver comes with several folders containing useful snippets. For organizational purposes, feel free to reorganize the entire snippets folder to make it easy for you to find snippets quickly and easily. You can drag and drop folders from within the Snippets folder just as you do in the Windows or Mac operating systems. You can also create new snippets folders by clicking the New Snippets Folder button at the bottom of the Snippets panel.

Reusing Snippets

After you have created a snippet, reusing it is as simple as dragging it and dropping it into the design or code view. You can also place your cursor at the appropriate insertion point and click the Insert button at the bottom of the Snippets panel. Another helpful feature that is worth mentioning is that Dreamweaver stores a record of the most recent snippets that you have used. You can access this feature and insert recently used snippets by choosing Insert, Recent Snippets from the menu bar.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net