The Properties Inspector

show more The Properties Inspector provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 Essential Training show less
please wait ...

The Properties Inspector

The Properties inspector can almost be seen as Dreamweaver's central hub when modifying page and object properties. You can find it just below your document window usually docked at the very bottom of the page. So it's located right down here at the bottom of my window. It's contextually sensitive. So it changes to display the properties of any object you're currently focused on, notice if I Click the image, I see my image properties but if I Click inside my heading, I get to see the properties of that particular heading. In CS4 the Properties inspector is actually split into two inspectors, the HTML and the CSS, and you can access those by Clicking on the HTML tab or the CSS tab respectively. The HTML Inspector allows you to control the properties of HTML elements on the page, while the CSS Properties inspector allows you to create and edit existing styles. I have got the index_start.html page open from our Chapter 2 exercise files and right now I'm going to focus on the HTML Properties and we will explore a little bit about what it can do.

So I'm going to scroll down my page a little bit and I can see that here I have On our site you'll find and then I have got some listings. Well this would make a much better list than individual paragraphs. So what I'm going to do is just highlight all those paragraphs and on the HTML Properties inspector, I have got a little icon that allows me to create Unordered List. So I just like that I Click on that and I get a list, very simple, very easy. If I Click in the paragraph above that, I can also change whether this is a paragraph or maybe some other structural element. So I'm going to grab the pull down menu that right nows says Paragraph and I will make that Heading 3. So again, you can see, I'm doing a lot of formatting changes here simply by changing the structure of the document.

If I highlight the text you're here and using the HTML Properties inspector, Click the Italic button, it doesn't write a new style, it adds a new tag. You can see, right down here on the Tag inspector at the very bottom of my document window, I now have a <em> tag which I didn't have before. Most browsers render emphasis text as Italics so that's what the Bold and Italic button does for us. It puts in a Strong tag or an Emphasis tag respectively. Now if I switch over to the CSS panel, now I'm seeing the properties of the Cascading Style Sheet controlling the content. I'm going to scroll up and Click inside my first paragraph. Instead of seeing all of my HTML settings, I can see that I'm targeting the rule #mainContent P. So I'm actually targeting the CSS that's controlling this paragraph.

If I were to do something like change the color of it, for example, I'm just going go ahead and Click right here, change the color of it. Not only have changed this paragraph but I have changed every paragraphs on the page. Really taking it a little further, I have just changed every paragraph in my entire site. So you want to be really careful about using your Properties inspector to modify your Cascading Style Sheet and that's actually something that we are going to talk about in a separate movie. You may notice that the Bold and Italic tags are found in both the HTML and CSS Properties inspector, well they do very different things. If I highlight some text here and Click on the Italic button, you'll notice that now it wants to create a style to control italicizing the text, instead of wrapping it with an <em> tag. So that's something really important to remember when switching back and forth between HTML and CSS Properties. Some of the icons are the same but they do very different things.

you'll spend a good bit of time modifying both HTML and CSS properties with the Properties inspector. Keep in mind, understanding how your site's structure and CSS are being implemented site-wide is very important when using the Properties inspectors so that you don't make site-wide changes without meaning to. Once you're comfortable with it, however, you'll find yourself using the Properties inspector almost intuitively and you'll find that it really speeds up your workflow.

The Properties Inspector
Video duration: 3m 49s 10h 15m Beginner


The Properties Inspector provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 Essential Training

please wait ...