compiled by ackoo creating frames. compiled by ackoo recall this… table cell 1 table cell 2 table...
Post on 15-Jan-2016
226 Views
Preview:
TRANSCRIPT
Compiled by ackoo
Creating Frames
Compiled by ackoo
Recall this…
<table border=“1”> <tr> <td>Table cell 1</td>
<td>Table cell 2</td> </tr>
<tr> <td>Table cell 3</td>
<td>Table cell 4</td> </tr>
</table>
Compiled by ackoo
How frames work?• With frames, you
can display more than one Web page in the same browser window.
• This page contains three frames:
• 1) Top frame for logo
• 2) Navigational table as the left frame
• 3) Content loads on the third frame.
Compiled by ackoo
How frames work?
• Frames are described from top to bottom, and left to right.
• Approach frames design with caution. Don’t overuse it.
Compiled by ackoo
Advantages and Disadvantages of Frames
Advantages:
?
Disadvantages:
?
Compiled by ackoo
Advantages and Disadvantages of Frames
Advantages:• Ability to have one
portion of window always visible while others scroll through longer content.
• Provide navigational possibilities.
• Unify information from several sites onto one page.
Disadvantages:• Difficult to click through
them.
• Difficult to be bookmarked or found by search engines.
• More work for developers and a heavier load for the server.
• Is not supported by some browsers.
• Unable to print the whole pages (include logo)
Compiled by ackoo
Example of Frameset and Frame Tags
Compiled by ackoo
HTML Tags for Frames:<Frameset> and <Frame>
<html><head> <title>Frameset Page</title></head>
<frameset cols=“175, *”> <frame src=“menu.html” /> <frame src=“faq.html” />
<noframe><body>You need a frames-enabled browser to
view this page. </body> </noframe>
</frameset></html>
NOTES: Frameset doesn’t need a <body> tag because it has no body. If you put contents in the <body> tag, the contents won’t be displayed.
Compiled by ackoo
Html tags for frames and its attributes.
Tag Attributes Description
<frameset>
Border=“number”
Cols=“measurements”
frameborder=“1” or “0”
Rows=“measurements”
Declare the body of a framed document.
Border thickness in pixels when border is on.
Number of columns (vertical frames).
Specifies whether borders appear between the frames (1=yes, 0= No).
Number of rows (horizontal frames)
<frame>
marginwidth=“number”
marginheight=“number”
name=“text”
scrolling=“yes” or “no” or “auto”
src=“url”
Adds a frame to a framed document.
Pixel space held on the left edge of the frame.
Pixel space held on the top edge of the frame.
Name of the frame (for targeting)
Specifies whether scrollbars appear in the frame
name of the file to load in the frame.
<noframes> Content that will display in a non-frames browser
Compiled by ackoo
Do it now!
• Click for some examples of how frames are used:
http://www.w3schools.com/html/html_examples.asp
• Let’s explore these examples
Compiled by ackoo
Linking pages/contents to the navigation items.
• Example:
<a href=“main.html” target=“main”>ABOUT US</a>
<a href=“video.html” target=“main”>VIDEO</a>
<a href=“ss1.html” target=“blank”>SLIDESHOW</a>
Do you notice the target attribute for link??
(Also, see an example from w3school).
Compiled by ackoo
Linking pages in your site’s frames
There are several types of link target:Target to a frame (put the frame name, as previous
example)Target to a blank browser window (_blank)Target to the same frame (browser window) (_self)Target to the parent frame, which cause breaking out of the
frameset, ie the frameset that is one step up in the nested frame hierarchy. (_parent)
Target to the top level of the browser window, breaks out its frameset and displayed in the full browser window. (_top)
Compiled by ackoo
Do it now!
• To practice, download this zip file (and extract it): (http://10.100.3.9/~ackoo/tutorials/html_basic/notes/frame_practice.zip).
• Do this: Create an “index.html” file with frames: A top frame for logo page, a left frame for navigation page and a right frame for contents to load.
• Create the links for the navigation panel.
Compiled by ackoo
More reading about Frame
http://www.w3schools.com/html/html_frames.asp
top related