Embed Size (px)
Citation preview
Frames
Using Frames?
Rarely used Printing, bookmarking & resizing
problems.Frames can look different from browser to
browser.Hard to design (need to know the size).Can be good for navigation.
Code Basics
The < frameset> tag replaces the body tag.
<frameset cols="150, *"><frameset rows=”33%, *"><frame src="links.html" />
Frames Layout
You can think of it like tables.<frameset cols="150, *"> or rows is
similar to the <tr> tag. <frame src="links.html" /> is similar
to the <td>plan out how you want the frames to
look and work.
Frame Source
The source indicates the HTML file/page that is loaded in that frame.
<frame src="links.html" name="links" /> The name attribute names the frame, to load
other HTML pages into that specific frame. <frame src="home.html" name="main" />
The Target
Once a frame has been named you can use target code to force pages to load within that specific frame.
<a href="products.html" target=”main">
In the frames page: <frame src="home.html" name="main" />
Target Attributes
<a href="products.html" target=”?”>target="main"> Name of the frametarget=” _blank” (or “new”) Opens a new
windowtarget=” _self” Loads the page in the
same frametarget=” _top” Breaks out of frames with
this page.
Target Attributes
<base target=”links”> This sets the default target for every
link on the entire Web page.This code is placed (nested) in the
<head> tags.
Nested Frames
<frameset rows="110, *,25%"> <frame src="header.html" name="top" /> <frameset cols="150, *"> <frame src="links.html" name="links" /> <frame src="home.html" name="main" /> </frameset> <frame src="bottom.html" name="bottom" />
</frameset>
More Frameset Attributes
<frameset rows="110, *,25" border=“0” IE does not need the border
tag, however Netscape does. Controls the borders width in pixels.
frameborder=“0” value of no or 0, or 1. It places this dark line between borders. I never use.
framespacing="10"> Works like Cell Spacing, Space in pixels between the frames.
More Framesource Attributes
<frame src="frames-sidebar.html”>scrolling=“?” no, yes or Auto (default) If
I insert the "scrolling" attribute and assign a value of "no", all scroll bars will disappear, and some of the content of the pages could be lost.
marginheight=“15” In pixels. This works like Cell Padding but only from top to bottom.
marginwidth="10"> In pixels. This works like Cell Padding but only for the two sides.
Non-support of frames
<noframes> </noframes> The text listed between these tags serves three important purposes: It is indexed by search engines. Contributes to your ranking at a search engine. Provides visitors who are using a browser that
does not support frames a way to access your pages.
No frames example
<noframes> Welcome to David Hanson’s Family home page.
This site can be viewed only with a frames capable browser. We invite you to visit our <a href=index-no-fr.html">non-frame site</a>. </noframes>
iframe
iframe allows you to define a frame within a conventional HTML document.
The iframe does not use the frameset code. If fact it’s usually used inside a table.
iframe example
<iframe src="soldier.html" name="main" width="500" height="400" align="right" frameborder="0">If you can't see the picture, then your browser doesn't support iframes. You may want to update to the most current version of your browser. </iframe>
The written part will not be seen if the browser supports Iframes.
Homework
FramesHTML Code - 10 pointsNew window (_blank)- 10 points Break out of frames (_top) - 10
pointsPlease email me your URL
Questions
If you need help, send me an email at both addresses!
