Viewers: in countries Watching now:
Join Joseph Lowery in Site Navigation with CSS in Dreamweaver as he explores current design trends in site navigation and shows designers and developers how to create robust CSS-based navigation. The course shows how to convert HTML lists to graphical controls that integrate seamlessly with an existing site design, and how to build menus with a wide range of navigation options, all in standards-compliant CSS. Exercise files accompany the course.
HTML5 is coming fast down the pike and bringing with it a boatload of changes, including a tag specifically intended for navigation. The nav tag is one of a group of what are known as semantic tags. Semantic tags are intended to more clearly convey what the markup holds. And in the case of the nav tag, that's primary as well as a secondary and other navigation. Let's take a look at an example. We've used this page in several movies in the course, including Chapter 5 on vertical navigation. So let me go over to Source Code, and here you see right near the top, a nav tag with an id of mainNav.
Now notice this is not a div tag with an id of mainNav; it's actually a nav tag. And if I happen to remove it temporarily, and then type it back in, you'll notice that after I type a couple of the letters just 'na', Dreamweaver's code hints come up. So we have code hint support in Dreamweaver CS5. And I can add in the id = mainNav, and that's really all there is to it. There are no additional syntax to learn for the nav tag. But if you decide to work with HTML5 tags like nav now, there are a few things you should know.
First, you need to declare a proper DOCTYPEm such as !DOCTYPE HTML. This is the DOCTYPE that's being recommended currently by the WC3 for HTML5, and web designers all around the world are applauding its simplicity. Now that you made sure that your pages are forward compatible, you need to make sure that they are also compatible with older browsers. Most browsers will basically ignore the strangeness of any tags they don't know and render them according to whatever CSS rules are applied. However, because they don't assign any basic properties, there's one that you have to do yourself, the display property.
If you don't include a CSS rule that specifies a display property and value for the nav and other HTML5 semantic tags, most of the current crop of browsers--and all of the old ones--will just assume it's an inline tag, which would be disastrous for your pretty distinct nav bar. Therefore, you have to create a rule like this one, in the main.css file, found on line 67. Notice what we have here are most of the semantic tags that are used in HTML5, including the nav tag.
And they're all set to one property, display:block. Now I was careful to say that most browsers will ignore unknown tags. That's not the case with Internet Explorer browsers before version 9. They will all totally block if they encounter an unknown tag. To get around this problem, you need to include a conditional comment that targets all IE browsers before 9. Like the one that we have in the source code here, right before the end of the head tag, this conditional comment looks for versions less than IE9, and if the browser being used by the site visitor is one of those, a certain script is included.
There are currently no FAQs about Site Navigation with 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.