Ten Ton Dreamweaver [Electronic resources] نسخه متنی

1.

Open the initial page that you want to place your navigation bar on.

2.

Place your insertion point where you want the navigation bar to appear and choose Insert > Image Objects > Navigation Bar.

You can also use the Insert bar (Window > Insert) to place a navigation bar on your page. In the Common category on the Insert bar, click the Images pull-down menu and choose Navigation Bar.

Gettin' a Grip on Rollover States" earlier in this chapter for a description of each of these button states.

6.

If you want, insert an entry for Alternate Text. (Alternative text is a short text message that will appear when your visitor rolls the pointer over the graphic.)

7.

When Clicked, Go to URL field, specify where you want the navigation button to jump the visitor to.

It's much easier to click the Browse button than to remember the URL, unless it's an easy one. Also, if you're using your navigation bar in a frameset (remember Chapter 7?), you can specify what frame you want the linked file to open in using the In menu (to the right of the Browse button).

8.

To add more buttons to your navigation bar, click the Add Item button at the top of the dialog box and repeat steps 3 through 7 for each button.

9.

Make sure to leave Preload Images turned on, and check Show Down Image Initially if you want the button's down state to appear first, instead of its up state.

Preloading images is highly recommended. Remember that a single button on your navigation bar actually uses several graphics. Loading them before they're needed ensures smooth rollover transitions. Otherwise, the graphics will load as your visitor moves the mouse over a button, which slows down your site's interactivity.

Also, rather than initially showing your button's up state, you may prefer to show the button's down state. For example, on your Services page, you may want the Services button on the navigation bar to appear in its down state. This approach helps your visitors navigate your site by providing them with visual cues.

Noteworthy

Dreamweaver lets you insert only one navigation bar per page. If you attempt to insert another, it won't let you but instead asks if you want to make changes to the current navigation bar.

10.

If you want to rearrange the buttons in your navigation bar, use the Move Item Up in List and Move Item Down in List buttons at the top of the dialog box.

11.

Use the Insert menu at the bottom of the dialog box to set either a horizontal or vertical navigation bar.

12.

To use a table to hold your navigation bar, check the Use Tables option at the bottom of the dialog box.

I strongly recommend using a table to hold your navigation bar. If you leave the Use Tables option unchecked, the navigation bar elements will be placed directly on your page as loose graphics, making it very difficult for you to select, move, or copy your navigation bar. In the next section, you'll see how using tables to hold your navigation bar comes in really handy.

13.

Once your settings are complete, click OK.

Dreamweaver inserts your navigation bar on your page where you originally placed your insertion point.

How to Make Your Own Buttons

Do you want to create custom buttons for your site? Here's how to create a group of buttons that all have a similar look, so they can be used in the main navigation bar throughout your site. You can then follow the same procedures to create a second set of buttons that you can use as rollover images.

Here's how to create your own button graphics:

Now that you have a set of buttons, you can use them with Dreamweaver's Rollover Image and Insert Navigation Bar commands.

Can't be bothered creating your own buttons? There are nearly endless resources for free buttons online. To get started, check out prodraw.net/button or [buttonland.com].

1.

Insert a navigation bar on your page, as you did in the previous section.

2.

Open the library by choosing Window > Assets and then clicking the Library category in the button column on the left.

Now you need to add the navigation bar to the library.

3.

Select your navigation bar on the page.

Here's where using a table to hold your navigation bar really pays off. To select your entire navigation bar, all you need to do is select the table. Probably the easiest way to do this is to click anywhere in the nav bar and then click the <table> button in the Tag Selector area of the Status bar, at the bottom left.

If you didn't use a table to hold your navigation bar, you can still play along. Click a button in your navigation bar to select it; then click the <p> button in the Tag Selector. This will select all the buttons in the nav bar for you

4.

At the bottom of the Library pane, click the New Library Item button.

The navigation bar appears in the library as an untitled library item.

5.

Give the nav bar a name and press Enter (Windows) or Return (Mac).

6.

In the Update Files dialog box that appears, click Update.

Now the navigation bar is ready to be placed on the other pages in your site.

7.

Open the page that you want to insert your navigation bar on.

8.

Place your insertion point where you want the navigation bar to appear and click the Insert button at the bottom of the Library pane.

Dreamweaver inserts the navigation bar on your page, with the graphics and hyperlinks intact.

Placing BreadcrumbsSorta Like a Candy Trail, Right?

Many web sites display a series of links at the top of the page, giving visitors a trail back to where they started, usually the home page. These links are known as breadcrumbs, and they're a very useful secondary navigation system, allowing visitors to navigate via the site's structure rather than from the main menu.

Here's an example of breadcrumbs from eBay.com.

Dreamweaver comes with two basic prebuilt breadcrumb bars that you can insert on your page, so you can get started with breadcrumb navigation right away, without having to create your own from scratch.

To use Dreamweaver's prebuilt breadcrumbs, you'll be using the Snippet panel. You haven't seen this panel yet, but it contains prebuilt code blocks for page elements, such as page footers and navigational elements.

Now, what hierarchy do you use to insert the placeholders for your page links? That is, the visitor can come to the current page from any number of different directions or pages. How do you set up the default breadcrumb bar to anticipate whatever series of breadcrumb trails your visitor will follow? This relates directly to the type of structure you're using for your web site. If you'll recall back to Chapter 3, there are four main structural types: linear, hierarchical, spoke-and-hub, and full-web. Keeping these structural types in mind, breadcrumbs would be easiest to implement with the linear sites. They'd also be easy to use with a hierarchical structure, where the first breadcrumb entry would be the home page, the second breadcrumb entry is the landmark page, and the third a content page. Breadcrumbs could also be used in a spoke-and-hub model, although it would be tricky to implement; and finally breadcrumbs would be unusable in a full-web structure, because in a full-web set-up, there's actually no structure because each page links to every other page. Keep this in mind as you add breadcrumbs onto your page. And remember, breadcrumbs may not be well suited to the type of site you're creating.

Here's how to insert breadcrumbs on your page:

That's about all there is to inserting breadcrumbs on your page. If you're not sure whether to use them, remember how back in Chapter 3 we talked about including several ways for surfers to navigate your site. Breadcrumbs would make a lovely addition.

1.

Select the graphic on your page that you want to add hotspots to.

2.

At the bottom left of the Property Inspector, click the hotspot shape tool that you want to use.

You can create rectangular, circular, or polygonal hotspots.

Geek's Delight

You may have heard the terms client-side image map and server-side image map. Client-side maps are stored within a98 document, and server-side maps are stored on a server. If you have heard these terms and find them confusing, forget about 'em and just make your image maps in Dreamweaver as described in this section. If you've never heard these terms before, inconspicuously scribble out this note and move on.

3.

If you have Dreamweaver's Accessibility preferences turned on, you'll be asked to add alt text to your image when you click a hotspot tool. You can add alt text now, or you'll have an opportunity to add it in a moment. Click OK to continue.

4.

Drag the cursor over the image to create the hotspot.

In an image map, an image is divided into multiple clickable areas, hotspots, that the visitor can use to navigate your site.

5.

To make adjustments to your hotspot, use the Hotspot Pointer tool at the bottom left of the Property Inspector. Drag the hotspot's resize handles to make the area larger or smaller, or drag in the middle of the hotspot to move it around in the image. If you trash your hotspot by accident, just press Delete and start again.

6.

In the Property Inspector's Link field, set your hotspot's hyperlink.

As soon as you drag with a hotspot tool, the Property Inspector switches to provide hotspot options so you can enter your settings.

You create links for hotspots in the same way as you create links for text or images.

7.

To open the link in a new browser window, choose _blank from the Target menu. If you want, set a Target option and enter alternative text in the Alt field.

It's a really good idea to provide alternative text for your hotspot. Your visitors won't see the hotspot shape, but alternative text will let them know that they can click the image. It can also give them an idea of where the link will take them.

I often create clickable areas on a single graphic that is made from several button images. Visitors think they're clicking buttons, but they're actually clicking image map hotspots.

8.

To add more hotspots to your graphic, repeat steps 2 through 7. When you're done, click outside your image.