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.
