New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

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

Managing CSS in Dreamweaver
Illustration by
Watching:

Working with code snippets


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Working with code snippets

Another extremely effective way of reusing code in Dreamweaver is through the use of Code Snippets. Code Snippets allow you to store any code, whether it's CSS or HTML, in your Snippets library, and then reuse that code at any time. For CSS, this allows us to build libraries of formatting, layout and presentation styles that can speed up the process of building complex style sheets. In this movie, we're going to examine how Snippets work as a way of sort of preparing ourselves for using them with our CSS later on. Before we build any snippets, we need to take a brief tour of the Snippets panel.
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

Working with code snippets

Another extremely effective way of reusing code in Dreamweaver is through the use of Code Snippets. Code Snippets allow you to store any code, whether it's CSS or HTML, in your Snippets library, and then reuse that code at any time. For CSS, this allows us to build libraries of formatting, layout and presentation styles that can speed up the process of building complex style sheets. In this movie, we're going to examine how Snippets work as a way of sort of preparing ourselves for using them with our CSS later on. Before we build any snippets, we need to take a brief tour of the Snippets panel.

So in our CSS workspace, we have the Snippets panel docked with the Files panel. That's typically where it's found. If you don't see the Snippets panel, you can go to Window and choose Snippets, right there, and it'll activate the Snippets panel. Now I'm going to double-click the CSS Styles panel to collapse that, so I have a little bit more room for the Snippets panel. Okay, so the Snippets panel comes with some pre-built snippets already built-into it. You can see that those are categorized. We have some Comments. We have Footers, Form Elements, JavaScript, so area conclusions, browser functions.

So this is not just for HTML and CSS. This is also for JavaScript and really any code that you write. Well, you're free to make your own Snippet folders, and you're free to save your own Snippets inside of them. So I'm going to go down to the bottom right-hand corner of the Snippets panel. I see a little folder icon there. I'm going to go ahead and click on that. That's going to create a New Snippet Folder. Now one of the things I've always be kind of frustrated about with Snippets folder is I always forget where I'm focusing. You can see what this did. As soon as I click this, because I have the Comments folder highlighted, it placed it inside of this.

So I'm just going to go ahead and name this snippet Structure. Don't worry if yours is not in this. Frankly, mine is not supposed to be. But the good thing is about this is it shows you that you can nest these folders inside of each other. So you can create some pretty complex structures out of this. Okay, I'm going to go ahead and move that out, so that it is a top-level folder itself. What am I going to do next, now after creating Structure, I'm going to go ahead and create a brand-new Snippets folder. Here, I'm going to call this one CSS. So we have one for HTML Structure tags, and then we have another one for CSS.

Now you can create snippets in one of two ways. One is you can create a Snippet from scratch yourself using the Snippets panel, or a option two, which is probably the more likely option, is you're going to take existing code that you already have in your styles, or your HTML, and then save that as a Snippet. Well, let's examine option number one. I'm going to go and click on the Structure folder, so that it's our active folder. That insures that any snippet that we create is going to be placed inside that. As you can see, it allows you to rename folders, as well. Snippets panel is really sensitive. So be careful about clicking in and around it a lot.

So I'm going to go and create a brand-new Snippet. I'm just going to go ahead and name this Snippet,wrapper div. Now in almost every single Web site I create, I create a wrapper div tag that sits inside the body tag. That helps me center the content on the page, if that's what I'm wanting to do, and give definition to the page. Use a position attribute of relative on that, so that anything positioned will position inside the wrapper and not the body tag. So it's something that I'm going to do almost every single time. So what I'm going to do now in the Description, I'm just going to type in description of what this snippet is going to do, sort of describe its functionality.

I want to say, Inserts a wrapper div tag around selected elements. So I'm very clearly stating that this is going to insert a wrapper div tag around selected elements. Notice that that directly plays into the type of snippet that we can create. We can do a Wrap selection or Insert block. Wrap selection will go ahead and wrap an opening and a closing section of code, and it can be a little code or it can be a lot of code, around whatever code you have selected. Insert block is just going to take that block of code and insert it into the location where you are on the page.

So it's not going to do any wrap. So we want this going to wrap the selection. In the Insert before, I'm just going to write a div tag. I'm going to say

, and then I am going to close my opening tag. Then Insert after, I'm just going to go ahead and close the div tag. Now you'll notice we're not getting any code hinting or code completion here. So you've got to be certain of what you want to do. Syntax matters. Spelling matters. Whitespace matters. You want to be very, very careful when entering code into these panes. So again, I would say Wrap selection and Insert block in. Notice that the Preview type can either be Code or Design.

Now when you click on a Snippet in this area of the Snippets panel, you'll see a preview of it. I really like just seeing the Code, so I can read the Code and know what I've got going on there. I'm going to go ahead and click OK. There is our wrapper div. As soon as I click on that, it says div id= wrapper and then close the div. So it's giving me a little summary of what this Snippet is all about. If I expand my CSS Styles panel by clicking right there on a divider, I can also see that right over here is the Description for that. So anytime I have a Description for a Snippet, when I select it, I'll be able to see that in the Description area. Okay. Let's take a look at how we can use these Snippets.

So now what I'm going to do is click anywhere inside my page, and notice that I'm not even in Code view, so you can use Snippets in Design view. It's okay. Going over here to the Tag Selector, I'm going to click the body tag. That's going to highlight everything inside the body tag, so all the content on the page. It's a very easy way to do a select all. I'm going to go over to my wrapper div tag, and using a snippet is as easy as double-clicking on it. I'm going to go ahead and double-click that. Notice as soon as I do that, I have the div with an id of wrapper. If I do switch to Code view, notice that there is the opening wrapper div tag, and there is the closing wrapper div tag.

So it went ahead and wrapped all of the code on the page, so a very quick and easy way to do that. Now what about CSS? How does working with Snippets benefit us when we're working with our cascading style sheets? Well, I'm going to go back to the Files panel, and in the _css folder, I'm going to open up main.css, of course. Notice that this is the style sheet for the Explore California Web site that we've been using. What I'm going to do now is when I scroll down to my line 80, and find the h1 tag. I am going to go ahead and highlight the whole tag. Make sure that you get the opening curly brace, the closing curly brace, the selector. You want to make sure you have all of this selected, because when you create a snippet based off of your selected code, what's going to happen is everything inside the highlighted area will be converted to a snippet.

If you leave something off, then that snippet is going to cause you so many problems a little bit later on down the line. All right, so I have that selected. There are so many different ways to create a snippet. I can go back over to the Snippets panel and click the New Snippet icon. That'll be the one way to do it. Another way would be to go ahead and right-click, and you can also Ctrl+click if you're on a Mac, and I'm going to choose Create New Snippet, right there. Now as soon as I do that, I get the dialog box that we were just looking at when we created our wrapper div tag snippet. But notice that this one is pre-populated with the h1 selector that we had highlighted.

So that's really cool. The Name of this one, I'm going to go ahead and call this one h1. That's fairly descriptive right. In the Description section, I'm going to type in Explore California h1 selector. This time, instead of having the Snippet type be Wrap Selection, I want it to be Insert Block. Notice that we lose our double pane down there, and we just get the one section of code. Now here is the other thing. I can modify this. If whatever reason I've left off that curly brace, I'm free to go ahead and type that now.

I'm going to keep the Preview type as Code, and I'm going to click OK. Right now, we didn't really see anything happened. But if I switch over to my Snippets panel, I can see right there that the h1 showed up in the Structure. Now why did it show up in the Structure folder? Oh, that's why I had highlighted, because that's what we were using just a minute ago. So if for whatever reason,a snippet goes in the wrong folder - and trust me it will happen to you, the Snippets panel is really sensitive - it's okay because you can simply grab your snippet, and then just drag it into the folder you want. So you can do that anytime. You're going to rearrange entire folders, individual snippets within folders or whatever you'd like to do.

It just does not matter. Now I want to show you one last thing before we move on to discussing strategy for using Snippets within your CSS. You can assign keyboard shortcuts to Snippets that you need to use all the time. So if you're rapidly building pages, it'll be really nice to go ahead and have keyboard shortcuts assigned for these. So I'm going to go to the h1 snippet, which is right here, right-click or Ctrl+click that, and I'm going to choose Edit Keyboard Shortcuts. Now you can also go up to Edit and choose Keyboard Shortcuts, as well. If you're on the Mac, you can go to Dreamweaver Keyboard Shortcuts, and you will see the exact same panel.

Now you don't want to modify the Dreamweaver Standard keyboard shortcuts. So I'm going to go ahead and make a new one. I'll just say Duplicate Set, and this comes up. I'm just going to call these my shortcuts. You can call them whatever you want. You're free to create as many of these as you would like. So you might create a set of keyboard shortcuts to use only when you're doing Snippets. So it's totally up to you. All right, now we want to modify our Keyboard Shortcuts. What's really interesting about this is notice that we've got our commands for Snippets. We can go to menu commands or all of those, but Snippets has their own category.

Inside Snippets, I'm going to open up the CSS and choose the h1. Now I'm going to go ahead and give this a keyboard shortcut by clicking in the Press key. I'm just going to do Ctrl+Shift+1. Now you'll notice that the keyboard shortcut is already assigned to Align Left. You know what? I never use that keyboard shortcut for Align Left. So don't panic. If you see something that you want to do, and Ctrl+Shift+1 is the easy one to hit. If you see something like that, and then Dreamweaver says, oh, I'm sorry. This is already taken by Align Left or Align Right. Well, if you're never going to use it, what do you care? So I'm just going to hit Change and Dreamweaver further scolds me about it. I'm like no, no.

I'm really serious about that. Then I am going to go ahead and click OK. Now anytime I wanted to, I could add the selector again just by using the keyboard shortcut. Let me show you what I mean. I'm just going to highlight my h1 selector again. Make sure you're in the Code view. Delete that. Then I'm just going to do Ctrl+Shift+1. There is my h1 selector. So if you have a lot of those in your library, or even whole sections of styles, you can really rapidly build pages. It doesn't matter whether you're working with HTML CSS or be even something like JavaScript. If you write a lot of code, I think it's pretty easy for you to see how much Code Snippets can help speed up your workflow.

Now that we know that working with Code Snippets can help us reuse our CSS, we need to discuss strategies for working with CSS and Code Snippets. That is going to be the focus of the next movie.

There are currently no FAQs about Managing CSS in Dreamweaver.

 

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:

  • new course releases
  • newsletter
  • general communications
  • special notices

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:

  • new course releases
  • newsletter
  • general communications
  • special notices

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.