Working in Code with Snippets


Dreamweaver provides several ways to insert custom codes. One of the easiest methods uses snippets, introduced in Dreamweaver MX. Snippets are segments of code that are accessible from any site. A snippet can be inserted as a single block of code or wrapped around any selected content. Snippets are easily defined and straightforward to insert. You can even package snippets to be installed using the Extension Manager.

TIP

In a multiuser system, the administrator should install snippets or any extension intended to be used by all designers on the network.


Snippets are best used to insert CMS tags when no user -defined values for arguments are required. In other words, snippets are appropriate for <meta> or similar tags that identify a particular CMS page type and tags that identify content placement. For example:

 <meta http-equiv="Creator" content="JWL Content Management System"> 

works well as a snippet. CMS tags that need a variety of values are better inserted with custom objects (covered later in the section "Adding a Custom Object").

If you're working with multiple custom snippets, it is best to create a folder to organize them. To add a new folder in the Snippets panel, do this:

  1. Open the Snippets panel by choosing Window > Snippets or by clicking on the Snippets tab in the Code panel group .

  2. Select the folder you want to contain the new folder.

    To make a folder appear on the root, you must deselect all folders in the Snippets panel. This is a little trickier than it seems. First, open and select any single snippet. Then click the plus sign to collapse the snippet folder. Be sure to click the plus sign, not the snippet name .

  3. Select the New Snippet Folder button at the bottom of the Snippet panel or choose New Folder from the Panel group menu.

TIP

If you have a large number of snippets, you can define subfolders as well. There's no real limit to the number of folders that can be nested within one another.


As mentioned earlier, there are two types of snippets: code blocks and code wrapping. To define a new snippet, follow these steps:

  1. Select the Add (+) button of the Snippets panel to display the Snippet dialog box, shown in Figure 1.6.

    Figure 1.6. Any code that is selected before the Snippets dialog box is opened is copied to the Insert Block text area.

    graphics/01fig06.gif

  2. Enter a descriptive name for the snippet and a brief description, if desired, in the respective fields.

    The description appears to the right of the snippet name and should be concise if used at all. Long descriptions scroll offscreen and can be difficult to read.

  3. Choose the Snippet type: Insert Block or Wrap Selection.

  4. If you're creating an insert type snippet, enter the desired code in the Insert Block text area.

  5. If you're creating a wrapping type snippet, enter the proper code in both the Insert Before and Insert After text areas.

  6. Set the Preview Type to either Design or Code.

    Unless your snippet consists of a complete Web element, visible in Design view, choose Code as the Preview Type. Most CMS tags use the Code option.

TIP

If possible, it's more efficient to copy and paste your code into the snippet.


Inserting a snippet is even simpler than creating one:

  • To place a block snippet on the page, drag it into place or position the cursor where you want the code block to appear. Then select Insert from the Snippet panel.

  • To apply a wrapping snippet, first select the page section to be enclosed by the snippet. Then drag the snippet over the selection or, alternatively, choose Insert from the Snippet panel.



Joseph Lowery's Beyond Dreamweaver
Joseph Lowerys Beyond Dreamweaver
ISBN: B000H2MWYS
EAN: N/A
Year: 2001
Pages: 87
Authors: Joseph Lowery

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