
then click the up-arrow and down-arrow buttons. To remove an element from your nav bar, select it from the Nav Bar Elements list and click the minus button. Click OK, and Dreamweaver adds the nav bar to the navigation area of your template document, as Figure 13-12 shows. While the nav bar is selected, glance at the Property Inspector, and notice that it indicates a table. Dreamweaver constructed your nav bar in a table structure, just like you may have done for the general page layout, but even if you built a layers-based page layout, your nav bar still appears in a table. TIP If the very thought of using a table for layout of any kind drives you into a foaming frenzy, uncheck the Use Tables option in the Insert Navigation Bar dialog box before you build your table. This isn't recommended, though, because a standalone nav bar may appear with gaps between the buttons or increase the width of the navigation area. Figure 13-12. Dreamweaver builds the nav bar in the template document Each nav-bar button occupies its own cell of this table. You still have a decoration for the bottom of the nav bar, so why not add a new cell to the nav-bar table and place the decoration graphic into this cell? Here's what to do: With the nav-bar table still selected, go to the Property Inspector. Find the Rows field. It currently shows the value 3three rows for three buttons. Type 4 in the Rows field, and press Enter or Return. Dreamweaver adds a new row to the bottom of the table. TIP If you inserted a horizontal nav bar, then adjust the value in the Cols (columns) field, not the Rows field. Click inside this new row in the document window. Choose Insert Image from the main menu. The Select Image Source dialog box appears. Navigate to the decoration image, and click OK. The Image Tag Accessibility Attributes dialog box appears. Because this is a decoration image that contributes nothing in terms of content to the page, you don't have to specify alternate text or a long description (see Chapter 14 for more information). In other words, a visitor who can't see your web page loses nothing by missing a textual description of this particular graphic. Simply click OK to close the dialog box. Dreamweaver adds the decoration image to the nav-bar table, as Figure 13-13 shows. Figure 13-13. Add a new row to the nav-bar table, and insert the decoration graphic Choose File Save from the main menu, and update the pages of your site. To test your nav bar, open your home page in Dreamweaver, and press F12 to preview this page in a live browser window, as Figure 13-14 shows. When you hover over the buttons with the mouse pointer, the rollover effect kicks in, and when you click the buttons, you go to the appropriate pages of your site. Figure 13-14. Your nav bar works perfectly in a live browser window TIP