windows and frames and the anchor tag. frames independent, scrollable portions of a web browser...
TRANSCRIPT
Windows and framesWindows and framesand the anchor tag
FramesFrames
• Independent, scrollable portions of a Web browser window, with each frame capable of containing its own URL
• Each frame is its own independent HTML document
• AJAX “web 2.0” web pages were initially exploiting frames to pass data (browsers re-used their frame code too…)
Creating FramesetsCreating FramesetsFrames can be created in rows, columns or both
<frameset> attribute: ROWS COLS
<frameset> tag<frameset> tagA frame container
Can only contain <frame> tagOther tags are ignored
CodeCode<frameset rows=”50%,50%”
cols=”50%,50%” />
same:
<frameset rows=”*,*” cols=”*,*” />
These holds 4 webpages
21
3 4
Frame dimensionsFrame dimensions
• Pixels: absolute sizing
• Percentages: relative sizing
• Asterisk (*) designates remainder of visible window
• You may combine the above kinds all at once
• List multiple frames with commas
frameset cols="40%, 60%"
frameset cols="20, 50%,*"
frameset cols="*, *,32 "
ExamplesExamples 40% 60%
50% *
* *32
<frame> tag<frame> tag
• Used to specify options for individual frames, e.g., URLs
• Placed within <frameset> tags
• Can be assigned a name using the NAME attribute, which can be used as a target for a link (A tag or javascript)
<frame>
Frames ExampleFrames Example
<html><title><head>Frame Example</head></title><frameset rows=“50%, 50%” cols=“50%, 50%”>
<frame src=“FirstURL.html” /><frame src=“SecondURL.html” /><frame src=“ThirdURL.html” /><frame src=“FourthURL.html” />
</frameset></html>
AttributeAttribute DescriptionDescriptionsrc
Specifies the URL to be opened in the frame
name Assigns a name to an individual frame
noresizeDisables the user’s ability to resize an
individual frame
scrollingDetermines whether a frame should
include scrollbarsmarginheigh
tSpecifies the top & bottom margins of
the frame in pixels
marginwidthSpecifies the left & right margins of the
frame in pixels
Using the TARGET attribute <a>
Using the TARGET attribute <a>
• TARGET attribute
• Determines in which frame or Web browser window a URL opens
• <base> tag
• Used to specify a default target for all links in a document
• Menu systems are a popular use for frames
• One frame to contain the hypertext links
• Second frame to contain clicked URLs
Special TargetsSpecial Targets
• _top - kill all frames; the full window
• _self - the same frame
• _blank - always a new window
• _parent - in the parent frameset
Nesting FramesNesting Frames
• Nested frame:
• Frame contained within another frame
• Must be used to sub-divide frames
• URLs of frames are loaded in the order in which each <frame> tag is encountered
• Order your frame tags (in the html) in the order you want pages to be processed by the browser
Nesting Frames ExampleNesting Frames Example
<frameset rows=“50%, 50%” cols=“50%, 50%”>
<frame src=FirstURL.html”>
<frameset rows=“50%, 50%” cols=“50%, 50%”>
<frame src=“FirstURL.html” />
<frame src=“SecondURL.html” />
<frame src=“ThirdURL.html” />
<frame src=“FourthURL.html” />
</frameset>
</frame>
<frame src=“ThirdURL.html” />
<frame src=“FourthURL.html” />
</frameset>
Frame FormattingFrame Formatting
• <frameset rows=“20%, *, 20%”>
• <frame src=“header.html” noresize scrolling=no>
• <frame src=“body.html”>
• <frame src=“navigationbar.html” noresize scrolling=no>
• </frameset>
Frame Formatting
Frame Formatting
• <frameset rows=“20%, *, 20%”>
• <frame src=“header.html” noresize scrolling=no>
• <frame src=“body.html” marginheight=”50”>
• <frame src=“navigationbar.html” noresize scrolling=no>
• </frameset>
marginheight=”50”
The <noframes> tagThe <noframes> tag
• Displays an alternate message to users of those browsers
• Older browsers are incompatible with frames
• Solutions for those users:
• Show link to navigation frame’s web page
• Show link or provide a special navigation links page
• Provide links to where the user could upgrade their browser or submit a complaint
iFrames (Inline Frame)iFrames (Inline Frame)
• Create a box or “portal” anywhere inside your webpage which is a frame
• Similar to <frame>, except the it is used like an image tag is (width, height)
• longdesc=”this attribute is needed for non-visual browsers”
• <iframe> exists within the normal DOCTYPE
• do not use iframe on the FRAMESET DOCTYPE
iFrame ExampleiFrame Example
<body><h3>Lazy Poorman's Virtual Email Service</h3>
.…
<iframe align="right" src="email.html" width="96" height="256" name="targetName">old browsers see this</iframe>
.... buttons and whatever ...
</body>
Frame design considerationsFrame design considerations
• Frame size – avoid making user scroll excessively
• Bookmarking can be a problem – what is bookmarked?
• Search engines cannot penetrate deeply into frames – code meta information carefully
• Not all browsers recognize frames; <noframes> coding can cause repetitive work
• Frames are relatively complex
Alternate UsesAlternate Uses
• Rich HTML editors
• The online text editors that go beyond the simple TEXTAREA form box almost all use iFrames or Frames
• Hidden size=0 frames
• Preload graphics without javascript coding
• store javascript code or data
• submit hidden forms; read results (1st gen AJAX)
DOM / JavascriptDOM / Javascript
• Frames are Window objects
• Security restrictions continue to limit your ability to manipulate objects between frames/windows
• You can code from the parent page to the child-frame page to a limited extent.
• Access to child frames is CUT if the child frame is not located on the same website!
RecommendationsRecommendations
• Do NOT use frames (general rule)
• Frames create user interface issues and security issues for browsers
• HTML 5 tried to kill frames; added to iFrame instead
• iFrames are commonly used; initially, iframes were the basis for AJAX
• Many “web 2.0” techniques depend upon the use of iframes