1 / 26

Frames

Frames. Chapter 12. How Frames Work. When you view a framed page in a browser, you are actually looking at several HTML documents at once.

baird
Download Presentation

Frames

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Frames Chapter 12

  2. 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.

  3. How frames work • <frameset> • Uses the <head> structural tag element • Does not have a <body> tag • cols attribute • Divides the window into two frame columns • <frame> • Within the <frameset> container tags • Needed for each frame on the page • Specifies which HTML document to display • <noframes> • This is what will display if the frames do not work • Similar to the alternative text attribute provided for image tags

  4. In Notepad <html> <head> <title>Littlechair Index</title> </head> <frameset cols=“175,*”> <frame src=“doc_list.html”> <frame src=“faq.html”> </frameset> <noframes> You need a frames-enabled browser to view this page. </noframes> </html>

  5. Setting up a frameset document • Document Structure • Uses <frameset> instead of <body>. <html> <head> <title>From Jen’s Cookbook</title> </head> <frameset> </frameset> </html>

  6. 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.

  7. Setting UP A Frameset document • Decide number of columns and/or rows for the page and what size • Settings are made within the <frameset> tag • Vertical frames use the cols attribute • Specify width measurement for each column separated by commas • <frameset cols=“25%,75%”> • Horizontal frames use the rows attribute • Specify height separated by commas • <frameset rows=“*,*”>

  8. Setting up a frameset document • Frame Measurement • Three ways to specify sizes for frames • Absolute pixel values • <frameset rows=“100,400”> • Percentages • <frameset cols=“25%,75%”> • Relative values • <frameset cols=“100,*”>

  9. Setting up a frameset document • Adding and Nesting Frames • Frames are added by inserting <frame> tags within the <frameset> tags • Within each <frame> tag, the src attribute specifies the URL of the document to load into that frame <html> <head> <title>From Jen’s Cookbook</title> </head> <frameset rows=“50,*”> <frame src=“header.html”> <frame src=“tapenade.html”> </frameset> </html>

  10. 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.

  11. Setting up a frameset document • Adding and Nesting Frames • Divide a larger frame into smaller frame • Nest a second frame inside a current frameset. • Replace a <frame> tag with a complete <frameset> and <frame> tags. <html> <head> <title>From Jen’s Cookbook</title> </head> <frameset rows=“50,*”> <frame src=“header.html”> <frameset cols=“150,*”> <frame src=“links.html”> <frame src=“tapenade.html”> </frameset> </frameset> </html>

  12. 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.

  13. Setting up a frameset document • Borders • By default borders appear in thick 3-D lines around the frames • To control, use the frameborder and border attributes in the <frameset> tag. • To turn off borders completely, set border attribute to 0 • Creates a smooth transition between frames

  14. 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.

  15. Frame Appearance and function • 3 attributes for the <frame> tag • Scrollbar • <frame src=“index.html” scrolling=“auto”> • Scrollbars will appear on an as needed basis • <frame src=“index.html” scrolling=“yes”> • Scrollbars will appear so that the viewer can scroll through the document if content is too large for the window. • <frame src=“index.html” scrolling=“no”> • Scrollbars will not appear and viewer will not be able to scroll the document • Best used for banners

  16. Let’s Try It • Exercise 12-1 continued Step 5: Turn off scrolling in the top frame. Save and view.

  17. Frame Appearance and function • 3 attributes for the <frame> 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. • marginwidthattribute controls the space on the left and right edges • <frame src=“index.html” scrolling=“auto” marginheight=“24” margin width=“12”> • Resizing the frame

  18. Let’s Try It • Exercise 12-1 continued Step 6: Set the margins to 0 in the top frame. Save and view.

  19. Frame Appearance and function • 3 attributes for the <frame> tag • Resizing the frame • By default, users can resize frames by clicking and dragging the borders between frames • noresize attribute in the <frame> tag prevents users from doing this • <frame src=“index.html” noresize scrolling=“no” marginheight=“0” marginwidth=“0”>

  20. Let’s Try It • Exercise 12-1 continued Step 7: Add the noresize attribute to the top frame. Save and view.

  21. Targeting frames • Target a specific frame • Tells the link which frame to use • Naming the frame • name attribute in the <frame> tag • <frame src=“index.html” name=“main”> • 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” • <a href=“risotto.html” target=“main”>wild risotto</a><br>

  22. 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

  23. 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 <base> element in the <head> 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.

  24. Content for users without frames • This will display some content for users without frames-enabled browsers. • Place alternative content between <noframes> tags • Add everything you would put in an ordinary non-framed document • <body> tag with its attributes for setting background tiles and colors

  25. Let’s Try It • Exercise 12-1 continued Step 10: Add minimal <noframes> content to the frameset document. Make sure that it is useful for users who don’t have frames.

  26. Test Yourself • What makes frameset documents different from all other HTML documents? • On a separate sheet of paper, sketch the frameset that results from the following code: • <frameset cols=“*,*,*”> • <frameset rows=“*,3*”> • <frameset rows=“*,*” cols=“50%,50%> • How do you make a linked document appear in the top level of the browser, instead of within the frame?

More Related