PCC Art 198, Spring Semester 2012

Design for the Internet

Pat Rees

Pat Rees

Pasadena City College Web Producer and Visual Arts and Media Studies adjunct faculty. Trained as a fine artist in painting, then working in banking systems and project management for many years, and finally returned to design when the Internet explosion began. Considered to be an expert on accessibility for education, oversees 5,000+ dynamically generated web pages for Pasadena City College and still has time to paint portraits. Talent highlights include an understanding of content management systems, project development, form design and usability, and team collaboration. One of the founders of the Work-Based Learning Program at PCC that allows college students to transition into industry by first having a paid internship on campus. Performs consulting and freelance web work with a focus on accessibility and web standards.

Contact: 626-585-7731, parees @ pasadena.edu


Prerequisite(s): Photo 30 or portfolio. Introduction to the design and creation of websites.

Exploration of:

Use of HTML, server side applications, and interactive multimedia elements (Adobe Dreamweaver, Photoshop, Fireworks, Acrobat) to explore simple to complex interactive projects for the Web. Creation of a "real world" website designed in an interdisciplinary team environment. Emphasis on project management and conceptual skills that comprise well-designed Web sites; an interdisciplinary course. Recommended enrollment in Art 110B. Total of 36 hours lecture and 72 hours laboratory. Grading: Letter Grade Only

Course Materials

  Link to Weekly Details and Assignments

Topics Covered

Week 1


Feb 24
  • Web terminology, basic html structures, web standards
  Feb 26 Thursday
  • Dreamweaver interface, Creating the Sampler with Dreamweaver
  • Xtreme Resume tutorial assignment overview (due 3/6)
Simple XHTML file with at least 3 elements
Week 2 Mar 3 Tuesday
  • Validation, sematic structure, CSS, presentation vs. structure, accessibility,
  • Xtreme Resume tutorial, concepts, view past student examples
  • Inspiration, being a sponge



  Mar5 Thursday
  • Images
  • CSS basics and XHTML semantics review
Week 3 Mar 10 Tuesday
  • Fireworks tutorial, preparing web graphics
  • Assign Newsletter Project
  • Xtreme Resume tutorial work in class

resume in text


  Mar 12 Thursday
  • Review best practice XHTML and CSS for resumes
  • Design and color concepts
  • Preparing images for web, background images
3 admired sites and comments on 2 classmates choices @ yahoo group
Week 4 Mar 17 Tuesday
  • Critique Resume Projects
Xtreme Resume due
  Mar 19 Thursday
  • Overview Newsletter Project layout in Dreamweaver with Fireworks header
  • Box model, begin positioning
Newsletter "Mood Board" due
Week 5 Mar 24 Tuesday
  • CSS layout design techniques: floats
Newsletter Mashead image
  Mar 26 Thursday
  • Layout gymnastics and positioning
  • CSS Zen Garden
Float practice homework
Week 6 Mar 31 Tuesday
  • No Class - Cesar Chavez Day

Email me your newletter composition/layout as a pdf

Any RE-DO of xtreme-resume project due.

  Apr 2 Thursday
  • Dreamweaver CSS Layouts - Adobe On Demand Seminar Stephanie Sullivan - Creator of layouts in DW CS3
Week 7 Apr 7 Tuesday
  • Newsletter crit and re-do
  Apr 9 Thursday
  • Navigation - styling links and lists
Newsletter Project
Week 8
Mid Term Week!
Apr 14


  • review layout, divs and html
  • layout, 2 & 3 column, fixed and liquid
  • layout, 2 & 3 faux (background image) columns, fixed and liquid
  • bugs and hacks
  Apr 16 Thursday
  • exam
  • deconstructing websites with Firefox and Web Developer toolbar
creative brief and personal for final Web project
Spring Break Apr 20 - 25    
week 9 Apr 28 Tuesday
  • Creating a site map, site folder structure and prototype site

beginning sketches and inspiration resources for final site

Any RE-DO of newsletter projects due.

  Apr 30 Thursday
  • Review of site map for student project site with creative brief

site map


Week 10 May 5 Tuesday
  • Creating a site design comp in Fireworks and exporting site image files.
  May 7 Thursday
  • Testing protototype for student project site with class "users" .
  • Begin converting layout design to html page with css layout and styles.
site prototype
Week 11 May 12 Tuesday
  • In class crit of project comps.
  • Finish converting layout design to html page with css layout and styles.
Final Project Comp
  May 14 Thursday
  • Creating DW Template to control pages, editable regions and additional pages for case study
Week 12 May 19 Tuesday
  • Javascript for Case Study - random image and swap gallery photo from thumbnail. How to edit the JavaScript for your site.
  • CSS hover for zoom and rollover image display
  • DW CS3 Spry features
  May 21 Thursday
  • Forms – accessible.
  • Web 2.0 features
Week 13 May 26 Tuesday
  • Data tables
  • Print, presentation, handheld and alternate style sheets
  • DW Libraries - another way to control site content.
  • Batch processing images: Fireworks, Bridge
  • Site connection to remote host
    Upload and download, check in/out
  May 28 Thursday
  • Overview - Embedding multimedia in your site: QT movie, Flash movie, sound (mp3),
  • Overview - Progressive download vs. streaming, live webcasting.
  • Overview - Podcasting.
  • Creating and linking to PDFs

Week 14 Jun 2 Tuesday
  • Adding Paypal, blogs (WordPress), Twitter, Flickr, YouTube and RSS
  Jun 4 Thursday
  • Class choice
Week 15 Jun 9 Tuesday
  • PHP overview. Dynamic content web content.
  • PHP Forms: Case Study - Contact form
  Jun 11 Thursday
  • PHP: Case Study - Image Gallery
  • Final case study complete zipped files
Week 16 Jun 16 Tuesday
  • lab time
  Jun 18 Thursday
  • Final in class crit - project web sites
About Us | Site Map | Privacy Policy | Contact Us