Frames

This is your webpage
http://www.ed.uiuc.edu/access/TT/fig2.gif
http://www.quackit.com/pix/make-your-own-website/example1.gif

This is your webpage on frames
http://www.ibm.com/developerworks/library/wa-fram/frames3.gif
http://www.brighthub.com/computing/windows-platform/articles/7055.aspx

What is a frame?
Holds a file
divide the screen into windows
Windows can have XHTML documents
What is a frameset?
holds one or more frames
Specifies:
# of columns and rows
percentage/pixels of space each occupies
A file that tell the browser how the screen is to be divided into frames

This means that to make a webpage with frames you need 2 things:
A XHTML with frames
Separate XHTML files that you will load into these frames
To see the webpage you load the XHTML with frames
It loads the individual pages automatically.

Frames Pros and Cons
Pros
Easier to navigate site
one frame has main navigation bar
can save designer’s time when making changes and updates to site.
Changes only made on the one web page that is attached to the frame
not every page on site.
viewer can navigate faster
not every frame has to be reloaded each time a new page is visited.
especially true if one frame has graphics
Especially if source file is big
Loading initial page may be slow to load
but rest of pages will be faster

Cons
some browsers don’t support frames.
Minor problem
some people don’t like them.
same thing for other web design components (e.g., Flash)
a lot of this is because some web pages used frames badly
avoidable

set to:
"HTML Frameset DTD" "http://www.w3.org/TR/html4/frameset.dtd">
or "XHTML Frameset DTD".
defines a window in the
Can have attributes, e.g.:
border
scrolling
Noresize
Frameborder
Marginheight
Marginwidth
src

What does this page look like? />
Answer: 3 Vertical Frames
(I:\COMP1229\2012W\Week4Lab-Frames\Eg2-3VertFrames)
These windows need names to load pages.
e.g.
* is needed because you don’t know what screen resolution user has.
It automatically adjusts page to size of screen
Notice anything different?
Where’s the ?
replaces it

src setting
add default pages to windows
default pages
pages loaded when the frameset is opened first time
name setting
adds names to each window
Lets us open a page in a window.

In Class Assignment
Make a webpage with frames
3 frames
2 columns
Left column 120 pixels in width
Right Column rest of screen
2 rows in second column
Bottom row 50 pixels
Top row rest of screen
Make the left column the index frame
Rest of the columns can contain any content you like
Make sure that each window loads different content.

Solution
My Frames Page name="bottom“ noresize >

Logic of code:
One column, 120 pixels wide
2nd column rest of screen
This column contains 2 rows
Bottom is 50 pixels
Top is remainder.
windows need names to load pages.

If you want to open a file in a frame (e.g. the one named main) use a hyperlink:
Opens newFile in the main window
Some target names are reserved:
_blank loads the page into a new browser window
_self loads the page into the current window.
_parent loads the page into the frame that is superior to the frame the hyperlink is in.
_top cancels all frames, loads in full browser window.

explain what it means
My Frames Page scrolling=no>

frameborder="0" border="0" framespacing="0“
Makes frame borders invisible. Applies to the frameset only.
Challenge: make only the right portion of the webpage’s boarders invisible
Sol’n: put the frameborder="0" border="0" framespacing="0“ only in the second frameset tag.
Notice: frameborder="0" border="0" framespacing="0“ also prevents user from resizing
Noresize – prevents user from changing size of the window
Notice: all the borders touching frame become frozen.
So you might noresize neighbours unintentionally if they only have 1 border & it is with you.
Scrolling – allows you to hide / auto show the scroll bar

Frameset not supported in HTML5
NOFrames element
gives alternate content to browsers that:
do not support frames
or have frames disabled
optional
Should always include it.

ROWS and COLS attributes
define dimensions of each frame in the set.
Takes comma-separated list of lengths
specified in:
Pixels
used when the frame consists of objects with a fixed size in pixels
- e.g., picture
Percentage
relative length
expressed as i* where i is an integer.
example, ROWS="3*,*" (* is equivalent to 1*) will have its first row allotted three times the height of the second row.
ROWS attribute give the height of each row, from top to bottom.
COLS attribute gives the width of each column from left to right.
If ROWS or COLS is omitted, implied value for attribute is 100%.
If both attributes are specified, a grid is defined and filled left-to-right then top-to-bottom.

Example: grid with two rows and three columns NAME="Photo1" SRC="Row1_Column1.html">
<br> <BODY><br> <H1>Table of Contents</H1><br> <UL><br> <LI><br> <A HREF="Row1_Column1.html">Photo 1</A><br> (<A HREF="Row2_Column1.html">Caption</A>)<br> </LI><br> <LI><br> <A HREF="Row1_Column2.html">Photo 2</A><br> (<A HREF="Row2_Column2.html">Caption</A>)<br> </LI><br> <LI><br> <A HREF="Row1_Column3.html">Photo 3</A><br> (<A HREF="Row2_Column3.html">Caption</A>)<br> </LI><br> </UL><br> </BODY><br>

Example: nested FRAMESET elements to define two frames in the first row and one frame in the second row
<br> <BODY><br> <H1>Table of Contents</H1><br> <UL><br> <LI><br> <A HREF="reference/html40/">HTML 4 Reference</A><br> </LI><br> <LI><br> <A HREF="reference/wilbur/">HTML 3.2 Reference</A><br> </LI><br> <LI><br> <A HREF="reference/css/">CSS Guide</A><br> </LI><br> </UL><br> <P><br> <IMG SRC="ad.gif" ALT="Ad: Does your bank charge too much?"><br> </P><br> </BODY><br>