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.
As noted throughout this course, if you're going to create CSS-based menus--and you should be--you'll need to start with unordered lists. This initial step is pretty straightforward. So here I have opened the mission.htm file from the Chapter 5 exercise files 05_02 subfolder. And I want to show you, if I go to Split view, I do have a nav tag--this is an HTML5 page, by the way--with the id of mainNav. And my cursor is right there in the middle of it, and that's where our unordered list is going to go.
Since it's just a plain unordered list, let's drop out of Live view, and I'll bring up my Style Rendering toolbar and toggle off the CSS Styles. And now I can go ahead and to start my bulleted list pretty quickly by clicking in the Unordered List icon in the Property Inspector. And let's enter that first name, which is Tours. And if I click over in Design view, you can see that that's been put in as an unordered list. And even better, now that I am in Design view, I can just hit Return and it'll create another list item so I don't have to do that code myself, and type in Mission, Contact, Resources, and Explorers. How easy is that! So now the next step is to convert all of the list items into links.
We'll do that just by double-clicking to select it, and then going in to the Property Inspector Link field and adding in tours.htm. Mission we'll make, of course, mission.htm, contract.htm, resources.htm, and finally, explorers.htm.
We'll hold off putting in the subnav for now as it makes creating the initial menu more difficult. And now we're ready to start adding some CSS into the mix.
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.