Site Development Foundations © 2004 ProsoftTraining All rights reserved

Lesson 9: Frames

Objectives Define frames and the purpose of the frameset document Define frames and the purpose of the frameset document Use the and tags Use the and tags Identify the purpose of the tag Identify the purpose of the tag Target links from one frame to another Target links from one frame to another Specify default targets using the tag Specify default targets using the tag Create borderless frames, and control margins and scrolling in frames Create borderless frames, and control margins and scrolling in frames Identify the purpose of inline frames Identify the purpose of inline frames

The Tag A container tag, requires a closing tag A container tag, requires a closing tag Determines the frame types and sizes on the page Determines the frame types and sizes on the page Two frame types: Two frame types: ColumnsColumns RowsRows

Columns Example This frameset was created by the following code: This frameset was created by the following code:

Rows Example This frameset was created by the following code: This frameset was created by the following code:

The Tag Defines the content in each frame Defines the content in each frame Placed between the tags Placed between the tags The src attribute specifies the file that will appear in the frame 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. 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>

The Frameset Document Contains the the, and elements Contains the the, and elements The and tags will create frames only if they are placed correctly into this document The and tags will create frames only if they are placed correctly into this document In the frameset document, the element takes the place of the elementIn the frameset document, the element takes the place of the element The opening tag follows the closing tagThe opening tag follows the closing tag The tag must contain either the rows attribute or the cols attribute, or bothThe tag must contain either the rows attribute or the cols attribute, or both

Viewing Source with Framesets Click on the frame you want to view Click on the frame you want to view Take the necessary steps to view source Take the necessary steps to view source The same instructions apply to printing from a frame The same instructions apply to printing from a frame

The Tag For user agents that cannot render frames For user agents that cannot render frames Displays alternative text or images Displays alternative text or images In some ways, similar to the alt attribute for the tagIn some ways, similar to the alt attribute for the tag Code: Code:<noframes> If you had a frames-capable browser, you would see frames here. If you had a frames-capable browser, you would see frames here.</body></noframes>

Targeting Frames with Hyperlinks Use the name attribute to name a frame, then target the frame name 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: The syntax for naming a frame is as follows: The following code names a frame: The following code names a frame: The following code targets this frame: The following code targets this frame: Visit James Visit James If a user clicks the Visit James link, the James page will open in the Authors frame If a user clicks the Visit James link, the James page will open in the Authors frame

Base Target A base target automatically sets a default target frame for all links in a page A base target automatically sets a default target frame for all links in a page Created using the tag Created using the tag Code: Code: This code will cause all linked pages to open in the frame named Main This code will cause all linked pages to open in the frame named Main The href attribute is optional The href attribute is optional

Borders, Margins and Scrolling To create borderless frames, add the frameborder attribute to the tag To create borderless frames, add the frameborder attribute to the tag frameborder=“1” causes borders to display (the default)frameborder=“1” causes borders to display (the default) frameborder=“0” hides bordersframeborder=“0” hides borders Example: Example:

Borders, Margins and Scrolling (cont’d) Frame margin width and height Frame margin width and height The marginheight attribute designates the space, in pixels, between the top and bottom marginsThe 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 marginsThe marginwidth attribute designates the space, in pixels, between the left and right margins

Borders, Margins and Scrolling (cont’d) Scrolling frames Scrolling frames The scrolling attribute to the tag controls whether the scrollbar appearsThe scrolling attribute to the tag controls whether the scrollbar appears The scrolling attribute values:The scrolling attribute values: “yes” — enables scrolling (the default) “yes” — enables scrolling (the default) “no” — disables scrolling “no” — disables scrolling “auto” — allows the browser to decide “auto” — allows the browser to decide Example: Example:

Inline Frames Inserts an HTML or XHTML document inside another Inserts an HTML or XHTML document inside another Also called “floating frames” Also called “floating frames” Created with the tag Created with the tag The browser reads the tag from the file, then makes a separate request to the server for the embedded file The browser reads the tag from the file, then makes a separate request to the server for the embedded file

Inline Frames (cont’d) Simple XHTML page with inline frame: Simple XHTML page with inline frame: iFrame Example iFrame Example This text is in iframe.html This text is in iframe.html Your browser does not support frames. </iframe> This text is also in iframe.html. This text is also in iframe.html. The next slide shows the results of this code… The next slide shows the results of this code…

Inline Frames (cont’d)

Inline frames are useful for: 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 pageWeb 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)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)

Appropriate Use of Frames Frames are useful only in specific situations Frames are useful only in specific situations Consider the following issues: Consider the following issues: FunctionFunction AppealAppeal Development challengesDevelopment challenges Accessibility limitationsAccessibility limitations Usability with the browser Back buttonUsability with the browser Back button