View comments | RSS feed

Dreamweaver CS3  |  Go to CS4 Help

Work with code snippets

Code snippets let you store content for quick reuse. You can create, insert, edit, or delete snippets of HTML, JavaScript, CFML, ASP, JSP, and more. You can also manage and share your code snippets with team members. Some predefined snippets that you can use as a starting point are available.

Snippets that contain <font> tags and other deprecated elements and attributes are in the Legacy folder in the Snippets panel.

Insert a code snippet

  1. Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around.
  2. In the Snippets panel (Window > Snippets), double-click the snippet.

    You can also right-click (Windows) or Control‑click (Macintosh) the snippet, and then select Insert from the pop‑up menu.

Create a code snippet

  1. In the Snippets panel, click the New Snippet icon at the bottom of the panel.
  2. Enter a name for the snippet.
    Note: Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or double quotes (“).
  3. (Optional) Enter a text description of the snippet. This makes it easier for other team members to use the snippet.
  4. For Snippet Type, select Wrap Selection or Insert Block.
    1. If you chose Wrap Selection, add code for the following options:
      Insert Before
      Type or paste the code to insert before the current selection.

      Insert After
      Type or paste the code to insert after the current selection.

      To set default spacing for the blocks, use line breaks; press Enter (Windows) or Return (Macintosh) inside the text boxes.

      Note: Because snippets can be created as start and end blocks, you can use them to surround other tags and content. This is useful for inserting special formatting, links, navigation elements, and script blocks. Simply highlight the content you want to surround, then insert the snippet.

    2. If you chose Insert Block, type or paste the code to insert.
  5. (Optional) Select a Preview Type: Code or Design.
    Design
    Renders the code and displays it in the Preview pane of the Snippets panel.

    Code
    Displays the code in the Preview pane.

  6. Click OK.

Edit or delete a code snippet

 In the Snippets panel, select a snippet, and click the Edit Snippet button or the Remove button at the bottom of the panel.

Create code snippet folders and manage code snippets

  1. In the Snippets panel, click the New Snippet Folder button at the bottom of the panel.
  2. Drag snippets to the new folder or other folders, as desired.

Add or edit a keyboard shortcut for a snippet

  1. In the Snippets panel, right-click (Windows) or Control‑click (Macintosh) and select Edit Keyboard Shortcuts.

    The Keyboard Shortcuts Editor appears.

  2. In the Commands pop‑up menu, select Snippets.

    A list of snippets appears.

  3. Select a snippet and assign a keyboard shortcut to it.

    For more information, see Customize keyboard shortcuts.

Share a snippet with other members of your team

  1. Find the file corresponding to the snippet that you want to share in the Configuration/Snippets folder in the Dreamweaver application folder.
  2. Copy the snippet file to a shared folder on your computer or a network computer.
  3. Have the other members of the team copy the snippet file to their Configuration/Snippets folder.

Comments

Comments are no longer accepted for Dreamweaver CS3. Dreamweaver CS4 is the current version. To discuss Dreamweaver CS3, please use the Adobe forum.

Comments


Ultrashock said on May 16, 2008 at 6:20 PM :
On Windows Vista, your own snippets are saved to your roaming profile and not your Configuration/Snippets folder. If you're on Vista and you want to share snippets you have created, you'll find them in the following directory:

(c:) > Users > Username > AppData > Roaming > Adobe > Dreamweaver 9 > Configuration > Snippets
gregraven said on Jun 4, 2008 at 6:51 AM :
The procedure shown for sharing snippets is not correct on the Mac. Instead
of the snippets being in the Dreamweaver configuration folder (in a Snippets
folder), the snippets are actually in ~/Library/Application
Support/Adobe/Dreamweaver 9/Configuration/Snippets.
SinDesign said on Dec 11, 2008 at 12:22 PM :
With XP and CS3 the snippets can be found in the following directory:

Documents and Settings\Username\Application Data\Adobe\Dreamweaver 9\Configuration\Snippets

You may need to enter part of this manually because the Application Data folder in hidden by default.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/en_US/Dreamweaver/9.0/WSc78c5058ca073340dcda9110b1f693f21-7bd2.html