Compiled by ackoo Creating Frames. Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table...

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

Compiled by ackoo Creating Frames. Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table...

Documents

Transcript of Compiled by ackoo Creating Frames. Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table...