Styling with CSS
Video: Styling with CSSUp 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.
Viewers: in countries Watching now:
Creating a First Web Site with Dreamweaver CS4 shows the basics of doing just that—building a first web site. Adobe Certified Instructor Paul Trani walks through the important steps of creating a web site from concept to publishing, using Dreamweaver CS4. He teaches how to create basic web pages, add text and image content, use Cascading Style Sheets for design and layout, create a photo gallery, and even check the final site for browser compatibility. He also demonstrates how to create a contact form to encourage viewer feedback on the site. Exercise files accompany the course.
- Exploring the Dreamweaver workspace for first-time users
- Linking to external web pages and sites
- Improving the presentation of text and images on the site
- Building a layout using Cascading Style Sheets
- Making navigation reusable across multiple pages
- Displaying content using the Accordion widget
- Creating a contact form and sending data from it
- Making the final site search engine-friendly
Styling with CSS
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.
Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS4 .
Here are the FAQs that matched your search "" :
- Q: After creating the website as instructed in the tutorial, and uploading the site to the internet, the website does not seem to work for every browser. How can one make sure that the website will work for all browsers?
- A: An important step when creating a website is to check for browser compatibility. To do so in Dreamweaver, go to Window > Results > Browser Compatibility. Click the Play icon in the left corner then go to Settings and target the browsers you¹re after. Then hit the Play button to run it and check the page that’s open. If there’s an issue, best-case scenario, it should show you what the issue is and link out to a solution. Worst case is that it’s a pretty unique issue, in which case further troubleshooting would be needed.
- Q: The background image is tiling, instead of being one large image. How is this corrected in Dreamweaver?
- A: This can be corrected by using a larger image, something around 1024x768 that will fill up most of the monitor space. The issue is that the background image is just too small. Note that tiling of the background image can be turned off in the CSS Panel, but that would only result in a single small image. So it’s better to just use a larger image for the background.
- Q: When trying to import SWF content, I get a message: “This file is outside the root folder of site ‘xxxxx’ and may not be accessible when you publish the site.” What is causing this?
- A: Make sure your SWF file (and all files you put on a page) are located in your local site. Basically make sure you set up a local site in the site panel. It will ask where to put your local site on your computer. Just make sure you SWF is in that folder and you won’t get that error.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.