 |
||||||||||||
 |
 |
 |
 |
|||||||||
 |
 |
|||||||||||
 |
 |
|||||||||||
 |
 |
|||||||||||
|
||||||||||||
 |
 |
|||||||||||
 |
|
|
|
|
|
|
|
|
||||
Course Info
What to Expect
A constant throughout the course: Students should be thinking ahead in terms of what to do for the Final Project. The Final Project will be an actual website for a client. The client may be real or fictional. Please keep in mind that the website must be 5-10 pages in size, and geared toward a specific target audience.
This class will progress in three basic phases. These phases will definitely overlap.
Phase One: Web Design in Practice
This phase will be more technical. During this time the class will learn
about:
- Dreamweaver's interface and tools, as well as creating web pages using Dreamweaver.
- the importance of logical directory structure
- basic HTML hand-coding
- FTP: What is it and how does it work?
- page layout using Photoshop/ImageReady
- importance of planning a website
Phase Two: Good Web Design
This portion of the class will focus on the principles of effective web
design. We will review and analyze several sites, discussing the importance
of creating a functional and engaging end-user experience. Topics that
will be covered include:
- usablility/functionality
- visual elements
- color, contrast, texture
- alignment, consistency, and balance
During this phase, students will have assignments involving analyzing websites and comparing/contrasting various websites.
Phase Three: Final Project
This final part of the course will focus on planning and developing your
final project. It will involve a written client proposal, site map, storyboards,
critiques, and presentation in addition to turning in the project itself.
^ back to top
Reading Assignments
Required Books: Web
Design Workshop (Robin Williams) and Macromedia
Dreamweaver MX Visual Quickstart Guide (J. Tarin Towers)
Recommended Books: Don't
Make Me Think (Steve Krug) and Web
Style Guide (J. Tarin Towers)
Weeks 1, 2
Internet Browsing, How the Web Works, Basic HTML Coding, and Directory
Structure: (various online reading assignments - see schedule)
Week 3
Basic Terms: WDW - Chapter 1 - A Visual Glossary, Chapter 3 -
Spiff up your Photographs
Getting Oriented with Dreamweaver: VQG: Chapter 3 - Basic Web
Pages, Chapter 5 - Working With Images
Week 4
ImageReady Slicing: WDW - Chapter 12 - Slicing and Dicing
Importance of Planning: WDW Chapter 7 - Organizing Your Content
Week 5
Page Layout for the Web: WDW - Chapter 4 - It's a Horizontal
World
Week 8
CSS: WDW Chapter 19 - Cascading Style Sheets, VQG Chapter 11
- Stylin' with Style Sheets
Interface Design: WDW Chapter 13 - Something About Backgrounds,
Chapter 14 - Elegant Navigation
Frames: WDW - Chapter 21 - Frames; VQG - Chapter 13 - Framing
Pages
Week 9
Interface Design: WDW Chapter 15 - Button Button, Chapter 16
- Rollovers and Image Swaps
Finding Images and Fonts (Project 2): Chapter 2 - Clipart, Stock
Images, and Groovy Fonts
Site Planning: WDW Chapter 7 - Organizing Your Content (re-read);
Chapter 8 - Organizing the Workflow
Animation: WDW - Chapter 22 - Animaged GIFs, Chapter 23 - Motion
Graphics
^ back to top
Project 1 (10% of final grade)
Project 1 will involve constructing a simple website where the layout
and images are provided.
Instructions
Specs
and Resources
Guidelines
How it
should look in the end
FAQ page
instructions
Popup Instructions Jewelry
Page FAQ
Page - Shipping/Returns
Project 2 (15% of final grade)
Project 2 will be a re-vamping of your class website. In addition to the
project itself, a site map and storyboards must be submitted.
Project 3 (Final Project) (20% of final grade)
Project 3 will be an actual website for a client. The client may be real
or fictional. Please keep in mind that the website must be 5-10 pages
in size, and geared toward a specific target audience. In addition to
submission of the project itself, this project will include a client proposal,
site map, storyboards, critiques, and presentation.
Preparation for Project 3
Details, Timeline and Guidelines: Project 3
Demo 1: Handcoding
Practice
Demo 2: Create a
simple website based on the MyPets.com website
Demo 3: Image Optimization Comparison, Anchor Links, Pop-up Windows Part
1 Part
2 Part
3
Demo 4: Slicing
and Rollovers in ImageReady
Demo 5: Nested
Tables for Page Layout
Demo 6: External
Cascading Style Sheets
Demo 7: Frames
and Jump Menus
Demo 8: Imagemaps
and Popup Messages
Demo 9: Animated
GIF's
Demo 10: Multiple Rollovers part
one part
two
^ back to top
Assignments(10% of final grade)
Assignment
1: Your First HTML Page in Dreamweaver
Optional
Extra Credit: Dissect our Class Website
Final Project
Brainstorm
Assignment
2: Research for Final Project -Compare and Contrast Websites
Client
Proposal
Final Project Sketches,
Storyboards, and Written Plan
^ back to top