1. Personal Website Project
A WebQuest for 11th Grade Web Design
Designed by
Jonathan Jarc
Personal Site Project

2. Student: Introduction
For this first site, the designer will be challenged to create a simple start page for their directory. The file in your site titled index will be the first page that is automatically loaded when a viewer browses to their directory. Therefore, the page needs to be simple in layout and design, and should contain links to projects constructed over the course of the semester. The first page will serve as the 'portal' for your site, giving links to your sitemap, and other index files within your directory structure.
Student: Introduction

3. Student: The Task The Task
Students will create a simple, four page site project giving some insight into their personality. Students are expected to:
Create 4 html pages (home, work, personal, and random).
Populate each page with 4-5 paragraphs of text.
Populate each page with at least 3 images.
Create navigation structure for the site, common to all pages.
Implement and test navigation for ‘two click rule’.
Develop custom header graphics.
Check browser compatibility.
Troubleshoot variations and anomalies.
Write feedback on one other student’s website.
Your website creation process will use (but is not limted to); Photoshop, Illustrator, Dreamweaver, Internet Explorer, Firefox, Safari.
Student: The Task

4. Student: The Process The Process
Draw ‘content diagram’ on paper to illustrate the structure of your web page. Determine whether tables or css/div is more appropriate for your structure.
Create 4 html pages (home, work, personal, and random) in your web directory on the server. Start with blank, ‘undesigned’ pages.
In one of the blank pages, create the general structure using tables or divs as specified in your content diagram document, including navigation menu. Test for validity.
Copy the structure and navigation to other site pages.
Populate each page with 4-5 paragraphs of text. Text should be relevant to the page and page title. Be sure to change page titles.
Populate each page with at least 3 images. Images should be relevant to content, and all ‘borrowed’ images must be sited.
Test navigation for ‘two click rule’.
Develop custom header graphics.
Publish all content and check browser compatibility and network access.
Troubleshoot any issues, variations and anomalies.
Write feedback on one other student’s website  
Student: The Process

5. Student: Evaluation Evaluation
Performance on this project is based on assumed criteria and website performance.
Student: Evaluation
Excellent 4
Satisfactory 3
Inadequate 2
Disfunctional 1
Score
Functionality
All pages, navigation, images, and text present properly in all browsers and networks.
One or two links are broken, one or more images may not appear correctly in certain browsers.
More than two links or images are broken or not functioning.
Navigation is broken, pages are missing or mis-linked, images are missing or unavailable.
Layout
Programming choice is appropriate and well executed. Look and feel are well matched, coordinated, and appropriate.
Programming choice is appropriate but lacks execution. Colors are not coordinated or are inappropriate.
Layout is not executed, not functional, or missing pieces. Color and images are drastically disjointed.
Layout is not functional, or hinders performance. Images non-existent not sited, or not functional.
Feedback
Adequate feedback is provided for peer review. Feedback is substantial enough to encourage change.
Feedback is adequate, but gives little to no constructive criticism to implore change.
Feedback is inadequate and offers no constructive criticism.
Comments are unavailable and have little impact on overall aesthetic.
more

6. Student: Conclusion Conclusion
Once the page is designed, and the content is added, the page should be saved, and then previewed in a browser for color accuracy, and image reference verification.
Once you are sure that the page is constructed correctly, it should be uploaded, as well as it's dependent images, via ftp to your directory on the graphics web server. After file transfer, use a browser to view your live page via the internet. Go to your website to be sure that your page loads automatically, loads correctly, and the image shows up properly.
Once that is verified, you can continue creating the sitemap page in the same order. Designers should test for functionality, navigation and ease of use. Refer to peer and teacher feedback for improvements, assessments, and structural commentary.
Student: Conclusion

7. Personal Website Project
A WebQuest for 11th Grade Web Design
Designed by
Jonathan Jarc
Teacher: Project

8. Teacher: Introduction
This lesson was constructed as an introduction to web design and development. Many of the techniques used in this example are to be built upon in future projects. The underlying structure of the components of this project are critical to any and all of the following projects in web design.
Mastery of these base concepts is critical before any additional skills can be taught and learned. Teachers should be sure that students are 100% complete with this project and its varied components before moving forward.
Teacher: Introduction

9. Teacher: Learners Learners
This exercise is designed for 11th and 12th grade students in Web Design class. Students should have taken some kind of general computer class and general design class prior to this Web Class.
Critical skills involve general computer capabilities, use of the internet, and familiarity with the creative process, general design and aesthetics.
Teacher: Learners

10. Teacher: Curriculum Standards
Students will learn proper website terminology. Students will learn to differentiate and evaluate various techniques for designing and developing web pages. Students will use a variety of
Ohio State Technology Education Standards
Technology Standard 3
Students learn the operations of technology through the usage of technology and productivity tools. Students use computer and multimedia resources to support their learning. Students understand terminology, communicate technically and select the appropriate technology tool based on their needs. They use technology tools to collaborate, plan and produce a sample product to enhance their learning and solve problems by investigating, troubleshooting and experimenting using technical resources.
Benchmark A: Integrate conceptual knowledge of technology systems in determining practical applications for learning and technical problem-solving.
Teacher: Curriculum Standards

11. Teacher: Processes Process
Draw ‘content diagram’ on paper to illustrate the structure of your web page. Determine whether tables or css/div is more appropriate for your structure. Students should use landscape oriented sheets of paper to emulate screen size.
Set up student server accounts, have students verify permissions, logins and default documents.
Explain differences between layout methods; tables, css, div, advantages and disadvantages of each, terminology related.
Overview Dreamweaver, and explain layout implementation using DW. Explain templating and text and image inclusion.
Explain and show FTP concepts and local/remote file systems and file management.
Explain and show use of Photoshop to create web graphics. Explore terminology related to Photoshop and its web processes. Discuss file format, image size, and resolution.
Discover ‘two click rule’, and explain its involvement in the project.
Discuss how to publish all content and check browser compatibility and network access on a variety of systems, browsers, and operating systems.
Explain how to troubleshoot any issues, variations and anomalies.
Discuss the writing feedback on one other student’s website. Show what to look for, how to evaluate, and properly critique another’s site. Discuss ‘constructive’ criticism and the evaluation process.  
Teacher: Processes

12. Teacher: Resources Needed
Technology needed to complete this project:
Web Server and ftp access
Student web directories
Dreamweaver or other html editor
Photoshop or other image editor
Internet access
Website resources include the Graphics Lab Website:
Human resources include your web design instructor or related mentor with html, css, and web server experience. One teacher is enough to serve a classroom of 15 students. Be sure to choose instructors who have html knowledge, and are able to set up student network accounts. The ability of the instructor to troubleshoot with the students is critical to the success of the project.
Teacher: Resources Needed

13. Teacher: Evaluations Evaluation
Student performance is based on three major criteria. Functionality that describes the overall usability of the student web pages. Layout describes the general aesthetic appeal of the design of the website. Layout and Functionality should be discussed in concert with one another, and not as mutually exclusive elements - although graded separately. Feedback should be evaluated for constructivity, completeness, thoughtfullness, and originality.
Teacher: Evaluations
Excellent 4
Satisfactory 3
Inadequate 2
Disfunctional 1
Score
Functionality
All pages, navigation, images, and text present properly in all browsers and networks.
One or two links are broken, one or more images may not appear correctly in certain browsers.
More than two links or images are broken or not functioning.
Navigation is broken, pages are missing or mis-linked, images are missing or unavailable.
Layout
Programming choice is appropriate and well executed. Look and feel are well matched, coordinated, and appropriate.
Programming choice is appropriate but lacks execution. Colors are not coordinated or are inappropriate.
Layout is not executed, not functional, or missing pieces. Color and images are drastically disjointed.
Layout is not functional, or hinders performance. Images non-existent not sited, or not functional.
Feedback
Adequate feedback is provided for peer review. Feedback is substantial enough to encourage change.
Feedback is adequate, but gives little to no constructive criticism to implore change.
Feedback is inadequate and offers no constructive criticism.
Comments are unavailable and have little impact on overall aesthetic.

14. Teacher: Conclusions Conclusion
This website project will give students access to a variety of technical tools. It will allow them to learn a new set of terms and skills that are the background underlying structure to something they use every day.
This lesson is as much a website design exercise as it is an exercise in reading, writing, problem solving, critical evaluation, and critical thinking. Students are asked not only to design, but to evaluate a proper system to use, proper color scheme, and image choices. Along the way in the development of these websites, students are challenged to apply design principles, skills learned, and peer feedback as it applies to their individual site design projects.
Students can use this website as a starting point for additional design projects, additional programming projects, and even forward looking to an e-portfolio type of application.
Teacher: Conclusions

15. Credits and References
Credits & References
Introduction to Web Design Using Dreamweaver. Mark Evans and Michael Hamm
Copyright 2007 by McGraw Hill Companies.
Credits and References