Lynda.COM Site Navigation with CSS in Dreamweaver

Author:
Joseph Lowery

Duration:
03h 24m

Released on:
3/22/2011

Exercise files:
Yes


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.
Topics include:

    Using icons
    Navigating with Spry widgets
    Styling Spry menus
    Working with background images
    Implementing sprites
    Designing navigation with accessibility in mind
    Adding drop-down menus
    Developing graphical navigation with jQuery
    Creating pop-out vertical navigation
    Exploring CSS3 and HTML5 enhancements




Introduction
Welcome           01m 02s
Using the exercise files           01m 18s

1. Trends in Navigation Design
Using icons in navigation           02m 14s
Understanding 3D nav bars           02m 25s
Understanding explanatory navigation           01m 51s
Creating animated navigation           02m 56s

2. Spry Navigation
Inserting Spry horizontal menus           07m 04s
Styling Spry menus           06m 29s
Adding Spry vertical menus           05m 07s
Styling Spry vertical menus           10m 53s
Using Spry tabbed navigation           09m 33s
Styling Spry tabbed menus           09m 55s
Including Spry accordion panel menus           05m 32s
Styling Spry accordion menus           11m 10s
Advanced Spry menu techniques           08m 32s

3. Navigation Techniques
Converting lists to menus           07m 56s
Working with background images           05m 47s
Implementing sprites           05m 53s
Setting up adjustable backgrounds           09m 04s
Designing accessible navigation           07m 05s

4. Horizontal Navigation
Looking at the project           01m 04s
Building up the basic HTML           02m 09s
Displaying top-level links horizontally           08m 12s
Customizing the link states           04m 29s
Adding drop-down menus (HTML)           03m 48s
Working with submenus (CSS)           04m 08s
Achieving interactive submenus           02m 21s
Marking the current page           04m 23s

5. Vertical Navigation
Looking at the project           00m 57s
Understanding vertical menus           02m 15s
Defining width for link elements           04m 43s
Using background graphics with navigation           05m 45s
Creating pop-out vertical navigation           06m 29s
Setting link states           03m 04s

6. Internal and External Navigation
Identifying anchor tags           07m 04s
Identifying external links           03m 09s

7. Cutting-Edge Navigation
Creating jQuery animated image menus           07m 45s
Using the HTML5 nav tag           03m 24s
Exploring CSS3 enhancements           07m 05s

8. Conclusion
Next steps           00m 28s