Join James Williamson for an in-depth discussion in this video Reviewing the Coding toolbar, part of Dreamweaver CS3 Beyond the Basics.
So our first chapter is going to be focusing on workflow and maybe speeding up the process of working inside the Dreamweaver interface. The first thing we will take a look at is the Coding toolbar. I am just going to open up a brand new HTML file. I will do that by clicking on the Create New HTML on the Welcome Screen. Of course, you are free to go up to the menu or hit Command+N or Ctrl+N, if you would like. So we have got a blank file opened up here. You will notice that I am in Code View. If your view opens up in either Design View or Split Screen View, just go ahead and switch over to Code View for this example.
Now, on the left hand side of the screen, right beside the code, you are going to see a series of icons. This is the Code toolbar, and you may or may not have used this before, because we are now into our second release of Dreamweaver with the Coding toolbar. Each one of these icons, if you just hover over them, like I will hover over the top one here, you can see it actually gives you a little tooltip, like Open Documents, Collapse Full Tag, Collapse Selection. It will give you a hit as to what that particular object or icon will do for you.
So let's explore a couple of these, specifically I am going to focus on some that I used myself all the time inside Dreamweaver. So I find them extremely helpful. So the first thing we are going to take a look at is the Parent Tag Selector. I think you are going to find this extremely helpful, especially when your pages get a little bit more complex. So our page is extremely basic right now, it's a brand new page. There is nothing in it. So let's add just a little bit of code. So I am going to get in the body tag and I am just going to go ahead and add a div tag, and I will just go ahead and give that a wrapper id. I mean that's kind of standard these days, putting a wrapper id around everything. I will throw another div tag in, and I will just give it an id of something like content. Then let's just do an h1 tag real quick. Inside the h1 tag, I will just type in 'this is a headline.' Of course, we need to go back and close out content div tag. You want to make sure everybody is close there.
So I have got a basic structure here of a container div tag, another div tag inside of that with an id of content, and then a heading. Even though this is fairly simple, sometimes, let's say I click inside my heading, and maybe I want to know who is this inside of. That's especially important for pages that are a little bit more complex. Well, if I go up to the Select Parent Tag icon, it's about the fourth or fifth one down, click on that. Because I was actually inside the text of the headline, it actually selects the h1 tag. You will notice it selects the entire tag and its contents. If I click again, I now get the content tag. Click one more time. I get the wrapper tag. Of course, the body tag is considered part of the page, so if I click again, the body tag becomes the parent tag. You can then go all the way up to the html tag if you would like to. So you can just keep going up the tree. Now as nice as that icon is, there is actually a keyboard shortcut that allows us to do that as well. So if I click back inside the headline and I use the Command+Left bracket, that selects the parent tag. And I click it again and I just go right up the tree again. If you are on the PC, obviously that would be Ctrl+Left bracket. There is actually one that allows us to go down the tree too, and it's Command+Right bracket or Ctrl+Right bracket, but I need to be in Design View for that to work. So if I switch back over to Design View, let's say I click inside the heading again, and notice that my parent tag short key works here. I am hitting Command+Left bracket to go up the parent tag. If you look down below the document window at the Status Bar down here, we have what's known as the Tag Selector, and we will talk a little bit more about the Tag Selector later, but the Tag Selector lets you know exactly which element you have selected. You can see right now, I have the wrapper div tag, and inside that I have the content div tag, and inside of that, of course, I have the h1. So if I use the other shortcut key, which is Ctrl+Right bracket or Command+Right bracket, you can see I am walking right back down the directory structure to go right back down the headline. So I can actually in Design View, use those keyboard shortcuts, probably a little bit more effectively than I can in Code View, because in Code View I have the icons available to me. So those work just fine. I am going to switch back over to Code View now. I want to take a second to talk about these three icons right up here, where we can Collapse and Expand code. Now, the page I am working on isn't complex enough to really show these accurately, so what I am going to do is I am going to close this file. And I am not worried about saving it obviously. If you are following along with me with the example files, we are going to open up inside the Chapter 1 directory. We are going to open up index.htm. So I am going to double click on that to open that up. If you are not following along with the example files, you can just open up one of your own files, or you can open up one of the templates that has their structure to it. Just to review this page really quickly here. If I go back to Design View, you can see that we have the front page, the index page, of the Cheek Chastain Gallery, and there is a lot of sections to this. So there are a lot of interior div tags, and obviously inside of this interior div tags we have a lot of individual content. So occasionally, I might want to work on something specifically. For example, this section right here in front where it says Featured Painting, maybe I need to update that, for example. So if I switch back over to Code View, it's actually in a section of code called featured.
As we go through our chapters, we will be using a lot of these guys. So instead of going through every single one of these, we will look at them as we begin to use them. Now, there is something else that we can do with the Coding toolbar and that really goes into Dreamweaver's very open architecture, and that is the ability to customize it. Customizing the Coding toolbar allows you to choose exactly which icons are showing up over here and which ones are not. There is actually a set of icons that, by default, is not visible within the Coding toolbar, and I actually find a couple of them very helpful. So that's a brief overview of the Coding toolbar, and in our next movie, we will actually show you how to customize the Coding toolbar.
- 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.