New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using snippets

From: Dreamweaver CS6 Essential Training

Video: Using snippets

Once you begin coding pages on a regular basis, you'll find that you often repeat code structures or specific code blocks over-and-over again. In order to speed up the process of writing this code, you can create what's known as a Code Snippet, which can then be added to your code with a single click. So I am going to be working in the Index file again, and this time, this is found in the 05_06 folder. I want to point out something that's changed a little bit. You'll notice that up here on line 7 and 7, the script tags in previous versions were inside of a comment tag.

Using snippets

Once you begin coding pages on a regular basis, you'll find that you often repeat code structures or specific code blocks over-and-over again. In order to speed up the process of writing this code, you can create what's known as a Code Snippet, which can then be added to your code with a single click. So I am going to be working in the Index file again, and this time, this is found in the 05_06 folder. I want to point out something that's changed a little bit. You'll notice that up here on line 7 and 7, the script tags in previous versions were inside of a comment tag.

You may have noticed that from our previous movie. So I have stripped out the comment tags in order to show you guys kind of how snippets work, and what they are. All right, so snippets reside in their own panel. So I am going to go over to my Panel Dock over here, and I can find the Snippets panel typically docked with the files in the Assets panel. Now if you don't see it over here, it's very easy to find. You can just go up to Window, and you can choose Snippets. Okay now, essentially you can think of the Snippets panel as just a collection of little pieces of code, and these little pieces of code can be inserted or injected into your pages as many times and as often as you want and wherever you want.

And there are a couple of different types. One for example, you can just go ahead and insert code directly on to the page, or you can wrap content within a snippet. Now, as you can see there are some folders over here and these folders hold some of the default snippets that ship with Dreamweaver. In a moment I am going to show you how to create your own. But, if you want to use one of these, for example, we notice, we have a whole folder worth of comments, so I am going to open those up, and you can see that we have all sorts of different comments. We have some just generic comments, but what I am looking for are these conditional comments for Internet Explorer.

So basically, Internet Explorer is the only Browser out there that recognizes what they call a conditional comment. Basically, browsers are taught to ignore comments altogether, just don't even parse them. But, Internet Explorer says, hey! There is a special type of comment and if I read that, if it says a certain thing, then go ahead and take the code that's inside of it, and process it, run the script or display the code, or parse it. So that's very helpful, because it allows us to actually target specific versions of Dreamweaver. So both of these scripts, the html5shiv and the respond JavaScript Library, both of those target earlier versions of Internet Explorer, versions earlier than 9, and help it support both HTML5 and media queries.

So it's something that I kind of put almost in all my documents. All right, so I am going to select line number 6. I can do that very quickly and easily by clicking on the line number itself. So if you ever want to select a whole line of text, you can just click on the line number and it will do that for you. Then, I am going to come over to my Snippets Panel and I am going to find the If Less Than IE. Now, you will notice that If Less Than IE, I don't have an IE 9, I only have an IE 8, and that's okay because it gives us a nice starting point. So if we just double-click on that, what that's going to do is it's going to surround the line that I had selected with this comment.

Now, you may want to get rid of some of the white space there. Let me go ahead and do that. But, what this does is it goes ahead and inserts that comment directly on to the page. Now, the other thing that I can do here is I can modify this. So right now, it just says If Less Than IE 8. I can change that to say If Less Than IE 9. Now obviously, if I wanted to, I could go ahead and copy and paste this around the second one or even just do that again. But chances are, I am going to need this over-and-over again in my files. So, what I can do, I am going to go ahead and on the next line down, go ahead and place that comment again, and I'm going to sort of move that up a little bit, I am going to change that to IE 9.

Now, why would I do that again? Well, because I want to actually make a snippet. Making a snippet is extremely easy to do. All I have to do is highlight the code that I want to make a snippet out of, and then I can come right down to the Snippets panel. There is a series of icons down there in the bottom, and one of them says New Snippet. If I click on that, it's going to bring up this panel. And it's going to say, okay, what do you want to call this one? And I am going to call it Less Than IE 9. Now, I could write a description there if I wanted to, that would be especially helpful if I was doing this for my team.

But, I get two choices with my snippet; one is just to insert the block of code. Now, that's for you so if you just want to go ahead and take the code that you have here in the snippet, and just inject it directly onto the page. I actually want to use it to wrap the selection. Now, if I do that, I have to tell it which part of the snippet goes before the selection and which part goes after. So I am going to take the closing part of the conditional comment, I am going to cut that, and then I am going to paste it into the Insert after. Now, you can create snippets entirely from scratch. I could have nothing selected, come over to the Snippet panel, click on this, and then I could just hand-code directly in here the snippet that I wanted. All right! I am going to go ahead and click OK to create that, and you can see that now within my Comments section, I have Less Than IE 9.

Now, I'm also free to create new subdirectories, new folders and organize these snippets any way that I want. So I am going to focus back in my code and get rid of the code that's on the page, and now I am going to highlight my script there, then I am going to come over to Less Than IE 9, double-click that again, and you'll notice that now it surrounds that particular script tag with the Less Than IE 9. So not only did I take advantage of some of the default snippets that are pre-built in the Dreamweaver, but then, I sort of modified them, and created my own. And there are a lot of different uses that you can use this for. For example, you could come down, let's say you have a menu structure that you know you're going to repeat in page after page after page within a site.

If you're not using templates, if you're not using some type of dynamic assembly for this, you could go ahead and make a snippet out of this menu, and then on a new page, you could simply click to insert the snippet. Another thing that you can do is you can assign keyboard shortcuts to the snippets as well, so if you really know that you're going to be using a section of code over and over and over again, you can assign a keyboard shortcut to it, and then just inject it directly on the page. That's extremely helpful when you're writing CSS. For example, if I go over to my main.css, I talk about these colors, but let me let you in on a little secret. I make my own Color Palette by creating snippets.

So what I do is I will come in and I'll select an item like this, say rgb 251 and then I will just come down into my Snippets Panel and I will create a new snippet, and I can call this snippet whatever I want, I will just call it orange. I don't need to give it a description, but I am going to do Insert block, so that will just inject the code directly wherever I wanted, and I will click OK. Now, I can rearrange that if I wanted to. I would create say a new snippet folder, and I could call this new snippet folder or something like Roux Academy Colors. It's really up to me. Whatever I want to do, I can organize this anyway that I want.

Move this outside so it is no longer part of that, and then move that orange in there. Now, I could assign a keyboard shortcut to this particular snippet. Notice if I right-click the snippet, I could choose Edit Keyboard Shortcuts. It's going to bring out my Keyboard Shortcut panel. Now, if I ever want to modify these, the first thing I have to do is make a duplicate. So I am going to make a Duplicate Set here. I am just going to call him james shortcuts. And now what I can do is, I can go directly into my Snippets, I can find RA Colors, select that, and I could just go ahead and add a new keyboard shortcut to this, and I could make this keyboard shortcut anything that I want, say Ctrl+F1 for example.

I will go ahead and change it to assign it, click OK. And what's awesome about this, I could go ahead and do this for the rest of my colors, and any time I wanted a color, let's say I go down to say line 141 where we have that orange selector. I could go right down here to color. Now, when I'm typing this code in, I can now just hit Ctrl+F1, boom! Color is in there, I didn't have to memorize it, or go back up and copy and paste it. How cool is that? So if you're going to be doing a lot of heavy coding, or if you're going to be needing to reuse Code Snippets over and over and over again, be sure to take advantage of Dreamweaver's Code Snippets feature.

Show transcript

This video is part of

Image for Dreamweaver CS6 Essential Training
Dreamweaver CS6 Essential Training

90 video lessons · 52962 viewers

James Williamson

Expand all | Collapse all
  1. 1m 4s
    1. What is Dreamweaver?
      1m 4s
  2. 5m 44s
    1. Welcome
      1m 4s
    2. Using the exercise files
      2m 17s
    3. Learning web design
      2m 23s
  3. 1h 0m
    1. Looking at the Welcome screen
      5m 9s
    2. Exploring Windows and Mac interface differences
      5m 6s
    3. Arranging panels
      8m 44s
    4. Managing workspaces
      10m 14s
    5. Exploring the Application toolbar
      6m 21s
    6. Exploring the Document toolbar
      8m 47s
    7. Working with the Property inspector
      9m 30s
    8. Using the Insert panel
      6m 30s
  4. 53m 3s
    1. Understanding basic site structure
      3m 46s
    2. Exploring file naming conventions
      2m 10s
    3. Defining a new site
      5m 23s
    4. Managing files and folders
      7m 57s
    5. Adding remote servers
      7m 4s
    6. Uploading files
      12m 46s
    7. Previewing in browsers
      9m 11s
    8. Managing multiple sites
      4m 46s
  5. 36m 41s
    1. Creating new documents
      6m 49s
    2. Setting up new document preferences
      5m 30s
    3. Setting accessibility preferences
      6m 49s
    4. Working with starter pages
      4m 32s
    5. Managing starter pages
      13m 1s
  6. 37m 23s
    1. Getting text into Dreamweaver
      8m 43s
    2. Importing Word documents
      4m 6s
    3. Adding structure to text
      7m 35s
    4. Creating lists
      4m 35s
    5. Creating definition lists
      4m 0s
    6. Using the Quick Tag Editor
      8m 24s
  7. 44m 41s
    1. Exploring the Code toolbar
      5m 41s
    2. Setting code preferences
      7m 19s
    3. Using code hints
      8m 8s
    4. Wrapping tags
      5m 7s
    5. Adding comments
      6m 29s
    6. Using snippets
      7m 32s
    7. Formatting source code
      4m 25s
  8. 1h 19m
    1. Setting CSS preferences
      9m 32s
    2. An overview of the CSS Styles panel
      9m 23s
    3. Creating a new CSS rule
      6m 42s
    4. Using the CSS Rule Definition dialog
      7m 25s
    5. Organizing styles
      7m 22s
    6. Modifying style properties
      6m 17s
    7. Controlling CSS through the Property inspector
      6m 37s
    8. Attaching external style sheets
      5m 54s
    9. Using CSS visual aids
      7m 3s
    10. Using CSS Inspect
      6m 48s
    11. Using the Code Navigator
      6m 39s
  9. 1h 11m
    1. Managing assets in Dreamweaver
      7m 30s
    2. Setting external image editing preferences
      4m 26s
    3. Placing images on the page
      10m 12s
    4. Exploring Photoshop integration
      7m 17s
    5. Modifying Smart Objects
      9m 42s
    6. Modifying image properties
      8m 4s
    7. Styling images with CSS
      6m 45s
    8. Using background graphics
      7m 28s
    9. Positioning background graphics
      10m 10s
  10. 36m 23s
    1. Link basics
      3m 17s
    2. Setting site linking preferences
      2m 19s
    3. Creating links in Dreamweaver
      9m 17s
    4. Using absolute links
      3m 43s
    5. Using named anchors
      6m 41s
    6. Creating an email link
      5m 25s
    7. Creating CSS-based rollovers
      5m 41s
  11. 44m 30s
    1. Reviewing table structure
      5m 20s
    2. Importing tabular data
      6m 46s
    3. Creating accessible tables
      6m 11s
    4. Exploring basic table styling
      9m 42s
    5. Styling alternate rows
      8m 57s
    6. Creating custom table borders
      7m 34s
  12. 59m 15s
    1. Understanding how forms work
      2m 45s
    2. Reviewing form design
      3m 44s
    3. Creating accessible forms
      5m 16s
    4. Setting form properties
      2m 39s
    5. Using the fieldset and legend tags
      2m 52s
    6. Inserting text fields
      6m 56s
    7. Inserting list menu items
      7m 54s
    8. Inserting checkboxes
      4m 14s
    9. Inserting radio button groups
      3m 52s
    10. Inserting submit buttons
      2m 25s
    11. Exploring basic form styling
      8m 2s
    12. Exploring form element styling
      8m 36s
  13. 33m 25s
    1. Adding CSS3 transitions
      8m 29s
    2. Spry overview
      2m 44s
    3. Using Spry widgets
      3m 57s
    4. Adding Spry effects
      8m 1s
    5. Using the Widget Browser
      7m 4s
    6. Extending Dreamweaver
      3m 10s
  14. 1m 2s
    1. Additional resources
      1m 2s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes changes my life forever. @JosefShutter
@lynda is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?


Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.