Tip:
Highlight text to annotate it
X
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 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
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.