Click here for the document download.Web
Upcoming SlideShare
Loading in...5
×
 

Click here for the document download.Web

on

  • 2,724 views

 

Statistics

Views

Total Views
2,724
Views on SlideShare
2,724
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Click here for the document download.Web Click here for the document download.Web Document Transcript

  • Information Technology Industry Skill Standards High School Curriculum for Web Design and Development Note to Users: This curriculum was designed as an "on-line" instructional tool. Students access the full curriculum and related resources via the web. The instructors who designed the curriculum teach at different high schools but use the same curriculum. The web site is "live" and updated regularly as students and teachers use the various curriculum resources. You can access the complete curriculum by visiting the Bellingham School District's web site at: http://www.bham.wednet.edu Click on the Technology link; then click on Web Design. The CD-Rom included with this package contains a copy of the website and all related lesson activities that were being used at the time this guide was printed (January 2003).
  • Web Design and Development Document Information For more information, or to order curriculum materials, please contact: Linda Cowan, Consortium Director Laurie Stephan, Curriculum Program Coordinator Whatcom County School-to-Work/ Northwest Workforce Center for Emerging Tech Prep Consortium Technologies (NWCET) Office Location: Office Location: Bellingham Technical College Bellevue Community College 3028 Lindbergh Ave. 3000 Landerholm Circle, SE, N258 Bellingham, WA 98225 Bellevue, WA 98007-6484 Phone: (360) 738-3105, x-409 Phone: (425) 564-4215 Fax: (360) 676-2798 Fax: (425) 564-6193 Email: lcowan@btc.ctc.edu Email: nwinfo@bcc.ctc.edu Web: www.nwcet.org Permission to Photocopy and Quote Copyright © 2002 General permission is granted to educators to photocopy limited material from prepared curriculum for non-commercial instructional or scholarly use. Permission must be sought from School-To-Work Consortium in order to charge for photocopies, to quote material in advertising, or to reprint substantial portions of the document in other publications. Credit should always be given to the source of the photocopies or quotes by citing a complete reference. Funding for this Project This curriculum guide was designed and developed using Industry Skill Standards grant funds made available through Washington State School-to-Work Transitions, Federal Implementation Grant Project (School-to-Work Opportunities Act of 1994). Funds distributed through Office of Superintendent for Public Instruction - Department of Career and Technical Education. Disclaimer The curriculum content and opinions expressed herein are those of the authors (teachers) and do not reflect those of NWCET or OSPI - Career and Technical Education. Document Credits Linda Cowan Project Coordination & Grant Funding Laurie Stephan Curriculum Facilitator (NWCET) Susan Parker Technical Assistance (Bellingham Technical College) Scott Wilmot Cover Design (Wilmot Graphics)
  • Web Design and Development Acknowledgements The following Whatcom County teachers designed and developed three Information Technology program curriculum guides: Web Design & Development Curriculum Team Don Helling, Sehome High School - Bellingham School District teaches English and web design courses Joe McAuliffe, Squalicum High School - Bellingham School District teaches English, SAIL program and web design courses Karll Rusch, Bellingham High School - Bellingham School District teaches Tech Connections, technology education & web design courses PC Hardware Fundamentals Curriculum Team Steve Andres, Ferndale High School - Ferndale School District teaches web design, video production & computer hardware courses Bruce Woodcock, Lynden High School - Lynden School District teaches math and computer hardware courses Lee Falta, Bellingham Technical College teaches computer networking technology courses Greg Rehm, Bellingham Technical College teaches computer networking technology courses Video Production Curriculum Team Chris Carlson, Squalicum High School - Bellingham School District teaches video production and technology education courses Jim Nelson, Blaine High School - Blaine School District teaches video/broadcast television production and technology education courses The project participants would like to thank our local IT business partners for providing the teachers with guidance and project support, workplace tours, job shadow opportunities, summer internship experiences and classroom visitations as guest speakers. Bellingham/Whatcom Technology Alliance Group (TAG), John Gargett, President Dealer Information Systems Bob Brim, CEO Rivetek Robin Halliday, CEO Think-a-Tron Media Labs John Mortensen, President Mindfly Gary Pickering, President FiberCloud Milissa Miller, Manager Port of Bellingham John Molder, IT Manager Tim Cool, LAN/WAN Specialist KVOS TV/Studio 12 Roger Vater, Technical Director Attachmate Corporation Kevin Boxx, IT Manager VisionQuake/Baron and Company Gerald Baron, CEO Jim Hassi, President - VisionQuake ConocoPhillips Ferndale Refinery Vicki Whittlesey, IT Manager James Carrell, Technical Supervisor SPIE Brian Thomas, Technology Development Manager Haggen, Inc. Ron Burke, IT Manager Alpha Technologies Jim Dettman, IT Manager Solera Group Lori Aswegan, Director of Business Development
  • Web Design and Development Videosmith Productions Lars Kongshaug, President InterConnect Systems Curtis Dye, President City of Bellingham/IT Services Department James Baird, Telecommunications Administrator DigiPen Institute of Technology Jason Chu, COO The Whatcom County School-to-Work/Tech Prep Consortium gratefully acknowledges the technical guidance and financial support of the following project partners and sponsors: OSPI - Department of Career and Technical Education Kyra Kester, Assistant to Superintendent for Industry Partnerships Cindy Agnew, Pathway Supervisor - Information Technology Education Northwest Workforce Center for Emerging Technologies (NWCET) Peter Saflund, Associate Director Laurie Stephan, Curriculum Program Coordinator
  • Web Design and Development Project Introduction For the past three years, the Whatcom County School-to-Work/Tech Prep Consortium has spent a great deal of time and money helping our local high school partners develop a variety of Information Technology-related courses. We have found the implementation process to be a challenge. Most of our schools are faced with limited financial resources to purchase the necessary hardware and specialized IT equipment, and limited access to teachers who possess the requisite skills and certifications necessary to teach IT-related courses. We discovered many IT teachers are "self- taught" with no industry experience or certifications related to IT program skills and competencies. Many rely on a "canned curriculum" package/textbook to establish program structure and course content. As a Consortium we were fortunate to receive a special IT Industry Skill Standards grant made available through Washington State School-to-Work Transitions funding. The grant project was intended to help some of our schools begin building strong IT courses linked to our career pathway model, grounded in current industry standards and providing real-world learning opportunities for students. The curriculum foundation would be linked to the industry skill standards for Information Technology careers as developed by the Northwest Workforce Center for Emerging Technologies (NWCET) located on the campus of Bellevue Community College. We also required teachers to align the curriculum with the appropriate Washington State EALRs (Essential Academic Learning Requirements). Our first challenge was to bring together a group of local high school and college instructors who would be willing to work together for over a year on the development of this curriculum project! A call went out to all 13 of our Consortium school partners asking for project volunteers. Nine teachers expressed an interest. As it turned out, the seven high school and two college instructors represented three IT career cluster areas which ended up forming the nucleus of this project: Web Development and Administration: Web Design Digital Media: Video Production Technical Support: PC Hardware Fundamentals Each curriculum team was comprised of instructors from different Whatcom County schools. The task for each team was to design a "vendor neutral," one semester (two if possible), industry skill standards-based curriculum appropriate for high school students. A primary goal of the project was to make sure that all teacher participants have a variety of opportunities to work with local IT business partners to help develop their IT workplace skills and expertise and to attend training workshops to prepare for industry certifications. To support this goal, we provided teachers opportunities to work with local IT professionals in "advisory" meetings, industry tours, site visits, job shadows and summer internships. Teachers involved in this project were compensated for their individual curriculum development time, provided with classroom substitutes for various workshops, given an equipment/resources budget to help expand their program, and provided with paid summer internships at various worksites across the county. We hope you will find the curriculum useful as you begin to develop IT programs for your school(s). As this is being written, the teachers involved in this project are "piloting" the curriculum in their classrooms. Revisions will be made as new ideas emerge and old lessons discarded. If you have questions about any of the curriculum components, please feel free to contact the teachers involved in the project. They would be happy to share ideas about how they have revised the various lessons and added new ideas. The curriculum we produced is only intended to be a starting place…an outline of ideas that you can shape to suit the needs of your students and school community.
  • Table of Contents Curriculum Introduction...............................................................................................................8 Introduction to Web Design and Development...........................................................................11 Unit 1: Design and Planning Basics.......................................................................................................14 Unit 1, Module 1A: Day One - Introduction.............................................................................................................17 Unit 1, Module 1: Basic Site Evaluation and Rubric Creation...............................................................................25 Unit 1, Module 2: Color Theory and Web Design Usability..................................................................................32 Unit 1, Module 3: Initial Storyboarding and Site Mapping....................................................................................38 Unit 2: HTML Basics...............................................................................................................................42 Unit 2, Module 1: Basic Tags................................................................................................................................44 Unit 2, Module 2: Text Formatting Tags...............................................................................................................50 Unit 2, Module 3: Image Tags...............................................................................................................................56 Unit 2, Module 4: Link Tags..................................................................................................................................71 Unit 2, Module 5: List Tags...................................................................................................................................79 Unit 2, Module 6: Table Tags................................................................................................................................85 Unit 2, Module 7: Source (Cut & Paste)................................................................................................................94 Unit 3: Preparing Images........................................................................................................................96 Unit 3, Module 1: Photoshop Tutorials..................................................................................................................98 Unit 3, Module 2: Applying Photoshop ..............................................................................................................102 Unit 4: Intermediate HTML or Controlling Page Layout with Tables.................................................108 Unit 4, Module 1: Controlling Alignment within the Cell Tag ...........................................................................110
  • Unit 4, Module 2: Spanning and Nesting Tables .................................................................................................112 Unit 4, Module 3: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout........121 Unit 5: Dreamweaver Introduction/Mock Web Site..............................................................................126 Unit 5, Module 1: Dreamweaver Tutorials...........................................................................................................129 Unit 5, Module 2: Applying Dreamweaver..........................................................................................................132 Unit 6: Culminating Project(s)..............................................................................................................143 Unit 6, Module 1: Culminating Project................................................................................................................145 Syllabus: Web Design & Development 1 & 2............................................................................149 Web Design 2: Advanced Design and Development: Preliminary Tutorials..............................................................................................................152
  • Web Design and Development Curriculum Introduction Web Development and Design One: A Curriculum Based on IT Skill Standards This document represents the work accomplished developing a beginning level course in web design for the secondary school student, grades 9-12. Our Bellingham School District team consisted of web design teachers Joe McAuliffe of Squalicum High School, Karll Rusch of Bellingham High School, and Don Helling of Sehome High School. The course structure is grounded in the principles of both the industry skill standards of the National Workforce Center for Emerging Technologies (NWCET) and Washington State's Essential Academic Learning Requirements (EALRs). The curriculum was shaped as well by essential hands-on experience in the workplace, and discussions with members of Whatcom County's information technology community. The high school web design course in the Bellingham Public Schools was initiated at Squalicum High School in 1998 and became a collaborative effort at the three schools beginning in the fall of 2000. Last spring we were fortunate to be accepted in the Whatcom Tech Prep Consortium's (WTPC) Industry Skills Standards/IT Career Pathway project. This project was funded by Washington State's School-to-Work Transition grant through the Office of Superintendent of Public Instruction (OSPI). The grant fund paid for staff development, site visits, internships with business, curriculum design and helped us purchase needed equipment. We came together with strong computer skills but relatively limited experience teaching web design, as well as varied teaching backgrounds in general (English, Technology, Alternative Ed., etc.). It was clear from the beginning that this curriculum template would be a work in progress. The curriculum would necessarily change with the unknown factors that always seem to crop up when dealing with technology education, and the three of us would follow the overall structure but tailor the curriculum to our individual teaching strengths. This is the way we expect other teachers to use this document. We hope that the units contained in this document will help you develop your own web design courses based on your individual needs and resources. We agreed from the start (1) that this would be a project-based curriculum, (2) that it would be relatively cross-platform -- not linked to a specific software manufacturer or computer, and (3) that it would include "real-world" soft skill elements while teaching the basics of designing and creating web pages. (Although we intend this curriculum to be valid using either Mac or Windows operating system, we were limited to the use of a Windows-based network when developing and teaching these units). The summer of 2001 gave us the opportunity to participate in one-week internships in the local IT community. Joe and Don worked with Mindfly, a local web design firm. Gary Pickering, Rusty Swayne and David Ladiges offered us personal hands-on instruction in professional web development. They offered us a close-up view of how important "soft skills" are in the workplace. The constant communication between employees, as well as with clients, reinforced our focus on the need for these to be included in our project-based curriculum. The actual projects centered on the use of current database techniques, which will be the next step in our course development for Web Design 2, the second course in the web design pathway. Karll spent a week with a local similar web design firm, focusing on using Photoshop for web graphics. In addition to this opportunity, we were visited by, and were able to visit, representatives of other local businesses. Some of these companies were technology-based (such as FiberCloud, a state of the art data center that hosts a number of web sites and company information databases), while some were companies with a web presence (the Port of Bellingham, for instance). These visits Whatcom County School-To-Work/Tech Prep Consortium 8
  • Web Design and Development continued to reinforce the aspects of the course that we had deemed most important. The message we heard over and over, was that communication, organization and other soft skills were as important, if not more important, than knowing how to use the technology. In addition to the general questions, there were a few specific questions that were answered for us in the internships and community workplace visits. The most important was where we should place our web page creation emphasis: WYSIWYG programs (such as Adobe's GoLive or Macromedia's DreamWeaver) or text-based coding. The consensus is that you need some of both. The reality in smaller web design firms was that most used a combination of programs such as the Macromedia product HomeSite (basic coding) and DreamWeaver (WYSIWYG). Most employers felt that a basic understanding of HTML code in a simple text-editor was important to understand what underlies WYSIWYG editing and in order to work on problems that go beyond the scope of these programs. Our curriculum is divided into six units, but please note that they should not necessarily be approached in a consecutive manner. For instance, Unit 2 outlines basic HTML coding, and should probably be done along with Unit 1, which covers basic design principles. We leave this up to the individual instructor's judgment and time constraints. Additional resources the three of us have used to supplement and reinforce our curriculum include guest speakers from the local IT community and visits to local IT businesses. These visits fit nicely with the pathway focus of our curriculum as well as serving to introduce students to the real world of the IT workplace and related employment opportunities. The specific links between this curriculum and the NWCET's industry skill as well as Washington State OSPI's EALRs should be clear in the curriculum unit and module overviews. As it relates to these two documents, our focus in this course was on improving communication skills as well as mastering technical skills. We would like to thank Linda Cowan, Laurie Stephan, and all of our classmates and business partners for the help they gave us developing this curriculum. As this is a "work-in-progress" we would welcome feedback and suggestions for any aspect of this curriculum. Please contact any or all of us at the following email addresses: Dhelling@bham.wednet.edu Sehome High School Krusch@bham.wednet.edu Bellingham High School Jmcaulif@bham.wednet.edu Squalicum High School We sincerely hope that this curriculum will be useful for those serious about implementing a web design curriculum based on workplace skill standards and practices. General permission is granted to educators to download and/or photocopy material from this curriculum for non- commercial instructional or scholarly use. Permission must be sought from Linda Cowan in order to charge for photocopies, to quote material in advertising, or to reprint substantial portions of this document in other publications. Credit should always be given to the source of the photocopies or quotes by citing a complete reference. Don Helling Linda Cowan, Director Joe McAuliffe Whatcom County Tech Prep Consortium Karll Rusch 3028 Lindbergh Ave. Bellingham, WA 98225 360-738-0221 lcowan@btc.ctc.edu Whatcom County School-To-Work/Tech Prep Consortium 9
  • Web Design and Development SAMPLE JOB Web You will play a vital role in your company’s TITLES presence on the world wide web. You may use web page development software to create or change web Develop Web Administrator pages, inserting text content, graphics and interactive modules that are often supplied by others in your organizational team. Before you start, you Web Architect ment will probably talk to the many stakeholders in your company who depend on the organization’s web presence. You’ll also look Web Designer and at successful models and research software tools to help design the look, feel and navigation. In some organizations you may be Web Page Developer responsible for making sure the web pages and updates get installed and work with the hardware associated with the web pages. Producer Web Web Site Developer Web Specialist Webmaster Whatcom County School-To-Work/Tech Prep Consortium 10
  • Web Design and Development Introduction to Web Design and Development Course Description: This class is an introduction to the design, creation, and maintenance of web pages and web sites. Students learn how to work with images, and to properly create, link and maintain web pages. The course projects progress from introductory work on web design software to the capstone projects that demonstrate mastery of the NWCET skill standards for information technology. Course Objectives:  Students will gain the skills and project-based experience needed for entry into web design and development careers.  Students will be able to create web pages and web sites using a variety of strategies and tools (industry standard software and hardware). Textbook/Web Resource Recommendations: Texts regularly used by students as supplements to the course material: HTML For the World Wide Web, Elizabeth Castro, ISBN# 0-201-35493-4 Creating Web Pages with HTML Simplified 2nd Edition, ISBN# 0-7645-6067-0 Teach Yourself Visually HTML, ISBN# 0-7645-3423-8 Texts used less frequently but helpful for advanced students: Web Design Studio Secrets, ISBN# 0-7645-3455-6 Designing Web Graphics.3, Lynda Weinman, ISBN# 1-56205-949-1 Master Visually HTML4 and XHTML 1, ISBN# 0-7645-3454-8 A few of the many web sites used as resources in the class:  Builder.com  Webmasterbase.com  Yale Web Style Guide  Web Page Design for Designers  CoolHomePages.com  PageResource.com  Colormatters.com  WebDesign at About.com (+web design tips)  Design Tips, Tutorials and Tricks (175+ links)  WebMonkey Hardware/Software Recommendations: This course was designed using the Microsoft Windows operating system. These are the basic hardware and software configurations that we have used to create our web design labs. We recognize that there are many different possible ways to effectively outfit a lab in order to teach a similar course. In addition to the below software suite, we are currently experimenting with "virtual tour" photo software, as well as Illustrator, and the 3D modeling software Rhino as they apply to web design and development. Whatcom County School-To-Work/Tech Prep Consortium 11
  • Web Design and Development Operating System:  Windows 98/2000 or later Hardware:  Individual computers o Minimum 64 Mb of RAM -- preferably greater (128 - 256) o 166 MHz processor -- preferably greater o Color monitor -- 17-19 inch, minimum 800 x 600 resolution, 256 color o CD ROM drive Lab Hardware:  One or more of the following o Flatbed scanner -- (a good stand alone frees up a computer station) o Digital camera o Zip drive o CD Burner  One of the following: o Video projector o Networked server with access to shared drives and internet access, preferably at T1 or greater Software:  Installed on Individual Computers o Notepad or equivalent text editor o Macromedia Dreamweaver 3.0 or later o Adobe Photoshop 5.5 or later o Macromedia Homesite 4.5 or later o Microsoft Internet Explorer browser (latest version) o Netscape browser (latest version) o Suite of software that includes document, email and presentation software (Microsoft Office) Lab Software: o One or more copies of optical scanning software (Omnipage or similar) o Limited copies of Macromedia Flash, Adobe Illustrator, Rhino, etc. o Software for downloading and storing digital camera images Unit Titles: The units of this course are presented as separate discrete sequential steps in the process. This may be a bit deceiving, because as with any curriculum, when put into practice there will be overlapping and modification between units to suit the individual instructor and class (intro skill level, size of class and general temperament).  Unit 1: Design Basics  Unit 2: HTML Basics  Unit 3: Preparing Images  Unit 4: Advanced HTML (Tables)  Unit 5: Dreamweaver Introduction Whatcom County School-To-Work/Tech Prep Consortium 12
  • Web Design and Development  Unit 6: Capstone Projects Whatcom County School-To-Work/Tech Prep Consortium 13
  • Web Design and Development Unit 1: Design and Planning Basics Overview: This unit will give students a basic understanding of the beginning design principles that apply to general web design and development. It will also help them establish criteria for evaluating websites (their own as well as general sites on the Internet), and introduce them to the site- planning concepts of developing a site plan and storyboarding. Portions of this unit can be done away from the computers if necessary. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: A1: Gather Data to Identify Customer Requirements  Technical Knowledge: Knowledge of customer interview techniques regarding requirements. Ability to identify key sources of information.  Employability Skills: Ability to identify and prioritize the need for data. Ability to pose critical questions. Ability to encourage cooperation. A7: Create and define preliminary design/mockup  Technical Knowledge: Knowledge of mockup development options and methodologies. Ability to translate functional features into application/site design.  Employability Skills: Ability to generate/evaluate solutions and devise/implement plan of action. Ability to demonstrate creative thinking while problem-solving. A10: Develop project plan  Technical Knowledge: Knowledge of functional and technical specifications, all data models, site maps, assumptions, constraints and risks.  Employability Skills: Ability to analyze organization of information. Ability to work with minimal supervision and pay attention to detail. Ability to assess individual knowledge/skills and analyze work assignments. B1: Develop site map and application models  Technical Knowledge: Ability to design content structure. Knowledge of site mapping and information mapping techniques. Knowledge of graphical user interface design. Whatcom County School-To-Work/Tech Prep Consortium 14
  • Web Design and Development  Employability Skills: Ability to analyze organization of information and transfer information between formats. Ability to demonstrate creative thinking process while problem-solving and apply creative solutions to new situations. B3: Produce graphic and layout elements  Technical Knowledge: Ability to design user-friendly sites and applications. Knowledge of company requirements and standards. Ability to develop aesthetically pleasing elements.  Employability Skills: Ability to create original documents and synthesize information. Ability to follow policies and procedures and work with minimal supervision. Ability to interpret and clarify communication. Ability to prioritize daily tasks and monitor adjust task sequence. Learner Outcomes/Objectives: The student will be able to:  Analyze web pages for audience, purpose, message.  Create a rubric to evaluate the effectiveness of web sites.  Design a simple site using storyboarding and site mapping techniques.  Understand basic color theory and optimal design theory for usability.  Incorporate color theory and optimal design theory in a model web site. EALRs:  Reading: o The student reads different materials for a variety of purposes.  Writing: o The student writes in a variety of forms for different audiences and purposes. o The student writes clearly and effectively. o The student analyzes and evaluates the effectiveness of written work.  Communication: o The student communicates ideas clearly and effectively. o The student uses communication strategies and skills to work effectively with others. o The student analyzes and evaluates the effectiveness of formal and informal communication. Module Titles: Note: As students work through the modules and lessons in Unit 1, some of the exercises may be applied to the Personal Web site.  Module 1A: Day One Class Preparation  Module 1: Website Evaluation and Rubric Creation  Module 2: Color Theory and Web Design Usability Whatcom County School-To-Work/Tech Prep Consortium 15
  • Web Design and Development  Module 3: Initial Storyboarding and Site Mapping Whatcom County School-To-Work/Tech Prep Consortium 16
  • Web Design and Development Unit 1, Module 1A: Day One - Introduction Overview: This is not a separate module, but a day set aside prior to beginning the activities of Module 1 for introducing the course and outlining the curriculum, class rules and expectations. Module 1A Lesson: Lesson 1: Introduction to the course: Length of Lesson: 50 - 60 minutes  Description: o Most teachers have specific introductory activities that they like to (or are required to) incorporate into the first day or two of any class. On day one--or prior to the start of Module 1--for this course, the teacher will want to cover some of the following aspects of the course as they apply to a particular school and lab. It is also helpful to have students complete a short survey of technology skills to help with planning for the first activities Here are some discussion points to cover: a) Ethical elements of computer use in this course b) Potential job paths (web master, web designer, web developer, etc.) c) Rules and consequences d) Grading criteria (sample), as well as incremental checks on capstone projects e) Syllabus f) Documentation/recordkeeping/email management, which includes electronic portfolio, hard copy file folder, and backup of all work on Student and Resource drives. This includes an explanation of biweekly report forms (sample follows) that students fill out-- essentially a journal of daily activities done at the end of each class session. Next, you may want to give a short written survey of the students' web design skills and background to help you decide on initial activities and to decide on team orientation for early projects, as well as set the pace and overall goals of the course.  Learner Outcome: o At the end of this lesson, students will fully understand the scope of the class as well as the basic rules, policies, and expectations.  Activity: o You may want to develop a short quiz covering ethics, rules and policies that students must pass and sign in order to use the classroom computers. These can be kept on file to help hold students accountable for responsible behavior in the lab. Whatcom County School-To-Work/Tech Prep Consortium 17
  • Web Design and Development  Resources Needed: o Survey form, as well as written syllabus and list of pertinent district and classroom rules.  Suggested Assessment: o The quiz outlined above, or a thorough class discussion covering important aspects of computer ethics, class rules and policies. Whatcom County School-To-Work/Tech Prep Consortium 18
  • Web Design and Development Sample Day One Survey Form Basic Information and Survey of Web Design Skills The following is a non-scientific survey intended to tell me something about your aptitudes and skills that relate to designing web pages as part of a team. Please answer honestly. How you respond to these questions will not determine your grade. It will, I'm hoping, give me some information that may help us figure out how you can best contribute to the work we do as a group. Circle the best response to each question. Complete this form and email it to me as a Word attachment. You may add additional information about your computer skills at the end of this survey. Name: Parents/guardian name: Home phone #: Birthday: Favorite school subject: Briefly describe your post-high school plans: Briefly define your goals and expectations for this course. For those in Web Design 1, complete the following: (delete all but the appropriate response) 1) My background designing web pages is best described by the following statement: a. I create web pages not only for myself but for others (either for profit or as a pastime) b. I have created a page(s) for myself on my own time c. I have created pages as a school project d. I have never created a web page 2) My experience with Microsoft Windows is best characterized by the following statement: a. I am very familiar with the Windows operating system. b. I'm somewhat familiar with Windows operating system. c. I haven't used a computer with Windows operating system. 3) To what extent have you already located web design resources (i.e. tutorials, sites with collections of graphics, icons or animated gifs)? a. Yes, I have an extensive and up-to-date collection. b. If I need something I can easily find it on the web. c. I know what you're talking about but would need to search around. d. I'm not sure what you're talking about. 4) Which statement best characterizes your skills associated with web page design? a. I can make a web page from scratch using html code and a text editor (for example Notepad) and have experience with using a web page editing program (for example Dreamweaver). b. I can make a web page from scratch using html code and a text editor, but have no experience using a web page editing program. Whatcom County School-To-Work/Tech Prep Consortium 19
  • Web Design and Development c. I can create a web page but I'd have to rely on a web editor. d. I use the Internet (the web), but I've never learned to create a web page. e. When I hear words such as "internet" and "web" I'm curious but not sure what they are. 5) When you take one of those standardized tests on a bubble sheet that requires identifying errors in sentences, your score is generally… a. high b. average c. Identifying errors is not one of the things I do well. 6) When you get an essay back from a teacher, which of the following statements describes the paper’s condition: a. few if any corrections concerning my grammar, punctuation and spelling, b. 2-5 corrections concerning grammar, punctuation and spelling on each page, c. The ink from correction marks washes my pages like a sea of blood. 7) How good are you at proofreading your own writing and that of other writers? a. I'm good at finding errors and can even spot them in the newspaper. b. When I proofread others work I can usually only find the glaring errors. c. I wouldn't recognize a run-on sentence if it bit me in the nose I didn't even notice this one. 8) Which statement best describes your aptitude when it comes to aesthetic matters of art and design? a. I have a good sense of which colors, textures, lines and shapes work well together, and can tell you exactly why things do or don't work together. b. I have a pretty good sense of design but have difficulty explaining why things do or don't work together. c. I've never been too concerned with making things look nice. 9) How well do you perform in art courses? a. I receive high marks b. I receive average marks c. Art is not one of my better subjects 10) Which statement best characterizes your attitude toward order and consistency? a. My bedroom is meticulously maintained. Every item has a place and a purpose. b. Once in a while I clean up my room, but I'm not really bothered by clutter c. An orderly room is not something I value. 11) Which statement best characterizes you? a. I'm comfortable assisting others with their work even if they haven't requested my help. b. I'm comfortable assisting others only after they have requested my help. c. I'd rather not assist others with their work 12) When working in-groups I like to… a. I feel very comfortable speaking and like to take an active role. b. I'm reluctant to speak out but want to participate. c. I'd prefer someone tells me what to do and I'll do it. Whatcom County School-To-Work/Tech Prep Consortium 20
  • Web Design and Development 13) I would describe myself as… a. very organized and I rarely lose things. b. generally organized but tend to misplace things occasionally. c. disorganized and lose things frequently. 14) My experience with computer data systems is best characterized by the following statement: a. I can create directories and know the programs associated with common file extensions. b. I haven't any experience with computer data systems. Additional information that might be helpful to the instructor: Whatcom County School-To-Work/Tech Prep Consortium 21
  • Web Design and Development Handout: Grading Criteria for Web Design Required Daily Assignments: 20% of grade This is primarily made up of the tutorial work and daily assignments that we complete in class early in the semester. Bi-weekly Reports: 10% of grade Bi-weekly reports provide me with important feedback as to whether or not you are mastering the course content. There should be an entry for each day we meet. The entries should be written in concise but detailed language. The report is due every other Friday. Use email. You are responsible for setting aside time to write. Web Site Projects: 50% of grade The greatest factor affecting your grade will be the web sites you produce. We will collectively develop the evaluation tool used to evaluate the web sites you create; however, there is no easy formula for assigning credit, since some projects may involve very sophisticated features. I will rely on self evaluation, peer evaluation, and my own evaluation Group Participation: 20% of grade Attendance/tardiness Cooperation with classmates No off-task computer use Whatcom County School-To-Work/Tech Prep Consortium 22
  • Web Design and Development Handout: Biweekly Report Form Name: Biweekly Journal – Online The biweekly journal entry should be filled out at the end of each working class period. Fill in the blanks with a detailed report of your activity on each day. For full credit, you need to include specific skills and programs that you used that day, as well as specific projects. A short paragraph is usually sufficient for full credit. Please include absences (school-related/excused/unexcused). On the due dates below, print out and put the completed Journal report in your folder. Date Activities, projects, programs used, etc. Grade (Instructor will fill in) Comments (Instructor will fill in) Due dates of Bi-weekly reports: 1. Feb. 11th to March 1st 2. March 4th to March 15th 3. March 18th to March 29th 4. April 1st to April 19th 5. April 22nd to May 3rd 6. May 6th to May 17th 7. May 20th to May 31st Whatcom County School-To-Work/Tech Prep Consortium 23
  • Web Design and Development Assignment: Personal Web Page The purpose of this assignment is to create a personal website as we build our HTML coding skills in Unit 2 of Web Design and Development. Using the HTML skills that we learn in Unit 2 and the design ideas from our initial projects in Unit 1, you are to create a personal web page to your own specifications. You are free to express yourself as you wish so long as you do not violate district policy. You will be required to provide documentation illustrating each of the following steps in the design process: Purpose Statement-a brief word-processed document clearly defining your objectives (what you wish to accomplish) for creating the web page and the audience you intend to reach. (10pts) Project Plan-this should include a hardcopy of your site map (outline) and your storyboard (sketch). The site map will list the page names and content in outline form. The storyboard will illustrate the page layout and site organization, including links and image locations. (10pts) HTML Code-the page itself must meet the following requirements: (using notepad text editor) minimum of 4 pages with working internal links to and from home page  Include a color scheme with a background color or image  Include 2 tables one that includes external links, one that includes text and images.  Include images appropriate size for page  Thumbnail links to larger images if appropriate  Captions/descriptions if necessary  Include links to related sites  Meet your specified objectives  Utilize proper file organization  Use proper spelling and grammar (10pts ea.) Peer Evaluations-Evaluate 4 peer web pages. Include 4 evaluations received from your peers in your portfolio (using the class-designed rubric). Peer evaluations will be performed in class. (10pts) Redesign-Consider peer evaluation comments and feedback in redesigning your web page. This is your chance to work out all the quirks! You will turn in a portfolio containing the required documentation and present your web page to the instructor at the end of this unit. You must be able to show how each HTML Code requirement is met in order to receive credit for it, so make sure your page is working well before you present it! Whatcom County School-To-Work/Tech Prep Consortium 24
  • Web Design and Development Unit 1, Module 1: Basic Site Evaluation and Rubric Creation Overview: These two lessons give students a basic understanding of the principles behind effective web site design and implementation. Module 1 Lesson: Lesson 1: Surveying the Possibilities: Time for Lesson: 60 - 90 minutes  Description: o Before we start creating web pages of our own, we need to decide for ourselves what makes a "good" web site. This lesson opens up the discussion of design principles and how they relate to the relevant rhetorical strategies of purpose, audience and message, as well as technical issues and limitations.  Learner Outcomes: o At the end of this lesson, students will have a basic understanding of the elements and principles of "good" web site design and construction. They will begin to understand that this evaluative term changes in relation to audience, purpose and message.  Activity: o Look over the “Surveying the Possibilities” assignment sheet (following) and have students begin. As students finish the assignment, have them share what they have found. Prompt students to look at different aspects of web site evaluation if necessary.  Things to consider: o You may want to have a few sites stored on CD-ROM or a central file server in case the connection to the Internet is down. o This assignment may be done in small groups if computer access is limited. o It is important that the students come up with the criteria themselves for this initial lesson. Later, they can compare their criteria with other students as well as with industry standards.  Resources Needed: o Internet access.  Suggested Assessment: o Discussion following the assignment. o This assignment may be graded separately from the module. Whatcom County School-To-Work/Tech Prep Consortium 25
  • Web Design and Development Assignment: Surveying the Possibilities The purpose of this assignment is to begin considering what makes a quality web site. Examine the advice given at this site to start developing useful terminology for critiquing web sites. Learning space site : School HomePage Building Blocks Criteria used by others: Bill Hurd, Manager Encyclopedia Britannica Wall Data corporation 1. visual complexity 1. depth, accuracy, completeness, & utility 2. amount of information 2. quality & effectiveness of presentation 3. flow 3. credentials of the author 4. theme 4. elegance of design & ease of navigation 5. accessibility to other areas 5. frequency of revision 6. usage 6. quality of graphics or multi media 7. bandwidth issues 8. browser support 9. backend data publication  Visit as many high school web sites as possible (and a few commercial web sites) while keeping detailed notes about what you observe.  Rate each site from 1 to 5 (5 being the highest).  Comment on the site’s design. Does the site look good? What is the eye drawn to immediately?  Comment on the site’s content. What seems to be the main purpose of the site? Is the purpose clear?  Comment on the site’s noteworthy features. How do the features enhance the site’s main purpose? Whatcom County School-To-Work/Tech Prep Consortium 26
  • Web Design and Development Create a table for your notes which looks something like this: School/Co. URL Rating Design Content Features 1 2 3 4 5 6 +  Look at schools in our district, state and around the world. Focus mainly on high schools, but elementary school, middle school, and district pages may also be good models.  Record as many excellent examples as you are able to find (at least two) and two horrible examples.  Visit at least two commercial sites and record one good example and one bad example. List of Bellingham School http://www.bham.wednet.edu/schools.htm District schools Washington state registry of schools on the World Wide http://web66.coled.umn.edu/schools/US/Washington.html Web International registry of schools on the World Wide http://web66.coled.umn.edu/schools.html Web. Whatcom County School-To-Work/Tech Prep Consortium 27
  • Web Design and Development Module 1 Lesson: Lesson 2: Developing a Web Site Evaluation Tool -- Part I: Time for Lesson: 60 - 90 minutes  Description: o We have had a discussion about principles of "good" web design, and made some basic decisions concerning what we feel makes a web site effective. Using this information, students will now construct a web site evaluation rubric and defend it in a short presentation to the class.  Learner Outcomes: o At the end of this lesson, students will have constructed a preliminary web site evaluation tool, and presented it to the class.  Activity: o Give the students an overview of the assignment and a timeline for completion of the presentation. This project is best done in small groups, possibly formed from the previous lesson.  Handout/Resources Needed: o Presentation software (PowerPoint).  Suggested Assessment: o Assess presentations and resulting discussion. Whatcom County School-To-Work/Tech Prep Consortium 28
  • Web Design and Development Exercise: Developing a Web Site Evaluation Tool The purpose of this assignment is to challenge, test and ultimately come to general agreement on evaluation criteria for web sites. This exercise is student-driven, although the teacher may need to jump in and help if the need arises. The Final Product:  Will be a PowerPoint presentation between 8 to 11 slides.  Will have one introductory slide with credits for tasks performed by each member of the group.  Will have one slide that displays the evaluation rubric in table form, including 4-7 main traits.  Will have a numeric scale to assess level of mastery, and descriptors that define major point values on the numeric scale.  Will have a rational that explains the importance of each trait (4-7 slides).  Will have a completely scored evaluation rubric of the web site www.cheese.com/.  Will have a slide detailing traits in which there was agreement and traits in which there was disagreement explaining why. Process:  Pair up and take five minutes to share and discuss the merits and problems of two sites each from lesson one's activity. One site should be a clear example of good design and one an example of poor design. Discuss specific traits that could be used to evaluate sites.  On a piece of notebook paper, write down the URL's for the four sites (two for each person) with positive and negative traits and turn it in to the instructor.  Join another pair and now in a group of four, review your lists of traits that were generated in step one. Synthesize the list to no fewer than four but no more than seven general traits that could be used to evaluate almost any web site. As much as possible, make each trait discrete and clear. Combine similar traits. Eliminate redundant, obtuse, or invalid traits.  Once you reach consensus on the traits, decide on a numeric scale for judging how well a web site fares for each of the traits.  Brainstorm a list of descriptors that define major point values on the numeric scale. If you get stuck, here is a list of descriptors that may help (following).  Now that you have all the components for the evaluation rubric, sketch the complete evaluation rubric with a marker on butcher paper, or using a table in Word or similar program on the computer.  Each person in your group will now individually use this evaluation rubric to evaluate the following site: www.cheese.com. It is important that you evaluate the site without collaboration or discussion  After all members have had enough time to evaluate, compare how your group members scored www.cheese.com with each major trait.  If someone in the group rated a trait radically different from the rest, ask them to explain.  Develop and present your PowerPoint presentation following the guidelines above. Present your powerpoint to the class. Whatcom County School-To-Work/Tech Prep Consortium 29
  • Web Design and Development Handout: Sample Descriptors for Web Evaluation Some Possible Comments for Explanation of Score: Point to specific details of site in your explanation. Navigation: Specific links missing or not working properly Links difficult to find on page or inconsistent Navigation bar consistent and easy to use Graphics/Design: No pleasing graphical elements Inconsistent color or design within site "Square" internet graphics Color scheme repeated and consistent within site Effective use of animation Access/Speed: Graphics not streamlined for low bandwidth access Formatted for IE or Netscape only No options for low bandwidth access Options for low bandwidth or high bandwidth access Streamlined for access with low bandwidth access Currency: Information obviously out of date (be specific) Some outdated links or information but not so that it detracts from the site Nothing out of date/ structured so that currency isn't an issue (N/A is okay for Not "Applicable") Relevant Content: Pointless unorganized information Connection between content and purpose of site not clear. Have to leave site for some relevant information Content clearly connected with purpose of site. Whatcom County School-To-Work/Tech Prep Consortium 30
  • Web Design and Development Module 1 Lesson: Lesson 3: Developing a Web Site Evaluation Tool -- part II: Time for Lesson: 60 - 90 minutes  Description: o Now that the class has carefully examined possible student generated rubrics, it's time to create and test a rubric that may be used to evaluate all student web sites for the remainder of the course. It is best if this is a student-generated document using the traits and descriptors that they presented in lesson two, but the final decision may need guidance to avoid redundant traits, or big holes in evaluation categories.  Learner Outcomes: o Students will have critically examined and evaluated self-designed rubrics and created a web page evaluation tool. They will have reinforced design principles necessary for creating effective web pages later in the course.  Activity: o On the white board, projection system or overhead, create a table and have the class hammer out the details of traits and descriptors to be used in this class web site evaluation tool.  Handout/Resources Needed: o Internet access.  Suggested Assessment: o Have the students end the lesson by testing the rubric against a series of previously chosen sites, and evaluating the rubric for any necessary revision. Whatcom County School-To-Work/Tech Prep Consortium 31
  • Web Design and Development Unit 1, Module 2: Color Theory and Web Design Usability Overview: These two lessons teach and reinforce basic color and design principles in order to help students build effective web sites. *Teachers Note: The final product in both lessons in this module is an addition to the "Personal Web Page." This is usually begun in unit 2 and done concurrently with the design principles of Unit 1. But if you have not begun coding the personal pages yet, you can easily change the final product to be sketches (in Lesson 1) or a word processed document (Lesson 2). Module 2 Lesson: Lesson 1: Color Theory in Web Design: Time for Lesson: 60 - 90 minutes  Description: o Students are now ready to explore the use of color theory in web design. This lesson should be done following the "Personal Web Page" created in Unit Two.  Learner Outcome: o At the end of this lesson, students will recognize terminology, principles and elements of the effective use of color in web page design. Students will also create examples of using specific color schemes in web page layout.  Activity: o Begin by having students open the link to the Lesson 2-1 assignment page in unit 1 (following). o They will then view the online slide presentation on Color Theory in Web Design (Lesson 2-1a (on disk)). o Individually, using markers and other color art supplies, students will design full color rough sketches on paper of two web sites, modeling them after the example sites and basing them on two of the following four color schemes: • Monogamous • Complimentary • Triadic • Analogous o Using what they know of HTML coding for background colors, text colors and images, they will create two pages following the color scheme sketches as closely as possible. The pages should be labeled with the color scheme you were using, but otherwise, the subject matter is up to you. Link these pages to the personal page you began in Unit 2. (This may involve basic Photoshop use for those that have been introduced to the program. Searching the web for images can be time consuming, therefore, you may want to save a number of monochromatic images in a folder for them to use for this assignment).  Resources Needed: Whatcom County School-To-Work/Tech Prep Consortium 32
  • Web Design and Development o Internet access. o Images for page creation. o Color markers and paper for color theory page storyboards.  Suggested Assessment: o Discussion following the assignment. o This assignment may be assessed separately from the module as one aspect of the personal page, or the storyboard sketches may be evaluated separately. Whatcom County School-To-Work/Tech Prep Consortium 33
  • Web Design and Development Assignment: Color Theory in Web Design Overview: The purpose of this assignment is to gain a general understanding of the concepts of color use in effective web design. Activities: View the online slide presentation on Color Theory in Web Design. Using markers and other color art supplies, design full color rough sketches on paper of two web sites, modeling them after the example sites and basing them on two of the following four color schemes:  Monogamous  Complimentary  Triadic  Analogous When finished sketching the two page designs, have them checked by the instructor. Now, using what you know of HTML coding for background colors, text colors and images, create two pages following your design schemes as closely as possible. The pages should be labeled with the color scheme you were using, but otherwise, the subject matter is up to you. Link these pages to the personal page you began in Unit 2. Resources/Online documents: Experiment with color combinations at this interactive web site: Mundi Design Studios Color Theory at About.com. Explore the web site Color, Contrast & Dimension in News Design ...although this site focuses on print news media, it is very useful to help understand the effects and uses of color theory in design. All done? Show your instructor your completed pages attached as links to your personal page. Visuals: Color Theory Slide Show (on disk) Whatcom County School-To-Work/Tech Prep Consortium 34
  • Web Design and Development Module 2 Lesson: Lesson 2: Basic Design Concepts in Building Effective Web Pages: Length of Lesson: 60 - 90 minutes.  Description: o This lesson helps students understand some of the particular aspects of page layout design that help to make a web page effective. The activities in this lesson reinforce the aspects of "good" web page design that were explored in module one, while focusing on the specific skills and tricks that help a page achieve effectiveness in the areas of the rubric exercise.  Learner Outcomes: o Students will recognize basic elements of effective page layout design (reinforcing and building on the activities in Lesson 1-1-3). They will find examples of effective (and ineffective) page layout.  Activities: o Have students open the link to the Lesson 2-2 assignment page in unit 1 (following). In this lesson, they will browse a list of CNET's web design tips, paying special attention to design, layout and navigation tips, including the following: • Above the fold design • Multiple navigation options • Narrow column type • Avoid scrolling text • Locate logos consistently o Students will choose three tips for effective page design from this site that they understand and agree with and return to the school sites that we explored in lesson one. Find at least three sites that either effectively follow one or more of your three tips, or sites that run afoul of the principles you chose. Try to cover all three design tips. Students then create a simple text-based web page describing the three sites they found and include the following: • Student name and a title. • The name and a short description of each of the three design tips. • For each site: the name (linked to the site) and a one- paragraph description of how this site either effectively follows one of your design tips, or is ineffective because it does not follow the tip. • Students should try to follow as many of the design tips as possible when designing their own pages. • Finally, they will link this to the main page of your personal site begun in Unit 2. *Teachers Note: You may teach this lesson without the web page construction component by simply having them create a word processing document with the same information. Whatcom County School-To-Work/Tech Prep Consortium 35
  • Web Design and Development o If students have extra time, they may take a look at these other site design resources for more examples of good and poor design: • Thoughts on Web Design • Sites That Bite • CoolHomePages.com *Teachers Note: CoolHomePages is an excellent example site, but it changes examples periodically. You may want to preview the current lineup before sending your students to it for examples.  Handout/Resources Needed: o Internet connection o Text resources on web design (ex: Great Web Architecture)  Suggested Assessment: o Students may share their findings in small groups and come together for full class discussion on their findings. The instructor may evaluate the web page product separately or as a component of the personal page. If done on paper, the instructor may collect it and assess separately. Whatcom County School-To-Work/Tech Prep Consortium 36
  • Web Design and Development Assignment: Page Design Elements Overview: This lesson will help you better understand some of the basic elements of effective page layout design principles. Activities: Browse this list of CNET’s web design tips at http://builder.cnet.com/webbuilding/pages/Graphics/CTips/ss06.html. Scroll down to part two and pay special attention to design, layout and navigation tips, including the following:  Above the fold design  Multiple navigation options  Narrow column type  Avoid scrolling text  Locate logos consistently Choose three tips for effective page design from this site that you agree with and return to the school sites that we explored in lesson one. Find at least three sites that either effectively follow one or more of your three tips, or sites that run afoul of the principles you chose. Try to cover all three design tips. List of Bellingham School District schools http://www.bham.wednet.edu/schools.htm Washington state registry of schools on the World Wide Web http://web66.coled.umn.edu/schools/US/Washington.html International registry of schools on the World Wide Web. http://web66.coled.umn.edu/schools.html Create a simple text-based web page describing the three sites you found and include the following:  Your name and a title.  The name and a short description of each of the three design tips. For each site: the name (linked to the site) and a one-paragraph description of how this site either effectively follows one of your design tips, or is ineffective because it does not follow the tip. In your page design, try to follow as many of your own design tips as you can. Finally, link this to the main page of your personal site begun in Unit 2. Resources/Online documents: Feel free to use the textbook library for this exercise. If you have time, take a look at these other site design resources for more examples of good and poor design:  Thoughts on Web Design  Sites That Bite  CoolHomePages.com Whatcom County School-To-Work/Tech Prep Consortium 37
  • Web Design and Development All done? Show your instructor your completed page connected as a link off of your personal page. Unit 1, Module 3: Initial Storyboarding and Site Mapping Overview: The purpose of this module is to practice the planning aspects needed to create a quality web site. Students have visited and critiqued web sites and studied the basics of color theory and design basics. Now we will use this knowledge to create a mock site plan and series of storyboards as if we were creating a web site for a client. Module 3 Lesson: Lesson 1: Storyboards and Site Maps: Time for Lesson: 60 - 90 minutes  Description: o None.  Learner Outcomes: o At the end of this lesson, students will have a basic understanding of the elements and principles of "good" web site design and construction. They will begin to understand that this evaluative term changes in relation to audience, purpose and message.  Activities: o Students team up in groups of 2 or 3 and are asked to design a simple web site for Premier Coffee Mugs, a small shop specializing in selling handmade coffee mugs, whose owner has decided to take an initial (small) step towards selling her mugs on the Internet. Your client would like a static information-based web site (no online ordering for now) and would like the site to be made up of one main page and 3-5 subsidiary pages. o The teams begin by developing and printing out a one page initial mock interview consisting of 5 - 8 questions ( because our client is hypothetical for this assignment, include the interview answers as well...remember that this client does not know a lot about the internet). These questions should help determine purpose, audience, scope, as well as artistic style issues. Here is a sample students may use as a model (following). The next step for the team is to create a short written purpose statement and site map. Next teams create storyboards for the pages using color and text. o Finally, they fill out a hypothetical list of team duties that would need to be done (collecting images, creating text content, coding the pages, etc.). Students then share their project plans with another team and compare strategies and approaches. You may move to full class discussion following this step. Teams are to turn in a completed packet to the instructor including: • interview questions and answers • purpose statement (paragraph describing the task and your general approach) Whatcom County School-To-Work/Tech Prep Consortium 38
  • Web Design and Development • one page site map • multipage storyboard w/visual layout and heading text • team duty list  Resources Needed: o Internet access  Suggested Assessment: o Discussion following the team work. o Grade packet of planning paperwork turned in to team. Whatcom County School-To-Work/Tech Prep Consortium 39
  • Web Design and Development Initial Planning Interview Questions: Suggested questions to plan for your initial interview 1. What is the mission or purpose of your company 2. What are your short and long-term goals for your website? 3. Who are the intended audiences for your website? 4. Why will people come to your site the very first time? What will make them want to come back? 5. What content will make up your website? Qualify each item listed (Why should it be included?) 6. What functional requirements are needed on the site? (ex. Forms, transactions, searches) 7. What are the updating needs for the site? Who will do the updating? Whatcom County School-To-Work/Tech Prep Consortium 40
  • Web Design and Development Assignments: Storyboards and Site Maps Overview: The purpose of this assignment is to practice the planning aspects needed to create a quality web site. You have visited and critiqued web sites and studied the basics of color theory and usability. Now we will use this knowledge to create a mock site plan and series of storyboards as if we were creating a web site for a client. Activities: Your team of 2 or 3 students has been asked to design a simple web site for Premier Coffee Mugs, a small shop specializing in selling handmade coffee mugs, whose owner has decided to take an initial (small) step towards selling her mugs on the Internet. Your client would like a static information-based web site (no online ordering for now) and would like the site to be made up of one main page and 3-5 subsidiary pages. Use your imagination and creativity as well as your sense of appealing to the right audience for the client's main purpose. 1. Your team should begin by developing and printing out a one-page initial mock interview consisting of 5 - 8 questions ( because our client is hypothetical for this assignment, include the interview answers as well...remember that this client does not know a lot about the Internet). These questions should help determine purpose, audience, scope, as well as artistic style issues. Here is a sample you may use as a model. 2. The next step for your team is create a short written purpose statement clarifying what your team's task and approach will be. Then decide on a site structure and map out the relationship between pages on a single sheet of paper. This is typically called a site map. It should include written descriptors of features on each page as well as clear descriptions of the relationships between pages. What will the hierarchy of the pages be? Will they follow a linear path, moving from the home page to the last page, or will there be a home page with four pages all at the next level? Do not worry about visual design characteristics at this point. Those come with the storyboarding step, coming up next. 3. Next, create visual storyboards for the pages using color and text. It is not necessary to spend too much time being neat at this point, but the design elements need to be clear and the heading text should be worked out. Content text (descriptions, etc.) may be saved for the site itself. The storyboards usually can be done with paper and pen away from the computer, but may be done using a graphics program on the computer. Avoid the use of "canned" planning programs and PowerPoint templates, as they tend to be too limiting. 4. Fill out a hypothetical list of team duties that would need to be done (collecting images, creating text content, coding the pages, etc.). Then share your project plans with another team and compare strategies and approaches. 5. Turn in a completed packet to the instructor, including:  interview questions and answers and purpose statement (paragraph describing the task and your general approach).  one-page site map multipage storyboard with visual layout and heading, and text team duty list. Whatcom County School-To-Work/Tech Prep Consortium 41
  • Web Design and Development Unit 2: HTML Basics Overview: This unit gives the students the basics in HTML code. Most of this unit can be done in Notepad or a similar text editor. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: B3: Produce graphics and layout elements  Technical Knowledge: Knowledge of various graphical applications and sources of graphic images. Knowledge of principles of layout and graphics.  Employability Skills: Ability to mentally picture outcomes. Ability to judge effectiveness of graphics, animation, audio and video content B5: Write supporting code Knowledge of code development procedures. Knowledge of programming language required for application. Ability to write clear documents. Ability to manipulate technology for desired results. B7: Perform unit and integration testing Knowledge of unit testing procedures. Knowledge of error analysis and resolution process. Ability to use logic to draw conclusions. Ability to analyze possible causes/reasons. Ability to identify and correct and troubleshoot malfunctions/failures.  Employability Skills: Ability to apply rules and principles to process/procedure and use logic to draw conclusions. Learner Outcomes The student will be able to:  Analyze web pages for audience, purpose, message.  Create a rubric to evaluate the effectiveness of web sites.  Design a simple site using storyboarding and site mapping techniques.  Understand basic color theory and optimal design theory for usability.  Incorporate color theory and optimal design theory in a model web site. Whatcom County School-To-Work/Tech Prep Consortium 42
  • Web Design and Development EALRs  Reading o The student understands and uses different skills and strategies. o The student understand the meaning of what is read.  Writing o The student writes clearly and effectively. o The student writes in a variety of forms for different audiences and purposes.  Communication o The student communicates ideas clearly and effectively. Module Titles: Note: As students work through the modules and lessons in unit 1& 2, have them apply each lesson to a personal web site. This site will be assessed with the personal web site grading rubric:  Module 1: Basic tags  Module 2: Text formatting tags  Module 3: Image tags  Module 4: Link tags  Module 5: List tags  Module 6: Table tags  Module 7: Source (cut & paste) Whatcom County School-To-Work/Tech Prep Consortium 43
  • Web Design and Development Unit 2, Module 1: Basic Tags Overview These three lessons give students the basic elements that make up HTML tags, their structure, and how they are used. Module 1 Lesson: Lesson 1: Elements of Tags (attributes, values, etc.): Time for Lesson: 30 minutes  Description: o HTML is the universal mark-up language code, consisting of symbols inserted before and after text as well as before and after the filenames of graphics to be downloaded. This code allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. These symbols are called tags and are integrated into a text document.  Learner Outcome: o At the end of this lesson, you will have a basic understanding of the elements of a tag and their ordering.  Activity: o Have students do Elements of Tags (attributes, values, etc.) assignment (following). Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout) o HomeSite or NotePad o Reference Books in classroom. Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 44
  • Web Design and Development Assignment: Elements of Tags Overview: HTML is the universal mark-up language code, consisting of symbols inserted before and after text as well as before and after the filenames of graphics to be downloaded. This allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. These symbols are called tags, and are integrated into a text document. Learner Outcomes:  At the end of this lesson, you will have a basic understanding of the elements of a tag and their ordering. Activities:  Look over the Common HTML Tags sheet (Unit 2, Module 3 handout) and go over the common elements.  Things to consider: o Opening and closing tags (usually, tags travel in pairs: note the difference between the two) o Attributes: Many tags have attributes that offer a variety of options for the contained text. The attribute is entered between the command word and the final greater than symbol with spaces (see example below)  Location of tags/Nesting Tags o In some cases, you may want to modify your page contents with more than one tag. The order is very important. Whenever you use a closing tag, it should have the same relationship to the last unclosed opening tag. (see example below) <A> <B> </B> </A>  Values: Attributes often have values (the following are examples of values for attributes o Align = Left, Center, Right (where left, center, & right are the value for align) o Text=#color code (where the color code becomes the value) o Size = number  Open Homesite o Note the common tags o Go to the body tag and just after the y in body press the spacebar o What appeared? Handouts/Online documents:  COMMON HTML TAGS (Unit 2, Module 3 handout) Whatcom County School-To-Work/Tech Prep Consortium 45
  • Web Design and Development Module 1 Lesson: Lesson 2: Essential Tags: Time for Lesson: 40 minutes  Description: o There are some basic tags you must add to every HTML document you create. In this lesson, we will cover the essential tags found in all HTML documents.  Learner Outcome: o Students will learn the basic tags required for all HTML documents.  Activity o Have students go to Lesson 2 and do the assignment (following).  Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students’ monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 46
  • Web Design and Development Assignment: Essential Tags Overview: There are some basic tags you must add to every HTML document you create. Learner Outcomes: Students will learn the basic tags required for all HTML documents. Activities:  Example of basic HTML document structure: o Type the following in your text editor <html> <head> <title>Title of your Web page</title> </head> <body> </body> </html> You may find it easier to read if you add extra blank lines as you see in the example above. Note: Extra spaces and blank lines will be ignored when the HTML is interpreted.  Let's examine each of these tags: o <html> is typed before all the text in the document. This is the language used to create Web pages. o </html> this tag is used at the end of all the text in the document. o <head> the head provides information about the document including the title. o </head> closes the head tag and comes after the title. o <title>You must give your document a title. The title appears in the title bar of the window. o </title> closes the title tag. o <body>The body contains the contents of your document. o </body> closes the body tag. o </html> ends the document. Create a page and experiment with the tags. Whatcom County School-To-Work/Tech Prep Consortium 47
  • Web Design and Development Module 1 Lesson: Lesson 3: Comment Tags: Time for Lesson: 12 minutes  Description: o Comments are a diagnostic tool available to HTML authors. Comments remind the author or future editors why a specific tag was used. The comments appear only in the HTML document when opened with a text or HTML editor. They will be completely invisible when readers visit your site.  Learner Outcome: o To learn the importance of adding comments and use them while writing code.  Activity: o Go to the assignment on comment codes (following).  Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 48
  • Web Design and Development Assignment: Comment Tags Overview: Comments are a diagnostic tool available to HTML authors. Comments remind the author or future editors why a specific tag was used. The comments appear only in the HTML document when opened with a text or HTML editor. They will be completely invisible when readers visit your site. Learner Outcomes: To learn the importance of comments and use them while writing code. Activities: In the previous lesson, you created a basic Web page. Open that Web page and add a comment code that reminds you to add an image one week from today. Place the comment at the end of the text near the bottom of the body tag.  Type <!-- where you want to add a comment, then press the spacebar.  Type the comment, then press the spacebar and type --> to complete the comment.  The following is an example of a comment:  <!-- Add a photo of my school here --> Save all work. Whatcom County School-To-Work/Tech Prep Consortium 49
  • Web Design and Development Unit 2, Module 2: Text Formatting Tags Overview: These three lessons teach students how to change the appearance of text on Web pages. The lessons cover changing text (size, style, color, etc.), and comparing text to a text image, along with text alignment. Module 2 Lesson: Lesson 1: Changing Text (size, style, font color, etc): Time for Lesson: 45 minutes  Description: o In the first lesson, students learn various attributes that will change the appearance of the text from bold or italics to size, style and font color.  Learner Outcome: o Students will learn about attributes that will change the appearance of the text from bold or italics to size, style and font color.  Activity: o Changing Text (following)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout) o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 50
  • Web Design and Development Handout: Changing Text Overview: In this lesson, students will learn various attributes that will change the appearance of the text from bold and italics to size, style and font color. Learner Outcomes: At the end of this lesson, you will have a basic understanding of different text styles and their applications. Activities:  Bold or Italicize Text Opening and closing tags usually tags travel in pairs (note the difference between the two). It is important to understand that making text changes should serve a purpose, i.e. emphasize a certain aspect of the page. o To create Bold Text type <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>. Whatcom County School-To-Work/Tech Prep Consortium 51
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 52
  • Web Design and Development 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 Whatcom County School-To-Work/Tech Prep Consortium 53
  • Web Design and Development 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/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students’ monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 54
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 55
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 56
  • Web Design and Development 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: Opening Tag Closing Tag Attribute Description <BODY> </BODY> Contents of Document BGCOLOR="#color Background Color code" BACKGROUND="... Background Image .gif " TEXT="#color code" Text Color Whatcom County School-To-Work/Tech Prep Consortium 57
  • Web Design and Development <CENTER> </CENTER> Centers Text and Images <H1> to <H6> </H1>to</H6> Heading ALIGN="Left, Center, Align Text Right" <BASEFONT SIZE="1 Document Font Size to7"> <P> </P> New Paragraph ALIGN="Left, Center, Align Text Right" <BR> Line Break <HR> Horizontal Rule ALIGN="Left, Center, Align Text Right" SIZE = "number" Thickness of Horizontal Rule WIDTH = "number %" % of Document to Span NOSHADE Removes Shading Character: Opening Tag Closing Tag Attribute Description <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 Whatcom County School-To-Work/Tech Prep Consortium 58
  • Web Design and Development <SUB> </SUB> Subscript Text <SUP> </SUP> Superscript Text Links: Opening Tag Closing Tag Attribute Description <BODY> </BODY> Contents of Document LINK="#color code" Unvisited Link Color VLINK="#color code" Visited Link Color <A HREF = "Item </A> Destination of Link Location"> <A NAME = "Label"> </A> Moves to Other Section of Web Page Images: Opening Tag Closing Tag Attribute Description <IMG SRC ="Image Imports Image Location"> ALIGN="Left, Right" Align Image & Text Wrap ALIGN="Top, Middle, Align Text with Image Bottom" 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, Stops Text from Wrapping All> Whatcom County School-To-Work/Tech Prep Consortium 59
  • Web Design and Development Tables: Opening Tag Closing Tag Attribute Description <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) ALIGN="Left, Center, Aligns Text in Row Horizontally Right" ALIGN="Top, Middle, Aligns Text in Row Vertically Bottom" <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 Whatcom County School-To-Work/Tech Prep Consortium 60
  • Web Design and Development Handout: Getting and Creating Images:  Clip Art Clip 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.  Internet There 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 Images You 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 Images There 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. Whatcom County School-To-Work/Tech Prep Consortium 61
  • Web Design and Development 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 Whatcom County School-To-Work/Tech Prep Consortium 62
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 63
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 64
  • Web Design and Development 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> Whatcom County School-To-Work/Tech Prep Consortium 65
  • Web Design and Development 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/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 66
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 67
  • Web Design and Development <A HREF="name of site to link too.html"> <img src="location & name of image"> </A> </body> </html> Whatcom County School-To-Work/Tech Prep Consortium 68
  • Web Design and Development 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/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students’ monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 69
  • Web Design and Development 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 image You 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> Whatcom County School-To-Work/Tech Prep Consortium 70
  • Web Design and Development 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)  Suggested Assessment: o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 71
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 72
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 73
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 74
  • Web Design and Development 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)  Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students’ monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 75
  • Web Design and Development 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> Whatcom County School-To-Work/Tech Prep Consortium 76
  • Web Design and Development 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)  Handout/Resources Needed: o HomeSite or NotePad o Reference Books in classroom  Suggested Assessment: o Check students’ monitors to see that they have mastered the module. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 77
  • Web Design and Development 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 tag o 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> Whatcom County School-To-Work/Tech Prep Consortium 78
  • Web Design and Development 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)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)  Suggested Assessment: o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 79
  • Web Design and Development 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 Lists You 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 Whatcom County School-To-Work/Tech Prep Consortium 80
  • Web Design and Development 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)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)  Suggested Assessment: o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 81
  • Web Design and Development 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 list Apples Oranges Potatoes Cereal Milk Cheese Whatcom County School-To-Work/Tech Prep Consortium 82
  • Web Design and Development 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)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)  Suggested Assessment: o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 83
  • Web Design and Development Assignment: Definition Lists Overview This 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. Potato A plant native to South America and widely cultivated for its starchy, edible tubers. Whatcom County School-To-Work/Tech Prep Consortium 84
  • Web Design and Development 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)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)  Suggested Assessment: o Check monitors to make sure students understand basic tables. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 85
  • Web Design and Development 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> Whatcom County School-To-Work/Tech Prep Consortium 86
  • Web Design and Development <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> Whatcom County School-To-Work/Tech Prep Consortium 87
  • Web Design and Development 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)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)  Suggested Assessment: o Check monitors to make sure students understand concepts. o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 88
  • Web Design and Development 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 Outcome Students 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.  CAPTION o 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: Whatcom County School-To-Work/Tech Prep Consortium 89
  • Web Design and Development Heading 1 Heading 2 Heading 3 Cell 2 Cell 3 Cell 1&4 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> Whatcom County School-To-Work/Tech Prep Consortium 90
  • Web Design and Development 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> Whatcom County School-To-Work/Tech Prep Consortium 91
  • Web Design and Development 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)  Handout/Resources Needed: o Common HTML Tags (Unit 2, Module 3 handout)  Suggested Assessment: o Check monitors to make sure students understand concepts o Grading assessment will come later, in project assignment rubric Whatcom County School-To-Work/Tech Prep Consortium 92
  • Web Design and Development 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> Whatcom County School-To-Work/Tech Prep Consortium 93
  • Web Design and Development 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  Suggested Assessment: o Grading assessment will come later, in project assignment rubric. Whatcom County School-To-Work/Tech Prep Consortium 94
  • Web Design and Development 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 Codes You 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. Whatcom County School-To-Work/Tech Prep Consortium 95
  • Web Design and Development 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. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: B3: Produce graphics and layout elements  Technical Knowledge: Knowledge of various graphical applications and sources of graphic images. Knowledge of principles of layout and graphics. 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. Learner Outcomes The student will be able to:  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. Whatcom County School-To-Work/Tech Prep Consortium 96
  • Web Design and Development 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 Whatcom County School-To-Work/Tech Prep Consortium 97
  • Web Design and Development 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_PreparationModule_1Lesson01. 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). Whatcom County School-To-Work/Tech Prep Consortium 98
  • Web Design and Development 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) Whatcom County School-To-Work/Tech Prep Consortium 99
  • Web Design and Development 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.  Learner Outcome: o According to the Adobe tutorial, the student will be able to- • 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_PreparationModule_1Lesson02). 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  Suggested Assessment: o Check student monitors to see if they successfully replicated the model. Tutorial: Layer Basics in Photoshop (on disk) Whatcom County School-To-Work/Tech Prep Consortium 100
  • Web Design and Development 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.  Learner Outcome: o According to the Adobe tutorial, the student will be able to- • 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_PreparationModule_1Lesson03). 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.  Suggested Assessment: o Check student monitors to see if they successfully replicated the model. Tutorial: Photo Retouching in Photoshop (on disk) Whatcom County School-To-Work/Tech Prep Consortium 101
  • Web Design and Development 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: Whatcom County School-To-Work/Tech Prep Consortium 102
  • Web Design and Development o an exotic background image, supplied by the student, either a digital or a print (postcard, page from a magazine, etc.) o image o 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. Whatcom County School-To-Work/Tech Prep Consortium 103
  • Web Design and Development Exercise: The Self Portrait Overview: 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) Whatcom County School-To-Work/Tech Prep Consortium 104
  • Web Design and Development 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 accessible 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, name, adjust and retouch layers. As well as the ability to use transparent layers. PhotoShop Effects The ability to feather Whatcom County School-To-Work/Tech Prep Consortium 105
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 106
  • Web Design and Development 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). Whatcom County School-To-Work/Tech Prep Consortium 107
  • Web Design and Development 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: B3: Produce graphics and layout elements  Technical Knowledge: 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. Whatcom County School-To-Work/Tech Prep Consortium 108
  • Web Design and Development  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/Objectives The 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 o The student communicates ideas clearly and effectively. o The student analyzes and evaluates the effectiveness of formal and informal 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 Whatcom County School-To-Work/Tech Prep Consortium 109
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 110
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 111
  • Web Design and Development 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.  Suggested Assessment: o Check student monitors to see if they successfully replicated the model. Whatcom County School-To-Work/Tech Prep Consortium 112
  • Web Design and Development Spanning Exercise Using a Wizard Overview: Spanning Puzzle 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. 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. Whatcom County School-To-Work/Tech Prep Consortium 113
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 114
  • Web Design and Development 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? Whatcom County School-To-Work/Tech Prep Consortium 115
  • Web Design and Development Exercise: Spanning From Scratch Overview: Spanning Puzzle 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. 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? Whatcom County School-To-Work/Tech Prep Consortium 116
  • Web Design and Development 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." Whatcom County School-To-Work/Tech Prep Consortium 117
  • Web Design and Development 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: Whatcom County School-To-Work/Tech Prep Consortium 118
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 119
  • Web Design and Development 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 Whatcom County School-To-Work/Tech Prep Consortium 120
  • Web Design and Development 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.  Suggested Assessment: Whatcom County School-To-Work/Tech Prep Consortium 121
  • Web Design and Development 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.  Whatcom County School-To-Work/Tech Prep Consortium 122
  • Web Design and Development 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 Whatcom County School-To-Work/Tech Prep Consortium 123
  • Web Design and Development 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.  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. • 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. Whatcom County School-To-Work/Tech Prep Consortium 124
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 125
  • Web Design and Development 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. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: 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. B1: Develop site map and application models  Technical Knowledge: 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. Whatcom County School-To-Work/Tech Prep Consortium 126
  • Web Design and Development Ability to demonstrate creative thinking process while problem solving and apply creative solutions to new situations. 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. Ability to design user-friendly sites and applications. Knowledge of company requirements and standards. 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. D3: Perform application maintenance  Employability Skills: Ability to perform specified maintenance, identify problems and correct malfunctions/failures. Learner Outcomes 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.  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. Whatcom County School-To-Work/Tech Prep Consortium 127
  • Web Design and Development  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: Dreamweaver Tutorials  Module 2: Constructing a Mock Web Site Whatcom County School-To-Work/Tech Prep Consortium 128
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 129
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 130
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 131
  • Web Design and Development 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.  Learner Outcome: o The student will be able to: • 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. Whatcom County School-To-Work/Tech Prep Consortium 132
  • Web Design and Development Worksheet: Market Analysis Web Site Authors Roles: file librarian, coach, reporter 1. 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 Whatcom County School-To-Work/Tech Prep Consortium 133
  • Web Design and Development 3. Predominant Gender: ____ % male, ____% female 4. Age (Check all ranges that apply): 12 and under 30 – 59 13 – 18 60 – older 19 – 29 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 B=Customers with modem C=Customers with fast speed have computers in the home let alone connections (possibly high speed connections, likely more than an internet connection, no disposable connections), possibly more than one income, only willing to buy if it is a computer, can afford to buy the one computer, can afford to necessity and a bargain products but only after comparison buy the products even on shopping impulse 6. Which career paths might the target consumers most likely be categorized as? Check as many as apply. Health and human services Education and social services Science and technology Business and marketing Arts and communication 7. How would you characterize the level of education of the target consumers? Check as many as apply. Attending high school B.A. or B.S. High school graduate Masters degree Received vocational or technical PhD certification 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). Whatcom County School-To-Work/Tech Prep Consortium 134
  • Web Design and Development 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. Learner Outcomes: At the completion of this exercise, you will be able to:  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). Whatcom County School-To-Work/Tech Prep Consortium 135
  • Web Design and Development  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. Whatcom County School-To-Work/Tech Prep Consortium 136
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 137
  • Web Design and Development 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. Learner Outcomes: At the completion of this exercise, you 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 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) Resources/Online Documents:  Dreamweaver's Guided Tour 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. Whatcom County School-To-Work/Tech Prep Consortium 138
  • Web Design and Development 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.  Learner Outcome: o The student will be able to: • 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. Whatcom County School-To-Work/Tech Prep Consortium 139
  • Web Design and Development 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. Learner Outcomes: At the completion of this exercise, you will be able to:  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. 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: Whatcom County School-To-Work/Tech Prep Consortium 140
  • Web Design and Development 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. Resources/Online Documents:  Dreamweaver's Guided Tour 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. Whatcom County School-To-Work/Tech Prep Consortium 141
  • Web Design and Development Assessment Checklist Desired Learner How to Assess Outcome demonstrate the benefits of creating a site folder and Informally ask groups, "In what ways could Dreamweaver make Web site maintenance using the site easier?" functions to maintain a Web site. run a report and make changes From the group's Site Window, click on View>Show Page Titles. The file which address "problem_file.html" should not be untitled. the findings in the report do an extended find and replace of All files except the home page should have a light blue background & red font. text or code throughout the local site check or Open "problem_file.html". Go to File>Check Links. Check broken & external links. All change links links should work. sitewide rearrange the site structure From the group's site window, you should be able to see that "problem_file.html" is from either the included in the site structure. Site Map or site Files View use Dreamweaver to test page Ask students informally, "What was a problem you encountered when you checked your performance site in IE3? on different browsers. Whatcom County School-To-Work/Tech Prep Consortium 142
  • Web Design and Development Unit 6: Culminating Project(s) Overview: This unit is the culminating project (or projects) of the Web Design and Development course. Industry Skill Standards Covered in this Unit: Critical Work Function/Key Activity: 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. B1: Develop site map and application models  Technical Knowledge: 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. Whatcom County School-To-Work/Tech Prep Consortium 143
  • Web Design and Development Ability to demonstrate creative thinking process while problem solving and apply creative solutions to new situations. 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. Ability to design user-friendly sites and applications. Knowledge of company requirements and standards. 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. 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 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: Culminating Project Whatcom County School-To-Work/Tech Prep Consortium 144
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 145
  • Web Design and Development 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 Whatcom County School-To-Work/Tech Prep Consortium 146
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 147
  • Web Design and Development Appendix Whatcom County School-To-Work/Tech Prep Consortium 148
  • Web Design and Development Syllabus: Web Design & Development 1 & 2 2002-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 & 2 Length of Course: 2-semester sequence Course Hours: each semester = 90 hrs/ .5 credit Year Course Taught: 2002/03 Prerequisite: 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 Whatcom County School-To-Work/Tech Prep Consortium 149
  • Web Design and Development 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 College College Course Title: Creating Web pages Course Code Number: MIT 149 Credit/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. Whatcom County School-To-Work/Tech Prep Consortium 150
  • Web Design and Development 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 Opportunity for students to Valley Community move smoothly from the College high school course to SVCC’s web design program Suggested additional coursework: Year/Semester Technology-based classes Academic classes Suggested prior or Technology Connections* Art (introductory course) concurrent with Web (required introductory Design 1 course for general use of English (with speech information technology. component) Includes an introduction to web design basics and is generally a prerequisite for Web Design One.) Suggested prior or Basic programming Technical Writing concurrent with Web Computer-based Art / Computer-based Design 2 drafting/design graphic design Suggested prior to or This course is generally set up as a highly individualized concurrent with Web pathway in either web design/graphics or web Design Advanced development/coding. Advanced courses in either area are recommended as well as continued communication coursework. Whatcom County School-To-Work/Tech Prep Consortium 151
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 152
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 153
  • Web Design and Development 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. Whatcom County School-To-Work/Tech Prep Consortium 154