Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Up until now, we've been applying some basic styles to this webpage such as the background, the different link colors, as I rollover them you can see a change to that orange, and then even some text styles, but it's been pretty limiting so far. But what I want to do is go beyond the Page Properties panel, beyond some of these somewhat limiting options. For instance, I can apply a color to the background. I can apply an image to the background.
I can say repeat it for instance, and that is does the background tile if you will. So, I can control sort of its tiling. But that's about it and what I want to do is I want to go beyond this and in order to go beyond the Page Properties panel, I want to use CSS Styles and more specifically, the CSS Styles panel. So, if you don't have it open, it's under Window > CSS Styles and right here in my CSS Styles panel, you'll see all of these styles that are currently in this document.
In fact these were all applied using the Page Properties panel. But again, I want to go beyond say for instance, the typical sort of body background image. So I'm going to select body, double- click on that and sort of the background for this image, I'm going to select the category being background and sure enough as you can tell, there are not only my two options from the Page Properties panel, but there is additional options as well. So this is great, give me more control over the appearance of my webpage.
In fact, again, whether I want the background to repeat or not, I can apply that here and by default it will repeat, and also by default the image will always start in the upper left-hand corner regardless of the size of your browser. What I want to do is I want to change the background and I want the background to be fixed. And what that means is the background, if I have content on that page and I scroll that content, the background will stay fixed, obviously in the background and the text will scroll.
So, it creates this nice, sort of depth look. Another thing I want to do is to change the background X position, so it's positioned from left to right where it appears. And I'm going to go ahead and center the image. In fact, if I click Apply you can see that it centers the image. I also want to adjust its Y position, so it's vertical position and I'm going to change that to Top, I'm going to click Apply. And now you can see the image is always going to start at the top here, and sort of develop on the way down.
But it's always going to be centered. So it's going to create this sort of nice look, I'm always going to have this image centered, starting at the top and it's always going to be fixed. In fact, let's go ahead and select OK, and I'm going to save this document and I'm going to go ahead and preview it in a browser. So again, if I scale this, we can see the background moves. Again that nice sort of depth look which works out great and the background is centered, but if I need to scroll the content, the background stays fixed, but the content scrolls.
So again, this nice and depth look that can really only be done through the CSS Styles panel and not through the Page Properties. So again, I'll close that browser, go back here into Dreamweaver and let's extend that to other things, such as my link color. If I double-click on link, I can change my link color to say for instance, a gold and I can even more move the text-decoration. Text-decoration in this case is this underline, so if I select none and click Apply, it changes the color and removes that Text-decoration. We will select OK.
So, it's looking better but I want to even again go beyond what Page Properties allows me to do. Say for instance, hover, if I double- click on that, I can change this CSS Rule definition and again, I can change the color and what I want to do now is access some of these other categories for this hover. For instance the background, I want to change the background of that link to black on hover. So, when you rollover any link, the background is going to turn black and again the Type > Color is going to turn white, and I'm going to make sure it doesn't have any Text-decoration.
So, I'm going to select none there. Select OK, the active color, I can leave as red. The visited, I can change that as well, I'll change this Text-decoration to none, and click Apply, but again, full control with what I want to do with this particular item. All right, so that's looking pretty darn good. In fact, let's go to File, let's go ahead and save this document, and let's preview it in a browser again.
Here we are, my background is looking good, my links, as I rollover them, I can see that it changes the text to white, and the background changes to black. Wherever there is a link it's going to act that way. But again, customizing this design towards sort of your taste or the goals and objectives of your site is really what we are after here. In fact, just so you know what's going on behind to the scenes, I can check out the CSS Styles in my document.
So I can go ahead and do a right-click or Ctrl- click if you are on a Mac, and I can Go to Code. So, if I Go to Code, it jumps directly to that Code and it gives me my color for the visited links. In fact, the body, I can Go to Code for the body background and again, since there is a background image you'll never really see this background color. So, if I feel comfortable, I can go ahead and delete that right in here in my Code view, if I want to.
And if I modify anything in Code view, I might need to refresh this CSS Styles panel. Sure enough, it's removed from the properties of that body tag. Let me go back to Design view. In general you can see how we can go beyond what's in Page Properties using the CSS Styles panel. It has really given us more control and more flexibility with our design.
Get unlimited access to all courses for just $25/month.Become a member
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.