HCI 201| Multimedia and the World Wide Web
2007
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
  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
Do htm files include image files you import? how does it works? -no, 1. u need the picture files along with the htm files; 2. u need to locate the picture files in ur htm file with correct relative path.
How does a link usually looks like? (1. blue; 2. underlined; 3. have a brower hand while mouse over)
How to create a hyperlink & email link?
What does "alt" stand for and what's the use of it.
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
Naming your files, you can use ~ _ - . no space and other funny characters
Understand Server and Local - you need to copy your local webfiles to server in order to have others view your webpages. - server->ftp://... ; local-> C:...
Table
What do we use to create web layout by now? - table(s), nested tables.
Understand what is table border/cell space/cell pad
Understand what's page's background/table's background/cell's backgroud. Instead using a web color, you can also use background image.
What are the 2 options to set width and height when we creating layout? - pixel or %
Why sometimes we need t.gif (1*1 transparent graphic file) to help use format table & layout? - insert that transparent dummy gif file, let the cell obey our setting for the width and height.
Font
Understand FONTS in web, 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? -72ppi (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(about 217 kind color); what's the solution if the color you want to use is not in websafe color? - create your own color dot picture file with jpg format.
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.
Action
What's going on with mouse over action with graphic btn? - it swap into another image file while you have your mouse over, and swap back to the original one while you take your mouse away.
Understand design principles such as alignments, I might ask ur suggestion of how to improve my design of webpages.