Join Sue Jenkins for an in-depth discussion in this video Building code snippets to save time, part of Productivity Tips for Web Designers.
- Hi there! This is Sue Jenkins with Productivity Tips for Web Designers. In this installment, you'll discover how to create and use snippets for increased productivity during web development. If you've ever wanted to be able to save and reuse a bit of text or code on your webpages but didn't know how to do it, or if it was even possible, Dreamweaver has you covered with snippets. Snippets are reusable bits of text or code that you can create and save in Dreamweaver, and then use at any time on any open file.
For instance, if we expand the Footers folder and select the Basic Brief Text snippet, you'll see what it looks like in preview above. To insert a block snippet, like the Bread Crumb Snippet in the Navigation folder, first place your cursor in the file to set the desired insertion point. Then double click the desired snippet in the Snippets panel. You can also select a snippet and press the Insert button at the bottom of the panel, or simply drag and drop the snippet into your open document window.
If you'd like to learn more about a snippet before you use it, you can click the edit snippet button at the bottom of the panel. This will open the Snippet dialog box, where you can read a description and view the code. Adding a wrap snippet to your page works in pretty much the same way. To add a wrap snippet to your page, you'll first select the content that you want to wrap your snippet around in Design view, and then select the snippet in the Snippets panel, click the insert button, or simply double click the snippet.
Unfortunately, there are no wrap snippets in any of the freebie folders, so let me show you how to make one. Start by clicking the new snippet folder icon on the bottom of the Snippets panel to create a custom folder you can save all of your personal snippets into. I'll call mine "Sue," and I know that it's in the navigation panel, so what I'll do is I'll collapse the footers so I can see the rest of the space, maybe open this up, and I'll just drag it out, so it's a separate folder. And also one thing I like to do is put an underscore before my file name so it sits at the very top of the list.
There we go. Alright. So now, with your new folder selected, you'll click the new snippet button at the bottom of the panel. And give your new snippet a name. So let's do something called "Wrap with DIVs." Then in the description field, we can type in a short description like, "Use this snippet to wrap your selection with div tags." Now, enter your opening and closing div tags in the Insert before and Insert after fields.
Leave the preview types set to Code, and click OK to save it. To apply the new wrap snippet, select your content, and click the Insert button at the bottom of the Snippets panel. Again, you can also apply a wrap snippet by double clicking the snippet or dragging and dropping it onto your selection. Great! Now, let's make a block snippet and also save it inside our custom folder. Let's call this one "Link Styles." In the description field, type out a longer description about your snippet.
So, for instance, we might type in something like, "Save time creating custom link styles "by inserting this link style snippet." Next, make sure you choose Insert block for the Snippet type. Now we can drop in our CSS in the Insert code field. For instance, we might set the link and visited color to black and the hover and active color to gray. I'll just paste in my code that I've copied from another source.
The last thing to do is to choose a Preview type. Choose Code for HTML, CSS, or other coding languages. Otherwise, if your snippet includes graphics and you'd like to preview your snippet with the graphic, choose the Design preview type. Click OK. And let's see how it works. Since this is CSS, we'll need to paste it into our styles in the internal code. And now with our cursor where we want it to be, we can just double click to add that code to our page.
If you ever need to edit, delete, or manage your snippets, you can use the panel icons at the bottom of the panel. You can also drag and drop your snippets within the panel to order them into different folders. Another great thing about using snippets is if you go to the coding toolbar, there is a button here that will let you insert the most recent snippets directly into your code. Snippets are such a great time saving trick. Feel free to create as many custom snippets as you need and use them to eliminate repetitive tasks and streamline your workflow.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.