04:547:320 Web Design
Anselm Spoerri, Ph.D.
SC&I, Rutgers University
aspoerri@scils.rutgers.edu
Meets in SCI 119, Tuesday & Thursday 6:10pm – 7:30pm
Course Website:
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Home.html
Course
Description
This course will focus on the conceptual, analytical and technical,
skills need to create well designed and dynamic Web site using
(X)HTML, CSS and client- and server-side scripting technologies.
The course objectives include:
 To teach students the technical skills needed to create effective
Web sites that are dynamic and well designed.
 To study common web usability and design techniques.
 To learn how to create Web pages using Adobe Dreamweaver to
produce (X)HTML and Cascading Style Sheets (CSS) that control
the layout of text and images.
 To create graphics for the Web using Adobe Fireworks.
 To get exposure to client- and server-side scripting technologies.
Students will build a simple data-driven website based on a
provided relational database.
 To give students the opportunity to engage in a planning and
prototyping process to create a Web site as a part of a group
effort.
Course
Organization
The course consists of bi-weekly class lectures and demonstrations
to help students learn the conceptual, analytical and technical skills
needed to create a well designed web site. See accompanying
schedule for list of class topics. Relevant readings and online videos
will be assigned to prepare students for the topics discussed in class.
Class
Schedule
Week 1: Introductions / Web Basics

Course Overview

Web Basics: URLs, (X)HTML
Week 2: Site Development Process

Planning & Site Development Process  Group Projects
Usability Testing

Dreamweaver: Understanding Web Site Design |
Create Web Page
Week 3: Web Design Principles

Web Design - Layout & Grid System

Dreamweaver: Add Navigation & Pages | Test & Upload
Week 4: Cascading Style Sheets Basics

Cascading Style Sheets (CSS)

Dreamweaver: CSS and Stylizing Content
Week 5: Design Principles & CSS

Web Design Principles Summary

Dreamweaver: Creating Flexible Layout
Week 6: Layout Design & Advanced CSS

CSS: Positioning Elements

Dreamweaver: Positioning Elements and Layout Design
Week 7: Interaction Design

JavaScript & Client-Side Scripting

Dreamweaver: Rollovers and Image Maps
Week 8: Navigation Design

Dreamweaver: Navigation Design

Fireworks: Images for Navigation Button States
Week 9: Dynamic Web

Dynamic Web

Programming Concepts

Server Side Scripting: PHP

Databases: Introduction to MySQL
Week 10: Databases & Server Side Scripting (1)
•
How to use server side scripting to get data from a database
•
How to display database data in HTML page
Week 11: Databases & Server Side Scripting (2)
•
Continue to work on server-side scripting
Week 12: Databases & Server Side Scripting (3)
•
Recap of Key Concepts in MySQL and PHP
Week 13: Work on Group Projects
•
Open lab session to work on group projects
Week 14: Work on Group Projects
•
Open lab session to work on group projects
Week 15: Review & Group Project Presentations

Course Review and Present & Evaluate Group Projects
Grading
Policy
Individual Exercises - 50%

Quizzes (10%) – open book, no redo

Short Assignments (10%) – no redo
o


Practice the techniques and technical content covered in
class.
Create Website (15%) – redo
o
Meaning: Evaluate a site of your choice
o
Mechanics: External CSS controls layout and interactive
navigation structure; create at least five pages.
Create Advanced Website (15%) – redo
Group Projects - 50%
Grading
Scale
Textbook
and
Software

Competitive Website Analysis (15%)

Group Website (25%)

Post-Mortem Paper & 360 Evaluation (10%)
92
89
82
79
72
–
–
–
–
–
100
91
88
81
78
A
B+
B
C+
C
The class textbook is by Castro : HTML, XHTML & CSS: Visual
QuickStart Guide.
There will be additional readings in web links available on Sakai
throughout the semester.
You will be required to use Adobe Creative Suite 6: Web
Standard or Premium Edition (which includes Dreamweaver,
Fireworks etc).
You can access Adobe CS 6 using the computers in the 119 Lab and
you can use from home the free Adobe Creative Suite 6 via the
SoftwareAnywhere@SC&I web service and for more information
see: http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/
Requirements.html#Software. Adobe CS5 / CS4 are fine to use if
you already own it, but if you are about to purchase the software,
make sure to purchase CS6. Adobe CS3 is okay to use if you already
own it, however the CS4+ interface is different and certain CS3
features are not supported anymore. The lectures and video demo
files have been created using CS4 and when needed additional CS6
video demos are provided.
You will need a SC&I network account to use SoftwareAnywhere
@SC&I web service.
To activate or reactivate your SC&I Network account, please
visit: http://account.comminfo.rutgers.edu and login with your
NetID.
To login to SoftwareAnywhere@SC&I web service:
http://sa.comminfo.rutgers.edu.
Accessing the CS6 Adobe applications via SoftwareAnywhere@SC&I
may not be a “smooth and easy experience” for all of you and so
you will have to test it on your own to see if this is a viable solution
for you ... you can always use the computers in the 119 Lab and you
can try the different CS6 software packages on a 30 day trial basis
(www.adobe.com provides links to the trial versions). So you can
“sequence” when you download the trial version of the software
packages and then switch over to using the SoftwareAnywhere web
service or vice versa (provided the SoftwareAnywhere service works
for you). You can also decide to use the 30 day trail a month before
the end of semester.
For the Fall '12 semester (September 4th-December 21), SC&I will
be piloting a service called LyndaCampus. LyndaCampus is a
school-wide version of lynda.com, an online training library of over
80,000 video based training movies on over 1400 software titles.
LyndaCampus is available for free for students registered in SC&I
courses and can be used to learn software (Adobe CS6, such as
Dreamweaver, Fireworks, Flash ... all programs we will be using in
this course), programming skills, video techniques, etc.
The lectures for this course have been redesigned to make extensive
use of the LyndaCampus content to complement and enhance the
lectures and video demos I have created. You must be logged
into LyndaCampus - https://lynda.comminfo.rutgers.edu/Login to be able to access the lynda.com videos included in the
Lectures page of this course.
The Help section of the different Adobe software applications is a
useful resource. I venture to guess that most of us may not like
consulting the Help section of a software application, but I
encourage you to do so anyway.
The goal of this course is to teach you useful software skills so that
you are able to create media rich Term Project.
This course lectures will teach strategic skills so that you will be
able to create a project that you can be proud of, but this course will
not be able to do full justice to all the great features included in the
Adobe software applications.
I hope you complement the course lectures by consulting the Help
as well as books find useful. I have also included links to useful
resources, such as tutorials and videos, to complement the materials
presented in the weekly lectures.
Email
Policy
I will make an effort to respond to your emails within 48 hours –
often it may be faster and sometimes slower. As we are approaching
the due date for the Group Website, you can expect that I will
answer your emails within hours in the week before it is due.
I will be using Sakai throughout the course to distribute information
and readings and to collect assignments. I expect you to use it for
these purposes.
Threaded
Discussion
Policy
Office
Hours
Threaded Discussion in Sakai is meant to serve as community
resource for all of you, where you can ask for technical or content
help from your fellow students and the instructor.
In Person: Tues 4:30-5:45pm by appointment via email.
Attendance / Participation Policy
Attendance and participation in each class session is an important requirement as
they provide indicators of engagement with the course, learning needs, and
important foundations for all class assignments. The availability of course material
and notes online does not represent a replacement of class attendance. Students
should inform the instructor, in advance when possible, of conditions warranting
absence from class:

Illness requiring medical attention;

Curricular or extracurricular activities approved by the School;

Personal obligations claimed by the student and recognized as valid (for
example, death / serious illness of relative or family member);

Recognized religious holidays;

Severe inclement weather causing dangerous travel conditions; (note that the
university

formally advises via the Rutgers Web site if classes are cancelled due to
weather)
Written documentation is strongly recommended for absenteeism.
Academic Integrity and Plagiarism
The consequences of scholastic dishonesty are very serious. Rutgers’ academic
integrity policy can be found at: http://ctaar.rutgers.edu/integrity/policy.html.
An overview of this policy may be found at
http://cat.rutgers.edu/integrity/student.html. Multimedia presentations about
academic integrity may be found at
http://academicintegrity.rutgers.edu/multimedia.shtml and
http://www.scc.rutgers.edu/douglass/sal/plagiarism/intro.html
If you are doubtful about any issue related to plagiarism or scholastic dishonesty,
please discuss it with the instructor.
Serving Student with Disabilities
Students with disabilities (both short‐ and long‐term) who wish accommodations in
this class must do so through the Rutgers Disabilities Services Office and/or the
Associate Dean Karen Novick (knovick@rutgers.edu).
Other Information
Students seeking help with the content of this course should contact the instructor
either during office hours, or make a separate appointment.
Students seeking help with the scheduling of classes or registration should contact
the SC&I Student Services Office in Room 214 of the SC&I Building.
A great deal of information is available on the SC&I website, including course
descriptions and details about all degree programs: http://comminfo.rutgers.edu.
Rutgers has Learning Centers on each campus where any student can obtain tutoring
and other help; for information, check http://lrc.rutgers.edu/ Rutgers also has a
Writing Program where students can obtain help with writing skills and assignments:
http://plangere.rutgers.edu/index.html.
SC&I IT Services offers help with a variety of technology problems. They are located
in the SC&I Building in Room 120 (first floor); 732‐932‐7500 x8999;
help@comminfo.rutgers.edu.