Lesson Plan

Objectives

• Learn how HTML handles color

• Create a color scheme for a Web page

• Insert a background image into a Web page

• Create a spot color

• Learn about different image formats

• Learn how to control the placement and appearance of images on a Web page

• Work with client-side image maps
• Work with server-side image maps

Coursework / Lab Work

• Attempt lab work from demo

• Begin working on assignment #2 (checkpoint 1)

• From the New Perspectives HTML manual (tutorial #3):  

  • Work your way through the New Perspectives manual for Tutorial #3.  

  • Work your way through chapter 2 of the supplementary notes.

  • Quick checks on pages 3.17, 3.33, and 3.44

  • Case problems 1, 2, 3, & 4 from pages 3.46 - 3.52. 

Home Work

• Quiz next day.

• Read chapter 3 of HTML manual.
• Case problems from chapter.
• Previous case problems.

Demo

COLORS AND FONTS

• Color names - page 3.5, appendix A

• Color numbers - page 3.6-3.7

• Color picker software

• Using Paint Shop Pro

• Color picker web sites - page 3.7   i.e. http://www.hidaho.com/colorcenter/

• Color schemes using the body tag - BGCOLOR, TEXT, LINK, VLINK, ALINK - page 3.8 - 3.9
  

• FONT - Size, comparison to H# - Page 3.11

• FONT - Color - 3.11, 3.12 (spot color)

• FONT - Face - 3.12
  
• Background images - page 3.13, rules page 3.14, sites 3.15

Exercise:

1. Install color software & test with a mock up web page

2. Try at 3 of the web sites & test with a mock up web page. Which site offers the best features?

3. Create a sample document that contains hyperlinks to experiment with different colors

4. Experiment with Font tags

5. Experiment with different textured backgrounds (site list on page 3.15)

IMAGE TAG

• Using ALTernate text - Page 3.25 - 3.26

• Controlling alignment and text wrap - ALIGN - pg 3.27 - 3.29

• Controlling spacing (horiz/vert) HSPACE, VSPACE - aspect ratios - pg 3.29 -3.30

• Image size - WIDTH, HEIGHT- pg 3.30 - 3.31

• Tips - page 3.32

• Dithering - pg 3.32 - 3.33

Exercise:

1. Save an image from the Net on your floppy disk.

2. Experiment with text wrapping options.

3. Experiment changing the width & height

IMAGES

• GIF files - 87, 89a - pg 3.18

• Interlaced vs Non-interlaced pg 3.18 - 3.19

• Transparency - page 3.19 - 3.21

• Demo creating a transparent GIF - Paint Shop Pro

• You can use transparent GIFs as a way of controlling the layout of text and images on your Web page. Here's how you do it:

1. Go to your graphics software package and create an image containing a single color.

2. Resize the image to 1 pixel wide by 1 pixel high.

3. Save the image as a GIF file with the single color you designated in step 1 as a transparent color.

• JPEG files - pg 3.23 - 3.24

• JPG vs GIF - pg 3.25

Exercise:

1. Create a GIF with a transparent background

2. Create a spacer GIF - use spacer to align text

3. Create a GIF in both interlaced and noninterlaced format

4. Convert a GIF image to JPG format. Compare the size of the files

5. Save a JPG file under different compression options. How do the size and the appearance of the images compare?

IMAGE MAPPING

• What is an image map? - Page 3.33 - 3.34

• Server vs Client - Page 3.35 -3.36

• Defining client side hotspots - Page 3.37 - 3.40

• Using hotspot software (partial list on page 3.37) - DEMO MAPTHIS / CoffeeCup

• Using the client side image map - Page 3.41

• Turn graphic link borders off - <IMG SRC="" BORDER=0>

• Compatibility Considerations / Alternatives