HCI 201| Multimedia and the World Wide Web
HCI 201 Home Lectures Assignments Resources

spacer Location: Lectures / Lecture 05
spacer
Lecture Plan
Lecture 01
Lecture 02
Lecture 03
Lecture 04
Lecture 05
Lecture 06
Lecture 07
Lecture 08
Lecture 09
Lecture 10
Lecture 05
Midterm review
   
  http://smedia2.is.depaul.edu/ywang10/hci201/midterm.mov
  Midterm is at Oct 7
  This is a written exam: format will include: true/false, if false, how to correct; multiple choice; short Q; & fun extra credit.
   
General
What's the extension of the webpage we make? - htm, html
How to create a hyperlink & email link?
What's IE, Firefox, Safari (web browser); what's Dreamweaver, FrontPage (web authoring software); what's Photoshop (photo processor & digital graphic creator)
Understand in web address, which part is domain name, which part is path, which part is file name
Understand http:// vs. ftp://
Font
Understand FONTS in web, websafe fonts,.
If I want to use CARTOONISH font for heading, what should I do? - create it in graphic package like photoshop, save it as images.
CSS
What's the benefit of CSS? If I want to pipeline the content formatting for a website, what will u suggest me to do? - Create a CSS file, link it to all the webpages in my site, using the style defined in the CSS file.
  Can I change hyperlink color using CSS? - Yes! create customized look for A tag.
Graphic
What is the measurement unit for webpage and digital graphic? - pixel (and it's square)
What's the resolution for web graphic? -72 pixels per inch
What's the 3 image formats most web browser supports? - gif, jpg, png.
What's their difference, when to use what? - gif->can do animation & transparency, but hold only 256 color info; jpg-> good for photos with lossy compression; png, advanced gif
Understand web safe color
Is that wise to drag the image to change the size in web authoring software? what's the solution? - Go to change image size in Photoshop.
If I enlarge a small image to a big one in Photoshop would the image looks good? -No, better prepare big source, and shrink it as needed.
Photoshop
Understand layers concept in photoshop, top block bottom layer, grey checkers-means transparency.
Name a few (2) popular layer effects - drop shadow, emboss, etc.

Understand Canvas size vs. Image size.
Canvas size r ur working area, didn't change the size of ur content;
Image size is changing ur content size, as if u go to a photo print shop as for different size prints.

Understand Photoshop file is a WORKING FILE, end with .psd, you can't use it directly for web authoring, you have to save it as the format web browser supported in order to use it in webpage.