Click here for the document download.Web

Information TechnologyIndustry Skill Standards

High School Curriculumfor

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).

http://www.bham.wednet.edu/

Web Design and DevelopmentWeb Design and Development

Document Information

For more information, or to order curriculum materials, please contact:

Linda Cowan, Consortium DirectorWhatcom County School-to-Work/

Tech Prep Consortium

Office Location:Bellingham Technical College

3028 Lindbergh Ave.Bellingham, WA 98225

Phone: (360) 738-3105, x-409Fax: (360) 676-2798

Email: [email protected]

Laurie Stephan, Curriculum Program CoordinatorNorthwest Workforce Center for Emerging

Technologies (NWCET)

Office Location:Bellevue Community College

3000 Landerholm Circle, SE, N258Bellevue, WA 98007-6484

Phone: (425) 564-4215Fax: (425) 564-6193

Email: [email protected]: www.nwcet.org

Permission to Photocopy and QuoteCopyright © 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.

DisclaimerThe 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 CreditsLinda Cowan Project Coordination & Grant FundingLaurie Stephan Curriculum Facilitator (NWCET)Susan Parker Technical Assistance (Bellingham Technical College)Scott Wilmot Cover Design (Wilmot Graphics)

http://www.nwcet.org/

mailto:[email protected]



Acknowledgements

The following Whatcom County teachers designed and developed three Information Technology program curriculum guides:

Web Design & Development Curriculum TeamDon Helling, Sehome High School - Bellingham School District

teaches English and web design coursesJoe McAuliffe, Squalicum High School - Bellingham School District

teaches English, SAIL program and web design coursesKarll Rusch, Bellingham High School - Bellingham School District

teaches Tech Connections, technology education & web design courses

PC Hardware Fundamentals Curriculum TeamSteve Andres, Ferndale High School - Ferndale School District

teaches web design, video production & computer hardware coursesBruce Woodcock, Lynden High School - Lynden School District

teaches math and computer hardware coursesLee Falta, Bellingham Technical College

teaches computer networking technology coursesGreg Rehm, Bellingham Technical College

teaches computer networking technology courses

Video Production Curriculum TeamChris Carlson, Squalicum High School - Bellingham School District

teaches video production and technology education coursesJim 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, PresidentDealer Information Systems Bob Brim, CEORivetek Robin Halliday, CEOThink-a-Tron Media Labs John Mortensen, PresidentMindfly Gary Pickering, PresidentFiberCloud Milissa Miller, ManagerPort of Bellingham John Molder, IT Manager

Tim Cool, LAN/WAN SpecialistKVOS TV/Studio 12 Roger Vater, Technical DirectorAttachmate Corporation Kevin Boxx, IT ManagerVisionQuake/Baron and Company Gerald Baron, CEO

Jim Hassi, President - VisionQuakeConocoPhillips Ferndale Refinery Vicki Whittlesey, IT Manager

James Carrell, Technical SupervisorSPIE Brian Thomas, Technology Development ManagerHaggen, Inc. Ron Burke, IT ManagerAlpha Technologies Jim Dettman, IT ManagerSolera Group Lori Aswegan, Director of Business Development


Videosmith Productions Lars Kongshaug, PresidentInterConnect Systems Curtis Dye, PresidentCity of Bellingham/IT Services Department James Baird, Telecommunications AdministratorDigiPen 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 EducationKyra Kester, Assistant to Superintendent for Industry PartnershipsCindy Agnew, Pathway Supervisor - Information Technology Education

Northwest Workforce Center for Emerging Technologies (NWCET)Peter Saflund, Associate DirectorLaurie Stephan, Curriculum Program Coordinator


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 DesignDigital Media: Video ProductionTechnical 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.

Table of Contents

Curriculum Introduction.................................................................................................................7

Introduction to Web Design and Development.............................................................................10

Unit 1: Design and Planning Basics............................................................................................12

Unit 1, Module 1A: Day One - Introduction..............................................................................14

Unit 1, Module 1: Basic Site Evaluation and Rubric Creation...................................................22

Unit 1, Module 2: Color Theory and Web Design Usability......................................................29

Unit 1, Module 3: Initial Storyboarding and Site Mapping........................................................35

Unit 2: HTML Basics....................................................................................................................39

Unit 2, Module 1: Basic Tags.....................................................................................................41

Unit 2, Module 2: Text Formatting Tags....................................................................................47

Unit 2, Module 3: Image Tags....................................................................................................53

Unit 2, Module 4: Link Tags......................................................................................................68

Unit 2, Module 5: List Tags........................................................................................................76

Unit 2, Module 6: Table Tags.....................................................................................................82

Unit 2, Module 7: Source (Cut & Paste).....................................................................................91

Unit 3: Preparing Images.............................................................................................................93

Unit 3, Module 1: Photoshop Tutorials......................................................................................95

Unit 3, Module 2: Applying Photoshop......................................................................................99

Unit 4: Intermediate HTML or Controlling Page Layout with Tables.....................................105

Unit 4, Module 1: Controlling Alignment within the Cell Tag................................................107

Unit 4, Module 2: Spanning and Nesting Tables......................................................................109

Unit 4, Module 3: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout.................................................................................................................................118

Unit 5: Dreamweaver Introduction/Mock Web Site..................................................................123

Unit 5, Module 1: Dreamweaver Tutorials...............................................................................126

Unit 5, Module 2: Applying Dreamweaver..............................................................................129

Unit 6: Culminating Project(s)...................................................................................................140

Unit 6, Module 1: Culminating Project....................................................................................142

Appendix.......................................................................................................................................145

Syllabus: Web Design & Development 1 & 2.............................................................................146

Career Pathway.........................................................................................................................148

Web Design 2: Advanced Design and Development: Preliminary Tutorials...........................149


Curriculum IntroductionWeb 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

Whatcom County School-To-Work/Tech Prep ConsortiumWhatcom County School-To-Work/Tech Prep Consortium 77


some were companies with a web presence (the Port of Bellingham, for instance). These visits 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:[email protected] Sehome High [email protected] Bellingham High [email protected] 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 HellingJoe McAuliffeKarll Rusch

Linda Cowan, DirectorWhatcom County Tech Prep Consortium3028 Lindbergh Ave.Bellingham, WA 98225







[email protected]

SAMPLE JOB TITLES

Web Administrator

Web Architect

Web Designer

Web Page Developer

Web Producer

Web Site Developer

Web Specialist

Webmaster


You will play a vital role in your company’s presence on the world wide web. You may use web page development software to create or change web pages, inserting text content, graphics and interactive modules that are often supplied by others in your organizational team. Before you start, you will probably talk to the many stakeholders in your company who depend on the organization’s web presence. You’ll also look at successful models and research software tools to help design the look, feel and navigation. In some organizations you may be responsible for making sure the web pages and updates get installed and work with the hardware associated with the web pages.

Web Develop

mentand



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-4Creating Web Pages with HTML Simplified 2nd Edition, ISBN# 0-7645-6067-0Teach 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-6Designing Web Graphics.3, Lynda Weinman, ISBN# 1-56205-949-1Master 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


http://hotwired.lycos.com/webmonkey/index.html

http://www.webmasterbase.com/article/811/19

http://webdesign.about.com/cs/designtips/

http://webdesign.about.com/mbody.htm

http://www.colormatters.com/

http://www.pageresource.com/

http://www.coolhomepages.com/

http://www.wpdfd.com/

http://info.med.yale.edu/caim/manual/

http://www.webmasterbase.com/

http://builder.com.com/


experimenting with "virtual tour" photo software, as well as Illustrator, and the 3D modeling software Rhino as they apply to 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



Unit 6: Capstone Projects



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.



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



Module 3: Initial Storyboarding and Site Mapping



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 courseb) Potential job paths (web master, web designer, web developer, etc.) c) Rules and consequencesd) Grading criteria (sample), as well as incremental checks on capstone

projectse) Syllabusf) 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.



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.



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 timec. I have created pages as a school projectd. 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.



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. highb. averagec. 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 marksb. I receive average marksc. 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 clutterc. 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.



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:



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 gradeThe 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 gradeAttendance/tardinessCooperation with classmatesNo off-task computer use



Handout: Biweekly Report Form

Name:

Biweekly Journal – OnlineThe 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 15th3. 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



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!



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.



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, ManagerWall Data corporation

Encyclopedia Britannica

1. visual complexity 1. depth, accuracy, completeness, & utility

2. amount of information 2. quality & effectiveness of presentation3. flow 3. credentials of the author4. theme 4. elegance of design & ease of navigation5. accessibility to other areas 5. frequency of revision6. usage 6. quality of graphics or multi media7. 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?


http://www.learningspace.org/content/


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 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






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.



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.


http://www.cheese.com/

http://www.cheese.com/


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 properlyLinks difficult to find on page or inconsistentNavigation bar consistent and easy to use

Graphics/Design:No pleasing graphical elementsInconsistent color or design within site"Square" internet graphicsColor scheme repeated and consistent within siteEffective use of animation

Access/Speed:Graphics not streamlined for low bandwidth accessFormatted for IE or Netscape onlyNo options for low bandwidth accessOptions for low bandwidth or high bandwidth accessStreamlined 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 siteNothing out of date/ structured so that currency isn't an issue (N/A is okay for Not "Applicable")

Relevant Content:Pointless unorganized informationConnection between content and purpose of site not clear.Have to leave site for some relevant informationContent clearly connected with purpose of site.



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.



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: 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.



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)


http://poynter.org/special/colorproject/index.html

http://www.mundidesign.com/webct/webct.html


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.

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:


http://builder.cnet.com/webbuilding/pages/Graphics/CTips/ss06.html


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)


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.



http://www.webmasterbase.com/article/160

http://www.lawguru.com/ilawlib/design/design.htm


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 schoolshttp://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




http://www.lawguru.com/ilawlib/design/design.htm







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) 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.



Initial Planning Interview Questions: Suggested questions to plan for your initial interview

1. What is the mission or purpose of your company2. 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?



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.



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.


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 codeKnowledge 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 testingKnowledge 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 OutcomesThe 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 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)



Unit 2, Module 1:Basic Tags

OverviewThese 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.



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> <B> </B> </A>

Values: Attributes often have values (the following are examples of values for attributeso 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 tagso 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)



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.

Activityo 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.



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.



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).


Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric.



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.



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




Handout: Changing TextOverview: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 <B> followed by the text you want to make bold. End with the closing tag </B>

o To create Italic Text type <I> followed by the text you want to make italic. End with the closing tag </I>

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<font face="type the name of the font you want to use here">

</Font>

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 </font>

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 <Font Size="n">where n is a number from 1-7. At the end of the

text you want to change close with the following tag </font>.

To change the size of text in relation to surrounding text: o Type <Font Size="+n or -n"> where +n or -n is a number specifying how

much bigger or smaller you want the text compared to the surrounding text. </font>.



Handouts/Online documents COMMON HTML TAGS (Unit 2, Module 3 handout)

Module 2 Lesson:Lesson 2: Text vs. Text Images: Time for Lesson: 20 minutes

Description: o This lesson explores various image texts, how they are created and the

advantages and disadvantages of using them over text.

Learner Outcome: o Students will learn about how image texts are created and used but not how to

create them at this time.

Activity: o Text vs. Text Image (following).

Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom o Internet sites

Suggested Assessment: o Grading assessment will come later, in project assignment rubric.



Assignment: Text vs. Text Image

Overview:This lesson explores text images, how they are created and the advantages and disadvantages of using them over text. Learner Outcomes: At the end of this lesson, you will have a basic understanding of text images, how it is created and its effects on a Web page. Activities:Find several Web sites with a heading you like. Review the source code and see if it is an image. Compare the sites and their codes; look for common attributes within the image text.

Things to consider: Size Location Consistency within design

Discussion: Why you would select image text over text.

Example:Banners



Module 2 Lesson:Lesson 3: Alignment: Time for Lesson: 15 minutes

Description: o Students will learn how to align text, create paragraph breaks, line breaks, and

non-breaking spaces.

Learner Outcome: o To be able to manipulate text to create desired Web page effects.

Activity:o Aligning Text (following).





Handout: Aligning Text

Overview:Aligning text helps in the organization of the Web page. Use the following tags and attributes to align text, create paragraph breaks, line breaks, and non-breaking spaces.

Learner Outcomes:At the end of this lesson, students will have a basic understanding of organizing the Web page and the effects on its appearance.

Activities: Paragraph breaks:

o HTML does not recognize the returns that you enter when typing, so you must specify where you want each paragraph. a) Type <P> in front of each paragraph on your Web page. It is a good idea

to end the paragraph but is not always necessary. b) To end the paragraph, type </P>

Aligning Text o Align is an attribute found inside a tag. To use the align attribute, type the

following: <P Align="direction"> where direction is either left, right, or center.

Line Breaks o Line breaks specify where each line of text begins. o <BR> appears in front of each line of text.

Non-Breaking Spaces o Web browsers usually ignore extra spaces you add. In order to show additional

spacing you must add a code for the blanks. The following code must be typed for each space:

&nbsp: add as many as are needed for your spacing.



Unit 2, Module 3:Image Tags

Overview:These four lessons teach students about the different types of images available and how to apply them to a web site in a variety of ways. Students will learn how to align images, change their size and bring images in as a background.

Module 3 Lesson:Lesson 1: Image Sources and Types: Time for Lesson: 15 minutes

Description: o In the first lesson, students learn about various types of images used on the web

and their differences. They will also learn how to get the images.

Learner Outcome: o Students will learn about the different types of images and how they are created.

Activity: o Go through the resources listed below and examine the different types of images

and how to get them.

Handout/Resources Needed: o Common HTML Tags (following)o Getting Images (following)o Types of Images (following)

Suggested Assessment: o Grading assessment will come later in the project assignment rubric.



Handout: Common HTML Tags

"Tags" tell the Internet how your document should look. Every visual aspect and piece of text on a page is preceded and followed by a tag.

The tag is always enclosed in these symbols: < >. The tag before the function is the opening tag. The closing tag, which ends the function of the tag, always repeats the format of the

opening tag and adds a forward slash: </ >. If the forward slash is left out, the function doesn't end. So if you want a single word to be bold, you type <B> immediately before the word and </B> immediately after, but if the / is missing, your words will continue to be bold.

Understand the following table: The first two columns show the opening and closing tags for typical functions. Note that

just a few tags do not have a closing tag. The Description column tells what the tag does. The Attribute column shows language that is added INSIDE another tag to add functions

where that tag is in effect. For example, the BODY tag can contain the background color, thus: <BODY BGCOLOR="BLUE">. The end tag </BODY> does not have to contain the attribute. The background color will be in effect throughout the document.

In this table, the attributes that can be placed inside a given tag are listed following that tag.

Document Structure:

Opening Tag Closing Tag Attribute Description

<HTML> </HTML> Identifies document as HTML

<HEAD> </HEAD> Document Head contains Title Tag

<TITLE> </TITLE> Title of Document

<BODY> </BODY> Contents of Document

Formatting:



BGCOLOR="#color code"

Background Color



BACKGROUND="... .gif "

Background Image

TEXT="#color code" Text Color

<CENTER> </CENTER> Centers Text and Images

<H1> to <H6> </H1>to</H6> Heading

ALIGN="Left, Center, Right"

Align Text

<BASEFONT SIZE="1 to7">

Document Font Size

<P> </P> New Paragraph


Align Text

<BR> Line Break

<HR> Horizontal Rule


Align Text

SIZE = "number" Thickness of Horizontal Rule

WIDTH = "number %" % of Document to Span

NOSHADE Removes Shading

Character:


<FONT> </FONT> Section of Text

COLOR="#color code" Font Color

SIZE="number" Font Size

<B> </B> Bold Text



<I> </I> Italic Text

<STRIKE> </STRIKE> Strike out Text

<BLOCKQUOTE> </BLOCKQUOTE> Separates Text

<SUB> </SUB> Subscript Text

<SUP> </SUP> Superscript Text

Links:



LINK="#color code" Unvisited Link Color

VLINK="#color code" Visited Link Color

<A HREF = "Item Location">

</A> Destination of Link

<A NAME = "Label"> </A> Moves to Other Section of Web Page

Images:


<IMG SRC ="Image Location">

Imports Image

ALIGN="Left, Right" Align Image & Text Wrap

ALIGN="Top, Middle, Bottom"

Align Text with Image

ALT Alternative Text

BORDER Puts Border around Image

WIDTH Width of Image in Pixels

HEIGHT Height of Image in Pixels



HSPACE Amount of Horizontal Space around Image

VSPACE Amount of Vertical Space around Image

<BR CLEAR =Left, Right, All>

Stops Text from Wrapping

Tables:


<TABLE> </TABLE> Adds Table

BORDER="number" Border for Rows & Columns

CELLPADDING Thickness of Cell Wall

CELLSPACING Spacing between Border and Cell Contents

BGCOLOR Background Color of Cells

<TR> </TR> Table Row (Start & End)


Aligns Text in Row Horizontally

ALIGN="Top, Middle, Bottom"

Aligns Text in Row Vertically

<TD> </TD> Defines Data Cell

COLSPAN="number" Spans Cells across Column

ROWSPAN="number" Spans Cells across Row

ALIGN Alignment in Cell

<TH> </TH> Header Cell in Table

COLSPAN="number" Spans Cells across Column

ROWSPAN="number" Spans Cells across Row



ALIGN Alignment in Cell

<CAPTION> </CAPTION> Text outside Table

ALIGN="Top, Bottom" Aligns Caption at Top or Bottom



Handout: Getting and Creating Images:

Clip ArtClip art is an inexpensive collection of ready-made images that you can buy with cartoons, drawings, photographs, fonts, and computer generated images. Many programs come with some clip art as part of the program, or you can buy clip art separately.

InternetThere are many places on the Internet that have images, but you must make sure they are free shareware or that you have permission to use any image you copy from the Internet.

Scanned ImagesYou can use a scanner to read images such as photographs into a computer. It works like a copy machine, except the copy is made on the computer instead of paper. Again, permission is required when you scan from a published document such as a book or magazine.

When scanning, use the following guidelines: Physically size the image to approximate the finished dimensions. If you plan on

editing the program in PhotoShop or Paint Shop Pro, you will want to size it larger, then reduce it in your editing program.

Save scanned images in the TIFF file format, since it was invented for scanners. Digital Camera

A digital camera allows you to take pictures and later download them directly to a computer. With a digital camera, there is no scanning of pictures or developing of film. Usually, a digital camera will give you better resolution than trying to scan a photograph. Save the picture with the default extension that comes with the camera software. Later, you can edit the photograph in one of the paint programs.

Creating ImagesThere are many programs that allow you to create your own image or change existing images. With these programs, you have more flexibility and control with your graphics. Examples of professional photo editing programs are Adobe PhotoShop, Corel Photo-Paint, Paintbrush, and Paint Shop Pro. Less expensive programs include Adobe PhotoDeluxe, ClarisWorks, and Microsoft Image Composer. Most of these programs allow you to save in different formats such as .jpeg, gif, etc.



Handout: Types Of Graphics

JPEG (Joint Photographic Experts Group) format can have millions of colors and is often used for photographs and very complex images. JPEG files are also used for images that have minor color changes, depth, lighting effects, or other gradations of color or tone. JPEG images have the .jpg, .jpe, or. jpeg extension. JPEG files are compressed, so data is actually removed from the graphic image to make the file size smaller. JPEG files are cross-platform and will work on all computer types. When to choose the JPEG format? JPEG works best on photographs, but they do not compress areas of solid color very well. Do not save JPEG files repeatedly, as they compress every time they are saved and will lose their original look.

GIF (Graphic Interchange Format) images are limited to 256 colors; they are cross-platform, which means any computer can view them. GIF files are compressed, which makes them small in file size but not in dimension. GIF files, unlike JPEG files, do not lose quality in compression. GIF files have the .gif extension. When to choose the GIF format? GIF files are best used with large areas of solid colors, such as logos, and simple illustrations with flat colors.

BMP (Bitmap) is the standard Windows image format on DOS and Windows compatible computers. The BMP format supports RGB (red, green, blue) indexed-colors, grayscale, and Bitmap color modes. BMP files have the .bmp extension.

PDF (Portable Document Format) is used by Adobe Acrobat. PDF files can represent both vector and bitmap graphics, and can contain electronic document search and navigation features such as electronic links. The PhotoShop PDF format supports RGB, indexed-colors, CMYK (cyan, magenta, yellow, and black), grayscale, and Bitmap. PhotoShop has the .pdf extension.

Targa format is designed for systems using the Truevision video board and is commonly supported by MS-DOS color applications. The Targa format supports 32 bit RGB, grayscale, and 16 bit and 24 bit RGB files without alpha channels. When saving an RGB image in this format, you can choose a pixel depth. Targa files have the .tga extension.

TIFF (Tagged-Image File Format) is used to exchange files between applications and computer platforms. TIFF format is supported by virtually all paint programs, image editing, and page layout applications. Most of the older desktop scanners produce TIFF images and you should save images scanned as TIFF files unless you scan directly to PhotoShop. The TIFF format supports CMYK, RGB, and grayscale files. TIFF files have the .tif extension.

PNG (Portable Network Graphics). Pronounced "ping," this format was developed as an



alternative to GIF. PNG files support 24-bit images and produce background transparency without jagged edges. Some older versions of Web browsers may not support PNG images. Like GIF and JPEG files, PNG files are cross-platform and compressed. PNG files can have more colors than GIF files and also compress smaller. PNG files have the .png extension.



Module 3 Lesson:Lesson 2: Background Images: Time for Lesson: 15 minutes

Description: o This lesson demonstrates how to put an image in the background of a Web page.

Learner Outcome: o Students will learn how to create an image attribute in the body tag to create a

background.

Activity:o Background Images (following)

Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom o Internet Sites

Suggested Assessment: o Have students apply a background image to a Web page and show page on a

browser. Instructor checks them off from their monitor. o Grading assessment will come later, in project assignment rubric.



Assignment: Background Images

Overview:Backgrounds images are sometimes used on a Web page to enhance a Web page. In this lesson, the student will learn how to apply a background image.

Learner Outcomes:At the end of this lesson, you will have a basic understanding of the use of images and how to apply them to a webpage.

Activities: Start a new Web page or open an existing page. Look at the common html tag page. Find in the formatting section the attribute

"background" for the body tag and find in the image section "background and images" and apply them to your page by using the following tags.

<html><Head><Title>Background Images</Title></Head><Body background="image.jpg"> replacing the image.jpg with an

image you have saved</body></html>



Module 3 Lesson:Lesson 3: Images & Links: Time of Lesson: 35 minutes

Description: o Students will learn how to place an image on their page.

Learner Outcome: o To be able to add images on to a Web page.

Activity:o Images & Links





Handout: Images & Links

Overview:In this lesson, we will study how to put images onto their page, add alternative text, and make an image link.

Learner Outcomes:At the end of this lesson, students will have successfully added an image to their page, create an alternative text, and create an image link to another site or page.

Images: You can easily add an image to a Web page. The following is an example of adding

images. <html> <head><title> My Image Page </title> </head> <body> <p>This is my image of....<img src="location & name of image"></body> </html>

Some visitors to your Web site may not be able to see your image because they have set their browser to ignore images. You can specify the text you want to display instead of the image. This will help readers know what they are missing.

Adding alternative text... <html> <head><title> My Image Page </title></head><body><p>This is my image of.....<img src="location & name of image" ALT="Description of

image"></body></html>

Links:You can have an image in your Web page link to another page on the Web. Many times an image link will display a border

The following is an example of how to create an image link. <html> <head><title> My Image Page </title> </head> <body><p>This is my image of..... and it is a link to the second layer of my

Web site.



<A HREF="name of site to link too.html"> <img src="location & name of image"> </A>

</body></html>



Module 3 Lesson:Lesson 4: Image Alignment with Text and Wrapping Text: Time for Lesson: 25 minutes

Description: o Students will learn three ways to align an image with text. Also, they will learn

how to wrap text around an image.

Learner Outcome: o To be able to manipulate text with images.

Activity:o Aligning & Wrapping Text (following)





Handout: Align an Image with Text

Overview:This lessons helps students understand how to align an image with text. This command does not allow you to align an image and wrap text around it at the same time.

Learner Outcomes: To understand how to align an image with text.

Images There are three ways you can align an image with text.

<html><head> <title> My Image Page </title> </head> <body> <p> <IMG SRC ="picture.jpg Align="Top"> In the <IMG> tag for

the image you want to align with you type ALIGN ="Top, middle, or bottom"

</A> </body></html>

Wrapping text around an imageYou can wrap text around an image to give your Web page a professional look. If you have aligned an image with text, you cannot wrap text around the image.

<html><head><title> My Image Page </title></head><body><p> <IMG SRC ="picture.jpg" Align="Left"> In the <IMG> tag for

the image you want to align with you type ALIGN ="Left or Right"

</A></body></html>



Unit 2, Module 4:Link Tags

Overview:These lessons teach students how to create various types of links. Links help you connect Web pages to other information on the Internet. These lessons show you how to create a link to another Web page, create a link within a Web page, create an e-mail link and change link colors. Linking is what makes the Web such a powerful tool.

Module 4 Lessons:Lesson 1: Create a Link to another Web page: Time for Lesson: 15 minutes

Description: o In the first lesson, students learn how to create a link to another Web page.

Learner Outcomes: o To be able to create a link to another Web page.

Activity: o Lesson 1: Links (following)

Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)




Assignment: Links

Overview:Links are used to navigate between Web pages you created, go to related sites, send e-mail, or have definition links.

Learner Outcomes:At the end of this lesson, students will learn how to link to another Web page.

Creating a text link:Linking to another Web page

<html><Head><Title>Links</Title></Head><A HREF= "?"> replacing the ? with the location of the Web page

you want to link to. Use the complete URL links to pages on the Internet for example, http://www.yahoo.com.

</A> after the text to complete the tag.</body></html>

The Web browser will display the text link in a different color with an underline.



Module 4 Lesson:Lesson 2: Create a Link within a Web page: Time for Lesson: 15 minutes

Description: o This lesson demonstrates how to create a link to another part of the Web page

you are on.

Learner Outcome: o Students will learn how to manipulate links.

Activity:o Lesson 2: Links within a page (following)

Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom o Internet sites

Suggested Assessment: o Instructor checks them off from their monitor. o Grading assessment will come later, in project assignment rubric.



Assignment: Links within a Web Page

Overview:If you want readers to jump to a place on the current Web page because the page is long, you must first name the web page area. Position the cursor in front of the area that you want readers to be able to quickly go.

Learner Outcomes:Students will learn how to place a link within a Web page and how to navigate to that portion of the page.

Links within a Web page<html><Head><Title>Links</Title></Head><A NAME="?"> replacing the ? with a name that describes that area

of the Web page.</A> after the text to complete the tag. The next step is to place a

link in the Web page. Position the cursor in front of the text or image that you want to select that will take readers to another area of the Web page.

<A HREF="#?"> replacing the ? with the name you assigned to that area of the page.

</A> after the text to complete the tag.</body></html>

The Web browser will display the text link in a different color with an underline.



Module 4 Lesson:Lesson 3: Create an E-mail Link: Time for Lesson: 10 minutes

Description: o Students will learn how to place an image on their page.

Learner Outcome: o To be able to add images on to a Web page.

Activity:o Lesson 3 E-Mail Links (following)





Assignment: E-Mail Links

Overview:E-mail links allow readers to respond to questions and provide feedback that can help improve your site.

Learner Outcomes:In this lesson, you will learn how to place a link in a Web page to allow readers to send an e-mail message to you.

To create an e-mail link, type: <html><Head><Title>E-Mail Links</Title></Head><body><A HREF="MAILTO:?"> replacing the ? with the e-mail address of

the person you want to receive the message.</A> after the text to complete the tag

</body></html>



Module 4 Lesson:Lesson 4: Change Link Colors: Time for Lesson: 15 minutes

Description: o Students will learn how to change the color of both visited and unvisited links on

the Web page.

Learner Outcome: o To be able to manipulate hexadecimal codes to change colors in visited and

unvisited links.

Activity: o Lesson 4: Links & Colors (following)





Assignment: Link Colors

Overview:The LINK tag lets the person change the color of the links. There are two types of links:

An unvisited link is a link a reader has not previously selected. And a visited link is a link a reader has been to.

Learner Outcomes:At the end of lesson 4, students will be able to change the link colors to help the visitor recognize if they have been to the page or site.

To change the color of links:o Place the cursor inside the BODY tago To change the color of links that have not yet been visited, type LINK="#rrggbb"o To change the color of links that have already been visited, type

VLINK="#rrggbb"o To change the color of a link when clicked on, type ALINK="#rrggbb"

See example below:<html><Head><Title>Link Colors</Title></Head><A body link="rrggbb"> replacing the rrggbb with the a hexadecimal

representation of the desired color.Repeat the link step for each type of link</body></html>



Unit 2, Module 5:List Tags

Overview:There are different types of list codes that enable the developer to create ordered, unordered or definition lists. Ordered lists are used for explaining step-by-step instructions for how to complete a particular task or creating outlines. Unordered lists are probably the most widely used lists and are used when there is no particular order. Definition lists are used for creating glossaries, or any list that pairs a word or phrase with a longer description.

Module 5 Lesson:Lesson 1: Creating Ordered Lists: Time for Lesson: 15 minutes

Description: o In this lesson, students learn how to create ordered lists.

Learner Outcome: o To learn how to create an ordered list and apply it to a Web page.

Activities:o Lesson 1: Ordered Lists (following)





Assignment: Ordered Lists

Overview:There are different types of list codes that enable the developer to create ordered, unordered or definition lists. Ordered lists are used for explaining step-by-step instructions for how to complete a particular task or creating outlines.

Learner Outcomes:At the end of this lesson, you will have a basic understanding of the use of different types of lists and how to apply them to a Web page.

Activities: Start a new Web page or open an existing page. Look at the Common HTML Tag Page (Unit 2, Module 3 handout).

Ordered ListsYou can create an ordered list to display items in a specific order, such as a set of instructions or a table of contents. Below is an example of how to create an ordered list

<html><Head><Title>Ordered List</Title></Head><Body> <OL> This is typed before the list.<LI> This is put in front of each item in the list.</OL> This will end the ordered list command.</body></html>

The following is an example of an ordered list:Sender's Address Date Body Closing Sender's Name Title



Module 5 Lesson:Lesson 2: Creating Unordered Lists: Time for Lesson: 10 minutes

Description: o In this lesson, students learn how to create unordered lists.

Learner Outcomes: o To learn how to create an ordered list and apply it to a Web page.

Activities: o Lesson 2: Unordered Lists (following)





Assignment: Unordered Lists

Overview:Unordered lists are probably the most widely used lists and are used when there is no particular order.

Learner Outcomes:At the end of this lesson, you will have a basic understanding of the use of different types of lists and how to apply them to a Web page.

Activities: Start a new Web page or open an existing page. Look at the Common HTML Tag Page (Unit 2, Module 3 handout).

Unordered Lists:You can create an unordered list to display items that are not in a specific order, such as a set list of products. Below is an example of how to create an unordered list.

<html><Head><Title>Unordered List</Title></Head><Body><UL> This is typed before the list<LI> This is put in front of each item in the list.</UL> This will end the unordered list command.</body></html>

The following is an example of an unordered listApples Oranges Potatoes Cereal Milk Cheese



Module 5 Lesson:Lesson 3: Creating Definition lists: Time for Lesson: 10 minutes)

Description: o In this lesson, students learn how to create definition lists.

Learner Outcomes: o To learn how to create a definition list and apply it to a Web page.

Activities: o Lesson 3: Definition Lists (following)





Assignment: Definition Lists

OverviewThis type of list is good for displaying terms and their definitions and is particularly suited to glossaries.

Learner Outcomes:At the end of this lesson, you will have a basic understanding of the use of definition lists and how to apply them to a Web page.

Activities: Start a new Web page or open an existing page. Look at the Common HTML Tag Page. Unordered Lists

You can create an unordered list to display items that are not in a specific order, such as a set list of products. Below is an example of how to create an unordered list.

<html> <Head> <Title>Definition Lists</Title> </Head><Body> <DL> This is typed before the list. <DT> This is put in front of each term. <DD> This is put in front of each definition in the list. </DL> This will end the definition list command. </body> </html>

The following is an example of a definition list:Apple

The firm rounded fruit of the apple tree or any of it's varieties with red, yellow or green skin.

PotatoA plant native to South America and widely cultivated for its

starchy, edible tubers.



Unit 2, Module 6:Table Tags

Overview:Tables help in the organization of information on a Web page. Tables can be used to display lists of information, control the layout of a Web page, and create borders around information. Before inserting a table, it is important to have a vision of what the page should look like when finished and what information needs to be included.

Module 6 Lesson:Lesson 1: Create a Table: Time for Lesson: 25 minutes

Description: o In this lesson, students learn how to create a basic table.

Learner Outcomes: o Students will learn how to create a basic table to manipulate the information on a

Web page.

Activities:o Introduction To Tables (following)


Suggested Assessment: o Check monitors to make sure students understand basic tables. o Grading assessment will come later, in project assignment rubric.



Handout: Introduction To Tables

Overview:Tables allow you to control the placement of text and images on your Web pages. The key to using tables is to plan the table before adding it to an HTML document. Storyboard the tables on paper before inserting them into your page.

Learner Outcome:Students will learn the basic tags involved in creating a table and how to apply them to a Web page.

Table Elements A table consists of:

o ROW Horizontal line(s) of data. o COLUMN: Vertical line(s) of data o Cells Area where ROWS and COLUMNS intersect

o The following commands are used for making a table:

<TABLE> Comes before the text.

</TABLE> Ends the table.

<TH> In front of the text you want as a header cell for your table.

</TH> After the text.

<TR> Comes before the text you want to appear in one row of the table.

</TR> Comes at the end of each row.

<TD> This comes in front of the text you want to display in a data cell.

</TD> After the text.

The following is an example using tables:

Heading 1 Heading 2 Heading 3

Cell 1 Cell 2 Cell 3

Cell 4 Cell 5 Cell 6

<html><head><title></title></head><body><table><tr>



<th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr><tr><td>Cell 1 </td><td>Cell 2</td><td>Cell 3</td></tr><tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr></table></body></html>



Module 6 Lesson:Lesson 2: More on Tables: Time for Lesson: 40 minutes

Description: o In this lesson, students learn how to add borders, captions, span cells, and align

data.

Learner Outcomes: o Once students learn how to create a basic table, the next step is to learn how to

add basic attributes and values to the table.

Activities: o More on Tables (following)


Suggested Assessment: o Check monitors to make sure students understand concepts.o Grading assessment will come later, in project assignment rubric.



Handout: More on Tables

Overview:This lesson is an extension from lesson one on how to alter the look of your table created on the Web page.

Learner OutcomeStudents will learn how to center their table, create borders, captions, how to create cell spans, and how to align data within cells.

o You can horizontally center a table in your Web page by typing: <CENTER> directly above the<TABLE> tag. Type </CENTER> directly below the </TABLE> tag.

BORDERS o If you would like to add a border around your table and also divide the individual

cells you can do it with the BORDER tag. In the <TABLE> tag, type BORDER=""?"" replacing the "?" with a number that represents the thickness in pixels.

CAPTIONo You can add a caption at either the top or the bottom of your table. This will help

to summarize the information in the table. Type <CAPTION> below the <TABLE> tag. Type the text for the caption and then close with the </CAPTION> tag. If you want the caption to appear at the bottom of the table type ALIGN=BOTTOM in the <CAPTION> table.

CELL SPAN o You can combine two or more cells in a row or column to make one large cell.

To span rows in the <TH> or <TD> tag below the cell type ROWSPAN="?" replacing the "?" with the number of rows you want to span down. If you want to combine columns, in the <TH> or <TD> tag below the cell type COLSPAN="?" replacing the "?" with the number of columns you want to span across.

ALIGNING DATA IN CELLS Data is automatically centered in each cell of the table. To change it to LEFT, CENTER, or RIGHT simply use the ALIGN="?" attribute replacing the "?" with LEFT, CENTER, or RIGHT in the <TR> tag before the row containing the data you want to align.

To align in only one cell type ALIGN="?" attribute replacing the "?" with LEFT, CENTER, or RIGHT in the <TD> or <TH> tag.

You can also move the data to the TOP or the BOTTOM of each cell by using the VALIGN="?" VALIGN="?" attribute replacing the "?" with TOP or BOTTOM in the <TR> tag before the row containing the data you want to align vertically.

To align in only one cell type ALIGN="?" attribute replacing the "?" with TOP or BOTTOM in the <TD> or <TH> tag.



The following is an example using tables:

Heading 1 Heading 2 Heading 3

Cell 1&4Cell 2 Cell 3

Cell 5 Cell 6

<table border="4" width="100%"><tr><th align="left"> Heading 1</th><th align="center"> Heading 2</th><th align="right"> Heading 3</th></tr><tr><td rowspan="2" align="center">Cell 1 & 4</td><td align="center">Cell 2</td><td align="center">Cell 3</td></tr><tr><td align="center">Cell 5</td><td align="center">Cell 6</td></tr></table>



Handout: Adding Color to Tables

Overview:Adding color to a table helps emphasize important information. You can also add color to individual cells or rows.

Learner Outcomes:In the following lesson, the student will learn how to add color to a table.

To add color to a row:<TABLE><TR BGCOLOR="rrbbgg"><TD><TD><TR><TD><TD></TABLE>

To add color to a cell:<TABLE> <TR><TD BGCOLOR="rrbbgg"><TD><TR><TD><TD></TABLE>

To add color to a Table:<TABLE BGCOLOR="rrbbgg"> <TR><TD><TD><TR><TD><TD></TABLE>



Module 6 Lesson:Lesson 3: Resizing Tables: Time for Lesson: 40 minutes

Description: o In this lesson, students learn how to resize tables and cells, and add cell padding

and cell spacing.

Learner Outcomes: o This is an extension of the previous lesson, adding more attributes and values to

the basic table.

Activities: o Lesson 4: Even More on Tables (following)


Suggested Assessment: o Check monitors to make sure students understand conceptso Grading assessment will come later, in project assignment rubric



Handout: Resizing Tables

Overview:In this lesson, we will look at additional attributes and values that will allow the student to change the size of the table and its individual cells.

Learner Outcomes:In the following lesson, students will learn how to change the table size, change the cell size, and change the cell spacing and padding.

To change the table size:<TABLE Border="3" WIDTH="600" HEIGHT="400"><TR><TD><TD><TR><TD><TD></TABLE>

To change the size of a cell:<TABLE> <TR><TD Width="200" Height="100"><TD><TR><TD><TD></TABLE>

To change the cell spacing:Cell spacing changes the amount of space between each cell in a table.

<TABLE CELLSPACING="15"> <TR><TD><TD><TR><TD><TD></TABLE>

To change the cell padding:Cell padding changes the amount of space around the contents of each cell in a table.

<TABLE CELLPADDING="15"> <TR><TD><TD><TR><TD><TD></TABLE>



Unit 2, Module 7:Source (Cut & Paste)

Overview:Viewing source codes provides a useful way to learn how different pages are created. As you learn and use HTML, the Web represents a great source of knowledge. By finding a site that is using the technique that you want, you can learn how to do it by viewing the source to see how it was done. You can cut and paste code into your site and modify it to accomplish the effects wanted. Students will learn how to view source codes as a means of learning HTML.

Module 7 Lesson:Lesson 1: Viewing Source Codes: Time for Lesson: 30 minutes

Description: o In this lesson, students learn how to view HTML code in a browser.

Learner Outcome: o Students will learn how to view source codes as a means of learning HTML.

Activities:

o Select a site in advance or have students go to their favorite site. Students will right-click on site or go to view from the drop down menu. From this menu, select source.

Note* Sometimes the second method, although requiring an extra key stroke, maybe easier to access, depending on the page design. It might also be helpful to pick a simple site and not one with a lot of script for the beginner students.

Handout/Resources Needed: o Internet Explorer o NotePad




Exercise: Viewing Source Code

Overview:The following lesson demonstrates how to view a source code, cut and past source codes into your page, and modify the source code.

Open a Web site in a browser

Display the Web page you want to view the HTML code for

Click View

Click source. If you are using Netscape Navigator, click Page Source

A separate window is opened that displays the HTML code used to create the Web page.

When you finish viewing the HTML code, click the X in the upper right corner to close the window.

Repeat the steps and view several sites to try and understand the code.

Cutting and Pasting Source CodesYou can cut and paste code to your local computer or into your Web pages. A word of caution: codes that are taken off the Web should be modified. Keep in mind that Web pages on the Internet are copyrighted by their respective owners.

Open a Web site in a browser Display the Web page you want to view the HTML code for

Click View

Click source. If you are using Netscape Navigator, click Page Source

A separate window is opened that displays the HTML code used to create the Web page. When you finish viewing the HTML code, click the X in the upper right corner to close the window.

Highlight the code you want to copy and click the Ctrl C buttons. This will copy the code highlighted.



Go to the source code of your Web page and place the cursor where you want to paste the code you have just copied. Click the Ctrl V buttons to paste the code into your site.

View the code in a browser this will let you see if the code works. Make modifications to the code to personalize it to your site.



Unit 3: Preparing Images

Overview:There are two modules in this unit. In the first module, students do tutorials based on PhotoShop skills. In the second module, students apply those skills by creating a portrait of themselves and designing some navigation buttons. The portrait and the buttons will be incorporated in their personal web site in Unit 4.




Knowledge of principles of layout and graphics.Ability to develop aesthetically pleasing elements.

Employability Skills:Ability to mentally picture outcomes.Ability to think creatively while solving problems.Ability to judge effectiveness of graphics, animation, audio and video

content.Ability to judge content and form and reconcile to overall project image.


Demonstrate the ability to create simple graphic documents using graphic software.

Use the marquee, lasso, and magic wand tools to select parts of an image in various ways.

Reposition a selection marquee. Deselect a selection. Move and duplicate a selection. Constrain the movement of a selection. Adjust a selection with the arrow keys. Add to and subtract from selections. Rotate, scale, and transform a selection. Combine selection tools. Crop an image. Scan images and save them in the appropriate file format in an accessible

location. Use a digital camera and save images in an accessible location. Use the selection tool in PhotoShop best suited for the task of removing a form

from its background. Create, adjust and retouch a layer to make it blend with the overall image.



Set an image onto a transparent background and save using the appropriate file format.

Feather an image to create a vignette effect.

EALRs Arts

o The student acquires the knowledge and skills necessary to create, to perform, and to respond effectively to the arts.

o The student applies the creative process with arts knowledge and skills to reason and solve problems.

o The student uses at least one of the art forms (visual arts, music, drama, and/or dance) to communicate ideas and feelings.

o The student understands how the arts connect to other subject areas, life, and work.

Reading o The student understands and uses different skills and strategies. o The student understands the meaning of what is read. o The student reads different materials for a variety of purposes.

Communication o The student communicates ideas clearly and effectively. o The student analyzes and evaluates the effectiveness of formal and informal

communication.

Module Titles: Module 1: PhotoShop Tutorials Module 2: Applying PhotoShop



Unit 3, Module 1:Photoshop Tutorials

Overview:There are three lessons within this module. Each lesson is comprised of a PhotoShop tutorial. The tutorials are excerpts taken from Adobe's Adobe Photoshop Classroom in a Book ® by permission from Adobe Systems and are not intended for reproduction without express written permission from Adobe Systems, Inc. The tutorials were originally designed specifically for PhotoShop 5.0 and 5.5. They have been revised so that they reflect the version changes in Photoshop 6.0+. Links to the 5.0 and 5.5 version of these files are also included. If your students use another graphics program, you will want to carefully review these lessons to see if modifications are in order.

Students are expected to retrieve files from specific folders, so copies of the files need to be saved on a public drive or at least a folder on which students are allowed access.

By the time your students complete these tutorials, they will have a fairly good foundation for PhotoShop and be ready for the next module in which they apply these skills to their personal web site.

Module 1 Lesson:Lesson 1: Working with Selections: Time for Lesson: 100 minutes

Description: o In this lesson, students will use Adobe's PhotoShop tutorial to learn about the

marquee, lasso, magic wand, and move tools.

Learner Outcome: o According to the Adobe tutorial, the student will be able to-

Use the marquee, lasso, and magic wand tools to select parts of an image in various ways.

Reposition a selection marquee. Deselect a selection. Move and duplicate a selection. Constrain the movement of a selection. Adjust a selection with the arrow keys. Add to and subtract from selections. Rotate, scale, and transform a selection. Combine selection tools. Crop an image.

Activities: o Save the contents of the Lesson01 folder to (Unit3_Image_Preparation\

Module_1\Lesson01. This student-accessible folder contains all the Adobe PhotoShop tutorials (on disk)).

o Have students save a copy of these two files on a drive which will permit them to have write access: Start01 and End01 (on disk).



o The Adobe Acrobat Document or PDF file titled Lesson01 (5.0 and 5.5 version) contained in that folder has the step-by-step directions (on disk).

Handout/Resources Needed: o Adobe Acrobat Reader o Adobe PhotoShop 5.0 or more recent versions

Suggested Assessment: o Check student monitors to see if they successfully replicated the model.

Tutorial: Working with Selection in Photoshop (on disk)



Module 1 Lesson:Lesson 2: Layer Basics: Time for Lesson: 100 minutes

Description: o In this lesson, students will use Adobe's PhotoShop tutorial to learn about layers,

one of the most powerful tools in the PhotoShop program.


Organize artwork on layers. Create a new layer. View and hide layers. Select layers. Remove artwork on layers. Reorder layers to change the placement of artwork in the image. Apply modes to layers to vary the effect of artwork on the layer. Link layers to affect them simultaneously. Apply a gradient to a layer. Add text and layer effects to a layer. Save a copy of the file with the layers flattened.

Activity: o Save the contents of the Lesson02 folder to (Unit3_Image_Preparation\

Module_1\Lesson02). This student-accessible folder contains all the Adobe PhotoShop tutorials (on disk).

o Have students save a copy of these three files on a drive which will permit them to have write access: Clock.psd, End02.psd and Start02.psd (on disk)

o The Adobe Acrobat Document or PDF file titled Lesson02 (5.0 and 5.5 version) contained in that folder has the step by step directions (on disk).

Handout/Resources Needed: o Adobe Acrobat Reader o Adobe PhotoShop 5.0 or more recent versions


Tutorial: Layer Basics in Photoshop (on disk)



Module 1 Lesson:Lesson 3: Photo Retouching: Time for Lesson: 100 minutes

Description: o In this lesson, students will use Adobe's PhotoShop tutorial to learn techniques

for modifying or retouching images.


Choose the correct resolution for a scanned photograph. Crop an image to final size. Adjust the tonal range of an image. Remove a color cast from an image using an adjustment layer. Use the Replace Color command to change the hue and

saturation of a selected color in a photograph. Adjust the saturation and brightness of isolated areas of an image

using the sponge and dodge tools. Use the rubber stamp tool to eliminate an unwanted object from

an image. Replace parts of an image with another image. Apply the Unsharp Mask filter to finish the photo-retouching

process. Save an Adobe Photoshop file in a format that can be used by a

page layout program.

Activity: o Save the contents of the Lesson03 folder to (Unit3_Image_Preparation\

Module_1\Lesson03). This student-accessible folder contains all the Adobe PhotoShop tutorials (on disk).

o Have students save a copy of these three files on a drive which will permit them to have write access: Clouds.psd, End03.psd and Start03.psd (on disk).

o The Adobe Acrobat Document or PDF file titled Lesson03 (5.0 and 5.5 version) contained in that folder has the step by step directions (on disk).

Handout/Resources Needed: o Adobe Acrobat Reader. o Adobe PhotoShop 5.0 or more recent versions.


Tutorial: Photo Retouching in Photoshop (on disk)



Unit 3, Module 2:Applying Photoshop

Overview:In this module, students use the skills learned in the previous module to create images that will later be incorporated in their personal web site. In the first lesson, students take a digital picture of themselves. Then they select and lift their form off of the original background and place their form on an exotic or whimsical background. When they redesign the home page for their personal web site in Unit 4, this will become the focal image of that web site. In the second lesson, students make generic navigation buttons, which will also be for use in the redesign of their personal web site.

Module 2 Lesson:Lesson 1: Self Portrait: Time for Lesson: 200 minutes

Description: o Students start with either a digital image or a scanned image of themselves. They

then find a suitable image of a location, someplace exotic or whimsical. Using selection and layer techniques, they place their body in to the exotic or whimsical background.

Learner Outcome: o The student will be able to

Scan images and save them in the appropriate file format in an accessible location.

Use a digital camera and save images in an accessible location. Resize an image to make it proportionate without distortion. Use the selection tool in PhotoShop best suited for the task of

removing a form from its background. Create, adjust and retouch a layer to make it blend with the

overall image. Set an image onto a transparent background and save using the

appropriate file format. Feather an image to create a vignette effect.

Activities: o Teach students to operate digital cameras and then pair students up to shoot each

other’s picture. Advise them to use a patternless, light-colored background. o Teach students to operate a scanner. If they brought a print picture, have them

scan it. o Teach students ethical and legal practices for obtaining images on the Internet.

Refer to the assignment guidelines concerning such practices. Students that did not bring print images should search to find a suitable background.

o Have students open both the portrait and the background images in PhotoShop and have them do the self portrait exercise (following).

Handout/Resources Needed: o an exotic background image, supplied by the student, either a digital or a print

(postcard, page from a magazine, etc.)



o imageo flat bed scanner o digital camera(s) o Adobe PhotoShop o some sort of sort of storage for student image files.

Suggested Assessment: o Check student monitors as formative or ongoing assessment to see if they

successfully apply the PhotoShop skills from the previous module. As a summative assessment, use the Applied PhotoShop Skills Rubric (following) for evaluation.



Exercise: The Self PortraitOverview:It's time you took a virtual vacation. In this assignment, you'll lift your form from a digital picture and place you (your image) on some exotic or whimsical background. You will then touch up the image and create a vignette effect. Have fun with this assignment, but do your best work because eventually this image will grace the home page of your personal web site as the central focus.

Learner Outcomes: At the completion of this exercise, you will be able to:

o scan images and save them in the appropriate file format in an accessible location.

o use a digital camera and save images in an accessible location. o use the selection tool in PhotoShop best suited for the task of removing a form

from its background. o create, adjust and retouch a layer to make it blend with the overall image. o set an image onto a transparent background and save using the appropriate file

format. o feather an image to create a vignette effect.

Activities:Discussion of guidelines for legal and ethical acquisition of images. Only take images from Internet resources and other resources when permission is expressly

granted (written). o Do not assume that the absence of a copyright statement or permission statement

implies permission. o If you do get permission to use an image, attribute the source of the image in

your own copyright statement. o Whenever possible use your own original images.

Preview the evaluation rubric that describes in specific terms what successful completion of this assignment looks like.

Open your background image and your portrait in Adobe PhotoShop. Make your body image proportionate to the background. Use a selection tool to remove your form from its background. Place it as a layer on top of the background image. Eliminate all extra pixels. Resize the image. Create a vignette effect. The site Webmasterbase.com has tutorials for many web

development tools/programs such as PhotoShop. Use the tutorial for creating vignettes at this address: webmasterbase.com/tutorials/Photoshop/

Save and optimize the image for the web. View the webmasterbase.com tutorial "Saving Images for the Web in PhotoShop". Save the original PhotoShop PSD file in a separate folder for safe keeping in case it is needed in the future for revision.

Resources/Online documents: Photoshop A browser webmasterbase.com/tutorials/Photoshop/

All done? Review the evaluation rubric (following)


http://www.webmasterbase.com/tutorials/Photoshop/





Evaluation Rubric

Superior Better Than Satisfactory Unsatisfactory

File Acquisition

The ability to scan

images, operate digital

camera, legally

acquire digital

images from the web or

elsewhere.

Storage

The ability to save

images in

the appropriate file

format in an accessi



ble location.

Selection Tool Use

The ability to pick the best selection

tool for the task and cleanly remove the selected form from its

background without omission or addition of

desired

pixels.

Layer Use

The ability to create,

nam



e, adju

st and retouch layers. As

well as the

ability to use transparent layers.

PhotoShop Effects

The ability to feather



Module 2 Lesson:Lesson 2: Navigation Buttons: Time for Lesson: 200 minutes

Description: o Students view on-line tutorials that demonstrate how to create a button using

PhotoShop.

Learner Outcome: o The students will be able to-

Use Photoshop to make a basic shape and fill it with color. Select complementary colors. Use layer effects to create a 3-D effect. Use gradients to create a 3-D effect. Create and align text layers. Read and watch an automated tutorial and be able to apply the

skills demonstrated. Activity:

o Students research the two tutorials for creating buttons on the SitePoint web site.o Have students do the navigation buttons exercise (following).

Handout/Resources Needed: o PhotoShop o Browser

Suggested Assessment: o Check student monitors as formative or ongoing assessments to see if they

successfully apply the PhotoShop skills from the previous module. As a summative assessment, use the Applied PhotoShop Skills Rubric (previous) for evaluation.




Exercise: Creating Navigation Buttons

Overview:In this lesson, you design the buttons which will serve as links to the major sections of your web site.

Learner Outcomes:At the completion of this exercise, you will be able to:

Use PhotoShop to make a basic shape and fill it with color. Select complementary colors. Use layer effects to create a 3-D effect. Use gradients to create a 3-D effect. Create and align text layers. Read and watch an automated tutorial and be able to apply the skills demonstrated.

Activities: Preview the evaluation rubric that describes in specific terms what successful completion

of this assignment looks like. Open your browser and view the two tutorials for making buttons at

webmasterbase.com/tutorials/PhotoShop/. One tutorial gives you directions for making a circular button using gradients to create a 3-D effect. The other gives you directions for making a rectangular button using a bevel to create a 3-D effect

Make at least five of your own buttons all of the same size, shape (round, oval, rectangle or whatever) and colors.

As for the color of the buttons, chose colors that are complementary to the color theme of your personal web site.

Incorporate both the bevel and gradient effects. Add text to label each button. Make the text ornate, so it contributes to the aesthetic of

the button. Consider using the Transform function to change the angle of the text. Incorporate something you learned from at least one other tutorial at

Webmasterbase.com. Resize the button and save for the web.

Resources/Online documents: PhotoShop A browser webmasterbase.com/tutorials/PhotoShop/

All done?

Review the evaluation rubric (previous).





Unit 4: Intermediate HTML or Controlling Page Layout with

Tables

Overview:Tables are one of the oldest tools available to web developers. There are newer methods for organizing the layout of content, such as through the use of layers, frames or cascading style sheets. Because the table is a tool that has been around since the early days of the World Wide Web, it is extremely reliable in how it displays content on various browsers. In spite of the fact that it is an old tool, it is still a widely used one.

Some major reasons for using tables are as follows: for an organized display of information (similar to what students did in Unit 2: Module 6) to create columns of text much like a newspaper to place a 3-D border around an image (you can add the border attribute to images but the

result does not appear 3-D) as a device to control the layout of content on a page.

In this unit, students will learn principally the last item listed, to control the layout of content using tables.

The first two modules will teach the foundation skills for using tables to lay out a web page. The third module will be the capstone project in which students return to their personal web site and do a complete revision of the first page, using tables to control the layout of the page.

Industry Skill Standards covered in this Unit:Critical Work Function/Key Activity:


Knowledge of principles of layout and graphics.Ability to design user-friendly sites and applications.Ability to develop aesthetically pleasing elements.

Employability Skills:Ability to mentally picture outcomes.Ability to think creatively while solving problems.Ability to judge content and form and reconcile to overall project image.Ability to generate and evaluate alternative solutions.

B5: Write Supporting Code Technical Knowledge:

Knowledge of code development procedures.knowledge of programming language required for application.Ability to evaluate alternatives in code implementation and make

decisions.Ability to develop code that meets coding standards.



Employability Skills:Ability to write clear documents.Ability to generate and evaluate alternative solutions and formulate a

plan of action.Ability to manipulate technology for desired results.

Learner Outcomes/ObjectivesThe student will be able to:

control the horizontal alignment within the table cell tag. control the vertical alignment within the table cell tag. span columns and rows of a table with the aid of an editor's wizard. span columns and rows of a table without the aid of an editor's wizard. nest a table within a table. make elements of adjoining cells contact without gaps or borders.

EALRs Arts

o The student applies the creative process with arts knowledge and skills to reason and solve problems.

o The student uses at least one of the art forms (visual arts, music, drama, and/or dance) to communicate ideas and feelings.

o The student understands how the arts connect to other subject areas, life, and work.

Mathematics o The student understands how mathematical ideas connect within

mathematics, to other subject areas, and to real-life situations.


communication.

Modules Titles Module 1: Formatting a Data Table to Have Rounded Corners: Controlling

Layout within the Cell Tag Module 2: Picture Puzzles: Column and Row Spanning Module 3: Revising the Home Page of the Personal Web Site Using Tables to

Control the Layout



Unit 4, Module 1:Controlling Alignment within the Cell Tag

Overview:There is only one lesson for this module. Students construct a simple table and learn a trick for formatting tables with rounded corners. The purpose is to learn how to control the alignment of content, in this case, images, within the cell tag.

Module 1 Lesson:Lesson 1: Controlling Alignment within the Cell Tag: Time for Lesson: 60 minutes

Description: o This lesson gives students practice aligning content inside a table cell. Students

make a simple table for displaying information that has rounded corners.

Learner Outcome: o The student will be able to-

control the horizontal alignment within the table cell tag. control the vertical alignment within the table cell tag.

Activities: o On the whiteboard, show students that within one table data cell, they have three

values for horizontal alignment (left, center, right) and three values for vertical alignment (top, middle, bottom). In other words, there are nine possibilities to position data within a cell tag.

o Have students do Lesson 1: Controlling Alignment within the Cell Tag (following).

Handout/Resources Needed: o HomeSite o Table Tips

Suggested Assessment: o Check student monitors for mastery of module.



Assignment: Controlling Alignment within the Cell Tag

Overview:Square corners abound on the web. Sometimes it is nice to deviate from the hard cornered web world and make something rounded. In this lesson, you construct a simple table and learn a trick for formatting tables with rounded corners. The main purpose, aside from bringing round to a square world, is to learn how to control the alignment of content (in this case images) within the cell tag.

Learner Outcomes control the horizontal alignment within the table cell tag. control the vertical alignment within the table cell tag.

Activities: Save these images to your personal file storage:

Top Left Top Right Bottom Left Bottom Right

In HomeSite, open a new page. Set the background for the page to be the same color as the gifs above - #CCCCFF.

Construct a simple table using the table wizard in HomeSite with the following attributes: o 3 columns, 3 rows o each column's width is 100 pixels (same for height) o white (#FFFFFF) background for the table.

Within a table cell, you can give three values for horizontal alignment (left, center, right) and three values for vertical alignment (top, middle, bottom). In other words, there are nine possibilities to position data within a cell tag.

In this exercise, you will be using four of the possible nine positions. Now edit the cell tags and insert the images.

Be sure to have your instructor inspect your rounded corner table when you have successfully constructed it.

Resources/Online documents:o HomeSite o Table Tips

All done?Show your instructor your completed table.



Unit 4, Module 2:Spanning and Nesting Tables

Overview:There are three lessons within this module. The first two involve spanning. Spanning can be a very tricky concept to teach. In this module, students start with a relatively simple lesson in spanning with the table wizard in HomeSite. In the second lesson, they do a similar exercise without the use of a wizard. The third lesson is a quick and easy application of the nesting concept.

Module 2 Lesson:Lesson 1: Spanning Exercise Using a Wizard: Time for Lesson: 90 minutes

Description: o Students are given several colored rectangular images. They are asked to

assemble images in a table using row and column spanning. The goal is to assemble the images in the same manner as the model. Students use a table wizard program in HomeSite, which makes spanning much simpler than hand coding.

Learner Outcomes: o The student will be able to-

span columns and rows of a table with the aid of an editor's wizard.

Activity: o Have students do the spanning exercise using the table wizard in HomeSite

(following).

Handout/Resources Needed: o HomeSite's Table Wizard.




Spanning Exercise Using a Wizard

Overview:Tables are a very effective and widely supported tool for controlling the layout of a page. In this exercise, you will learn one technique that gives designers a great level of control over the arrangement of content within a table: spanning.

Challenge:Use Column and Row spanning in a table to piece together separate shapes so that they are arranged exactly like the finished Spanning Puzzle.

Spanning Puzzle

Follow these step by step directions:

1. Set up a folder called Images on your H drive. Save all the shapes below into the folder.

2. Open HomeSite and start a new file. 3. In the Resource Window, locate your folder of images. If the Resource Window is not

visible, go to View and click on Resource Tab. 4. On the Quick Bar (Go to View if Quick Bar is not visible), open the Table Wizard. 5. Click on the addition button to add a row, and click on the addition button to add a

column. You should have three rows and three columns. Click Next. 6. Click on the top left cell of the table. Notice that it becomes highlighted when you click

on it. Click the Row Span addition button once. Now the cell spans two rows. Span as needed using figure 2 as a model.



7. Cell Spacing and Cell Padding should be set to zero. The border should also be at zero. Check the Specify Width box and set to 350 pixels. Click on Next.

8. At this point you can specify cell properties. Click on a cell to highlight it. Check the width box and specify the width necessary to accommodate the image which should fit in the cell. In the Content box write, "shape #1," or some other label. What you write in this content box will help you more easily locate this table cell amidst all the other code. Do the same for all the cells.

9. Click Finished. 10. Click on images in the resource Window and drag them into the correct cell. Remember

to delete your content label. 11. Save and view in the Browse mode. 12. Once you are satisfied with your results, closely examine the code produced by the

wizard. Be able to answer the following questions when your instructor checks for understanding:

13. How many cell or column tags are in rows one two and three? 14. Which tag is modified by the attributes cellpadding, cellspacing, and border? Why is the

value set at zero for each of these? 15. When you look at the code for the second row of the table, it contains two column tags

that have a combined width of 250 pixels. Yet, the width of the entire table is 350 pixels. How do you account for this difference?

Next lesson: Do a similar puzzle without using a wizard--from scratch.



Module 2 Lesson:Lesson 2: Spanning Exercise from Scratch: Time for Lesson: 120 minutes

Description: o Students do basically the same thing as they did in the previous lesson, only this

time, they do not use a wizard for constructing their table.

Learner Outcomes: o The student will be able to span columns and rows of a table without the aid of

an editor's wizard.

Activity: o Have students do the spanning exercise from scratch in NotePad or HomeSite

(following).

Handout/Resources Needed: o Notebook paper for a preliminary sketch of the table. o Notepad or HomeSite.

Suggested Assessment: o Check student monitors to see if they successfully replicated the model. Also,

check for deeper understanding by asking the following questions: How many cell or column tags are in rows one, two, and

three? When you look at the code for a given row of the table and it

contains two column tags that have a combined width of less than the table's width of 350 pixels, how do you account for this difference?



Exercise: Spanning From Scratch

Overview:The wizard is a helpful tool for constructing tables, but there are times when developers need to hand code. In this lesson, you will hand code a spanning puzzle similar to the one you saw in the last lesson.

Challenge:You can use HomeSite (do not use the Design view or the table wizard) or Notepad. Use Column and Row spanning in a table to piece together separate shapes so that they are arranged exactly like the finished Spanning Puzzle.

Spanning Puzzle

Follow this advice: Sketch on paper how many rows and columns are necessary. Also, determine where

spanning is necessary. You may want to pencil in the table code beside the sketch of the puzzle.

Use the same images as you used in the last lesson. Modify the table tag so that cellspacing, cellpadding, and the border are all set at zero. Give the table tag a width value of 350. Give each cell/column tag the appropriate width tag. Save the file and refresh the browser each time a change is made.

All done?

When you are satisfied with your results, show the finished product to your instructor. Be able to answer the following questions when your instructor checks for understanding:

How many cell or column tags are in rows one, two, and three? When you look at the code for a given row of the table and it contains two column tags

that have a combined width of less than the table's width of 350 pixels, how do you account for this difference?



Module 2 Lesson:Lesson 3: Nesting Tables: Time for Lesson: 60 minutes

Description: o As with the other lessons in this module, students attempt to replicate a model.

They construct a parent table and then embed another table within it. This unit also involves review of table cell alignment tricks taught in the previous module (Unit 4, Module 1: Controlling Alignment within the Cell Tag). Once students successfully nest tables, they are asked to make content of two cells touch without a gap or border.

Learner Outcomes: o The student will be able to:

nest a table within a table. make elements of adjoining cells contact without gaps or

borders.

Activity: o Have students do the nesting exercise (following).

Handout/Resources Needed: o HomeSite or Notepad o Table Tips (following)

Suggested Assessment: o Check student monitors to see if they successfully replicated the model. This

lesson requires a second check to see that students successfully made content of two cells touch, or "kiss."



Exercise: Nesting Tables

Overview:Developers commonly nest tables within tables when they build the structure of page. It is not unusual to see as many as three or more levels of tables imbedded in one page - a table within a table within yet another table, etc. In this exercise, you will be required to use some of the cell alignment techniques you used in Module 1 as well as the technique to nest tables. The overall purpose is to develop greater control of layout through the use of tables.

Challenge:Using the Homesite editor view (and checking your work in the browser view), construct a parent table (the big table containing numbers in all but one of the cells) and a nested child table the little guy containing letters in all the cells) that looks exactly like the model.

Make an exact replica of this model!

Good Advice: Create the parent table of three rows and three columns. Use the following attributes and values for the parent table tag <table>:

o Set the border to 1 pixel. o Make the border color black. o Make the border background pink.

Use the following attributes and values for cell tags <td> of the parent table: o Set the width and height to 100 pixels. o On the model, carefully note the position of the number in each cell and set the

alignment and vertical alignment accordingly.

Insert your cursor between the last cell tags of the last row and create a new (nested) table of three rows and three columns.

Use the following attributes and values for the nested table within the table tag:



o Set the border to 1 pixel. o Make the border color black. o Make the width and height equal 95 pixels.

Wrap up:Show the perfect replica to your instructor.

Now Try This: There are times when you may want to make the content in your cells smack together

without any seams. Especially with graphics and other images that divided up into multiple cells of a table, you don't want any gaps. Recall what you did with the puzzle in the previous lesson. You set the cell padding and cell spacing attributes to zero. With these attributes at zero and with the border set at zero, the table's structure becomes invisible.

Change the alignment of two cells in your parent table so that two numbers occupying different cells are as close as you can make them. Then modify the parent table tag by setting cell padding, cell spacing, and border equal to zero. Did they kiss?

Wrap up:Show the kissing numbers to your instructor.



Handout: Table Tips

The following are tips about handling tables:

The </table> tag is essential. Some versions of Netscape will not display the table without it.

Omitting </td> and </tr> may cause some browsers to add space.

Tables naturally expand to the edge of the elements they contain or the edge of the browser window, whichever comes first.

A convention for many designers is to limit the width of tables to no more than 600 pixels.

If there is no content in a particular cell, use background color rather than an image and place a non breaking space tag within the cell.

Unless you have a good reason not to, specify widths in pixels.

When using tables to seamlessly join images, set the following attributes to zero: within <table>

cell spacing cell padding border within <img src> hspace vspace within <body> when the table is meant to expand to the edge of the browsers window leftmargin topmargin



Unit 4, Module 3:Revising the Home Page of the Personal Web Site Using Tables

to Control the Layout

Overview:This module serves as a capstone project for the all the lessons that preceded it. The basic task is a redesign of the personal web site, using tables to control the layout of the web page. The key elements that students will lay out on the home page of their personal web site are the focal image created in Unit 3, Module 2, Lesson 1 and the buttons they made in Unit 3, Module 2, Lesson 2. Students will also be expected to incorporate elements of good design learned in Unit 1 as well as basic HTML coding skills acquired in Unit 2.

The redesign will include the focal image, with navigation buttons curving around the focal image. The assignment lists in detail just how that combination should be accomplished.

Module 3 Lessons:Lesson 1: Story Board: Time for Lesson: 90 minutes

Description: o Before actually coding the redesign of the Personal Web Site home page,

students spend time story boarding to scale a sketch of how the navigation buttons will curve around the focal image and all other necessary elements of the page.

Learner Outcome: o The student will be able to:

Demonstrate the ability to evaluate and assess effectiveness and success of the preliminary design, and whether the story board sketch meets design criteria.

Accurately describe the layout of graphic elements in pixel units given a specified monitor resolution setting.

Activities: o Have students do the storyboard exercise.

Handout/Resources Needed: o Storyboard worksheet (following) (to be completed prior to the Storyboarding

Exercise (following)), o graphing paper, o pencils, o straight edges, o "Step-By-Step Site Planner" is an article by Keith Reichley at

webmasterbase.com which spells out in exhausting detail the preliminary steps a professional developer or development firm might undergo prior to coding a web site for a client.



http://www.webmasterbase.com/article.php?pid=0&aid=507


o Have students evaluate their own design, using the evaluation tool developed in Unit 1.

Exercise: Storyboarding

Overview:Storyboarding is one form of planning. If you take the time to think through a project before you start construction, you save time, work and, if you were designing professionally, money. The old saying, "Twice measured is better than twice cut," speaks to the notion that a little planning and thought before the actual work reduces the number of mistakes and revisions that can plague a project. In this assignment, you'll sketch the look of the home page of your personal web site as well as make decisions concerning the technical parameters of the page. Because we are only doing a revision of the home page, you won't need to concern yourself with the rest of the pages in the site.

As was mentioned in the previous unit, the redesign will entail the following features: 1. Your portrait as the central focus, and 2. At least six navigation buttons arranged in a curve

flowing around part of or all of the portrait image. Both of these elements must be contained within the same master table.

Learner Outcomes:At the completion of this exercise, you will be able to:

Demonstrate the ability to evaluate and assess effectiveness and success of the preliminary design, and whether the story board sketch meets design criteria.

Accurately describe the layout of graphic elements in pixel units, given a specified monitor resolution setting.

Activities:

Complete the storyboarding worksheet first, and show your instructor the completed worksheet.

On the graphing paper, sketch the look of the page. Lightly sketch vertical and horizontal guide lines to determine the number of rows and

columns necessary to hold all the elements in place in a table. Make notes as to which cells need to be spanned, what content in cells needs to be

aligned vertically and/or horizontally, and when nesting tables would be advantageous.

Assign widths and where necessary, heights for cells. Label each graphic element with its file name, width and height. Determine which cells will not have graphics. What will be contained in the cell? Text or

nothing but background?

Resources/Online documents: graphing paper, pencils, straight edges, "Step-By-Step Site Planner" is an article by Keith Reichley at webmasterbase.com which

spells out in exhausting detail the preliminary steps a professional developer or development firm might undergo prior to coding a web site for a client.


http://www.webmasterbase.com/article.php?pid=0&aid=507


All done? Maybe not. Have your instructor review your sketch and be prepared to do revision. Also, use the web site evaluation tools the class created in Unit 1 to see if your design meets the criteria of a quality web site.

Storyboarding Worksheet

Overview:This worksheet will help you think through some of the decisions you'll need to make whenever you start a new web site. You can still construct a web site without making these preliminary decisions, but you're less likely to get a clean, unified look to your pages.

Think through the following activities and show your instructor the decisions you made.

1. Decide on the monitor resolution setting you are designing for (800 x 600 pixels, for instance).

Circle the screen resolution you will use as your maximum dimensions in which to layout the page:

640 x 480 800 x 600 1024 x 768 544 x 378 (web TV)

What scale will you use to sketch the layout? Every large square on the graphing paper equals:_______ pixels.

2. Consider your color scheme. Jot down the hexadecimal code for each element on your page.

# __ __ __ __ __ __ background color

# __ __ __ __ __ __ link color

# __ __ __ __ __ __ vlink color

# __ __ __ __ __ __ alink color

# __ __ __ __ __ __ text color

# __ __ __ __ __ __ special text color (headings, subheadings, etc.)

# __ __ __ __ __ __ special text color (headings, subheadings, etc.)

3. Typography = the general character or appearance of printed matter. Make the following decisions concerning font.

___________________________ Font face (type of font)

____ Points Body text

____ Points Text for headings

____ Points Other text



Module 2 Lesson:Lesson 2: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout:

Time for Lesson: 300 minutes

Description: o This lesson isn't so much a lesson as it is the moment you turn students loose to

complete the capstone project: the new look of the home page to their personal web site.


control the horizontal alignment within the table cell tag. control the vertical alignment within the table cell tag. span columns and rows of a table with the aid of an editor's

wizard. span columns and rows of a table without the aid of an editor's

wizard. nest a table within a table. make elements of adjoining cells contact without gaps or

borders.

Activity: o Using Notepad or Homesite, students construct the new look of the home page to

their personal web site, according to the instructions in the Capstone Project: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout (following).

Handout/Resources Needed: o Notepad or Homesite. o Storyboard and specifications (from Unit 4, Module 3, Lesson 1). o Web site evaluation tool created by the class in Unit 1.

Suggested Assessment: o Encourage self assessment on the part of students using the web site evaluation

tool created by the class. Direct students to use those traits which are appropriate for the task of evaluating the home page only as opposed to an entire web site.



Capstone Project: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout

Overview:In this lesson, you reconstruct the home page of your personal web site using Homesite or Notepad based on the specifications and the storyboard you created in the previous lesson.

Learner Outcomes:At the completion of this exercise, you will have demonstrated your ability to:

control the horizontal alignment within the table cell tag. control the vertical alignment within the table cell tag. span columns and rows of a table with the aid of an editor's wizard. span columns and rows of a table without the aid of an editor's wizard. nest a table within a table. make elements of adjoining cells contact without gaps or borders.

Activities Code the home page to your personal web site according to your specifications and

storyboard. You must use a table to control the layout of at least the navigation buttons and the focal

image (your portrait). Use any and all of the tricks you have learned in this unit or previous units to create an

attractive home page.

o table attributes such as border, cellpadding, cellspacing, o nesting tables, o giving cells dimension and aligning vertically and horizontally, and o non-breaking space and pixel shims

Resources/Online documents: Notepad or Homesite Storyboard and specifications (from Unit 4, Module 3, Lesson 1) Web site evaluation tool created by the class in Unit 1

All done?

Assess your work using the web site evaluation tool created by the class. Use those traits which are appropriate for the task of evaluating the home page only as opposed to an entire web site.



Unit 5: Dreamweaver Introduction/Mock Web Site

Overview:There are two modules in this unit. In the first module, students observe a guided tour of the program and then do tutorials based on Dreamweaver skills. In the second module, students apply those skills by constructing a mock web sites for a fictitious company.


A1: Gather data to identify customer requirements Technical Knowledge:

Ability to identify key sources of information.Ability to identify key sources of information.Knowledge of subject matter.

Employability Skills:Ability to identify and prioritize the need for data.

A2: Research content Technical Knowledge:

Knowledge of sources of content.Ability to relate content to mission.

Employability Skills:Ability to apply creative thinking to new situations.Ability to examine task and technology relationship.Ability to select/obtain information relevant to the task and integrate

multiple items of data.

A3: Define scope of work Technical Knowledge:

Ability to identify key sources of information.Ability to assess skill sets.Ability to assess resources required for scope of work.

Employability Skills:Ability to visualize task sequentially and identify interdependencies.


Ability to design content structure.Knowledge of tools and techniques to create look and feel of an

application/site.Knowledge of site mapping and information mapping techniques.

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.



Knowledge of principles of layout and graphics.Ability to design user-friendly sites and applications.Knowledge of company requirements and standards.Ability to develop aesthetically pleasing elements.



D3: Perform application maintenance Employability Skills:

Ability to perform specified maintenance, identify problems and correct malfunctions/failures.


locate and describe basic features and functions of Dreamweaver 4.0 workspace. use the Dreamweaver program to perform the basic file functions such as open,

save, and preview in browser. apply key panels, and inspectors to a web document. demonstrate the benefits of creating a site folder and using the site functions to

maintain a web site. use site functions to plan and or organize a web site. accurately identify critical elements of the design plan the design and development with appropriate level of detail and complexity identify, prioritize and organize the tasks appropriately develop a plan with the level of detail and sophistication appropriate to purpose

and audience use Dreamweaver's features for creating and modifying tables. design a web document's layout in the layout view. discriminately use Dreamweaver's features for creating and modifying layers. use Dreamweaver's features for incorporating Flash elements and Java rollovers. create an image map using Dreamweaver 4.0

EALRs Reading

o The student understands and uses different skills and strategies. o The student understands the meaning of what is read. o The student reads different materials for a variety of purposes.




communication.

Module Titles: Module 1: Dreamweaver Tutorials Module 2: Constructing a Mock Web Site



Unit 5, Module 1:Dreamweaver Tutorials

Overview:In this module, students are introduced to Dreamweaver 4.0, the WYSIWYG (What You See is What You Get) editor. Students are first led by the instructor through Dreamweaver's own introduction to the program. Students then are asked to apply their skills and the features of the software in brief Dreamweaver lessons. In the next module, Module 2, they will then apply these same skills to their Personal Web Site.

Module 1 Lessons:Lesson 1: Instructor-Led Overview of the Dreamweaver 4.0 Program: Time for Lesson: 60

minutes

Description: o Using a projection device, the instructor leads the class through the Dreamweaver

4.0 Guided Tour, pausing when appropriate to allow student to actually do what they observe.

Learner Outcome: o The student will be able to-

locate and describe basic features and functions of Dreamweaver 4.0 workspace.

use the Dreamweaver program to perform the basic file functions such as open, save, and preview in browser.

apply key panels, and inspectors to a web document. demonstrate the benefits of creating a site folder and using the

site functions to maintain a web site.

Activities: o Instructor briefly describes the nature of WYSIWYG editors, their relative

advantages/disadvantages to code-based editors and who in the industry might use the program under what circumstances. (see on-line resources listed below.)

o Students and instructors open the Dreamweaver 4.0 program. o Instructor guides students through the Guided Tours 1 through 5 in the Help

menu of Dreamweaver 4.0. o At appropriate intervals, instructor asks students to apply what they have

observed.

Handout/Resources Needed: o HTML Editor Roundup--an article by Matt Mickiewicz at Sitepoint.com that

explains the differences between WYSIWYG and code editors. o HTML Editors Indepth reviews of all major HTML editors. --reviews (by various

reviewers) of many popular editors on Sitepoint.com, including Dreamweaver 4.0.

o Dreamweaver 4.0 on all student and instructor work stations. o A projection device.

Suggested Assessment: Check student monitors as formative or ongoing assessment.


http://www.webmasterbase.com/articles/14





Module 2 Lesson:Lesson 2: Dreamweaver 4 Lesson: Time for Lesson: 120 minutes

Description: o Students view and practice four of the seven Dreamweaver lessons. When the

Dreamweaver lessons provide an option to "open the Practice Pages," students should do so, and apply their newly learned skills to the mock travel agency site. In the next module, students will apply these same skills to their Personal Web Site.

Learner Outcome: o The students will be able to:

create an image map using Dreamweaver 4.0 create a disjointed rollover using Dreamweaver 4.0 insert tabular data using Dreamweaver 4.0 add Flash objects (buttons) using Dreamweaver 4.0

Activity: o Have students do the Applying Dreamweaver 4.0 Exercises.

Handout/Resources Needed: o Dreamweaver 4.0 o Browser

Suggested Assessment: o Check student monitors as formative or ongoing assessments to confirm that they

are able to apply the skills.



Exercise: Dreamweaver Lessons

Overview:In this lesson, you will view and practice four of the seven Dreamweaver lessons. When the Dreamweaver lessons provide an option to "open the Practice Pages," you should do so and apply newly learned skills to the mock travel agency site. In the next module, you will apply these same skills to your Personal Web Site.

Learner Outcomes: create an image map using Dreamweaver 4.0 create a disjointed rollover using Dreamweaver 4.0 insert tabular data using Dreamweaver 4.0 add Flash objects (buttons) using Dreamweaver 4.0

Activities (the following lessons are found under the Dreamweaver pull down Help menu): Lesson 1: Creating an image map Lesson 3: Creating a disjointed rollover Lesson 4: Inserting tabular data Lesson 7: Adding Flash objects

Resources/Online documents: A web site that has excellent tutorials on many of the same skills taught in the

Dreamweaver lessons and even more is Sitepoint's Dreamweaver tutorials.

All done?Show your instructor your completed work.


http://www.webmasterbase.com/tutorials/Dreamweaver/


Unit 5, Module 2:Applying Dreamweaver

Overview:Students now apply the skills they learned and practiced in Module 1 to a mock commercial web site. Students work in teams of three or four to develop a web site for their fictitious start-up company. The first lesson requires students to do some planning before constructing the mock site. Some of the planning they are asked to do is done in the site function of the Dreamweaver program. Students will also be asked questions about their fictitious company, their product and their customer. Students then construct the mock web site in the second lesson and are required to include certain elements in the web site. The third lesson draws on some of the Dreamweaver site functions again. These involve basic site maintenance.

Module 2 Lesson:Lesson 1: Planning: Time for Lesson: 60 minutes

Description: o Students use the site function in Dreamweaver as well as an ordinary pencil and a

piece of paper to plan the reconstruction of their personal web site.


use site functions to plan and or organize a web site. accurately identify critical elements of the design. plan the design and development with appropriate level of detail

and complexity. identify, prioritize and organize the tasks appropriately. develop a plan with the level of detail and sophistication

appropriate to purpose and audience.

Activities: o Form groups of three students (four when necessary). o Have students do Lesson 1: Planning the Mock Web Site (following).

Handouts/Resources Needed: o Dreamweaver Guided Tour o graph paper for drawing a web page layout o enough copies of the Market Analysis Worksheet (following) for every group o enough copies of the Storyboard Worksheet (previous) for every group

Suggested Assessment: o Review Market Analysis Worksheet to determine if groups of students have

adequately anticipated what needs the client and customer may have. Review the sketch of the home page using the student designed Web site evaluation tool (from Unit 1). Check student monitors to see if they successfully used Dreamweaver's Site functions to display the file structure of the mock company web site.



Worksheet: Market Analysis

Web Site Authors Roles: file librarian, coach, reporter1.2.3.

Company’s profile:1. Products: _________________________________________________

2. Company name: _________________________________________________

3. URL: _________________________________________________

4. Client’s mission (purpose for having a web site):

_________________________________________________

_________________________________________________

_________________________________________________

5. Draw a sketch of the company logo:

Customer profile:

1. Browser: What percent of your anticipated viewers have fairly new browser versions (IE3 and more recent or Netscape Gold and more recent)?

2. What accommodations will you make for those with the following technical handicaps:

low resolution settings - ______________________________________________

__________________________________________________________________

older browsers - ____________________________________________________

__________________________________________________________________

different platform - __________________________________________________

max. download time on 14.4, 28.8, or 56.6 modem (circle one): ____ per seconds



3. Predominant Gender: ____ % male, ____% female

4. Age (Check all ranges that apply):

12 and under

13 – 18

19 – 29

30 – 59

60 – older

5. Place an X on the income level continuum at the point that typifies the average customer who would use this site.

A B C

A=Customers that may or may not have computers in the home let alone an internet connection, no disposable income, only willing to buy if it is a necessity and a bargain

B=Customers with modem connections (possibly high speed connections), possibly more than one computer, can afford to buy the products but only after comparison shopping

C=Customers with fast speed connections, likely more than one computer, can afford to buy the products even on impulse

6. Which career paths might the target consumers most likely be categorized as? Check as many as apply.

Health and human services

Science and technology

Arts and communication

Education and social services

Business and marketing

7. How would you characterize the level of education of the target consumers? Check as many as apply.

Attending high school

High school graduate

Received vocational or technical certification

B.A. or B.S.

Masters degree

PhD

8. What other types of web sites would also interest the target consumers (consider, hobbies, sports, organizations)?

9. What expectations will they have before they arrive at your site?

10. What types of gimmicks (give-a-ways, games, galleries, etc) would attract this person?

11. List the meta tags that would most likely attract the target consumer (include at least a dozen).



Exercise: Planning the Mock Web Site

Overview:Eventually, your group will be developing a web site for a fictitious company. Care must be taken to make the look of the home page as authentic (real) as possible, but all other dependent pages in the site can be blanks or dummy pages. The company may sell paperclips, baskets or whatever you wish to sell (as long as it is legal in all 50 states). Or, your company may be service-oriented and do repairs, cleaning, consulting, etc. In this lesson, your group will work through some planning activities. The first stage involves getting to know the nature of your company, the product or service you market, and something about your client. The second activity is to sketch the look of your first page or home page. Finally, you use Dreamweaver to set up the file structure for your site.

Challenge:To develop a working plan for a web site that will effectively market your company's service or product.


use site functions to plan and or organize a web site. accurately identify critical elements of the design. plan the design and development with appropriate level of detail and complexity. identify, prioritize and organize the tasks appropriately. develop a plan with the level of detail and sophistication appropriate to purpose and

audience.

Activities: Assign roles to each member of the group:

o coach: keeps the group on task and ensures that deadlines are met o reporter: collects completed work and ensures that the completed product is

suitable for submission o file librarian: maintains the original files on the public drive and serves as a

clearinghouse for any file revisions

Have your group come to consensus concerning the nature of your company. Print or get a copy from your instructor of the worksheet: Market Analysis.

Sketch the Home page to your site and include these items: o navigation buttons (Use the Flash buttons available in Dreamweaver 4.0 and

include a java rollover effect.) o focal graphic that is befitting of your company's image (Incorporate

Dreamweaver Layers on the graphic) o a logo (Make the logo an image map so that portions of it link to pages on your

site) o contact information o a mission statement (a brief statement that projects your company's unique image

and will leave a favorable impression upon customers/clients)

Also, print, fill out, and hand in the storyboard worksheet (the same one you did in Unit 4).



Set up a folder on the public drive in which all group members have write permission.

You must now set up the file structure for your Mock Web Site from Dreamweaver's Site Window. You may want to refresh your memory of how to define a site in Dreamweaver by viewing the directions in the "Planning" section of the Dreamweaver Guided Tour for using Site functions. Along with the home page, create all dependent pages. The dependent pages are all the pages that are linked directly from the home page. Content is not a concern for dependent pages. It is, however, worthwhile to learn how to create pages from within the Site Window because it is a very visual way to plan your web site's structure. Another reason for creating the dependent files is that once you get to lesson three you'll need to have multiple files in order to do site maintenance. What follows are directions for setting a web site's structure once you are in the Site Window:

o Right click in the Local Folder view. Click New File. Name the file index.html. Right click on index.html and click on the option to "Set as Home Page". Now the file index.html has been designated as the site's home page.

o Create your dependent files in the same fashion except don't set them as home pages. Call them whatever makes sense to you, but be sure to include the html extension on the file name.

o If it is not yet in view, make the Site Map visible by clicking on the icon in the top left corner of the Site Window.

o Select the file icon for the file named index.html>Click on the little compass icon that appears just to the right of the file icon and drag the arrow to touch a dependent file in the Local Folder view.

o Follow the same process to link all the dependent pages to the homepage.

Resources/Online Documents: Dreamweaver's Guided Tour

Wrap up:Submit the completed Market Analysis and the sketch of the home page for review. Show your instructor the Dreamweaver Site Window with the visual display of your company's file structure.



Module 2 Lesson:Lesson 2: Construction: Length of Lesson: 120 minutes

Description: o Groups of students construct the mock Web site for a fictitious company in

Dreamweaver's layout view. They are expected to include certain required elements on their page so that they can demonstrate their competency using Dreamweaver.

Learner Outcome: o The students will be able to:

use Dreamweaver's features for creating and modifying tables. design a web document's layout in the layout view. discriminately use Dreamweaver's features for creating and

modifying layers. use Dreamweaver's features for incorporating Flash elements and

Java rollovers. create an image map using Dreamweaver 4.0

Activity: o Have students do Lesson 2: Construction of the Mock Web Site (following).

Handout/Resources Needed: o Dreamweaver Lessons o Browser

Suggested Assessment: o Apply the evaluation tool created by the class in Unit 1 to the Mock Web Sites

created by groups of students.



Exercise: Construction of the Mock Web Site

Overview:In this lesson, your group develops the web site for your fictitious company. Remember, care must be taken to make the look of the home page as authentic (real) as possible, but you are not required to construct any other pages than the home page. Rather than being a set of step-by-step directions, this lesson lets you know what elements must be included on the homepage of your company web site. One stipulation you must follow as you develop your company's home page is that you initially layout your page using Dreamweaver's Layout View.

Challenge:To lay out the home page for your company according to your plan developed in the previous lesson using Dreamweaver's Layout View and include all the required elements.


use Dreamweaver's features for creating and modifying tables. design a web document's layout in the layout view. discriminately use Dreamweaver's features for creating and modifying layers. use Dreamweaver's features for incorporating Flash elements and Java rollovers. create an image map using Dreamweaver 4.0

Required Elements for the Mock Web Site: Use the Layout View in Dreamweaver 4.0 to start the layout of your home page. For a

review of Dreamweaver's Layout View, select "Designing Web pages" from the main menu of the Guided Tour.

navigation buttons (use the Flash buttons available in Dreamweaver 4.0 and include a java rollover effect.)

focal graphic that is befitting of your company's image (incorporate Dreamweaver Layers on the graphic)

a logo (make the logo an image map so that portions of it link to pages on your site) contact information a mission statement (a brief statement that projects your company's unique image and

will leave a favorable impression upon customers/clients)


Wrap up: Carefully review the home page to your mock site using the evaluation tool the class

created in Unit 1. Put the finishing touches to the page and begin lesson 3.



Module 2 Lesson:Lesson 3: Site Management: Time for Lesson: 60 minutes

Description: o Student practice using some of the management features packaged in the

Dreamweaver program, which can be powerful time savers.


demonstrate the benefits of creating a site folder and using the site functions to maintain a Web site.

run a report and make changes which address the findings in the report

do an extended find and replace of text or code throughout the local site

check or change links sitewide rearrange the site structure from either the Site Map or site Files

View use Dreamweaver to test page performance on different

browsers.

Activities: o Have students do Lesson 3: Web Site Management Using Dreamweaver

(following).

Handout/Resources Needed: o Dreamweaver Guided Tour o Browser

Suggested Assessment: o Review the student web sites with a printed version of the following checklist.



Exercise: Web Site Management Using Dreamweaver

Overview:Some of the functions from within Dreamweaver's Site view can make the Web developer’s life a little easier. You can create pages in Dreamweaver without defining (Dreamweaver jargon for "setting up") a site; however, there are some pretty powerful functions that you can't take advantage of unless you define a site. In this lesson, you will explore some of those site functions that can make maintaining a Web site much easier. Since you have been working in groups in the past two lessons, continue to do so in this lesson. Coach, make sure that all group members become trained in using the Site window to perform Web site maintenance.

Challenge:To make the task of Web site maintenance less time-consuming.



run a report and make changes which address the findings in the report. do an extended find and replace of text or code throughout the local site. check or change links sitewide. rearrange the site structure from either the Site Map or site Files View. use Dreamweaver to test page performance on different browsers.

Preparation Activities: To begin with, save a copy of this file, problem_file.html, into the folder containing the

rest of your files for the mock site. From the map view in the Site window, select the home page and establish a link to

problem_file.html.

Find and Replace: The Find and Replace function allows you to make wholesale changes to your entire Web

site with one command. In the following example, you will change the background color and text color for all the files in your personal web site by doing a find and replace command for the entire site. The Find and Replace command will find the body tags of all your files in the site and simultaneously replace them with a new body tag that has different values for background and text color.

1. While in the map view, select all the files except the home page. 2. Go to one of your dependent files and copy (Ctrl + C) the entire <body> tag, attributes

and all. 3. In the Site window, go to Edit>Find and Replace. Enter the following information:

o In the "Search For" menu, select "Source Code", and then left click in the text box to the right and paste (Ctrl +V) the body tag.

o In the "Find In" menu, select "Entire Local Site". o Left click in the "Replace With" box and enter the replacement body tag-- <body

bgcolor="#ccccff" text ="#ff0000">. o Click on "Replace All". o Open one of your dependent files to view the changes.

Running Reports:



Reports can help you locate unnecessary and omitted tags as well as assist with communication when a site is being developed by more than one person.

In the Site window, go to Site>Reports. Check the following reports and click on "Run". o Missing Alt Text o Untitled Documents

Resolve any problems that are reported. Sometimes reports pop under windows, so you may have to uncover the reports by minimizing other windows.

Checking Links Sitewide:This function can be very helpful for spotting broken links: either the internal links (links from one page of your Web site to another within your site) or external links.

In the Site window, go to Site>Check Links Sitewide. Specify in the drop down menu that you want to-- Show: "Broken Links". Click on the file to open the file and correct the problem.

Follow the same procedure, but this time specify--Show: "External Links". Correct any problem links you encounter.

Checking Site Performance on Different Browser Version:It can be a costly mistake not to preview your Web site on a variety of browsers before publication, especially if you or your client is concerned about making your page look as good as possible to as many people as possible. There are people that surf the net using the older browsers, and it is important to see your page just as they would.

In the Site Window, go to File>Check Target Browser. Select an old browser version such as Microsoft Internet Explorer 3.0. Click on the "Check" button. You will get a report that lists the files in the site. For each file, there is a list of errors designated by the line number on which the error was encountered. Some of the code we use may not be supported by the older browsers; for instance, you probably received a message associated with the problem_file.html that reads, "Unsupported value for the TYPE attribute of the STYLE tag. Microsoft Internet Explorer 3.0" . The reason is that this file uses cascading styles, which is something that wasn't yet on the scene when Internet Explorer 3.0 was released.


Wrap up:Be ready for your instructor to review your site to receive credit for completion. Have the Site Window open for your instructor to review. Preview the checklist your instructor will use to determine if you have successfully completed the tasks.



Assessment Checklist

Desired Learner Outcome

How to Assess


Informally ask groups, "In what ways could Dreamweaver make Web site maintenance easier?"

run a report and make changes which address the findings in the report

From the group's Site Window, click on View>Show Page Titles. The file "problem_file.html" should not be untitled.

do an extended find and replace of text or code throughout the local site

All files except the home page should have a light blue background & red font.

check or change links sitewide

Open "problem_file.html". Go to File>Check Links. Check broken & external links. All links should work.

rearrange the site structure from either the Site Map or site Files View

From the group's site window, you should be able to see that "problem_file.html" is included in the site structure.

use Dreamweaver to test page performance on different browsers.

Ask students informally, "What was a problem you encountered when you checked your site in IE3?



Unit 6: Culminating Project(s)

Overview:This unit is the culminating project (or projects) of the Web Design and Development course.


A1: Gather data to identify customer requirements Technical Knowledge:

Ability to identify key sources of information.Ability to identify key sources of information.Knowledge of subject matter.

Employability Skills:Ability to identify and prioritize the need for data.

A2: Research content Technical Knowledge:

Knowledge of sources of content.Ability to relate content to mission.

Employability Skills:Ability to apply creative thinking to new situations.Ability to examine task and technology relationship.Ability to select/obtain information relevant to the task and integrate

multiple items of data.

A3: Define scope of work Technical Knowledge:

Ability to identify key sources of information.Ability to assess skill sets.Ability to assess resources required for scope of work.

Employability Skills:Ability to visualize task sequentially and identify interdependencies.


Ability to design content structure.Knowledge of tools and techniques to create look and feel of an

application/site.Knowledge of site mapping and information mapping techniques.

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.



Knowledge of principles of layout and graphics.Ability to design user-friendly sites and applications.Knowledge of company requirements and standards.Ability to develop aesthetically pleasing elements.



D3: Perform application maintenance Employability Skills:

Ability to perform specified maintenance, identify problems and correct malfunctions/failures.

Learner Outcomes:Learner outcomes of this unit should correspond with the outcomes for the entire course.

Students will meet with clients. Plan and organize a site. Create and/or incorporate existing content in many different software

applications and hardware devices.

EALRs: Reading

o The student understands and uses different skills and strategies. o The student understands the meaning of what is read. o The student reads different materials for a variety of purposes.


communication.

Module Titles: Module 1: Culminating Project



Unit 6, Module 1:Culminating Project

Overview:Students combine their skills to create a working web site for a local school-based, non-profit or commercial organization. Either individually or as a group, they will follow the same steps and stages as for the mock web site project in Unit 5, but this time, the final product is intended to be published on the Internet.

Module 1 Lesson:Lesson 1: Instructor-introduced segment of the course.

Description: o This "real-world" project is the culmination of all the skills that the students have

acquired over the course of the semester.

Learner Outcome: o This is the capstone project of the course and combines all outcomes of the

previous units.

Activities: o Instructor should begin by having students link to the lesson document for the

Culminating Project (following). o Explain the parameters and timeline involved. o Emphasize common pitfalls such as lack of client contact, insufficient time

organization, etc. o Emphasize that they should treat every aspect of this part of the course as if they

were working for a paying client.

Suggested Assessment: o The site rollout can be done with the instructor and group alone, or with the

entire class, depending on many factors. It is suggested that you use the class website evaluation rubric developed in Unit 1, but you may choose to use a mixture of self evaluation, peer evaluation and instructor evaluation.



Assignment: Culminating Web Design Projects

Overview:At this point, you are to combine your skills to create a working web site for a local school-based, non-profit or commercial organization. Either individually or as a group, you will follow the same steps and stages that you did for the mock web site project in Unit 5, but this time, realizing that the final product is intended to be published on the Internet.

Challenge:To combine what you have learned in the preceding units on web site planning, design, and creation. To use all the skills and tools at your disposal to accomplish the creation of a site for a "real" client (site mapping, HTML coding, WYSIWYG programs, image manipulation, etc.).

Activities: Remember to keep written or electronic records of all work done on the project,

especially in the planning and organizational steps. Find a school organization, local non-profit, or small commercial establishment that does

not have a web presence or would like a complete remake of an existing site (no minor adjustment projects please). An initial contact with the client should determine that there is a need and whether it would be manageable for this project. o Additional concerns for the initial client contact:

Clearly state that the client that would not be obligated to accept and post the final site product if it is not exactly what they wanted/needed.

Clarify the scope of the site creation and that after initial bugs are worked out, updating other site management and hosting issues would be the client's responsibility.

Thank them for their time and let them know how you will be contacting them (by email, appointment, phone?) for the site planning interview.

Decide whether you want to work in a group or individually on this project. Be realistic about time constraints and individual strengths and weaknesses with the different aspects of the projects. If working as a group, assign clear roles to each member of the group. They may be Photoshop expert, client contact, project manager, etc. Roles must be relatively equivalent and flexible.

After determining the site proposal, have team write up a one-paragraph proposal clearly outlining the organization, main client contact, team members and proposed team roles.

Present your written proposal to the instructor for a signature approval. Beginning with the client interview, clarify the purpose, audience and specific

requirements for this site (this communication may be done with email if meeting face-to-face is problematic).

Remember to set up a folder on the public drive in which all group members have write permission.

Remember to check all restrictions concerning copyright issues, school and organization policies (most have clear web publishing policy statements available).

Document your daily work clearly in your biweekly reports. Continue frequent client contact, informing them of changes and allowing for feedback at

different stages of the site creation. Plan for a "roll-out" during class when the project is ready to post on the Internet.

o The rollout must include: presentation of the site to the instructor



presentation of documentation to the instructor o The rollout may also include:

involvement by the client presentation of the site to the class

Assessment:The culminating project will be assessed using the class-generated rubric. There may be an aspect of self and peer evaluation of the final product.



Appendix



Syllabus: Web Design & Development 1 & 22002-03 School Year

High School Name: Bellingham High School (instructor Karll Rusch)Sehome High School (instructor Don Helling)Squalicum High School (instructor Joe McAuliffe)

Course Title: Web Design & Development 1 & 2Length of Course: 2-semester sequenceCourse Hours: each semester = 90 hrs/ .5 creditYear Course Taught: 2002/03Prerequisite: Tech Connections

The goals of the Web Design and Development curriculum are to provide a platform to help students learn:

Communication skills using web publish applications. Collaborative team work skills using a project-based approach. Application of analysis and problem-solving skills. Professional software as used in workplace applications. Ethical behavior and professionalism as applied in the workplace.

Web Design & Development 1: Students will learn about the foundation of Web Design and Development as a communication tool. Students will design, develop and maintain Web pages.

Students will learn:Design and Planning Basics

Site maps and storyboarding Web site evaluation and rubric creation Color theory Web Design usability

HTML Basics Basic Tags Text Formatting Image Tags Link Tags List Tags Table Tags Source Codes

Preparing Images How to select images Hot to move images How to combine images Adjusting images How to acquire images Create Special effects

Controlling Page Layout and Tables Control alignment within cell tag Expanding Nesting Joining cells without seams



Introduction to WYSIWYG (What You See Is What You Get) editors and creating a mock site. Learn basic features of Dreamweaver Use site functions to develop and maintain a Web site Planning a site with client needs in mind Learn to use Layout view Create and modify layers Incorporate Flash elements and Java rollovers Create an image map

Web Design & Development 2: Students will continue to build in the skills learned in Web Design and Development 1. Students will focus building their technical skills in the context of building increasingly more sophisticated Web sites. Students will apply knowledge and skills required developing Web sites for clients.

Students will learn:Advanced images for the Web

Buttons Rollovers Animated GIF Layer effects

Cascading Style Sheets Internal & external style sheets Using CSF to control layout

Forms Radio Buttons Submit 7 Reset Single line Paragraph

Page creation using the slicing techniques Frames

Animation using Flash Make a basic animation and apply to a Web page

Incorporating JavaScript applications to a Web page Research, find, and modify a basic slideshow and apply to a Web page

College Tech Prep Designation: Skagit Valley CollegeCollege Course Title: Creating Web pagesCourse Code Number: MIT 149Credit/Hour equivalent: 5 credit

Proficiency Standard:Junior or Senior students who demonstrate proficiency of the identified SVC course competencies (skill standards) with a ‘B’ or better grade may earn college credit through the College Tech Prep application process. Students must successfully complete both semester high school Web classes for credit. To gain college credit, students must complete all the competencies listed for each course (B grade level). The Competency Profile for each college course is attached to this syllabus. During the semester most of the competencies will be covered in the classes listed above. Some students may require additional independent work.

Course Competencies: Understand and use topics listed above in capstone projects assigned by instructor. Also see course competencies attached.



IT Web Design Pathway for the Bellingham School District

Suggested pathway for Web Design & Development:

Most students will complete these courses in the following order

Semester 1 Web Design 1 Introductory level course

Semester 2 Web Design 2 Advanced skills & projects

Semester 3 + Web Design Advanced Highly individualized project-based course (may contain a community internship component)

Thirteenth Year Articulation with Skagit Valley Community College

Opportunity for students to move smoothly from the high school course to SVCC’s web design program

Suggested additional coursework:

Year/Semester Technology-based classes Academic classesSuggested prior or concurrent with Web Design 1

Technology Connections* (required introductory course for general use of information technology. Includes an introduction to web design basics and is generally a prerequisite for Web Design One.)

Art (introductory course)

English (with speech component)

Suggested prior or concurrent with Web Design 2

Basic programming Computer-based drafting/design

Technical WritingArt / Computer-based graphic design

Suggested prior to or concurrent with Web Design Advanced

This course is generally set up as a highly individualized pathway in either web design/graphics or web development/coding. Advanced courses in either area are recommended as well as continued communication coursework.



Web Design 2: Advanced Design and Development:Preliminary Tutorials

SLICING GRAPHICS

Rational: In some work situations, web designers work with designers who create the look of the web site using imaging software. The web designer must take this image and create html code through the use of tables. The way to do this is to use software that does all of that for you, such as Image Ready found in PhotoShop.

Challenge: Create an image for slicing in PhotoShop. The image should have a title, some text, images, and buttons that can be used as links.

Step 1:Start Image Ready and open the image to be sliced. Drag guidelines to layout how you want to slice up the image. Make sure the Snap to Guidelines and Snap to Slices is set. You will find it in the View drop down menu.

Step 2: Select the Slice tool. Drag a slice box around the Title. It should snap to the guidelines. To adjust the Slice box, put the cursor over the Slice tool until the sub menu appears.

Select the Slice Select tool. You can now adjust the dimensions of the slice box. Continue slicing the image until every portion of the image has a slice. Each slice is numbered.

Tip: There are two types of slices. You can create slices in white or empty areas. Create them as you would any slice and select No Image in the Type drop down menu in the Slice Window. No Image slices contain either just a color or HTML

Step 3: With the image sliced, you can now assign a link, a target, a text message, and an Alt tag to each individual slice.



When you select each slice, you can specify an image format and compression scheme for that slice. Use either .gif or .jpg format, but keep the compression settings the same. Optimize each slice separately.

Step 4: Save your work once you have it the way you want it. Choose File-Save Optimized as.... The Save Optimized dialog box opens. Change to the folder where you'd like to place the graphics and the HTML. Give the HTML file a name and click OK.

Note: Make sure that you have Save HTML File and Same Images checked. This will write your HTML file and save the slices as graphics.

Rollovers using ImageReady 3.0

Step 1:Open PhotoShop and pick the image you created for the slicing assignment. Make sure the assignment is a PSD file. We will use the text layers that we created for links.

Next, open ImageReady, which is the bottom icom on the toolbar

Note: We sliced the images earlier in the slicing assignment, so we can skip those steps which would usually occur at this point.

Step 2:We are going to change the color of the text by creating rollovers in ImageReady. Select the layer with the text that you want to create the rollover, and then click on roll-over on the animation bar.

From the animation bar, select the new button to create an over state for the roll-over.

Note: You must have the correct layer selected when you click on the rollover toolbar and pick new.



Step 3:Next, we will change the color of the text. Make sure you have the over-state for the rollover selected then click on the text layer that you want to change.

Right click on the text layer, choose layer style and then click on color overlay. PhotoShop by default creates the color overlay red. To change the color just click on the color you would like from the layer option menu.

Continue these steps to create all of your rollovers and then save using the File_Save Optimized As command in ImageReady.