Chapter 12 FRAMES

HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making the page display in frames is the frameset document, which is an HTML document that contains instructions for how each frame is drawn and which HTML document is displayed in each frame.

HOW FRAMES WORK Uses the structural tag element Does not have a tag cols attribute Divides the window into two frame columns Within the container tags Needed for each frame on the page Specifies which HTML document to display This is what will display if the frames do not work Similar to the alternative text attribute provided for image tags

IN NOTEPAD Littlechair Index You need a frames-enabled browser to view this page.

SETTING UP A FRAMESET DOCUMENT Document Structure Uses instead of. From Jen’s Cookbook

LET’S TRY IT Complete Exercise 12-1: Setting Up a Framed Page Step 1: Open a new document in NotePad. Type the structure of the frameset as shown on the previous slide. Name the document frameset.html and make sure that you save it with the other files to ensure the pathnames are correct.

SETTING UP A FRAMESET DOCUMENT Decide number of columns and/or rows for the page and what size Settings are made within the tag Vertical frames use the cols attribute Specify width measurement for each column separated by commas Horizontal frames use the rows attribute Specify height separated by commas

Frame Measurement Three ways to specify sizes for frames Absolute pixel values Percentages Relative values SETTING UP A FRAMESET DOCUMENT

Adding and Nesting Frames Frames are added by inserting tags within the tags Within each tag, the src attribute specifies the URL of the document to load into that frame From Jen’s Cookbook SETTING UP A FRAMESET DOCUMENT

LET’S TRY IT Exercise 12-1 continued Step 2: Add two rows to the frameset as shown on the previous slide. Save the file and take a look in a browser. If pages aren’t showing up, make sure that the frameset document is saved in the same directory as the other files.

Adding and Nesting Frames Divide a larger frame into smaller frame Nest a second frame inside a current frameset. Replace a tag with a complete and tags. From Jen’s Cookbook SETTING UP A FRAMESET DOCUMENT

LET’S TRY IT Exercise 12-1 continued Step 3: Replace the bottom frame with a two-column frameset as shown on the previous slide. Save and view the frameset in a browser.

Borders By default borders appear in thick 3-D lines around the frames To control, use the frameborder and border attributes in the tag. To turn off borders completely, set border attribute to 0 Creates a smooth transition between frames SETTING UP A FRAMESET DOCUMENT

LET’S TRY IT Exercise 12-1 continued Step 4: Turn off the borders for the frameset using the border attribute. Save and view in the browser.

FRAME APPEARANCE AND FUNCTION 3 attributes for the tag Scrollbar Scrollbars will appear on an as needed basis Scrollbars will appear so that the viewer can scroll through the document if content is too large for the window. Scrollbars will not appear and viewer will not be able to scroll the document Best used for banners

LET’S TRY IT Exercise 12-1 continued Step 5: Turn off scrolling in the top frame. Save and view.

FRAME APPEARANCE AND FUNCTION 3 attributes for the tag Margin width You can control the amount of margin space inside each frame by adding extra space or setting the contents flush to the frame’s edge marginheight attribute controls the amount of space between the top and bottom edges of the frame and its contents. marginwidth attribute controls the space on the left and right edges Resizing the frame

LET’S TRY IT Exercise 12-1 continued Step 6: Set the margins to 0 in the top frame. Save and view.

FRAME APPEARANCE AND FUNCTION 3 attributes for the tag Resizing the frame By default, users can resize frames by clicking and dragging the borders between frames noresize attribute in the tag prevents users from doing this

LET’S TRY IT Exercise 12-1 continued Step 7: Add the noresize attribute to the top frame. Save and view.

TARGETING FRAMES Target a specific frame Tells the link which frame to use Naming the frame name attribute in the tag Targeting the frame Add the target attribute to each of the links and set the value to “main” When someone clicks on that link, the browser will load the new document in the frame called “main” wild risotto

TARGETING FRAMES Reserved target names top New document is loaded in the top level of the browser window, replacing all the frames with a single window This document will break out of its frameset and is displayed in the full browser window parent Causes the linked document to load into the parent frame The frameset that is one step up in the nested frame hierarchy self Causes the document to load into the same frame blank Opens a new browser window to display the linked document

LET’S TRY IT Exercise 12-1 continued Step 8: Name each of the frames as guided by your instructor Step 9: Set the appropriate targets for the links so the frameset functions properly In header.html, make sure that the home graphic links to the top level of the browser window In links.html, use the element in the of the document to make all of the links on the page link to the main window Save and view the frameset in the browser. Test the links to be sure that they load in the proper frames. Be sure the links back to the home page on each recipe page load in the top frame.

CONTENT FOR USERS WITHOUT FRAMES This will display some content for users without frames- enabled browsers. Place alternative content between tags Add everything you would put in an ordinary non-framed document tag with its attributes for setting background tiles and colors

LET’S TRY IT Exercise 12-1 continued Step 10: Add minimal content to the frameset document. Make sure that it is useful for users who don’t have frames.

TEST YOURSELF 1.What makes frameset documents different from all other HTML documents? 2.On a separate sheet of paper, sketch the frameset that results from the following code: a. b. c. 3.How do you make a linked document appear in the top level of the browser, instead of within the frame?