Upload
anna-jade-rodgers
View
215
Download
0
Embed Size (px)
Citation preview
Introduction
• A frame used to be an effective design tool
• Utilized space effectively by subdividing screen
• One idea: use part of screen as TOC and display on other side
• Not using frames tended to be left-justified ( left-heavy )
• Direct result of HTML
• Tends to center or left justify
• Very few tags to right justify
Introduction
• Another design issue – users tend to go to new page then revert to previous page
• Scrolled down but needed / wanted to return to top
• Frames allow to display multiple HTML pages simultaneously
• Index in one frame
• Details in another
Introduction
• Example – Table of contents
• Split vertically with TOC down left side
• Result in right side
• Example – Browsing Internet sales sites
• Inventory on one side
• Description on another
• Could use tabbed panes but probably requires programming
Frame layout and design
• Think of independent regions to divide browser window into
• Common theme for frame layout and design
• Each is rectangle with width and height
• Has a location: left, right, top, or bottom
• Each frame has a web page associated with it
• Rules
• Keep frame set simple
• Keep frame contents short
• Keep frames organized
• Surf web for existing design details
Frame Sets
• Consists of multiple frames
• Each must be sized and placed in container
• Rectangle: determined with width and height
• Can be measured in pixels or percentage of browser window
• Axis are
• Horizontal from upper left ( Columns )
• Vertical from upper left ( Rows )
• HTML doesn’t have a limit on frame nesting
< frameset > Tags
• < frameset > tag
• Specifies
• ROWS
• COLS
• Can be specified by %, pixels, or proportion ( ‘7*,3*’ )
• If set at same time – grid is created
• Must close with a < /frameset >
< frame > Tags
• The < frame > tag
• Tag doesn’t close
• Major attributes:
• SRC: HTML document displayed initially
• NAME: Can be a target
< noframes > Tag
• Used if browser doesn’t understand frames / frames have been turned off
• < noframes > must close with a < /noframes > tag
• Has no attributes
• Appears as< noframes >
…tags that would normally appear inside a < body > tag
< /noframes >
< frame > Tags Attributes
• src: link to local or offsite web page
• name: target frame from link
• title: specifies the title of the page
• target: specifies that clicking on that link affects the target name
• If the target name is _BLANK, a new window is opened
< frame > Tags Attributes
• Examples:
<a href="InitialContents.html" target="myTarget">Initial Contents</a><br>
<a href="example2.html" target="myTarget" title="Another frame set">Another frame set</a><br>
<a href="http://www.slcc.edu" target="_BLANK" title="SLCC Web page">
SLCC programs</a><br>
<frameset cols = "160, *">
<frame src="tableOfContents.html">
<frame src="initialContents.html" name="myTarget">
</frameset>
< iframe > Tag
• By using an in-line < iframe > an external webpage may be placed into other HTML documents
• Originally, for IE but now is supported by other browsers: Firefox, Opera, Google Chrome, Safari
• Allows loading of separate HTML files into an existing document. Iframes can be placed anywhere in the document flow
• The iframe element bears a strong resemblance to the frame element and can be referenced via the frames array
• The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional doctype declarations
< iframe > Tag
• Example:
<iframe src =“http://ksl.com/news_article.html width=“550” height="300"><p>Your browser does not support iframes.</p>
</iframe>