Start learning with our library of video tutorials taught by experts. Get started

Managing CSS in Dreamweaver
Illustration by

Writing snippets


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Writing snippets

Using snippets to reuse CSS code requires a good deal of planning to build a strategy around how your code will be reused and how much of your layout and presentation will be saved in your Snippet library. In this movie, we'll begin to build a small-scale CSS Snippet library that can be used over and over again for other projects. To do this we'll need to examine our current site, evaluate elements or structures that we could reuse in other projects, and then modify existing CSS rules to create a more neutral snippet version of them.
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Managing CSS in Dreamweaver
4h 40m Intermediate Jun 03, 2010

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.

Topics include:
  • Building a CSS-friendly workspace in Dreamweaver
  • Creating style sheets visually
  • Hand-coding styles
  • Working with code hinting
  • Organizing style sheets with color coding and sections
  • Writing global classes
  • Eliminating style conflicts
  • Deploying styles
  • Dealing with browser compatibility issues
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Writing snippets

Using snippets to reuse CSS code requires a good deal of planning to build a strategy around how your code will be reused and how much of your layout and presentation will be saved in your Snippet library. In this movie, we'll begin to build a small-scale CSS Snippet library that can be used over and over again for other projects. To do this we'll need to examine our current site, evaluate elements or structures that we could reuse in other projects, and then modify existing CSS rules to create a more neutral snippet version of them.

And if you were to really take a look at this layout, you would call it a two-column layout. The header, instead of panning the entire width of the page, is really just a small little area. It could be a badge, or a banner, or something of that nature. The main content fills up the entire right side of the page, and we have a footer at the bottom. Everything else, in terms of the colors being used, the graphics being used to the way that the navigation is structured, is really designed specifically for the Explore California Web site. So unless we were going to have to reuse these snippets in order to build more pages for the Explore California Web site, it really wouldn't make a whole lot of sense to use the existing CSS to build snippets.

We need to modify them a little bit more, and make them a bit more neutral. Now that way any time I wanted this particular layout or even color schemes and things like that, if I want to keep those, and typography, I could save those as snippets. So what I'm going to do is I'm going to go over to my Files panel. I'm going to go into the 03_04, which is my root directory here. Open up the _css folder and open up main.css. Now yes, we can access the code from here, but we need to do something very special with this. I'm going to go to File and choose Save As.

I'm going to save this in the same folder, the _css, and I'm just going to call this one snippet_source.css. So, snippet_source.css. Now why are we doing this? Well, as I mentioned before, we're going to have to modify some of these styles, some of them quite extensively. The last thing in the world you want to do is make changes to your site's CSS file when you're building your snippets. You want to leave that alone. So we're just creating a copy of this. I'm going to close the main.css that we had opened and focus on my snippet_source file.

Now the next thing I'm going to do is go to my panels and click on my Snippets panel to activate that, and sort of expand that out a little bit more. I really like being able to see this panel, read some of the descriptions and tell what's going on here. Okay, so the first thing that we're going to take a look at is our global constants. As I scroll down a little bit, I get down to about line 43 in my code, I can see some constants that are going to be used kind of over and over again. To be honest with you, this is one of the selectors that I have at the top of almost every single one of my style sheets. It takes a default margin and the padding for documents in different browsers, and just sort of zeros them out, so that you can do with them what you want.

So we've other ones like the body tag that we could reuse, our limited-scale reset, so we've got some pretty generic global classes and constants in here anyway, so we could go ahead and start our CSS Library based on those. Now I'm going to go over to our Snippets panel and clean up some of the stuff that we've been working with before. I'm going to go inside that CSS folder, click on the h1 selector that's currently sitting in there and I'm just going to delete that by clicking the Trash Can. So anytime you want to delete a snippet, just highlight it. Click the Trash Can. It says, Are you sure you want to delete it? I'm going to go and say, Yes, and now my CSS folder is empty again.

It's empty because I want to give it a little bit more structure than what they've got. So I'm going to click on the CSS folder to activate that folder, create a brand-new snippets folder, and I'm going to go ahead and call this one Global Constants. Now sometimes you could have snippets that relate to a specific layout, so we can create an Explore California theme, for example, and have snippets related just to this particular layout. You can also have snippets that could be used for really any site, and Global Constants really fits that bill. You could have snippets that you use anytime you create a project.

You can just create and start putting some of these things in here. Okay, so I'm going to go back over to my snippets_source.css. Highlight the html in the body selector. Once again, make sure you get the opening and the closing curly brace, as well as the selectors itself. I'm going to go ahead and either right -click or Ctrl+Click that and choose Create New Snippet, and I'm just going to go ahead and call this snippet html & body reset. You can name snippets anything you want. You want to be a little descriptive, but you don't want to be the overly long. And for the Description, I'm going to type in: Resets the default browser page margins.

Again, the Snippet type is going to be Insert block. Whenever you're dealing with CSS-based snippets, you're always just going to insert the block of code. CSS doesn't work that way. You are not going to wrap code with it. I'm going to have my Preview Type be Code and again, I'm going to double-check the style, make sure everything is in its right place - it is - and go ahead and click OK. So now over in my Global Constants, I've my html & my body reset. Excellent! Now I'm going to go down to the body tag, and here I'm going to create a couple of different versions of this body tag. So I'm going to go ahead and copy this and then paste it on a line below it.

So now we've two body selectors, two body element selectors, and we're going to change up a few things in it. First off, we're going to take the margin top and get rid of that. That margin top is very specific for the Explore California Web site. If we were creating just some generic body tags that we can use on any site that we want, we're going to go ahead and take things like that away. Now the next thing I want to do is the top body tag is using Georgia, Times New Roman, Times, and serif. It's a font stack I use a good bit, but it's not always the font stack I want to use. So what I'm going to do is on the body selector below that, I am going to go ahead and replace that Georgia, Times New Roman, Times, serif.

So I'm going to go ahead and delete that, and then I'm going to type in ar, and it actually gives me, Arial, Helvetica, sans-serif. Now remember you want a space between the % for size, and Arial, Helvetica, sans-serif. Okay, so now we've two body tags, one using Georgia and one using Arial. We're going to go ahead and add them to our CSS Library. So I'm going to highlight the first one. Now, we want to do these individually. So I'm going to highlight the first one, I'm going to right-click that and choose Create New Snippet, and I'm just going to go ahead and call this one, body 100% Georgia.

And that way I can scan these body tags here. So I have got some body tag selectors, 100% font size and Georgia. And for description, again, I can be a little bit more descriptive here. I'm going to say, Neutral body tag, meaning no margins associated with it or anything like that, 100% font size, Georgia stack. For me that short for Georgia font stack, you could be a little bit more descriptive there if you'd like. And that's good. Now I'm going to look at everything here to make sure everything is okay, and everything is not okay.

What I left in there that I didn't mean to leave in there was the background. So here's the beauty of the Snippet dialog box. I'm going to click on the Insert block and then this background part, I'm just going to go head and get rid of it. I can even adjust my spacing by moving those guys up. So you can edit in your Insert Code dialog box the same way that you could code within the CSS Style panel. So that's pretty cool. So I'm going to go ahead and click okay, and it creates that. Now notice how it doesn't affect the style in your CSS. So if you do have a selector that you need to make slight modifications for, but you don't want to disturb it in the native style sheet, you can go ahead and create a snippet and just make your edits in that little window, and you'll be okay.

All right. Now, I definitely don't need it for my next one, so I'm going to remember go ahead and get rid of that. I'm going to highlight it, create a new snippet out of this, and I'm going to call this one body 100% Arial, since we're using Arial as a font stack, and for the Description, I'm going to type in: Neutral body tag, 100% font size, Arial stack. And you always have to remember to do Insert block, the default is Wrap selection.

So if you keep doing CSS snippets over and over and over again, keep in mind that you're going to have to continually insert that block. I am going to go ahead and click OK. Now you'll notice that the way that these guys are stacked up, it's really easy to scan this. It says, body 100% Arial, body 100% Georgia. You might be wondering, why don't I just name it body1 and body2 and let the Description tell me what it's doing? Well, you can see I've got my Snippet panel really extended to see the description at all. More than likely, you're going to view your Snippets panel like this. So you want those names to be descriptive enough to where you know which one you're going to use for a given situation.

Now let's do one more. I am going to go down to the limited- scale reset, and I'm going to go ahead and highlight that. Remember, you can choose to add the comment as part of this, as well, if you think you'd always want to put a comment above that, which I think is a pretty good idea, actually. I'm just going to go ahead and highlight that as well, and Dreamweaver can be really tricky sometimes when we're highlighting this code. So double-check that you've got the comment before it and the closing curly brace. We're good there, and then I'm going to go ahead and create a new snippet. Now you can also simply highlight your text, instead of right-clicking, you can go right over to the Snippets panel and click right there on New Snippet, and as soon as you get that, the Name comes up, and we're just going to call this one limited reset, limited reset.

Now I don't like the way that these guys are all on separate lines, so I'm just going to take just a brief moment to bring them all back on one line. I probably could have done that in the code using my AutoFormat Options, but this is not that strenuous. So we're going to go ahead and do that for each one of these guys, get them all up in the same line. And I noticed when doing this that we're leaving somebody out here. We have got an ul, which stands for unordered list. We have the list item, but we don't have ordered list, and that's because we're not using ordered list in the Explore California Web site. It doesn't mean that for our limited- scale resets on other sites that we shouldn't have that.

So I'm just going to add an ol in the mix there, and make sure I have a comma, so that the ol and li tag are separated. Now this is a limited reset. I'm just going to give it a brief Description here. I'm just going to do a brief, little title here that says CSS margin and padding reset for basic HTML elements. And then I'm going to click Insert block. Always remember to do that. That's so easy to forget. So just force yourself, every single time you do this, to remember to click Insert block.

Go ahead and click OK. Now here is the nice thing about this, because I can preview which elements are added to the limited reset by looking above that. I probably don't need that identifier in there either. So if you want you can edit your snippets, you can right-click a snippet and choose Edit. It brings up this dialog box, again, you can make any edit you wanted and click OK, and you are in good shape. Now this looking pretty good, but more than likely, for any type of library, I'm going to have more than one resets. This is a limited reset. What if on one site I want to do a full reset, or use the Yahoo user interface reset? Well, if I go up to my CSS folder right here and click on that, I can create a brand-new folder.

I can call this CSS Resets, and just like that, I can take my limited reset and drag it in there. So if you don't get the organization that you want at the beginning of it, you can add it at the end. Okay, cool. We're now well on our way towards having a library of CSS snippets that we can call on whenever we're building a CSS file for our projects. Now as you can imagine, you can go on from here and add more CSS resets, add global classes and other site-neutral styles. The limits on what type and how many snippets you have are entirely up to you.

Now when creating snippets, try to imagine how often you'll use certain rules and how you might need to modify them for other sites or projects. It's going to go a long way to telling you what type of snippets you need and really how ought to be structuring them. So as we continue to explore snippets in more detail, we're going to move on to discuss the topic of creating CSS-specific libraries of snippets.

There are currently no FAQs about Managing CSS in Dreamweaver.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Managing CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.