Join James Williamson for an in-depth discussion in this video Using the Quick Tag Editor, part of Dreamweaver CC Essential Training.
- View Offline
Although, it often seems as though you have to pick between working either in Design view or editing code in Code view. Dreamweaver actually has a fantastic little feature that makes it possible for you to do both (LAUGH) at the same time. So, I want to take a look at using what might actually be my favorite feature in Dreamweaver, and that would be the Quick Tag Editor. So here, I'm working on the index files. This time, from the 04_05 directory. And, there's a few things going on here that I want to change.
For example, right here I have this link About. And you'll notice it's gray. And it's gray because it has the class current applied to it. How do I know that? Well, if I go down here to the tag selector, again down here at the very bottom of the document window, I see a.current. Now, if you've never seen this before, when you see a period like the element a anchor.current, the dot represents a class. If you see a pound symbol or octothorp if you really want to get technical about it, if it's like a#current, that would be an ID.
So, that's a nice visual representation of that for you. Okay, so let's say I click on this, alright? Just to select that. Let's say I want to get rid of that class. Well, I could certainly use the properties inspector to do that. But there are a lot of times when I might want to edit multiple attributes. Maybe I want to edit a title at the same time, or even add another attribute that's not found on the Properties Inspector. That's where the Quick Tag Editor comes in. So to access the Quick Tag Editor on a PC or on a Windows machine, you're going to do Ctrl+T. And on the Mac, you're going to do Cmd+T. Now as soon as you do that near the element that you have selected, you're going to see this quick tag editor come up. What's so cool about this, is it's kind of like a little tiny code window and it gives you access to the code and allows you to do whatever you want. So for example, you can come in here and highlight that class equals current, and I can just go ahead and get rid of that.
If I wanted to capitalize the word about in the title, I could do that. And when I'm done editing this tag, editing all the attributes, or adding attributes, taking attribute away, resolving the length. Whatever I want to do, all I have to do is hit Return or Enter. It's going to close that out. It's going to make the change for me. So, that's very fast and very simple. Now editing existing tags is really only one feature of the Quick Tag Editor. Let's say I've got this word innovation right here. And innovation needs to have a class applied to it as well. Well, you can't apply a class to just a word inside of HTML. You have to surround it with a tag.
In this case, I'm going to have to surround it with a span tag. Now, I could use the Properties Inspector to do that. But a very fast, and easy way to do it would also be to use the Quick Tag Editor. So if I highlight the word innovation and then use my keyboard shortcut, which is again either Cmd+T or Ctrl+T. You'll notice that now instead of editing an existing tag it's saying oh, okay, you want to surround this with a tag, what would you like to do? Well, I'm going to type S and then a P, you'll notice I get code denting here the same way I do in Code view. So, it is a very fast way of working once you get used to doing it.
So if I hit Return or Enter, it is going to finish span and I'm going to hit Space and type in a C. Now as soon as I do that, it says, oh, you want to add an attribute to this. Okay, what attribute do you want? Because I typed in C, class is the first the that comes up. And I hit Return and I get all my code hinting. Now here's what's really cool about this. It's now going to go into my CSS and it's going to take a look at all the class definitions I have in there. And it's going to make them available to me here in the Quick Tag Editor. If I type in O, for example, it jumps right down to orange and I can hit Return, hit Return again, and it goes ahead and applies that.
Now, I know if you were doing that along with me and you'd never done that before, you're probably looking at that going, okay, that was kind of cool. But wouldn't it have been just as easy for me to go down to the Properties Inspector? Grab that class pull-down menu and choose orange. Now, sure, it would've, but you've got to remember, too, that I was doing that really slow. Once you get used to doing it, let me show you. So, I'm going to undo that. Once you get used to doing this, look how quick this can be. I can highlight this, do my Cmd+T type in span class orange, boom done. And what's really handy about that, and I know that time I really blazed through it, but it is just something I'm used to doing.
The more you work with the Quick Tag Editor, the faster you'll get. But what I really like about it is that it exposes the code to you. So, you can be in Design view and still work on code at exactly the same time, even without going into Split view. So, that's really kind of neat. The other thing is the Properties Inspector will sometimes do a lot of this stuff for you. But there are going to be times when you need to edit code in a way that the Properties Inspector can't do. And in that case, if you're working in Design view rather than having to switch over to Code view, you can quickly highlight an element or place your cursor in the right place. Hit Cmd or Ctrl+T, and you're editing the code without ever leaving this view. Now I will say, if you've never used it before, it's going to take a little getting used to.
But once you're comfortable using it, the Quick Tag Editor dramatically speeds up the process of working on your sites.
- Learning how to approach web design
- Managing workspaces
- Defining a new site
- Managing starter pages
- Exploring the authoring options
- Creating links
- Setting CSS preferences and styling a page
- Placing and styling images
- Working with tabular data
- Uploading files
- Checking for broken links