Web Graphic Page Design
I. Course Prefix/Number: ART 259
Course Name: Web Graphic Page Design
Credits: 3 (3 lecture; 6 lab)
II. Prerequisite
None
III. Course (Catalog) Description
Course covers use of graphics, animation, and multimedia in web page design and production. Content includes fundamentals of graphic production, layout design principles, animation, and engineering principles of multimedia. Final project incorporates graphics, sound, and movies. Dreamweaver used as the main software. Recommended: experience with digital imaging using PhotoShop.
IV. Learning Objectives
A. To identify the basic concepts and terms used in web page production.
B. To explain how web pages are constructed.
C. To demonstrate appropriate use of the hardware and software involved in the design and production of web pages and the implementation of web pages for the end user.
D. To design and author web pages, incorporating graphics, animation, and multimedia.
E. To explain the limitations of the web.
F. To identify the legal and ethical issues related to the design and use of web sites.
B. To explain how web pages are constructed.
C. To demonstrate appropriate use of the hardware and software involved in the design and production of web pages and the implementation of web pages for the end user.
D. To design and author web pages, incorporating graphics, animation, and multimedia.
E. To explain the limitations of the web.
F. To identify the legal and ethical issues related to the design and use of web sites.
V. Academic Integrity
Students and employees at Oakton Community College are required to demonstrate academic integrity
and follow Oakton's Code of Academic Conduct. This code prohibits:
• cheating,
• plagiarism (turning in work not written by you, or lacking proper citation),
• falsification and fabrication (lying or distorting the truth),
• helping others to cheat,
• unauthorized changes on official documents,
• pretending to be someone else or having someone else pretend to be you,
• making or accepting bribes, special favors, or threats, and
• any other behavior that violates academic integrity.
There are serious consequences to violations of the academic integrity policy. Oakton's policies and procedures provide students a fair hearing if a complaint is made against you. If you are found to have violated the policy, the minimum penalty is failure on the assignment and, a disciplinary record will be established and kept on file in the office of the Vice President for Student Affairs for a period of 3 years.
Details of the Code of Academic Conduct can be found in the Student Handbook.
• cheating,
• plagiarism (turning in work not written by you, or lacking proper citation),
• falsification and fabrication (lying or distorting the truth),
• helping others to cheat,
• unauthorized changes on official documents,
• pretending to be someone else or having someone else pretend to be you,
• making or accepting bribes, special favors, or threats, and
• any other behavior that violates academic integrity.
There are serious consequences to violations of the academic integrity policy. Oakton's policies and procedures provide students a fair hearing if a complaint is made against you. If you are found to have violated the policy, the minimum penalty is failure on the assignment and, a disciplinary record will be established and kept on file in the office of the Vice President for Student Affairs for a period of 3 years.
Details of the Code of Academic Conduct can be found in the Student Handbook.
VI. Sequence of Topics
A. Ethical and legal issues in web design.
B. Web hardware fundamentals
1. CPU and platforms
2. Storage
3. Memory
4. Network
5. Input
a. Keyboard
b. Mouse
c. Tablet
6. Monitor
C. Electronic Imaging Fundamentals
1. Resolution and Raster
a. PPI
b. LPI
c. DPI
2. Physical size and resize of image
3. Quality Issues
a. Brightness
b. Contrast
c. Dynamics and histograms
4. Color
a. Color Theory
i) Additive system
ii) Subtractive system
b. Color Mode
i) RGB
ii) CMYK
iii) LAB
iv) INDEX
v) HSV
c. Web Color
i) Browser safe color
ii) Limited palettes
5. Format and Files
a. File Type
i) JPG
ii) GIF
iii) PnP
b. Transparent
c. Animated
d. Interlaced
e. Web TV
6. Scanning
a. Flatbed
b. Film
c. CD
D. Graphic Software
1. Pull down menus
a. File
b. Edit
c. Image, effect and filters
d. Select
e. Window
f. Help
2. Tools
a. Selection
i) Lasso
ii) Rectangle
iii) Oval
iv) Path
v) Magic wand
b. Magnifier
c. Bucket
d. Eyedropper
e. Eraser
f. Pencil-brush
g. Flat hand mover
h. Clone-rubber-stamp
3. Palettes
a. Color
b. Path, floater and layers
c. Brushes
d. Information
E. Design Fundamentals
1. Order
2. Rhythm and Harmony
3. Focal point
4. Types of organization
a. Repetition
b. Bleeding
c. Isolation
d. Dominance
e. Movement
f. Symmetry and Asymmetry
5. Page Layout Design
a. Concept and storyboard
b. Grid, column, margin
c. Headline, bullets, and captions
d. White space, rules and borders
F. Page Construction
1. Background
a. Pattern making and tiling
b. Pattern size
c. Seams
d. Directional wallpaper
2. Symbols
a. Clip Art
b. Coloring
3. Rules
a. Normal, vertical, and horizontal
b. Decorative
4. Buttons
a. Interactive buttons
b. Types
i) Beveled
ii) Multicolored
iii) Globe
iv) Glass
v) Spherized
5. Bullets
a. Ordered and definition lists
b. HTML
c. Custom made
6. Titles
a. Drop shadow
b. Image on image
c. 3D
d. Outline
7. Menu Bars
a. Tabs
b. Shadows
c. Pictures in pictures
d. Stripes
G. Animation
1. Fundamentals
a. Frame rate
b. Key frames and tweening
c. Cell animation
d. Tracks and animation sequence
e. Formats
i) Avi
ii) .Mov and .qt
iii) AVI
iv) MPEG
v) Streaming
a) Stream works
b) VDOLive
c) Movie Star
2. Techniques
a. Onion skin
b. Cycling
c. Hierarchical motion
d. Anticipation
e. Cut out
f. Compositing
g. Line of action
3. QuickTime Animation
a. Technology overview
b. Flat movies
c. Fast start movies
d. Production software
e. Cross Platform considerations
f. QuickTime and HTML
g. Interface and page design
4. Shockwave
a. Technology overview
b. Creating animation in Director
c. Lingo network extensions
d. Score based animation
H. VRML
1. Development and history of VRML technology
2. Mechanics
a. Binary mathematics
b. Cartesian plane
c. Transition from 2D to 3D space
3. VRML specifications
4. VRML editors
I. Sound
1. Audio basics
a. Midi and audio digital
b. Sound editing
c. File formats
d. Recording
2. Web pages and sound
a. RealAudio
b. Screaming audio
3. Synthesis and midi basics
B. Web hardware fundamentals
1. CPU and platforms
2. Storage
3. Memory
4. Network
5. Input
a. Keyboard
b. Mouse
c. Tablet
6. Monitor
C. Electronic Imaging Fundamentals
1. Resolution and Raster
a. PPI
b. LPI
c. DPI
2. Physical size and resize of image
3. Quality Issues
a. Brightness
b. Contrast
c. Dynamics and histograms
4. Color
a. Color Theory
i) Additive system
ii) Subtractive system
b. Color Mode
i) RGB
ii) CMYK
iii) LAB
iv) INDEX
v) HSV
c. Web Color
i) Browser safe color
ii) Limited palettes
5. Format and Files
a. File Type
i) JPG
ii) GIF
iii) PnP
b. Transparent
c. Animated
d. Interlaced
e. Web TV
6. Scanning
a. Flatbed
b. Film
c. CD
D. Graphic Software
1. Pull down menus
a. File
b. Edit
c. Image, effect and filters
d. Select
e. Window
f. Help
2. Tools
a. Selection
i) Lasso
ii) Rectangle
iii) Oval
iv) Path
v) Magic wand
b. Magnifier
c. Bucket
d. Eyedropper
e. Eraser
f. Pencil-brush
g. Flat hand mover
h. Clone-rubber-stamp
3. Palettes
a. Color
b. Path, floater and layers
c. Brushes
d. Information
E. Design Fundamentals
1. Order
2. Rhythm and Harmony
3. Focal point
4. Types of organization
a. Repetition
b. Bleeding
c. Isolation
d. Dominance
e. Movement
f. Symmetry and Asymmetry
5. Page Layout Design
a. Concept and storyboard
b. Grid, column, margin
c. Headline, bullets, and captions
d. White space, rules and borders
F. Page Construction
1. Background
a. Pattern making and tiling
b. Pattern size
c. Seams
d. Directional wallpaper
2. Symbols
a. Clip Art
b. Coloring
3. Rules
a. Normal, vertical, and horizontal
b. Decorative
4. Buttons
a. Interactive buttons
b. Types
i) Beveled
ii) Multicolored
iii) Globe
iv) Glass
v) Spherized
5. Bullets
a. Ordered and definition lists
b. HTML
c. Custom made
6. Titles
a. Drop shadow
b. Image on image
c. 3D
d. Outline
7. Menu Bars
a. Tabs
b. Shadows
c. Pictures in pictures
d. Stripes
G. Animation
1. Fundamentals
a. Frame rate
b. Key frames and tweening
c. Cell animation
d. Tracks and animation sequence
e. Formats
i) Avi
ii) .Mov and .qt
iii) AVI
iv) MPEG
v) Streaming
a) Stream works
b) VDOLive
c) Movie Star
2. Techniques
a. Onion skin
b. Cycling
c. Hierarchical motion
d. Anticipation
e. Cut out
f. Compositing
g. Line of action
3. QuickTime Animation
a. Technology overview
b. Flat movies
c. Fast start movies
d. Production software
e. Cross Platform considerations
f. QuickTime and HTML
g. Interface and page design
4. Shockwave
a. Technology overview
b. Creating animation in Director
c. Lingo network extensions
d. Score based animation
H. VRML
1. Development and history of VRML technology
2. Mechanics
a. Binary mathematics
b. Cartesian plane
c. Transition from 2D to 3D space
3. VRML specifications
4. VRML editors
I. Sound
1. Audio basics
a. Midi and audio digital
b. Sound editing
c. File formats
d. Recording
2. Web pages and sound
a. RealAudio
b. Screaming audio
3. Synthesis and midi basics
VII. Methods of Instruction
This course will be presented using a combination of lectures, slide presentations and hands-on lab time at the computer.
Course may be taught as face-to-face, media-based, hybrid or online course.
Course may be taught as face-to-face, media-based, hybrid or online course.
VIII. Course Practices Required
1. Complete assigned readings from textbook and the assigned online articles (there are links to each from the course web site).
2. Complete assigned exercises and projects and present each in class as scheduled in the course calendar.
3. Take a midterm exam and a final exam. The midterm and final exam will be based on the chapters in your textbooks, online readings, class demonstrations, lectures and handouts. The exams will include multiple choice, true/false and short answer questions. Study questions will be available on the course web site.
2. Complete assigned exercises and projects and present each in class as scheduled in the course calendar.
3. Take a midterm exam and a final exam. The midterm and final exam will be based on the chapters in your textbooks, online readings, class demonstrations, lectures and handouts. The exams will include multiple choice, true/false and short answer questions. Study questions will be available on the course web site.
IX. Instructional Materials
1. Flash drive or portable hard drive.
2. Representative textbooks: Varies by instructor
2. Representative textbooks: Varies by instructor
X. Methods of Evaluating Student Progress
The final grade will be based upon the following elements and their weights
1. Exercises (5) 25% 5 points each
[Exercises will consist of preparing graphics and animation for web pages.]
2. Projects (3) 45% 15 points each
[For each project, students will develop a web site.]
3. Midterm exam 15% 15 points
4. Final Exam 15% 15 points
Total 100% 100 points
1. Exercises (5) 25% 5 points each
[Exercises will consist of preparing graphics and animation for web pages.]
2. Projects (3) 45% 15 points each
[For each project, students will develop a web site.]
3. Midterm exam 15% 15 points
4. Final Exam 15% 15 points
Total 100% 100 points
XI. Other Course Information
If you have a documented learning, psychological, or physical disability you may be entitled to reasonable academic accommodations or services. To request accommodations or services, contact the ASSIST office in the Learning Center. All students are expected to fulfill essential course requirements. The College will not waive any essential skill or requirement of a course or degree program.















