Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.