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
Session 1

In class today:

First class:

  • Introductions
  • Syllabus overview

LESSON:

Internet & WWW


LESSON:

Getting Started

Audience/objectives

Flow Charts (Site diagrams)

Site maps

Wireframes & prototypes
Templates
Hierarchy
Design Process

LESSON:

Working from a Prototype

Useful links:

Grid Systems for prototypes

Projects & Tests

MINI PROJECT 1

Building a site together

  • Create the wireframe
  • Start the prototype
  • 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

Homework

READ & WATCH:

CHAPTER 18 "Process & Design"— Pp. 453–472

CHAPTER 2 "Text" — Pp. 41–60
CHAPTER 8 "Extra markup"

Dreamweaver videos

Complete these tutorials

Session 2

In class today:

LESSON:

Create a simple page


LESSON:

Basics of HTML
Text Basics (Ch. 2)

  • Text basics
  • Working with ems

Extra Markup (Ch. 8)

Projects & Tests

MINI PROJECT 1

Building a site together

  • Finish the prototype

Understanding the HTML
Setting up the page divisions


Quiz #1



Notes

Don't Fear the Internet

Homework

READ & WATCH:

CHAPTER 1 "Structure" — Pp 13–38
CHAPTER 8 "Extra markup"

Read:

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

Watch:

  • YouTube videos on Dreamweaver CC
  • Adobe videos on Dreamweaver CC, which I'll try to post in this column

Complete these tutorials

 

Session 3

In class today:

LESSON:

File Management

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

LESSON:

Intro to Dreamweaver Interface

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

 

LESSON:

Structure (Ch. 1) & Extra Markup (Ch.8)

LESSON:

Basics of CSS (Ch. 10)

Syntax
Intro to CSS div tags
Selectors & Declarations
Styles
  • Inline, Embedded & External
Cascade
Inheritence

Projects & Tests

MINI PROJECT 1

Understanding the HTML
Setting up the page divisions

Quiz #2

Notes

HTML Character codes

Text file

Homework

READ & WATCH:

CHAPTER 3 "Lists"

— Pages 62–72

Complete these tutorials


 

Session 4

Projects & Tests



MINI PROJECT 1

From Photoshop to Dreamwaever

Notes

Homework

READ & WATCH:

CHAPTER 4 "Links"

– Pages 75–92

Session 5

In class today:

Lesson:

Lists: (Ch. 3)

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

Lesson:

Working with Links (Ch. 4)

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

Projects & Tests

Test #1

 

Notes

Listamatic

NavBar 1
NavBar 2
NavBar 3

Homework

READ & WATCH:

CHAPTER 10 "Intro to CSS",
CHAPTER 11 "Color", &
CHAPTER 12 "Text"

Session 6

In class today:

Lesson:

More CSS

Homework

READ & WATCH:

Pages 471–472,

Session 7

In class today:

Lesson:

Working with Navigation

  • Image sprites

Menus

  • CSS Menus

Projects & Tests

Intro to PROJECT #1

Notes

Homework

READ & WATCH:

CHAPTERS 5 & 16 "Images"

Faculty In-Service



Session 8

In class today:

LESSON:

Working with Images (Ch. 5)

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

Projects & Tests

Quiz #4

Notes

 

Adobe Generator

Generator video

ExtractAssets video

Homework

READ & WATCH:

CHAPTER 10 "Intro to CSS",
CHAPTER 13 "Boxes",
CHAPTER. 15 "Layout", &
CHAPTER 17 "HTML5 Layout"

 

Session 9

In class today:

LESSON:

Simple Animation

  • Animated GIFs

LESSON:

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

Projects & Tests

 

Notes

 

 

Homework

READ & WATCH:

CHAPTER 10 "Intro to CSS",
CHAPTER 13 "Boxes",
CHAPTER. 15 "Layout", &
CHAPTER 17 "HTML5 Layout"

Session 10

In class today:

LESSON:

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

Projects & Tests

Notes

Homework

READ & WATCH:

CHAPTER 6 "Tables"
CHAPTER 14 "Lists, Tables & Forms"

 

Session 11

In class today:

LESSON:

Working with Tables (Ch. 6)

Projects & Tests

Quiz #4

Notes

:nth child() selector

Homework

READ & WATCH:

CHAPTER 7 "Forms"
CHAPTER 14 "Lists, Tables & Forms"

Session 12

In class today:

LESSON:

Working with Forms (Ch. 7)

  • Validate Form

LESSON:

Styling forms

 


Projects & Tests

Notes

20+ Best HTML Forms

Homework

Session 13

In class today:

LESSON:

Adding Interactivity

  • Behaviors
  • Swap Image
  • Show/Hide Image

LESSON:

Intro to CSS Transitions

  • CSS Transitions Panel

CSS transitions & Transforms



Projects & Tests

TEST #2


Notes

CSS Drop-down menus

CSS Slideshows

Homework

Session 14

In class today:

LESSON:

Checking for Errors

Validate Document

Link Checker

Metadata

A Few Final Things


Fonts:

  • Using ems
  • Google fonts

Projects & Tests

Notes

Homework

 

Session 15

In class today:

PROJECT:

  • Final Project Workday

Projects & Tests

 

Homework

PROJECT:

  • Final Project


Session 16

In class today:

PROJECT:

  • Final Project – Due at start of class.

Projects & Tests

FINAL CRITIQUE:

  • Final Project – Due at start of class.


Homework

Student Project Theme
Vanessa Beltran Velez GD Project
Grace Brooks Vegetarian Cooking
Kevin Butler Faux Cooking
Sara Cucinotta Comics
Sadie Fields Redesign Horror Movie web site
Matt Koslowski  
Connie Lam Buzzloft
Shalyn McCabe Cooking
Kat McCarthy Citizens Advocacy
Reiley McCloskey GD Project
AJ O'Donnell Gluten Free Cooking
Jasmine Pryor Sovann
Taylor Rupp GD Project
Marina Skibiszewski GD Project
Jerad Zaccarelli Shirt Designs