Dreamweaver CS6: The Missing Manual

Link Tutorial

In this tutorial, you’ll put what you learned in this chapter to use. You’ll see how to link to other pages on your own site, link to another site on the Web, and use Dreamweaver’s Spry menu bar to create a great-looking navigation bar—complete with fancy JavaScript-driven drop-down menus. (To see the completed page, skip ahead to Figure 4-28.)

Tip

You’ll need to download files from www.sawmac.com/dwcs6 to complete this tutorial. See the Note on Note for details.

Linking to Other Pages and Websites

Once you downloaded the tutorial files and open Dreamweaver, set up a new site as described on Setting Up a Site. In a nutshell, Choose Site→New Site. In the Site Setup window, type Links Tutorial into the Site Name field, click the folder icon next to the Local Site Folder field, navigate to and select the Chapter04 folder inside the MM_DWCS6 folder, and then click Choose or Select. Finally, click OK.

Once again, you’ll be working on a page from Cafe Soylent Green.

1. In the files panel, double-click the file named index.html.

   You can also open the file by choosing File→Open, selecting its name, and then clicking OK (Select on Macs). You’re looking at a basic web page, with a banner, some text, and a footer. It’s all contained inside a <div> tag that’s 800 pixels wide and centered in the screen (you learned how to do this trick in the tutorial from Chapter 1 on Phase 6: Finishing the Page).

   If your screen is wide enough to show both the code and design view side-by-side, click the ...