Quick Links
CG213
Instructor: Chrono Ho
Class time and location: Mon, Friday 5:00 - 6:00 p.m. | TBA
Class Description
This course explores design concepts for the World Wide Web (WWW) while developing expertise in web-based typography, image file formats and sizes, hexadecimal color, frames, cascading style sheets, tables, and site interactivity. Emphasis is placed on the understanding of browser constraints, hypertext markup language (HTML), site planning, and site structure.
Prerequisites: GD110 Digital Design or both GD141 Digital Illustration and GD142 Digital Imaging. PT207 Digital Photography may be substituted for GD142 Digital Imaging.
Open Lab Hours
Click HERE for the open lab schedule.
Class Material
Instructions for class projects
Online articles for class:
- http://www.addedbytes.com/articles/for-beginners/html-for-beginners - HTML tutorial
- http://webaim.org/intro Introduction to Web Assessibility
- http://johnpolacek.github.com/scrolldeck.js/decks/responsive What is Responsive Web Design
- http://www.slideshare.net/vitalyfriedman/responsive-web-design-clever-tips-and-techniques#btnNext Tips about Responsive Web Design
- http://www.addedbytes.com/cheat-sheets/css-cheat-sheet CSS Cheat Sheet
- http://www.addedbytes.com/cheat-sheets/html-cheat-sheet HTML Cheat Sheet
- http://webstyleguide.com/wsg3/3-information-architecture/index.html Information Architecture
- http://webstyleguide.com/wsg3/4-interface-design/index.html Interface-design
Web resources
- www.w3schools.com/html/default.asp - Basic of HTML, Description and examples of usages of HTML tags.
- www.lipsum.com - Loren Ipsum Generator. Use it when you text filler on your initial design stage.
- ColorSchemeDesigner.com - Useful resource for experimenting hormonious color schemes.
- www.cssnewbie.com/super-simple-horizontal-navigation-bar Make use of CSS "float" and pseudo-class propertie to create a horizontal navigation.
- studentweb.mvcc.edu/resources/rollover_using_single_image Rollover : Create navigation menu using single image with CSS
- studentweb.mvcc.edu/resources/rollover_using_individual_images Rollover: Create buttons using an image with CSS
- www.barelyfitz.com/screencast/html-training/css/positioning CSS Position: Static, fixed, relative, absolute
- buildinternet.com/2008/11/how-to-center-a-website-with-css tutorial on how to center your page
-
CSS Lightbox Tutorial on how to a image gallery (lightbox) style using CSS
-
studentweb.mvcc.edu/resources/sample/div_display.html Masking Content with DIV (Alternative approach to iframe)
Assignment highlights
- Process notebook and the website of Project No.3 (Single Page Site) are due Monday, April 4, 2013. A review of creative process is due on March 25. I expect you bring sustantial progress to the class and question you have in order for you to complete the actual Web page.
- There is a summary report due on March 25. Make sure to check back for the article.
- Spend some time to review and organize your current site. Fix and make changes if necessary. We may regrade your index page after the break.
Assignment highlights
- Process notebook and the website of Project No.2 are due Monday, March 4, 2013. I will grade all your project files from my web broswer. That means you should make sure all your style sheet, images, pdf, are uploaded and linked properly. Test your site carefully.
- Update links of your index page so that I can get to your project No.2 from there.
- Study CSS Position: Static, fixed, relative, absolute. Recreate Figure No. 1,No. 2, No.3 using Position (CSS property). Save files as web pages and name them as position1.html, position,2.html, and position3.html. You should apply embedded CSS on each page. Create hyperlinks that goes to those pages under "Thoughts on Web Design" section of your index page. All pages are due on Friday, March 1, 2013.
Assignment highlights
- The reflective summary of Articles (No.7 and 8 under Online articles for class.) are due Friday, Feb. 22, 2013
- Prepare for process notebook of Project 2 for discussion on Monday, Feb 18, 2013
Your submissions of article summary must address:
- An overview of the article (in your own words)
- Things you have learned from the article
- What are the implications / issues/ challenges regarding to the topic in terms of Web design
- Suggestions / solutions of those issues as a Web designer.
Technical requirements of your summary submission:
- Include the following information: Your first and last name, submission date, Course info (Example: Independent Studies for CG213 Graphic Design for WWW), Instructor's name.
- Provide the URL and the article title.
- One page, double-spaced, 12pt font
- Saved in .doc / .pdf format
- Upload your files to your studentweb folder
- Create hyperlinks for your submissions(pdfs) under a section called "My thoughts on Web design" on your index page. If the links doesn't exist or aren't functional on the page by the specified deadlines, you will NOT receive credit for the assignments.
If you have any questions, please contact me at cho@mvcc.edu.
Contact Information
315-731-5826
cho@mvcc.edu
Office Hour:
Friday: 12 p.m. - 4 p.m.