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

Email newsletter template design

Maybe you’ve been tasked with producing your company’s email newsletter or maybe you’ve been doing newsletters for a while and want to compare notes. Either way, if you’d like to know how an email newsletter template is planned and designed then our latest article is for you!

How to create the perfect email newsletter template

Boost inbox joy by render testing your emails

There is nothing worse than creating a beautiful email and after sending the email out you receive feedback that it is broken in some email clients or devices. Or, worse still, that your beautiful email doesn’t get delivered but ends up in the spam bucket.

Good news, render testing can save you!

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 
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing

Email Masterclass

For marketers and communications specialists