HIGH SCHOOL WEBPAGE DESIGN
CURRICULUM MAP
Mahopac Central School District

September 2001
Submitted by: Stuart Perry
Rationale

September

October
November
December
January
February

Rationale:

This self-paced class will focus on web page planning, basic design, layout and construction (effective and ineffective), publication and maintenance of a web site. Successful completion of this course would provide the core of necessary skills and training for an entry-level position in the field of Web Design. Students will also have gained experience to assist in the development of the HIgh School web site as well as the creation of personal home pages.

The Role of the Web in Curricular Reform
(from:

Possibly the most important point that must be addressed is the current emphasis towards interactivity in the learning process

Simply put, students of all ages learn better when they are actively engaged in a process, whether that process comes in the form of a sophisticated multimedia package or a low-tech classroom debate on current events.

Submitted by: Stuart Perry WEBPAGE DESIGNSeptember 2001 - Home
SEPTEMBER

ESSENTIAL QUESTIONS

What are the building blocks of effective web page design?

What constitutes a “good” web site?
What are the various “hats” worn by a webmaster?
What are the basic HTML tags?
CONTENT

Course Overview

  1. Construction
  2. Design
  3. Graphics
  4. Advanced Design
  5. Publishing
  6. Maintenance
  7. Legal and Ethical Issues

Local Area Networks

Configuration and Design

File maintenance

  1. Home directories
  2. Public directories
  3. Web folders
  4. Folder maintenance: creating, deleting, moving

World Wide Web (www) overview

/

Basic elements of Good Design and Structure

(Links to Online Tutorials at Perrylinks/Web Design Links)
  1. Editing Tools
  2. Notepad (Page Resource)
  3. Word
  4. FrontPage
  5. Online sites
  6. Notepad as editor and Explorer to view pages
  7. Basic HTML syntax –tag format (opening and closing tags) <HTML, Head, Title, Body, H1- H6, bg color and background>
  8. Controlling text
  9. Ordered lists
  10. Unordered lists
  11. Directory list
  12. Definition list
  13. Menu list
  14. Nested list
  15. Preformatted text
  16. Block quotes
  17. Tables

SKILLS
  1. Visit web sites that demonstrate good and poor design elements.
  2. Identity good and poor design elements from selected web sites (“Web Pages That Suck.com”, Fixing Your Web Site)
  3. Create file structure on network for coursework (File directory guidelines)
  4. Learn how W3 Works (Learn the Net, How Stuff Works)
  5. Write simple HTML page using basic tags in notepad
  6. Discuss legal and ethical issues especially copyright issues

ASSESSMENT
  1. Submit ideas for web site project.
  2. Notes on good/bad design will be saved and later transferred to electronic portfolio
  3. Create simple storyboard on hard copy
  4. Create simple home pages using HTML
  5. Create electronic portfolio to log all activities describing fundamental elements of site (simple graphics)

STANDARDS 1, 2, 3, 6, 8, 16
Submitted by: Stuart Perry WEBPAGE DESIGNHome
OCTOBER

ESSENTIAL QUESTIONS

What are the basics of HTML? (cont.)
How do I save and publish a simple home page?
How do you control page layout?
CONTENT

HTML -- Coding & Editing

1.Adding Internal and external links

  1. Controlling text
  2. Ordered lists
  3. Unordered lists
  4. Directory list
  5. Definition list
  6. Menu list
  7. Nested list
  8. Preformatted text
  9. Tables
  10. Inserting simple inline graphics
  11. Attributes
  12. Hot sport
  13. Image maps
/
  1. Formatting text
  2. Boldface
  3. Underline
  4. Horizontal rule
  5. Italicize
  6. Line break

f.Font color and font face

5.Tables

  1. Basic table tags
  2. Spanning columns
  3. Formatting
  4. Aligning text
  5. Adding color
  6. Adjusting borders
  7. Table dimensions
  8. Controlling page layout
6.Publishing
  1. Using FrontPage 2000
  2. FTP
  3. Online site with publishing capabilities

SKILLS
  1. Complete lessons and projects in text: HTML Illustrative Series
  2. Continue to update course project (web site) incorporating new HTML and Design elements learned
  3. Publish using FrontPage and online sites

ASSESSMENT
Update Portfolio created to log progress in coursework.
Continue to update course project (website) using elements of design learned in course
STANDARDS
1, 2, 3, 6, 8, 16
Submitted by: Stuart Perry WEBPAGE DESIGNHome
NOVEMBER

ESSENTIAL QUESTIONS

What is the mission statement (CNET Builder – Establish Mission) for you site?
What message is your site conveying?
Who is the targeted audience?
How can you organize your site more effectively to convey your message (structural design)?
What are the benefits of using FrontPage?
CONTENT
Content Design
  1. Concept – Mission Statement (CNET Builder – Establish Mission)
  2. Content Design (Tiffany Shlain on Information Design)
  3. What message (information) is being conveyed?
  4. Who is the targeted audience; what is their background?(Builder.com – Identify User)
  5. Why are you targeting this audience with this information (purpose)?
  6. How can you organize your site most effectively to convey your message (structure)?
    Yale Style Manual Sit- Structure
  7. Random Access
  8. Linear
  9. Hierarchical
  10. Mixed
  11. FrontPage Editor

SKILLS
  1. Define Mission Statement for Website
  2. Define message
  3. Define the audience
  4. Define purpose of website
  5. Improve storyboard defining the type of structure that will be used for website (use Inspiration)
  6. Use FrontPage to experiment with above content design items (as part of intro to FrontPage)
  7. Continue updating website
.
ASSESSMENT
  1. Portfolio and website will be assessed in accordance with HTML coding and content design elements learned
  2. Storyboards must be updated to reflect new design elements

STANDARDS
1, 2, 3, 6, 8, 16
Submitted by: Stuart Perry WEBPAGE DESIGNHome
DECEMBER

ESSENTIAL QUESTIONS

How well are the elements arranged on the page(s) for unity and balance?
How do I design a site that emphasizes “ease of use”?
Does the user interact with the site?
CONTENT
  1. Unity and balance
  2. “Ease of use”
  3. User interaction
  4. FrontPage: forms and frames

SKILLS
  1. Continue work on website using design elements studied
  2. Analyze how well elements arranged on the page(s) for unity and balance:
  3. Top down layout for optimum viewing
  4. White space
  5. In-line images
  6. Tables – grid
  7. Frames
  8. Experiment (design) with links, buttons, banners, navigation bars, menus, tables of contents site maps, etc. (do they contribute to ease of use?)
  9. Define how (if) users participate or interact with the site? (using Frontpage)
  10. Create sample pages using tables to arrange elements on page
  11. Create a demo page using frames
  12. Discuss advantages and disadvantages of using frames

ASSESSMENT
  1. Portfolio and website will be assessed in accordance with HTML coding and structural design elements learned
  2. Storyboards must be updated to reflect new design elements

STANDARDS
1, 2, 3, 6, 8, 16
Submitted by: Stuart Perry WEBPAGE DESIGNHome
JANUARY

ESSENTIAL QUESTIONS

How do I enhance the visual design of my website?
How do I maintain website
What types of graphics can I add to my site?
CONTENT
Visual Design
  1. Themes
  2. Color Scheme
  3. content
  4. backgrounds
  5. links
  6. sidebars, banners, nav bars
  7. Fonts Styles and Sizes
  8. Graphics – photo or clipart
  9. appropriate selections
  10. thumbnails
  11. Multimedia effects – motion or sounds
Layout – arrangement of all visual design elements
SKILLS
  1. Continue to develop website with particular attention to the visual layout
  2. Focus on a “clean” and easy to use site.
  3. Experiment with the following design elements:
  4. Themes
  5. Color Scheme
  6. content
  7. backgrounds
  8. links
  9. sidebars, banners, nav bars
  10. Fonts Styles and Sizes
  11. Graphics – photo or clipart
  12. Appropriate selections
  13. Thumbnails
  14. Multimedia effects – animations, video and sounds

ASSESSMENT
Portfolios and websites will be continually evaluated to ensure they meet criteria defined in skills sections
STANDARDS
1, 2, 3, 6, 8, 16
Submitted by: Stuart Perry WEBPAGE DESIGNHome
FEBRUARY (ADVANCED)

ESSENTIAL QUESTIONS

How do I optimize graphics for quicker loading?
How do I create or edit images
How do I insert sound (multimedia)
How do I create animations
What is CSS, JavaScript, DHTML, and ASP?
CONTENT
How do I optimize graphics for quicker loading?
How do I create or edit images
How do I insert sound (multimedia)
How do I create animations
What is CSS, JavaScript, DHTML, and ASP?
SKILLS
  1. Create or edit images using Photoshop
  2. Optimize images with Photoshop
  3. Create simple animations
  4. GIF animator
  5. Flash
  6. Insert sound
  7. Use online tutorials to create or cut/paste JavaScript
  8. Add CSS to website (cascading style sheets)
  9. Go to online sites to create or cut and paste DHTML.
  10. Go to online sites to learn about ASP (Active Server Pages)
Links to advanced webpage design
ASSESSMENT
Portfolios and websites will be continually evaluated to ensure they meet criteria defined in skills sections
Sites will be presented to class as final project
STANDARDS
1, 2, 3, 6, 8, 16