Fundamentals of Web Design
Week 1
Day 1: Syllabus & Computer User Agreement
Schedule Verification
Introduction to Microsoft OneNote
GS:
Login to your 50webs.com account. This will reactivate your account. You must login every 30 days to keep your
site active.
Day 2: Copyright
GS:
Explain Copyright Laws/Restrictions in relation to pictures, videos & music found online.
Day 3: T3 Module 3 – Image Optimization
Dots Per Inch/Pixels Per Inch – Resolution
GS:
List all the image formats you are familiar with. Which image format can be animated? Which image format can
have transparency?
Day 4: Web 2.0 Design
http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php
GS:
List characteristics of Web 2.0.
Day 5: Best of CSS Assignment
ADDC – Adobe Dreamweaver CS4 – Activity 2.2 Worksheet: Analyzing Websites
ADDC – Adobe Dreamweaver CS4 – Activity 2.9 Worksheets: Usability & Accessibility
GS:
Using one of the following sites, find a simple CSS website that you like:
http://bestwebgallery.com/
http://www.bestcssgallery.com/
http://www.csselite.com/
http://www.bestcssdesign.com/
http://www.thebestdesigns.com/archive/css
Fireworks Unit
Week 2
Day 1: T3 Module 1 – Get to Know the Work Area
http://www.adobe.com/designcenter/video_workshop/html/vid0188.html
Introduction to 9-slice Scaling
http://www.adobe.com/designcenter/video_workshop/html/vid0204.html
Using layers and creating layouts in Fireworks (colors, symbols)
http://www.adobe.com/designcenter/video_workshop/html/vid0169.html
GS:
Have you ever used Adobe or Macromedia Fireworks? If so, what for?
Day 2: T3 Module 5 – Collage Techniques
T3 Module 7 – Work with Text
T3 Module 9 – Artistic Effects with Filters
T3 Module 8 – Resize, Crop and Optimize Images
GS:
Explain how layers work in Fireworks.
Day 3: Header/Collage Assignment
GS:
List one way you may utilize a collage on your website.
Day 4: T3 Module 6 –Create an Animated GIF
Animated GIF Assignment
GS:
Day 5: Animated GIF assignment
GS:
Week 3
Day 1: ADDC – Adobe Fireworks CS4 – Activity 3.7 Guide: How to Prepare Photographs
Batch Processing
Batch Processing Video
GS:
Day 2: Exporting a web gallery from Fireworks
http://www.adobe.com/designcenter/video_workshop/html/vid0172.html
GS:
Day 3: Creating Buttons/Symbols
Symbols Babbage.mp4 Video
GS:
Day 4: Website Prototyping
T3 Module 10 – Interface Design
Using the Pages Panel
http://www.adobe.com/designcenter/video_workshop/html/vid0171.html
GS:
Day 5: Logo Site in Fireworks CS4
http://bestwebdesignz.com/tips/series/fireworks-cs4-tutorials/
Alternative:
T3 Modules 11-15
http://www.entheosweb.com/fireworks/CS4/design_layout.asp
http://www.entheosweb.com/fireworks/CS4/website/home.htm
GS:
Week 4
Day 1: Continue Logo Site in Fireworks CS4
GS:
Day 2: Continue Logo Site in Fireworks CS4
GS:
Day 3: Introduce Web Portfolio Project: Fireworks Unit
ADDC – Adobe Dreamweaver CS4 – Activity 2.3 Guide:
ADDC – Adobe Dreamweaver CS4 – Activity 2.3 Guide:
ADDC – Adobe Dreamweaver CS4 – Activity 2.5 Guide:
ADDC – Adobe Dreamweaver CS4 – Activity 2.7 Guide:
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Student Portfolios
How to Plan a Portfolio
Planning a Home Page
Creating consistent content pages
Week 5
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Dreamweaver Unit
Week 6
Day 1: ADDC – Adobe Dreamweaver CS4 – Activity 2.1:
 How to set up a local root folder and site structure (G)
 The Dreamweaver Interface (W)
 The Dreamweaver Interface (G)
 Working with Text and Images (G)
 The Dreamweaver Insert Bar (W)
 The Dreamweaver Insert Bar (G)
GS:
Day 2: ADDC – Adobe Dreamweaver CS4 – Activity 2.4 Guide: Naming Conventions
ADDC – Adobe Dreamweaver CS4 – Activity 2.4 Worksheets: File Management Folders & File Management
ADDC – Adobe Dreamweaver CS4 – Activity 2.2 Guide: CSS Styles Panel
ADDC – Adobe Dreamweaver CS4 – Activity 2.2 Worksheet: CSS Styles Panel
ADDC – Adobe Dreamweaver CS4 – Activity 3.6 Guide: How to Create Cascading Style Sheets
ADDC – Adobe Dreamweaver CS4 – Activity 3.7:
 How to Use Templates (G)
 How to Use Libraries (G)
 How to add Flash movies and Flash video to a website (G)
 How to Check Files In and Out (G)
 How to Create a Calendar (G)
 How to Create Forms (G)
 How to Create Image Maps (G)
 How to Create Rollover Images (G)
 How to Create Pop-Up Menus (G)
GS:
Day 3: ADDC – Adobe Dreamweaver CS4 – Activity 2.6 Guide: How to lay out a web page with CSS
Using and Customizing CSS based layouts
http://www.adobe.com/designcenter/video_workshop/html/vid0155.html
GS:
Day 5: ADDC – Adobe Dreamweaver CS4 – Activity 2.7 Guides:
 How to set up document properties



How to create lists
How to add text from another document
How to create data tables
GS:
Week 7
Day 1: ADDC – Adobe Dreamweaver CS4 – Activity 2.8 Guide: How to create links
ADDC – Adobe Dreamweaver CS4 – Activity 2.10 Guide: How to create buttons and navigation bars
Creating Rollovers in Dreamweaver
http://www.adobe.com/designcenter/video_workshop/html/vid0159.html
ADDC – Adobe Dreamweaver CS4 – Activity 2.11 Guide: How to check links
GS:
Day 2: ADDC – Adobe Dreamweaver CS4 – Activity 2.12 Guide:
 How to publish web files
 Managing files and links by using the Files panel
GS:
Day 3: Logo Site in Dreamweaver CS4
http://bestwebdesignz.com/tips/series/dreamweaver-cs4-tutorials/
GS:
Day 4: Continue Logo Site in Dreamweaver CS4
GS:
Day 5: Continue Logo Site in Dreamweaver CS4
GS:
Week 8
Day 1: Continue Logo Site in Dreamweaver CS4
GS:
Day 2: Introduce Web Portfolio Project: Dreamweaver Unit
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 9
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Flash Unit
Week 10
Day 1: ADDC – Adobe Flash CS4 – Activity 5.1:
 The Flash Workspace (W)
 The Flash Workspace (G)
 How to Create an Animated Face (G)
 Symbols, Instances and the Library (G)
 Frames and Keyframes (G)
 Creating Animation in Adobe Flash CS4 (G)
 How to Get Started with ActionScript (G)
 How to Create a Button Symbol (G)
GS:
Day 2: ADDC – Adobe Flash CS4 – Activity 5.2 Guide: Analyzing Flash on the Web
ADDC – Adobe Flash CS4 – Activity 5.2 Worksheet: Analyzing Flash on the Web
GS:
Day 3: ADDC – Adobe Flash CS4 – Activity 5.3:
 How to Produce Flash Video for Use on the Web (G)
 How to Import Sound (G)
GS:
Day 4: ADDC – Adobe Flash CS4 – Activity 5.4:
 How to Use Guides and Rulers(G)
 Working with Symbols(G)
 How to Create Masks (G)
 How to Use a Motion Guide with a Motion Tween Animation (G)
 How to Ease Tweens (G)
 How to Create Character Animations (G)
GS:
Day 5: ADDC – Adobe Flash CS4 – Activity 6.1:
 How to Apply Colors and Gradients (G)
 How to Create Text Effects with Filters (G)
 How to Import Images (G)
 How to Create Transitions with Motion Tweens (G)
 How to Create Visual Effects (G)
 How to Use Filmmaking Techniques (G)
 Examples of Effects (W)
ADDC – Adobe Flash CS4 – Activity 6.2 Worksheet: Analyzing and Scripting a Digital Narrative
ADDC – Adobe Flash CS4 – Activity 6.3 Guide: Sample Narrative Summary and Storyboard
ADDC – Adobe Flash CS4 – Activity 6.3 Worksheet: Narrative Summary and Storyboard
ADDC – Adobe Flash CS4 – Activity 6.4:
 How to Maintain Consistency (G)
 How to Optimize Flash Content (G)
 How to Organize Content (G)
 How to Make Flash Content Accessible (G)
 How to Publish a Flash Document (G)
ADDC – Adobe Flash CS4 – Activity 6.5 Guide: How to Test a Digital Narrative
ADDC – Adobe Flash CS4 – Activity 6.5 Worksheet: Evaluating a Digital Narrative
GS:
Week 11
Day 1: ADDC – Adobe Flash CS4 – Activity 7.2 Guide: Design Principles for Flash Content
ADDC – Adobe Flash CS4 – Activity 7.4 Guide: Creating and Modifying Text in Flash
ADDC – Adobe Flash CS4 – Activity 7.4 Guide: How to Use Transparent or Invisible Buttons
http://www.mountsihighschool.com/directory/_dockeryj/web/web_institute/flash.html
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 12
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 13
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 14 – Spring Break
Week 15
Day 1: Performance Final Exam
ADDC – Activity 3.9 Worksheet: How to Promote a Website
ADDC – Activity 7.1 Guide: How to Make Websites Accessible
ADDC – Activity 3.1:
 Professional Web Design and Development Process (G)
 Client Interview (W)
ADDC – Activity 3.2 Worksheet: Project Plan
ADDC – Activity 3.3 Guide: Sample Wireframes
ADDC – Activity 3.5 Guide: Sample Storyboard
ADDC – Activity 3.5 Worksheet: Production Storyboard
ADDC – Activity 7.2 Guide: Sample Design Document
ADDC – Activity 7.2 Worksheet: Design Document
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 16
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 17 – Performance Final Exam
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS:
Week 18 – Performance Final Exam
Day 1: Continue with Web Portfolio Project
GS:
Day 2: Continue with Web Portfolio Project
GS:
Day 3: Continue with Web Portfolio Project
GS:
Day 4: Continue with Web Portfolio Project
GS:
Day 5: Continue with Web Portfolio Project
GS: