GRDSN 126: Web Production

Project: Online Publication

Resources:
Common Questions about DreamWeaver

National Association of Photoshop Professionals

KW Media Group: Photoshop TV Podcast

Illustrator Techniques.com

Course Text Book: Designing Web Graphics (DWG) by Lynda Weinman

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.

  1. Determine appropriate software to use for developing web pages by...
    1. researching the software products located in the lab and their capabilities
    2. understanding the strengths and weaknesses of a specific product

      0 1 2 3 4

  2. Design a navigation structure for the website that flows easily, is user friendly and invites interactivity
    (DWG Chapter 7 Navigation)

    0 1 2 3 4

  3. Develop cross platform authoring in the website to avoid browser incompatibility by...
    1. selecting common web colors
    2. using html code that works in various browsers and monitor sizes
    3. making your web page fit within the live area of both Firefox and Safari browsers using a monitor size of 1024x640

      0 1 2 3 4

  4. Design an image to use web safe colors whenever possible. Some continuous tone images may use adaptive color palettes.
    (DWG Chapter 13 Browser Safe Color)

    0 1 2 3 4

  5. Design images to take advantage of Run Length Encoding / Compression
    by...
    1. creating artwork that has horizontal changes in color. This will create a more compressed image (small file size).
    2. creating artwork that has large areas of flat color
    3. creating non-complicated line art and non-dithered images

      0 1 2 3 4

  6. Organize files and use correct web file formats / extensions by..
    1. avoiding complex naming conventions
    2. saving graphic files in gif and/or jpeg formats
    3. using a .gif, .jpg or .htm extensions

      0 1 2 3 4

  7. Create small file sizes so web pages load quickly for the website by...
    1. using hexadecimal colors in tables and backgrounds
    2. reducing the number of colors when possible (using the web, adaptive or exact palettes when saving gif files)
    3. using compression / quality controls to improve file size reduction when saving jpeg files
    4. creating web pages that load in 20 seconds or less on a 28.8 bps modem by checking download time using a website service or computer software
      (DWG Chapter 11 Speedy Graphics)

      0 1 2 3 4

  8. Produce colored text and table cells to...
    1. specify colors for body text, visited links, active links,
    2. to add interest, to use as shape / value or to create navigation buttons using html tables and CSS
    3. use and edit standard template pages (original and modified)

      0 1 2 3 4


  9. 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

  10. Create appropriate anti-aliased type for the following settings: none, sharp, crisp, strong or smooth.

    0 1 2 3 4

  11. Create background tiles, patterns and/or full screen backgrounds that add interest and load quickly by...
    a) creating background images using basic html
    b) creating background images using CSS
    (DWG Chapter 15 Background tiles)

    0 1 2 3 4


  12. Create indexed color images and transparent artwork by...
    1. using the appropriate dithering options
    2. selecting a single color level to be transparent
    3. Create and incoroporate transparent gifs that do not have unattractive white fringes around the edge of the graphics.
      (DWG Chapter 16 Transparent Gifs)

      0 1 2 3 4


  13. Organize information to aid user in readability and navigation by...
    1. changing the color of hypertext links
    2. changing the color of body text
    3. using bullets
    4. using lines
    5. creating navigational buttons that use CSS
    6. using stylesheets
      (DWG Chapter 23 Cascading Style Sheets)

      0 1 2 3 4


  14. Create 3 different layer comps for website development / review.
    (DWG Chapter 5 Comping and Prototyping)

    0 1 2 3 4

  15. Create javascript rollovers that...
    a) use standard styles.
    b) use interactive images and text

    0 1 2 3 4

  16. Create and incorporate the following rollovers within your site:
    multiple addition rollovers, one replacement rollover and one remote rollover.
    (DWG Chapter 18 JavaScript: rollovers and more)

    0 1 2 3 4


  17. Create and incorporate client side image maps.

    0 1 2 3 4

  18. Create user and layer based slices to export as html.
    (Photoshop Visual QuickStart Guide: Imageready)

    0 1 2 3 4


  19. Create background images by...
    a) using non-symmetrical background images that load quickly.
    b) creating directional tiles to create background images that load quickly.
    (DWG Chapter 15 Background tiles)


    0 1 2 3 4


  20. Remove un-necessary spacer gifs from final design.

    0 1 2 3 4


  21. Connect to remote server and upload a file using FTP

    0 1 2 3 4

  22. Create fixed page layouts for quick web production by creating a template.

    0 1 2 3 4

Suggestions for improvement: