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

Dreamweaver CS5 Essential Training

Writing targeted styles


From:

Dreamweaver CS5 Essential Training

with James Williamson

Video: Writing targeted styles

In our previous movie, we wrote our site's global styles. Global styles give you the baseline styling for your site, and provide the foundation for the remainder of your site's styles to be built off of. In this movie, we are going to tackle the next step in styling your site's typography, writing targeted styles for specific regions of the page. Now very rarely will you want all paragraphs in the headings, sidebars, footers and main content regions to look the same. To accomplish this, we're going to use descendant selectors to target specific elements within page regions.
Expand all | Collapse all
  1. 2m 57s
    1. Welcome
      1m 8s
    2. Using the exercise files
      1m 49s
  2. 7m 50s
    1. What is Dreamweaver?
      3m 16s
    2. Learning web design
      2m 22s
    3. Current web standards
      2m 12s
  3. 43m 9s
    1. The Welcome screen
      4m 5s
    2. Windows and Mac interface differences
      2m 23s
    3. The Application toolbar
      4m 7s
    4. The Document toolbar
      4m 40s
    5. Arranging panels
      8m 19s
    6. Managing workspaces
      7m 32s
    7. The Properties Inspector
      5m 54s
    8. The Insert panel
      6m 9s
  4. 25m 45s
    1. Basic site structure
      3m 11s
    2. File naming conventions
      1m 49s
    3. Defining a new site
      4m 35s
    4. Managing sites
      4m 51s
    5. Managing files and folders
      6m 36s
    6. Working with browsers
      4m 43s
  5. 27m 21s
    1. Creating new documents
      5m 16s
    2. New document preferences
      3m 6s
    3. Setting accessibility preferences
      4m 56s
    4. Working with starter pages
      3m 46s
    5. Managing starter pages
      10m 17s
  6. 30m 2s
    1. Basic tag structure
      2m 15s
    2. Adding structure to text
      8m 20s
    3. Creating lists
      9m 59s
    4. Getting text into Dreamweaver
      5m 59s
    5. Importing Word documents
      3m 29s
  7. 1h 17m
    1. Understanding style sheets
      2m 16s
    2. The anatomy of a CSS rule
      1m 48s
    3. Setting CSS preferences
      6m 36s
    4. The CSS Styles panel
      10m 2s
    5. Controlling CSS through the Properties Inspector
      5m 14s
    6. Using the Code Navigator
      7m 21s
    7. Using CSS Enable
      6m 45s
    8. Understanding element selectors
      8m 11s
    9. Understanding class selectors
      8m 49s
    10. Understanding ID selectors
      5m 59s
    11. Understanding descendant selectors
      6m 51s
    12. Attaching external style sheets
      7m 44s
  8. 1h 47m
    1. Working with units of measurement
      7m 11s
    2. Declaring font families
      9m 39s
    3. Controlling font sizing
      9m 9s
    4. Controlling weight and style
      8m 0s
    5. Controlling line height
      8m 29s
    6. Controlling vertical spacing with margins
      12m 3s
    7. Controlling spacing with padding
      5m 39s
    8. Aligning text
      8m 26s
    9. Transforming text
      5m 36s
    10. Writing global styles
      15m 42s
    11. Writing targeted styles
      17m 37s
  9. 1h 32m
    1. Understanding image types
      5m 3s
    2. Managing assets in Dreamweaver
      12m 51s
    3. Setting image accessibility preferences
      4m 20s
    4. Setting external image editing preferences
      3m 52s
    5. Placing images on the page
      7m 37s
    6. Photoshop integration
      5m 54s
    7. Modifying Smart Objects
      5m 51s
    8. Alternate Photoshop workflows
      8m 8s
    9. Modifying image properties
      11m 14s
    10. Styling images with CSS
      7m 11s
    11. Using background graphics
      9m 3s
    12. Positioning background graphics
      11m 6s
  10. 55m 16s
    1. Link basics
      3m 37s
    2. Setting site linking preferences
      2m 14s
    3. Creating links in Dreamweaver
      11m 1s
    4. Absolute links
      5m 8s
    5. Using named anchors
      11m 19s
    6. Linking to named anchors in external files
      2m 44s
    7. Creating an email link
      5m 24s
    8. Creating CSS-based rollovers
      13m 49s
  11. 1h 34m
    1. CSS structuring basics
      2m 56s
    2. The Box Model
      13m 21s
    3. Understanding floats
      6m 53s
    4. Clearing and containing floats
      8m 56s
    5. Using relative positioning
      4m 8s
    6. Using absolute positioning
      7m 18s
    7. Creating structure with div tags
      12m 7s
    8. Styling basic structure
      10m 34s
    9. Creating a two-column layout
      10m 37s
    10. Using Live View and CSS Inspect
      7m 51s
    11. Using Browser Lab
      9m 39s
  12. 56m 22s
    1. Reviewing table structure
      7m 41s
    2. Importing tabular data
      5m 13s
    3. Creating accessible tables
      9m 56s
    4. Using thead and tbody tags
      4m 0s
    5. Basic table styling
      8m 45s
    6. Styling table headers
      7m 52s
    7. Styling column groups
      4m 22s
    8. Creating custom table borders
      5m 1s
    9. Styling table captions
      3m 32s
  13. 1h 43m
    1. How forms work
      3m 0s
    2. Reviewing form design
      3m 2s
    3. Creating accessible forms
      7m 33s
    4. Setting form properties
      4m 6s
    5. The fieldset and legend tags
      4m 32s
    6. Inserting text fields
      5m 58s
    7. Inserting list menu items
      5m 26s
    8. Inserting checkboxes
      7m 50s
    9. Inserting radio button groups
      6m 22s
    10. Inserting text areas
      4m 12s
    11. Inserting submit buttons
      3m 37s
    12. Basic form styling
      12m 0s
    13. Form element styling
      8m 52s
    14. Styling form layout
      11m 49s
    15. Adding form interactivity
      2m 47s
    16. Using Spry validation widgets
      12m 49s
  14. 1h 23m
    1. Planning for templates
      10m 51s
    2. Creating a new template
      10m 37s
    3. Using editable attributes
      13m 43s
    4. Creating optional regions
      6m 23s
    5. Creating new pages from a template
      9m 17s
    6. Applying templates to existing pages
      6m 9s
    7. Working with nested templates
      7m 56s
    8. Working with repeating regions
      12m 58s
    9. Modifying templates
      5m 41s
  15. 40m 14s
    1. Behaviors overview
      3m 47s
    2. Hiding and showing elements
      9m 18s
    3. Spry overview
      4m 4s
    4. Using Spry widgets
      11m 36s
    5. Adding Spry effects
      3m 6s
    6. Using the Widget Browser
      8m 23s
  16. 28m 18s
    1. Inserting Flash files
      5m 4s
    2. Setting properties for Flash
      6m 27s
    3. Dreamweaver and Flash integration
      6m 6s
    4. Encoding Flash video
      6m 10s
    5. Adding Flash video
      4m 31s
  17. 45m 28s
    1. Running site-wide reports
      6m 33s
    2. Checking for broken links
      5m 41s
    3. Checking for browser compatibility
      8m 3s
    4. Adding remote servers
      8m 0s
    5. Uploading files
      7m 20s
    6. Managing remote sites
      9m 51s
  18. 34s
    1. Goodbye
      34s

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...
Dreamweaver CS5 Essential Training
15h 22m Beginner Apr 30, 2010

Viewers: in countries Watching now:

In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.

Topics include:
  • Defining and structuring a new site
  • Creating new web documents from scratch or from templates
  • Adding and formatting text
  • Understanding style sheet basics
  • Placing and styling images
  • Creating links to internal pages and external web sites
  • Controlling page layout with CSS
  • Building and styling forms
  • Reusing web content with templates
  • Adding interactivity
  • Working with Flash and video
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Writing targeted styles

In our previous movie, we wrote our site's global styles. Global styles give you the baseline styling for your site, and provide the foundation for the remainder of your site's styles to be built off of. In this movie, we are going to tackle the next step in styling your site's typography, writing targeted styles for specific regions of the page. Now very rarely will you want all paragraphs in the headings, sidebars, footers and main content regions to look the same. To accomplish this, we're going to use descendant selectors to target specific elements within page regions.

It will help first to review the structure of our site and talk about how this is going to allow us to style each area separately, so I am going to do that now. I have our resources.htm file opened, and this is found in the 07_11 folder. So if I go over to Code View, we can see that inside of our wrapper we have a header. So we have our header region, then we have a region called mainNav. After the mainNav region, we have a region called mainContent.

Inside mainContent, we have another div tag called mainArticle. After our mainContent region is finished, we have another div with an id of sidebar. So we have a sidebar region, and finally, we have a region with the id of footer. So if we are looking at that in Design view, we have the header. We have our mainContent, which is that region. We have our main navigation, which is that region. We have our sidebar, which is this region, and finally, we have our footer, which is that region.

So we have those distinct areas, and we can use those areas to target specific styling for the content inside of them. Now, in the last movie, I made you hand-code. I'm sorry, but I hope you enjoyed it and notice that it really isn't that hard. Trust me. If you're really adverse to code, forcing yourself to do that a few times would really make you feel like, it's really not that bad, but I am going to let you off easy this time. We are going to go back to the CSS Styles panel, and we are going to use that to make the majority of our changes. Okay, so let's just go down through our page in order, and start targeting those areas that are global styles that didn't fully style.

The first thing I want to turn my attention to is, right up at the top of the page, Resources. Now, this is a heading1 that has an ID of page ID. Every single page in our site has this. We have a little heading at the very top that identifies which page that is. This is especially helpful when we have something like Resources, where there are multiple files in the resources section. It really helps to identify that this is indeed that section of the site. Okay, so what I am going to do now is I am going to write a selector that targets this.

So I am going to go over to the CSS Styles panel. Again, I am going to collapse the Files panel, just to make this a little bit easier for me, and I am going to use the CSS Styles panel to help me focus exactly where I want this to be placed, okay? So what I'm going to do is I am going to come right over here and find this #mainConten h1 tagline rule. I am going to click that to highlight it. Now why am I doing that? Because now when I create a new rule, the new rule is going to go directly underneath that one, so it's a really easy way of making sure that your styles remain organized as you create new ones.

Okay, I am going to create a New CSS Rule, and here I want to create the mainContent space pageID. Now that came up automatically. How in the world did Dreamweaver know to do that? Well, remember, I was clicked inside that heading, when I chose New CSS Rule. Dreamweaver is going to try to write a selector for you that targets that region. Now it doesn't always get it right. So what I'm going to do is I am going to place my cursor in front of the #pageID, and I'm going to type in h1. So now what I'm doing is I am saying hey, any heading one with an ID or pageID - and notice there is no space between h1 pageID - that's found within mainContent, I want to affect.

Now here you need to make sure that there is a space between the h1 and mainContent. So if you don't have a space there, make sure there is one there. Okay. I am going to click OK. Now one of the first things I could do here is set the color for this, but remember, we wrote our global styles where all heading once have that sort of deep teal color. That's the color I want, so I don't need to set it again here. Now for Font-size I am going to choose 1.4em, so I am going to change that. Now I want my Font-weight to remain Bold, so I am going to be very explicit about that, and then I am going to go and set some Box model properties.

So I am going to go to my Box category. For Margin Top, I am going to do 20 pixels. Now you'll notice here I'm not doing ems. I am doing pixels. That's because I want to make sure it stays exactly that far away from the top edge of the page. Ems would change if somebody changed the Font Size, whereas 20 pixels will always remain the same. And for Padding, I am going to turn off Same for all. For Bottom, I am going to type in .25 em. There we go. Now one last little thing here; I want a border underneath it to act as sort of a rule between it and the content below it.

So I am going to go to my Border category, deselect Same for all, and then we are going to do a Bottom border. I am going to do a Solid border, 2 pixels, and for Color, I am going to do the same color, #193742. If I hit Tab, I can make sure it's that teal color that I am looking for. It is. Then I am going to click OK. So just like that, my header up top styles itself exactly the way we want, and again, we use the region and the ID that has to target that specific element. Now I am going to scroll down a little bit because I want to style this list that we have down here.

It doesn't look like a list right now, but if I click inside of it, I can indeed see that it is inside of the UL tag, and each of these guys are inside list item tags. Remember, in our global styles we did a reset that told all unordered lists and list items to have no margins and no padding. So it pretty much just made it look like not a list. All right. so let's go ahead and make it look more like a list. I am going to go ahead and scroll down a little bit more in my styles, and find this mainArticle ul selector, right there. I am going to select that because I want my next rule to go just below that.

So I am going to choose a New CSS Rule, and my Compound Selector is coming up pretty much the way that I want, except for a couple of things here. Number one: I don't need this #wrapper at the beginning. So I am just going to choose less specific, and it will get rid of that. Even though it's not hurting anything, I don't really need the ul there either, so I am going to get rid of the ul, but I am going to be very careful to make sure there's still some spacing between mainArticle and li. To be honest with you, once you get use to writing these descendant selectors, it's easier, a lot of times, just to write them yourself rather than trying to go through this sometimes complex dialog box that Dreamweaver has.

So I am going to go ahead and click OK, and here I am going to switch immediately to my Box category because Margins and Paddings are what we are going to use here to control this. So for Margins, I am going to choose deselect Same for all. My Top margin is going to be zero. My Right margin is going to be zero. My Bottom margin, on the other hand, that's going to be 1.2ems, and then finally, the Left margin is going to be 2.4ems, and that's going to push it away from the edge of the parent container by a good amount there. I am going to go back to my Type category, and in my Type category, I am going to change Font size to 1em, and then for Color I am going to go ahead and choose #51341a; and that's that sort of brown color that we were using elsewhere in the site.

So I am going to go ahead and click OK, and now our list is looking a little bit more like a list. Now you might notice that we don't have any bullet points. Now that's okay. We are going to go in and set those bullet points as graphics a little bit later on. Okay, so that's our mainContent region. Let's turn our attention to our sidebar, which right now is not looking that good. So we need to go ahead and fix that. I am going to scroll down through my styles, and eventually I am going to find one of the sidebar styles right there. Well, I am actually going to click on the mainContent rule just above it, because I am going to write a very generic sidebar rule, and I want that to be the first of all my sidebar rules.

So again, I am just going to highlight that and then click the Plus symbol, and now this time I could just do an ID selector really, because I am just going to do #sidebar. Make sure it's defining in main.css. I'll go ahead and click OK. Now here we are going to write really what amounts to a global style. Everything in our sidebar should be a little smaller than the rest of our content, just by the very nature of the sidebar being so narrow. So for my sidebar's Font-size, I am going to type in 90%. That's going to shrink down any text inside of the sidebar to 90% of what it would've been originally.

It's just going to make the text in the sidebar a little bit smaller. When I click OK, you can see exactly what I am talking about. It took all your headlines, all your paragraphs, shrunk them down just a little bit. That also means that if I now say 1em for one of those, they're actually going to be 1em of 90% of what the body tag would be. So those values are cumulative as you go down the order, and that's something you really need to remember. Okay. Let's target some of those specific areas. So once again, with that rule selected, I am going to choose New CSS Rule. I am going to do a Compound Selector and remember when I said it was just easier to type these yourself sometimes? This is one of those times.

I am going to type in #sidebar space p. So #sidebar p, so any paragraph inside of a sidebar. Click OK. And for that, we just need a Line-height. I am going to do a Line-height of 1.2, make sure I am doing multiples there, and that just means a smaller Line-height than the remainder of our page. I'll go ahead and click that, and it does tend to move things up a little bit, although we've got so much going on there right now you can't really see that change. Okay, now, I want to affect these specials. Notice that this is still rather crowded in here.

So what I am going to do is I am going to use the fact that this is a div tag within ID of specials inside sidebar. I am going to write a rule that targets that element specifically, and targets the h2 inside of it first. So again, I am going to come right over to my CSS Styles panel, click on New CSS Rule, and I am going to type in #sidebar #specials h2. So #sidebar #specials h2. Now remember, this is targeting any heading two found inside of an element with an ID of specials, found inside of an element with an ID of sidebar.

So please don't get overwhelmed with these really long selectors. All they really are is saying, "Hey, when you find this, inside of this, go ahead and style it that way." We make those increasingly more specific so that they don't really work or overwrite any of the other styles we have on our page. I am going to go ahead and click OK, and now we have got a little bit of work ahead of us here. Our Font-size is going to be 1em, so we have got that. Our Font-family is going to be Arial, Helvtica, sans-serif. Our Font-weight is going to be bold. It's going to ensure that that heading is bold, no matter what else is going on around it.

For Color, I am going to go ahead and click inside that dialog box, so I am going to type in #193742. Remember, that's that teal color we have been using. And again, if you ever want to see what this is doing, just click Apply, and you can see all of our headings right there changing. Now there are a couple of things we still need to do here. I am going to click on the Block category, and for Text-align, I am going to choose Right. I am also going to click on my Box properties, and I am going to deselect Same for all for Margin. For my Bottom margin, I am going to type in 0. I am also going to click off Padding Same for all, and for Padding Top, I am going to type in 1em, so 1em for Padding on the top.

Now why did I do a little bit of Top padding? Because we are going to do a border that's going to separate all of those elements. So I am going to go to my Border category, deselect Same for all, and for Border Top, we're going to do Solid, 1 pixel, and we're going to do that same color, #193742. I am going to go ahead and click OK, and now you can see exactly what's going on there. That border up top is acting as a nice separator between those guys, and the text is aligned. Now we have got a little bit of work to do, and you might say to yourself, "You know what? "I don't like that top one having that line.

I would rather have my monthly specials and not have that separator between them." Well, if you click inside that heading, you can see that there is actually a class already applied to it called Top, and that's going to allow us to tell that one, "Hey, by the way, top one, you shouldn't have a border." So let's go ahead and write that selector while we are at it. So I am going to go right over to my CSS styles > New CSS Rule, and here we are just going to select Compound Selector, type in #sidebar #specials h2.top.

And I am going to click OK, go down to Border, and I am just going to tell Border, None, and that's all we really need to do. I am going to go ahead and click OK, and you can see that border is going to go away for the top one, but still gives us a nice separator between the bottom two there, so that's cool. Now believe it or not, I know this thing still looks kind of messy, but we really only have two more selectors to write. So let's go ahead and write those selectors for us. I am going to go ahead and choose New CSS Rule, and I want to target the paragraphs within that particular element, so I am going to type in #sidebar #specials p. So #sidebar #specials p, so any paragraph inside of a div tag with an ID of specials, inside of the other div tag with an ID of sidebar.

I am going to go ahead and click OK, and this one is going to be fairly easy. The Font-style is going to be italic. The Text-align is going to be right. So I am going to go over to my Block category, and for Text-align I am going to choose Right. I am going to go down to my Box category and deselect Same for all for Margin. Now for Top margin, I am going to type in .5ems, and for Bottom margin, I am going to type in .5ems. I am going to leave the Right and the Left alone, because I really don't want them to have one. So I could type in zero, or I could just kind of leave them alone like I am doing. One more thing, let's go back to our Type category and let's set a Line-height for that.

I am going to set the Line-height at 1.6. That's going to control the amount of space between one paragraph and the next. Remember, for Line-height, we are going to be using multiples, so now when I click OK, I get the spacing I want between those guys, and I get the alignment that I want. They're italicized. They're looking exactly the way I want them to do. Now the last thing I need to do right here is our Monthly Specials. That headline along with Did You Know headline really don't fit those regions. So right now they are getting all their styling information from the global h1, so we need to overwrite that.

So we notice, by the way, that they're in a div tag with the class of callOut. Because callOuts can be used within our mainContent and within our sidebar, I want to write a selector that really isn't specific to the sidebar, and having that class callOut is going to allow me to do that. I am going to go to my CSS Styles and scroll up, and go all the way up and find this callOut Selector. Now that's controlling the div tag itself, but I want to target the headings inside of it. So with that selected, I am going to choose New CSS Rule, and I am going to do a Compound Selector, and I am going to do .callOut.

So callOut with a capital O, space, h1. So again, that's going to target any h1 inside of an element with the class name callOut. I am going to go ahead and click OK, and then just make a few minor changes here. The Font-size is going to be 1.2em, so we are going to make it little bit smaller. Color for that we can leave unchanged, because that teal color is going to work out just fine for us. Let's go ahead and put a border on the bottom of it, so deselect Same for all. We are going to do Bottom Border, Solid, 1 pixel and the Color for that's going to be the same teal color, so #193742.

So after a while you do kind of get them memorized. And you know what? Let's make that a little bit thicker, how about 2 pixels? That will offset it a little bit from that line underneath it. So feel free to make changes as you're doing this. You are like, what if we did this, or what if we used something other than a solid line? What if I used a double line? Yeah, feel free to go ahead and do that, kind of experiment with it, and see if you get something that you like a little bit better. Now I am going to go to the Box category, and here I am going to deselect Same for all for both Margin and Padding. For my Margin Bottom, I am going to type in .5ems. That's going to add a little bit of space below it, but for my Padding on the bottom, I am going to do .25ems, and that's going to push the border away from the text a little bit.

I am going to go ahead and apply that, click OK, and there are our headlines. Cool! So I am going to save the file. We have done a lot of work here, preview that in my browser, and now we see the result of our global styles and our targeted styles coming together to format that page the way that we wanted it to be formatted. Cool! Now writing our global styles first, and then focusing on specific areas, that's a really good practice, and it's one that's going to ensure that you are styling is consistent throughout your site.

It also means that when you're writing styles for specific areas, you don't need to define the same properties over and over and over again. If all headings are going to be Arial, for example, you don't need to define the Font Family property in every heading style, just the global one. Even better, your typography is now much easier to update and maintain, because most of your edits will be made to the global styles, not the area specific styles, which can be harder to locate and more numerous. Now in the end, each designer develops a strategy that fits their site and their workflow the best.

As you develop your own styles, pay attention to the techniques that can save you time, create smaller code, and still give you the power and flexibility that you require for your design.

Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.


Expand all | Collapse all
Please wait...
Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7.  The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?
A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements.  Following the steps above should solve the problem.
Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.
A: In the example, there is a paragraph that wraps an <img> tag and the word "More," which is surrounded by an anchor tag (<a>). The author uses CSS to make sure the parent div tag of the thumbs floats to the left, and is only wide enough for the image. This causes the link text to break down onto another line. Then, the instructor uses CSS to align the link text to the right of the <img>. The link itself is a void JavaScript function, ( javascript();). This gives you a "dummy" link without returning you to the top of the page as the "#" dummy link tends to do.
If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.
Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?
A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.
CSS should always be used for presentation, not HTML.
Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?
A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.
Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?
A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.
Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.
A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.

However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.

HTML5 Doctor also has a nice article on the figure and figcaption elements at http://html5doctor.com/the-figure-figcaption-elements/.
Share a link to this course
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.

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 Dreamweaver CS5 Essential Training.

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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