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.3: How to Change the Colours of the Spry Menu Bar Widget
To change the colours of the Spry Menu Bar Widget when its set to its default configuration, you will need to click somewhere in one of the menu buttons and select the “<a>” item on the status bar. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Double-click either the “background-color” line in the CSS STYLES panel or the “color” line. If you double-clicked the “background-color”, the CSS Rule Definition dialog box will open to the background section allowing you to choose any colour from the colour picker.
If you have double-clicked the “color” line instead, the same CSS Rule Definition dialog box will appear, but it will open to the “Type” section. This will allow you to change the colour of the text when the mouse is hovering over the button.
If you want to change the colour of the menu bar when the mouse is not hovering over the button is to do the following:
1. Expand the FILES panel on the right side of Dreamweaver (if it’s currently collapsed). Doubleclick the “SpryAssets” folder in the list below, then doubleclick the “SpryMenuBarVertical.css” file to open it.
2. The CSS code that controls the appearance of your vertical menu bar will be displayed.
Click “Edit > Find and Replace…” from the menu. A dialog box, called “Find and Replace”, will appear. Type “ul.MenuBarVertical a” into the “Find” field, and click the “Find Next” button.
In the background of the window, Dreamweaver will highlight “ul.MenuBarVertical a” in the document. Click the “Close” button on the “Find and Replace” dialog box.
3. In the right side of the CSS STYLES panel, look for ‘Properties for “ul.MenuBarVertical a”‘.
Directly underneath you should be able to see “background-color” and “color” options.
To change them, click the square colour box beside the item and the colour picker tool will be displayed.
4. Click “Window > index.html” to return back to your main web page. Do NOT click the “X” button as your work has not yet been saved and all customisations will be lost.
5. If you decide to change the colours at any point, click “Window > SpryMenuBarVertical.css” again to switch back to the CSS file. If you have not moved your cursor or anything like that you should be able to change the colour as before from the CSS STYLES pane.
Saving, Publishing and Testing Your Work
Once you are happy with the changes that have been made click “File > Save All”.
To publish your work click “Site > Put” as before. When done, open a web browser and try out your menu. Remember, if you click any of the menu items, you will no doubt get an error message. This is fine because we haven’t created other pages on the site.
Congratulations! You have successfully added a professional-looking menu bar to your website, completed the home page, and mastered nearly all the skills and tricks of using Dreamweaver for designing ordinary web pages.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
