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.
The simplest form of CSS navigation is to take an unordered list of words or phrases and convert it to clickable buttons. To make it easier for site visitors to understand and remember navigation elements, many designers are integrating small images, or icons, into their nav bars. Let me show you a few examples. Here is the Narwhal Company, and as you can see in their navigation up top, they have very simple icons hand-drawn which light up and highlight when you roll over them.
And if we go to a specific one, like Passport here, the icon stays lit up in that color, showing the selected page. Another one is from custom TORONTO, and here's some side navigation. Very clean, informative icons showing the various categories. When you roll over it, a highlight outlines the icons as well as the text and shows the flyout menu in a bright purple color. If you go to a specific page, you can see that they've reversed that concept to show the current page.
Another approach can be seen on the Carsonified site. Carsonified is a design firm, and as we roll over the various categories up top, you can see the navigation icons appear, symbolizing each project. And let's take a look at the very first one here, Values. And again, they're choosing to reverse the colors but keep the icon showing, very clearly designating that this is the current page. Finally, here's a template from a company called Bogawat.
And they have kind of a different approach to this. Rather than always having the text visible and then showing the icons on roll-over, they do the reverse. So they have icons and you can go to a certain page and click on it and then you see the text. They also are using tooltips, as you can see, using the title tag, so that you don't have to click on it in order to see what it is. All of these icon navigation techniques are very straightforward to implement and rely on the background image technique covered later in this course.
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.