Building code snippets to save time

- 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.

The beauty of snippets is their bold flexibility. You can create snippets for text, for bullet lists, for blocks of CSS styles. You can even create snippets full of HTML, JavaScript, jQuery, PHP, or any other programming languages. What's more, there are two kind of snippets you can create in Dreamweaver to make your web building process more productive. There's wrap snippets and block snippets. Wrap snippets let you insert code or other content around selected content.

So, for example, you may need wrap an area with div tags or drop in some form tags around a block of form fields. Block snippets let you add a block of text or code at your insertion point. Block snippets are really great for adding frequently used chunks of HTML, CSS, JavaScript, or any other content that you use frequently. For example, you could create a snippet for things like CSS link styles, or HTML meta tags, the JavaScript current date, or even a copyright statement.

To get a better idea of what you can do with snippets, check out Dreamweaver's free snippets library by opening the Snippets panel through the Window menu. Here you'll see several folders categorized by snippet type. There are Comments, Footers, Form Elements, JavaScript, Meta, Navigation, and Text. There's also a folder called Legacy, but you'll probably never use those because they include deprecated code like table formatting. The panel also has a preview window so you can see each snippet before inserting it on your page.

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.