Dreamweaver Tutorial 4: How to Add a Menu Bar to Your Site

Part 4: Using Spry to Add a Navigation Menu Bar


Dreamweaver Tutorial: How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS3 (Part 4)

by Christopher Heng, thesitewizard.com

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's built-in facilities 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

Dreamweaver CS3 has 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 how to program. You simply use it as you have done in previous chapters.

How to Add a Navigation Menu Bar to Your Website

  1. Start up Dreamweaver.

  2. Load your index.html page as before. That is, doubleclick the file in the Files pane in the right column.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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).

  8. 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".

  9. 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
  10. 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".

  11. 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.

Customising 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, customising ("customizing" in US English) 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 customise 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 "<p>" and the like, are the formatting code that tells the browser how it should render your page.

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.

Next Chapter: Using Dreamweaver's Template Facilities to Create Your Website

In the next chapter, we will learn to use Dreamweaver's built-in template facilities to easily manage multiple pages on your website, so that when you need to make changes to the appearance of your site, you only have to change it in one place, and Dreamweaver will automatically update all your pages for you.

Copyright © 2007-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

You are here:

Top » Getting Started with Your Website »

How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Dreamweaver Tutorials »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS3





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.