Instructor:
L. NIEVES

ART / CGI 221- 82 Fridays 6:00 - 9:30 [ PRINT VERSION ]

[ Defined Homework Page ]

 

 

 

ART / CGI 221 - Students' Midterm Projects - Spring 2005

 

NOTES:

  1. PLEASE REMEMBER TO USE LOWERCASE LETTERS EVERY TIME YOU NAME ANY TYPE OF FILE.
    ALSO, REMEMBER NOT TO ADD SPACES WHEN NAMING ANY TYPE OF FILE. Otherwise, you will encounter many problems with images not displaying and links not working. I will take points off your projects if this occurs.
  2. If I suspect someone else designed your midterm or final project you will get an automatic failing grade, in other words, an "F".

 



 

Class 1 - Fri Sep 2

  1. Syllabus Review
  2. Imageready Intro
    Layers
    Basic Shapes
    Saving Photoshop Files
    Optimizing your graphics as JPEG and GIF.
    Saving your files into a CD

Homework 1:

State the objective of your future midterm site. Answer the following questions.

  1. What's the general description of the site? i.e. retail sales, portfolio, family newsletter, etc.
  2. Who is your target audience? i.e. students, designers, architects, lawyers or friends.
  3. What will be the content of the site? Specify the different areas of information. i.e. introduction, services, portfolio and prices.
  4. Email this homework to lehman students@yahoo.com Please specify your class section and your name in the subject of your email. Also keep this information handy for next class. You should email this info to yourself too. Do not attach a word document. The computers in the lab don't have microsoft word. We will make this document an html file next class.

 

Related Links:
  1. HTML Tutorial
  2. HTML Basics
  3. Color Codes from webmonkey site

 

 

Class 2 - Fri Sep 9 [ top ]

  1. Imageready Review
  2. Optimizing graphics as JPEG and GIF.
  3. Introduction to HTML. Make sure to have the answers for the homework questions. We would make an html document with the info of your homework.

Homework 2:

  1. Design and optimized 2 different graphics. The size of each of your images should be about 400 pixels width and 300 pixels height. Your design might be abstract. Make sure to save your original file as psd.
  2. Optimized each of your images. Save them either as jpeg or gif files.
  3. Create a simple html document and make sure to add these images to it. Name the html file homework2.html.
Related Links:
  1. Choosing a DOCTYPE
    http://www.htmlhelp.com/tools/validator/doctype.html

    We want to declares our documents to be XHTML 1.0 Transitional.
  2. HTML Validator
    http://www.htmlhelp.com/tools/validator/index.html.en
  3. Optimizing Web Graphics
    http://www.webreference.com/dev/graphics/compress.html
  4. XHTML Tutorials
    http://www.freewebmasterhelp.com/tutorials/xhtml

 

 

 

Class 3 - Fri Sep 16 [ top ]

  1. Opening a free geocities account
  2. Uploading the homework html files
  3. Introduction to html tables
  4. Using a mask in Imageready

Homework 3:

  1. Make a list of 8 websites you like. Include a sentence for each URL describing what you find attractive about the site. This homework should be in html format. You will upload this file to a server location next class.
    Example: homework3a.html
  2. Visit the Hex color link to read more about color and pick the hex numbers for the colors that you would like to use for your future midterm website. Create a page displaying the colors that you want to use for your future midterm website. This page should show the colors for you background, link, active link, visited link and text.
    Example: homework3b.html
Related Links:
  1. Intro to tables:
    http://www.w3schools.com/html/html_tables.asp
  2. GIF file compression
    http://www.webstyleguide.com/graphics/gifs.html
  3. JPEG graphics
    http://www.webstyleguide.com/graphics/jpegs.html
  4. Imageready free intro Demos
    http://www.softwaretrainingtutorials.com/image-ready-cs.php
  5. Photoshop tutorials and Resources:
    http://www.pslover.com/

 

 

 

Class 4 - Fri Sep 23 [ top ]

  1. Gif transparency Introduction to tables - tables_intro.html
  2. Designing a graphical navigational tool with imageready. This will be use at the beginning of second level pages. Remind me to add a link to the homepage, I tend to forget un till the end.

Homework 4:

  1. Design the graphical navigation tool you would like to use in your midterm project. You may change your mind about the look of it later on. Implement the colors you picked for homework 3b. Not doing this homework will delay the completion of your future midterm project.
Related Links:
  1. Designing an effective web site navigation:
    http://academictech.doit.wisc.edu/ORFI/wds/Modules/effective
    _nav.htm#navigation
  2. Slice Based Rollovers in Image Ready CS
    http://www.depiction.net/tutorials/photoshop/rolloverscs.php

 

 

 

Class 5 - Fri Sep 30 [ top ]

  1. Adding a rollover effect to your graphical navigation tool.
  2. Designing a homepage in Imageready and adding a hypertext navigation tool to it.


    click for here for NOTES

Homework 5:

  1. Apply the rollover effect to the graphical navigation tool you created for
    homework 4.
  2. Design the homepage for your midterm project.

 

 

Class 6 - Fri Oct 7 [ top ]

  1. Populating second level pages with the proper information
  2. Homepage design review.
  3. Uploading your files to a server location and viewing them.


    click for here for NOTES

Homework 6:

You should be fully working on your midterm project by now. Make sure to create each of your second level pages and try to populate them as much as possible. Make sure your homepage has the look you want for you site.

 

Class 7 - Fri Oct 14 Open Lab Changed to the next class [ top ]

REVIEW

Homework 7:

Finish your midterm project. Maker sure all your graphics are properly optimized and all your links are functional.

Class 8 - Fri Oct 21 MIDTERM PRESENTATION OPEN LAB [ top ]

 

There will be no lecture during open lab. Use this time to finish up your midterm website and to ask me questions. I will be spending individual time with each of you. However, you most make your business to make sure I get to answer your questions. Don't wait to ask your questions when there is only 10 minutes for the open lab to be over. If your site is completely done please make sure to upload it to your server location.

 

Related Links:

Define your site in Dreamweaver MX
http://www.ecommercetemplates.com/tutorials/dwdefine.html
Setting up a site in Dreamweaver
http://www.st-andrews.ac.uk/its/web/dreamweaver/dw031.shtml
Macromedia Dreamweaver: Basics, Layout & Site Planning
http://www.cbtcafe.com/dreamweaver/basics.htm
Dreamweaver Tutorials
http://www.dw-fw-beginners.com/tutorials/drmwvr/

Homework 8 :

Finish your midterm project.

 

 

 

Class 9 - Fri Oct 28 MIDTERM PRESENTATION [ top ]

  1. Dreamweaver review / Defining your Root Folder
  2. Creating a Navigation Tool
  3. Creating Rollovers with Dreamweaver
  4. Editing your html files with Dreamweaver

Homework 9:

  1. Collect the information necessary for the pages you will need to add to your final project. Create these new pages in Dreamwever. If you will keep the same design from your midterm project, just add the new buttons to your psd file. You may also begin to create a new fresh design for your final at this point. Keep in mind that you will need to create a design that will allow remote rollovers. You should have one psd file for your homepage and another psd file for the navigation tool for your second level pages.
  2. Open the psd files that you had previously created for homework 8. These files should contain your edited or new design for the homepage and the graphical navigation tool for second level pages. Add remote rollovers to these two designs.

 

 

 

Class 10 - Fri Nov 4 [ top ]

  1. Creating pointer rollovers- click for notes
  2. Designing Remote rollovers with Imageready
  3. Creating GIF Animations in Imageready
  4. Creating tables in Standard Mode and in Layout View

Homework 10:

  1. Create two gif animations and add them to an html file.
  2. Keep working with the remote rollovers for your homepage and the navigation tool for your second level pages. Begin creating each of your second level pages.

 

 

Class 11 - Fri Nov 11 [ top ]

  1. Remote Rollovers in ImageReady CS - Review
  2. Creating GIF Text Animations in Imageready
  3. Creating Multiple-Event Rollovers in Dreamweaver

Homework 11:

  1. Create two gif animations and add them to an html file.
  2. Keep working with the remote rollovers for your homepage and the navigation tool for your second level pages. Begin creating each of your second level pages.

Related Links:

Remote Rollovers in ImageReady CS
http://www.heathrowe.com/tuts/remoterollovers.asp
Text gif animation
http://romeo-help4u.com/AA/tutorials/PS/index.php?page=ghostly

MULTIPLE EVENT ROLL-OVER TUTORIAL
http://www.bridgewaydesign.com/tutorials/tut_mult_event_roll/mult_event_roll1.htm



Photoshop Tutorials - Rollovers
http://www.pslover.com/click/2603

 

Class 12 - Fri 4/22 [ top ]

  1. Imageready review - remote rollovers
  2. Designing a Second level graphical navigation bar with remote rollovers.
  3. Dreamweaver Review
  4. Creating Image maps in Dreamweaver and in Imageready.

Homework 12:

Finish up the final look of your homepage. Add any necessary links and text to it with Dreamweaver. Tune up your second level page as much as you can.

 

 

Class 13 - Fri 5/6 [ top ]

  1. Imageready review - remote rollovers
  2. Dreamweaver Review
  3. Draggable layers

Homework 13:

Finish up the final look of your homepage. Add any necessary links and text to it with Dreamweaver. Tune up your second level page as much as you can.

 

 


Class 14
- Fri 5/13 Open Lab [
top ]

Homework 14:

Finish your final site. Make sure to visit the link on final guidelines. Make sure your site contains all the necessary requirements.

 


Class 15
- Fri 5/20 Final [ top ]