Creating Web Documents

1
Creating Web Documents

• Frames
• Image Maps
• Ethical/Legal issues
• Homework Make a reply posting on at least one
  issue

2
Frames

• Way to divide a page into distinct windows,
  generally to ease navigation. For example,
• maintaining a table of contents on the page
• creating consistency across pages of a site
• maintaining banner/logo

3
Frameset

• In place of the body tags
• ltframeset cols200, gt
• ltframe srctoc.htmlgt
• ltframe namecontents srcwelcome.htmlgt
• lt/framesetgt
• Creates two frames, the first one taking up a
  column of width 200 pixels. The second whatever
  is left.
• Each frame gets an initial HTML file. The second
  frame has a name, which can be used to target
  links, from the toc page
• lta hrefstory.html targetcontentsgtStories
  lt/agt

4
Experiments

• First, create 2 regular HTML files. (Eventually
  you will have 4.) Call them welcome.html
  more.html
• Create a 3rd HTML file and call it main.html
• lthtmlgt
• ltheadgtlttitlegtFrame test lt/titlegt lt/headgt
• ltframeset cols200, gt
• ltframe srctoc.htmlgt
• ltframe namecontents srcwelcome.htmlgt
• lt/framesetgt
• lt/htmlgt
• OR change to rows, change widths/heights

5
Experiment, continued

• Create the toc.htm file
• lthtmlgt
• ltheadgtlttitlegtTable of contentslt/titlegtlt/headgt
• ltbodygt
• Topics ltpgt
• lta hrefwelcome.html targetcontentsgtWelcome
  lt/agt
• ltpgt
• lta hrefmore.html targetcontentsgtMore lt/agt
• ltpgt
• lta hrefhttp//www.purchase.edu
  targetcontentsgtPurchaselt/agt
• lt/bodygt
• lt/htmlgt

6
Experiment, cont.

• main.html
• Has the frameset tags, sets up the frame. This
  will be what is shown when you view page source.
  Mentions toc.htm and welcome.htm
• toc.html
• Source of leftmost frame. Mentions welcome.htm
  and most.htm
• welcome.html
• Initial source of rightmost frame
• most.html
• Will be placed in rightmost frame as result of
  hyperlink in toc.htm

7
Files

• html files
• main, toc, plus
• welcome plus alternatives
• Image files

8
Experiment, continued

• Make sure all 4 files (plus any images if your
  files refer to images) are in the same folder.
• Go to Netscape or IE and open main.html
• Check links.
• Now, change the links (one at a time) in toc.htm
  or in welcome.html
• Make one of the target_blank
• Remove a target

9
Frames

• Advantages?
• Disadvantages?

10
Image map

• Way to have parts of image be different links.
• Best if meaningful!
• Image map designate parts of image
• We will do client side image maps. Image maps
  can also be implemented on the server.
• Image slicing (done using Photo Shop) takes
  image apart and re-constructs it as a table.
  Makes the individual items in the table links.

11
Example

• http//zephyr.ns.purchase.edu/math/new_media/pepsi
  /design/mapexample.html
• http//csis.pace.edu/grendel/materials/map.htm
• Many other examples
• Band web site image map identified members of
  the band
• Trip image map for (geographical) map
• Diagram click on parts for more information

12
Image map

• Need to specify that image does use an image map
• Need to specify the portion of the image for each
  action
• Specify shape (rectangle, circle or polygon) and
  parameters for that shape
• Need to specify the href to be taken
• Link can be internal to document (place) or on
  same server or anywhere on web (http//...)
• May choose to make the portion of image an image
  where the link is. (see two examples Ohring
  family and Winter Dinner).

13

• ltimg src"diagram.jpg" usemap"mymap"gt
• ltmap name"mymap"gt
• ltarea shape"rect" coords"200,300,400,450"
  href"detail1.html"gt
• ltarea shape"circle" coords"500,650,100"
  href"place"gt
• ltarea shape"polygon" coords"50,100, 60,150, 3,
  150" href"detail3.html"gt lt/mapgt

14
Coordinates?

• Obtain coordinates in Photo Shop or Paint Shop
  Pro
• Note pixel units are very small, so you will
  probably not get the exact same results if you
  repeat the process.

15
Exercise

• Find an image
• Go into Photo Shop or Paint Shop Pro and write
  down coordinates for 2 rectangles
• Write HTML for image map. Make any 2
  destinations www.purchase.edu www.nytimes.com
• Try again do circle and polygon region.

16
Ethical/Legal issues

• Intellectual property (on the Web)
• Music file sharing
• Government programs
• Privacy
• Other?

17
Project II

• Topic of your choosing (but I need to approve)
• Definite purpose and audience
• Mostly your own writing and images
• "Fair use"
• Propose on Blackboard. I will approve or suggest
  alternative on line.
• Required elements
• At least 3 html pages
• tables,
• frames,
• image map or image slicing or animation

18
Homework

• Make reply posting to Discussion Forum on
  ethical/legal issues involving the Web.
• This could be your Project II topic.
• Continue participating (make postings new
  threads and replies)
• Read HTML text on Frames.
• Next class will be Animation Shop. Image Maps.
  Image slicing.
• Instruction will go on in class as you are
  working on your projects.