REVIEW from Week 1
FTP Process - a diagram
Structural Tags HTML, HEAD, TITLE, BODY
Text Tags CENTER, P, BR, B, I
List Tags UL, OL, LI, DL, DD
Pre-formatted Text PRE
Link Tags A HREF=xxx.htm, A HREF=mailto:, A NAME=
File Naming
Font Tag FONT FACE=xx,xxxx,xxx COLOR=
Local vs. Remote Authoring
QUESTIONS from Week 1
more HTML
Graphics tags - IMG, HR
Colors BODY, FONT, TABLE
Table tags TABLE, TR, TH, TD
IMAGES
Vector images (more next week)
Raster images
Resolution
Image resolution
Screen resolution
Bit (Color) Depth (8 bit color vs. 24 bit color)
PHOTOSHOP
Parts of Photoshop
New Images
Image size
Canvas size
Anti-Aliased text
Scanning
IMAGE FORMATS
Graphic Interchange Format (GIF) - advantages and disadvantages
Joint Photographic Experts Group (JPEG/JFIF) - advantages and disadvantages
IMAGES on the WEB - no bigger than necessary and as small as possible.
STYLE CONSIDERATIONS
Site Architecture
Page Metaphor
Page length
Control Issues
Composing text and graphics
Buttons and Icons
Color
Typography
Interface Design
Narrative Sequence
More in Week 4
HTML EDITORS
PageMill
FrontPage
HoTMetaL
MS Word 97
Pagemaker 6.5
REGISTERING your site
ADVANCED TOPICS
Other File Formats (PDF)
Frames
CGI (direct vs. indirect)
Image Maps
Server Side includes
JavaScript
Java
Audio/Video
Shockwave
VRML
Special purpose servers (IMS)
where is HTML going?
READING for further reference
Teach Yourself Web Publishing w/ HTML in one week
Teach Yourself More Web Publishing w/ HTML in one week
Creating Killer Website in particular pp 44-63 (excellent section on color depth, image formats
Interface Design w/ Photoshop, pp. 19-40
READING for next week
West Philadelphia Landscape Plan, Volume 6.
ASSIGNMENT - this week will require a combination of paper and web sites.
- Continue your HTML cheatsheet - turn in one on paper that is as complete as possible
- Scan one small, color image at 72 dpi. Save as a Photoshop file (*.psd).
- Save a copy as a JPEG file (*.jpg). Select NO compression (100%) What is the file size?
- Go back to the Photoshop (*.psd) file and Save a Copy as a JPEG with 80% compression. What is the file size? How is the quality compared to the original scanned image? Repeat this process for 60%, 40%, and 20% and 5% compression rates. What has happened to the image as the compression rate becomes greater.
- Go back to the original Photoshop (*.psd) file and Save A Copy as a GIF file (*.gif). In order to do this, you will need to change the image to Indexed Color first. Use the defaults for the first one. (probably will result in an exact palette) Repeat this process using an Adaptive color palette and the Web color palette. (3 gif images)
- Create a new file in Photoshop that is 100 pixels wide by 30 pixels high. Change the background and foreground colors different, use the text tool to type some text (anything is fine). Make sure the Anti-Aliased box is checked OFF. Change the image to indexed color and save as a GIF file.
- Create a new file in Photoshop that is 100 pixels wide by 30 pixels high. Change the background and foreground to the same as above. Use the text tool to type the same text as above but this time with the Anti-Aliased box checked ON. Change the image to indexed color and save as a GIF file.
- Post all of the images to an /images/ folder INSIDE your /html/ folder on your account. Use WS_FTP to do this (or Fetch on the Mac).
- Create a web page that displays all of these images with text explanations below each image describing what they are, their compression rates, and why you felt this happened. Do NOT post the original Photoshop file.
- Please tell me what the address (URL) to this web page is. You can include any explanations and questions on this page. You do not need to link this page to your home page (index.html) but may do so if you wish.
RELATED WEBSITES
intro | readings | schedule | help | questions
last update: 11 Sept. 1997
|