website templates | css templates | dreamweaver templates | frontpage templates | golive templates | expression web templates

The template Store

Frontpage

 FP Templates
 FP Latest Releases
 FP Best Sellers
 FP Multipacks
 FP Ecommerce Plus

Dreamweaver

 DW Templates
 DW Latest Releases
 DW Best Sellers
 DW Multipacks
 Dreamweaver CSS
 DW Ecommerce Plus

Website templates

 Website templates
 New website templates

CSS templates

 CSS templates
 CSS Ecommerce Plus

Expression web

 Expression web
 Expression web CSS

Golive

 GoLive Templates
 GoLive Latest
 GoLive Multipacks
 GoLive Ecomm. Plus

Flash / Swish

 Swish Templates
 Flash Templates
 Flash Intro Templates

Webmaster tools

 DHTML Menus
 Site Survey
 Menu Multipacks

Template Search


Advanced Search

Site Search



Home > Help files >> Dreamweaver navigation bar

Dreamweaver navigation bar

Build or Change a Dreamweaver Navigation Bar

A very nice feature of Dreamweaver 4 is its ability to write JavaScript for a navigation bar. It can write a script for a simple rollover or a more sophisticated changed third image. In this tutorial we will discuss building a navigation bar with simple rollovers.

 

New Navigation Bar

You will need a graphic for each stage of your buttons, for example, home_up.gif and home_over.gif. The graphics must include the text desired on the button. Place them in the images folder of your website.

1. Build a page for your website, leaving a table cell open for the nav bar.

You can build a navigation bar in a template or library to make future modification easier. However, if you do so, you will be limited to two stages, Up and Over.

Up = The way the button looks when the page is loaded on a monitor screen in its normal state

Over = The way the button looks when the cursor passes over it

Down = Optional stage of a button when its page is loaded onto a monitor screen. Often, the Over button is used.

 

 

2. Place your cursor at the top of the cell, then go to Insert > Interactive Images > Navigation Bar. The Insert Navigation Bar dialog box will appear. See nav view 7.

3. Assign your first button an Element Name. It should be one word. It will appear in the Nav Bar Elements where a list of the nav bar buttons will be made.

4. Browse to the location of the Up stage button graphic or type in the location. The url of the button should look something like images/home_up.gif.

File names should contain lower case letters, numbers, hyphens, and/or underscores. They should not contain spaces.

cat.htm, Cat.htm, and CAT.htm are not the same file. Writing file names in all lower case letters will help keep things in order.

5. Browse to the location of the Over stage button graphic or type in the location. If you are using a Down stage and Over While Down stage, repeat the procedure for them.

6. In the When Clicked, Go To URL field, browse to the location of or type in the file name of the page to which you wish the button to link .

7. It is good to select Preload Images.

8. Select Horizontal or Vertical layout for the nav bar.

9. It is fine to use tables.

10. Do not click OK, yet! Click the plus sign at the top of the dialog box to add another button. Repeat the procedure for the rest of the buttons in your navigation bar. When all buttons are listed, click OK.

 

Navigation bar
click to enlarge

nav view 7

 

 

Modifying Dreamweaver Navigation in a Template

Several pages with corresponding buttons have been created for you in our Dreamweaver templates. However, it is almost certain you will need to make some changes to customize your template.

1. Blank buttons have been provided for you. You will need to import them into a graphics program to add button names. When the modified buttons are complete, export them to the images folder of your website.

2. If the template you purchased is based on a Dreamweaver template, you will be making changes to the template page found in the Templates folder. Changes will appear throughout the site. Open the template page.

3. Click on the nav bar and go to Modify > Navigation Bar.

4. Select a button you wish to change in Nav Bar Elements.

5. Modify the Element Name, Image locations, and When Clicked, Go To URL file name. Repeat for each button you wish to change.

6. To add a button, click on the plus sign at the top of the dialog box. To delete a button, click on the minus sign.

7. To change button order, click on the up or down arrow at the top of the dialog box after selecting a button in the Nav Bar Elements field.

8. When you have finished modifying, adding, or removing buttons, click OK.

- Navigation tutorial - general information

Affiliate program
FeaturesNews
· Affiliates Program
· Help Files / Tutorials
· Template hosting
· How to Purchase
· News
· Newsletter
· Ecommerce stores
· Site Map
News bottom

News

Dreamweaver CSS Templates

New section with 100% CSS based XHTML valid Dreamweaver templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Website Templates

We now have a selection of website templates with full PSD source files.

CSS Templates

New range of 100% CSS layouts and XHTML compatible.

read more read more...

News bottom

Resellers
Check out our reseller program and earn 20% commission on all templates sold through your site - that's over $25 per sale for our ecommerce plus templates.

read more read more...

News bottom

PayPal World Seller


We accept credit card and Paypal payments

Frontpage Templates | Dreamweaver Templates |  Website Templates |  Expression Web Templates
License + Terms | Privacy Policy | Contact us | Help | Shopping Cart

© 2001 - 2002 - 2003 - 2004 - 2005 - 2006 - 2007 - 2008 The Template Store - All Rights Reserved
Shopping cart software by ecommercetemplates.com
Design by ibswebdesign.com