Web Page Design Frames! Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website

Web Page Design

Frames! Yet Another Way to Divide Up The Screen.

Using HTML and JavaScript to Develop Website

Outline Advantages and disadvantages of frames. Using frameset

» How to use frameset» How to “name” frame areas

Nesting frames » How to build nested frames » How to get them to work right

Competency Objectives

1. Can build a basic frame using frameset

2. Can set up a site with nested frames

3. Can get nest frames to correctly link to targeted areas.

Competency Alert:You need to

know this!

Common Problem Area!

People seem to forget this

FRAMES - Yet Another Way to Divide Up The Screen.

Frames - a method for dividing the browser window into smaller sub-windows, each displaying a different HTML document.

Frames look like the following: http://www.w3school.com.cn/tiy/t.asp?f=html_frame_mix

FRAMES - Advantages and Disadvantages

Advantages Allow parts of page to remain static while other parts

scroll. (E.g., the navigational items might remain on screen.)

Can unify documents and items that remain on different servers. For example, keeps your frame navigation items on the screen while you display graphic or document on different server.

FRAMES - Advantages and Disadvantages

Disadvantages Not supported by older browsers Can increase the complexity of the site (have to

organize all the documents for the frames.) Frames can be more difficult to navigate. Users cannot bookmark individual pages nested

within a framed document. It decrease the size of the screen displayed to the

user.




The Frameset Document Frames are made up of a set of HTML

documents. » E.g., one for navigation, one for banner one for

center screen.

The separate HTML documents needed to display the frames is held together by a single frameset document.

Main Content

My Web Site

link1link2link3

banner.html

navigation.html

content.html

Frameset? The frameset document:

defines what gets loaded in each part of frame

Looks like a regular HTML document but <frameset> tag is used instead of the <body> <frameset> is used to define the rows and

columns of the indivudual frames. The individual frames are identified by <frame>

tag.

Frameset Example: Using cols *.* and default frames sizes.

<HTML> <HEAD><TITLE>A Simple Frame</TITLE></HEAD> <FRAMESET COLS="*,*"> <FRAME SRC="table_w_col_percent.html"> <FRAME SRC="color_my_table.html"> </FRAMESET> <NOFRAMES> Your browser does not support frames </NOFRAMES> </HTML>

Make 2 evenly spaced columns

Load file on left.

Load file on right.

Show this if older browser.

Note that the frameset does NOT have a <body> tag!

FRAMESET- Using Rows Instead of Columns

Use rows=“*,*”<HTML> <HEAD><TITLE>A Simple Frame</TITLE></HEAD>

<FRAMESET rows="*,*">

<FRAME SRC="table_format_like_docs.html">

<FRAME SRC="color_my_table.html">

</FRAMESET>

<NOFRAMES> Your browser does not support frames </NOFRAMES> </HTML>

Make 2 evenly spaced rows

Load on file on top.

Load file on bottom.

Note rows load TOP to BOTTOM but columns load LEFT to RIGHT!

Adjusting Col and Row Width Can set ROWS or COLS to a size from 1-

100%.» <FRAMESET COLS="75%, *">

» <FRAMESET COLS=50,* > » <FRAMESET ROWS=”15%,*" >

Adjusting Sizes of Frames

Can specify percent size with rows= or cols=<HTML> <HEAD><TITLE>A Simple Frame</TITLE></HEAD>

<FRAMESET rows=“20%,80%">

<FRAME SRC="table_format_like_docs.html">

<FRAME SRC="color_my_table.html">

</FRAMESET>

<NOFRAMES> Your browser does not support frames </NOFRAMES> </HTML>

Make top file 20% and bottom 80%

Top frame has 20% of window but bottom has 80%

Remember need multiple files

myframe.html lab6.html

<HTML> <html><head><title>mytitle</title></head> <body> Lab6 </body></html>

<HEAD> <TITLE> ReFrame </TITLE> </HEAD> lab7.html < html><head><title>mytitle</title></head> <body> Lab7 </body></html> <FRAMESET ROWS="*,*" >

<FRAME SRC="lab6.html">

<FRAME SRC="Lab7.html">

</FRAMESET> </HTML> Lab6

Frameset describespage layout Lab7

The URL of this page would be http://www.w3school.com.cn/tiy/t.asp?f=html_frame_rows

Controlling Border Use border=0 to erase lines between frames

<HTML>

<HEAD>

<TITLE> frame3 </TITLE>

</HEAD>

<FRAMESET BORDER=0 ROWS="15%,*" >

<FRAME SRC="Welcome1.html">


</FRAMESET>

</HTML>

Creating Site Layouts

Frames make it possible to create clean navigation layouts. When click link on top,

want bottom frame to change.

Lets Look at a Layout ...<HTML> <HEAD> <TITLE> frame3 </TITLE> </HEAD

<FRAMESET BORDER=0 ROWS="15%,*" >

<! ---- the top Row >


<! ---- bottom >


</FRAMESET> </HTML>

<HTML>

<HEAD> <TITLE> frame3 </TITLE> </HEAD>

<BODY BGCOLOR="silver">

<TABLE WIDTH=100%>

<TR>

<TD> <A href="http://www.ecnu.edu.cn">HOME</A></TD>

<TD> <A href="http://www.ecnu.edu.cn">INDEX</A></TD>

<TD> <A href="http://www.ecnu.edu.cn">SPORTS</A></TD>

<TD> <A href="http://www.ecnu.edu.cn">COMICS</A>

</TR></TABLE>

</BODY>

</HTML>

Welcome1.html

Welcome2.html

Frameset: frame3a.html

When click a link on top, the top changes (instead of bottom).

See http://www.w3school.com.cn/tiy/t.asp?f=html_noframes

HOWEVER, …

Flawed




Giving Frame Areas Names ...

<HTML> <HEAD> <TITLE> Frames Example </TITLE> </HEAD>

 <FRAMESET COLS="*,*" >

 <FRAME SRC="Lab6.html">

  <FRAMESET ROWS="*,*">  <FRAME SRC="Lab4.htm">  <FRAME SRC="Lab7.html"> </FRAMESET>

</FRAMESET>

</HTML> lab6.html

lab4.html

lab7.html

So How Could We Get That to Work?




<FRAMESET COLS="130,*" BORDER=0>

 <FRAME SRC=“nested_links.html" NAME=left>



<FRAMESET ROWS=“50%,*">

 <FRAME SRC=“red.html" NAME=upper>

 <FRAME SRC=“blue.html" NAME=lower>

</FRAMESET>

</FRAMESET>

</HTML>

src=nested_lines.htmlname=left

src=red.htmlname=upper

src=blue.htmlname=lower

The frameset documementDefines a document to load “src=“ and an arbitrary name “name=“

How the nested_links.html file looks. . .

<BODY BGCOLOR="#FFFFCC">

<H1 ALIGN=CENTER> Links </H1>

<ol> <li><A HREF="blue.html" TARGET="lower">A blue page</A></li>

<li><A HREF="red.html" TARGET="lower">A Red page</A></li>

<li><A HREF="green.html" TARGET="lower">A green</A></li>

<li><A HREF="purple.html" TARGET="lower">A purple page</A></li>

<li><A HREF="yellow.html" TARGET="lower">A yellow page</A></li> </ol> </body>

Src= nested_links.htmlname=left

src=red.htmlname=upper

src=blue.htmlname=lower

The file nested_links.htmlWhen clicked load the HREF= document into the selction with name TARGET=

Some Frameset Attributes» bordercolor=#rrggbb or color name

» longdesc=url - A link to a document containing a long description of the frame and its contents. It may be useful for non-frame browsers.

» name=text - Assigns a name to the frame. This name is typically referenced by targers within links to make the document load in the named frame.

» src=url - Specifies the location of the HTML file to display in the frame.

» noresize - Prevents users from resizing the frame. (Default allows resize).

» scrolling=yes|no|auto - If scrollbar appears in a frame.

yes ===> scrollbars always appear, no ===> scrollbars never appear , auto ===> (default) scrollbars appears automatically when contents not fit in the screen.

Scroll Bar Example


 <FRAMESET COLS="130,*" BORDER=0>

 <FRAME SRC="links2.html" NAME=left>

  <FRAMESET ROWS="75,*">  <FRAME SRC="titlebar.html" NAME=titlebar>

 <FRAME SRC="h.html" NAME=lower> </FRAMESET>

</FRAMESET>

</HTML><FRAME SRC="links2.html" NAME=left SCROLLING=NO>

<FRAME SRC="titlebar.html" NAME=titlebar SCROLLING=NO>

Can change a couple lines and disable scrolling

Summary Advantages and disadvantages of frames. Using frameset



Hands-on Lab Get the following web page to work correctly.

Here is the main frameset document:<HTML><HEAD><TITLE> frame3 </TITLE></HEAD><FRAMESET BORDER=0 ROWS="15%,*" > <FRAME SRC="lab_links.html">

<FRAME SRC="red.html">

</FRAMESET></HTML>

Make red.html any page you wish

<HTML><HEAD><TITLE> frame3 </TITLE> </HEAD> <BODY BGCOLOR="silver"><TABLE WIDTH=100%><TR> <TD> <A href="blue.html"> blue</A><TD> <A href="red.html"> red </A><td> <A href="yellow.html" > yellow </A></TABLE></Body>

</HTML>

Here is Welcome1.html:

Need to add name= and target= attributes.

One Possible Solution

<HTML><HEAD><TITLE> frame3 </TITLE></HEAD><BODY BGCOLOR="silver"><TABLE WIDTH=100%><TR><TD><A href="blue.html" target=bottom> blue</A><TD><A href="red.html" target=bottom> red </A><td><A href="yellow.html" target=bottom> yellow </A></TABLE></Body>

</HTML>

<HTML><HEAD><TITLE> frame3 </TITLE></HEAD><FRAMESET BORDER=0 ROWS="15%,*" > <FRAME SRC="lab_links.html">

<FRAME SRC="red.html" name=bottom>

</FRAMESET></HTML>

lab_links.html

frame_lab1.html

Documents

Web Page Design Frames! Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website