Join James Williamson for an in-depth discussion in this video Using the Quick Tag Editor, part of Dreamweaver CS3 Beyond the Basics.
- View Offline
In this video we want to take a look at selecting a tag and editing that tag, or wrapping content in a tag quickly without having to switch back and forth to different views or without having to do a lot of extra typing. So I want to take a look in Code View first. We are going to be working with the file that we had opened earlier, so I have still got my div with the wrapper id here, and if you don't that, you can just open a blank file and create this pretty quickly and pretty easily. So I am just going to go ahead and enter in some additional content. So let's type in 'New content goes here.' Well, what if I wanted this actually inside of another div tag with a totally different id? It would be pretty easy for me to go ahead and type in opening and closing div tag, but there is actually a much quicker and easier way of doing this. If I highlight the text, you will note that in the Code toolbar over here, another one of our Code toolbar elements lights up. It looks like a little pencil on top of a tag, and this is the Quick Tag Editor. If you hover over it, it's going to say Wrap Tag, because that's what it does here in Code View. It helps you quickly and easily wrap tags around content. So if I were to click this, you will notice that the Wrap Tag dialog box comes up, and its, what tag do you want to wrap this with. Well, we will wrap it with another div tag, and we will go ahead and give it another id, I will just call this content. So you see all of your code hinting is available to you right here inside the Wrap Tag dialog box. When I hit Return, it just goes ahead and wraps a tag around it, which is really, really cool. Of course, you could go ahead and wrap another tag around New content goes here. Maybe you want that to be inside of a paragraph. So you could go do that again, but there is a keyboard shortcut for this and the keyboard shortcut works both here in Code View and in Design view, so it's really handy to know. So if I do Command+T, that brings Wrap Tag back around again, and I can just go down and hit P to get on the Paragraph tag. When I hit Enter -- and you have to hit Enter twice, because you are selecting it from the menu and then you are confirming that choice, you will notice that now my content is now wrapped in a Paragraph tag as well. Well, let's take a look at how we can do that in Design View, because we are not always going to be coding, and sometimes we will need to really quickly edit and work with these tags. So if I switch back over to Design View, you want to do that real quickly. So we will switch over to Design View. You can see on the page our 'New content goes here' and if you look at the Tag Selector down in the bottom left hand corner, you can see that we are inside of a paragraph, inside those two div tags. Once again, let's say I select the word New, and if I hit Command+T, there is my Wrap Tag dialog box and I could wrap that in em tag.
Now, what's really interesting about that is that the Quick Tag Editor is found in so many different places. Take a look at your Properties inspector, and when you click inside the word New, for example, and you look on the Properties inspector, and our Property inspector is -- there we go. We had part of it hidden there by the Files panel, but the very right hand edge you are going to find the Quick Tag Editor button or icon. If I click on that, you will notice it says, okay, did you want to insert some HTML on the page? So it actually gives us a little bit more functionality here than it does in Code View, because in Code View, obviously you can do all this by Hand-coding, but if you are in Design View and you want to edit your HTML, this offers you a much broader arena for that. So if I am actually inside of a tag; so let me go ahead and click back inside our New content goes here, and I click, it says, do you want to insert some HTML here? So it's not saying, do you want to wrap a tag around this? Now, if I go down to my actual Tag Selector and click on the em tag, if I go and click on the Quick Tag Editor now, it's like, oh, do you want to edit this em tag? So I could actually replace this, for example, with a strong tag instead. So this is a strong tag now instead of an em tag. It will still wrap text, but in order to do that you have to actually highlight the code. You click it again, and this time, you will notice that Wrap Tag comes up, and I can type in an em tag for that. So depending upon what you are focused on, whether you click inside of text, whether you have a tag selected, or whether you have a sequence of text selected, it's going to give you multiple options, so you can use that on the Properties inspector, or there is one more location where you can find it, and I will highlight the word, goes.
If you go down to your Tag Selector, right down here on the bottom, you can actually right click, which is Ctrl+ Click on the Mac, or if you have a two button mouse, you just want to right click, and you can access the Quick Tag Editor right there. Whatever tag you are inside of, it comes up and allows you to edit that, so I could add a class to all those paragraphs and I can just call it new. So that's the process of quickly editing and working with tags both in Code and Design View. A lot of those techniques will really speed up the process of modifying or adding existing code to the page. Our next video will be on using the Find and Replace feature and seeing some of the more advanced things we can do to quickly make edits throughout the entire site.
- 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