User Guide Cancel

Reuse code with snippets

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how you can create snippets using Dreamweaver's Snippets panel and reuse your code across different Dreamweaver sites.

If you find yourself repeating code blocks multiple times, then you can use code snippets to speed up the process of writing code. Write the code once, save it as a snippet, and then double-click it in the Snippets panel to insert it in multiple places.

Snippets created using the Snippets panel are not site-specific, and so they can be reused across sites. You can also use snippets across different devices, and also across different versions of Dreamweaver using sync settings.

Dreamweaver comes packaged with multiple code snippets. However, you can also create your own code snippets and save them.

How to make the best use of a snippet?

Browse through the following use cases to understand where you can use snippets in your workflow:

  • If you are working in an organization that follows certain design standards, or if you are a free-lancer working on multiple projects – in either scenario you can use code snippets to achieve design uniformity, by storing these common pieces of code as snippets, and then inserting them into your code.
  • If you are required to define, maintain, and enforce some coding standards then code snippets come in useful.
  • Hand-coding responsive elements in a web page can be time-consuming. Use some of the snippets from the Bootstrap or Responsive_Design_Snippets section of the Snippets panel (for example, a responsive table code snippet). With one click you have inserted almost 20 lines of code for that responsive table.
    Edit the table as required. You can merge columns or rows, add columns or rows, style it any way you want, and then select the code and save it as a new snippet that you can reuse in all other pages you create. For more information on creating code snippets, see Create snippets.
  • JavaScript behaviors, CSS effects, and CSS styles are also excellent candidates for code reuse.

The Snippets panel

In Dreamweaver, you can manage code snippets using the Snippets panel (Window > Snippets).

A snippets panel is like a collection of pieces of code.

Snippets panel in Dreamweaver
Snippets panel in Dreamweaver

What you can do with the Snippets panel

You can do the following tasks using the Snippets panel.

Insert snippets

Expand the folders to navigate to a code snippet, and then double-click it, or click the Insert icon to insert the snippet at the cursor location. To wrap existing text in a code snippet, select the text, then insert the snippet, the text is wrapped within the code snippet. For more information, see Insert snippets.

Create Snippet Folders

Manage your snippets by housing them in folders with an intuitive naming convention. To create a snippet folder, click the New Folder icon. A new snippet folder is created within a selected node. To change the location of the snippet folder, drag it to the desired location. For more information, see Create snippet folders

Create snippets

Use the pre-packaged snippets and edit them to create your own code snippets. Or, create your own snippets from scratch, and then save them in the Snippets panel for later reuse. For more information, see Create snippets.

Edit snippets

To edit an existing snippet, select the snippet, and click the Edit icon. For more information, see Edit snippets.

Delete snippets

Delete snippets you no longer need. To delete a snippet, select it and click the Delete icon.

Rename snippets

To rename a snippet, right-click the snippet to open the context menu. Choose Rename snippet, and then type in the new snippet name.

Add/edit trigger keys

Trigger keys allow you to create intuitive short codes that you can type in, instead of navigating to a particular snippet in the Snippets panel and then inserting it. If you have defined trigger keys, place your cursor at the required spot in the code. Then type in the trigger key text and press tab. The code snippet is inserted into your code. For more information, see Add trigger keys and insert snippets using trigger keys.

Insert snippets

You can insert code snippets into your code at the point where your cursor is placed.

  1. Place the cursor at the insertion point where you want to insert the code snippet.

  2. In the Snippets panel (Window > Snippets), double-click the snippet, or click the Insert icon at the bottom of the Snippets panel.

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

Note:

If you have defined trigger keys, place your cursor at the required spot in the code. Then type in the trigger key text and press tab. The code snippet is inserted into your code. For more information, see Add trigger keys and insert snippets using trigger keys.

Note:

To see what a code snippet looks like, insert a snippet in design view.

Create snippets

  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 cannot contain characters that are invalid in filenames, such as slashes (/ or \), special characters, or double quotes (“).

  3. (Optional) Enter a text description for the snippet.

    A text description makes it easier for other team members to identify and use the snippet.

    Creating a code snippet with enough description makes it easy to identify for later reuse
    Creating a code snippet with enough description makes it easy to identify for later reuse

    Note:

    You can also create trigger keys to add snippets into your code. For more information, see Add trigger keys and insert snippets using trigger keys.

  4. Click OK.

Edit snippets

To make changes to an existing snippet, you can:

  • Right-click the snippet to open the Edit Snippet dialog
  • Select the snippet and click the Edit Snippet icon at the bottom of the panel

When you edit a snippet, existing instances of the snippet in the document do not get updated.

You can edit all the fields in the Snippet dialog, such as the Name, Description, trigger key, and the code.

Create snippet folders

  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 trigger keys and insert snippets using trigger keys

Use trigger keys to quickly add code snippets.

First assign trigger keys to all your frequently used snippets. Then in Code view, type in the Trigger key text and press tab, Dreamweaver adds the snippet at the cursor location.

  1. In the Snippets panel, right-click (Windows) or Control‑click (Macintosh) and select Add Trigger Key.

    Select Add Trigger Key in the Snippets panel
    Select Add Trigger Key in the Snippets panel

  2. Enter the required text in the trigger key field.

    In the following image, a code snippet for creating a mailto link is assigned a trigger key of mailto, making it easy to remember later. Be sure to give simple, short, and intuitive trigger keys.

    Enter text in the Trigger Key field
    Enter text in the Trigger Key field

    Note:

    Trigger keys cannot contain any special characters (apart from an underscore). In addition, the same trigger key cannot be used for two different snippets.

  3. To add snippets into your code using trigger keys, type in the trigger text (in Code view) and press tab to insert the snippet into your code.

How to distribute snippets across multiple devices

Dreamweaver’s cloud sync feature helps you keep snippets synchronized between two machines.

Use Dreamweaver’s sync settings feature to port snippets created using one instance of Dreamweaver into another machine running Dreamweaver (for example, office and home installations of Dreamweaver). 

To sync settings:

  1. Click Edit > Preferences.

  2. In the Sync Settings section, click Sync Settings Now.

    The settings are saved on the cloud. When you next launch Dreamweaver, these settings are imported. Local settings are overridden by the settings imported from the cloud.

    Your snippets, and all other preference settings get synced.

    For more information on sync settings, see Synchronize Dreamweaver settings with Creative Cloud.

Note:

If synchronizing settings is something you do often, enable auto-synchronization by clicking Enable Automatic Sync in the Sync Settings section in the Preference panel. Every change in the settings is automatically saved to the cloud.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online