This course is designed to increase confidence & skills in using a common web editing tool: MS FrontPage.  Elements of this course include:

• Initial Assessment: This is a non-graded exercise to determine your ability to troubleshoot common web-design issues.
• Weekly Proficiencies: Each week students are asked to complete exercises which demonstrate a competency at a particular web design skill set. Each proficiency is 10% of your final grade and may be taken twice. Proficiencies are hands-on activities and may only be done in class. Total proficiencies are worth 30% of your final grade.
• Final Project: Students' final project will consist of an educational web site, 4 or more pages in length, and can be a Scavenger Hunt, a Treasure Chest, a Virtual Field Trip or other educational pieces immediately useful to the students current job assignment.  This project must be a complete, cohesive, contained unit.  You will need to beta-test your final project with at least one other person. You will give a short presentation on your final project in which you will review the project, audience, and results of your beta-test. This project will be assessed through a combination of checklists and a rubric. Your final project is worth 70% of your final grade.

Course Materials

* You must own or have available MS FrontPage 2000 or later.  There will be some time to do work during class, but the majority of your project development time will be on your own.

* Text: TBA

* A mass media storage solution, preferably a flash, thumb or usb disk of 512 mb or greater. CDRs do not allow enough flexibility in design changes. Please note that while a Lexar brand jump drive is shown here, the Ramapo College MSET program is not endorsing this product or requiring you to purchase this brand. This is a sample only of what many jump, or thumb drives look like.

Please refer to the Text Reference for a complete outline of correlating text pages.

Tech Power
* Understand the process of design
* Recognize other web editors
* Understand the big picture of web hosting
* Browser & ISP basics
* Understand the general concepts of web design languages: HTML, XML, XHTML, JavaScript, ASP, SHTML, 
* Bringing your website into your family

Educational Web Design
* Scavenger Hunts, Treasure Chests, or other 4 - 5 page lessons.

Basic Design - Overview of FrontPage
* Use a web page creation program to generate basic pages containing course materials.
* Understand basic page layout and design principles to create effective pages with minimal scrolling.
* Add graphics to a web page document.
* Create and Edit links, and understand that any text can be linked to any file, URL, or email address.
* Enter a page title
* Insert background color and / or image.
* Create bulleted and numbered lists.
* Horizontal Rule, Date & time stamp.

Tech Tips
* Shift Enter
* Web Design Troubleshooting

Design Do's
* Coordinate themes, colors, graphics, navigation, anchor points.
* Design structure - lateral, vertical or combinations
* Age consideration for design structure & elements

Housekeeping - Yours, not mine!
* Troubleshoot broken links
* Troubleshoot broken images
* Upload new files to the server.
* Download files for editing
* Upload edited files to overwrite outdated ones.

Homework

* Review sites related to web accessibility
* Project Design
* Readings:

General Design Considerations

• http://www.molly.com/articles/webdesign/2000-10-designnightmares.php
• http://www.molly.com/articles/webdesign/2001-01-type.php
• Color Swatches
• Monochromatic Sample

Web Accessibility

http://www.visibone.com/colorblind/

Color Theory, Color Combinations & General Design Considerations

• http://www.colormatters.com/
• http://www.digital-web.com/features/feature_2000-11.shtml
• http://www.molly.com/articles/webdesign/2000-09-colormyworld.php
• http://psychology.about.com/library/weekly/aa031501a.htm
  

Tech Power
* Conduct Internet Research
* Collect and organize sites.

Educational Web Design
* Consistency in design
* Designing what you think you designed
* Educational Evolution - the progression of webs as they grow up

Advanced Basics

• Understand and implement Priority one items of web-accessibility: using alt tags, good choices and common sense
• Create anchors (targets, bookmarks) to create internal links in a document
• Use tables to organize information
• Use tables as a design tool to control the layout of a web page
• Layered Tables for Design Effect
• Indentations, Block paragraphs, lists & bullets

Design Do's

• Provide user-friendly navigation for all site contents.
• Use graphics effectively
• Understand copyright issues as they pertain to using the works of others.

Housekeeping

• Understand how HTML pages handle different window sizes in terms of graphics and text behavior.
• Understand the file structure of a web site.
• Know how the components of a web page (i.e. graphics and audio files) are displayed and the implications these components present to the organization of files on the server.
• Understand how internal links operate; this includes knowing the implications for organization of files on the server and how to troubleshoot when links do not function properly.

Homework

• Project Design
• Readings:

Web Accessibility

• http://www.webtechniques.com/archives/2000/08/newman/
• http://www.tracecenter.org/world/web/

Proficiency 1: Basic FrontPage Skills, FTP, Troubleshooting

Week Three: Web Site Wows Tech Power

**Template Design & implementation
** Simple Server Side Includes
** Framesets 101 (138 - 144)
** Fancy Graphics: Rollovers
** Simple Cascading Style Sheets
** Using JavaScript snippets
** Please note that these skill sets will be taught at the discretion of the instructor.  If there are basic topics that require more time, these items may not be addressed.

Design Do's
* Understand GIF and JPEG pros and cons as well as compression adjustments.
* Understand the tradeoff between graphic size / quality and download time.

Tech Tips
* Web Design Troubleshooting

Housekeeping
* Understand the relationship between table sizes, user window sizes, using percentages vs absolute values in table design.

Homework
* Project Design

* Readings: http://www.outfront.net/tutorials_02/getting_started/html_intro1.htm

Advanced Design
** Extra things you can do with DHTML
** Glimmers of other FrontPage Gadgets - Using FrontPage to put Excel worksheets on your site.

** Please note that these skill sets will be taught at the discretion of the instructor.  If the class as a whole needs more time on required topics, these items may not be addressed.

Educational Design
* Sharing, Collegial Coaching & peer review 

Tech Tips
* Web Design Troubleshooting

Homework
* Project Design
* Beta Testing!!!

Readings:

Advanced Design Topics

• http://www.ratz.com/
• http://www.molly.com/articles/webdesign/2000-08-webspace.php
• http://www.molly.com/articles/webthoughts/2000-01-chaos.php

Sense and Meaning

• http://gliebster.com/
• http://www.manteno.k12.il.us/drussert/WebQuests/HallOvandoRobinson/ (Not working as of Jan 25, 2005)

Beta Testing

• http://www.useit.com/
• http://www.useit.com/alertbox/
• http://www.usableweb.com/
• http://www.nngroup.com/services/testing.html
• http://personal.nbnet.nb.ca/faceybl/New/
• http://usability.gov/guidelines/

Great Tech Resources

• http://msdn.microsoft.com/library/default.asp?url=/workshop/entry.asp
• http://msdn.microsoft.com/default.aspx

JavaScript Resources

• http://javascript.internet.com
• http://www.vivaorange.com/
• http://www.webreference.com/dhtml/
• http://www.anfy.com

Week Five: FINAL Presentation

You will give a short presentation on your final project. During this presentation, you will lead the class through your project, identifying your goals & audience, design decisions and the results of your beta-test.

A word about your Beta-testing: Beta-testing is a way to get a fresh pair of eyes to look at your site.  Hopefully they will catch minor issues that you may not see. Feedback from beta-testers provide ideas and perspectives which may be helpful to you in the re-design of this project or any future designs.  Please note that you do NOT have to change your web piece based on your beta-testing results.  Again these results are meant for your reflection and analysis.

Point Distribution: This final is worth 70% of your FINAL Course grade.  

Absolute Non-Negotiable (50 points of your Project grade) - Your project must have the following characteristics:

• All work must be in a folder named SGET635 (1 Point)
• All work must be organized in this folder with an images folder, junk folder, and others as needed. (3 Points)
• First page is named index.htm (1 Point)
• Each page has author information including an email link, last updated and any credits sited. (5 Points)
• All internal and external links must be functional. (5 Points)
• Each page addresses web accessibility issues: all graphics have alt tags, color is appropriate, text size & content are appropriate for audience. (20 Points)
• All pages FTP'd to the server and must work correctly. (10 Points)
• Project must be linked to your portfolio (5 Points)

Additional Non-Negotiables (20 points of your Project Grade) You must include at least three advanced web design techniques. These techniques must be demonstrated throughout your site, where appropriate, to be considered for points.

• Hyperlinks to targets/bookmarks/anchors within a page, and page to page
• Simple Server Side Includes
• Simple Cascading Style Sheet
• Tables are used for positioning, or data display
• Rollover images
• Rollover Hyperlinks
• Use of JavaScript snippet/s

Rubric: (30 points of your Final Project Grade)

| Course Scoring Sheet | Final Project Scoring Rubric |