GDES 45 Online Weekly Instructions
Summer 2011


Week 1 Instructions:

  1. Read the General Class Information Summer 2011 in Angel (http://wvmccd.angellearning.com)
  2. Download the syllabus in Angel under the resources tab near the top.
  3. Watch the video orientation.
  4. Read Chapters 1 and 2 in Learning Web Design.
  5. Read the file under Day 1 Terms named gdes45_day1_terms_fall08.pdf in the week 1 folder.
  6. Assignment 1: Create your first web page by watching the Lecture 1 video tutorial. Recreate the page exactly. In later assignments, you will have more creative freedom. 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.
  7. Read Chapter 3 and Chapter 20 in Learning Web Design.
  8. 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/
  9. 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.
  10. Read Chapters 1 and 2 of The Principals of Beautiful Web Design, 2nd Edition.
  11. Take a look at the file Do's and Don'ts of web design in the weekly folder.
  12. Check out these bad websites for things not to do.
    1. http://www.angelfire.com/super/badwebs/
    2. http://www.siphawaii.com/
    3. http://www.vacaway.com/
  13. Read pages 233-240 in Learning Web Design about color and the hexidecimal system.
  14. 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.
  15. Assignment 3: Create a web page by watching the Lecture 3 video tutorial. For this assignment, please recreate the page exactly. In later assignments, you will have more creative freedom. 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.
  16. 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. There are samples to look at in the weekly folder.
      1. a heading, h1 for example
      2. blockquote
      3. strong
      4. background-color
      5. a list
      Check the calendar for due dates.


Week 2 Instructions

  1. Read Chapters 4,5,7 and 18 in Learning Web Design.
  2. Read the file Building Usable Web Sites(usable_sites.pdf) in the week 2 folder.
  3. Review the web page on image file formats.
    1. https://www.garrettmedia.com/mission/gdes45/gdes45_images.htm
  4. Check out this page on scanning if you don't feel comfortable with scanning.
    1. https://www.garrettmedia.com/mission/gdes45/gdes45_scanning_tips.htm
  5. Finish Assignment 4. Check due dates on the calendar.
    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. There are samples to look at in the weekly folder.
      1. a heading, h1 for example
      2. blockquote
      3. strong
      4. background-color
      5. a list
      Check the calendar for due dates.
  6. Assignment 5: Create 2 web pages like the ones in the videos by watching the Lecture 4 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.
  7. Assignment 6. There are examples in the week 2 folder. Full requirements and instructions listed here: Check due dates on the calendar.
  8. Assignment 7: Create a web page by watching the video tutorials, Lecture 5-1 and 5-2. 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 2 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. 

    Notes on Assignment 7: Revised in spr 12 In the 5-1 lecture, we use vspace and hspace to make space around an image. Current best practice is to use CSS margins instead, which is discussed in Ch. 14 on p.275 of your book Learning Web Design. Using margins is not required on this exercise. We will go over using margins later in the course. After watching lecture 5-2 on creating a banner image, you may want to look at p.347 of Learning Web Design which has an image replacement technique you can use on headings like these. It is not required on this assignment. We will go over the technique later in the course. (Check due dates on the calendar.)

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


Week 3 Instructions

  1. Read Ch. 1 and 2 of your book The Principals of Beautiful Web Design. They are about the layout and composition of web pages(very important), as well as color.
  2. Make sure you have read Ch. 7 and Ch. 18 of Learning Web Design on images.
  3. Read Chapter 8 of Learning Web Design for more information on tables.
  4. 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 area 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.)
  5. Assignment 9: Create a 2 page web site about an item in the news. An item in the news would be something like elections, or the California budget crisis. Try to create a design that is both attractive visually and easy to use.
    Required: 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 https://www.garrettmedia.com/mission/gdes45/gdes45_banner_image.htm and in the Lecture 5-2 video. You can use tables if you want to layout the page, although realize that this method is no longer considered current or best practice. If you want to try to use CSS to layout the page, you can look ahead to Chapter 14-16 in Learning Web Design. However, we will not cover CSS layout together until later. At least 2 tables for some type of data are required. 2 linked web pages are also required. Strive for an organized and effective layout using tables and/or CSS. This assignment will be graded both on the requirements above and on design. There are examples in the weekly folder. (Check due dates on the calendar.)
  6. Review Chapters 18 and 19 of Learning Web Design. They have more information on web graphics and how to optimize them.
  7. 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.)
  8. Read Chapter 11 and chapter 12 pages 203-217 of Learning Web Design. They have more information on css and using css to format text.
  9. 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.) Here is a link to a page on CSS on my website that is mentioned in the video.

Week 4 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. Read Ch. 3 and 4 in The Principals of Beautiful Web Design on texture and typography.
  3. 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 4 folder, and Photoshop help under animation for tips. The requirements are below. Drop your original psd and optimized gif files 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 an appropriately small file size(less than 40k). Use fewer frames and fewer colors to reduce file size.
    • Try to communicate your information effectively and efficiently.
  4. Watch Lecture 9-2 on CSS Selectors
  5. Assignment 13: Complete Exercises 12-1, 12-2, 12-3 and from Learning Web Design. Save as 3 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.)
  6. Watch the Lecture 10 video on the css box model.

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

  8. 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.)

  9. 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 in the week 3 folder. 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 4 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.

  10. Watch the Lecture 11 video on css floats and positioning.
  11. Review Chapter 15 of Learning Web Design. It has more information on css floats and positioning.
  12. 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.)
  13. It's been a lot of work, but there are only a few assignments left the rest of the class!

Weeks 5 and 6 Instructions

  1. Read Ch. 5 in The Principals of Beautiful Web Design on imagery.
  2. Assignment 17: Do comps or a Creative Brief for the final Project. You do not have to do both(see instructions below under Final Project). See samples of comps, creative briefs and final projects in the weekly folder. Drop your .psd(photoshop files of your comps) or your Word or PDF file of your creative brief into the Assignment 17 Drop Box.
  3. 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.)
  4. Read Chapter 16 of Learning Web Design. It has more information on Page Layout with CSS
  5. Watch the Lecture 12 video on Page Layout with CSS. It covers exercise 16-1.
  6. 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.)
  7. Read Chapter 9 of Learning Web Design. It has more information on Forms.
  8. Watch the Lecture 13 video on creating forms. It covers Assignment 19.
  9. Assignment 19: Create 1 web page by watching the video tutorial on forms and duplicating the procedure. Drop your file into the Assignment 19 drop box. (Check due dates on the calendar.)
  10. Review Chapter 17 on CSS Techniques in Learning Web Design. It has more information on CSS techniques like lists for navigation and image replacement.

  11. Watch the Lecture 14 video on CSS techniques.

  12. Assignment 20(Extra Credit): For extra credit, complete exercise 17-2. Save as 2 different files, DesignA and DesignB. Drop your file into the Assignment 20 drop box. (Check due dates on the calendar.)

  13. Usability Testing: There is no beta test on the Final Project required this summer although it is a good idea to show your designs to other people throughout the design process to see ways to improve your design. You can also check out the following links to learn about usability testing. I would especially look at the Steve Krug Video and book below.
  14. Usability Testing
  15. After the due date, take a look at other students final projects in the drop box, and post your comments about their design in the Final Project Discussion Forum in the final weekly folder.
  16. All late assignments must be turned in by July 15.
  17. Take the class exit survey under the lessons tab for more extra credit.

The Final Exam

The Final Exam will be taken on Angel at 7pm Friday, July 15. Let me know if you cannot take it at that time.
There are approximately 80 questions.
The questions are multiple choice, matching and true false.
The questions will cover information found in the videos, exercises and files used throughout the course.
Login to Angel at 7PM and look under the lessons tab for the exam.
You have 2 hours to complete the exam.
Do not use the save button if visible.
Click the submit button only when you are finished.