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

The template Store

Frontpage templates

 Frontpage Templates
 Frontpage New Releases
 Frontpage Best Sellers
 Frontpage Multipacks
 Frontpage CSS
 Frontpage Shopping Cart

Dreamweaver templates

 Dreamweaver Templates
 Dreamweaver New Releases
 Dremaweaver Best Sellers
 Dreamweaver Multipacks
 Dreamweaver CSS
 Dreamweaver Shopping Cart

Website templates

 Website Templates
 New Website Templates

CSS templates

 CSS Templates
 CSS Shopping Cart

Expression web

 Expression Web Templates
 Expression Web CSS
 Expression Web Multipacks
 Expression Web Cart

Golive templates

 Golive Templates
 Golive Latest
 Golive Multipacks
 Golive Shopping Cart

Flash / Swish templates

 Swish Templates
 Flash Templates
 Flash Intro Templates

Webmaster tools

 DHTML Menus
 Site Survey
 Menu Multipacks

Template Search



Advanced Search

Site Search

Valid XHTML 1.0 Transitional

Valid CSS!

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

Frontpage CSS Templates

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

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 - 2009 The Template Store - All Rights Reserved
Shopping cart software by ecommercetemplates.com
Design by ibswebdesign.com