Dreamweaver Article

Designing and implementing a Spry menu

Setting up the project in Dreamweaver

Before you begin, download the sample files that accompany this tutorial. In this section I'll describe how to configure Dreamweaver so that you can get started. I've named this sample project Spryte after the Spry framework that you'll use to create the menu functionality.

Note: As a reference, I've also included a completed version of this project in the downloadable sample files.

First, extract the contents of the ZIP file to a local folder on your hard disk. For Windows users, I suggest saving the folder inside the My Documents folder. Mac users can save the files to a subfolder inside Users/<user name>/Sites. Once you've saved the sample files to your preferred location, launch Dreamweaver CS3 to set up the Spryte project:

1. Select Site > New Site, then click the Advanced tab in the Site Definition dialog box.
2. In the Site Name field, enter Spryte.
3. Choose a Local root folder by clicking the browse folder icon and navigating to the location where you copied the contents of the ZIP file. When you've located the Spryte folder, click Select (Windows) or Choose (Mac).
4. Make sure that the option to set Links relative to Document is selected, and then click OK.
5. If the Files panel is not already open, select Window > Files or press F8. After defining your site, the Files panel should display the files and folders that were extracted from the Spryte sample ZIP file.

Note: If you do not see the files listed in the Files panel, refresh it by pressing F5.

Now it's time to insert a default Spry menu:

1. In the Files panel, double-click index.html to open it. Depending on your preference settings in Dreamweaver, the file opens in Code, Split, or Design view.

2. Locate the <div> tag with an id of "spry_nav" and place your cursor inside.

   If you're working in Code view, the <div> should appear on line 22.

   If you're viewing the document in Design view, refer to Figure 1 for the location of the div.

   

   Figure 1. In Design view, the spry_nav div is located in the upper left corner.

3. Insert a Spry menu bar by either clicking the Spry Menu Bar button in the Spry tab of the Insert panel or selecting Insert > Spry > Spry Menu Bar.
4. In the Spry Menu Bar dialog box, select Vertical and press OK.
5. Save your document. You'll get a Copy Dependent Files dialog box. Click OK to copy the dependent files for the menu.
6. Preview the menu in your primary browser by pressing F12 (Windows) or Option+F12 (Mac). You can also select File > Preview in Browser > Browser Name. Roll over the menu items to see the submenu items appear.

You now have a working Spry menu bar (see Figure 2).

Figure 2. It's a good start—the default spry menu.

Wasn't that easy? However, the default setup doesn't really complement the design of the Spryte page; for best results, you need to design your own. In the next section, I'll describe how to create the design in Fireworks.

Page 2 of 6

Previous Page

Next Page