Viewers: in countries Watching now:
Managing CSS in Dreamweaver with James Williamson shows how to create cascading style sheets that are efficient, reusable, and easy to navigate. In this course, James shares tips on how to find and use panels and tools, and how to deploy style sheets to screen, print, and mobile environments. Course topics include creating customized starter pages, learning to rapidly hand-code CSS through using Snippets, and using Dreamweaver's CSS preferences to deploy lightweight styles. Exercise files are included with the course.
Style sheets can be incredibly complex documents, featuring thousands of lines of code. One of the first things you can do to your style sheets to assist you in giving it structure and organization is to write a good style header. Style headers can be as robust as you need them to be, and usually contain information such as copyright data, style reference information and version numbers for team members. We're going to start the organization of the Explore California styles by writing our own style header. So I'm just going to go ahead and create a brand-new CSS document. Now, I've defined the 02_02 as my root directory, but I'm just going to go ahead and create a CSS file from scratch.
And I'll use the starter screen to do. So create new CSS file. There we go. I'm just going to save this in the 02_02_css folder, and I'm going to save it as main.css. Here we go. So the first thing I'm going to do is just up here I'm just going to write: style sheet for Explore California. Now on the next line, I'm going to type in version 1.2, modified on 04/05/10.
Now that level of organization you don't need, but if you're working in a team environment, that's really handy, because if a team member comes in and makes a change to the site, they can change that one line and everybody knows, okay, this has been modified last week or this hasn't been modified in the month, that sort of thing. I'm going to go down and on the next line, I'm just going to type in copyright 2010 lynda.com for personal educational use only. So if you want to put some restrictions on how your style should be used if people want to repurpose them, that's a good place to put it, as well.
Now this needs to be inside of a comment. This would really mess my CSS up if I didn't have it that way. So let me go ahead and highlight all of this text and when the text is highlighted, I'm just going to come right here to my Code toolbar, click on the Apply Comment, and I'm going to apply the second comment here, which is the /**/Comment. That is a multiline comment in CSS, and I want to choose that. Now you can see that it's grayed, and you can put those comment indicators on either side. You can leave them inline. It's really up to your personal preferences. You can put them wherever you would like. And I'm going to go ahead and save that file again, and there we go. There is our style header.
Now these things can be as robust as you need them to be. Remember, they're entirely optional. You don't even really have to have them. They are a great way to communicate with yourself. If you're like me and you forget why you are doing a certain thing, they are a great way to sort of add a little note to yourself, as well as any team members, what's going on with your styles. And they are also a great way to pass on information to people who might be visiting your site, opening your styles to take a look at them. If you do plan on using them, keep in mind that they should convey information inside of them very clearly and very concisely.
There are currently no FAQs about Managing CSS in Dreamweaver.
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.