Code snippets for Adobe Dreamweaver

Feb 8, 2022 | Code snippets, Email production

Have you ever thought to yourself, “How can I speed up the process of creating html for my emailers?” Or maybe you’ve wanted to make your coding more efficient and error free for yourself. Well look no further. Code snippets could be just what you need!

Kristie Botha

I’m sure you’ve noticed that you tend to re-use sections of code regularly when creating a specific brand’s mailers. Also, you’ve got your trusty pieces of code that help you style things like lists and tables in html. To use that code again, you have to go search for the mailer where you last used it so you can copy and paste the code. Or maybe you’re a bit more organised and have saved all your sections of code in a master file that you can copy and paste from.

Wouldn’t it be great to have that code saved in a place that’s easy to find and re-use? In this post, I’ll show you how to create your own code snippets in a few easy steps.

What exactly are code snippets?

Code snippets are reusable blocks of code that can be inserted into the html that you’re creating. Dreamweaver does already supply a collection of code snippets for you in the Snippets panel, including blocks of html and JavaScript. But you can also create your very own custom code snippets and add them to the Snippets panel for easy access. Snippets help programmers reduce the time it takes to type in repetitive information.

Code snippets are a lifesaver. I use them every day and it has helped speed up my production. They are effortless and easy to use. I am always adding new snippets to my folder.” – Kristie

Here’s a quick tutorial on how to create a snippet in Dreamweaver

  • In Dreamweaver, go to the code section of your design.
  • Find the section of code that you’d like to save as a snippet.
    • This can be anything from the full <th> to </th>, or <td> to </td>. It could just be a bit of style code that you would like to save – for example, heading 2.
  • Select all the code that you need. In this example, I have selected all the style code that makes my heading 2 possible.

  • Highlight the code that you want to save (as per the above screenshot).
  • Right-click and select “create new snippet”.
  • The Snippet dialogue box appears. Give your snippet a name. Click “OK” to save the snippet.

  • Now your snippet has been saved to your Snippets folder. To access your snippets, click on the Snippets icon in the right-hand side panel.

  • You can edit, delete, or rename a snippet by right-clicking on it.

It’s as easy as that. Now all of your snippets are easy to access. No more typing out all the code, or forgetting to copy some code over. There will be fewer mistakes and you’ll save so much time.

Now for the fun part… using your snippets

While creating your html, you decide you want to add a table or a headline to your copy. Wait… don’t add that code in manually. You’ve created a code snippet for this!

  • Go to the section in your code where you want to insert the code snippet.
  • Click on the Snippets icon in the right-hand panel to bring up all your custom snippets.
  • Double-click on the snippet you want to insert, and boom there it is.

Before

You’ll notice that all I have is just the code for align and vertical align.

After

After adding my code snippet, all my style code is in there.

Email services designed just for you

When you partner with us, you’ll have access to a dedicated team of email marketing experts, including strategists, campaign managers, designers and developers. We offer once-off services and retainer-based service plans.

Recommended reading

Artboards in Photoshop

Make responsive email design easier with Photoshop artboards. Visually, artboards serve as individual canvases within a Photoshop document, which simplifies and speeds up the design process. It makes visualising the mailers easier and ensures consistency.

Make responsive email design easier with Photoshop artboards.

Html email for Outlook

Have you ever wanted to send an extra special email from Outlook but find that your beautiful layout breaks when it arrives in your recipient’s inbox? Creating the email in html is the answer to this.

The Cantaloupe Story

Read about us and meet our team

Join our team. Work from anywhere

Help us make email marketing better

Helping marketing teams and agencies since 2006

Overview of email marketing. Learn more

Email templates

Tried and tested templates
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing