Subtitles of the Movie

Continuing our efforts to add the various navigational elements to our project website we're now ready to add the Spry Menu. Let's go ahead and use the Set Magnification Tool down here at the base of the Dreamweaver interface to increase our view to 150 percent so we can see our workspace very clearly. Let's go ahead and open up your CSS Styles Panel and widen it out so we can see it. Most of the work here is going to involve modifying the CSS Style that comes with our Spry Menu to modify it to match the styling of our page. Click inside of the maroon menu DIV Tag there. Make sure the cursor's blinking inside and then choose from the Main Menu: Insert, Layout Objects, Spry Menu Bar. We're going to insert a Horizontal Menu Bar. Dreamweaver adds the required styling file as well as a JavaScript file for making it work. Notice that the coloring is all off so we're going to spend most of our time here modifying these styles. Starting off with the MenuBarHorizontal a, right here, notice that the colors are wrong. This one here should be red and I'm going to grab some of the color from this one. This color should be the blue color. There's another one here above this one, the a:hover focus, those colors are also off. Let's go ahead and change those to red and to blue, as well as this one: MenuBarHorizontal a. Let's change that to the red color. Now that gives us the right color. Let's also change the text lettering. Notice the text lettering now is too dark. Let's change the text lettering to a white color, like so. Actually that looks like it's an off-white, that gray color makes this look almost blue. Here in the Padding, change the Padding from .5em to .4 and .6, respectively and that will tighten up, notice, the menu so that it fits in my existing menu bar. Let's go ahead and do this in Live View, by the way and notice that that looks pretty good. You could adjust these colors. I think maybe the hover color is a little bit too light. Let's darken that up. Remember the hover color was, let's close this style, open up the Spry Menu Bar; the hover color was this one right here. I think that's a little bit too bright. Let's darken that up a little bit and notice that I can change it here and while I'm in Live View I can roll over and modify that menu so go ahead and adjust the colors to match your styling preferences. Next, let's go up here to MenuBarHorizontal list right here. Let's tighten up our width. That's a little bit too wide for my taste. Let's change that to 6 instead of 8 and notice that it tightens up the width of those buttons. Adjust that as needed. You may want to make the text bigger as well as this text bigger. I'm just making it as small as really possible to save space for content. Now one last thing you'll need to do is that the Z-Index of this Menu Bar needs to be higher than all the content so that the content doesn't cover the menu so we need to go back. Let's go back to Design View and this Z-Index, what is that, byline, should be set down so it's below the menu. Here it is right here, byline and the Z-Index is in the Positioning Category. It's a 9. We should probably set that back to a 3 or so. I believe your Spry Menu is at a 10 or a 9. Check that. Just make sure that this Z-Index is higher than anything else so that nothing covers that menu. Continue working with your styling, colors, sizes, widths, padding and all the rest of it. When you think you have something that looks acceptable be sure to Preview in the Browser. Notice that Dreamweaver will prompt you to save all of the related files, notably, this CSS file. I'll click OK. Without saving that it may not show you correctly in the browser. There's also submenus that you can change the coloring. It looks like nothing is covering the menu system. That looks good. And one last tip. Here in my project files folder notice that there's a new folder called SpryAssets with a capital S and a capital A. Don't change the name of that, also keep track of this folder. Notice that inside of it you have your graphics, your SpryMenuBar JavaScript, as well as your SpryMenuBarHorizontal. This GOODSpryMenuBarHorizontal is one that I've been working with as a practice so you can use that as a reference. This one will be your own, right here and there'll be one called GOOD so if you want to see how I've styled mine that will be there for you. So be sure to keep track of these supporting files or your Spry Menu will not work. When all of your navigation systems, your spry menu and your text-based menu are looking the way you want them and everything is fine, go ahead and save this file as Project Step 10, close it and then move on to the next movie.