Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.
Without a doubt the Properties Inspector is one of the most important and powerful panels in Dreamweaver. It displays and allows you to edit the properties of whatever you happen to be focused on. It's contextually sensitive, so it's going to change to display the properties of any object that you have selected. Now, the Properties Inspector, which you can find right down here at the bottom of the interface, has two tabs; HTML and CSS. The HTML tab allows you to control the properties of the HTML elements on the page, while the CSS tab allows you to create and edit existing styles.
Now, I don't want to go too deep into the Properties Inspector in this movie, because we're going to be using it throughout the title, so you are going to have plenty of practice in using the Properties Inspector and sort of seeing what it can do. But I want to point out a couple of very important things about the Properties Inspector and this is especially true for any of you guys who might be watching the title who are print designers moving over to the Web for the first time, I know you're probably familiar with using a Properties Inspector type panel in say InDesign, for example. And it's very tempting to come in and select an item, and say, oh, I can change the font right here and just change it.
But it's very different from a document, say like an InDesign document, and doing something like that to a webpage. Because essentially you're changing styles which govern the entire site. Again, it's very easy to say, oh, well, I've used styles before in InDesign, but they are not the same. CSS is a presentational language and you need to be really aware of what it is that you're changing before you make those changes. So as we work through this exercise, I want you to focus on how different changing things within the Properties Inspector is in Dreamweaver in terms of dealing with the content of the page than it is in some other programs that you might be familiar with using. Okay.
So the first thing I am going to do is take the Properties Inspector and switch it back to the HTML tab. Now, the page that I am working on here, the about.htm page, this is sort of a stripped down page, there is not a lot going on here and it's going to allow us to really focus on our content. All right. So I am going to go up and click just inside About Roux Academy. I don't have to highlight the text. As a matter of fact, sometimes you really don't want to highlight the text, you just want to focus on the content itself. So by clicking inside of that I can see About Roux Academy. Now, if you are wondering about this little icon that comes up, that looks a lot like a steering wheel or a paddlewheel, that's the Code Navigator.
And I am going to be honest with you, I use the Code Navigator all the time, but that icon is annoying. So I am going to show you how to turn it off. If you click on that icon, it's going to bring up this little dialog box and you can choose Disable. Now, that doesn't mean that you're getting rid of the Code Navigator. Later on I'll show you how to bring it back. But I want to disable it right now so that it doesn't come up every single time I click some place. Okay. So I am going to click inside About Roux Academy, and if I go down to my Properties Inspector and I make sure that the HTML tab is the tab that I've clicked on, you can see right over here on the left-hand side we have a little pull-down menu for format, and currently this is formatted as a paragraph.
Well, if I grab that pull-down menu, I can see a number of Headings and this little Preformatted option as well. Now, these are not styles, these are tags, so these are HTML tags. So if I change this to a Heading 1 tag, yes, it gets bigger, yes, it gets bolder, but in reality what I've done is I've switched it from being a Paragraph tag to be an h1 tag. If you go into Split Screen View, you can see this in action; you can see that now About Roux Academy sits inside of an h1 tag. If I scroll down, I can see Our Continuing Mission paragraph and if I click inside that, you'll notice that currently that text is inside of a Paragraph.
Well, if I click again and make sure I am clicking in Design View when I do but if I click inside Our Continuing Mission and I change that to a Heading 2, notice that even though it changes the way it looks on the screen, in reality the only thing that's changed is now it's surrounded by an h2 tag rather than a Paragraph tag. I am going to continue to scroll down, I am going to find Transportation and I am going to change that to a Heading 2 as well. So you're essentially structuring the contents of your page through the use of these tags when you make those changes inside of the Properties Inspector, and that's if you're focused on HTML.
Now, if you are focused on CSS, a totally different set of things happened. Okay. So if I scroll back up, for example, and I'm just going to switch back to Design View really quickly here, but if I scroll back up, let's say, I want to change the color of the main headline. So if I click in About Roux Academy, notice, again, I don't have to highlight the whole text, it knows that I am inside an h1 tag. Well, I noticed right over here in CSS view I have Font, I have Size, I have Color, and we are going to break these down in more detail when we get into the chapter on managing CSS in Dreamweaver.
But it's very tempting to do something like this and say, oh, well, you know, I'd really like that headline to be an orange that matches this, and Dreamweaver gives you those tools. You can click on this color chip, you get a little Eyedropper tool and I can mouse that over an image, I can click and, again, my headline becomes that color. But what has really happened behind the scenes? Well, if I switch over to Code View, I can see that I have a style right up here for h1 selector and you'll notice it just gave it a color definition to match that. Now, I just so happen to already have one of those rules up there. What if I didn't? Let's say I go down to Our Continuing Mission and I want to make that h2 kind of one of these darker blue colors? So again, you'll notice that if I click on the paint chip, I get the Eyedropper tool, I can mouse over a part of this wall and click and now I see an entirely different dialog box come up, and for those of you that aren't familiar with CSS, this can be a little daunting at first.
So we are going to cover this in a little bit more detail when we talk about managing the CSS. But essentially it's asking me, oh, you want to create another style, right? So if I say, oh yeah, sure, and I want to do a tag, and I am going to redefine that h2 tag, and I can put in an external CSS or This document only. I'll just do it in This document only. I'll click OK and now you can see it changes the color. But in reality what we did, we wrote a brand- new rule that's now up there in our style sheet. So the Properties Inspector allows me to do this very quickly and very easily, but I have to keep in the back of my mind as a designer, I have to understand what's happening.
Am I changing the structure of the code, or am I writing a style? If I'm writing a style, is it written in the proper place and is it written using the proper selector? If I am changing the structure and the code of my page, am I using the proper tags? For example, if I scroll down here and I have these three items, if I switch back over to HTML and I highlight those, I can click right here on this little bulleted list. That's almost exactly the same way it is in Word. But again, what have I really done, I've created an unordered list right there in my code.
So the Properties Inspector, it actually does an amazing thing, it allows us to make big changes on our code with just a single click. But again, you have to be aware of what you're doing. If I come back up and I highlight this text, But age hasn't slowed us down, I can click the Italics and what I'm doing is I am surrounding that text with an tag. And you can change that in your preferences if you'd rather use the Italic tag, which is no longer deprecated. But what about seeing the same things in two different locations? For example, the Bold and Italic that we see here on the HTML tab is also here when I look at CSS, but they're not the same thing.
Again, if I scroll down and I find, We exist to educate, and I highlight that, now if I am in the CSS pane and I click Bold, what happens is, again, I get this new rule selector. And it thinks I want to control the weight of the text through a CSS rule rather than through a tag like the tag. So again, here I am going to have to either come up with a class, in this case maybe I'll just say something like Bold it, click OK, and visually you really can't tell the difference when something is within say an tag or a strong tag or whether a class has been applied, visually it looks the same, but in terms of the structure of your page, it's very different.
So here I notice when I say, We exist to educate, that it's in a span tag with a class boldIt, which is referring to this selector that we just wrote. Whereas, the italicized text is actually inside an em tag, which the default rendering of an tag in the majority of browsers out there is to italicize. So it just depends upon where you're focused, what you're looking at, and which of those two tabs you have selected in terms of what Dreamweaver is actually going to do behind the scenes. Now, I mentioned earlier that the Properties Inspector is contextually sensitive.
So if I select something different, say this image for example, I don't see the two tabs, the HTML and CSS tab anymore. I actually see the properties of the image. The source (Src) of the image, the alternative text (Alt), the width (W) and the height (H) of it, all sorts of things, which we'll actually look into a little bit deeper when we get into our chapter on images a little bit later on. The thing that I really want you take away from this is that, although the Properties Inspector is an incredibly efficient way to make quick edits to elements within your pages, you need to keep in mind that changes made to the CSS can cause site-wide and sometimes very unexpected changes.
So be sure you know exactly which rule you're targeting, how it fits into your overall CSS structure before you make a change in the CSS View. Also, pay really close attention to the active tab, whether it's HTML, CSS, that sort of thing. Remember the edits that you make in the HTML tab are actually going to change the structure and of course changes in the CSS tab are going to be changing the styles. The good news is, if you're totally overwhelmed by that, don't be. We're certainly going to be going through the Properties Inspector in great detail as this title goes on and we'll discuss all of those options.
So don't be afraid to use it, it's just something that I think you need to be really aware of what it's actually doing before you use it, because it can cause some unintended side effects if you're using it incorrectly.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.