1 / 18

Creating Web Documents

Learn about the use of frames to divide pages and create consistency, and image maps to turn parts of images into links. Explore the ethical and legal issues in web design.

mcalvin
Download Presentation

Creating Web Documents

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: <frameset cols=“200, *”> <frame src=“toc.html”> <frame name=“contents” src=“welcome.html”> </frameset> • 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 <a href=“story.html” target=“contents”>Stories </a>

  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 <html> <head><title>Frame test </title> </head> <frameset cols=“200, *”> <frame src=“toc.html”> <frame name=“contents” src=“welcome.html”> </frameset> </html> • OR change to rows, change widths/heights

  5. Experiment, continued • Create the toc.htm file <html> <head><title>Table of contents</title></head> <body> Topics <p> <a href=“welcome.html” target=“contents”>Welcome </a> <p> <a href=“more.html” target=“contents”>More </a> <p> <a href=“http://www.purchase.edu” target=“contents”>Purchase</a> </body> </html>

  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. <img src="diagram.jpg" usemap="#mymap"> <map name="mymap"> <area shape="rect" coords="200,300,400,450" href="detail1.html"> <area shape="circle" coords="500,650,100" href="#place"> <area shape="polygon" coords="50,100, 60,150, 3, 150" href="detail3.html"> </map>

  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.

More Related