Building Complex Framesets

 < Day Day Up > 



When you decide to use mixed row and column layouts, Dreamweaver assumes that you want to build nested framesets. Figure 39-5 shows a standard nested layout.

click to expand
Figure 39-5: A common nested frameset layout that places two columns in the bottom frame of a two-row frameset

To build this type of structure, follow these steps:

  1. Create a new, unsaved page.

  2. Turn on viewing of Frame Borders in the View Options ® Visual Aids.

  3. Drag a horizontal division from the top frame border.

  4. Click into the bottom frame and choose Modify ® Frameset ® Split Frame Left (or Split Frame Right).

Alternatively, you could complete these steps:

  1. Create the new, unsaved page.

  2. Turn on viewing of Frame Borders.

  3. Drag a vertical division from the left frame border.

  4. Press the Ctrl key (Command) and drag from the top frame border to force the two columns down in your page and create a row above both frames.

There are many options for complex nested framesets but keep in mind that the more frames and the more complex the structure, the more difficult it is to manage the site. Targeting links becomes more complex.

Parent/child framesets

Another way to accomplish the same sort of layout involves building a simple frameset and calling more framesets into one of the frames. To build the same kind of layout using an unnested method, follow these steps:

  1. Create a new, unsaved page.

  2. Enable Frame Borders.

  3. Drag a vertical division out from the left or right frame borders.

  4. Name the left frame SubNavs and the right frame MainContent. In the left page, type home links here. In the right page, type home content here.

  5. Save the frameset as home.htm, the left page as homesub.htm, and the right page as homecontent.htm. Close the frameset.

  6. Repeat the process to build another simple frameset with the same type of layout, this time naming the frameset about.htm, the left page aboutsub.htm, and the right page aboutcontent.htm. You should also change the text in these pages to read about links here and about content here. Save and close this frameset, too.

  7. Now build a new frameset with a horizontal division. Name these frames topFrame and btmFrame and save the frameset as  index.htm.

  8. Place your cursor in the top frame and type Home and About. Place your cursor into the Home text. and create a link that points to home.htm with a target of btmFrame. Place your cursor into the About text, and create a link that calls about.htm, also with a target of btmFrame. Save this frame (page) as  homebanner.htm.

  9. Place your cursor into the bottom frame (btmFrame) and use the point-to-file method to set this frame's src to home.htm, the frameset that contains two columns with home page content and links.

  10. Save and preview. When you click the About link, the frameset in the btmFrame changes to the about.htm frameset.

Although this may seem an overly complex way to get three frames in your layout, it isn't. This is actually a simple approach to creating columns-with-a-row layout and vice versa because it doesn't involve nesting of framesets. There are added advantages to this method because you can tap into the _parent target or use the frame name, as needed.

Imagine the same structure without the Home and About links in the top banner frame. Picture those same links in the left frame of the home and about framesets, as shown in Figure 39-6. In this case, the link targets can still be btmFrame or they could be set to _parent. Both the home and about framesets are child framesets inside a parent frame.

click to expand
Figure 39-6: The Home and About framesets are child framesets in the btmFrame parent frame.

Using Go To URL

When you use nested framesets, you cannot call a new frameset in to replace only two frames as described in the previous example because there's no existing parent/child relationship. So how can you change two frames with a single click? The answer is through JavaScript and the Go To URL behavior included in Dreamweaver's Behavior panel.

To change two frames with a single click, follow these steps:

  1. If you haven't defined a new site for the chapter39_exercise folder, do so now. Open the Go2 folder and open the  index.htm page. This layout uses nested framesets to build a left MainNavs frame, a SectionBanner for each site section, and a MainContent frame for each section's content. The links in the MainNavs frame are the main navigation for the site with each section having its own banner and content.

  2. To change the banner and content frame with a single link, place your cursor into the About link text. Notice in the Property inspector that there is a null link added. A null link is required here to apply a behavior.

  3. Open your Behaviors panel and add Go To URL.

  4. In the dialog box that opens, select the frame SectionBanner. Click the Browse button, and locate  aboutbanner.htm in the Go2 folder. Don't close this dialog yet.

  5. Now select the MainContent frame and use the Browse button to locate and select aboutcontent.htm from the Go2 folder. You should now have an asterisk by two of the frames, as shown in Figure 39-7.

    click to expand
    Figure 39-7: You can change multiple pages using the Go To URL method. Just select the frame and locate a page.

  6. Click OK to close the dialog box. Save and test the page. Clicking the About link should swap out the banner and content frames.

  7. Repeat the Go To URL method for the Home link, choosing the same frames but using the  homebanner.htm and homecontent.htm pages.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net