GDES 45 Online Weekly Instructions Fall09

• All video tutorials and lectures can be seen at
  http://streaming.missioncollege.org/mgarrett/media/gdes45_online_videos.htm
• Check due dates on the calendar in Angel
• All book related files can be downloaded from http://www.learningwebdesign.com/materials/index.html
• If you have general questions, ask them in the discussion forum in the lessons folder in Angel.
• Here is a link to a pdf of the entire Photoshop help file as a PDF.
  

Week 1 Instructions:

1. Watch the video orientation if you missed the real one.
2. Read Chapters 1 and 2 in Learning Web Design.
   
3. Read the file under Day 1 Terms named gdes45_day1_terms_fall08.pdf in the week 1 folder.
4. Assignment 1: Create your first web page by watching the Lecture 1 video tutorial. You may need to install quicktime on your computer. Drop the file in the Assignment 1 drop box. Include your name in the file name as in mark_garrett_page1.htm. Check the calendar for due dates.

Week 2 Instructions:

1. Read Chapter 3 and Chapter 20 in Learning Web Design.
2. Also take a look at the Phases of production from the book Web Redesign Workflow that works. See it at http://www.gotomedia.com/goto/redesign/
3. Assignment 2: Create your second web page by watching the Lecture 2 video tutorial. Recreate the page exactly. You may need to install quicktime on your computer. Drop your file in the Assignment 2 drop box. Name the file page2.htm with your name in the file name as in mark_garrett_page2.htm. Check the calendar for due dates.

Week 3 Instructions:

1. Read the file Do's and Don'ts of web design in the week 1 folder.
2. Check out the worlds worst website for things not to do.
   1. http://www.angelfire.com/super/badwebs/
3. Read pages 233-240 in Learning Web Design about color and the hexidecimal system.
4. Check out these pages on color schemes and color pickers.
   
   1. http://www.color-wheel-pro.com/color-schemes.html
   2. http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
      This color scheme tool make comiing up with color schemes easier.
      
   3. http://kuler.adobe.com/#themes/mostpopular?time=30
      This is a cool color picker and theme collection from adobe.
5. Assignment 3: Create a web page by watching the Lecture 3 video tutorial. For this assignment, please duplicate the page from the video exactly. You may need to install quicktime on your computer. Drop your file Assignment 3 drop box. Name the file page3.htm with your name in the file name as in mark_garrett_page3.htm. Check the calendar for due dates.
   
6. You can begin Assignment 4 which is:
   
   1. Create 1 basic web page on your own with 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take 2 items from each chapter. Use the tags we went over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. You must use the following tags, elements, or css styles at least once.
      
      1. br
         
      2. blockquote
         
      3. hr
      4. strong
      5. background-color
      6. a list
      Check the calendar for due dates.

Week 4 Instructions:

1. Review Chapters 5 and 6 in Learning Web Design. Chapter 5 covers many of the text tags we have been using. Chapter 6 covers links.
2. Read Pages 1-32 of your book The Principals of Beautiful Web Design.
3. Read pages 1-16 of the file Building Usable Web Sites(usable_sites.pdf) in the week 4 folder.
4. Review the web page on image file formats.
   1. http://www.garrettmedia.com/mission/gdes45/gdes45_images.htm
      
5. Check out this page on scanning if you don't feel comfortable with scanning.
   
   1. http://www.garrettmedia.com/mission/gdes45/gdes45_scanning_tips.htm
6. Finish Assignment 4. Check due dates on the calendar.
   1. Create 1 basic web page with 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take 2 items from each chapter. Use the tags we went over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. There are examples in the week 4 folder. You must use the following tags, elements, or css styles at least once. Drop your file into the Assignment 4 drop box.
      1. br
         
      2. blockquote
         
      3. hr
      4. strong
      5. background-color
      6. a list
7. Assignment 5: Create 2 web pages by watching the video tutorial. Chapter 6 in Learning Web Design also can help. Drop your 3 files into the Assignment 5 drop box. Name the files page4.htm and page5.htm, and also include your image file. The link to the page about image file formats is above. The image will not show up for me unless you send it along with your html files. To turn in assignments with multiple files, it works best if you put all 3 files(2 html pages and 1 image) in a folder and zip the folder. To zip a folder on a PC, create a folder and put the files needed in it, then right click, select "send to," and finally "compresses (zipped) folder." On a mac, control click or right click on the folder and select compress. Check due dates on the calendar.
   
8. You can begin Assignment 6. There are examples in the week 4 folder. Full requirements and instructions listed here:http://www.garrettmedia.com/mission/gdes45_online/gdes45_online_assignment6_summer.htm Check due dates on the calendar.

If you have general questions, ask them in the discussion forum in the lessons folder.

Week 5 Instructions:

1. Read pages 17-30 of the file Building Usable Web Sites(usable_sites.pdf) in the week 5 folder.
2. Make sure you have read Pages 1-32 of your book The Principals of Beautiful Web Design.
3. Read Ch. 7 and Ch. 18 of Learning Web Design on images.
4. Review the web page on image file formats.
• http://www.garrettmedia.com/mission/gdes45/gdes45_images.htm
5. Check out this page on scanning if you don't feel comfortable with scanning.
• http://www.garrettmedia.com/mission/gdes45/gdes45_scanning_tips.htm
6. Finish Assignment 6. (Check due dates on the calendar.)
• Full requirements and instructions listed here: http://www.garrettmedia.com/mission/gdes45_online/gdes45_online_assignment6_summer.htm
7. Assignment 7: Create a web page by watching the video tutorial. You may need to install quicktime on your computer. Drop your files into the Assignment 7 drop box. Be sure to include all image files. Zip a folder with all your files and drop the zipped file into the drop box. (See week 4 for help) The link to the page about image file formats is above. Remember, the images will not show up for me unless you send it along with your html files. (Check due dates on the calendar.)
   

If you have general questions, ask them in the discussion forum in the lessons folder.

Week 6 Instructions:

1. Read Chapter 8 of Learning Web Design for more information on tables.
2. If you haven't already done so, read pages 23-37 of your book The Principals of Beautiful Web Design. It's about the layout and composition of web pages.
   
3. Assignment 8: Create a web page like the one in the video lecture by watching the video tutorial. The link to the videos is in the lessons folder. Drop your files into the Assignment 8 drop box. Be sure to include all image files. You can use the image shown in the video for background images, or one of your own. The image is in this week's lessons folder. The images will not show up for me unless you send it along with your html files.  (Check due dates on the calendar.)
4. Start Assignment 9: Create a 2 page web site about an item in the news. An item in the news would be something like the Iran elections, or the California budget crisis. Create and use at least 1 banner/text image and use tables and/or CSS to lay out the pages. Instructions on creating a banner image can be seen here http://www.garrettmedia.com/mission/gdes45/gdes45_banner_image.htm and in the Lecture 5-2 video. Strive for an organized and effective layout using tables and/or CSS. At least 2 tables are required. This assignment will be graded both on the requirements above and on design. There are examples in the week 6 folder. The drop box in in the Lessons folder, not in a weekly folder. (Check due dates on the calendar.)

Week 7 Instructions:

1. Review Chapters 18 and 19 of Learning Web Design. They have more information on web graphics and how to optimize them.
2. Assignment 10: Clean up and optimize the soldier1.psd image by following the procedure in the Lecture 7-1 video. The link to the videos is in the lessons folder. The original image is in this week's lessons folder.  Drop your finished image file into the Assignment 10 drop box.  (Check due dates on the calendar.)
3. Continue Assignment 9: Create a 2 page web site about an item in the news. An item in the news would be something like the Iran elections, or the California budget crisis. Create and use at least 1 banner/text image and use tables and/or CSS to lay out the pages. Instructions on creating a banner image can be seen here http://www.garrettmedia.com/mission/gdes45/gdes45_banner_image.htm and in the Lecture 5-2 video. Strive for an organized and effective layout using tables and/or CSS. At least 2 tables are required. This assignment will be graded both on the requirements above and on design.There are examples in the week 6 folder. The drop box in in the Lessons folder, not in a weekly folder. (Check due dates on the calendar.)

Week 8 Instructions

1. Read Chapters 11 and chapter 12 pages 203-217 of Learning Web Design. They have more information on css and using css to format text.
2. Assignment 11: Complete Exercise 11-1 from Learning Web Design using the same code as in the Lecture 8 video from this week. Drop your finished files into the Assignment 11 drop box. (Check due dates on the calendar.) All book related files can be downloaded from http://www.learningwebdesign.com/materials/index.html.
   Here is a link to a page on CSS on my website that is mentioned in the video.
3. Finish Assignment 9: Create a 2 page web site about an item in the news. An item in the news would be something like the Iran elections, or the California budget crisis. Create and use at least 1 banner/text image and use tables and/or CSS to lay out the pages. Instructions on creating a banner image can be seen here http://www.garrettmedia.com/mission/gdes45/gdes45_banner_image.htm and in the Lecture 5-2 video. Strive for an organized and effective layout using tables and/or CSS. At least 2 tables are required. This assignment will be graded both on the requirements above and on design.There are examples in the week 6 folder. The drop box in in the Lessons folder, not in a weekly folder. (Check due dates on the calendar.)

Week 9 Instructions

1. Read Chapter 12 pages 217-232 of Learning Web Design. It has more information on css selectors and using css to format text.
2. Assignment 12: Your assignment is to create an animated gif using any software necessary that will promote a product for sale. Watch the Lecture 9-1 video on animated gifs for tips. Do not recreate the exact animation from the video. You can also look at the animated_gifs.pdf file in the week 9 folder, and Photoshop help under animation for tips. The requirements are below. Drop your psd of your file and the final gif file into the Assignment 12 drop box. (Check due dates on the calendar.)
   • You may use an image of the product from a website or catalog as a component of your animation, but you must create your own original animation.
   • This will be the size that was used in the video, 160 pixels x 600 pixels.
   • The animation must be between 4 and 15 frames and must be an appropriately small file size(less than 40k).
   • Remember gifs like images with fewer colors.
   • Try to communicate your information effectively and efficiently.
   • There are samples to view in the weekly folder.
   • Refer to animated_gifs.pdf from Learning Web Design 2 and Photoshop help under frame animation for help. Here is a link photoshop CS4 help on frame animation.
     • Here is a link to a pdf of the entire Photoshop help file as a PDF.
3. Watch Lecture 9-2 on CSS Selectors
4. Look at exercise 11-2 on Page 194 if your book. It is a continuation of your assignment from last week. It uses an inline style. You do not have to turn it in.
5. Assignment 13: Complete Exercises 12-1, 12-2, 12-3 and from Learning Web Design. Save as separate files using the exact code from the book. Drop your finished files into the Assignment 13 drop box. (Check due dates on the calendar.)

Week 10 Instructions

1. Watch the Lecture 10 video on the css box model.

2. Read Chapter 14 of Learning Web Design. It has more information on the css box model.

3. Assignment 14: Complete Exercises 14-1, 14-2 and 14-3 from Chapter 14 of Learning Web Design. Drop your finished files into the Assignment 14 drop box. Save as 3 separate files using the exact code from the book. (Check due dates on the calendar.)

4. Assignment 15: Using the file web_critique_criteria.pdf as a guide, evaluate another student's Assignment 9 submission. The submissions are in the assignment 9 drop box. Critique the persons submission who is in the folder below yours. If you are at the bottom of the list, do the person's at the top. Look at their pages and come up with 5-10 comments, observations or suggestions to give them feedback on their design. The idea is to help them see the design with a fresh perspective, and improve their future designs. Again, you can use the file web_critique_criteria.pdf to help with ideas of things to talk about. Post your comments in the Assign. 15: Discussion Forum for critique of Assign. 9 in the week 10 folder. Make sure to say in your post title who's pages you are evaluating. (Check due dates on the calendar.)

   If you have general questions, ask them in the discussion forum in the lessons folder.

Weeks 11 Instructions

1. Read pages 99-123 in The Principals of Beautiful Web Design on typography.
2. Watch the Lecture 11 video on css floats and positioning.
3. Review Chapter 15 of Learning Web Design. It has more information on css floats and positioning.
4. Assignment 16: Complete Exercises 15-1, 15-2 and 15-3 from Chapter 15 of Learning Web Design. Save as 3 separate files using the exact code from the book. Drop your finished files into the Assignment 16 drop box. (Check due dates on the calendar.)
5. Assignment 17: Do comps or a Creative Brief for the final Project(see instructions below under Final Project). See samples of comps, creative briefs and final projects in the weekly folder. Drop your finished files into the Assignment 17 drop box in the lessons folder(not the weekly folder).
6. Final Project: Begin Final Project. Make sure to check requirements and specifications in the project description(click here for description). See samples of comps, creative briefs and final projects in the weekly folder. There is a drop box for the comps or briefs in the lessons folder. (Check due dates on the calendar.)

Weeks 12 Instructions

1. Read Chapter 16 of Learning Web Design. It has more information on Page Layout with CSS
2. Watch the Lecture 12 video on Page Layout with CSS. It covers exercise 16-1.
3. Assignment 18: Complete Exercises 16-1, 16-2 and 16-3 from Chapter 16 of Learning Web Design. Save as 3 separate files. Drop your finished files into the Assignment 18 drop box. (Check due dates on the calendar.)
4. Continue Final Project. Make sure to check requirements in the project description. Don't worry yet about the beta-testing yet . See samples of comps, creative briefs and final projects in the weekly folder. (Check due dates on the calendar.)