Transcript Creating Web Documents: Week 5 continued

Creating Web Documents:
Week 5 continued
Legal issues postings
Metaphor
Image maps and Image slicing
Animation Shop
Homework: Begin to plan project II
Legal/Ethical issues
• Postings
– Note: this is required! It is also required to
respond and post again to this Forum.
Review: HTML
• Details matter
– names of files
• simplify names: no punctuation, no spaces, all
lower-case
• Need to 'close' quotation marks, html tags
• Proof-read: spelling does matter.
• Legibility of text
– against background image, against color.
– Large[r] size font does help
File management
• References in the html file (href, src) can be
– external:
• http://
– internal (on the same computer)
• simplest is in same folder: just file name:
src="bird.gif"
• in subfolder of this folder: src="birds/bird.gif"
• in parent folder: src="../bird.gif"
• in subfolder of parent folder:
src="../pictures/bird.gif"
Metaphor
• What is a metaphor?
• Metaphors for web site are terms that
convey what the experience is supposed to
simulate or include.
– We ‘visit’ a web site. This is a metaphor.
– Commerce sites speak of the ‘shopping cart’.
– ‘Chat room’ conveys the idea that the
participants are ‘in a room’ together.
Metaphors, cont.
• For your projects (and your work), you may make
use of existing metaphors or develop your own to
guide your work and, possibly, show to your
audience.
• Features that make ‘visiting’ a web site more
involving are
–
–
–
–
Metaphor (idea plus the content and links)
Image maps and image slicing
Animation
Sound
Remember
• You, the creator/designer/author, make the
Web site
• The user/client/visitor exerts some control,
but all based on what you have established.
Image map exercise
Complete if not finished last class
• Download an image
• Use Paint Shop Pro to get coordinates of 3 distinct
areas
• Also use Paint Shop Pro to copy and paste those
same areas to make 3 (new) image files to be used
• Create html file with image map and original plus
3 new images.
Image slicing
• ImageReady in PhotoShop has facility to
create ‘image slicing’. This divides an
image into parts according to a grid. The
parts are made the contents of cells in a
table. Certain of the cells are links
clickable
clickable
clickable
clickable
clickable
ImageReady produces 16 image files + html
code with a table with a tags in table cells
Animation
• An animated gif is a sequence of images
that is shown in succession.
• Paint Shop Pro and other others produce
animated gifs from a sequence of images
you have produced.
– Also facility for producing extra images for
transitions between your original images, such
as fading. Also text over the image.
Animation exercise
• Create or acquire 4 images.
• Start Animation Shop (from Paint Shop Pro)
• Use wizard. Stick with default settings.
Include 4 images.
• Make animation. Save. Notice time
required for downloading.
Project II
• Pick your topic and pick your team.
– Need to get my approval.
– Need to announce on CourseInfo ASAP.
– Due 3/24 (after Spring vacation).
• Must have clearly stated purpose and audience.
• Technical features (must serve purpose of project)
– a scanned photograph you make or digital photograph
you take or original drawing (or significantly modified
graphic)
– Must include original animation
– Must include image map or image sliced set of links.
– At least 3 HTML files (3 pages).
– Table and frames.
– (Sound would be nice but not required.)
Topics
• Ethical/Legal issue
• Topic for another course
• Web site you are already working on or
want to work on.
• ????
Take the time to finalize your decision on
project.
Review of required postings
• Report on viewing site from different
platforms
• Legal/ethical issue: define issue AND give
your reasoned position
• Response to someone else's posting
• Description of your Project II: include
description of audience and purpose