Web%20Page%20Design

1
Using HTML and JavaScript to Develop Website

• Web Page Design
• Frames! - Chapt 20
• Yet Another Way to Divide Up The Screen.

2
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

3
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
4
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//24hourhtmlcafe.com/hour20/syrup.htm

5
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.

6
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.

7
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

8
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.

banner.html
Main Content
My Web Site
content.html
link1 link2 link3
navigation.html
9
Frameset?

• The frameset document
• defines what gets loaded in each part of frame
• Looks like a regular HTML document but
• ltframesetgt tag is used instead of the ltbodygt
• ltframesetgt is used to define the rows and columns
  of the indivudual frames.
• The individual frames are identified by ltframegt
  tag.

10
Frameset Example

• Using cols . and default frames sizes.
• ltHTMLgt ltHEADgtltTITLEgtA Simple Framelt/TITLEgtlt/HEADgt
  ltFRAMESET COLS","gt ltFRAME
  SRC"table_w_col_percent.html"gt ltFRAME
  SRC"color_my_table.html"gt lt/FRAMESETgt
  ltNOFRAMESgt Your browser does not support frames
  lt/NOFRAMESgt lt/HTMLgt

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 ltbodygt tag!
11
FRAMESET- Using Rows Instead of Columns

• Use rows,
• ltHTMLgt ltHEADgtltTITLEgtA Simple Framelt/TITLEgtlt/HEADgt
  
• ltFRAMESET rows","gt
• ltFRAME SRC"table_format_like_docs.html"gt
• ltFRAME SRC"color_my_table.html"gt
• lt/FRAMESETgt
• ltNOFRAMESgt Your browser does not support frames
  lt/NOFRAMESgt lt/HTMLgt

Make 2 evenly spaced rows
Load on file on top.
Load file on bottom.
Note Columns load TOP to BOTTOM but rows load
LEFT to RIGHT!
12
Adjusting Col and Row Width

• Can set ROWS or COLS to a size from 1-100.
• ltFRAMESET COLS"75, "gt
• ltFRAMESET COLS50, gt
• ltFRAMESET ROWS15," gt

13
Adjusting Sizes of Frames

• Can specify percent size with rows or cols
• ltHTMLgt ltHEADgtltTITLEgtA Simple Framelt/TITLEgtlt/HEADgt
  
• ltFRAMESET rows20,80"gt
• ltFRAME SRC"table_format_like_docs.html"gt
• ltFRAME SRC"color_my_table.html"gt
• lt/FRAMESETgt
• ltNOFRAMESgt Your browser does not support frames
  lt/NOFRAMESgt lt/HTMLgt

Make top file 20 and bottom 80
Top frame has 20 of window but bottom has 80
14
Remember need multiple files

• myframe.html
  lab6.html
• ltHTMLgt
  lthtmlgtltheadgtlttitlegtmytitlelt/titlegtlt/headgt ltbodygt
  Lab6 lt/bodygtlt/htmlgt
• ltHEADgt
  
  ltTITLEgt ReFrame
  lt/TITLEgt lt/HEADgt
  lab7.html
  lt
  htmlgtltheadgtlttitlegtmytitlelt/titlegtlt/headgt ltbodygt
  Lab7 lt/bodygtlt/htmlgt ltFRAMESET ROWS"," gt
  
• ltFRAME SRC"lab6.html"gt
• ltFRAME SRC"Lab7.html"gt
• lt/FRAMESETgt lt/HTMLgt

Lab6
Frameset describes page layout
Lab7
The URL of this page would be indelible-learning.c
om/myframe.html
15
Controlling Border

• Use border0 to erase lines between frames
• ltHTMLgt
• ltHEADgt
• ltTITLEgt frame3 lt/TITLEgt
• lt/HEADgt
• ltFRAMESET BORDER0 ROWS"15," gt
• ltFRAME SRC"Welcome1.html"gt
• ltFRAME SRC"Welcome2.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

16
Creating Site Layouts

• Frames make it possible to create clean
  navigation layouts.

When click link on top, want bottom frame to
change.
17
Lets Look at a Layout ...
Flawed
Welcome1.html
Frameset frame3a.html
ltHTMLgt ltHEADgt ltTITLEgt frame3 lt/TITLEgt lt/HEADgt
ltBODY BGCOLOR"silver"gt ltTABLE WIDTH100gt
ltTRgt ltTDgt ltA href"http//indelible-learning.co
m"gt HOME lt/Agt lt/TDgtltTDgt ltA href"
http//indelible-learning.com"gt SITE INDEX lt/Agt
lt/TDgtltTDgt ltA href" http//indelible-learning.co
m"gt SPORTS PAGE lt/Agt lt/TDgtltTDgt ltA
hrefhttp//indelible-learning.comgt COMICS lt/Agt
lt/TRgtlt/TABLEgt lt/BODYgt lt/HTMLgt
ltHTMLgt ltHEADgt ltTITLEgt frame3 lt/TITLEgt
lt/HEAD ltFRAMESET BORDER0 ROWS"15," gt lt!
---- the top Row gt ltFRAME SRC"Welcome1.html"gt
lt! ---- bottom gt ltFRAME SRC"Welcome2.html"gt
lt/FRAMESETgt lt/HTMLgt
HOWEVER,
When click a link on top, the top changes
(instead of bottom). See http//indelible-learning
.com/website/mod_frames/frame_no_border.html
Welcome2.html
18
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

19
Giving Frame Areas Names ...
The file links1.html
The frameset document frame4.html
ltBODY BGCOLOR"FFFFCC"gt ltH1 ALIGNCENTERgt Links
lt/H1gt ltA HREF"a.html" TARGET"orange"gtThe "A"
pagelt/AgtltBRgt ltA HREF"b.html" TARGET"orange"gtThe
"B" pagelt/AgtltBRgt ltA HREF"c.html"
TARGET"orange"gtThe "C" pagelt/AgtltBRgt ltA
HREF"d.html" TARGET"orange"gtThe "D"
pagelt/AgtltBRgt lt/BODYgt
ltHTMLgt ltHEADgt ltTITLEgt Frames Example lt/TITLEgt
lt/HEADgt lt!-- cols for vertical divisions
ltFRAMESET COLS"130," BORDER0gt ltFRAME
SRC"links1.html" NAMEapplegt ltFRAME
SRC"i.html" NAMEorangegt lt/FRAMESETgt
lt/FRAMESETgt lt/HTMLgt
When one of these is clicked will load document
in section named orange.
srclinks1.html nameapple
srci.html nameorange
20
Another example
blue.html
ltBODY BGCOLOR"00000FF"gt ltH1 ALIGNCENTERgt The
Blue page lt/h1gt This is the BLUE page. It is a
very blue page. lt/bodygt
Frame_l_r_nav.html
top_links.html
ltHTMLgt ltHEADgt ltTITLEgt Frames Example lt/TITLEgt
lt/HEADgt ltFRAMESET COLS"25," BORDER0gt
ltFRAME SRC"top_links.html" NAMEleftgt
ltFRAME SRC"blue.html" NAMErightgt
lt/FRAMESETgt lt/HTMLgt
ltBODY BGCOLOR"FFFFCC"gt ltH1 ALIGNCENTERgt Links
lt/H1gt ltolgt ltligtltA HREF"blue.html"
TARGET"right"gtA blue pagelt/Agtlt/ligt ltligtltA
HREF"red.html" TARGET"right"gtA Red
pagelt/Agtlt/ligt ltligtltA HREF"green.html"
TARGET"right"gtA greenlt/Agtlt/ligt lt/bodygt
See http//indelible-learning.com/website/mod_fra
mes/Frame_nav/frame_l_r_nav.html
21
Nesting Frames ...
Suppose you wanted to create a frame as follows
lab4.html
lab5.html
lab6.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)
22
Likewise
Suppose you wanted to create a frame as follows
lab4.html
lab5.html
lab6.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)
23
How would that work?

• ltHTMLgt ltHEADgt ltTITLEgt A Nested Frames Example
  lt/TITLEgt lt/HEADgt
• lt!-- cols for vertical divisions --gt ltFRAMESET
  COLS"," gt
• lt!-- left frame --gt ltFRAME
  SRC"Lab6.html"gt
• lt!-- right frame is another frameset
  --gt lt!-- rows for horizontal divisions --gt
  ltFRAMESET ROWS","gt lt!-- top
  frame --gt ltFRAME SRC"Lab4.htm"gt
  lt!-- bottom frame --gt ltFRAME
  SRC"Lab7.html"gt lt/FRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

lab4.html
lab7.html
lab6.html
For example http//indelible-learning.com/website/
mod_frames/Frame_nav/tri_split.html
24
So How Could We Get That to Work?
The frameset documement

• ltHTMLgt ltHEADgt ltTITLEgt Frames Example lt/TITLEgt
  lt/HEADgt
• lt!-- cols for vertical divisions
• ltFRAMESET COLS"130," BORDER0gt
• lt!-- left frame --gt ltFRAME
  SRCnested_links.html" NAMEleftgt
• lt!-- right frame is another frameset --gt
  ltFRAMESET ROWS50,"gt
• lt!-- top frame --gt ltFRAME
  SRCred.html" NAMEuppergt
• lt!-- bottom frame --gt ltFRAME
  SRCblue.html" NAMElowergt
• lt/FRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

srcred.html nameupper
Defines a document to load src and an
arbitrary name name
srcblue.html namelower
srcnested_lines.html nameleft
For example http//indelible-learning.com/website/
mod_frames/Frame_nav/frame_l_r_nav_nested.html
25
How the nested_links.html file looks. . .

• ltBODY BGCOLOR"FFFFCC"gt
• ltH1 ALIGNCENTERgt Links lt/H1gt
• ltolgt ltligtltA HREF"blue.html" TARGET"lower"gtA
  blue pagelt/Agtlt/ligt
• ltligtltA HREF"red.html" TARGET"lower"gtA Red
  pagelt/Agtlt/ligt
• ltligtltA HREF"green.html" TARGET"lower"gtA
  greenlt/Agtlt/ligt
• ltligtltA HREF"purple.html" TARGET"lower"gtA purple
  pagelt/Agtlt/ligt
• ltligtltA HREF"yellow.html" TARGET"lower"gtA yellow
  pagelt/Agtlt/ligt lt/olgt lt/bodygt

The file nested_links.html
srcred.html nameuppoer
When clicked load the HREF document into the
selction with name TARGET
Src nested_links.html nameleft
srcblue.html namelower
26
Some Frameset Attributes

• bordercolorrrggbb or color name
• longdescurl - A link to a document containing a
  long description of the frame and its contents.
  It may be useful for non-frame browsers.
• nametext - Assigns a name to the frame. This
  name is typically referenced by targers within
  links to make the document load in the named
  frame.
• srcurl - Specifies the location of the HTML file
  to display in the frame.
• noresize - Prevents users from resizing the
  frame. (Default allows resize).
• scrollingyesnoauto - If scrollbar appears in a
  frame.
• yes gt scrollbars always appear, no gt
  scrollbars never appear , auto gt (default)
  scrollbars appears automatically when contents
  not fit in the screen.

27
Scroll Bar Example
ltHTMLgt ltHEADgt ltTITLEgt Frames Example lt/TITLEgt
lt/HEADgt lt!-- cols for vertical divisions --gt
ltFRAMESET COLS"130," BORDER0gt lt!-- left
frame --gt ltFRAME SRC"links2.html" NAMEleftgt
lt!-- right frame is another frameset --gt lt!--
rows for horizontal divisions --gt ltFRAMESET
ROWS"75,"gt lt!-- top frame --gt ltFRAME
SRC"titlebar.html" NAMEtitlebargt lt!-- bottom
frame --gt ltFRAME SRC"h.html" NAMElowergt
lt/FRAMESETgt lt/FRAMESETgt lt/HTMLgt
Can change a couple lines and disable scrolling
ltFRAME SRC"links2.html" NAMEleft SCROLLINGNOgt
ltFRAME SRC"titlebar.html" NAMEtitlebar
SCROLLINGNOgt
28
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

29
Hands-on Lab

• Get the following web page to work correctly.

Here is Welcome1.html
Here is the main frameset document ltHTMLgt ltHEADgt
ltTITLEgt frame3 lt/TITLEgt lt/HEADgt ltFRAMESET
BORDER0 ROWS"15," gt ltFRAME
SRC"lab_links.html"gt ltFRAME
SRC"red.html"gt lt/FRAMESETgt lt/HTMLgt
ltHTMLgt ltHEADgt ltTITLEgt frame3 lt/TITLEgt lt/HEADgt
ltBODY BGCOLOR"silver"gt ltTABLE WIDTH100gt ltTRgt
ltTDgt ltA href"blue.html"gt bluelt/Agt ltTDgt
ltA href"red.html"gt red lt/Agt lttdgt ltA
href"yellow.html" gt yellow lt/Agt lt/TABLEgt lt/Bodygt
lt/HTMLgt
Need to add name and target attributes.
Make red.html any page you wish
30
One Possible Solution
lab_links.html
frame_lab1.html
ltHTMLgt ltHEADgt ltTITLEgt frame3 lt/TITLEgt lt/HEADgt ltBO
DY BGCOLOR"silver"gt ltTABLE WIDTH100gt ltTRgt ltTDgt
ltA href"blue.html" targetbottomgt
bluelt/Agt ltTDgt ltA href"red.html" targetbottomgt
red lt/Agt lttdgt ltA href"yellow.html"
targetbottomgt yellow lt/Agt lt/TABLEgt lt/Bodygt lt/HTM
Lgt
ltHTMLgt ltHEADgt ltTITLEgt frame3 lt/TITLEgt lt/HEADgt ltFR
AMESET BORDER0 ROWS"15," gt ltFRAME
SRC"lab_links.html"gt ltFRAME
SRC"red.html" namebottomgt lt/FRAMESETgt lt/HTMLgt