Join James Williamson for an in-depth discussion in this video Using snippets and shortcuts, part of Dreamweaver CS3 Beyond the Basics.
Another technique that can really speed up the coding process is using snippets. If you have never used snippets, you are really going to be happy about exploring these. So we are just starting out with another blank XHTML document, so feel free to go ahead and open one of those up, and you will notice that I am in Code View. So a lot of times you are going to rewrite the same code over and over again, and you might even go through the process of copying it from an earlier document and pasting it into your new one. There is a much more efficient way of doing that, and that is saving blocks of codes as snippets. So let's say for example, every time you are opening up a document, you are writing a div tag that has an id of wrapper on it. Again, that's a very standard way of working, and you might find yourself doing that every single time you open up a file. It doesn't take that long. As you can see, it didn't take me that long to do that. But it would be nice if I could sort of automate that process so that I didn't have to do that every single time I open up a document. So I am going to go ahead and get rid of that code. I want you to turn your attention to the Snippets panel, which is actually on the right side of the screen, over here, docked with the Files and the Assets panel. So I am going to click on Snippets, so that we can view that. One of the things that you will notice is that there is already a lot of snippets in here for us.
So again, if you look at your Snippets panel, down at the bottom right hand section of that, you are going to see four icons there. We are looking at the icon, the second one from the left that looks like a new little page with a plus symbol. That's your New Snippet, so you want to click on that. Now, when you click on your snippet, the first thing it's going to ask you is what do you want to name this? And we are going to go ahead and just name this wrapper div. It should probably be something that makes sense to everybody, if you are on a team, but if it's just you, make sure that it's descriptive enough so that you understand it. Speaking of that, you can give it a Description, and I am just going to call this basic div tag with wrapper id. Now, you have got two choices when you look at the type of the snippet. You can either Wrap selection in.
What that will do for you is if you have code already selected, it will wrap that particular tag around your selection. Or you can choose Insert block, and that's for code that maybe isn't going to wrap the selection, but just needs to be inserted at the insertion point. Well, since the div tag typically wraps around other content and you might be applying this to pages that you have already created, we are going to choose Wrap selection. So where I say Insert before, I am just going to type in a div tag, and I am going to type in id=wrapper. You will notice I am not adding a closing div tag, because the closing div tag is going to go down here at the bottom where it says Insert after. So I will click there, type in my closing div tag. So that's all there is to creating a snippet. If we had Insert block selected instead, we just have one big window where all of our code would go, so you could just copy and paste it into that. When I click OK, you can see over here in my General folder now, I have a wrapper div tag. You can see up in the Preview, it's not showing me anything visually, it's just showing me the code itself. Anytime you want to use a snippet, it's really, really simple. You can drag and drop it on the page, you can use the Insert button, or you can simply double click it. So when you want to use your new snippet, and it's actually extremely simple to do, you can drag and drop the snippet onto the page. You will notice on the Snippet palette, there is actually an Insert button down there on the lower left hand corner. I actually prefer to use that when I have really complex code going on, because I have a habit of dragging it into the wrong place or just to the left or just to the right, so I generally like to get my cursor exactly where I want it. Then I can go down and click on the Insert button and it inserts my div tag. You can see exactly what it did for us here. That is awesome. You will find yourself in no time building a really large library of snippets. One of the problems that I have with Dreamweaver from this regard is it would be really nice if you could save these snippets and share them with other people.
So if I come up to the File menu item up here, I don't really see any type of Save Snippet or Load Snippet feature, and I don't see it because it doesn't exist. So hopefully the fine folks at Adobe will add that feature a little bit later on. However, you are occasionally going to want to save snippets and give them to other people, so predefine them, because you can just copy and then give them to somebody, or take them to another machine and then sort of reinstall them. Well, if you are looking in the configuration folder for Dreamweaver, you won't find them. So you have got to go to a specific location, and it's specific to each user. So what I am going to do is I am just going to, once again, minimize Dreamweaver. Go ahead and do this with me if you would like to see them. I am going to go to my hard drive and I am going to look for my file. So I am going to click on James. Now, if you are on a PC, you are going to want to browse to your hard drive and you are going to want to look at Documents and Settings. Once you actually get there, the path is the same, but for the PC, you are going to go to Documents and Settings, Local User, Application Data, Adobe, and Dreamweaver 9. Here on the Mac, I am going to go to James, Library, and then I have got to go to Application Support, Adobe, and here the paths converge, it's Dreamweaver 9, Configuration. Once I click on Configuration, I will find my Snippets folder, and when I click on that, I can see here is my RecentSnippets, but there is that General folder that I created.
When I click on that, inside that there is my wrapper_div snippet right there with the .csn extension. So I could save these folders of snippets and copy them to other locations or give them to other people and then they can use them. So that's a real quick and easy way to use snippets. I want to take just a moment to go back into Dreamweaver for a second, because the last thing I wanted to show you in this video was selecting tags quickly and easily. So I am going to go back into our blank file, and I am going to just add a couple of more tags here, just so we have got multiple tags to deal with. So I am going to go into my Code View and I am going to place my cursor right in between the div tag that I have created. I will give myself a little bit of space there.
Now, of course applying them by using the Insert button or dragging them over, or double clicking on them is easy enough, but if you are going to use a certain snippet over and over and over again, then it's a really good idea to go ahead and map a keyboard shortcut to it. So what we will do now is we will take a real brief look at the keyboard shortcuts. I am going to go up to Dreamweaver and choose Keyboard Shortcuts. Now, on the PC, you will find Keyboard Shortcuts under the Edit menu at the very bottom. So if you are on a PC you are going to find it there. So I am going to click on that and load up my shortcuts up. Now, you will notice that I just got the Dreamweaver standard set loaded, and I can't modify these. So if I grab my pulldown menu, if I had multiple sets, I would be able to see those, and I don't, so I need to make a copy of this and make my own set. So I am going to go right back over here to the right, and you can see there is an icon right over that says Duplicate set.
I am going to click on that, and I am just going to name these James keyboard shortcuts and click OK. That creates a duplicate set of this. Now, finding my snippets, if I look at my menu Commands, obviously I am not going to find them. So I have got to grab that pulldown menu, and you can see right there, fourth option down, we have Snippets. So I am going to go ahead and select that. It loads up all the snippets that you have. So if I go into General, there is my wrapper div tag snippet, and I just go right down to my Shortcuts and click Add item, and it will then activate this Press key. Now, the trick here in Dreamweaver is trying to find a keyboard shortcut that's not already assigned.
- Reviewing and customizing the coding toolbar
- Understanding the CSS Styles panel
- Using absolute and relative positioning
- Creating accessible forms
- Building AJAX pages with the Spry framework
- Extending templates
- Working with XML and XSL
- Building dynamic content
- Creating custom behaviors in Dreamweaver
- Running reports
Skill Level Intermediate
Q: In the Chapter 3 movie “Creating rounded corners with background graphics”, the instructor uses a .last class selector. What are the CSS properties of this selector?
A: The .last selector is as follows:
background: url(../_images/current_btm_bg.gif) no-repeat bottom
The background is the bottom rounded corner graphic, the bottom padding keeps the type away from the bottom of the box and thus the rounded corners, and the margin ensures that the box elements fit seamlessly with each other.