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.
Tweaking styles as you work is just a fact of life. You're often going to have to revisit existing styles and rules and modify them based on design decisions or other factors you have going on at the time. Now thankfully, editing an existing rule and modifying the style property is an extremely easy thing to do with the CSS Styles panel. So, I have the index once again open here from the 06_06 directory in there. A couple things are going on here, I want to switch over to the Live view and show you what it is that we need to fix. One, you may have noticed in last exercise, the header graphic is not showing up.
So we're missing our branding image here. And if I scroll down I can see it may not appear at first glance that anything wrong here, but to this headline; Fall registration is now open and Victor Stuesse winning the Lacie Awards. Both of those aren't the font nor the size that I want them to be. I need to change both of those things. Now I'm going to turn Live view off. I'll scroll back up. I need to focus on each of those regions individually. All right, so the first thing I'm going to do is I'm going to scroll through all of my styles and I want to find this home-header. So that's where the background graphic should be displaying, so that image that we're looking for is actually a background image. And once I select that rule, I need to take a closer look at the property, so I'm going to take this divider move back up again.
Now, you may have remembered from an earlier movie that when we look at the properties of rule by highlighting it the way we're here, we have the option of changing those properties. And if I click on this to change the URL, because obviously it's pointing to the right graphic, main_back, but the location here is wrong, it's going up like two directories and looking for images, and that's incorrect. So, I could change that, but I don't get an option here to browse. Now I'm free to go ahead and type this in. So, if you know the path, if you have that path memorized or you know the exact file or you know kind of what's wrong, you can make that change manually.
But in this case, what if you don't know it? Well, you either would have to go out and write it down and then come back and edit it or go in to code. Or you can use option number two, which is to go up to the rule itself, which is home-header and double-click on that. Because if you double-click on that, remember, that brings up the CSS Rule Definition dialog box and this gives us far more manual control over certain aspects, such as using images. So, if I click on the Background Category, I can see there's my Background-image and I can actually browse to make sure I'm resolving that on the right location.
So, if I go in the 06_06 folder, go into Images, and once again I'm going to change my menu here to make this a little bit easier for me to find, I'm going to scroll down and find this file right here, which is main_back, I'm going to go ahead and click OK. Now that's the only thing I need to change. I don't need to change any of the other properties. I'm going to go ahead and click OK. As soon as I do that the image shows back up again and everything is great. Now I want to point something out over here in the related files. You can see, we have the option looking at the Source Code or there's the main.css.
You might see that little asterisk (*) right above the main.css. What Dreamweaver is telling you there is that, hey, this code has been changed. It's been modified in some way, and it's letting you know this has been modified since the last time it was saved. It's sort of warning you if you will that this document currently is in an unsaved state, so if you had a crash or something would happen, those changes that you just made aren't guaranteed to persist. This is also true, before you upload it, you might want to save it. So what I'm going to do is I'm just going to go up to File and choose Save All, that's going to save not only the current index file, but also the externalmain.css file as well.
Okay, now, you don't have to double-click on a rule every single time you want to edit it. Most the time you'll be able to edit straight from the Property section over here. I'm going to scroll down and find headline that we need to change and I'm going to click inside that. Now the reason I want to click inside this and then select the h2 tag is remember it makes it little bit easier to find that rule. You know earlier we were sort of scrolling up or down, there are lots of rules in the style sheet, and lot of times you're going to spend half your time scrolling up and down, trying to find the right rule or find where that rule is organized.
So, the best thing to do if you want to target something very quickly is to click inside of it, use the Tag Selector to select the element that you're targeting, in this case the h2 and then you can just switch over to the Current rule. When you switch over to the Current rule right here in this middle pane, you can choose the selector that you're looking for. So you may even have multiple selectors that apply to that particular element and apply their styles in sort of a cumulative fashion, but you still filter through the rules that are applying to it, to find exactly what you're looking for. In this case, its article h2, that's the one I want.
Okay, one of the first thing I want to do is I think the font size is a little large, at 2ems, so I'm going to change that, I'm going kick that down little bit to maybe 1.5ems. So I can just click right here in the value for a font size and I can choose 1.5ems. Now I also want to set the font, the font isn't correct either, but I notice that property is not currently part of this rule. So in order to change that, this time I'm going to click to add a property, and again, I can add a property from this pull down menu or I can simply type it in, if I know what property I want to add.
In this case I want to add font-family, and then if I hit Tab, it takes me over to the value side of the Property's dialog here and now I can grab the pull-down menu and choose from the list that we were working with earlier. Now if you member earlier, I wrote out Bitter, Georgia, Times, and serif as the font stack that I want to be able to use, and I saved it as a favorite. By saving that as a favorite within that dialog box, that means that anyplace in Dreamweaver, Code Hinting, over here in CSS Styles panel, whether I'm actually hand-writing the code, it's going to make that available to me, so that is a really neat feature and something you should take advantage of.
In this case I'm going to choose Bitter, Georgia, Times, serif, and we have it, I'm going to do Save All again, and then I'm going to turn on the Live Preview and I'm going to check out the changes that we've made. So, there is our background graphic, it's appearing, and now the headline over here is the proper font and the proper size that I needed. You know, so far we focused on the CSS Styles panel and its considerable abilities to write, organize and manage styles within your sites. However, it's not the only place that you can edit your styles in Dreamweaver. And in our next movie we're going to explore one of those alternate methods as we use the Properties Inspectors to control CSS.
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.