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.
You'll notice that the colors are different. On pages that are not the current one we have a nice blue, but on the existing page like the homepage here, there is a really bright yellow. This different image that we're seeing is actually a different part of a sprite that's faded in for the current page. This same technique is applied in a subtler way to their logo over in the upper-left. This next example, you're going to have to take your eyes off the kind of compelling Flash animation up top to you go and look at the navigation that we see down below here.
Now the current page is indicated by a light blue bar that's hovering above it, but as I move from item to item the blue bar slides along following me, and if I move my mouse off the navigation, it goes back to the current page, and then when I move to another page it slides all the way over very quickly to that, and actually even have a little bit of a bounce to it as well. Finally, here is the example of animated graphics without a surrounding site, done by designers Aloha Tech Support.
This combines big images with very smooth sliding reveals. So if I move over abstract here, urban, which was previously the currently viewed image, shows up, and then as I move along, each image is revealed in turn. And when I move off the menus, they all slide back to their original position. There's a real nice sense of movement here. As you move more quickly, you can see some of the nice shifting that goes on that gives a really solid feel to this menu.
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.