Viewers: in countries Watching now:
To get the most out of Dreamweaver CS4, it's important not only to master the application, but also to understand fundamental concepts of modern web design. James Williamson teaches just that in Dreamweaver CS4 Essential Training, covering everything from site structure to the value of standards-compliant XHTML and CSS. He shows how to create clean and accessible code in Dreamweaver, as well as how to publish compelling content. James demonstrates how to use a variety of techniques for adding interactivity, creating and styling forms and tables, and saving time with templates. He explains the benefits of using programs like Word and Photoshop to speed up workflow, and shows how to publish and manage finished sites. Exercise files accompany the course.
While the CSS Styles panel is where you're going to be doing the heavy lifting on your CSS, the Properties inspector in Dreamweaver CS4 does allow you to do a fair amount of CSS-based work directly through it, without having to go to the Styles panel. It's important to note, however, that without understanding what the Properties inspector is doing in regards to CSS, you can cause some major issues within your site. So let's take a moment to examine how the Properties inspector works with your site's CSS. I have the index.htm page open from the 06_05 folder and I'm just going to click somewhere inside this first paragraph.
Let's go down to the Properties inspector and if you don't have it clicked, go ahead and click the CSS tab so that we're looking at the CSS Properties inspector. The first thing I want to point out is right here it says Targeted Rule #mainContent p. That's reflecting where we've currently clicked, if I click elsewhere, it's going to show me a different rule that I'm targeting. So before you make any changes you want to double check that and make sure the rule that you're expecting to change is the one you see in Targeted Rule. That's not always the case. Notice if I click up here in our menu, I click right here on the Gear and I can't even really resolve this. If I hover over this I get a little tool-tip that comes up and it tells me exactly the rule I'm going to be modifying. In this case, it's hover, which is not what I would be going for. I can grab this pulldown menu and if I scroll up, one of the things that I can see at the very top of this listing is the cascade. What the cascade means is every single rule that's applying to where I'm focused in my site and it goes in the order that they're being applied so body would be first, followed by this tag, followed by this selector, on and on and on. The very last one is that hover attribute. If I was really trying to change the way this link looked however, I want to choose this one instead. Don't always assume that by clicking some place that you're getting the target rule that you're really looking for. You always want to double check that. I'm going to click back into my # mainContent p. I don't know if you noticed it or not, but if I grab this pulldown menu again, I can see that there are other options here for me as well. I can create a new CSS Rule, a New Inline Style, helpful if you're doing HTML emails or if I wanted to go ahead and assign a class attribute to this paragraph I can go ahead and do this from any of the predefined classes that I have in my Styles. Well, I don't' really want to do any of those. I'm going to leave the #mainContent p selected and I'm going to check out some of the other options here. One of the first things I could do is I can click Edit Rule if I wanted to make a change to this rule that included properties that I didn't have available to me over to the right. I could click on this, it would bring up my CSS Rule Definition dialog box, and I have access now to all of those properties, not just a select few. But if I wanted to make a really quick edit to my properties, over here on the right hand side, I've got Font, Size and Color and these are three things that I can go ahead and change. Notice that if I hover over them, I can see the rule that they're coming from. In this case, #mainContent p and sometimes you'll get a color from one selector, a font from another and a size from another as well and that's the beauty of using the cascade. So you want to double check that. Before you make it change, you want to make sure you're still effecting the correct rule. I'm going to go and make a change to the Color here, and my paragraph changes. Remember, this is changing the Targeted Rule, #mainContent p, not just as paragraph. As a matter of fact, if I scroll down, you can see now that every single paragraph in my mainContent region has now changed, not only here but site wide as well.
Hopefully, that's usually what I wanted because that's what happened and that's why you have to really pay attention to what you're doing to make sure that you're making the change that you expect and not just some little local change. With that in mind, if I went ahead and highlighted just some text, notice that the Targeted Rule now becomes New CSS Rule and if I were to try to make any change, it would now prompt me to create a new rule. That's because in highlighting that text, there was no one rule that was applying to just those two words. The paragraph is applying to the entire paragraph, not just those two. So Dreamweaver is saying well, if you want to do that you're going to have to make a brand new style. Using the Properties inspector to speed up your CSS workflow makes a lot of sense but as you can see you really need to be aware of what the changes you're making are affecting elsewhere in your site. As your command over your CSS grows and you get more comfortable structuring the styles within your site, you'll find the Properties inspector an indispensable part of your day-to-day workflow. Initially however, I really want to caution you to be careful when using it, so that you don't make unintentional changes throughout your site.
Find answers to the most frequently asked questions about Dreamweaver CS4 Essential Training .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
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.