Web Design

Web Design


ISBE Goals

3.B.3a:Produce documents that convey a clear understanding and interpretation of ideas and information and

display focus, organization, elaboration and coherence.

*Students will create a website about chosen topic.

3.C.3b:Using available technology, produce compositions and multimedia works for specified audiences.

*Students will make use of Dreamweaver to create a website about a given topic.

5.B.3b:Identify, evaluate and cite primary sources.

*Students will make use of the Internet to gather information for their website.


EPS Goals

Technology Goal 1:Understand the use of hardware and software in order to effectively use technology in the learning environment.

EPSTS3:Understand basic operations

EPSTS4:Be able to manipulate files

EPSTS5:Use essential and related Computer Peripherals

Technology Goal 2:Demonstrate research skills to seek, gather and evaluate information through the use of technology resources.

EPSTS12:Use the Internet

EPSTS15:Use grade level appropriate researching techniques

Technology Goal 3: Integrate different forms of technology in the creation, presentation, and application stages of product development.

EPSTS8:Use word processing skills

EPSTS9:Create multimedia projects and products

·Students will

  1. learn the basics of the web design software, Dreamweaver.
  2. learn to insert and format tables.
  3. learn to add and format text.
  4. learn to resize images in Photoshop.
  5. learn to add images to web pages.
  6. learn to add rollover and animated images.
  7. learn to create hyperlinks.
  8. consider basic elements of design.


Materials Needed: projector, Dreamweaver 8, Adobe Photoshop Elements

research packet, quizzes and other materials are attached and also located inthe “Web Design” binder in the Tech Lab (room B10)

ASSESSMENTS: correlated to the benchmarks and objectives

  1. Research Packet (5.B.3b) (EPSTS12, 15)
  2. Web Design Rubric (3.B.3a, 3.C.3b) (EPSTS 3, 4, 5, 8, 9, 12, 15)
  3. Learning.com lessons (EPSTS3, 12)
  4. Learning.com quizzes (EPSTS3, 12)


whole-group instruction, mini-lessons, independent activities


Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9
Introduction and begin researching topic Research and Dreamweaver introduction Web page layout and Insert and Format Tables and Text Insert and Format Tables and Text Resize and Insert Images Rollover Images Animated Images and Background Images Hyperlinks HTML codes



all project explanations and requirements are attached


Day 1

1.Introduce class and grading

2.Introduce website project

3.Show examples of student websites

4.Students list characteristics of good and bad websites

Day 2

1.Students choose their website topic

2.Pass out research packet and discuss

3.Students begin researching their topic

Day 3

1.Students continue researching their topic

2.Students create their name and images folder

3.Model how to create each web page

4.Students open 5 web pages, name and title each page, and save to their name folder

Day 4

1.Introduce Dreamweaver

2.Model how to create tables and insert text

3.Model how to format and edit text


Day 5

1.Discuss possible ways to set up index page

2.Students sketch the layout of their welcome page

3.Students begin to work on their index page

Day 6

1.Students continue to insert text on their index page

Day 7

1.Students sketch a layout of their other web pages

2.Model how to set up the next web page

3.Students continue to insert and edit text on their web pages

Day 8

1.Students continue to insert and edit text on their web pages – students don’t move on to another page until their done with the previous one

Day 9

1.Students continue to insert and edit text on their web pages


Day 10

1.Model how to resize images and save for web using Photoshop

2.Students find images and format them on Photoshop

Day 11

1.Students continue to resize images and save for web using Photoshop

2.Model how to insert images in Dreamweaver

3.Students begin inserting images into their web pages

Day 12

1.Model how to make changes to rollover images in Photoshop

2.Model how to insert a rollover image

3.Students insert at least one rollover image

4.Students continue to work on their web pages


Day 13

1.Model how to insert animated images and background images

2.Students insert at least one animated image and a background image, if desired

3.Students work on their web pages

Day 14

1.Students continue to work on their webpages

Day 15

1.Model how to create hyperlinks to each web page

2.Students add hyperlinks to their website and continue to work on their website


Day 16

1.Introduce HTML codes

2.Students do the “HTML and Body Tags,” “Tag Basics” and “Attributes” lessons on Learning.com

3.Students take quizzes when finished

Day 17

1.Students do the “Font Color and Size,” “Image Tags” and “Anchor Tags” lessons on Learning.com

2.Students take quizzes when finished

Day 18

1.Students present their website to the class