web page design frames! yet another way to divide up the screen. using html and javascript to...
TRANSCRIPT
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.
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
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">
<FRAME SRC="Welcome2.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 >
<FRAME SRC="Welcome1.html">
<! ---- bottom >
<FRAME SRC="Welcome2.html">
</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
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
Giving Frame Areas Names ...
<HTML> <HEAD> <TITLE> Frames Example </TITLE> </HEAD>
<!-- cols for vertical divisions
<FRAMESET COLS="130,*" BORDER=0>
<FRAME SRC="links1.html" NAME=apple>
<FRAME SRC="i.html" NAME=orange>
</FRAMESET>
</FRAMESET>
</HTML>
src=links1.htmlname=apple
src=i.htmlname=orange
<BODY BGCOLOR="#FFFFCC"><H1 ALIGN=CENTER> Links </H1>
<A HREF="a.html" TARGET="orange">The "A" page</A><BR><A HREF="b.html" TARGET="orange">The "B" page</A><BR><A HREF="c.html" TARGET="orange">The "C" page</A><BR><A HREF="d.html" TARGET="orange">The "D" page</A><BR>
</BODY>~
The file links1.html
When one of these is clicked will load document in section named “orange”.
The frameset document frame4.html
Another example
<BODY BGCOLOR="#FFFFCC"><H1 ALIGN=CENTER> Links </H1><ol><li><A HREF="blue.html" TARGET="right">A blue page</A></li><li><A HREF="red.html" TARGET="right">A Red page</A></li><li><A HREF="green.html" TARGET="right">A green</A></li></body>
top_links.html<HTML> <HEAD> <TITLE> Frames Example </TITLE> </HEAD>
<FRAMESET COLS="25%,*" BORDER=0> <FRAME SRC="top_links.html" NAME=left> <FRAME SRC="blue.html" NAME=right> </FRAMESET> </HTML>
Frame_l_r_nav.html
<BODY BGCOLOR="#00000FF"><H1 ALIGN=CENTER> The Blue page </h1>This is the BLUE page. It is a very blue page.</body>
blue.html
Nesting Frames ...
lab6.html
Suppose you wanted to create a frame as follows:
lab4.html
lab5.html
This could be described as 2 columns - First col: lab6.html on left- Second Col: Split into top (lab4.html) and
bottom (lab5.html)
Likewise …
lab6.html
Suppose you wanted to create a frame as follows:
lab4.html
lab5.html
This could be described as 2 Rows:- First Row: lab4.html on top- Second row: Split into left (lab6.html) and
right (lab5.html)
How would that work? <HTML> <HEAD> <TITLE> A Nested Frames Example </TITLE> </HEAD>
<!-- cols for vertical divisions --> <FRAMESET COLS="*,*" >
<!-- left frame --> <FRAME SRC="Lab6.html">
<!-- right frame is another frameset --> <!-- rows for horizontal divisions --> <FRAMESET ROWS="*,*"> <!-- top frame --> <FRAME SRC="Lab4.htm"> <!-- bottom frame --> <FRAME SRC="Lab7.html"> </FRAMESET>
</FRAMESET>
</HTML> lab6.html
lab4.html
lab7.html
So How Could We Get That to Work?
<HTML> <HEAD> <TITLE> Frames Example </TITLE> </HEAD>
<!-- cols for vertical divisions -->
<FRAMESET COLS="130,*" BORDER=0>
<!-- left frame --> <FRAME SRC=“nested_links.html" NAME=left>
<!-- right frame is another frameset -->
<FRAMESET ROWS=“50%,*">
<!-- top frame --> <FRAME SRC=“red.html" NAME=upper>
<!-- bottom frame --> <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
<HTML> <HEAD> <TITLE> Frames Example </TITLE> </HEAD>
<!-- cols for vertical divisions --> <FRAMESET COLS="130,*" BORDER=0>
<!-- left frame --> <FRAME SRC="links2.html" NAME=left>
<!-- right frame is another frameset --> <!-- rows for horizontal divisions --> <FRAMESET ROWS="75,*"> <!-- top frame --> <FRAME SRC="titlebar.html" NAME=titlebar>
<!-- bottom frame --> <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
» How to use frameset» How to “name” frame areas
Nesting frames » How to build nested frames » How to get them to work right
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