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.
Rather then use symbols or icons to make their navigation buttons more meaningful, some designers take a more direct approach and say 'more is more'. Here's a number of web sites that incorporate an explanatory line of text to make their intentions crystal clear. Let's start by taking a look at one of the more extreme examples in the category from Raka Creative. As you can see, each of their navigation items here goes into great detail, whether it's elaborating on what they're thinking under Studio, or really listing out their services, or their client list under Work, and then even giving specific directions under Contact.
The entire navigation takes up a good fifth of the page, which is pretty extreme. Now they do not carry this approach over to other areas of their site, such as the Studio area. You can see that the navigation then breaks down into subitems and then resorts to icons showing the Services, Work, and Contact areas. Here's a more basic take on the concept where a single line of additional text helps to flesh out the keyword heading. This same technique is applied a little bit more elaborately to the link for the sites blog.
In this case, this navigation explanation is visible throughout the entire site. At first glance, this site, Corporate Risk Watch, uses a similar additional single line approach, but watch what happens when you roll over any of the nav items. Here the navigation literally takes over the page, forcing you to take what they've written seriously. While the approach may be too much for some, it definitely gets the message across. Each of these sites are looking for a way to reach their audiences quickly and effectively, definitely another strategy to keep on your designers palette.
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.