Join James Williamson for an in-depth discussion in this video Working with code snippets, part of Managing CSS in Dreamweaver.
Another extremely effective way of reusing code in Dreamweaver is through the use of Code Snippets. Code Snippets allow you to store any code, whether it's CSS or HTML, in your Snippets library, and then reuse that code at any time. For CSS, this allows us to build libraries of formatting, layout and presentation styles that can speed up the process of building complex style sheets. In this movie, we're going to examine how Snippets work as a way of sort of preparing ourselves for using them with our CSS later on. Before we build any snippets, we need to take a brief tour of the Snippets panel.
So I'm just going to go ahead and name this snippet Structure. Don't worry if yours is not in this. Frankly, mine is not supposed to be. But the good thing is about this is it shows you that you can nest these folders inside of each other. So you can create some pretty complex structures out of this. Okay, I'm going to go ahead and move that out, so that it is a top-level folder itself. What am I going to do next, now after creating Structure, I'm going to go ahead and create a brand-new Snippets folder. Here, I'm going to call this one CSS. So we have one for HTML Structure tags, and then we have another one for CSS.
Now you can create snippets in one of two ways. One is you can create a Snippet from scratch yourself using the Snippets panel, or a option two, which is probably the more likely option, is you're going to take existing code that you already have in your styles, or your HTML, and then save that as a Snippet. Well, let's examine option number one. I'm going to go and click on the Structure folder, so that it's our active folder. That insures that any snippet that we create is going to be placed inside that. As you can see, it allows you to rename folders, as well. Snippets panel is really sensitive. So be careful about clicking in and around it a lot.
So I'm going to go and create a brand-new Snippet. I'm just going to go ahead and name this Snippet,wrapper div. Now in almost every single Web site I create, I create a wrapper div tag that sits inside the body tag. That helps me center the content on the page, if that's what I'm wanting to do, and give definition to the page. Use a position attribute of relative on that, so that anything positioned will position inside the wrapper and not the body tag. So it's something that I'm going to do almost every single time. So what I'm going to do now in the Description, I'm just going to type in description of what this snippet is going to do, sort of describe its functionality.
I want to say, Inserts a wrapper div tag around selected elements. So I'm very clearly stating that this is going to insert a wrapper div tag around selected elements. Notice that that directly plays into the type of snippet that we can create. We can do a Wrap selection or Insert block. Wrap selection will go ahead and wrap an opening and a closing section of code, and it can be a little code or it can be a lot of code, around whatever code you have selected. Insert block is just going to take that block of code and insert it into the location where you are on the page.
So it's not going to do any wrap. So we want this going to wrap the selection. In the Insert before, I'm just going to write a div tag. I'm going to say <div id = "wrapper">, and then I am going to close my opening tag. Then Insert after, I'm just going to go ahead and close the div tag. Now you'll notice we're not getting any code hinting or code completion here. So you've got to be certain of what you want to do. Syntax matters. Spelling matters. Whitespace matters. You want to be very, very careful when entering code into these panes. So again, I would say Wrap selection and Insert block in. Notice that the Preview type can either be Code or Design.
Now when you click on a Snippet in this area of the Snippets panel, you'll see a preview of it. I really like just seeing the Code, so I can read the Code and know what I've got going on there. I'm going to go ahead and click OK. There is our wrapper div. As soon as I click on that, it says div id= wrapper and then close the div. So it's giving me a little summary of what this Snippet is all about. If I expand my CSS Styles panel by clicking right there on a divider, I can also see that right over here is the Description for that. So anytime I have a Description for a Snippet, when I select it, I'll be able to see that in the Description area. Okay. Let's take a look at how we can use these Snippets.
So now what I'm going to do is click anywhere inside my page, and notice that I'm not even in Code view, so you can use Snippets in Design view. It's okay. Going over here to the Tag Selector, I'm going to click the body tag. That's going to highlight everything inside the body tag, so all the content on the page. It's a very easy way to do a select all. I'm going to go over to my wrapper div tag, and using a snippet is as easy as double-clicking on it. I'm going to go ahead and double-click that. Notice as soon as I do that, I have the div with an id of wrapper. If I do switch to Code view, notice that there is the opening wrapper div tag, and there is the closing wrapper div tag.
So it went ahead and wrapped all of the code on the page, so a very quick and easy way to do that. Now what about CSS? How does working with Snippets benefit us when we're working with our cascading style sheets? Well, I'm going to go back to the Files panel, and in the _css folder, I'm going to open up main.css, of course. Notice that this is the style sheet for the Explore California Web site that we've been using. What I'm going to do now is when I scroll down to my line 80, and find the h1 tag. I am going to go ahead and highlight the whole tag. Make sure that you get the opening curly brace, the closing curly brace, the selector. You want to make sure you have all of this selected, because when you create a snippet based off of your selected code, what's going to happen is everything inside the highlighted area will be converted to a snippet.
If you leave something off, then that snippet is going to cause you so many problems a little bit later on down the line. All right, so I have that selected. There are so many different ways to create a snippet. I can go back over to the Snippets panel and click the New Snippet icon. That'll be the one way to do it. Another way would be to go ahead and right-click, and you can also Ctrl+click if you're on a Mac, and I'm going to choose Create New Snippet, right there. Now as soon as I do that, I get the dialog box that we were just looking at when we created our wrapper div tag snippet. But notice that this one is pre-populated with the h1 selector that we had highlighted.
So that's really cool. The Name of this one, I'm going to go ahead and call this one h1. That's fairly descriptive right. In the Description section, I'm going to type in Explore California h1 selector. This time, instead of having the Snippet type be Wrap Selection, I want it to be Insert Block. Notice that we lose our double pane down there, and we just get the one section of code. Now here is the other thing. I can modify this. If whatever reason I've left off that curly brace, I'm free to go ahead and type that now.
I'm going to keep the Preview type as Code, and I'm going to click OK. Right now, we didn't really see anything happened. But if I switch over to my Snippets panel, I can see right there that the h1 showed up in the Structure. Now why did it show up in the Structure folder? Oh, that's why I had highlighted, because that's what we were using just a minute ago. So if for whatever reason,a snippet goes in the wrong folder - and trust me it will happen to you, the Snippets panel is really sensitive - it's okay because you can simply grab your snippet, and then just drag it into the folder you want. So you can do that anytime. You're going to rearrange entire folders, individual snippets within folders or whatever you'd like to do.
It just does not matter. Now I want to show you one last thing before we move on to discussing strategy for using Snippets within your CSS. You can assign keyboard shortcuts to Snippets that you need to use all the time. So if you're rapidly building pages, it'll be really nice to go ahead and have keyboard shortcuts assigned for these. So I'm going to go to the h1 snippet, which is right here, right-click or Ctrl+click that, and I'm going to choose Edit Keyboard Shortcuts. Now you can also go up to Edit and choose Keyboard Shortcuts, as well. If you're on the Mac, you can go to Dreamweaver Keyboard Shortcuts, and you will see the exact same panel.
Now you don't want to modify the Dreamweaver Standard keyboard shortcuts. So I'm going to go ahead and make a new one. I'll just say Duplicate Set, and this comes up. I'm just going to call these my shortcuts. You can call them whatever you want. You're free to create as many of these as you would like. So you might create a set of keyboard shortcuts to use only when you're doing Snippets. So it's totally up to you. All right, now we want to modify our Keyboard Shortcuts. What's really interesting about this is notice that we've got our commands for Snippets. We can go to menu commands or all of those, but Snippets has their own category.
Inside Snippets, I'm going to open up the CSS and choose the h1. Now I'm going to go ahead and give this a keyboard shortcut by clicking in the Press key. I'm just going to do Ctrl+Shift+1. Now you'll notice that the keyboard shortcut is already assigned to Align Left. You know what? I never use that keyboard shortcut for Align Left. So don't panic. If you see something that you want to do, and Ctrl+Shift+1 is the easy one to hit. If you see something like that, and then Dreamweaver says, oh, I'm sorry. This is already taken by Align Left or Align Right. Well, if you're never going to use it, what do you care? So I'm just going to hit Change and Dreamweaver further scolds me about it. I'm like no, no.
Now that we know that working with Code Snippets can help us reuse our CSS, we need to discuss strategies for working with CSS and Code Snippets. That is going to be the focus of the next movie.
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues