Web Graphics: ART 227

An introductory course in HTML and CSS with an emphasis on design and graphics.

image iconimage iconMichael Curry
image icon image iconBekah Hamson
image icon image iconAllison Balch
image icon image iconAdam Katze
image icon image iconMichael Katz
image iconimage iconNicole Fichera
image iconimage iconGary Pergolini
image iconimage iconMichael Curry
image iconimage iconMike McCourt
image iconimage iconRyan Bresser
image iconimage iconAllison Montague
image iconimage iconLauren West
image iconimage iconDemi Deravedisian
image iconimage iconChrissy Deravedisian
image iconimage iconBrindy Gibbs
Click on an icon to view web site

COURSE SCHEDULE

Schedule subject to changes as the semester progresses
Week 1 – NO CLASS – MLK Holiday

What we'll be doing in class

 


Projects, Tests & Notes

for next week

Week 2

What we'll be doing in class


LESSON:

Start with a Plan!

Audience/objectives

Flow Charts (Site diagrams)

Flow chart link

Site maps

www.apple.com/sitemap/

Wireframes & Prototypes

Read this:Wireframes & prototypes
Printable sketch templates

Hierarchy

Web Layout/hierarchy

Design Process

Web Design Process

LESSON:

Working from a Prototype

Grid Systems for prototypes

Projects, Tests & Notes

MINI PROJECT 1

Building a site together

  • Create the wireframe
  • Start the prototype


NOTE:

All projects must start with a flow chart, wireframe and prototype mock-up!

Notes:

Timothy Kywn Videos
You Tube videos on using Dreamweaver

Paletton.com
Online color scheme generator

For Next Week

READ & WATCH:

CHAPTER 18

— Pages 453–472

CHAPTER 2 "Text"

— Pp 41–60

Dreamweaver videos

Homework:

Complete these tutorials

Week 3

What we'll be doing in class

LESSON:

Create a simple page
HTML starter code
HTML Basics 1.doc
Anatomy of an HTML tag
Intro to CSS div tags

LESSON:

Simple Pages

More about DIV tags
Float & Clear
Text Basics (Ch. 2)

  • Text basics
  • Working in ems

LESSON:

File Management

  • _assets
  • images
  • index.html
  • Managing sites/New Site

Intro to Dreamweaver Interface

  • Setting up your site
  • Workspaces
  • Panels
  • Property Inspector

 


Projects, Tests & Notes

MINI PROJECT 1

Building a site together

  • Finish the prototype

Understanding the HTML
Setting up the DIV tags

 

NOTE:

All projects must start with a flow chart, wireframe and prototype mock-up!

Notes:

Don't Fear the Internet

Quiz #1

for next week

READ & WATCH:

CHAPTER 1 "Structure"

— Pp 13–38

Read:

Any of the books on Adobe Dreamweaver listed in library online database collection that pewrtains to the weekly content of the course.

Watch:

Week 4

What we'll be doing in class

LESSON:

Structure (Ch. 1)

LESSON:

CSS Layout (Chs. 15)



LESSON:

Extra Markup (Ch. 8)

Projects, Tests & Notes

MINI PROJECT 1

Understanding the HTML
Setting up the DIV tags

 

for next week

READ & WATCH:

CHAPTER 3 "Lists"

— Pages 62–72

Homework:

Complete these tutorials


 

Week 5 – NO CLASS – President's Day

What we'll be doing in class

 


Projects, Tests & Notes

for next week

Week 6

What we'll be doing in class

Lesson:

Lists: (Ch. 3)

  • Numbered/Ordered lists
  • Bullet/Unordered lists
  • Definition lists
  • Lists as navigation

Projects, Tests & Notes

Test #1

Link to List Building:

Listamatic

 

for next week

READ & WATCH:

CHAPTER 4 "Links"

– Pages 75–92

Week 7

What we'll be doing in class

Lesson:

Links (Ch. 4)

  • Absolute links
  • Relative links
  • Email links
  • Name Anchors

Projects, Tests & Notes

NavBar 1
NavBar 2
NavBar 3

for next week

Week 8

What we'll be doing in class

Lesson:

Working with Navigation

  • Image sprites

Spry Menus

  • Spry Menus

Projects, Tests & Notes

for next week

Work on Project 1
Week 9 - SPRINGBREAK

What we'll be doing in class

Projects, Tests & Notes

for next week

Week 10

What we'll be doing in class

LESSON:

Images (Ch. 5)

  • Adding images to your page
  • Image formats
  • Optimizing images
  • Smart Objects
  • SVG file format

Projects, Tests & Notes

NOTES:

Adobe Generator

for next week

Week 11

What we'll be doing in class

LESSON:

Simple Animation

  • Animated GIFs

LESSON:

Working with Cascading Style Sheets - CSS3 (Ch. 10)

Projects, Tests & Notes

 

Test #2

for next week

Week 12

What we'll be doing in class

LESSON:

Working with Cascading Style Sheets - CSS3 (Ch. 10)



Projects, Tests & Notes

PROJECT DUE:

Project 2

for next week

Week 13

What we'll be doing in class

LESSON:

Working with Tables (Ch. 6)



Projects, Tests & Notes

for next week

Week 14

What we'll be doing in class

LESSON:

Building Forms (Ch. 7)

  • Validate Form

LESSON:

Styling forms

 


Projects, Tests & Notes

for next week

PROJECT DUE

Week 15

What we'll be doing in class

LESSON:



Projects, Tests & Notes

 

for next week

Week 16

What we'll be doing in class

LESSON:

Adding Interactivity

Show/Hide Image
  • Spry Menus (Fall 2014)

LESSON:

Intro to CSS Transitions

  • CSS Transitions Panel

CSS transitions & Transforms



Projects, Tests & Notes

TEST #3


CSS Drop-down menus

for next week

Week 17

What we'll be doing in class

LESSON:

Validate Document

Link Checker

Metadata

A Few Final Things

Work on Final Project

Projects, Tests & Notes

for next week

Week 18

What we'll be doing in class

FINAL CRITIQUE:

  • Final Project – Due at start of class.

Projects, Tests & Notes

PROJECT:

  • Final Project – Due at start of class.

for next week

SUMMER BREAK!

Student Blog–– Spring 2015
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Student Blog – Fall 2014
Chrissy Deravedisian
Dimi Deravedisian
Solomen Flewellen
Jonathan Fraterman
Brindy Gibbs
Matthew Haegele
Anthony LaVerghetta
David Love
Dale Maultsby
Reiley McCloskey