Designing with Frames


Using frames to create website designs has decreased in popularity over the last few years, especially because early search engine technology had difficulties "seeing" into frames and indexing their content. There are still some very good uses, however, for frames-based sites, so Dreamweaver continues support for them.

I ran into an instance recently that was well suited for the use of frames. It involved the creation of an eLearning module for a client (see Figure 26.16). The client wanted timed exams and wanted each employee to be able to keep an eye on the time left during the exam. The perfect solution was to create a frameset that displayed a timer in the top frame and the eLearning question in the bottom. Because employees were submitting the test answers in the bottom frame, the page visible in the bottom frame could change as needed without the top frame ever having to reload. The solution worked out great and is still in use.

Figure 26.16. An example of a web application that benefits from frames. The top frame displays the timer and never reloads; the bottom frame displays the exam question.


Creating Framesets

The fundamental element of a site design that relies on frames is called the frameset. A frameset is an HTML document that contains the information about each individual frame within the site and their positions in the layout. The frameset document itself doesn't contain any actual content, but it plays a key role in determining how the content stored in the frame pages is displayed. For instance, if you were to develop an eLearning application similar to the one in Figure 26.15, you would need a single frameset that consisted of two frames. The code for the frameset might look something like this:

<frameset rows="80,*" frameborder="no" border="0" framspacing="0">     <frame src="/books/1/325/1/html/2/timer.asp" name="timerFrame" scrolling="No" |     noresize="noresize"  title="timerFrame"/>     <frame src="/books/1/325/1/html/2/examp.asp" name="examFrame"  title="examFrame"/> </frameset>


This simple frameset contains a top frame called timerFrame that displays the timer.asp page. The frame height is set to 80 pixels. The user cannot resize the top frame and the scrollbars are deactivated. The bottom frame is called examFrame and occupies the rest of the available browser height. It does allow for scrolling when the content extends beyond the limitation of the frame.

So, how would you create this frameset? Begin by choosing File, New from Dreamweaver's main menu. In the New Document dialog box, shown in Figure 26.17, select the Framesets category, choose Fixed Top from the available framesets, and click Create.

Figure 26.17. Create your new frameset by using the New Document dialog box.


Note

Dreamweaver 8 offers a wide range of preconfigured framesets to choose from. These templates can be configured easily to fit any custom needs you might have.


Because each frame in the frameset needs to have a title, Dreamweaver opens the Frame Tag Accessibility Attributes dialog box (see Figure 26.18) and asks you to specify a title. For the mainFrame, type examFrame in the Title field.

Figure 26.18. Type a name for the mainFrame.


Next, select topFrame from the Frame drop-down menu and type timerFrame for the name. Click OK to create a frameset.

The final step to creating your frameset is to save it. To save the Frameset HTML document, choose File, Save Frameset As from the menu bar. Choose a location and name for the frameset in the Save As dialog box and click Save. Notice that when the frameset is selected, the tab at the top of the document displays the name of the frameset.

Place your cursor in the top frame and you'll note that the tab changes to UntitledFrame. The top frame is treated as an entirely separate HTML page from the frameset itself and needs to be saved. From the menu bar, choose File, Save and save the top frame. Finally, save the bottom frame in the same manner.

Tip

When naming your frame, it's extremely important to use names that tell you what the frame does. Using generic names such as "frame1" or "myframe" doesn't really help when you are trying to determine which frame to link to. More specific names such as "rightnavFrame" or "timerFrame" are much more likely to help you know what the file does.


Note

You can also create new frames and insert frames into existing framesets by using the Frames drop-down button on the Insert toolbar.


Managing the Frameset with the Frames Panel

With your frameset in place and saved, you're ready to make any customized adjustments to the predefined frameset. The easiest way to do this is via the Frames panel and the Property inspector. To open the Frames panel, choose Window, Frames from the menu bar. The Frames panel, shown in Figure 26.19, displays your current frame configuration and provides you with an easy way to select the appropriate frame for adjustment.

Figure 26.19. The Frames panel provides a way to view and select the various frames in your frameset.


You may have noticed in the Frames panel that your frames are still named topFrame and mainFrame, even though you specified new names for accessibility reasons. To adjust these values, click on the appropriate frame in the Frames panel and then type a new name in the Frame Name field of the Property inspector. Again, name the top frame timerFrame and the bottom frame examFrame.

Now, suppose that you wanted to increase the size of your top frame from 80 pixels to 100 pixels. Your first instinct might be to select the timerFrame in the Frames panel and make the height adjustment in the Property inspector. Unfortunately, as shown in Figure 26.20, you would be surprised to find that there is no height adjustment in the Property inspector when a single frame is selected.

Figure 26.20. The Property inspector does not display a height value when a single frame is selected.


Instead, the frameset actually controls those values, so you would need to click on the outermost border of the frameset from within the Frames panel. This selects the entire frameset and enables you to adjust the values of the individual frames via the Property inspector (see Figure 26.21).

Figure 26.21. When the frameset is selected, you can adjust additional properties of the individual frames.


To adjust the height of the top frame, click on the top frame in the Property inspector and type 100 for the value in the Row field. Press Enter or click anywhere in the page and Dreamweaver updates the design view. Before your change becomes permanent, however, you need to save the changes to the frameset. With the frameset selected in the Frames panel, choose File, Save Frameset from the menu bar.

Adding Content to the Frames

With your frame structure in place, adding content just means typing away or adding images, Flash movies, or any other object that you might add in any other web page. The biggest difference comes when you want to create images or hyperlinks that, when clicked, change the contents of a different frame. So, for instance, suppose that you want to create a link in the top frame that says "Start Exam," and this link is supposed to load the exam page in the bottom frame.

To create this link, place your cursor in the top frame and type Start Exam. Select the text and type exam.html in the Link field of the Property inspector. Pretty straightforward process of creating a hyperlink, right? The only problem is that if someone clicks this link, the exam.html page is going to load in the top frame, rather than the bottom frame.

To fix this, you have to tell Dreamweaver to add code that indicates that the page should open in the bottom frame. To do this, choose examFrame from the Target drop-down menu (shown in Figure 26.22). That's it! Save the pages and the frameset, and the top link automatically opens the exam.html page in the bottom frame.

Figure 26.22. Select the appropriate target for the link.


Other than that, you can basically create each HTML page in each frame as if it were a normal web page, using tables, layers, and even subframes (although I would really recommend against that unless you really need them).



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

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