Web Site Design and Management

January 25, 2001

Spring 2000

I. Overview: This class is designed for the student who has experience with HTML and basic site building and focuses on user interface, navigation design, and information architecture. These issues are discussed in lively lectures-/seminar setting, using real-time interaction with live Web sites. With a strong emphasis on community service and group learning, teams of students design and build fully functioning Web sites for Bay Area organi-zations. In addition to the team project, students independently create five Web site projects: 1) Low Bandwidth/Browser Safe Color and Back- ground Titles; 2) Site Navigation; 3) Tables for Optimizing Graphics; 4) Web Animation and 5) Frames.

Senior or graduate level standing.
DAI 626 Computer Graphics
DAI 475 Exploring the World Wide Web.
Portfolio evaluation: (substitution for DAI 626 and DAI 475)
Evidence of HTML experiences. Web page development using HTML or editor.Visual design experiences using PhotoShop or related software.
Web Site URLs, Interactive projects.
E-mail account (SFSU) with remote Internet access.
Consent of the instructor.

Mission Statement: Design and Industry Mission Statement
Educate a culturally diverse population of students through interdisciplinary problem solving activities about technology related industry.

This education is provided through experiential, hands-on, up-to-date curriculum that offers liberal arts and technical skill courses.

Conflict Resolution: Conflicts or disagreements between student(s) and/or instructor- must be addressed in the following order:1) Instructor; 2) Department chairperson and 3) Dean.

Plagiarism: Plagiarism and cheating will not be tolerated. Academic dishonesty will result in a failing grade for this course and will be reported to the University.

Attendance: Attendance is required. Your attendance and active participation in class discussion and activities are a crucial part of your learning process. In order to provide the best learning environment, you need to be present in class. Excessive absences and/or late arrival will severely impact your ability to learn the course goals. Therefore, two unexcused absences will lower your final course grade one full letter. Of course, should an emergency arise for which you can provide proof, those absences will not be counted against you.

II. Rational, Purpose and Target Audience for this Course
The San Francisco Bay Area is widely regarded as the birthplace of the interactive media industry, and when it comes to job creation, Interactive Media is San Francisco fastest growing industry. A recent study commissioned by the City of San Francisco, reviled that the interactive media industry employed 35,000 people in 1997 that is an increase of 69 percent over the pervious year (MDG.org, 1997). Skills essential to the Interactive Media industry include: graphic and digital artists, writers, programmers, animators, interface designers, content developers, production specialist, technical consultants, content designers, producers and project managers.

This course is intended to prepare future Web designers, produces and interactive media artist entering the Interactive Media Industry. This course is also intended to respond to the needs of senior standing undergraduates and graduates in all majors with the desire to: 1) adapt Web based design and management skills to their particular field of study; 2) increase their awareness of the Interactive Media Industry and 3) for those student looking to participate in a design course with a community service learning component.

The primary target audience of this course is senior standing and graduate level Design and Industry students. This course is open to all majors.

III. Course Format A lecture/laboratory format utilizing software demonstrations/instruction by instructor and students. Emphasis placed on problem solving "hands-on activity" utilizing Power Macintosh computers and related hardware resources will constitute primary in-class activity. Teaching and learning methods will include reading and written assignments, lecture and discussion, large and small group work, individual student presentation, student critiques, and case studies. Attendance is required.

IV. Class Schedule 575.1 Class meets for 3 hours Tuesday and Thursday evening from 6:10 PM- to 8:55 PM. Each class will have a 15-minute break at midpoint. You are expected to attend all class meetings. Attendance is required. 575.5 Class meets for 6 hours, Saturday from 9:10 – 12:00 and 1:10 -3:55. Attendance is required

V. General Course Objectives
The learning experience in this course with the selected topics should enable each student to:
1. To learn professional design principals necessary to create effective Web sites.
2. To gain experience using Dreamweaver 2 and Photoshop software programs.
3. To provide the opportunity for students to learn how to integrate images, sound, and video into Web site design.
4. To gain insight and understanding concerning the interrelationship between digital design issues and outline principles.
5. To be introduced to roll-overs, behaviors and style sheet capabilities.
6. To develop an understanding regarding how Web masters maintain their sites.
7. To gain experience working as a member of a design team.
8.To learn project management skills.
9. To improve their oral communication and visual presentation skills
though a variety of class presentations assignments.
10. To integrate academic study, community service field work with structured reflection and interdisciplinary problem solving activities, integrating university and experiential community service learning.

Key Concepts Examples
Some examples of Key concepts taught in the course are listed below:
Background Tiles – Cascading Style Sheets – Color Aesthetics
DHMTL – Flowcharts – Frames – GIF Animation – Imagernaps
Information Architecture – Low Bandwidth Graphics – Navigation
Project Management – Rollovers – Strategy – Storyboards – Tables
Transparent Art – Web Typography

VI. Required Text Book
Textbooks are available in the school bookstore, retail bookstores and online via lynda.com books or amazon.com .

Required Text:
Deconstructing Web Graphics. 2
by Lynda Weinman and Jon Warren Lentz
New Riders Publishing -ISBN:1-56205-859-2

Designing Web Graphics. 3
How to Prepare Images and Media for the Web
by Lynda Weinman
New Riders Publishing – ISBN: 1-56205-715-4

Dreamweaver 2 – H.O.T
Hands-On Training
by Lynda Weinman
Peachpit Press – ISBN: 0-201-35452-7

Suggested Text:
Yale C/AIM Web Style Guide Available at the school bookstore or
online at http://info.med-yale-edu/caim/manual/
Two Zip Disk for project files.
Binder for Project Book and Class Notes

VII. Required Consumables
1. Two Zip Disk for project files.
2. Binder with dividers for Project Book and Class Notes
3. Tracing Paper Pad 11 x 14
4. Pens and Pencils

See Materials List
Required Text and Comsumables:
Estimated cost: $161

VIII. Evaluation Methods
Grade Distribution:
Letter Grade Scale:
1.Reading reviews and other written assignments and Student presentations/review of readings
2. Individual Web P
3. Midterm Exam and Practice
4. Term
5. Team Project and FieldWork
In progress and final oral report(s) by team members regarding total site and individual contributions. Includes Team Project Report: a written report detailing your Design Team Project and activities.
6. Project Book Notes, flowcharts, storyboards, design docs, etc. forIndividual and Team projects.

IX Description of written Assignments, Projects and Project Book Items

1. Bibliography ""My Favorite Web/Multimedia Resource"
Bibliography with one paragraph description. Cost (if any).
Bring hard copy to class and post to DAI listServe at dai575-1@sfsu.edu
Siegel, D. (1997). Secrets of Successful Web Sites. Indianapolis, IN: Hayden Books. Cost: $49-99

This example uses the APA style of documentation.

2. Written Assignments, Reading Assignment
Written assignments must be word-processed and due at beginning of class. Use this format for all assigned readings. Assignment not to exceed one page per chapter. Late assignments will not be accepted.

Assignment No.:

Item 1.
What were the major points learned from this chapter profile.

Item 2.
List at least one outstanding feature, concept or technique that I will apply to my
own Web design and/or Web site and why.

3. ListServe
DAI ListServe Assignment
Post URL to the class List serve (e.g dai123@sfu.edu)
Name: Date:
This week, the hot U RL I recommend is URL; and why (the-
sign, layout, content, technique, etc.).
Use entire URL address e.g. http://dai.sfsu.edu in your post.
See Example

2. Individual Web Projects
Students independently will create 6 Web site projects incorporating the following:
Create an SFSU student Web site; 1) Low Bandwidth/Browser Safe Color and
Background Titles; 2) Tables for Optimizing Graphics; 3) Site Navigation; 4) Frames; 5) Web Animation 6) Forms and 7) DHTML.

Web Project No. 0: Create SFSU student Web site
Resource Materials: public-html folder & Index.htm page. In-class project
Web Project No. 1: Create Low Bandwidth /Browser-Safe Color and Background Tile.
Resource Materials: Chapter 4 & 6 – Designing Web Graphics
Web Project No. 2: Tables for optimizing graphics and page layout.
Resource Materials: Chapter 13 – Designing Web Graphics
Chapter 2 – Deconstructing Web Graphics
Web Project No. 3: Site Navigation. Design a navigation theme for your site.
Resource Materials: Chapter 10 – Designing Web Graphics
Web Project No. 4: Create a Frames addition to your Web Site.
Resource Materials: Chapter 10 – Designing Web Graphics
Chapter 10 – HTML for World Wide Web
Chapter 14 – Creative HTML Design Navigation
Web Project No. 5: Web Animation -Animated G IF and Javascript Rollover.
Resource Materials: Chapter 14 – DesigningWeb Graphics
Chapter 3 – Deconstructing Web Graphics
Chapter 15 – Creative HTML Design JavaScript
Web Project No. 6: Forms
Resource Materials: Chapter 6 – Dreamweaver 2 Hands-On-Training
Web Project No. 7: DHTML
Resource Materials: Chapter 23- Designing Web Graphics
Chapter 13 – Dreamweaver 2 Hands- On-Training

3. Midterm exam
-There will be a midterm exam at Week 10. The midterm will cover readings, class
demonstrations and discussion. The test will have the follow type questions:
A) Several short-answer definition questions
B) Matching examples to concept or principal
C) Web design software task

Midterm Date: March 30,2000 and April 1, 2000

4. Term Paper
There will term paper having minimum 5 pages. Paper topic will focus on the Internet/Web and related technology. Instructor will approve paper topic.

Due Dates: DAI 575.1 -April 27, 2000
DAI 575.5 -April 29, 2000

5. Team Project Web Site Development for Bay Area Organization/Community Service Learning Component

A) Student Responsibility
Students, working in teams, will be required to complete a Web site design and development for an organization located within the greater Bay Area. The student team will meet with the organization – develop the time line for achieving the goals and pro-duce the organizations' Web site. The time spent on the Web site design will be a minimum of three hours per week in addition to regular scheduled class time.

B) Student Reflection, Report and Evaluation
In addition to keeping a Project Book documenting the your team project, you will be required to provide in-class updates on the organizations Web site – discussing issues experienced. At semester end, you will give an oral and written report detailing your work on the organizations Web site and reflection upon the organization itself. The above components will be incorporate into the your grade for Team Project and Field Work participation.
Student Participation in the Community Service Model is required – and will be detailed in the class outline and course description. Students will be given a choice, from several organizations, as to the project(s) they work on. Also, students may submit recommendations of organizations seeking Web site design services.

6. Project Book
Students are required to keep a "Project Book" this is a binder/portfolio of the students work over the entire course. Lecture notes, handouts, homework assignments, group work, individual Web and team project notes and reflection. Project Book and Project Report are due during final examination.

  • update-img-new

    Get updates on what's new in the Campus Compact Network