Click here for the document download.Web

1. Information Technology Industry Skill Standards High School Curriculum for Web Design and Development Note to Users: This curriculum was designed as an "on-line" instructional tool. Students access the full curriculum and related resources via the web. The instructors who designed the curriculum teach at different high schools but use the same curriculum. The web site is "live" and updated regularly as students and teachers use the various curriculum resources. You can access the complete curriculum by visiting the Bellingham School District's web site at: http://www.bham.wednet.edu Click on the Technology link; then click on Web Design. The CD-Rom included with this package contains a copy of the website and all related lesson activities that were being used at the time this guide was printed (January 2003).

2. Web Design and Development Document Information For more information, or to order curriculum materials, please contact: Linda Cowan, Consortium Director Laurie Stephan, Curriculum Program Coordinator Whatcom County School-to-Work/ Northwest Workforce Center for Emerging Tech Prep Consortium Technologies (NWCET) Office Location: Office Location: Bellingham Technical College Bellevue Community College 3028 Lindbergh Ave. 3000 Landerholm Circle, SE, N258 Bellingham, WA 98225 Bellevue, WA 98007-6484 Phone: (360) 738-3105, x-409 Phone: (425) 564-4215 Fax: (360) 676-2798 Fax: (425) 564-6193 Email: lcowan@btc.ctc.edu Email: nwinfo@bcc.ctc.edu Web: www.nwcet.org Permission to Photocopy and Quote Copyright © 2002 General permission is granted to educators to photocopy limited material from prepared curriculum for non-commercial instructional or scholarly use. Permission must be sought from School-To-Work Consortium in order to charge for photocopies, to quote material in advertising, or to reprint substantial portions of the document in other publications. Credit should always be given to the source of the photocopies or quotes by citing a complete reference. Funding for this Project This curriculum guide was designed and developed using Industry Skill Standards grant funds made available through Washington State School-to-Work Transitions, Federal Implementation Grant Project (School-to-Work Opportunities Act of 1994). Funds distributed through Office of Superintendent for Public Instruction - Department of Career and Technical Education. Disclaimer The curriculum content and opinions expressed herein are those of the authors (teachers) and do not reflect those of NWCET or OSPI - Career and Technical Education. Document Credits Linda Cowan Project Coordination & Grant Funding Laurie Stephan Curriculum Facilitator (NWCET) Susan Parker Technical Assistance (Bellingham Technical College) Scott Wilmot Cover Design (Wilmot Graphics)

3. Web Design and Development Acknowledgements The following Whatcom County teachers designed and developed three Information Technology program curriculum guides: Web Design & Development Curriculum Team Don Helling, Sehome High School - Bellingham School District teaches English and web design courses Joe McAuliffe, Squalicum High School - Bellingham School District teaches English, SAIL program and web design courses Karll Rusch, Bellingham High School - Bellingham School District teaches Tech Connections, technology education & web design courses PC Hardware Fundamentals Curriculum Team Steve Andres, Ferndale High School - Ferndale School District teaches web design, video production & computer hardware courses Bruce Woodcock, Lynden High School - Lynden School District teaches math and computer hardware courses Lee Falta, Bellingham Technical College teaches computer networking technology courses Greg Rehm, Bellingham Technical College teaches computer networking technology courses Video Production Curriculum Team Chris Carlson, Squalicum High School - Bellingham School District teaches video production and technology education courses Jim Nelson, Blaine High School - Blaine School District teaches video/broadcast television production and technology education courses The project participants would like to thank our local IT business partners for providing the teachers with guidance and project support, workplace tours, job shadow opportunities, summer internship experiences and classroom visitations as guest speakers. Bellingham/Whatcom Technology Alliance Group (TAG), John Gargett, President Dealer Information Systems Bob Brim, CEO Rivetek Robin Halliday, CEO Think-a-Tron Media Labs John Mortensen, President Mindfly Gary Pickering, President FiberCloud Milissa Miller, Manager Port of Bellingham John Molder, IT Manager Tim Cool, LAN/WAN Specialist KVOS TV/Studio 12 Roger Vater, Technical Director Attachmate Corporation Kevin Boxx, IT Manager VisionQuake/Baron and Company Gerald Baron, CEO Jim Hassi, President - VisionQuake ConocoPhillips Ferndale Refinery Vicki Whittlesey, IT Manager James Carrell, Technical Supervisor SPIE Brian Thomas, Technology Development Manager Haggen, Inc. Ron Burke, IT Manager Alpha Technologies Jim Dettman, IT Manager Solera Group Lori Aswegan, Director of Business Development

4. Web Design and Development Videosmith Productions Lars Kongshaug, President InterConnect Systems Curtis Dye, President City of Bellingham/IT Services Department James Baird, Telecommunications Administrator DigiPen Institute of Technology Jason Chu, COO The Whatcom County School-to-Work/Tech Prep Consortium gratefully acknowledges the technical guidance and financial support of the following project partners and sponsors: OSPI - Department of Career and Technical Education Kyra Kester, Assistant to Superintendent for Industry Partnerships Cindy Agnew, Pathway Supervisor - Information Technology Education Northwest Workforce Center for Emerging Technologies (NWCET) Peter Saflund, Associate Director Laurie Stephan, Curriculum Program Coordinator

5. Web Design and Development Project Introduction For the past three years, the Whatcom County School-to-Work/Tech Prep Consortium has spent a great deal of time and money helping our local high school partners develop a variety of Information Technology-related courses. We have found the implementation process to be a challenge. Most of our schools are faced with limited financial resources to purchase the necessary hardware and specialized IT equipment, and limited access to teachers who possess the requisite skills and certifications necessary to teach IT-related courses. We discovered many IT teachers are "self- taught" with no industry experience or certifications related to IT program skills and competencies. Many rely on a "canned curriculum" package/textbook to establish program structure and course content. As a Consortium we were fortunate to receive a special IT Industry Skill Standards grant made available through Washington State School-to-Work Transitions funding. The grant project was intended to help some of our schools begin building strong IT courses linked to our career pathway model, grounded in current industry standards and providing real-world learning opportunities for students. The curriculum foundation would be linked to the industry skill standards for Information Technology careers as developed by the Northwest Workforce Center for Emerging Technologies (NWCET) located on the campus of Bellevue Community College. We also required teachers to align the curriculum with the appropriate Washington State EALRs (Essential Academic Learning Requirements). Our first challenge was to bring together a group of local high school and college instructors who would be willing to work together for over a year on the development of this curriculum project! A call went out to all 13 of our Consortium school partners asking for project volunteers. Nine teachers expressed an interest. As it turned out, the seven high school and two college instructors represented three IT career cluster areas which ended up forming the nucleus of this project: Web Development and Administration: Web Design Digital Media: Video Production Technical Support: PC Hardware Fundamentals Each curriculum team was comprised of instructors from different Whatcom County schools. The task for each team was to design a "vendor neutral," one semester (two if possible), industry skill standards-based curriculum appropriate for high school students. A primary goal of the project was to make sure that all teacher participants have a variety of opportunities to work with local IT business partners to help develop their IT workplace skills and expertise and to attend training workshops to prepare for industry certifications. To support this goal, we provided teachers opportunities to work with local IT professionals in "advisory" meetings, industry tours, site visits, job shadows and summer internships. Teachers involved in this project were compensated for their individual curriculum development time, provided with classroom substitutes for various workshops, given an equipment/resources budget to help expand their program, and provided with paid summer internships at various worksites across the county. We hope you will find the curriculum useful as you begin to develop IT programs for your school(s). As this is being written, the teachers involved in this project are "piloting" the curriculum in their classrooms. Revisions will be made as new ideas emerge and old lessons discarded. If you have questions about any of the curriculum components, please feel free to contact the teachers involved in the project. They would be happy to share ideas about how they have revised the various lessons and added new ideas. The curriculum we produced is only intended to be a starting place…an outline of ideas that you can shape to suit the needs of your students and school community.

6. Table of Contents Curriculum Introduction...............................................................................................................8 Introduction to Web Design and Development...........................................................................11 Unit 1: Design and Planning Basics.......................................................................................................14 Unit 1, Module 1A: Day One - Introduction.............................................................................................................17 Unit 1, Module 1: Basic Site Evaluation and Rubric Creation...............................................................................25 Unit 1, Module 2: Color Theory and Web Design Usability..................................................................................32 Unit 1, Module 3: Initial Storyboarding and Site Mapping....................................................................................38 Unit 2: HTML Basics...............................................................................................................................42 Unit 2, Module 1: Basic Tags................................................................................................................................44 Unit 2, Module 2: Text Formatting Tags...............................................................................................................50 Unit 2, Module 3: Image Tags...............................................................................................................................56 Unit 2, Module 4: Link Tags..................................................................................................................................71 Unit 2, Module 5: List Tags...................................................................................................................................79 Unit 2, Module 6: Table Tags................................................................................................................................85 Unit 2, Module 7: Source (Cut & Paste)................................................................................................................94 Unit 3: Preparing Images........................................................................................................................96 Unit 3, Module 1: Photoshop Tutorials..................................................................................................................98 Unit 3, Module 2: Applying Photoshop ..............................................................................................................102 Unit 4: Intermediate HTML or Controlling Page Layout with Tables.................................................108 Unit 4, Module 1: Controlling Alignment within the Cell Tag ...........................................................................110

7. Unit 4, Module 2: Spanning and Nesting Tables .................................................................................................112 Unit 4, Module 3: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout........121 Unit 5: Dreamweaver Introduction/Mock Web Site..............................................................................126 Unit 5, Module 1: Dreamweaver Tutorials...........................................................................................................129 Unit 5, Module 2: Applying Dreamweaver..........................................................................................................132 Unit 6: Culminating Project(s)..............................................................................................................143 Unit 6, Module 1: Culminating Project................................................................................................................145 Syllabus: Web Design & Development 1 & 2............................................................................149 Web Design 2: Advanced Design and Development: Preliminary Tutorials..............................................................................................................152

8. Web Design and Development Curriculum Introduction Web Development and Design One: A Curriculum Based on IT Skill Standards This document represents the work accomplished developing a beginning level course in web design for the secondary school student, grades 9-12. Our Bellingham School District team consisted of web design teachers Joe McAuliffe of Squalicum High School, Karll Rusch of Bellingham High School, and Don Helling of Sehome High School. The course structure is grounded in the principles of both the industry skill standards of the National Workforce Center for Emerging Technologies (NWCET) and Washington State's Essential Academic Learning Requirements (EALRs). The curriculum was shaped as well by essential hands-on experience in the workplace, and discussions with members of Whatcom County's information technology community. The high school web design course in the Bellingham Public Schools was initiated at Squalicum High School in 1998 and became a collaborative effort at the three schools beginning in the fall of 2000. Last spring we were fortunate to be accepted in the Whatcom Tech Prep Consortium's (WTPC) Industry Skills Standards/IT Career Pathway project. This project was funded by Washington State's School-to-Work Transition grant through the Office of Superintendent of Public Instruction (OSPI). The grant fund paid for staff development, site visits, internships with business, curriculum design and helped us purchase needed equipment. We came together with strong computer skills but relatively limited experience teaching web design, as well as varied teaching backgrounds in general (English, Technology, Alternative Ed., etc.). It was clear from the beginning that this curriculum template would be a work in progress. The curriculum would necessarily change with the unknown factors that always seem to crop up when dealing with technology education, and the three of us would follow the overall structure but tailor the curriculum to our individual teaching strengths. This is the way we expect other teachers to use this document. We hope that the units contained in this document will help you develop your own web design courses based on your individual needs and resources. We agreed from the start (1) that this would be a project-based curriculum, (2) that it would be relatively cross-platform -- not linked to a specific software manufacturer or computer, and (3) that it would include "real-world" soft skill elements while teaching the basics of designing and creating web pages. (Although we intend this curriculum to be valid using either Mac or Windows operating system, we were limited to the use of a Windows-based network when developing and teaching these units). The summer of 2001 gave us the opportunity to participate in one-week internships in the local IT community. Joe and Don worked with Mindfly, a local web design firm. Gary Pickering, Rusty Swayne and David Ladiges offered us personal hands-on instruction in professional web development. They offered us a close-up view of how important "soft skills" are in the workplace. The constant communication between employees, as well as with clients, reinforced our focus on the need for these to be included in our project-based curriculum. The actual projects centered on the use of current database techniques, which will be the next step in our course development for Web Design 2, the second course in the web design pathway. Karll spent a week with a local similar web design firm, focusing on using Photoshop for web graphics. In addition to this opportunity, we were visited by, and were able to visit, representatives of other local businesses. Some of these companies were technology-based (such as FiberCloud, a state of the art data center that hosts a number of web sites and company information databases), while some were companies with a web presence (the Port of Bellingham, for instance). These visits Whatcom County School-To-Work/Tech Prep Consortium 8

9. Web Design and Development continued to reinforce the aspects of the course that we had deemed most important. The message we heard over and over, was that communication, organization and other soft skills were as important, if not more important, than knowing how to use the technology. In addition to the general questions, there were a few specific questions that were answered for us in the internships and community workplace visits. The most important was where we should place our web page creation emphasis: WYSIWYG programs (such as Adobe's GoLive or Macromedia's DreamWeaver) or text-based coding. The consensus is that you need some of both. The reality in smaller web design firms was that most used a combination of programs such as the Macromedia product HomeSite (basic coding) and DreamWeaver (WYSIWYG). Most employers felt that a basic understanding of HTML code in a simple text-editor was important to understand what underlies WYSIWYG editing and in order to work on problems that go beyond the scope of these programs. Our curriculum is divided into six units, but please note that they should not necessarily be approached in a consecutive manner. For instance, Unit 2 outlines basic HTML coding, and should probably be done along with Unit 1, which covers basic design principles. We leave this up to the individual instructor's judgment and time constraints. Additional resources the three of us have used to supplement and reinforce our curriculum include guest speakers from the local IT community and visits to local IT businesses. These visits fit nicely with the pathway focus of our curriculum as well as serving to introduce students to the real world of the IT workplace and related employment opportunities. The specific links between this curriculum and the NWCET's industry skill as well as Washington State OSPI's EALRs should be clear in the curriculum unit and module overviews. As it relates to these two documents, our focus in this course was on improving communication skills as well as mastering technical skills. We would like to thank Linda Cowan, Laurie Stephan, and all of our classmates and business partners for the help they gave us developing this curriculum. As this is a "work-in-progress" we would welcome feedback and suggestions for any aspect of this curriculum. Please contact any or all of us at the following email addresses: Dhelling@bham.wednet.edu Sehome High School Krusch@bham.wednet.edu Bellingham High School Jmcaulif@bham.wednet.edu Squalicum High School We sincerely hope that this curriculum will be useful for those serious about implementing a web design curriculum based on workplace skill standards and practices. General permission is granted to educators to download and/or photocopy material from this curriculum for non- commercial instructional or scholarly use. Permission must be sought from Linda Cowan in order to charge for photocopies, to quote material in advertising, or to reprint substantial portions of this document in other publications. Credit should always be given to the source of the photocopies or quotes by citing a complete reference. Don Helling Linda Cowan, Director Joe McAuliffe Whatcom County Tech Prep Consortium Karll Rusch 3028 Lindbergh Ave. Bellingham, WA 98225 360-738-0221 lcowan@btc.ctc.edu Whatcom County School-To-Work/Tech Prep Consortium 9

10. Web Design and Development SAMPLE JOB Web You will play a vital role in your company’s TITLES presence on the world wide web. You may use web page development software to create or change web Develop Web Administrator pages, inserting text content, graphics and interactive modules that are often supplied by others in your organizational team. Before you start, you Web Architect ment will probably talk to the many stakeholders in your company who depend on the organization’s web presence. You’ll also look Web Designer and at successful models and research software tools to help design the look, feel and navigation. In some organizations you may be Web Page Developer responsible for making sure the web pages and updates get installed and work with the hardware associated with the web pages. Producer Web Web Site Developer Web Specialist Webmaster Whatcom County School-To-Work/Tech Prep Consortium 10

11. Web Design and Development Introduction to Web Design and Development Course Description: This class is an introduction to the design, creation, and maintenance of web pages and web sites. Students learn how to work with images, and to properly create, link and maintain web pages. The course projects progress from introductory work on web design software to the capstone projects that demonstrate mastery of the NWCET skill standards for information technology. Course Objectives:  Students will gain the skills and project-based experience needed for entry into web design and development careers.  Students will be able to create web pages and web sites using a variety of strategies and tools (industry standard software and hardware). Textbook/Web Resource Recommendations: Texts regularly used by students as supplements to the course material: HTML For the World Wide Web, Elizabeth Castro, ISBN# 0-201-35493-4 Creating Web Pages with HTML Simplified 2nd Edition, ISBN# 0-7645-6067-0 Teach Yourself Visually HTML, ISBN# 0-7645-3423-8 Texts used less frequently but helpful for advanced students: Web Design Studio Secrets, ISBN# 0-7645-3455-6 Designing Web Graphics.3, Lynda Weinman, ISBN# 1-56205-949-1 Master Visually HTML4 and XHTML 1, ISBN# 0-7645-3454-8 A few of the many web sites used as resources in the class:  Builder.com  Webmasterbase.com  Yale Web Style Guide  Web Page Design for Designers  CoolHomePages.com  PageResource.com  Colormatters.com  WebDesign at About.com (+web design tips)  Design Tips, Tutorials and Tricks (175+ links)  WebMonkey Hardware/Software Recommendations: This course was designed using the Microsoft Windows operating system. These are the basic hardware and software configurations that we have used to create our web design labs. We recognize that there are many different possible ways to effectively outfit a lab in order to teach a similar course. In addition to the below software suite, we are currently experimenting with "virtual tour" photo software, as well as Illustrator, and the 3D modeling software Rhino as they apply to web design and development. Whatcom County School-To-Work/Tech Prep Consortium 11

12. Web Design and Development Operating System:  Windows 98/2000 or later Hardware:  Individual computers o Minimum 64 Mb of RAM -- preferably greater (128 - 256) o 166 MHz processor -- preferably greater o Color monitor -- 17-19 inch, minimum 800 x 600 resolution, 256 color o CD ROM drive Lab Hardware:  One or more of the following o Flatbed scanner -- (a good stand alone frees up a computer station) o Digital camera o Zip drive o CD Burner  One of the following: o Video projector o Networked server with access to shared drives and internet access, preferably at T1 or greater Software:  Installed on Individual Computers o Notepad or equivalent text editor o Macromedia Dreamweaver 3.0 or later o Adobe Photoshop 5.5 or later o Macromedia Homesite 4.5 or later o Microsoft Internet Explorer browser (latest version) o Netscape browser (latest version) o Suite of software that includes document, email and presentation software (Microsoft Office) Lab Software: o One or more copies of optical scanning software (Omnipage or similar) o Limited copies of Macromedia Flash, Adobe Illustrator, Rhino, etc. o Software for downloading and storing digital camera images Unit Titles: The units of this course are presented as separate discrete sequential steps in the process. This may be a bit deceiving, because as with any curriculum, when put into practice there will be overlapping and modification between units to suit the individual instructor and class (intro skill level, size of class and general temperament).  Unit 1: Design Basics  Unit 2: HTML Basics  Unit 3: Preparing Images  Unit 4: Advanced HTML (Tables)  Unit 5: Dreamweaver Introduction Whatcom County School-To-Work/Tech Prep Consortium 12

13. Web Design and Development  Unit 6: Capstone Projects Whatcom County School-To-Work/Tech Prep Consortium 13

14. Web Design and Development Unit 1: Design and Planning Basics Overview: This unit will give students a basic understanding of the beginning design principles that apply to general web design and development. It will also help them establish criteria for evaluating websites (their own as well as general sites on the Internet), and introduce them to the site- planning concepts of developing a site plan and storyboarding. Portions of this unit can be done away from the computers if necessary. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: A1: Gather Data to Identify Customer Requirements  Technical Knowledge: Knowledge of customer interview techniques regarding requirements. Ability to identify key sources of information.  Employability Skills: Ability to identify and prioritize the need for data. Ability to pose critical questions. Ability to encourage cooperation. A7: Create and define preliminary design/mockup  Technical Knowledge: Knowledge of mockup development options and methodologies. Ability to translate functional features into application/site design.  Employability Skills: Ability to generate/evaluate solutions and devise/implement plan of action. Ability to demonstrate creative thinking while problem-solving. A10: Develop project plan  Technical Knowledge: Knowledge of functional and technical specifications, all data models, site maps, assumptions, constraints and risks.  Employability Skills: Ability to analyze organization of information. Ability to work with minimal supervision and pay attention to detail. Ability to assess individual knowledge/skills and analyze work assignments. B1: Develop site map and application models  Technical Knowledge: Ability to design content structure. Knowledge of site mapping and information mapping techniques. Knowledge of graphical user interface design. Whatcom County School-To-Work/Tech Prep Consortium 14

15. Web Design and Development  Employability Skills: Ability to analyze organization of information and transfer information between formats. Ability to demonstrate creative thinking process while problem-solving and apply creative solutions to new situations. B3: Produce graphic and layout elements  Technical Knowledge: Ability to design user-friendly sites and applications. Knowledge of company requirements and standards. Ability to develop aesthetically pleasing elements.  Employability Skills: Ability to create original documents and synthesize information. Ability to follow policies and procedures and work with minimal supervision. Ability to interpret and clarify communication. Ability to prioritize daily tasks and monitor adjust task sequence. Learner Outcomes/Objectives: The student will be able to:  Analyze web pages for audience, purpose, message.  Create a rubric to evaluate the effectiveness of web sites.  Design a simple site using storyboarding and site mapping techniques.  Understand basic color theory and optimal design theory for usability.  Incorporate color theory and optimal design theory in a model web site. EALRs:  Reading: o The student reads different materials for a variety of purposes.  Writing: o The student writes in a variety of forms for different audiences and purposes. o The student writes clearly and effectively. o The student analyzes and evaluates the effectiveness of written work.  Communication: o The student communicates ideas clearly and effectively. o The student uses communication strategies and skills to work effectively with others. o The student analyzes and evaluates the effectiveness of formal and informal communication. Module Titles: Note: As students work through the modules and lessons in Unit 1, some of the exercises may be applied to the Personal Web site.  Module 1A: Day One Class Preparation  Module 1: Website Evaluation and Rubric Creation  Module 2: Color Theory and Web Design Usability Whatcom County School-To-Work/Tech Prep Consortium 15

16. Web Design and Development  Module 3: Initial Storyboarding and Site Mapping Whatcom County School-To-Work/Tech Prep Consortium 16

17. Web Design and Development Unit 1, Module 1A: Day One - Introduction Overview: This is not a separate module, but a day set aside prior to beginning the activities of Module 1 for introducing the course and outlining the curriculum, class rules and expectations. Module 1A Lesson: Lesson 1: Introduction to the course: Length of Lesson: 50 - 60 minutes  Description: o Most teachers have specific introductory activities that they like to (or are required to) incorporate into the first day or two of any class. On day one--or prior to the start of Module 1--for this course, the teacher will want to cover some of the following aspects of the course as they apply to a particular school and lab. It is also helpful to have students complete a short survey of technology skills to help with planning for the first activities Here are some discussion points to cover: a) Ethical elements of computer use in this course b) Potential job paths (web master, web designer, web developer, etc.) c) Rules and consequences d) Grading criteria (sample), as well as incremental checks on capstone projects e) Syllabus f) Documentation/recordkeeping/email management, which includes electronic portfolio, hard copy file folder, and backup of all work on Student and Resource drives. This includes an explanation of biweekly report forms (sample follows) that students fill out-- essentially a journal of daily activities done at the end of each class session. Next, you may want to give a short written survey of the students' web design skills and background to help you decide on initial activities and to decide on team orientation for early projects, as well as set the pace and overall goals of the course.  Learner Outcome: o At the end of this lesson, students will fully understand the scope of the class as well as the basic rules, policies, and expectations.  Activity: o You may want to develop a short quiz covering ethics, rules and policies that students must pass and sign in order to use the classroom computers. These can be kept on file to help hold students accountable for responsible behavior in the lab. Whatcom County School-To-Work/Tech Prep Consortium 17

18. Web Design and Development  Resources Needed: o Survey form, as well as written syllabus and list of pertinent district and classroom rules.  Suggested Assessment: o The quiz outlined above, or a thorough class discussion covering important aspects of computer ethics, class rules and policies. Whatcom County School-To-Work/Tech Prep Consortium 18

19. Web Design and Development Sample Day One Survey Form Basic Information and Survey of Web Design Skills The following is a non-scientific survey intended to tell me something about your aptitudes and skills that relate to designing web pages as part of a team. Please answer honestly. How you respond to these questions will not determine your grade. It will, I'm hoping, give me some information that may help us figure out how you can best contribute to the work we do as a group. Circle the best response to each question. Complete this form and email it to me as a Word attachment. You may add additional information about your computer skills at the end of this survey. Name: Parents/guardian name: Home phone #: Birthday: Favorite school subject: Briefly describe your post-high school plans: Briefly define your goals and expectations for this course. For those in Web Design 1, complete the following: (delete all but the appropriate response) 1) My background designing web pages is best described by the following statement: a. I create web pages not only for myself but for others (either for profit or as a pastime) b. I have created a page(s) for myself on my own time c. I have created pages as a school project d. I have never created a web page 2) My experience with Microsoft Windows is best characterized by the following statement: a. I am very familiar with the Windows operating system. b. I'm somewhat familiar with Windows operating system. c. I haven't used a computer with Windows operating system. 3) To what extent have you already located web design resources (i.e. tutorials, sites with collections of graphics, icons or animated gifs)? a. Yes, I have an extensive and up-to-date collection. b. If I need something I can easily find it on the web. c. I know what you're talking about but would need to search around. d. I'm not sure what you're talking about. 4) Which statement best characterizes your skills associated with web page design? a. I can make a web page from scratch using html code and a text editor (for example Notepad) and have experience with using a web page editing program (for example Dreamweaver). b. I can make a web page from scratch using html code and a text editor, but have no experience using a web page editing program. Whatcom County School-To-Work/Tech Prep Consortium 19

20. Web Design and Development c. I can create a web page but I'd have to rely on a web editor. d. I use the Internet (the web), but I've never learned to create a web page. e. When I hear words such as "internet" and "web" I'm curious but not sure what they are. 5) When you take one of those standardized tests on a bubble sheet that requires identifying errors in sentences, your score is generally… a. high b. average c. Identifying errors is not one of the things I do well. 6) When you get an essay back from a teacher, which of the following statements describes the paper’s condition: a. few if any corrections concerning my grammar, punctuation and spelling, b. 2-5 corrections concerning grammar, punctuation and spelling on each page, c. The ink from correction marks washes my pages like a sea of blood. 7) How good are you at proofreading your own writing and that of other writers? a. I'm good at finding errors and can even spot them in the newspaper. b. When I proofread others work I can usually only find the glaring errors. c. I wouldn't recognize a run-on sentence if it bit me in the nose I didn't even notice this one. 8) Which statement best describes your aptitude when it comes to aesthetic matters of art and design? a. I have a good sense of which colors, textures, lines and shapes work well together, and can tell you exactly why things do or don't work together. b. I have a pretty good sense of design but have difficulty explaining why things do or don't work together. c. I've never been too concerned with making things look nice. 9) How well do you perform in art courses? a. I receive high marks b. I receive average marks c. Art is not one of my better subjects 10) Which statement best characterizes your attitude toward order and consistency? a. My bedroom is meticulously maintained. Every item has a place and a purpose. b. Once in a while I clean up my room, but I'm not really bothered by clutter c. An orderly room is not something I value. 11) Which statement best characterizes you? a. I'm comfortable assisting others with their work even if they haven't requested my help. b. I'm comfortable assisting others only after they have requested my help. c. I'd rather not assist others with their work 12) When working in-groups I like to… a. I feel very comfortable speaking and like to take an active role. b. I'm reluctant to speak out but want to participate. c. I'd prefer someone tells me what to do and I'll do it. Whatcom County School-To-Work/Tech Prep Consortium 20

21. Web Design and Development 13) I would describe myself as… a. very organized and I rarely lose things. b. generally organized but tend to misplace things occasionally. c. disorganized and lose things frequently. 14) My experience with computer data systems is best characterized by the following statement: a. I can create directories and know the programs associated with common file extensions. b. I haven't any experience with computer data systems. Additional information that might be helpful to the instructor: Whatcom County School-To-Work/Tech Prep Consortium 21

22. Web Design and Development Handout: Grading Criteria for Web Design Required Daily Assignments: 20% of grade This is primarily made up of the tutorial work and daily assignments that we complete in class early in the semester. Bi-weekly Reports: 10% of grade Bi-weekly reports provide me with important feedback as to whether or not you are mastering the course content. There should be an entry for each day we meet. The entries should be written in concise but detailed language. The report is due every other Friday. Use email. You are responsible for setting aside time to write. Web Site Projects: 50% of grade The greatest factor affecting your grade will be the web sites you produce. We will collectively develop the evaluation tool used to evaluate the web sites you create; however, there is no easy formula for assigning credit, since some projects may involve very sophisticated features. I will rely on self evaluation, peer evaluation, and my own evaluation Group Participation: 20% of grade Attendance/tardiness Cooperation with classmates No off-task computer use Whatcom County School-To-Work/Tech Prep Consortium 22

23. Web Design and Development Handout: Biweekly Report Form Name: Biweekly Journal – Online The biweekly journal entry should be filled out at the end of each working class period. Fill in the blanks with a detailed report of your activity on each day. For full credit, you need to include specific skills and programs that you used that day, as well as specific projects. A short paragraph is usually sufficient for full credit. Please include absences (school-related/excused/unexcused). On the due dates below, print out and put the completed Journal report in your folder. Date Activities, projects, programs used, etc. Grade (Instructor will fill in) Comments (Instructor will fill in) Due dates of Bi-weekly reports: 1. Feb. 11th to March 1st 2. March 4th to March 15th 3. March 18th to March 29th 4. April 1st to April 19th 5. April 22nd to May 3rd 6. May 6th to May 17th 7. May 20th to May 31st Whatcom County School-To-Work/Tech Prep Consortium 23

24. Web Design and Development Assignment: Personal Web Page The purpose of this assignment is to create a personal website as we build our HTML coding skills in Unit 2 of Web Design and Development. Using the HTML skills that we learn in Unit 2 and the design ideas from our initial projects in Unit 1, you are to create a personal web page to your own specifications. You are free to express yourself as you wish so long as you do not violate district policy. You will be required to provide documentation illustrating each of the following steps in the design process: Purpose Statement-a brief word-processed document clearly defining your objectives (what you wish to accomplish) for creating the web page and the audience you intend to reach. (10pts) Project Plan-this should include a hardcopy of your site map (outline) and your storyboard (sketch). The site map will list the page names and content in outline form. The storyboard will illustrate the page layout and site organization, including links and image locations. (10pts) HTML Code-the page itself must meet the following requirements: (using notepad text editor) minimum of 4 pages with working internal links to and from home page  Include a color scheme with a background color or image  Include 2 tables one that includes external links, one that includes text and images.  Include images appropriate size for page  Thumbnail links to larger images if appropriate  Captions/descriptions if necessary  Include links to related sites  Meet your specified objectives  Utilize proper file organization  Use proper spelling and grammar (10pts ea.) Peer Evaluations-Evaluate 4 peer web pages. Include 4 evaluations received from your peers in your portfolio (using the class-designed rubric). Peer evaluations will be performed in class. (10pts) Redesign-Consider peer evaluation comments and feedback in redesigning your web page. This is your chance to work out all the quirks! You will turn in a portfolio containing the required documentation and present your web page to the instructor at the end of this unit. You must be able to show how each HTML Code requirement is met in order to receive credit for it, so make sure your page is working well before you present it! Whatcom County School-To-Work/Tech Prep Consortium 24

25. Web Design and Development Unit 1, Module 1: Basic Site Evaluation and Rubric Creation Overview: These two lessons give students a basic understanding of the principles behind effective web site design and implementation. Module 1 Lesson: Lesson 1: Surveying the Possibilities: Time for Lesson: 60 - 90 minutes  Description: o Before we start creating web pages of our own, we need to decide for ourselves what makes a "good" web site. This lesson opens up the discussion of design principles and how they relate to the relevant rhetorical strategies of purpose, audience and message, as well as technical issues and limitations.  Learner Outcomes: o At the end of this lesson, students will have a basic understanding of the elements and principles of "good" web site design and construction. They will begin to understand that this evaluative term changes in relation to audience, purpose and message.  Activity: o Look over the “Surveying the Possibilities” assignment sheet (following) and have students begin. As students finish the assignment, have them share what they have found. Prompt students to look at different aspects of web site evaluation if necessary.  Things to consider: o You may want to have a few sites stored on CD-ROM or a central file server in case the connection to the Internet is down. o This assignment may be done in small groups if computer access is limited. o It is important that the students come up with the criteria themselves for this initial lesson. Later, they can compare their criteria with other students as well as with industry standards.  Resources Needed: o Internet access.  Suggested Assessment: o Discussion following the assignment. o This assignment may be graded separately from the module. Whatcom County School-To-Work/Tech Prep Consortium 25

26. Web Design and Development Assignment: Surveying the Possibilities The purpose of this assignment is to begin considering what makes a quality web site. Examine the advice given at this site to start developing useful terminology for critiquing web sites. Learning space site : School HomePage Building Blocks Criteria used by others: Bill Hurd, Manager Encyclopedia Britannica Wall Data corporation 1. visual complexity 1. depth, accuracy, completeness, & utility 2. amount of information 2. quality & effectiveness of presentation 3. flow 3. credentials of the author 4. theme 4. elegance of design & ease of navigation 5. accessibility to other areas 5. frequency of revision 6. usage 6. quality of graphics or multi media 7. bandwidth issues 8. browser support 9. backend data publication  Visit as many high school web sites as possible (and a few commercial web sites) while keeping detailed notes about what you observe.  Rate each site from 1 to 5 (5 being the highest).  Comment on the site’s design. Does the site look good? What is the eye drawn to immediately?  Comment on the site’s content. What seems to be the main purpose of the site? Is the purpose clear?  Comment on the site’s noteworthy features. How do the features enhance the site’s main purpose? Whatcom County School-To-Work/Tech Prep Consortium 26

27. Web Design and Development Create a table for your notes which looks something like this: School/Co. URL Rating Design Content Features 1 2 3 4 5 6 +  Look at schools in our district, state and around the world. Focus mainly on high schools, but elementary school, middle school, and district pages may also be good models.  Record as many excellent examples as you are able to find (at least two) and two horrible examples.  Visit at least two commercial sites and record one good example and one bad example. List of Bellingham School http://www.bham.wednet.edu/schools.htm District schools Washington state registry of schools on the World Wide http://web66.coled.umn.edu/schools/US/Washington.html Web International registry of schools on the World Wide http://web66.coled.umn.edu/schools.html Web. Whatcom County School-To-Work/Tech Prep Consortium 27

28. Web Design and Development Module 1 Lesson: Lesson 2: Developing a Web Site Evaluation Tool -- Part I: Time for Lesson: 60 - 90 minutes  Description: o We have had a discussion about principles of "good" web design, and made some basic decisions concerning what we feel makes a web site effective. Using this information, students will now construct a web site evaluation rubric and defend it in a short presentation to the class.  Learner Outcomes: o At the end of this lesson, students will have constructed a preliminary web site evaluation tool, and presented it to the class.  Activity: o Give the students an overview of the assignment and a timeline for completion of the presentation. This project is best done in small groups, possibly formed from the previous lesson.  Handout/Resources Needed: o Presentation software (PowerPoint).  Suggested Assessment: o Assess presentations and resulting discussion. Whatcom County School-To-Work/Tech Prep Consortium 28

29. Web Design and Development Exercise: Developing a Web Site Evaluation Tool The purpose of this assignment is to challenge, test and ultimately come to general agreement on evaluation criteria for web sites. This exercise is student-driven, although the teacher may need to jump in and help if the need arises. The Final Product:  Will be a PowerPoint presentation between 8 to 11 slides.  Will have one introductory slide with credits for tasks performed by each member of the group.  Will have one slide that displays the evaluation rubric in table form, including 4-7 main traits.  Will have a numeric scale to assess level of mastery, and descriptors that define major point values on the numeric scale.  Will have a rational that explains the importance of each trait (4-7 slides).  Will have a completely scored evaluation rubric of the web site www.cheese.com/.  Will have a slide detailing traits in which there was agreement and traits in which there was disagreement explaining why. Process:  Pair up and take five minutes to share and discuss the merits and problems of two sites each from lesson one's activity. One site should be a clear example of good design and one an example of poor design. Discuss specific traits that could be used to evaluate sites.  On a piece of notebook paper, write down the URL's for the four sites (two for each person) with positive and negative traits and turn it in to the instructor.  Join another pair and now in a group of four, review your lists of traits that were generated in step one. Synthesize the list to no fewer than four but no more than seven general traits that could be used to evaluate almost any web site. As much as possible, make each trait discrete and clear. Combine similar traits. Eliminate redundant, obtuse, or invalid traits.  Once you reach consensus on the traits, decide on a numeric scale for judging how well a web site fares for each of the traits.  Brainstorm a list of descriptors that define major point values on the numeric scale. If you get stuck, here is a list of descriptors that may help (following).  Now that you have all the components for the evaluation rubric, sketch the complete evaluation rubric with a marker on butcher paper, or using a table in Word or similar program on the computer.  Each person in your group will now individually use this evaluation rubric to evaluate the following site: www.cheese.com. It is important that you evaluate the site without collaboration or discussion  After all members have had enough time to evaluate, compare how your group members scored www.cheese.com with each major trait.  If someone in the group rated a trait radically different from the rest, ask them to explain.  Develop and present your PowerPoint presentation following the guidelines above. Present your powerpoint to the class. Whatcom County School-To-Work/Tech Prep Consortium 29

30. Web Design and Development Handout: Sample Descriptors for Web Evaluation Some Possible Comments for Explanation of Score: Point to specific details of site in your explanation. Navigation: Specific links missing or not working properly Links difficult to find on page or inconsistent Navigation bar consistent and easy to use Graphics/Design: No pleasing graphical elements Inconsistent color or design within site "Square" internet graphics Color scheme repeated and consistent within site Effective use of animation Access/Speed: Graphics not streamlined for low bandwidth access Formatted for IE or Netscape only No options for low bandwidth access Options for low bandwidth or high bandwidth access Streamlined for access with low bandwidth access Currency: Information obviously out of date (be specific) Some outdated links or information but not so that it detracts from the site Nothing out of date/ structured so that currency isn't an issue (N/A is okay for Not "Applicable") Relevant Content: Pointless unorganized information Connection between content and purpose of site not clear. Have to leave site for some relevant information Content clearly connected with purpose of site. Whatcom County School-To-Work/Tech Prep Consortium 30

31. Web Design and Development Module 1 Lesson: Lesson 3: Developing a Web Site Evaluation Tool -- part II: Time for Lesson: 60 - 90 minutes  Description: o Now that the class has carefully examined possible student generated rubrics, it's time to create and test a rubric that may be used to evaluate all student web sites for the remainder of the course. It is best if this is a student-generated document using the traits and descriptors that they presented in lesson two, but the final decision may need guidance to avoid redundant traits, or big holes in evaluation categories.  Learner Outcomes: o Students will have critically examined and evaluated self-designed rubrics and created a web page evaluation tool. They will have reinforced design principles necessary for creating effective web pages later in the course.  Activity: o On the white board, projection system or overhead, create a table and have the class hammer out the details of traits and descriptors to be used in this class web site evaluation tool.  Handout/Resources Needed: o Internet access.  Suggested Assessment: o Have the students end the lesson by testing the rubric against a series of previously chosen sites, and evaluating the rubric for any necessary revision. Whatcom County School-To-Work/Tech Prep Consortium 31

32. Web Design and Development Unit 1, Module 2: Color Theory and Web Design Usability Overview: These two lessons teach and reinforce basic color and design principles in order to help students build effective web sites. *Teachers Note: The final product in both lessons in this module is an addition to the "Personal Web Page." This is usually begun in unit 2 and done concurrently with the design principles of Unit 1. But if you have not begun coding the personal pages yet, you can easily change the final product to be sketches (in Lesson 1) or a word processed document (Lesson 2). Module 2 Lesson: Lesson 1: Color Theory in Web Design: Time for Lesson: 60 - 90 minutes  Description: o Students are now ready to explore the use of color theory in web design. This lesson should be done following the "Personal Web Page" created in Unit Two.  Learner Outcome: o At the end of this lesson, students will recognize terminology, principles and elements of the effective use of color in web page design. Students will also create examples of using specific color schemes in web page layout.  Activity: o Begin by having students open the link to the Lesson 2-1 assignment page in unit 1 (following). o They will then view the online slide presentation on Color Theory in Web Design (Lesson 2-1a (on disk)). o Individually, using markers and other color art supplies, students will design full color rough sketches on paper of two web sites, modeling them after the example sites and basing them on two of the following four color schemes: • Monogamous • Complimentary • Triadic • Analogous o Using what they know of HTML coding for background colors, text colors and images, they will create two pages following the color scheme sketches as closely as possible. The pages should be labeled with the color scheme you were using, but otherwise, the subject matter is up to you. Link these pages to the personal page you began in Unit 2. (This may involve basic Photoshop use for those that have been introduced to the program. Searching the web for images can be time consuming, therefore, you may want to save a number of monochromatic images in a folder for them to use for this assignment).  Resources Needed: Whatcom County School-To-Work/Tech Prep Consortium 32

33. Web Design and Development o Internet access. o Images for page creation. o Color markers and paper for color theory page storyboards.  Suggested Assessment: o Discussion following the assignment. o This assignment may be assessed separately from the module as one aspect of the personal page, or the storyboard sketches may be evaluated separately. Whatcom County School-To-Work/Tech Prep Consortium 33

34. Web Design and Development Assignment: Color Theory in Web Design Overview: The purpose of this assignment is to gain a general understanding of the concepts of color use in effective web design. Activities: View the online slide presentation on Color Theory in Web Design. Using markers and other color art supplies, design full color rough sketches on paper of two web sites, modeling them after the example sites and basing them on two of the following four color schemes:  Monogamous  Complimentary  Triadic  Analogous When finished sketching the two page designs, have them checked by the instructor. Now, using what you know of HTML coding for background colors, text colors and images, create two pages following your design schemes as closely as possible. The pages should be labeled with the color scheme you were using, but otherwise, the subject matter is up to you. Link these pages to the personal page you began in Unit 2. Resources/Online documents: Experiment with color combinations at this interactive web site: Mundi Design Studios Color Theory at About.com. Explore the web site Color, Contrast & Dimension in News Design ...although this site focuses on print news media, it is very useful to help understand the effects and uses of color theory in design. All done? Show your instructor your completed pages attached as links to your personal page. Visuals: Color Theory Slide Show (on disk) Whatcom County School-To-Work/Tech Prep Consortium 34

35. Web Design and Development Module 2 Lesson: Lesson 2: Basic Design Concepts in Building Effective Web Pages: Length of Lesson: 60 - 90 minutes.  Description: o This lesson helps students understand some of the particular aspects of page layout design that help to make a web page effective. The activities in this lesson reinforce the aspects of "good" web page design that were explored in module one, while focusing on the specific skills and tricks that help a page achieve effectiveness in the areas of the rubric exercise.  Learner Outcomes: o Students will recognize basic elements of effective page layout design (reinforcing and building on the activities in Lesson 1-1-3). They will find examples of effective (and ineffective) page layout.  Activities: o Have students open the link to the Lesson 2-2 assignment page in unit 1 (following). In this lesson, they will browse a list of CNET's web design tips, paying special attention to design, layout and navigation tips, including the following: • Above the fold design • Multiple navigation options • Narrow column type • Avoid scrolling text • Locate logos consistently o Students will choose three tips for effective page design from this site that they understand and agree with and return to the school sites that we explored in lesson one. Find at least three sites that either effectively follow one or more of your three tips, or sites that run afoul of the principles you chose. Try to cover all three design tips. Students then create a simple text-based web page describing the three sites they found and include the following: • Student name and a title. • The name and a short description of each of the three design tips. • For each site: the name (linked to the site) and a one- paragraph description of how this site either effectively follows one of your design tips, or is ineffective because it does not follow the tip. • Students should try to follow as many of the design tips as possible when designing their own pages. • Finally, they will link this to the main page of your personal site begun in Unit 2. *Teachers Note: You may teach this lesson without the web page construction component by simply having them create a word processing document with the same information. Whatcom County School-To-Work/Tech Prep Consortium 35

36. Web Design and Development o If students have extra time, they may take a look at these other site design resources for more examples of good and poor design: • Thoughts on Web Design • Sites That Bite • CoolHomePages.com *Teachers Note: CoolHomePages is an excellent example site, but it changes examples periodically. You may want to preview the current lineup before sending your students to it for examples.  Handout/Resources Needed: o Internet connection o Text resources on web design (ex: Great Web Architecture)  Suggested Assessment: o Students may share their findings in small groups and come together for full class discussion on their findings. The instructor may evaluate the web page product separately or as a component of the personal page. If done on paper, the instructor may collect it and assess separately. Whatcom County School-To-Work/Tech Prep Consortium 36

37. Web Design and Development Assignment: Page Design Elements Overview: This lesson will help you better understand some of the basic elements of effective page layout design principles. Activities: Browse this list of CNET’s web design tips at http://builder.cnet.com/webbuilding/pages/Graphics/CTips/ss06.html. Scroll down to part two and pay special attention to design, layout and navigation tips, including the following:  Above the fold design  Multiple navigation options  Narrow column type  Avoid scrolling text  Locate logos consistently Choose three tips for effective page design from this site that you agree with and return to the school sites that we explored in lesson one. Find at least three sites that either effectively follow one or more of your three tips, or sites that run afoul of the principles you chose. Try to cover all three design tips. List of Bellingham School District schools http://www.bham.wednet.edu/schools.htm Washington state registry of schools on the World Wide Web http://web66.coled.umn.edu/schools/US/Washington.html International registry of schools on the World Wide Web. http://web66.coled.umn.edu/schools.html Create a simple text-based web page describing the three sites you found and include the following:  Your name and a title.  The name and a short description of each of the three design tips. For each site: the name (linked to the site) and a one-paragraph description of how this site either effectively follows one of your design tips, or is ineffective because it does not follow the tip. In your page design, try to follow as many of your own design tips as you can. Finally, link this to the main page of your personal site begun in Unit 2. Resources/Online documents: Feel free to use the textbook library for this exercise. If you have time, take a look at these other site design resources for more examples of good and poor design:  Thoughts on Web Design  Sites That Bite  CoolHomePages.com Whatcom County School-To-Work/Tech Prep Consortium 37

38. Web Design and Development All done? Show your instructor your completed page connected as a link off of your personal page. Unit 1, Module 3: Initial Storyboarding and Site Mapping Overview: The purpose of this module is to practice the planning aspects needed to create a quality web site. Students have visited and critiqued web sites and studied the basics of color theory and design basics. Now we will use this knowledge to create a mock site plan and series of storyboards as if we were creating a web site for a client. Module 3 Lesson: Lesson 1: Storyboards and Site Maps: Time for Lesson: 60 - 90 minutes  Description: o None.  Learner Outcomes: o At the end of this lesson, students will have a basic understanding of the elements and principles of "good" web site design and construction. They will begin to understand that this evaluative term changes in relation to audience, purpose and message.  Activities: o Students team up in groups of 2 or 3 and are asked to design a simple web site for Premier Coffee Mugs, a small shop specializing in selling handmade coffee mugs, whose owner has decided to take an initial (small) step towards selling her mugs on the Internet. Your client would like a static information-based web site (no online ordering for now) and would like the site to be made up of one main page and 3-5 subsidiary pages. o The teams begin by developing and printing out a one page initial mock interview consisting of 5 - 8 questions ( because our client is hypothetical for this assignment, include the interview answers as well...remember that this client does not know a lot about the internet). These questions should help determine purpose, audience, scope, as well as artistic style issues. Here is a sample students may use as a model (following). The next step for the team is to create a short written purpose statement and site map. Next teams create storyboards for the pages using color and text. o Finally, they fill out a hypothetical list of team duties that would need to be done (collecting images, creating text content, coding the pages, etc.). Students then share their project plans with another team and compare strategies and approaches. You may move to full class discussion following this step. Teams are to turn in a completed packet to the instructor including: • interview questions and answers • purpose statement (paragraph describing the task and your general approach) Whatcom County School-To-Work/Tech Prep Consortium 38

39. Web Design and Development • one page site map • multipage storyboard w/visual layout and heading text • team duty list  Resources Needed: o Internet access  Suggested Assessment: o Discussion following the team work. o Grade packet of planning paperwork turned in to team. Whatcom County School-To-Work/Tech Prep Consortium 39

40. Web Design and Development Initial Planning Interview Questions: Suggested questions to plan for your initial interview 1. What is the mission or purpose of your company 2. What are your short and long-term goals for your website? 3. Who are the intended audiences for your website? 4. Why will people come to your site the very first time? What will make them want to come back? 5. What content will make up your website? Qualify each item listed (Why should it be included?) 6. What functional requirements are needed on the site? (ex. Forms, transactions, searches) 7. What are the updating needs for the site? Who will do the updating? Whatcom County School-To-Work/Tech Prep Consortium 40

41. Web Design and Development Assignments: Storyboards and Site Maps Overview: The purpose of this assignment is to practice the planning aspects needed to create a quality web site. You have visited and critiqued web sites and studied the basics of color theory and usability. Now we will use this knowledge to create a mock site plan and series of storyboards as if we were creating a web site for a client. Activities: Your team of 2 or 3 students has been asked to design a simple web site for Premier Coffee Mugs, a small shop specializing in selling handmade coffee mugs, whose owner has decided to take an initial (small) step towards selling her mugs on the Internet. Your client would like a static information-based web site (no online ordering for now) and would like the site to be made up of one main page and 3-5 subsidiary pages. Use your imagination and creativity as well as your sense of appealing to the right audience for the client's main purpose. 1. Your team should begin by developing and printing out a one-page initial mock interview consisting of 5 - 8 questions ( because our client is hypothetical for this assignment, include the interview answers as well...remember that this client does not know a lot about the Internet). These questions should help determine purpose, audience, scope, as well as artistic style issues. Here is a sample you may use as a model. 2. The next step for your team is create a short written purpose statement clarifying what your team's task and approach will be. Then decide on a site structure and map out the relationship between pages on a single sheet of paper. This is typically called a site map. It should include written descriptors of features on each page as well as clear descriptions of the relationships between pages. What will the hierarchy of the pages be? Will they follow a linear path, moving from the home page to the last page, or will there be a home page with four pages all at the next level? Do not worry about visual design characteristics at this point. Those come with the storyboarding step, coming up next. 3. Next, create visual storyboards for the pages using color and text. It is not necessary to spend too much time being neat at this point, but the design elements need to be clear and the heading text should be worked out. Content text (descriptions, etc.) may be saved for the site itself. The storyboards usually can be done with paper and pen away from the computer, but may be done using a graphics program on the computer. Avoid the use of "canned" planning programs and PowerPoint templates, as they tend to be too limiting. 4. Fill out a hypothetical list of team duties that would need to be done (collecting images, creating text content, coding the pages, etc.). Then share your project plans with another team and compare strategies and approaches. 5. Turn in a completed packet to the instructor, including:  interview questions and answers and purpose statement (paragraph describing the task and your general approach).  one-page site map multipage storyboard with visual layout and heading, and text team duty list. Whatcom County School-To-Work/Tech Prep Consortium 41

42. Web Design and Development Unit 2: HTML Basics Overview: This unit gives the students the basics in HTML code. Most of this unit can be done in Notepad or a similar text editor. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: B3: Produce graphics and layout elements  Technical Knowledge: Knowledge of various graphical applications and sources of graphic images. Knowledge of principles of layout and graphics.  Employability Skills: Ability to mentally picture outcomes. Ability to judge effectiveness of graphics, animation, audio and video content B5: Write supporting code Knowledge of code development procedures. Knowledge of programming language required for application. Ability to write clear documents. Ability to manipulate technology for desired results. B7: Perform unit and integration testing Knowledge of unit testing procedures. Knowledge of error analysis and resolution process. Ability to use logic to draw conclusions. Ability to analyze possible causes/reasons. Ability to identify and correct and troubleshoot malfunctions/failures.  Employability Skills: Ability to apply rules and principles to process/procedure and use logic to draw conclusions. Learner Outcomes The student will be able to:  Analyze web pages for audience, purpose, message.  Create a rubric to evaluate the effectiveness of web sites.  Design a simple site using storyboarding and site mapping techniques.  Understand basic color theory and optimal design theory for usability.  Incorporate color theory and optimal design theory in a model web site. Whatcom County School-To-Work/Tech Prep Consortium 42

43. Web Design and Development EALRs  Reading o The student understands and uses different skills and strategies. o The student understand the meaning of what is read.  Writing o The student writes clearly and effectively. o The student writes in a variety of forms for different audiences and purposes.  Communication o The student communicates ideas clearly and effectively. Module Titles: Note: As students work through the modules and lessons in unit 1& 2, have them apply each lesson to a personal web site. This site will be assessed with the personal web site grading rubric:  Module 1: Basic tags  Module 2: Text formatting tags  Module 3: Image tags  Module 4: Link tags  Module 5: List tags  Module 6: Table tags  Module 7: Source (cut & paste) Whatcom County School-To-Work/Tech Prep Consortium 43

44. Web Design and Development Unit 2, Module 1: Basic Tags Overview These three lessons give students the basic elements that make up HTML tags, their structure, and how they are used. Module 1 Lesson: Lesson 1: Elements of Tags (attributes, values, etc.): Time for Lesson: 30 minutes  Description: o HTML is the universal mark-up language code, consisting of symbols inserted before and after text as well as before and after the filenames of graphics to be downloaded. This code allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. These symbols are called tags and are integrated into a text document.  Learner Outcome: o At the end of this lesson, you will have a basic understanding of the elements of a tag and their ordering.  Activity: o Have students do Elements of Tags (attributes, values, etc.) assignment (following). Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout) o HomeSite or NotePad o Reference Books in classroom. Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 44

45. Web Design and Development Assignment: Elements of Tags Overview: HTML is the universal mark-up language code, consisting of symbols inserted before and after text as well as before and after the filenames of graphics to be downloaded. This allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. These symbols are called tags, and are integrated into a text document. Learner Outcomes:  At the end of this lesson, you will have a basic understanding of the elements of a tag and their ordering. Activities:  Look over the Common HTML Tags sheet (Unit 2, Module 3 handout) and go over the common elements.  Things to consider: o Opening and closing tags (usually, tags travel in pairs: note the difference between the two) o Attributes: Many tags have attributes that offer a variety of options for the contained text. The attribute is entered between the command word and the final greater than symbol with spaces (see example below)  Location of tags/Nesting Tags o In some cases, you may want to modify your page contents with more than one tag. The order is very important. Whenever you use a closing tag, it should have the same relationship to the last unclosed opening tag. (see example below) <A> </A>  Values: Attributes often have values (the following are examples of values for attributes o Align = Left, Center, Right (where left, center, & right are the value for align) o Text=#color code (where the color code becomes the value) o Size = number  Open Homesite o Note the common tags o Go to the body tag and just after the y in body press the spacebar o What appeared? Handouts/Online documents:  COMMON HTML TAGS (Unit 2, Module 3 handout) Whatcom County School-To-Work/Tech Prep Consortium 45

46. Web Design and Development Module 1 Lesson: Lesson 2: Essential Tags: Time for Lesson: 40 minutes  Description: o There are some basic tags you must add to every HTML document you create. In this lesson, we will cover the essential tags found in all HTML documents.  Learner Outcome: o Students will learn the basic tags required for all HTML documents.  Activity o Have students go to Lesson 2 and do the assignment (following).  Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students’ monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 46

47. Web Design and Development Assignment: Essential Tags Overview: There are some basic tags you must add to every HTML document you create. Learner Outcomes: Students will learn the basic tags required for all HTML documents. Activities:  Example of basic HTML document structure: o Type the following in your text editor <html> <head> <title>Title of your Web page</title> </head> <body> </body> </html> You may find it easier to read if you add extra blank lines as you see in the example above. Note: Extra spaces and blank lines will be ignored when the HTML is interpreted.  Let's examine each of these tags: o <html> is typed before all the text in the document. This is the language used to create Web pages. o </html> this tag is used at the end of all the text in the document. o <head> the head provides information about the document including the title. o </head> closes the head tag and comes after the title. o <title>You must give your document a title. The title appears in the title bar of the window. o </title> closes the title tag. o <body>The body contains the contents of your document. o </body> closes the body tag. o </html> ends the document. Create a page and experiment with the tags. Whatcom County School-To-Work/Tech Prep Consortium 47

48. Web Design and Development Module 1 Lesson: Lesson 3: Comment Tags: Time for Lesson: 12 minutes  Description: o Comments are a diagnostic tool available to HTML authors. Comments remind the author or future editors why a specific tag was used. The comments appear only in the HTML document when opened with a text or HTML editor. They will be completely invisible when readers visit your site.  Learner Outcome: o To learn the importance of adding comments and use them while writing code.  Activity: o Go to the assignment on comment codes (following).  Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 48

49. Web Design and Development Assignment: Comment Tags Overview: Comments are a diagnostic tool available to HTML authors. Comments remind the author or future editors why a specific tag was used. The comments appear only in the HTML document when opened with a text or HTML editor. They will be completely invisible when readers visit your site. Learner Outcomes: To learn the importance of comments and use them while writing code. Activities: In the previous lesson, you created a basic Web page. Open that Web page and add a comment code that reminds you to add an image one week from today. Place the comment at the end of the text near the bottom of the body tag.  Type  to complete the comment.  The following is an example of a comment:   Save all work. Whatcom County School-To-Work/Tech Prep Consortium 49

50. Web Design and Development Unit 2, Module 2: Text Formatting Tags Overview: These three lessons teach students how to change the appearance of text on Web pages. The lessons cover changing text (size, style, color, etc.), and comparing text to a text image, along with text alignment. Module 2 Lesson: Lesson 1: Changing Text (size, style, font color, etc): Time for Lesson: 45 minutes  Description: o In the first lesson, students learn various attributes that will change the appearance of the text from bold or italics to size, style and font color.  Learner Outcome: o Students will learn about attributes that will change the appearance of the text from bold or italics to size, style and font color.  Activity: o Changing Text (following)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout) o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 50

51. Web Design and Development Handout: Changing Text Overview: In this lesson, students will learn various attributes that will change the appearance of the text from bold and italics to size, style and font color. Learner Outcomes: At the end of this lesson, you will have a basic understanding of different text styles and their applications. Activities:  Bold or Italicize Text Opening and closing tags usually tags travel in pairs (note the difference between the two). It is important to understand that making text changes should serve a purpose, i.e. emphasize a certain aspect of the page. o To create Bold Text type followed by the text you want to make bold. End with the closing tag o To create Italic Text type followed by the text you want to make italic. End with the closing tag  Changing Font In some cases, you may want to change the font face. To do so, use the following tags and attributes. (see example below) o Type  Text Color You can change the color of text on all or part of your Web page. There are names and color codes for Web-safe colors commonly used. Color codes are often referred to as a hexadecimal value with six digit combinations of both letters and numbers. To create a color text, you can specify it as an attribute inside the body tag (see example below). o Type<body text="ff00cc"> the text is an attribute inside the body tag that will give a color to all the text on the page. o Type<font="ff00cc"> this will give a color to all the text within the font tags. When finished end with the following tag  Changing Font Size When you need to change the size of text, there are basically two ways to do it. You can create an exact font size or you can change it relative to the surrounding text. To create the specific size of one or more characters: o Type where n is a number from 1-7. At the end of the text you want to change close with the following tag . To change the size of text in relation to surrounding text: o Type where +n or -n is a number specifying how much bigger or smaller you want the text compared to the surrounding text. . Whatcom County School-To-Work/Tech Prep Consortium 51

Click here for the document download.Web

Du liest eine Vorschau.

Hier ansehen

Click here for the document download.Web

Weitere Verwandte Inhalte

Diashows für Sie (16)

Ähnlich wie Click here for the document download.Web (20)

Weitere von butest (20)