Terminology:
Screen Capture, Navigation, Web Safe Colors, Run Length Encoding,
Resources: HTML 4: Visual
Quickstart Exercises:FTP,
Creating Buttons with Tables, Seamless Background Images, Coloring
Table Cells
Performance Objectives:(Things you will be able to learn...) and Criteria(This is how well it has to be done...)
Instructions: Select a score for
each outcome below based on the following scale..
0= No exposure,
experience or knowledge in this area. Cannot perform any part of the task
at a level sufficient for participation. 1= Can do most parts of the task. Demonstrates partial
understanding of the competency. Need instruction and/or supervision.
2= Can complete
the task with limited supervision. Demonstrates a very good understanding
of the competency. 3= Demonstrates excellent understanding of the competency.
Can work independently without supervision. 4= Can teach the competency / skill to others.
Create a screen
capture of the browser window to use when creating your rough
designs and navigation structure
Capture the browser
window using Mac OS screen capture
0
1
2
3
4
Create tables for use as grid
structures by:
creating a table
by writing html
creating a table
using Dreamweaver
creating a table
using ImageReady slicing
0
1
2
3
4
Demonstrate appropriate
software techniques for developing web pages by...
Creating a rough
layout using Photoshop/ImageReady
Composing the web
page using ImageReady/Dreamweaver
0
1
2
3
4
Create web pages that will display
page width
on an 1024 x 768 pixel monitor
within the live area of both Explorer
and Firefox browser windows
on both MAC and PC platforms
work with your monitor set at 1024 x 768
pixels and colors set to "thousands"
Design images using web safe
colors whenever possible. Images will use web safe colors
whenever a choice is available; some continuous tone images
may use adaptive color palettes.
0
1
2
3
4
Design images to take advantage of Run
Length Encoding / Compression by...
creating artwork that has horizontal
changes in color. This will create a more compressed image
(small file size).
creating artwork that has large areas
of flat color
creating non-complicated line art and
non-dithered images
0
1
2
3
4
Organize files
and use correct webfile formats
/ extensions by...
avoiding complex
naming conventions
saving graphic files in gif and/or jpeg
formats
using .gif, .jpg or .htm extensions
avoiding the use of capitals, punctuation
marks and spaces in filenames (use underscore (shift +dash)
to separate words
0
1
2
3
4
Create small
file sizes so web pages load quickly by...
using hexadecimal
colors in tables and backgrounds
reducing the number
of colors when possible (using the web, adaptive or exact
palettes when saving gif files)
using compression
/ quality controls to improve file size reduction when saving
jpeg files
0
1
2
3
4
Produce colored
text and table cells to...
add interest
specify colors
for body text, visited links, active links
to create navigation buttons using
tables
0
1
2
3
4
Use ALT, WIDTH
and HEIGHT attributes in the IMG tags to make the images load
faster and to alert a person that has turned off images what
the image is
0
1
2
3
4
Create background
tiles, patterns and/or full screen backgrounds that add interest
and load quickly
0
1
2
3
4
Create indexed
color images and transparent artwork by...
using the appropriate
dithering options
selecting a single
color level to be transparent
saving the file
in the gif file format
0
1
2
3
4
Create links,
rules, buttons and bullets using html to organize information
and aid in readability / navigation
0
1
2
3
4
Create web pages
that load in 15 seconds or less on a 28.8 bps modem by checking
download time using a website service or computer software
0
1
2
3
4
|
Create and incorporate rollovers within your site to help users navigate: standard rollovers, pointer rollovers or multiple event rollovers
Be productive and use
studio (class) time effectively by...