In the previous chapter of this Dreamweaver tutorial, we added a simple navigation menu bar to the two-column web page you previously designed, learned how to change colours and fonts and added hyperlinks.
In this chapter, you will use Dreamweaver'sbuilt-in facilities to to add a fancy navigation menu bar to your website. This navigation bar will have rollover effects somewhat like what you see in thesitewizard.com's navigation menu when you hover your mouse over a menu item.
At the end of this chapter, your main page will be complete, and will form the basis for the other pages on your website. If you have previously used the example text supplied in this tutorial to create your main page, you should take the opportunity in this chapter to replace the text with the real content of your website. By this time, you would have learned enough to do most of the things a web designer typically needs to do on a web page.
In addition, if you have missed the earlier instalments of this tutorial, and wish to find out how you can create your own website from scratch, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1). This chapter assumes that you have completed all the steps mentioned in the earlier chapters.
Dreamweaver's Menu Bar Widget and the Spry Framework
Dreamweaverhas a built-in facility for you to add a variety of interactive features to your website. This built-in facility uses a programming feature known as the Spry framework. The WYSIWYG web editor makes it easy for you to use the Spry framework without needing to know any programming. You simply use it as you have done in previous chapters.
How to Add a Navigation Menu Bar to Your Website
Start up Dreamweaver.
Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.
Locate your existing navigation menu, which at this time merely consists of a series of links to your home page, About Us page, Contact Us page and the Site Map. Select them and delete them. We will be completely replacing them in this chapter.
In case you're wondering why we bothered to create those links if we were going to destroy them again anyway, hyperlinks are one of the most important features of a web page. As a webmaster, you will be continually creating hyperlinks to other pages on your site as well as links to other sites on the Internet. Not all these links will be placed in your navigation menu. It was thus important to cover that aspect of web design in the tutorial.
Make sure that the blinking text cursor is currently in the side bar. If it is not, click somewhere in the side bar. Now click "Insert | Spry | Spry Menu Bar" from the menu. That is, click the "Insert" menu, then the "Spry" item on the menu that appears, and finally on "Spry Menu Bar" on the submenu that appears.
A dialog box will appear asking you whether you want a horizontal menu bar or a vertical one. Since we are placing the menu bar in the left column, we want a vertical menu bar. Select the "Vertical" option and click OK.
A default menu bar will be inserted into your side bar. If you look at the Properties pane at the bottom of your Dreamweaver window, you will see that the text and links for menu items are displayed there.
Select "Item 1" by clicking on it, if it is not already selected. In the "Text" box, replace the words "Item 1" with "Home" (without the quotes). Replace the default "Link" text of "#" with "index.html" (without the quotes).
By default Dreamweaver created a submenu for your menu. We don't need one, so we will need to delete it. Select "Item 1.1". Directly above "Item 1.1" are two buttons "+" and "-". Click the "-" item to delete Item 1.1. Do the same for "Item 1.2" and "Item 1.3".
Now do the same with the other items, replacing the text with the appropriate words for your site, and the links with the actual page names. If there are submenus, delete them as you did for Item 1. For your convenience, the replacement text and links are reproduced below from chapter 3. Note that Item 3 has a three-level menu system. Delete all submenus (item 3.1.1, 3.1.2, 3.1, 3.2, 3.3) - we won't need them.
- Text: About Us, Link: aboutus.html
- Text: Contact Us, Link: feedback.html
- Text: Site Map, Link: sitemap.html
Click "File | Save". A dialog box will pop up telling you that certain files have been added to your site, and that these files will need to be uploaded. Click "OK".
Now upload the page to your website using "Site | Put" and check the results in your browser. Hover your mouse over your menu buttons, and you will see that they change colour.
Customizing the Spry Framework's Menu Bar Widget
While adding the Spry Framework's navigation menu bar to your web page is a simple procedure under Dreamweaver, customizing it is, however, another cup of tea. There is no built-in method to do so under Dreamweaver's user interface. You will have to do it manually.
The fastest way to do this is to do it via Dreamweaver's "Code" view.
Dreamweaver has two basic ways you can work on your website. So far, you have been creating your site using the "Design" view. The "Design" view allows you to work on your web page using the What-You-See-Is-What-You-Get (WYSIWYG) editor - that is, as you create your web page, you basically see the page as a visitor would when they visit your website.
The "Design" view hides the real code, the HTML and CSS code, that Dreamweaver generates for your website. This code, the "raw" code, if you will, is the actual content that is uploaded (published) to your website. When your visitor loads your web page, the browser takes the "raw" code and displays it according to the instructions given in the "raw" code.
To customize the Spry Framework's menu bar widget, you will be using Dreamweaver's facility for viewing this "raw" code for your website. Even if you find the menu bar widget satisfactory at the moment, you should still take the following steps to familiarize yourself with Dreamweaver's "Code" view. You will be using the Code view in a future chapter to insert your feedback form code.
To switch to the "Code" view, click "View | Code" from the menu. Instead of the web page that you are accustomed to viewing, you will now see the "raw" HTML code for that page. If you scroll up and down the page, you should be able to see your content amidst other characters. These other characters, things like "
" and the like, are the formatting code that tells the browser how it should render your page.
Centering the Menu Bar
Scroll to the top of the index.html file in "Code" view. Locate the text "" (without the quotes) somewhere near the top of the file. Place your cursor just before "" on the same line. Hit ENTER (or RETURN) to insert a blank line. When you do this, the entire line with "" should move downwards, creating a new blank line. Move the cursor to the blank line.
To check that your insertion works, click "View | Design" from the menu. You should see that the menu is now centred in the Design view. You can again click "View | Code" again from the menu if you want to return to the "Code" view.
Changing the Colours of the Menu Bar
On the right side of the Dreamweaver window, in the Files pane, doubleclick the folder "SpryAssets". It should expand, showing you other files. Doubleclick the file "SpryMenuBarVertical.css". If the Files pane is too narrow for you to see what file you're clicking, hover your mouse over each file in turn until Dreamweaver displays a tooltip telling you the full name of the file.
Another file, full of unfamiliar code, will appear in the Dreamweaver's centre pane. This is the CSS code for your menu. The CSS code contains the formatting code for your menu.
Click "Edit | Find and Replace" from the menu. Type "ul.MenuBarVertical a" (without the quotes) into the big "Find" box. Click the "Find Next" button. Dismiss the dialog box by clicking the "Close" button. In the main window, you should see the highlighted words "ul.MenuBarVertical a". Under these words is a block of text enclosed between "{" and "}" (without the quotes). You should be able to find "background-color" followed by a value "#EEE" in this block. This line determines the colour of the menu when the mouse is not hovering over it. "#EEE" is the code for the greyish colour you see in the menu.
In the right hand column of the Dreamweaver window, in the CSS pane, you should be able to see "Properties for ul.MenuBarVertical a". If not, move your mouse over the line separating the blue "Applications" and the section above and drag it downwards to make more space. Under "Properties for ul.MenuBarVertical a", look for the line that says "background-color" (or parts of "background-color" if your window is too narrow to display the full text). To the right, you should see a square box followed by "#EEE". Click the square box to display the colour picker window and choose a colour of your choice.
To modify the colour of the menu button when a mouse moves over it, click "Edit | Find and Replace" again and search for "ul.MenuBarVertical a:hover". Dismiss the dialog box when you've located the text. Once again, you should be able to change the "background-color" property from the CSS pane in the right hand column.
When you're through making your changes, check the output by switching back to the index.html window. To do this, select "Window | index.html" from the menu. If you are still in "Code" view when you switch to the index.html window, switch to the "Design" view by selecting "View | Design".
When you are satisfied with the changes you have made, save your work with "File | Save All" from the menu. Note that you need to use "Save All" instead of "Save" because you have modified two files, index.html and SpryMenuBarVertical.css. Clicking "Save" alone will only save whatever file you happened to be working on last.
Again, use "Site | Put" to publish your work and check it out with your browser.
At this point, the home page for your website is complete. If you have been working on the page using some dummy text and pictures, such as the one I supplied in chapter 1, now is time to change them to your real content. You have learned everything you need to create a working main page that looks decent and works correctly. We will not be returning to this page in the next few chapters. Instead, we will be designing your other pages using this main page as the template.
0 comments:
Post a Comment