CS 181 - Electronic Publishing on the WWW * ~ CLASSROOM SUPPLEMENTS ~ Week 1

 

Tuesday:

Page Loading Optimization

Adding sounds and media to web pages

More fun - CSS buttons: http://www.westciv.com/style_master/house/tutorials/quick/buttons/index.html

Styles sheets for specific purposes like printing

HTML Design Principles :W3C Working Draft 26 November 2007 -

http://www.w3.org/TR/2007/WD-html-design-principles-20071126/#interoperability

Thursday:

Hosting

Metatags

Forms

Thumbnails

Simple photo editing programs (all of these have good support):

HTML editors:

 

Style sheets for specific purposes

How is a printed page different than a screen?

  • fixed size (8-1/2 X 11 inches typically)
  • color limitations (even on color printers)
  • focus on the information - not the extras on the screen

You can provide a print icon on pages that leads to a page formatted with a different .css. This style sheet can

  • remove the background of the page
  • make sure all backgrounds are white
  • change all text color to black
  • make the text large enough so that the page can be easily read when printed
  • change the links so that they don't print differently than the rest of the text
  • maybe changing the font to serif which is considered easier to read in print
  • removing any and all nonessential images - anything not critical to conveying the content of the page (navigation buttons, most ads and animated images.

Printing.css

You can make media-specific style sheets for:

  • computer screen (although you shouldn't specify this)
  • printer
  • television
  • projection screen
  • handheld
  • braille
  • embossed
  • text-only
  • aural

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />

<link rel="stylesheet" type="text/css" href="printing.css" media="print" />

<link rel="stylesheet" type="text/css" href="printing.css" media="print, projector" />

 

 

 

 

 

 

 

 

  Janet Sedgley ~ 370-4796 (9 am to 9 pm) ~ office hours by arrangement