Project 6

1
Project 6

• Using Framesin a Web Site

2
Project Objectives

• Design and create a frame structure
• Change frame scrolling options
• Name a frame content target
• Identify Web pages to display at startup
• Set frame rows
• Create a header page with text
• Create a navigation menu page with text links
• Create a home page

3
Creating a Frame Definition File

• Example www.student.gsu.edu/wkim5/project06/fram
  edef.htm
• A frameset is used to define the layout of the
  frames that are displayed

4
Creating a Frame Definition File
5
Frame Tag Attributes
6
Structure of frames
framedef.htm
7
Start framedef.htm file

• lt!DOCTYPE html
• PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
• "http//w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
  "gt
• lthtmlgt
• ltheadgt
• lttitlegtBill Thomas Illustrationslt/titlegt
• lt/headgt
• lt/htmlgt

8
Start framedef.htm file

• Note that there is no
• ltbodygt
• lt/bodygt

9
Defining Columns and Rows in the Frameset

• lt!DOCTYPE html
• PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
• "http//w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
  "gt
• lthtmlgt
• ltheadgt
• lttitlegtBill Thomas Illustrationslt/titlegt
• lt/headgt
• lt!-- Define columns and rows in the frameset--gt
• ltframeset cols"25,75"gt
• ltframeset rows"20,80"gt
• lt/htmlgt

10
Specifying Attributes of the Header and Menu
Frames (rows)

• lt/headgt
• ltframeset cols"25,75"gt
• ltframeset rows"20,80"gt
• lt!-- Specify Attributes of the Header and Menu
  Frames--gt
• ltframe src"header.htm" title "header" name
  "header" scrolling"no" frameborder "no" /gt
• ltframe src"menu.htm" title "menu" name
  "menu" scrolling"no" frameborder "no" /gt
• lt/htmlgt

11
Specifying Attributes of the Header and Menu
Frames (rows)

• What if frameborder yes?
• What if scrolling yes?

12
Ending the frameset of the first column

• ltframeset rows"20,80"gt
• lt!-- Specify Attributes of the Header and Menu
  Frames--gt
• ltframe src"header.htm" title "header" name
  "header" scrolling"no" frameborder "no" /gt
• ltframe src"menu.htm" title "menu" name
  "menu" scrolling"no" frameborder "no" /gt
• lt!-- Ending the frame set of rows--gt
• lt/framesetgt
• lt/htmlgt

13
Specifying Attributes of the Main Frame

• lt!-- Specify Attributes of the Header and Main
  Frames--gt
• ltframe src"home.htm" title "win-main" name
  "win-main" frameborder "no" /gt
• lt/htmlgt

14
Ending the Framesets

• lt!-- Ending the frame set--gt
• lt/framesetgt
• lt!-- Specify Attributes of the Header and Main
  Frames--gt
• ltframe src"home.htm" title "win-main" name
  "win-main" frameborder "no" /gt
• lt!-- Ending the frame set--gt
• lt/framesetgt

15
Creating the Header Page-header.htm

• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-framese
  t.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtBill Thomas Illustrationslt/titlegt
• lt/headgt
• ltbodygt
• lta href "thomaswaterfall.jpg" target
  "win-main"gt
• ltimg src "thomaslogo.jpg" width "179" height
  "81" /gt
• lt/agt
• lt/bodygt
• lt/htmlgt

16
Creating the Menu Page-menu.htm

• lt!DOCTYPE html
• PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
• "http//w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
  "gt
• lthtml gt
• ltheadgt
• lttitlegtBill Thomas Illustrationslt/titlegt
• lt/headgt
• lt! Insert the body with optionsgt
• lt/bodygt
• lt/htmlgt

17
Insert the body with options

• lt!DOCTYPE html
• PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
• "http//w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
  "gt
• lthtml gt
• ltheadgt
• lttitlegtBill Thomas Illustrationslt/titlegt
• lt/headgt
• lt! Insert the body with optionsgt
• ltbody text "navy" link"navy" vlink"navy"
  alink"navy"gt
• lt/bodygt
• lt/htmlgt

18
Add the tables

• lt! Add linkgs with Targets to the Menu pagesgt
• lttablegt
• lttrgt
• lttdgtlta href "thomascross.jpg" target
  "win-main"gt Cross Hatchltbr /gt
• ltimg src "thomascrosssm.jpg" width "72"
  height "98" /gtlt/agt lt/tdgt
• lttdgtlta href "thomasfull.jpg" target
  "win-main"gt Full Colorltbr /gt
• ltimg src "thomasfullsm.jpg" width "72" height
  "98" /gt lt/agt lt/tdgt
• lt/trgt
• lttrgt
• lttdgtlta href "thomasink.jpg" target
  "win-main"gt Ink Washltbr /gt
• ltimg src "thomasinksm.jpg" width "92" height
  "98" /gt lt/agt lt/tdgt
• lttdgtlta href "orderform.htm" target
  "win-main"gt Order Formltbr /gt
• ltimg src "orderformsm.jpg" width "72" height
  "98" /gt lt/agt lt/tdgt

19
Add e-mail link

• lt! Add email linkgt
• ltpgtltemgtltfont size "-1"gt E-mail questions and
  comments to
• lta href "mailtobillthomas_at_isp.comgtbillthomas_at_i
  sp.comlt/agt.
• lt/fontgtlt/emgtlt/pgt

20
Create the home.htm

• Insert an image (see the file)

21
Viewing and Printing the Frame Definition File
Using a Browser

• Start your browser
• Click File on the menu bar and then click Print
  on the File menu
• Click the Options tab in the Print dialog box
• Click As laid out on screen to select it and then
  click the Print button

22
Viewing and Printing the Frame Definition File
Using a Browser
23
Testing the Links

• Click the Cross Hatch link on the navigation menu
• Click the Full Color link on the navigation menu
• Click the Ink Wash link on the navigation menu

24
Project 6 Complete

• Using Framesin a Web Site