Join James Williamson for an in-depth discussion in this video Lab: Structuring navigation, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
Welcome to your first lab.…In our labs you get to put what you've learned in each chapter to the test.…I'll give you your overall goals for the project, but it's really up to you to decide exactly…how you should solve the problems that I give you.…After you're done working on your lab, be sure to check the solutions movie that follows…this one to compare your solutions to mine.…Well, in our first lab, we're going to be working on the index.htm file.…Well, you can find this in the 01_05 folder.…Now this page isn't going to look like this, but I want you to see what we're working on,…we're going to be building throughout all of our chapters, the site navigation for the Roux Academy website.…
So this is what the finished site is more or less going to look like.…There's going to be some additional stuff going on, on our site, but this is pretty much…what we're going to playing around with.…We've got a couple of different regions here that we're going to be working with, we have…a footer in the bottom, we have a fairly simple navigation menu up top, some of the pages…
- Organizing menus with lists
- Creating block-level links
- Styling links, link states, and image links
- Defining link dimensions
- Controlling link spacing in a menu
- Creating rollovers
- Clearing floats
- Indicating current pages
- Controlling cursor states
- Building dropdown menus
- Creating CSS-only buttons
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.