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 lowercase 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