Adobe Dreamweaver CS4 Tutorials
Dreamweaver Workspace / Using the Properties Inspector
Subtitles of the Movie (Adobe Dreamweaver CS4 / Dreamweaver Workspace / Using the Properties Inspector)
The Property Inspector I believe is one of the most important interface components in many of Adobe's products and Dreamweaver is no exception so let me spend some time here reviewing this very important Dreamweaver component although it sometimes takes a bit of convincing from my students I cannot imagine trying to complete any Dreamweaver work without the Property Inspector anchored down here at the bottom where I like to keep it. Property inspector lets you examine and edit the most common properties for the currently selected page element such as text or an inserted object or a table or a DIV tag. Notice for example when I click on different objects here in my document for example when I click on the image the Property Inspector changes to show me the properties that I can modify for the image including the source file, the link, the width and the height, the ID, I can add hotspots using the rectangle tool, the oval tool, actually it's called the circle hotspot tool or the polygon hotspot tool notice that I can go ahead and add this, it's giving me a warning that I need to add an alt tag as well for that image right there is the alt tag, VTC logo, I can set alignment, border, notice if I move over and now I select the table I can now modify the table properties including the rows and the columns, the width of the table, cell padding, cell spacing, alignment, border, and so on. And again, selecting some text allows me to change text properties, bold, italic, unordered and ordered lists, alignments, linking right here, I can apply a style class here using the drop-down. So in other words, the Property Inspector is kind of a very convenient little tool here that you should always keep open that will help you modify properties or in some cases allow you to see what the properties are, sometimes that's more important actually seeing which style you've applied, what the width is of your table, what the background color is of your DIV tag and so on. Here's another document, this one is composed entirely of DIV tags and if I click in the upper left hand corner of the DIV tag there's a little square there, notice the Property Inspector this time gives me all the properties of this DIV tag, these are actual styles that have been defined in an external style document, you can see it open right here, 3-call-left-nav.css and what's interesting here is although I can change the properties here in the property inspector, you don't want to do that, you want to modify this in the external style document, but this tells you what the current styles are or the major styles for that DIV tag within the height, the location, from the left edge and the top edge of the document, I have a background image defined in this style, I also have a background color here. In this case it's, it's clear I'm not using a background color because I have a background image. But this is a case when rather really using the Property Inspector to modify the properties which you don't want to do when using cascading style sheets, it still very useful in giving you information about the style properties in this case of these elements. Notice that there's two settings here, if I click inside the DIV tag, I get properties such as format, ID, class, link, if I click in the upper left hand corner, I get z-index, visibility, notice the visibility can be inherent visible or hidden, notice that I'm actually hiding elements there. The background image, background color, I have this class setting, we'll talk much more about classes and some of the things that you'll see here such as the IDs, overflow, there's an ID, these are all cascading style sheet properties but the Property Inspector is showing them to me, so I just wanted to point out that the Property Inspector can be used to Change Properties but more and more you'll be using it to inspect properties. And in the case of CSS, then use the CSS editor or the CSS panel or these external CSS style documents to actually change the properties there. Now another very important element that I use quite often that I want to point out early is this one, modify page properties and that will bring up the page properties dialogue. Let me go over this dialogue in much more detail in the next movie.
Tutorial Information
| Course: | Adobe Dreamweaver CS4 |
| Author: | James Gonzalez |
| SKU: | 33968 |
| ISBN: | 1-935320-30-0 |
| Release Date: | 2009-02-13 |
| Duration: | 9.5 hrs / 104 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
