frames
- 1. Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design
- 2. Objectives • Define frames and the purpose of the frameset document • Use the <frameset> and <frame> tags • Identify the purpose of the <noframes> tag • Target links from one frame to another • Specify default targets using the <base> tag • Create borderless frames, and control margins and scrolling in frames • Identify the purpose of inline frames
- 3. The <frameset> Tag • A container tag, requires a closing </frameset> tag • Determines the frame types and sizes on the page • Two frame types: – Columns – Rows
- 4. Columns Example • This frameset was created by the following code: <frameset cols="35%,65%"> </frameset>
- 5. Rows Example • This frameset was created by the following code: <frameset rows="180,*"> </frameset>
- 6. The <frame> Tag • Defines the content in each frame • Placed between the <frameset> </frameset> tags • The src attribute specifies the file that will appear in the frame • In the following example, the page that will appear in the top frame is the file fl-toc.html, and the page that will appear in the lower frame is fl- second.html. <frameset rows="180,*"> <frame src="fl-toc.html"/> <frame src="fl-second.html"/> </frameset>
- 7. The Frameset Document • Contains the the <frameset>, <frame> and <noframes> elements • The <frameset> and <frame> tags will create frames only if they are placed correctly into this document – In the frameset document, the <frameset> element takes the place of the <body> element – The opening <frameset> tag follows the closing </head> tag – The <frameset> tag must contain either the rows attribute or the cols attribute, or both
- 8. Viewing Source with Framesets • Click on the frame you want to view • Take the necessary steps to view source • The same instructions apply to printing from a frame
- 9. The <noframes> Tag • For user agents that cannot render frames • Displays alternative text or images – In some ways, similar to the alt attribute for the <img> tag • Code: <noframes> <body> If you had a frames-capable browser, you would see frames here. </body> </noframes>
- 10. Targeting Frames with Hyperlinks • Use the name attribute to name a frame, then target the frame name with hyperlinks • The syntax for naming a frame is as follows: <frame src="url" name="framename"/> • The following code names a frame: <frame src="james.html" name="authors"/> • The following code targets this frame: <a href="james.html" target= "authors"> Visit James </a> • If a user clicks the Visit James link, the James page will open in the Authors frame
- 11. Base Target • A base target automatically sets a default target frame for all links in a page • Created using the <base> tag • Code: <base target="main" href="page.html"/> • This code will cause all linked pages to open in the frame named Main • The href attribute is optional
- 12. Borders, Margins and Scrolling • To create borderless frames, add the frameborder attribute to the <frame> tag – frameborder= "1" causes borders to display (the default) – frameborder= "0" hides borders • Example: <frame src="home.html" name="main" frameborder="0"/>
- 13. Borders, Margins and Scrolling (cont’d) • Frame margin width and height – The marginheight attribute designates the space, in pixels, between the top and bottom margins – The marginwidth attribute designates the space, in pixels, between the left and right margins
- 14. Borders, Margins and Scrolling (cont’d) • Scrolling frames – The scrolling attribute to the <frame> tag controls whether the scrollbar appears – The scrolling attribute values: • "yes" — enables scrolling (the default) • "no" — disables scrolling • "auto" — allows the browser to decide • Example: <frame src= "ex.html" name= "ex" frameborder="0" scrolling="no"/>
- 15. Inline Frames • Inserts an HTML or XHTML document inside another • Also called "floating frames" • Created with the <iframe> tag • The browser reads the <iframe> tag from the file, then makes a separate request to the server for the embedded file
- 16. Inline Frames (cont’d) • Simple XHTML page with inline frame: <h1>iFrame Example</h1> <p><strong>This text is found in iframe.html</strong><p/> <iframe src="embedded.html" scrolling= "yes"> Your browser does not support frames. </iframe> <p><strong>This text is also found in iframe.html. </strong></p> • The next slide shows the results of this code…
- 18. Inline Frames (cont’d) • Inline frames are useful for: – Web documents in which all content will remain stable, except for one section (e.g., a weekly special) -- the frequently changed section can be an inline frame, which can be quickly modified when necessary without editing the entire page – Documents that you prefer to embed in a page instead of placing on a separate page or providing as a download (such as text or a PDF)
- 19. Appropriate Use of Frames • Frames are useful only in specific situations • Consider the following issues: – Function – Appeal – Development challenges – Accessibility limitations – Usability with the browser Back button
- 20. Lesson 9 Summary • Lesson 9 Frames • See Skills Review