This chapter will teach you how to add a navigation menu to the left hand column of your website. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Website Structure
Before we add the navigation menu we need to look at the other pages that your site will contain. Whilst there aren’t any rules governing which pages your site must contain, many websites have the following pages:
Contact or feedback page
Visitors to your site use this page to send you a message.
Site Map
If your site has lots of pages it is recommended to have a ‘Site Map’. This is a list of all the pages on your site.
About Us
Most websites have an “About Us” section. This provides information about the people (or company) behind the website.
Price Lists
Price lists are common if your site is selling a product or service.
Order Form or “Buy Now” Page
Order forms are needed if your website accepts online orders.
Links
“Links” pages are a good idea, because you can link to other sites that have a relevance to yours, which is useful in building site traffic.
Privacy Policy
This is a good idea, particularly if you are collecting personal information from visitors, such as credit card payments. This page ensures users that their data is protected and reassures customers when making online orders.
This tutorial will concentrate on creating the following pages:
Name of page: “Feedback Form”
Filename: “feedback.html”
Name of page: “Site Map”
Filename: “sitemap.html”
Name of page: “About Us”
Filename: “aboutus.html”
(NB: Feel free to add to this list if you have other pages you want to link to.)
The Dreamweaver CS4 Spry Framework
The Adobe Spry Framework lets you add a variety of interactive features to your website. One of these features is a navigation menu bar, which you will be using in this tutorial. The Spry menu bar is designed to make it easy for you to insert and configure your menu. The next section will show you how to do this.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 9th, 2009 | No Comments »
Part 6.1: How to Add the Menu to Your Side Bar
1. Start up Dreamweaver and load your home page.
2: Delete the existing placeholder content in your left column. At the top of your sidebar, you should see the words “sidebar1 Content” in bold print. Place the cursor in between the words and click the “<h3>” tag. This will select the “sidebar1 Content”, and the enclosing tag (“<h3>”) in the underlying code. Press the DEL key. All other dummy text should also be deleted by highlighting various paragraphs and using the DEL key to erase them.
3. Click “Insert > Spry > Spry Menu Bar” from the menu.
4. A dialog box, entitled “Spry Menu Bar”, will appear. Select the “Vertical” item and click “OK”.
5. A default menu bar appears into your site column with some dummy content. The menu has four items. Items 2 & 4 have normal menu items, and 1 & 3 have sub-menus.
Take a look at the PROPERTIES panel at the bottom of your window (pictured below)
There are 3 list boxes displayed. The first box contains “Item 1″, “Item 2″, “Item 3″ and “Item 4″. “Item 1″ is currently highlighted and the box next to this displays the submenus, namely, ‘’item 1.1’’, ‘’Item 1.2’’ and so on. This would also be the case if ‘’Item 3’’ was selected. If you click ‘’item 1.1’’ or ‘’Item 3.1’’ you will see that the 3rd list box contains Two Items: ‘’Item 1.1.1 or 3.1.1’’
In your main Dreamweaver window, you will see that Dreamweaver has expanded the button menu to show the first level submenu. This gives you an idea of how your menus appear visually on your web page.
You can configure a menu system of up to 3 levels deep, but this tutorial will only be using a one-level menu system.
6. Click “Item 1″ in the first list box. This is usually a link to the websites home page in a navigation bar. Submenus are not needed for this, so they need to be deleted. To do this, click “Item 1.1″ in the second list box. If you click the minus (“-”) sign, this will delete the item highlighted, and the plus (“+”) sign will add a new one. We will need to click the minus sign, and continue doing so to remove items 1.2 and 1.3.
7. If you look to the right of the 3 list boxes, there are a few fields:
- The “Text” field
- The “Link” field
In the Text field, replace “Item 1″ with the words “Home”.
In the Link field replace the hash (“#”) mark with your website’s address (URL).
8. In the Text field replace the words “Text” in “Item 2″ to “Feedback Form”,”Feedback”, “Contact Us”, “Contact Form”, “Support” or any other words that are appropriate.
In the “Link” field, the hash (“#”) mark needs to be replaced with “feedback.html”
9. Click “Item 3″. Click “Item 3.1″ and then the minus (“-”) sign above. A dialog box will appear saying “This menu and all its children will be deleted. Would you like to proceed?” Click “OK”.
Continue removing the other sub menus, 3.2 & 3.3.
In the Text field “Item 3″ replace with the words “About Us”, and the “#” in the “Link” field with “aboutus.html”.
10. Replace “Item 4″ with “Site Map” and make it point to “sitemap.html”.
11. You may have noticed that depending on how you set the background colour, the left column may end midway in the window. This can be dealt with by adding blank lines after your menu bar by hitting the ENTER key.
12. Click “File > Save”. A dialog box called “Copy Dependent Files” will appear, click “OK”. Dreamweaver will then create a new folder (“SpryAssets”) in your website’s directory that contains the support code for the menu.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
Part 6.2: How to Add New Items to Your Existing Spry Menu Bar Widget
You may decide to add new items to your menu. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex. can be done by clicking any of the existing items in your first listbox. Click the plus (“+”) button. A new menu item will appear below the one highlighted. Change the text and link as before. If the menu item is in the wrong place in your menu, and you want to change the order, click the up or down arrow above that list box. See image below:
How to Centre the Spry Framework Menu Bar Widget
The menu, will probably be positioned to the left of your web page. You may decide that you would prefer it to be in the centre of the page.
To do this, move your mouse over the menu bar. The words “Spry Menu Bar: MenuBar1″ will appear above the menu. Click onto these words. Then click the <ul.MenuBarVertical#MenuBar1> tag in the status bar to select it.
The CSS STYLES panel on the right is currently collapsed. This should be expanded by double-clicking the “CSS STYLES” tab. Scroll up or down in the “Summary for selection” box and double-click the “width 8em” item.
A dialog box entitled “CSS Rule Definition for ul.MenuBarVertical in SpryMenuBarVertical.css” should appear. Locate the section called “Margin”. Click the down arrow for the “Top” field and select “auto”. Click the OK button. Your menu bar should now be centred.
Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
