Join James Williamson for an in-depth discussion in this video Adding meaning with ID and class attributes, part of Dreamweaver CS4 with CSS Essential Training.
Although XHTML has many meaningful tags, it doesn't have enough to convey all of the meaning we are trying to convey in our code. The one advantage about XML, for example, is that if I need a tag to describe my trips, I can just make one. In XHTML we have a fixed set of meaningful tags to work from. There is no Header, Footer, or Photo Gallery tags even if I have those elements on my page. To pass along additional meaning we can use the class and ID attributes to provide more information about specific content. While similar in functionality, ID and classes have different rules about when and how they can be used.
IDs can only be used once per page, and are usually used to define unique areas of content. Although any element can have an ID attribute, they are most commonly used to give additional meaning to the generic div tag. Classes can be used as often as desired on a page and are generally used to identify information that could repeat on the page but aren't tied to any specific element type. In this exercise, we'll take our previously structured file and add additional meaning to it by using IDs and classes. We'll see how Dreamweaver makes this very easy to do, even if we didn't add these attributes originally.
So I'm working on a structure file and we've got the div structure that we assigned in the last exercise, but now we need to give these guys a little bit more meaning. Now, there are a couple of different ways that you can IDs and let's take a look at some of those. So what I'm going to do is I'm going to click inside the first element, 'I am the page's main heading.' If I notice down on the tag selector I can click on the div tag and it selects that. In the Properties Inspector now I get a section right here, where I can assign an ID for that div. Now if I have an attached style sheet I could go ahead and grab that from the pulldown menu, but of course I don't.
So I'm just going to type in header and hit Return. Now take a look at the tag selector right down here. Do you see where it says div#header? So anytime you see that pound symbol, that's an ID of that particular element. If you would look in Code View, and I'm just going to switch over to Split Screen View, you can see that it says div id="header". So Dreamweaver just went ahead and added that for us. Now if you are the type of person that really likes to hand-code a little bit more than you like using the Properties Inspector. Let me show you a couple of different ways that you can approach adding IDs.
One of the things I can do, I'm going to go ahead and click in the div below our main div and I'll use the tag selector to select that div tag, is there's something that we call the Quick Tag Editor. I'm a big fan of this. If you select an element and use the Command or Ctrl+T keyboard shortcut, that's going to bring up a Quick Tag Editor that lets you edit and hand code here in Design View. So notice that brings up my div tag and I can simply type in id. Hit Return and it will finish the equals and the quotation marks. And in this case, we are going to type in content.
So now we have applied that ID. If I switch over to Code View, you can see where that says div id="content". Now if you really like to hand code, you can simply do just that. I can click on line 18 in another div tag that I have here, and this one is my Sidebar, and here I can just type in id="sidebar". Whenever you are doing code hinting, if you already had some CSS styles attached that had id selectors in it, you'd be able to choose those from a list. Since we don't have any of those, we have to manually type those in. So I'm going to go back to Design View and I'm going to finish up assigning IDs by assigning the Footer ID.
And you can use your favorite way of doing this. I really do, if I'm in Design View, love to use the Property Inspector because it's just so easy to click inside there and type in the word footer and hit Return. Now a little information about naming convections for IDs, you don't want any spaces, you don't want to begin it with a number and try to avoid using punctuation. Other than that you can use pretty much anything that you want to do. Okay, now the next thing we need to do, we are done assigning all of our IDs, so these structural div elements now pass along a little bit more meaning about the content inside of them. This is our Header region, this is our Content region, this is our Sidebar region.
And all these different user agents that might consume your content will at least know that much about this area. Later on when we start working with CSS, we can use that information to style that area and do layout as well. So we get a lot of benefit from using IDs and classes. Now speaking of classes, that's what we have to do next. What we want to do is we want to make sure that the word independent sort of stands out and is identified everywhere it appears in the content. You can see as a matter of fact this line is telling us to do just that. The word independent needs to be identified everywhere appears in my content; something I can't currently do even though I can emphasize in text or make it stand out from the text around it.
Now what does that mean? Well, if I click inside the emphasized word, I can see that it's using an em tag just around the text. If I click-in stand out, I see that it's using strong. These two tags are now used instead of the bold and italics tag. The em tag stands for emphasized text. The strong tag stands for strongly emphasized text. So although they do help us convey a little bit of meaning, they don't actually identify the content inside of it. So I'm going to go in and highlight the word independent where it's found within that sentence. Now in this case if I do the Quick Tag Editor, remember it's a Ctrl or Command+T, since this isn't one specific element selected, it says oh, you want to wrap this with a tag.
One of the best ways of identifying content is to use the generic inline level tag, the span tag. The way that the div tag gives us a generic block level element, the span tag gives us a generic inline level element. So I'm just going to use Code Hinting to find the span tag, and then I'm going to pass along a class attribute. So right through span, I'm going to hit Space and type in class. And then the class we are going to give this is independent and hit Return. Now I need to do that everywhere this is found. I could use Find and Replace to do that and that would be pretty easy.
But we really don't have that many, so I'm just going to go ahead and highlight that word wherever I find it and I'm going to do pretty much the same thing. Command or Ctrl+T, span class="independent". And I notice I have one more area that has independent so I'm going to highlight that one more time, Command or Ctrl+T, span class="independent". Code Hinting can really help us out with that. Now again if I look in Code View, I can see that that class has been applied now in multiple locations.
So we are using the class independent multiple times on the page but all the IDs we are using, we are only using it once. Now one more thing that passing along this additional meaning allows us to do code-wise is to sort of equalize our tags if you will. Let me switch back to Design View and explain this a little further. If I click inside 'I am the page's heading,' that's an h1 tag. And if I click inside 'I am main content heading,' that's an h2 tag. Well, it was done that way before because the page's main heading was more important than the main content heading, so the h1 was used and then the h2 was used.
Well, now that they are in separate regions I can pass along that meaning in other ways. This is the heading's main headline and this is the content's main headline. So I'm going to give these guys an equal standing now and click inside 'I'm the main content heading' and change that to an h1 tag. I do that by going down to the Properties Inspector and clicking on the HTML tab. I'm going to click inside that heading and then using the Format pulldown menu I'm going to choose an h1. Now it's exactly the same size, but again, we don't worry about presentation right now. We can control that through CSS.
At the moment we now have a main headline inside the heading, we also have a main headline inside the content. Which one we make more important is going to be up to us. So our content now has meaningful structure that allows any user agent accessing the code to interpret the code and display it based on the structure. The important point now is that we use this structure consistently across our entire site. This isn't to say that every page in our site has to be structured exactly the same way. We just need to follow the rules that we have established site-wide. Not only does this keep your code structure consistent, it makes writing the eventual CSS much easier.
Now that we've covered structuring our XHTML properly, we need to examine how to control the presentation of that code with CSS.
- Understanding XHTML and CSS fundamentals
- Understanding and implementing advances in typography
- Using the Code Navigator for faster CSS edits
- Styling form elements while maintaining accessibility
- Customizing the look and functionality of Spry widgets through CSS
- Controlling layout and positioning through styles
- Controlling CSS with the Properties Inspector
Skill Level Intermediate
Q: Is it possible to use CSS to create drop shadow effects over patterns and other backgrounds that aren't 100% white?
A: Try using the CSS3 drop shadow property, or use transparent PNGs as background images. A useful technique is detailed here: http://dev.opera.com/articles/view/css3-border-background-boxshadow/
The technique covered in the "CSS drop shadows" movie in the Dreamweaver CS4 with CSS Essential Training course will work if the drop-shadow file is prepared with a transparent background and saved as a 24 bit PNG file.
Q: While attempting to share assets between layers of a Fireworks file, as instructed in the Chapter 3 tutorial “Page creation and asset sharing,” an error message reads "Master page layers are not editable from other pages. Shared layers cannot be made a sub layer.”
A: This problem often occurs when attempting to edit or move a layer that is set as a master page layer. To avoid this error, switch to the master page and note the shared layers. Any editing to those layers must be done while on the master page.
Q: Is it possible to build a page using Dreamweaver CS4 Starter Pages, then use the CSS code in a site that was written using Visual Studio? In Chapter 2, the author states that the CSS must be embedded within Dreamweaver. Does that mean a Starter Page cannot be used withing a site built with another tool?
A: When the author states, "the CSS must be placed inside the page," he is referring to the creation of custom Starter Pages, in addition to the ones already included in Dreamweaver. Once the Starter Page is created, CSS can be placed as embedded styles or in an external style sheet, so it is possible to use Starter Pages with Visual Studio or another web design tool.
Q: In the "Preparing custom starter pages" video, the author’s screen shows the CSS Styles panel with listings displayed in an outline mode, connected by vertical lines. How can I get my CSS Styles panel to display this way? I am using a Mac, while the author uses a Windows machine. Is this a case where the difference is based on the specific operating system?
A: That is indeed one of the (minor) interface differences between the Mac and the PC. In the Mac version of Dreamweaver, the All view of the CSS Styles panel shows top-level CSS files or style tags with a small triangle beside them. They can still be explored or minimized by clicking on them to toggle them. They still show an "outline" view, just without the connecting lines. The functionality is not affected in any way.