Using snippets and shortcuts

show more Using snippets and shortcuts provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS3 Beyond the Basics show less
please wait ...

Using snippets and shortcuts

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.

There are some Comments, some Accessibility snippets. So if I click on, for example, the Content Tables, I can see no-border, and here is a lot of different snippets of text. When you click on a snippet, and I am going to sort of increase this window up here a little bit, you can actually see a preview of what that code will generate if its a visual code. There is no limit to what you can store as a snippet. So JavaScript code, CSS, anything that you use a lot of, that you reuse over and over again, really should be a snippet. Now, you can go ahead and create your own snippets, and generally you want to do that by creating your own folder, you don't want to put them into existing folders, unless Categories over here describe exactly what you want to do. So what I am going to do is make sure I don't have any existing folder selected, and I am going to go down and I am going to click on my New Snippet folder, and maybe I am just going to call these my General tags. So you can see that when you create a new folder, it just creates a folder to store all of your individual snippets. So what I will do now is we will generate a brand new snippet, and you could do that from already existing code or you can do it the way that we are going to do it here, which is just to create one from scratch.

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.

To be honest, there are a lot of keyboard shortcuts that you are never going to use, so don't feel bad about reassigning something that you are not going to use. I am just going to go ahead and do Shift+Command+5, and on the PC you might want to do Ctrl+Shift+5, because I just happen to know that that one has not assigned anything currently. If I hit Change, it will go ahead and set that. While we are modifying our keyboard shortcuts, there is one glaring error in the keyboard shortcuts that Dreamweaver has mapped by default. We are going to go ahead and correct that, because a lot of times you are going to be working on multiple files, you are going to have cascading style sheet files open, maybe even external JavaScript files, you will be modifying those and then previewing the page based off of them, and if you don't save all the files involved, then it's not going to preview. So you had to keep going up to File and choosing Save All, or you end up having to answer Yes to the message that comes up. So we will go ahead and create a keyboard shortcut for that too since we have these open. So I will grab my commands, and I will go back to my menu Commands at the top. If the File is not open, just go ahead and open it up. We will scroll down and you can see right down there we have got Save All. So I am going to go ahead and add a new keyboard shortcut for this and again, it's always tricky to find one that hasn't been mapped already. You can see my Command+Option+S already has been mapped, so let's try something else. So we are going to do Ctrl+Command+S. And again, if you are on a PC, you have already got Ctrl+S, so try a few different keyboard shortcuts until you find something that you can remember pretty easily that hasn't been mapped. So I will just go ahead and hit Change. That's got that. We will click OK. Next time I have multiple files open, I can just hit Ctrl+Command+S and that will save everything for me. So that's modifying and creating your snippets and mapping keyboard shortcuts to them. So what we will do next is we will take a look at selecting tags quickly and efficiently, no matter where you are, whether you are in Code View or Design View or whatever you are currently doing. So we will take a look at modifying our tags in a very efficient fashion.

Using snippets and shortcuts
Video duration: 11m 10s 11h 10m Intermediate


Using snippets and shortcuts provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS3 Beyond the Basics

please wait ...