Web Design and Development I - 2008

The Newark Public Schools Web Design and Development I

NEWARK PUBLIC SCHOOLS

Web Design and Development I
CURRICULUM GUIDE
2008
Department of Teaching & Learning ©2008 1


NEWARK PUBLIC SCHOOLS ADVISORY BOARD MEMBERS

2008-2009

Mr. Samuel Gonzalez, Chairperson

Ms. Shanique L. Davis-Speight, Vice Chairperson

Mr. Tharien Arnold

Ms. Barbara King

Mr. Anthony Machado

Ms. Eliana Pintor

Ms. Arelis Romero

Mr. Felix A. Rouse

Mr. Carlos Valentin, Jr.


NEWARK PUBLIC SCHOOLS

ADMINISTRATION
2008-2009
State District Superintendent.............................................................................................................................................Dr. Clifford B. Janey

State District Deputy Superintendent...................................................................................................................................................................

Chief Financial Officer...............................................................................................................................................................Mr. Ronald Lee
School Business Administrator

Chief of Staff.............................................................................................................................................................................Ms. Sadia White

Assistant Superintendent...........................................................................................................................................Ms. Joanne C. Bergamotto
School Leadership Team I

Assistant Superintendent............................................................................................................................................................Mr. Roger Leon
School Leadership Team II

Assistant Superintendent...........................................................................................................................................Dr. Glenda Johnson-Green
School Leadership Team III

Assistant Superintendent............................................................................................................................................................Ms. Lydia Silva
School Leadership Team IV

Assistant Superintendent.........................................................................................................................................................Dr. Don Marinaro
School Leadership Team V

Assistant Superintendent....................................................................................................................................................Dr. Gayle W. Griffin
Department of Teaching and Learning

Assistant Superintendent............................................................................................................................................................Dr. Kevin West
Department of Special Programs


TABLE OF CONTENTS

Title Page.........................................................................................................................................................................................................................................1

Board Members................................................................................................................................................................................................................................2

Administration.................................................................................................................................................................................................................................3

Table of Contents.............................................................................................................................................................................................................................4

District Mission Statement...............................................................................................................................................................................................................5

District Goals and Guiding Principles.............................................................................................................................................................................................6

Curriculum Committee....................................................................................................................................................................................................................8

Course Philosophy...........................................................................................................................................................................................................................9

Course Description.........................................................................................................................................................................................................................10

Recommended Textbooks..............................................................................................................................................................................................................11

Course Technical Specifications....................................................................................................................................................................................................12

Curriculum Pacing and Units.........................................................................................................................................................................................................13

Standards, Goals, and Objectives...................................................................................................................................................................................................14

Appendix........................................................................................................................................................................................................................................46



Mission Statement
The Newark Public Schools District’s mission is to develop a productive citizen who is distinguished in all aspects of academic
endeavors and willing to challenge the status quo in our society. We are committed to ensuring that our policies and practices will
prepare our students for a world that is increasingly diverse and knowledge driven. We expect our schools and classroom
environments to be emotionally safe and intellectually challenging. We pledge to partner with parents, groups, and organizations that
add support to the mission by changing hearts and minds to value education.

Dr. Clifford B. Janey
State District Superintendent


GOALS AND GUIDING PRINCIPLES
Reaching for the Brass Ring
GOALS

• Goal 1 IMPROVE STUDENT ACHIEVEMENT

Provide all students with equal access to opportunities that demonstrate high academic standards, high expectations, instructional rigor and
alignment with the NJCCCS, and which embody a philosophy of critical and creative thinking.

• Goal 2 DEVELOP STUDENT MORAL AND SOCIAL RESPONSIBILITY

Equip students to be productive citizens by addressing needs, enhancing intellect, developing character, and instilling pride and hope.

• Goal 3 STRUCTURE THE ORGANIZATION TO BE EFFICIENT, EFFECTIVE AND ALIGNED WITH THE DISTRICT MISSION

Allocate and align resources on the basis of student needs with high achievement as the ultimate goal.

--Schools and district offices will have effective and efficient programs, processes, operations and services to assure that all students and other
customers will have access to certificated, highly trained professionals.

--Budget and fiscal systems will support the focus on student achievement through timely and accurate processing of documents.

• Goal 4 ENFRANCHISE COMMUNITY / EMPOWER PARENTS

Engage community and family in meaningful decision-making and planning for Newark children.


GOALS AND GUIDING PRINCIPLES
Reaching for the Brass Ring
GUIDING PRINCIPLES

• FOCUS ON STUDENTS

Every Newark Public Schools employee must be committed to high achievement for all students and assume responsibility for that success.
Everyone clearly communicates the vision, focus, and goals of the district. All district policies, procedures and activities are aligned in
support of student achievement.

• HIGH EXPECTATIONS / STANDARDS DRIVEN

All district personnel are constantly analyzing data and feedback to ensure high standards and support to enable all students to be successful.

All school communities are constantly monitoring data and feedback to ensure that each student has the necessary personalized support and
quality-learning environment to meet high standards and expectations for learning.

• CARING AND SAFE ENVIRONMENT

The district is committed to safe, clean, aesthetically pleasing educational work environments. Students’ and employees’ diverse
backgrounds, abilities, interests, and needs are respected. Structures and practices that promote personalization and equity of access are
provided.

• SHARED DECISION MAKING

The district participates openly and honestly in productive, collaborative and reflective communication and systemically solicits feedback
from multiple stakeholders. Systemic feedback loops are established to ensure that all stakeholders (including district offices, administrators,
teachers, parents and students) are engaged in dialogue for the purpose of shared decision-making.


CURRICULUM COMMITTEE

Michelle Springs-Haynes

Web Design and Development Instructor, Technology High School


Newark Public Schools

Course Philosophy

Technology - any modification of the natural world designed by human beings to solve human problems, enhance human life, or extend
human capability - was identified as an essential workplace competency by the Secretary’s Commission on Achieving Necessary Skills
(SCANS) report in 1992. This report further stated that “students should be able to select equipment and tools, apply technology to specific
tasks, and maintain and troubleshoot equipment.”

Information technology is a field that is growing at an astronomical rate, with both frequent advancements of existing technologies and the
creation of new technologies. All students must be able to understand and be comfortable with the use of computers to process information,
select equipment and tools (including software). By introducing concepts of the information technology field, students understand social,
organizational, and technological systems that have impacted, and continue to impact the lives of all across the globe. Further understanding
of technology and its place and function in today’s complex society will allow students to become informed and productive adults of tomorrow.

Included in the information technology age is the creation and evolution of the Internet. Internet technologies have become a mainstay in
today’s society. Internet and web technologies not only exist on the World Wide Web, but also are seen in many web-based software
applications.

The Web Design and Development I Course is designed to guide students through the Internet and its wide array of useful resources.
Students will master the use of now basic Internet technologies, such as web browsers, e-mail, newsgroups, search engines, and the
concepts behind File Transfer Protocols (FTP’s). Students will use a variety of search engines to complete research-based projects.

In addition, students will learn the fundamentals of web authoring and core web design principles. Students will gain experience developing
web pages in a text editor and/or graphic user interface (GUI) editor. Students will also learn how to develop and use cascading style sheets
(CSS) and study the basics of Extensible Hypertext Markup Language (XHTML), JavaScript, Dynamic HTML (DHTML), and the Document
Object Model (DOM) and how to successfully integrate these key components into a functional web page and web site.

Overall, students will have a deeper knowledge base of core web authoring ideas and topics. Students will be kept up to date on industry
standards as they relate to web authoring, and understand how and why these standards change to suit the technological needs of today’s
society. In short, all students will learn and implement technologies current in today’s society in order to guide and shape the technology for
the future.


Newark Public Schools
Course Description

Course Prerequisites: Basic knowledge of the Internet is necessary. An understanding of Microsoft 98/2000/ME/XP is required.

The Web Design Career Pathway is comprised of Web Design and Development 1, Web Design and Development 2 and Web Design and Development 3.
Students enrolled in this pathway will commence with Web Design and Development 1 while in tenth grade. Web Design and Development students must
enter the course with an understanding of the concepts taught in Computer Applications. Upon successful completion of Web Design I, students will have
mastered introductory and intermediate HTML skills and will be able to take more advanced HTML courses (Web Design and Development 2 and 3).

First Year Web Design students will complete programs in HTML, add JavaScript and various forms of multimedia (static and dynamic) to a web page and
web sites, as well as use web-authoring tools such as DreamWeaver and/or FrontPage. Students will be required to create electronic and paper-based
portfolios. These portfolios will showcase student achievements to potential employers, service learning opportunities, and lend to be showcased by the
Office of School-to-Career and College Initiatives. They will also be used as a vehicle to assess student proficiency as well as gauge student performance
over time. The skills mastered during year one will help the students prepare for CIW certification – CIW Associate1.

Aside from technical skills, students will also gain soft skills in the process. Such skills include presentation skills; cooperative learning and team work skills,
as well as how to effectively manage on-going and multiple projects. In addition, the course lends itself to interdisciplinary connections through current
events as well as integrating subject matter from across the spectrum into a student’s designs and web page/site developments.

About CIW Certification

Certified Internet Webmaster (CIW) Certification is an information technology (IT) certification that is vendor and company neutral. The certification is based
on job-role and is designed to help people gain entry and build upon these IT skills. Students gaining CIW Certification can go on to seek careers or
continue to further their studies on a collegiate level in various disciplines: including web development, web site management, enterprise development, and
network administration.

CIW is the largest IT job-role certification program. It is increasingly recognized and accepted as the standard vendor-neutral certification by corporations,
academic organizations, and industrial publications.

1
CIW Certification is offered at various locations throughout the state of NJ. Bloomfield College is an extension site for testing. Cost of testing is $65 per student. Certification
testing is only recommended for top performers within the Web Design I course.

Recommended Textbooks/Resources
Principles of Web Design, Fourth Edition

Joel Sklar
ISBN 13: 978-1-4239-0194-5 © 2009
ISBN 10: 1-4239-0194-0
Publish date: March 25, 2008
460 pages

The ultimate guide to Web site design, Principles of Web Design, Fourth Edition leads you through the entire Web site creation process, from start to finish, while
developing and enhancing your HTML, CSS, and visual design skills along the way. You'll begin by learning about the Web design environment and the principles of sound
Web design, continue to planning site layout and navigation, and progress to Web typography, colors and images, working with CSS, and more. Updated to include the
latest Web design technologies and trends, this Fourth Edition features all-new sections on Web accessibility, standards-based coding, and CSS positioning, as well as
technical updates and new screen shots throughout. Armed with valuable knowledge and plenty of hands-on activities, you will gain a solid understanding of designing
successful, standards-based Web sites that are portable across different operating systems, browsers, and connection speeds.

Teacher Reference Texts

Web Design: Introductory Concepts and Techniques, Third Edition

Gary B. Shelly, H. Albert Napier, Ollie Rivers
ISBN 13: 978-1-4239-2718-1 © 2009
ISBN 10: 1-4239-2718-4
Publish date: July 2, 2008

This third edition explains the connection between a detailed design plan that considers audience needs, site purpose, and various technical issues of a successful Web
site. Written for an introductory course, the text offers a variety of challenging written and hands-on activities at the end of each chapter that test comprehension, build Web
research skills and design awareness, and provoke thought regarding current issues in technology. Web Design, Third Edition reveals useful design concepts and
techniques typically not addressed in HTML or Web authoring texts, and is written in a style that makes the concepts presented easy to understand.

New Perspectives on HTML and XHTML 5th Edition, Introductory

Partrick Carey
ISBN 13: 978-1-4239-2545-3 © 2009
ISBN 10: 1-4239-2545-9
Publish date: April 15, 2008

This best-selling text by Patrick Carey uses the New Perspectives Series signature case-based, problem-solving approach to teach students how to create simple to
advanced Web sites using HTML and XHTML.


Course Technical Specifications
Required Optional

Computer – latest model available within district Classroom set of Flash Media Sticks

Student Flash Media Stick – to save required work CD/DVD Burner for large multimedia files

Teacher and Student Professional E-mail account Microsoft FrontPage – to demonstrate GUI functionality

Access to the Internet (within classroom or school PC lab) TextPad – easily differentiates between code and plain txt
within window. Also automatically indents and allows for easy
Text Editor Software (ex. NotePad, Word, Works) available previewing of documents created
within district

Internet Explorer or Netscape Navigator – latest version
available within district

Development Software:
• Adobe Web Development Suite: Includes Dreamweaver,
Flash and Fireworks
• Adobe Photoshop or Photoshop Elements


Curriculum Units and Suggested Pacing

40 Minute
Topic Block Schedule
Periods

LESSON I: Overview of Class and Requirements 3
1.5

LESSON II: Browsing the World Wide Web 5
2.5
UNIT I: INTRODUCTION TO WEB PAGE LESSON iII: Understanding E-mail 1 2
ELEMENTS
LESSON IV: FTP, Newsgroups and Telnet Concepts 1 2

LESSON IV: Objects, Plug-ins, and Viewers 2 4

LESSON VI: Search Engines 1.5 3

LESSON VII: Electronic Commerce 1.5 3
LESSONI: Introduction to HTML 1.5 3
LESSON II: HTML, the Beginnings 2.5 5
LESSON III: HTML, Understanding Coding 7 14
LESSON IV: HTML Horizontal Rules and Graphical
5 10
Elements
LESSON V: HTML Hyperlinks 5 10
UNIT II: HYPERTEXT MARKUP LESSON VI: HTML Tables and Layout Control 10 20
LANGUAGE (HTML) FUNDAMENTALS LESSON VII: HTML Forms 6 12

LESSON VIII: HTML Image Techniques 8 16

LESSON IX: HTML Frames 5 10
LESSON X: GUI Editors (Intro to
11 22
Frontpage/DreamWeaver)
LESSON XI: HTML Extensions 7.5 15

Students should initiate and complete a final web project
as designated by the instructor. It is recommended that 10 20
Final Projects
the project be handed in individually.


STANDARD 9.2
(Consumer, Family, and Life Skills) All students will demonstrate critical life skills in order to be functional members of
society
Strand B: Self-Management

Types of Research Based
Instructional Objectives / Skills and
Essential Questions Activities and Assessments Suggested Resources
Benchmarks (CPIs)
that could illustrate Objectives

GOAL/OBJECTIVE (S): To discuss and
understand the regulations and
expectations of the course, course
overview
What are effective ways to
take notes for a technical ALL NPS
course?
Discuss syllabus, pacing, grading
What is cooperative learning
scheme, rules/regulations of the lab, and
and how will it assist you in
AUP for NPS
successfully completing this Teacher generated written
Discuss sample of acceptable
course? evaluation of classroom and
work/homework and hand-in procedure
course procedures (procedures
Browse official course web site within
How will cooperative should be evaluated periodically
school and question navigation and
learning aid you in throughout the academic year, as Developing an Effective Course Syllabus
content
preparing for a career in other procedures are introduced
Analyze sample activity
web design and as the course progresses).
Returned signed AUP’s
development?

What are the classroom NJ STATE CPI:
policies and procedures? Revise and update the personal growth
What are the consequences plan to address multiple life roles.
for not following the Apply project planning and management
classroom guidelines? skills in academic and/or occupational
settings.
Compare and contrast methods for
maximizing personal productivity.



Standard 8.1
(Computer and information literacy) All students will use computer application to gather and organize information and to
solve problems
Strand B: Application of Productivity Tools

Benchmarks (CPIs)

Goal/Objective(s): To understand and
demonstrate how to customize web
browsers
What are web browsers?
Provide examples of various ALL NPS Assessment:
web browsers? How are they Discuss how they have used web Teacher generated quizzes (PC
similar? How do they differ? browsers in the past and present and paper based)
Discuss the differences between Allow students to demonstrate to
What are the various identical URL’s as viewed in various web class how to make changes via
browser settings that may be browsers diagram
manipulated by the end Discuss the importance of knowing the Observe students completing In Our Own Backyard
user? differences between the browsers changes to settings via diagram
Understand how to customize browser
How are browser settings settings Assignment/Project:
used to create a unique
experience for the user? NJ State CPI Students should be asked to
Identify new technologies and other organizational multiple use in personal, home, and/or work environments for informatio
make tools to browser setting
Why is effective image changes via diagram in class (this
loading important to the user Evaluate information sources for accuracy, relevance, group activity)
may be a and appropriateness.
and web designers?
Compose, send, and organize e-mail messages with and without attachments.



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand concepts
Trace the evolution of the and workings of electronic mail
Internet.
ALL NPS
Define transmission control Discuss email and its impact today
Optional Assessment: Have
protocol/Internet protocol Discuss differences between email
student email any trouble he/she
and state how the Internet clients
may be having with a particular
uses it Understand Netiquette and how it applies
topic. Be sure to answer the
to email
email in a timely fashion. This
Describe and give detailed Understand attachments and how to
assessment may be continued on
examples of push and pull send them
an ongoing basis. In Our Own Backyard
technologies. Understand the importance of antivirus
software in relation to email and
Assignment/Project:
Create and add email attachments
Test email with attachments
signatures to email messages
Test email without attachments
NJ STATE CPI:
Describe the purpose of the Test email including signatures
Identify new technologies and other organizational tools to use in personal, home, and/or work environments for information r
mailing list. What are the Create a mailing list and send
pros and cons to suing a email
Evaluate information sources for accuracy, relevance, and appropriateness.
mailing list? What ethical
issues may arise from the use Compose, send, and organize e-mail messages with and without attachments.
a mailing list?



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Gain knowledge of
and ability to FTP files
Access and download files
using File Transfer Protocol Assignment/Project:
Email to mail list announcing
ALL NPS
newsgroup information
Describe the functions of the Discuss handout on FTP process Practice FTP process via modeling
FTP get and put commands/ Practice FTP process via paper modeling and display
How are they essential to the and display
protocol? Discuss and understand Telnet process Extended Activity
Discuss Newsgroups
Read and post messages to a Participate in classroom activities Teacher should begin to go over
newsgroup principal concepts of project
NJ STATE CPI: management and implementation
How are newsgroups (CPI 3.1) Identify, describe, evaluate,
effectively used? Provide Assign students to plan an event
and synthesize the central ideas in
examples of functionally (party, vacation, etc). Students will
informational texts need to list resources needed in
strong newsgroups.
order to make the event happen.
(CPI 3.1) Read developmentally Students will then discuss in class
Access resources using telnet appropriate materials at an independent the resources chosen and why
(if available). level with accuracy and speed



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand Role of
Plug-ins and Viewers in Relation to the
Web
Hat was the first scripting
language developed
ALL NPS
exclusively for online content
Explain various plug-ins available to the
design?
web – standards and other options
How have scripting Explain pros and cons of reliance on Multimedia on the Web
languages evolved plug-ins and viewers Assignment/Project:
throughout the year? What Distribute handout summarizing pros and Demonstrate via paper model Objects and Security Issues
are some limitations of these cons of viewers how customize web browser to
languages? Explain files formats allow/disallow particular file Plug-in Technology
Demonstrate how file formats are formats
Explain some of the converted Send email about web sites that Type s of Browser Plug-ins
functions of Java applets. Discuss various plug-ins have information on various plug-
Discuss pros and cons of plug-ins and in technologies File Formats
What are three was in which viewers
plug-ins can spear within a Convert various file formats (jpeg to gif)
browser?
NJ STATE CPI:
What is Virtual Reality
Modeling Language? (CPI 8.1)
Create a multi-page document with citations using word processing software in conjunction with other tools that demonstrates the ability to


Standard 8.1
solve problems

Benchmarks (CPIs)

(CPI 3.1)
Read and critically analyze a variety of works, including books and other print materials (e.g., periodicals, journals, manuals), about one is

(CPI3.2) Write multi-paragraph, complex
pieces across the curriculum using a variety
of strategies to develop a central idea (e.g.,
cause-effect, problem/solution,
hypothesis/results, rhetorical questions,
parallelism).

(CPI 3.3) All students will speak in clear,
concise, organized language

(CPI 3.4) All students will listen actively to
information from a variety of sources in a
variety of situations

(CPI 8.1) Construct a spreadsheet, enter
data, use mathematical or logical functions to
manipulate and process data, generate
charts and graphs, and interpret the results.

(CPI 8.1) Identify a problem in a content area
and formulate a strategy to solve the problem
using brainstorming, flowcharting, and
appropriate resources.



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Demonstrate ability to
effectively and efficiently search the web

Discuss various search engines
What is a search engine? (advantages and disadvantages of each)
Demonstrate how to search for graphics
What is the purpose of a and files
search engine ranking Demonstrate how to save graphics and
system? files found on the web to PC or
removable media Introduction to Search Engines
How does the ranking system Discuss various search techniques
aid the end-user? (regular and advanced searches, Search Indexes
keywords) Assignment/Project:
Observe and discuss teacher Online scavenger hunt
What are the four ways in Search Techniques
demonstration Email teacher list of resources
which a <META> tag
Discuss search techniques used to complete the hunt
defines meta-information Searching for Graphics,
about a document? Participate in group class activities
Newsgroups, and other
What are the three types of NJ STATE CPI: information
search indexes? (CPI 3.3) All students will speak in clear,
concise, organized language that varies in
List three standard Boolean content and form for different audiences and
operators and commands. purposes.



Standard 8.1
solve problems

Benchmarks (CPIs)

(CPI 8.2) Explain how technological
development is affected by competition
through a variety of management activities
associated with planning, organizing, and
controlling the enterprise.

(CPI 8.1)



(CPI 3.1) Read developmentally appropriate
materials at an independent level with
accuracy and speed.

(CPI 3.1) Identify, describe, evaluate, and
synthesize the central ideas in informational
texts


Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand concepts
What cookie options are of Electronic Commerce
offered in Netscape
Navigator and Microsoft ALL NPS
Internet Explorer?
Teacher will:
How do Netscape Navigator Demonstrate navigation of e-commerce
and Microsoft Internet sites
Explorer warn users of Provide an example of EDI and SET Introduction to E-commerce
potential security risks? Engage students in discussion of
advantages and disadvantages of e- E-commerce vs. Traditional
Name the four types of commerce Assignment/Project: Buying
general authentication. Participate in class discussion regarding Perform a web search for
advantages and disadvantages of e- particular types of e-commerce EDI
Define digital certificate and commerce sites. Email the results to the
how is it useful in web Discuss and demonstrate navigation of teacher with signature SET
design? e-commerce sites
Discuss copyright issues of e-commerce Copyrights and Trademarks
What security feature is
specific to Netscape NJ STATE CPI:
navigator?

What is a firewall? Explain (CPI 3.1) Identify, describe, evaluate, and
how it is implemented in a
texts
virtual environment.


Standard 8.1
solve problems

Benchmarks (CPIs)


(CPI 8.1)
Create a multi-page document with citations using word processing software in conjunction with other tools that demonstrates the ability

. charts and graphs, and interpret the results.


accuracy and speed.



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Gain background
What does HTNML stand information regarding HTML and Teacher should introduce the
for? Design Process concept of an electronic portfolio to
students as a method organizing and
What types of editors may be handing in work completed.
ALL NPS
used to facilitate creation of
Teacher should provide an example
web pages? Provide background information of an acceptable and exemplary Creating Web Pages
regarding the creation of web pages electronic portfolio.
What should be your starting using HTML code Text Editors
point for designing a web Discuss and provide examples of text Assignment/Project:
page? editors Send an email about the importance
GUI Editors
Provide students with class standard of accessibility
What does accessibility editor
Extended Activity Web Page Accessibility
mean in regards to web page Familiarize student with editor functions
design? Discuss accessibility issues
Teacher should go in depth with Front-end Issues
Familiarize students with text editor and students in regards to the functionally
How is accessibility crucial its functions of the text editor in relation to coding Back-end Issues
in the creation of web pages Discuss preconceived notions regarding HTML
as well as the user web design
interaction with them? Discuss accessibility issues and why Students should discuss in depth
they are important to web design accessibility issues in relation to web
site they have encountered
NJ STATE CPI:


Standard 8.1
solve problems

Benchmarks (CPIs)


(CPI 8.1)
Create a multi-page document with citations using word processing software in conjunction with other tools that demonstrates the ability



accuracy and speed.



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand HTML
Concepts

ALL NPS

What is the significance of a Demonstrate how to save an HTML file
file name? Demonstrate standard coding elements Assignment/Project:
(required elements for HTML files) Create a web page that displays
What are the different file Discuss XHTML in relation to HTML a particular set of information
Discuss browser standards in relation to Standard HTML Coding
naming conventions in Email the file to the teacher as an
HTML? How do they differ? HTML attachment
Discuss HTML standards HTML Standards
Why is it important to save Provide students with initial standard Extended Activity
coding reference sheet XHTML
all files related to a page in 1: Creating Your First HTML Document
a single location? Participate in min coding assignments
Discuss XHTML vs. HTML Web Browsers and Standards
Students may prepare project
What is the difference Discuss and understand elements documentation for teacher
between HTML and contained on reference sheet handout evaluation
XHTML?
NJ STATE CPI:

(CPI 4.5) Use communication to organize
and clarify their mathematical thinking


Standard 8.1
solve problems

Benchmarks (CPIs)

(CPI 9.1.B) Communicate and comprehend
written and verbal thoughts, ideas, directions,
and information relative to educational and
occupational settings

(CPI 4.5) Use connections among
mathematical ideas to explain concepts

texts

accuracy and speed


Standard 8.1
solve problems

Benchmarks (CPIs)
Goal/Objective(s): To Create a Web
Page independently using HTML Code

ALL NPS
Re-iterate standard coding elements for a
web page
Demonstrate proper and good coding skills
Provide example code for paragraphs, block
elements, and lists
What is the importance of Provide reference handouts for coding
good coding practices? elements covered
Discuss and understand good coding
practices Assignment/Project:
How does good coding lend Extended Activity 2: Modifying an HTML D
Discuss reference handouts provided Create a new web page that has
to ease of updating a web
Participate in in-class min coding the required elements: list
site by people other than the Students may prepare project
assignments (ordered and unordered), block
original developer? Work independently on concepts covered documentation for teacher
element, various fonts and
evaluation
headings
What are some of the basic NJ STATE CPI:
formatting tags used in
HTML for text? (CPI 4.5) Use computer spreadsheets,
software, and graphing utilities to organize
and display quantitative information (cf.
workplace readiness standard 8.4-D).

(CPI 4.5) Solve problems that arise in
mathematics and in other contexts (cf.
workplace readiness standard 8.3).


Standard 8.1
solve problems

Benchmarks (CPIs)

texts

accuracy and speed

(CPI) Participate in simulated industry
assessments, when and where appropriate

(CPI 6.5) Analyze the impact of supply and
demand on market adjustments and prices
(e.g., real estate and interest rates).




Standard 8.1
solve problems

Benchmarks (CPIs)
Goal/Objective(s): To Create a Web
Page independently using HTML Code

ALL NPS
How does good coding lend
to ease of updating a web Re-iterate standard coding elements for
site by people other than the a web page Mark-up Tag
original developer? Demonstrate proper and good coding
skills Document Structure Tags
What are some of the basic Provide example code for paragraphs,
block elements, and lists Teacher generated written
formatting tags used in Paragraph Formatting
Provide reference handouts for coding evaluation of classroom and
HTML for text? course procedures (procedures
elements covered Block Level Elements
Discuss and understand good coding should be evaluated periodically
In addition to basic text
practices throughout the academic year, as
formatting tags, what other Text-level Elements
Discuss reference handouts provided other procedures are introduced
tags may be used in order to
Participate in in-class min coding as the course progresses).
organize text in a user- Lists
friendly manner? assignments
Work independently on concepts Adding Hidden Commands
What are the types of lists covered
and how are they used Good Coding Practice
(separately and together) to NJ STATE CPI:
achieve various results?
(CPI 4.5) Understand how mathematical
ideas interconnect and build on one another
to produce a coherent whole


Standard 8.1
solve problems

Benchmarks (CPIs)
CPI 9.1.B) Communicate and comprehend

texts

accuracy and speed

(CPI 3.2) Write multi-paragraph, complex
of strategies to develop a central idea


(CPI 6.5) Analyze the impact of supply and
demand on market adjustments and prices
(e.g., real estate and interest rates).



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Incorporation of
Graphical Elements into Web Pages

ALL NPS
What is an empty tag? What Assignment/Project:
is a container tag? Create a web site that includes Adding Horizontal Lines
Demonstrate how to incorporate
horizontal lines in multiple places,
horizontal lines into a web document
How are horizontal rules and makes use of color schemes Incorporation of Images into
Illustrate the importance of horizontal
used to format a web page? Edit existing HTML file to add Pages
lines in web design
horizontal lines
Demonstrate ways of incorporating
What is hexadecimal code Special Characters
graphics
and how does it relate to web Email HTML file as an attachment
Demonstrate use of the color palette
design? to teacher HTML and Colors
Illustrate importance of color choice
What is the importance of (foreground color with/vs. background
Extended Activity 19: Horizontal Rules Foreground vs. Background
correct color choice with color)
Coloring
regards to web page design? Participate in mini coding assignments
How can poor color choice (independent and collaborative)
documentation for teacher Specifying Font Information
affect the users experience? Discuss the importance of color choice
evaluation
Discuss the advantages of using
horizontal lines in web page layout

NJ STATE CPI:



Standard 8.1
solve problems

Benchmarks (CPIs)

written and verbal thoughts, ideas, directions, and
information relative to educational and

synthesize the central ideas in informational texts

materials at an independent level with accuracy
and speed

(CPI 3.2) Write multi-paragraph, complex pieces
across the curriculum using a variety of strategies
to develop a central idea

(CPI 9.1) Participate in simulated industry


(CPI4.5) Select, apply, and translate among
mathematical representations to solve
problems.



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Gain an
Optional Assignment/Project:
Understanding of Hyperlinks
Teacher may have students create a
What types of images may be web page that is a directory to the
included on a web page? ALL NPS student’s favorite web sites. Page
Provide student with handout(s) should include the following
What types of image formats demonstrating usage of tags for hyperlinks elements: lists, horizontal rules,
are best for use on a web Discuss the various types of hyperlinks color, hyperlinks (internal and
(internal, outside, email) outside)
page?
Provide a brief introduction to hyperlinks Send an email with the file as an
Explain how to implement hyperlinks with attachment Understanding Hyperlinks
What is a hyperlink? How HTML code
can text and images be used Demonstrate how to use an image as a Extended Activity: Anchor Tags
as hyperlinks? hyperlink
Discuss and understand how to code Linking with Anchors Using Images as Links
What are the advantages and hyperlinks
disadvantages of using an Understand how to include an hyperlink Linking to Local Files
within a web page Creating Internal Links
image as a hyperlink?
Understand when to use a picture hyperlink URL and Pointers
What is the alternative tag and text hyperlink
and why should it be used Discuss the advantages and disadvantage of Links to Sections of a Page
using picture hyperlinks Hypergraphics
when including images on a
Participate in classroom mini coding
web page? assignments Students may prepare project
documentation for teacher evaluation
NJ STATE CPI:


Standard 8.1
solve problems

Benchmarks (CPIs)

(CPI 9.1.B) Communicate and
comprehend written and verbal thoughts,
ideas, directions, and information relative
to educational and occupational settings

(CPI 4.5) Use communication to organize
and clarify their mathematical thinking

(CPI 4.5) Use connections among
mathematical ideas to explain concepts

(CPI 3.1) Identify, describe, evaluate,
and synthesize the central ideas in
informational texts

(CPI 3.1) Read developmentally
appropriate materials at an independent
level with accuracy and speed

(CPI 4.4)
Evaluate the use of data in real-world contexts.



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Ability to Successfully
Incorporate Tables into Design of a Web
Page

ALL NPS
Assignment/Project:
Discuss the importance of using pen and
Create a web site that lists the
paper in the design of a web page and its
What is a table? student’s school schedule as a
layout
table. The table should have
Provide handout(s) on core code used to
What are the various ways some required elements (such as
generate tables
tables may be used in the background color, merger cells,
Demonstrate how to manipulate table Introduction to Tables
creation of a web page? etc).
properties
Send the file as an attachment to
Demonstrate how to control layout with Table and Data Alignment
How are tables used to the teacher
tables
effectively organize content
Discuss and understand how to code Changing Height and Width
on a web page? Extended Activity:
tables
What are the advantage and Understand how to include a table within Column and Row Spanning
Tables
disadvantages of using a web page
tables on a web site? Understand when to use a table/tables
within a web site
documentation for teacher
Discuss the advantages and
evaluation
disadvantage of tables
assignments

NJ STATE CPI:


Standard 8.1
solve problems

Benchmarks (CPIs)

(CPI3.2) Write multi-paragraph, complex
of strategies to develop a central idea (e.g.,
cause-effect, problem/solution,
hypothesis/results, rhetorical questions,
parallelism).

(CPI 3.3) All students will speak in clear,
concise, organized language that varies in
content and form for different audiences and
purposes.

. (CPI 8.2) Explain how technological

(CPI 8.1)



Standard 8.1
solve problems

Benchmarks (CPIs)
Goal/Objective(s): Understand how to
Effectively Include Forms within a Web Page

ALL NPS
What are form elements? Demonstrate and provide examples of the
usage of forms
Provide handout(s) with form tags and Assignment/Project:
Describe the various form meanings Create a web site that lists the
elements and how to include Demonstrate how to incorporate form tags various elective choices and after
them on a web page/ into HTML code school activities using a table to
Provide examples of good form layout control the layout. A form should be
How does one include form Explain the importance of form layout in included so the user may chose the
elements within a table/ relation to information gathering. his/her choice and submit the results
Discuss and understand how to forms to the teacher via a submit button Overview of Forms
Understand how to include form tags within a Send the file as an attachment to the
Is it effective web page
web page teacher
design to have more that one Form Tags
form included on a Understand how to properly lay out forms
within a web site Extended Activity:
particular page? Justify your Web Form Fields
Discuss the advantages and disadvantage of
answer? forms Forming Forms
Explain good form layout? assignments Form Action by Email and CGI
How is this essential to the
overall user experience? Students may prepare project
NJ STATE CPI:
texts


Standard 8.1
solve problems
Strand B: Application of Productivity Tools Strand B: Application of Productivity Tools

Benchmarks (CPIs)

accuracy and speed


(CPI 9.1) Participate in simulated industry


(CPI4.5) Select, apply, and translate among
mathematical representations to solve
problems.


Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Controlling Images and
Formats for Optimization on the Web Assignment/Project:
Create a web site that includes a
ALL NPS scanned map, where the student
What is an image map?
Explain how and why image maps are used
will create a image map that
Demonstrate how to create an image map
How and why are images Demonstrate how to include image maps into jumps the user to information
maps incorporated into a HTML documents about that particular area on the Image Techniques
web page? Discuss the interlacing technique and why it map
is useful in web design Image Maps
What types of mathematical Provide handout(s) regarding image Send the file as an attachment to
operations are used in order techniques the teacher Client-side Image Maps
to effectively execute code Discuss and understand how any why image
for an image map? maps are used Extended Activity Image Transparency
Understand how to include an image map
What are the advantages and within a web page
Graphics a la the Web Interlacing
Understand when to use image maps within
disadvantages of using an a web site
image map? Discuss the advantages and disadvantages In-line Graphics Animated GIF’s
of using the interlacing technique
Participate in classroom mini coding Students may prepare project
assignments documentation for teacher
evaluation
NJ STATE CPI:


Standard 8.1
solve problems

Benchmarks (CPIs)

texts

accuracy and speed



(CPI 4.5) Use computer spreadsheets,

(CPI 4.4)
Evaluate the use of data in real-world contexts.


Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand How Frames
are Incorporated into Web Design

ALL NPS
Demonstrate differences between frames
and tables
Provide explanation of pro/cons of tables vs.
What is a HTML frame? frames Assignment/Project:
Provide handout(s) detailing pros/cons of Create a web site that is frame
How is a frame set properly tables vs. frames based.
coded? Demonstrate how to code a frame using the Send the file as an attachment to
tags the teacher Extended Activity:
Discuss and understand how to code frames
What are the advantages and Extended Activity:
Understand how to include a frame set within Framed Web Pages
disadvantages of using frame a web page
sets? Understand when to use a frame/frameset for Framed Web Pages
a page documentation for teacher
What is the difference Discuss the advantages and disadvantage of Students may prepare project
between a frame set and frames
using a table? Participate in classroom mini coding evaluation
assignments

NJ STATE CPI:


Standard 8.1
solve problems

Benchmarks (CPIs)

texts

accuracy and speed






Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand and Utilize
HTML Graphical User Interfaces
What is a graphical user
interface? ALL NPS

How are graphical user Teacher will:
Assignment/Project:
interfaces used within Provide an overview of GUI’s such as
Create a web site using a GUI editor.
industry? Dreamweaver and FrontPage
Edit an existing project using an GUI
Provide handout(s) listing the various GUI
editor
What are the industry editors and features of each
Send the files as an attachment to Introduction to Graphical User
standard graphical user Demonstrate differences between GUI
the teacher
editors
interfaces?
Provide explanation of pro/cons of GUI Interface Editors
Extended Activity:
editors
What are the advantages and Provide handout(s) detailing pros/cons of
Lumping vs. Splitting Types of HTML GUI Editors
disadvantages of using a GUI editors vs. hand coding
graphical user interface to Demonstrate functionality of GUI editors
Extra Alignment Creating Web Pages using GUI’s
create a web page? Discuss and understand how effectively and
efficiently use HTML GUI’s
How does on effectively Understand how to manipulate GUI settings HTML editors vs. GUI Editors
manipulate information Understand how to view and manipulate
within a graphical user HTML code generated by the HTML GUI
interface to ensure integrity Discuss the advantages and disadvantage of
using HTML GUI’s
of the HTML code?
assignments

NJ STATE CPI:


Standard 8.1
solve problems

Benchmarks (CPIs)
CPI 9.1.B) Communicate and comprehend

texts

accuracy and speed




(CPI 4.5) Understand how mathematical ideas
interconnect and build on one another to
produce a coherent whole



Standard 8.1
solve problems

Benchmarks (CPIs)

Goal/Objective(s): Understand Concepts of
Coding Languages Used to Enhance HTML
and Synthesize Web Pages with these
Extensions
Assignment/Project:
ALL NPS Create CSS to apply to an
Provide an overview of CSS existing web site
What is a cascading style Provide Overview of JavaScript Create a simple JavaScript to Extending HTML
sheet? Provide Overview of XHTML and XML include in an existing web site
Explain DOM Create a separate JavaScript Introduction to Cascading Style
How is the use of CSS within Provide handout(s) listing the various HTML program Sheets
an HTML document helpful extensions
Send the files as an attachment
to the developer? Discuss difference between the HTML
extensions to the teacher Introduction to JavaScript
There are various HTML Discuss and understand how to code tables
Assignment/Project: Dynamic HTML
extensions. What is the
NJ STATE CPI: Create CSS to apply to an
difference between them? Is
(CPI 9.1.B) Communicate and comprehend existing web site Document Object Model
there an advantage by using
written and verbal thoughts, ideas, directions, Create a simple JavaScript to
one over another? and information relative to educational and include in an existing web site Extensible HTML
occupational settings Create a separate JavaScript
program Extensible Markup Language
(CPI 4.5) Use computer spreadsheets, Send the files as an attachment
to the teacher


Standard 8.1
solve problems

Benchmarks (CPIs)

texts

accuracy and speed




APPENDIX I: WEB DESIGN AND DEVELOPMENT EXTENDED ACTIVITIES
The following activities may be distributed to students as in class assignments, or may be distributed and graded as a
project grade. No matter what option is selected, the completed work should be kept in the student’s classroom
portfolio.

• Scoping a Small Project

• Don’t Type to Strangers

• Smart Design

• The Many I’s in Team

• Capturing the Moment

• Projects that Incorporate Cross-curricular Content



Scoping a Small Project
Applies to Standards: STATE 3.1, 3.2, 3.3, 3.4, 3.5 4.1, 4.3, 4.4, 4.8 8.1 NATIONAL TECHNOLOGY STANDARDS: CS 1, CS 2, CS 3, CS 4, CS 5, CS 6

Brief Description: Provide your students with the following case scenario. This scenario deals with a client that needs a small web site developed. The
students must make a needs analysis and then synthesize their remedy for the client, based on the given information and tools they
have learned to date in class.

How to Teach It:
1. Introduce this activity after you have covered storyboard or sketching of web sites
2. This activity may be used more than once by simply changing the complexity from design to development phase
3. Student work should be completed and kept in a student classroom portfolio
4. Upon completion, students should be asked to reflect on their work
5. It is optional to allow the students to work in teams. You will have to gauge this according to your individual class

Example:
Bluetech is a small factory automation company with three employees, situated in your local area. The owner of the company, Jillian, is a friend of your
Uncle's. Jillian has mentioned to your Uncle a number of times over the past 8 months that she wants to contact you to talk about "putting a site together" for
Bluetech.
After a phone call, you finally meet up with Jillian for an initial discussion about his website. The meeting is only 15mins long (due to Jillian's busy
schedule) and is interrupted a number of times by one of Jillian's employees. You come away from this initial meeting with the following details:
• Jillian just wants a small website (3-5 pages)
• The purpose of this website is to expand Bluetech's customer base.
• The specific goals are:
1. Demonstrate Bluetech's professional work through an online portfolio of recent work.
2. Enable users to find out more about the company (history, mission statement, etc.)
3. Encourage users to contact Bluetech for a quote
4. Entice users to re-visit the page every so often.
• Jillian would also like the site to include a bio of her own education, experience and background.

Other points you've noticed:
• Jillian doesn't understand a lot about web design, but is keen to understand your needs.
• The company is quite busy.
You leave the meeting a little dazed and with more questions than when you first entered.


Your (group) task:
• Create a list of tasks for this project.
• Create an initial quote based on one person working on this project (cost and deadline).
• Design a very brief prototype (storyboard or wireframe, no images/designs required just your ideas for structuring the information).
• If you have time, create a list of further information that you need from Jillian.
Reflection
As each group presents their project outline, you might find it helpful to discuss how you came to your decisions in each area. Remember, there's no 'right'
answer – the aim here is more to discover the problems!



Don't Type to Strangers: Creating Advertisements to Prevent Online Solicitations adapted from the NY Times

Applies to Standards:
STATE 3.1, 3.2, 3.3, 3.4, 3.5 4.1, 4.3, 4.4, 4.8 8.1 NATIONAL TECHNOLOGY STANDARDS: CS 1, CS 2, CS 3, CS 4, CS 5, CS 6

Brief Description:
In this activity, students create Web advertisements to protect young people from online predators. For homework, they write letters
pitching their ads and analyzing their effect.
How to Teach It:
Individually, students may write letters formally pitching their ads to the Ad Council and the center in which they explain why they
think their ad will be effective and make suggestions as to how it should be implemented (on which Web sites it should be placed,
how it should be featured, etc.). Letters, with ads included, can be e-mailed to the Ad council at comments@adcouncil.org.

Students may also produce web sites based on the research completed for this assignment. This is at the discretion of the instructor and
as time permits. This may also be given as a homework assignment.

Example: Tell your class to imagine that the Advertising Council and the National Center for Missing and Exploited Children have invited them
to create Web advertisements designed to educate their peers about, and protect them from, online sexual predators. Before describing
the assignment further, you may wish to review the description of the television advertisement in the article. Next, explain that Web
ads, using HTML, Flash, Java, etc. can incorporate elements from print, radio and television advertising. Together, brainstorm a list of
those elements, including headlines, taglines, graphics, interactive images, spoken words, music, etc.

Put students into six to eight small groups; assign half of the groups to design Web ads aimed at teenage girls and the other half to
develop ads for teenage boys. For all groups, the goal is to design simple but striking ads with relevant text and graphics that can (but
need not) be interactive; above all, every element of the ad must come together to drive home the intended message. All groups will
complete the following two-part task (copied into a handout for easier student access):

PART ONE
Work together to brainstorm a Web advertisement, creating a sketch and a brief description of the main ideas.

PART TWO
Each group unites with a group working on an ad for the opposite gender, and each acts as the other's "focus group" - assessing the
other group's ad and providing constructive criticism and positive feedback.


Instruct students to think carefully about the influence that youth and gender have on the ad their partner group designed. They should
also use the criteria discussed in the article to evaluate the ad. Is it scary? Sensationalistic? Informative? etc.

Provide time at the end of class for students to return to their original groups to revise briefly their designs based on their classmates'
feedback, and to present them to the class. End the period with a discussion on the following questions: Are there differences between
the ads aimed at girls and those aimed at boys? If so, what are they? Why? What have you learned about advertising by acting as ad
makers?



Smart Design: Developing Design Solutions to Assist the World's Poor – adapted from www.nytimes.com/learning

Brief Description: In this activity, students share responses to an interactive slide show about a design initiative intended to help the world's poor. They
then work in groups to brainstorm ideas and prepare sketches of their own design solutions. Their material culminates in a future
exhibition.

How to Teach It:
1. Before class, collect a variety of vessels for toting one gallon of water, such as a bucket, bottles, plastic bags and ceramic bowls.
2. Write the following prompt on the board: "Imagine that you have to collect water one mile from your house using one of these
vessels. What challenges might you face? Which might you prefer to use? Why? What factors about the vessel size, shape or
material affected the ease with which you were able to carry the water safely? (Consider weight, density, flexibility, or ability to
conduct heat or cold)."
3. As the first students enter the class, give each a vessel to fill with water. Prompt them to fill the vessels to the top. Back in the
classroom, have all of the students take turns lifting and carrying each vessel. Have them discuss their responses as a class.

Example: Explain to the class that they will work in project teams to develop ideas for toting water in a community such as the Malawi village
profiled in the slide show. As appropriate, tailor the scenario to your curriculum by adjusting for region or issue. For example, you
may want to focus on Mexico, India or Bangladesh for the region and shelter, health or transportation as the issue. In any scenario,
students should have an opportunity to investigate the guiding questions (provided below and adjusted as appropriate to the region)
and use their creativity in developing their designs.

The goal for each team is to prepare a series of sketches that address the main challenges for this population. Rather than trying to
develop a final design, teams will experience the process of using real-world information to produce practical product designs. The
final outcome will be a series of sketches and drawings that demonstrate the ways in which their designs address the main questions,
as well as the challenges they still face in improving their creations.

Arrange the students into four groups and provide the guiding questions as a handout. Prompt students to work in their project teams
to define the challenge they must address. They should use whatever information they have available to help guide their
investigations, such as text books, fact sheets, library resources and computers with Internet access. Online, they may use the M.I.T.
D-Lab Web site (http://web.MIT.edu/d-lab/) as a resource.


GUIDING QUESTIONS
-What geographical concerns might these people confront? How might the terrain affect their ability to carry the water safely? How
might your design help carriers traveling over difficult terrain such as brush, over hills or through the desert?
-How might annual weather conditions impact their journey to and from the water source? How might your solution protect the water
from rain, extreme heat or wind?
-What political concerns might they face? How might regional conflicts or war affect the safety of their journey? How might your
design protect water if carriers are forced to move quickly or drop the water carrier suddenly?
-What personal concerns might they face? How might a person carrying a baby use your design? How might your design adjust for a
person struggling with an illness or injury?

Advise students to discuss design challenges in their groups while devising the initial parameters using the considerations below
(listed on the board and copied in their journals).

DESIGN CONSIDERATIONS
-Size
-Weight
-Durability
-Materials
-Economy
-Sanitation
-Life span
Prompt students to arrange follow-up meetings so they may continue their design developments for homework.

WRAP-UP/HOMEWORK: Students continue to work in their groups to prepare a series of sketches, drawings, computer renderings
and, if possible, three-dimensional models based on their investigations and discussions in class. Sketches should include details of
their design considerations and explanations for how each design element addresses the main challenges. Their final pieces should be
posters (or multiple posters) demonstrating their ideas, as well as a web representation of their hard copy posters.

In the next class, have students post their designs around the class and review each others work. Invite them to ask each other
questions and comment on the design ideas. Which designs do they think are the most feasible, the most creative, the most interesting,
the most beautiful or the most extreme?

Further Questions for Discussion:
-What skill, talent or experience would you consider donating to a cause?
-How might the challenges faced by impoverished populations in the communities profiled in the article apply to those in need in your
own community? How might you help those in your community who don't have access to clean water, shelter or transportation?


Evaluation / Assessment:
Students will be evaluated based on participation in the initial task and discussion, thorough research and completion of their
exhibition materials.



The Many “I’s” in “Team”: Examining the Importance of Unity for a Team’s Success adapted from www.nytimes.com/learning


Brief Description:
In this activity, students learn about the negative behavior of an Olympic athlete and how it has affected his team and his position on
it. They then consider the many reasons why unity is important among the members of an organization and develop Web site mock-
ups focusing on this topic.

How to Teach It:
1. Upon entering class, instruct students to form a tight circle, and give one student a ball of yarn.
2. Hanging on tightly to the tail of the yarn, this student should toss the ball to someone else (preferably across the circle) while
completing the sentence "I appreciate you for…" or “I admire this about you…” After the ball of yarn has been passed to everyone
in the circle, ask the students to look at the design of the web they have created.
3. With all students still holding onto the yarn, discuss the following: How do students feel when they hear compliments about
themselves? How did the class work together to create the design of the web, and how does this activity relate to the idea of team
unity? What was the role of the individual in creating this web?
4. Then, ask individual students, one by one, to let go of their parts of the web. Discuss what happens to the web – and the analogy of
the web as a unified team – when the individuals that make up a team are removed from it.

Example: As a class, brainstorm and create a list on the board of organizations that require team unity. Encourage students to think about the
concept of “team” on many levels. Students may list sports teams (as discussed in the article), different school clubs or activities, team
structures in their school, specific businesses, and other organizations. Then, explain to students that today they will be designing
basic mock-ups of Web sites for different types of teams, stressing the importance of unity among their members.

Divide the class into small groups, and have each group select a different team from the list on the board. Each group should respond
to the following questions in order to develop their Web site mock-ups (written on the board or distributed in a handout for easier
student access; students might also spend a few minutes looking at Web sites on classroom computers for ideas):

-On one piece of paper, sketch out a homepage for your assigned “team.” What are the goals of this organization? How does
team unity help achieve these goals? What might be an appropriate motto for this team that would emphasize the importance of
the unity of its members?
-On another piece of paper, highlight the members of the group. What are some of the positive qualities of the members of this


group? How do they work together for the good of the organization? How do they each work independently to contribute to the
success of the team?
-On another piece of paper, develop a recruiting page that describes the work that needs to be done for the organization and
how individuals can contribute to it. What types of people do this organization want to be involved?
-On another piece of paper, design a logo for the organization that illustrates that the organization’s group members act
together to achieve their goal.

Each group should create neat, colorful versions of each of the four pages for their Web site mock-ups and paste them onto a piece of
poster board. At the end of the class, each group should present their Web site mock-ups to the rest of the class, explaining how their
Web site creates a cohesive feeling for the organization.



Capturing the Moment: Creating a Photograph Timeline of the Civil Rights Movement adapted from the NY Times

Applies to Standards: STATE 3.1, 3.2, 3.3, 3.4, 3.5 4.1, 4.3, 4.4, 4.8 8.1 NATIONAL TECHNOLOGY STANDARDS: CS 1, CS 2, CS 3, CS 4, CS 5, CS 6

Brief Description:
In this lesson, students create web photography timelines of the civil rights movement and write web journal/blog entries reflecting on
the capacity of photographs to evoke personal and collective historical memory.
How to Teach It:
1. Before students arrive, select three to five examples of photojournalism from The New York Times (or another publication),
using the News Snapshot on the Learning Network
(http://www.nytimes.com/learning/teachers/snapshot/index.html) as a basic guide.
2. Photocopy and distribute the photos, attach them to the classroom board, or project them so they are clearly visible.
3. Direct students to study the photographs as they write about the following questions (written on the board prior to class) in their
journals: "Look at these photographs and then answer the following questions: What is photojournalism? How is
photojournalism distinct from art, commercial, personal or other photography? To what extent is photojournalism art, and to
what extent does it serve a purpose? What is that purpose? What makes a news photograph important and memorable?"
4. After a few minutes, ask students to share their ideas and record them on the board, making brief but specific comments about
the photographs represented on the board. Define web photojournalism as "journalism that presents a story, primarily through
the use of pictures" (http://www.wordreference.com/definition/photojournalism). Explain that
students will now read an article about the continuing influence of one photograph taken in 1955.

Example: Explain that students will work in pairs to create a web photograph-based timeline of the civil rights movement to commemorate the
anniversary of Emmett Till's murder.

Assign each pair one photograph of the civil rights movement, selected before class from the following Web sites or other sources:
-Picture History (http://www.picturehistory.com/find/start/24?c=160;start=12)
-Kodak: Powerful Days in Black and White
(http://www.kodak.com/US/en/corp/features/moore/mooreIndex.shtml)
-New York Public Library Schomberg Center for Research in Black Culture
(http://www.nypl.org/research/sc/sc.html)
-PBS: "The Rise and Fall of Jim Crow" (http://www.pbs.org/wnet/jimcrow/index.html)

Instruct students to complete the following tasks (copied into a handout and distributed to each pair):


RESEARCH:
-What events does the photograph capture?
-What is the (general) context of these events?
-When and where was the photograph taken?
-Who took the photograph?
-Where was the photograph originally published?
-What effect did the photograph have (if any)?
-Why is the photograph important and/or memorable?

POSTER DESIGN:
-Print the photograph and paste it to a small sheet of poster board (as provided by the teacher)
-Write a concise paragraph on the poster that summarizes the answers to the research questions, focusing on the photograph's import
and influence
-Tape the posters to the board in chronological order with the posters prepared by your peers.

-Students should then complete a web-based version of the poster design created. The journal entries, as well as conceptual designs of
the site should be included on their web site. This site should also be included as a portfolio and may be used as a major project grade
at the discretion of the instructor.

After all completed posters have been attached to the board, give students time to look at each poster, and then regroup as a class to
discuss these questions:
-What story does this timeline tell of the civil rights movement? Is it the whole story? If not, what is missing?
-How do the photographs tell stories? How do they convey information, emotions, etc. that stories cannot?
-Is a story told with images more powerful than one with words? Why or why not? If so, when?


APPENDIX II: NATIONAL TECHNOLOGY STANDARDS ADDRESSED
National Technology Standards for Students to be covered:

Content Standard 1 Basic operation and concepts
• Students demonstrate a sound understanding of the nature and operation of technology systems.
• Students are proficient in the use of technology.

Content Standard 2 Social, ethical, and human issues
• Students practice responsible use of technology systems, information, and software.
• Students develop positive attitudes toward technology uses that support
lifelong learning, collaboration, personal pursuits, and productivity.

Content Standard 3 Technology productivity tools
• Students use technology tools to enhance learning, increase productivity, and promote creativity.
• Students use productivity tools to collaborate in constructing technology-enhanced models, prepare publications, and produce other
creative works.

Content Standard 4 Technology communications tools
• Students use telecommunications to collaborate, publish, and interact with peers, experts, and other audiences.
• Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences.

Content Standard 5 Technology research tools
• Students use technology to locate, evaluate, and collect information from a variety of sources.
• Students use technology tools to process data and report results.
• Students evaluate and select new information resources and technological innovations based on the appropriateness for specific tasks.

Content Standard 6 Technology problem-solving and decision-making tools
• Students use technology resources for solving problems and making
informed decisions.
• Students employ technology in the development of strategies for solving problems in the real world.



Performance Standards
Prior to completion of Grade 12 students will:

4. Demonstrate and advocate for legal and ethical behaviors among peers, family, and community regarding the use of technology and
information. (Content Standard 2)
7. Routinely and efficiently use online information resources to meet needs for collaboration, research, publications, communications, and
productivity. (Content Standards 4, 5, 6)
8. Select and apply technology tools for research, information analysis, problem-solving, and decision-making in content learning.
(Content Standards 4, 5)
9. Collaborate with peers, experts, and others to contribute to a content-related knowledge base by using technology to compile,
synthesize, produce, and disseminate information, models, and other creative works. (Content Standards 4, 5, 6)


APPENDIX III: FURTHER NJ STANDARDS ADDRESSED
Cross-Content Workplace Readiness Standards
1: All Students will Develop Career Planning and Workplace Readiness Skills
2: All Students Will Use Information, Technology, And Other Tools
3: All Students Will Use Critical Thinking, Decision Making And Problem-Solving Skills
4: All Students Will Demonstrate Self-Management Skills
5: All Students Will Apply Safety Principles

CCWRS The Arts (Visual and Comprehensive Language Arts Literacy Mathematics Science Social Studies World Languages
Performing) Health and Physical
Education
Develop Career Under-stand that written Apply mathematics in their Describe work that people Explore employment
Planning and communication can affect the daily lives and in career- perform in our economic opportunities where languages
Workplace Readiness behavior of others. 3.3.15 based contexts. 4.3.10 system. 6.6.3 are advantageous. 7.1.15
Skills
Use Technology, Apply elements and media Take notes on visual Use technology to gather, Use technology to Describe the influence of Use technology to enhance
Information and Other common to the arts to information from films, analyze and display present the design and technology in daily life. language acquisition, and to
Tools produce a work of art. presentations, observations, mathematical data and results of investigation. 6.5.4 acquire current cultural
1.3.1 and other visual media, and information. 4.5.5 information, in order to
report that information develop more accurate
5.2.3
through speaking, writing, or impressions of the culture
their own visual studied.
representation 3.5.10 7.2.13
Use Critical Thinking, Identify and solve design Demonstrate Analyze text for the purpose, Recognize that there may Compare the
Decision-Making, and problems in space, decision-making and ideas, and style of the author. be multiple ways to solve a advantages and
Problem-Solving Skills structures, objects, sound, refusal skills in 3.4.22 problem, weigh their disadvantages of
and/or events for home and situations affecting relative merits, and select alternative solutions to
workplace. 1.6.3 health and safety. and use appropriate practical problems.
2.2.2 problem-solving strategies. 5.4.9
4.1.13
Demonstrate Self- Offer constructive critique Adjust oral communications Reflect on and clarify their Keep a journal record Identify examples of the Communicate and interact in a
Management Skills in the evaluation of their for different purposes and thinking so as to present of observations, rights and responsibilities of limited range of task-oriented
own and others' work in audiences 3.1.2 convincing arguments for recognizing patterns of citizens. 6.1.2 and social situations. 7.1.17
dance, music, theater, or their conclusions. 4.2.10 observations and
visual arts. 1.4.2 summarizing findings.
5.2.4
Apply Safety Demonstrate appropriate Identify how safety principles
Principles use of technology, tools, are taken into consideration
terminology, techniques, in regards to social, cultural,
and media in the creation technological, and economic
of dance, music, theater, or processes that shape the
visual arts. 1.3.2 environment.
6.8.17 6.9.8


Web Design and Development I - 2008

More Related Content

Viewers also liked (14)

Similar to Web Design and Development I - 2008 (20)

More from butest (20)

Web Design and Development I - 2008