dreamweaver templates | responsive designs | frontpage templates | expression web templates | wordpress templates | css templates | website templates

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


Features
News

Frontpage CSS Templates

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

Microsoft Expression Web Templates

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

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


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

read more read more...

Affiliate program
5% discount promo

Find us on Twitter

Follow us on twitter

We accept credit card and Paypal paymentsFind us on FacebookFollow us on twitterJoin us on Linkedin

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

© 2001 - 2016 The Template Store - All Rights Reserved
Shopping cart software by ecommercetemplates.com