Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 17. Frames and Layers > Making Framed Navigation

Making Framed Navigation

As you previously learned, the main reason you would use frames is to separate the navigation from the content. After the frameset is set up, this is a simple operation as long as you keep tabs on what you are doing. This is where the frame name comes in. When you create a hyperlink in one frame that you mean to open in a different frame, you target that frame using the frame’s name. In the past, you had to remember the names of the different frames, but Expression Web has taken away that barrier and made the process much easier:

Before you can create a hyperlink to a new page, you need a new page to which you can link. In the Folder panel, open the Frames folder and open the camera.html file. Click File on the menu bar, select Save As, and change the filename to eos1detail.html. This creates a new HTML file, shown in the Folder List, called eos1detail.html (see Figure 17.7). Open the new file, right-click the image, select Picture Properties, and change the picture file to the eos1detail.jpg file found in the Images folder. Click OK to save the file and close it.

Figure 17.7. Creating a new file can be as easy as clicking Save As and changing the name in the Save As dialog. After you create the new file, you can make changes to it without having to worry about the old file.

In the frameset.html file, add a second list item to the left frame and type EOS 1 Detail. Highlight the first line item, right-click, and select Hyperlink from the context menu to open the Insert Hyperlink dialog. Navigate to the camera.html page in the Frames folder, and then click the Target Frame button to open the Target Frame dialog (see Figure 17.8). There, you can pick what frame the hyperlink should open the new page in, either by clicking the frame in the Current Frames Page area or selecting one of the Common Targets. Click the left frame in the Current Frames area, and the Target setting changes to Main (the name of the right frame). Click OK twice to create the hyperlink.

Figure 17.8. The Target Frame dialog lets you pick what frame to target by clicking a visual representation of the current frameset or selecting one of the common targets.

Repeat the same process with the second line item and link it to the eos1detail.html page you created earlier. Save and preview the page in your browser.


You are currently reading a PREVIEW of this book.


Get instant access to over $1 million worth of books and videos.


Start a Free Trial

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint