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.
In another video, "Advanced Spry Menu Techniques", I'll show you how to work with the 2.0 version. So I will start with the index.html file open from the Chapter 2 exercise files. As you can see, there is no navigation currently here. Let's go into Split view, and you can see I have my div already set up with an ID for nav bar where I want that navigation to go. So let's go over to the Insert panel and from the Category list choose Spry and then scroll down until you see Spry Menu Bar and click that.
Dreamweaver will ask you if you'd like a horizontal or vertical menu. In this case we want horizontal, so with that selected I'll choose OK, and the sample menu is put in. Let me pull back the Insert bar, so you could take a look at it over here in Live view. And as you can see it's a little vanilla looking, but very workable. When I scroll over it, I get subitems. If I move to a menu item that does not have subitems, the menu item itself just highlights and nothing drops down.
You can also have multiple levels of subitems. So if I go over Item 3.1 here, you can see that there are sub-subitems. Now the great thing about the Spry menu bar is as I said, it's totally integrated into Dreamweaver. I am going to drop out of Live view and just go into Design view, so you can see some of the integration. If I go ahead and open up the Properties Inspector, when I have my Spry Menu Bar tab selected, I get a special Property Inspector here and this makes it really easy to work with the Spry menu bar.
Each of the items that we see here can be selected, and when they're selected, if there is any subitems, they show up here, and if there is any sub- subitems, they show up in this third column. In each circumstance, when you have an item selected, the text label of that item shows up, which you can easily modify here, and you can also change the link, give it a title, even specify a target. Now the first thing we are going to do is save this page and when you do save it, Dreamweaver displays the Copy Dependent Files dialog box that shows that there are a number of files which are being inserted into your site and they're all being put into the SpryAssets folder.
You can either do it right from Design view by selecting the label here and changing that Item 1 to Home, and I'll do Item 2 here as About and Item 3 as Process. Now you can also, if I select the Menu Bar tab, accomplish the same thing through the Property Inspector. So if I choose Item 4 and Item 4 I am going to make Contact--I will change the text of it here--and there you see that the label was changed, and of course you can also always do it in Code view.
Now, you can just as easily change the subitems. Now my first item here, Home, doesn't really have any subitems, so I am going to go ahead and remove each of those by going to the Property Inspector and highlighting the item you want to remove and then clicking the Remove Menu Item button, or the Minus sign there. With every click, it removes another one, and there is a third one. Now, there are also subitems under Process, and we're going to go ahead and remove those right now.
So I'll remove the 3.3, 3.2, and notice that there you have Item 3.1. Watch what happens when I go to remove that one. Dreamweaver will display an alert, informing you that this will also remove all of the children items, and asking if that's okay. In this case it is. So now we do want to add some submenu items. In this case, I am going to add some to that same menu process. I could have just changed the name of them, but I wanted to show you the technique used for adding subitem menus.
So, I will go ahead and select the Spry Menu Bar tab and with Process selected, click on the Add menu Item in the second column, which will give me the submenu items, and it will first come in as an untitled item, and I am going to change that to 'Our Oil' and then press Tab. And let's add another one underneath that, and we'll change that to 'Company' and press Tab, and let's add a third item.
And instead of changing it through here, you can also go in and change it in Design view, so I am going to make this one 'The Land' and then just click outside of that to cement that. If you decide that this is not in the proper order--let's say that we want to put Company last here-- I'll go ahead and select the Spry menu bar again, choose Company, and press the Move Item Down widget, which will then shift it down. Now one of the more interesting things about this is we're of course building a navigation bar using an unordered list, and you can see over here in the code that I do have a list tag and each of the list items is shown.
But another way to see this is if you go to the Spry menu bar Property Inspector and choose Turn Styles Off. Now it's a little hard to see because of the way that the links are styled here, but each of these, as you can see from the bullets, is an unordered list or bulleted item. Let's go back and turn those styles back on. So go ahead and save your page again. You'll find that setting up a Spry horizontal menu is dead simple, and in the "Styling Spry Menus" video, I'll show you how to change the look and feel so that it will integrate into your site.
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.