[back to index] | [jump to schedule]

Web Design I: Static ADA288-01 | Fall 2007 | Thurs. 8:00 - 11:50pm

Introductory level web design class. We will cover [X]HTML, CSS and basic ActionScript. Applications utilized will be textEdit [for hand coding XHTML], Dreamweaver and Flash.

Instructor: Robert Carlsen
Contact: Room 374A
Meetings: by appointment.
E-mail:

Course Texts: [required]

HTML & XHTML: The Definitive Guide, Fifth Edition by Chuck Musciano, Bill Kennedy, O'Reilly; 6th edition (October, 2006)

Envisioning Information by Edward R. Tufte, Graphic Press 1990

W3 Schools, CSS http://www.w3schools.com/css/default.asp

Reccomended Texts:

Using HTML 4, sixth edition, published by QUE
Macromedia Flash MX: Actionscripting by Derek Franklin/Jobe Maker
ActionScript for Flash MX: The Definitive Guide, Second Edition by Colin Moock, O'Reilly publishing

Materials:

COURSE DESCRIPTION
This is a studio course to introduce students to web production, design and art. We will begin by covering the use and function of Hyper Text Markup Language and Cascading Style Sheets. With a firm grasp of HTML and CSS, we will move on to web production using Dreamweaver and later, Flash. There will be lectures and demos concerning aspects of the creation of web sites, the various hardware and software technologies used for web production, web design and net.art.

 

Attendance Policy
This class will present a lot of material in a short period of time. This material will be complicated, technical, and detail-oriented. Prompt attendance for all class periods is essential. If you are late consistently you will not get an A in this course. This course also requires at least 6 hours a week of outside lab time. You should consider this an absolute minimum. These kinds of projects require a lot of time and energy. They will be impossible to complete unless you work consistently throughout the semester. Always take the limitation of lab hours and technical problems into consideration when planning your projects and remember to save everything and then save a back up as well.

 

Course work

  1. Brief weekly assignments and lessons from the readings.
  2. One creative web site, entirely hand coded using HTML (no it won't be pretty).
  3. One HTML/Photoshop/Illustrator site that also features frames, a form and audio.
  4. One collaborative Flash animation that will later become interactive.
  5. For graduating seniors a personal portfolio site that includes work in digital and non-digital media; for everyone else a project site that tackles a social issue, a historical or personal interest or serves a community.
  6. 6. A portal page for all the projects completed this semester

 

Grading Policy

Projects will be graded based on:

Grading will be based on class participation, the class projects, the documentation requirement, and a final project. All assignments must be presented on due date; assignments not handed in receive an "F"; assignments handed in late, without a proper excuse, will receive a grade penalty. Assignments will be collected on CD at mid-term and at semester end. You are responsible for archiving and backing up your work.

Requirement
Create a www directory and generate a default index.html file in your web directory... Use Telnet or Terminal to log into beast and follow the directions on the following school page: http://uss.tcnj.edu/fswpc/how_to/nopage.html
Save all your work. During mid-semester and finals week, I will review your class portfolio on CD and online.

SCHEDULE

[Note: this syllabus is largely adapted from Ricardo Miranda's class]

Week 1
Introduction to the class,What is the Internet vs. the Web, some basic HTML, Browsers, FTP, Your Server Space and Creating a WWW Directory.

Lecture Notes

ASSIGNMENT 1: The Memex Project, due September 14th

Week 2
Font and Text Control, Links, Graphic Elements, Tables and Frames
Saving for the Web using Adobe Photoshop and Illustrator --
Vectors versus Rastor (Bit Map).
XHTML Presentation

Lecture

The Text Format Sample, view the source for the code!

HTML Primer

Class Notes:
HTML Anatomy and Text Formatting Tags
Lists, Links, Images, and Table

READING

Week 3

Individual reviews of Memex Projects

Brief Presentation, Favorite Site: Sara Wentworth, Eve Roytshteyn

What are Frames and why not to use them
Multimedia on the Web: Embedding Audio and Video files into an HTML file
More on Bits of Color and Web Graphics

Review links:
Directories and Frames
Hand coding an image map

EXTRA Download Class Notes and Review:
Presentation
Text from Presentation

READING

Assignment 2: Using your Photoshop and Illustrator know-how along with this weeks readings create a series of icons that present an icon based navigaton menu through the history of the telegraph, you may choose to employ these same icons to graphically narrate the assignment's text. This assignment is due October 5th. Examples of past Telegraph projects:

For a nice example of visual communication check out the volumeone site, it's eyecandy, but seductively done.

Resources:

Directories and Frames

Working with Forms

Example of an HTML form using various input controls

Working with forms handout

Week 4

Working with forms, form presentation and Studio Time to work on Telegraph Sites due October 5th.

Example of an HTML form using various input controls
Working with forms handout
Design Presentation
and a Few More Design Notes
a clean example of web design: http://www.kcts.org/
In-class forms example with source code. [go there]
In-class CSS example with source code. [go there]

READING

Week 7

Project 3: Journal or Process

This next project will leverage your new knowledge of CSS and allow you to use Dreamweaver to design a site which illustrates a personal journal or details a process. You should have at least five pages of content as well as an introductory index page. The design/aesthetic of this project is paramount. Your code should be clean and the design should be acheived using CSS in an external style sheet[s]. Design the page comps in Photoshop first, then isolate images (saving them as jpeg or gif) and position them using CSS.

The project will use photographs, illustrations, typography and text to convey a personal interest (roadtrip, hobby) or to describe a process (making popcorn, getting ready in the morning).

An (old) example, using an outdated table-based layout is viewable here.

READING

The remainder of the online syllabus will be added shortly.

Week 13
Constructing your final sites, all work is due for critique next week. Be sure to burn me a CD with all your projects.

Final Critique
May 2rd through May 6th is finals period, we will have the final critique during our scheduled final exam period.