Web Design

  • Students will gain the skills and project-based experience needed for entry into web design and development careers.
  • Students will be able to use a variety of strategies and tools to create websites.
  • Students will develop awareness and appreciation of the myriad ways that people access the web and will be able to create standards-based websites that are accessible and usable by a full spectrum of users



1. Learn how to effectively design and maintain quality web pages
2. Understand the importance of technology in today’s work and school setting
3. Learn ways to create and manipulate images
4. Understand the rights and responsibilities of the internet, media, and journalists


Section 1: Introduction to the World Wide Web

  • History
  • What is the WWW and how does it work?
  • Impact of the WWW on Society
  • Types of Web Sites and Roles

Section 2: Working With WordPress

  1. Getting Started 
  2. Explore the Workspace
  3. Viewing a Web page and Use Help
  4. Plan and Define a Web Site
  5. Add a Folder and Pages and Set the Home Page
  6. Create and View a Site Map
  7. Developing a Web Page
  8. Create Head Content and Set Page Properties
  9. Create, Import, and Format Text
  10. Add Links to Web Pages
  11. Use the History Panel and Edit Code
  12. Modify and Test Web Pages
  13. 3Working with Text and Images
  14. Create Unordered and Ordered Lists
  15. Create, Apply, and Edit Cascading Style Sheets
  16. Add Styles and Attach Cascading Style Sheets
  17. Insert and Align Images
  18. Enhance an Image and Use Alternate Text
  19. Insert a Background Image and Perform Site Maintenance
  20. 4Working with Links
  21. Create External and Internal Links
  22. Create Internal Links to Named Anchors
  23. Insert Rollovers with Flash Text
  24. Create, Modify, and Copy a Navigation Bar
  25. Create an Image Map
  26. Manage Web Site Links
  27. 5Using HTML Tables to Lay Out a Page
  28. Create a Table
  29. Resize, Split, and Merge Cells
  30. Insert and Align Images in Table Cells
  31. Insert Text and Format Cell Content
  32. 6Performing Web Site Maintenance

(2nd Semester)

Section 3: Working With Adobe Fireworks

  1. 1Getting Started with Adobe Fireworks
  2. Understanding the Fireworks Work Environment
  3. Work with New and Existing Documents
  4. Work with Layers and Images
  5. Create Shapes
  6. Create and Modify Text
  7. 2Working with Vector Tools
  8. Working with Multiple Objects
  9. Modify Multiple Vector Objects
  10. Modify Color
  11. Apply Filters to Objects and Text
  12. Apply a Style to Text
  13. 3Importing, Selecting, and Modifying Graphics
  14. Work with Imported Files
  15. Work with Bitmap Selection Areas
  16. Learn About Selection Areas
  17. Select Areas based on Color

History of the Internet

Watch the following videos (26 minutes total).Each one describes different important aspects of how the Web works, though there is some overlap.

What is the Internet?

What is the internet? How does it work?
The Internet is a network of linked computers, mostly using the telephone network to communicate from one computer to another. Its one function is to move data from one user to another. The great thing about the internet is that it doesn’t matter what kind of data it handles—video, audio, text, images are all passed along in the same way. The World Wide Web is just one way information can be shared on the Internet.


Each computer on the internet is assigned an IP or Internet Protocol address. Since these are a long series of numbers, hard for us to remember, domains were created. Domains are text handles assigned to each IP. This is why you need to register any domain you purchase with the Domain Name System.



Web Developers’ Virtual Library
Building Usable Web Sites

Learning Web Design: A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphicsby Jennifer Niederst Robbins

Syllabus andQuiz01 Syllabus andQuiz01 [Cont.]

Proj01: “Me” Web Page

Proj01: “Me” Web Page[Cont.] Basic Computer Skills: Windows XP Windows XP Quiz

Basic Computer Skills: Using a Web Browser

ForumRegistration andCheck In


Forum Topic 1: Aesthetics

Design Principle #1: Proximity

Proj02: Proximity Poster

Proj02: Proximity Poster[Cont.] Proj02: Proximity Poster– Feedback and Finalized Designs Design Principle #2:Alignment

Proj03: Alignment Poster

Proj03: Alignment Poster[Cont.]
Week 3 Forum Topic 2: Confidence

Proj03: Alignment Poster– Feedback and Finalized Designs

Design Principle #3: Repetition

Proj04: Flyer Redesign Design Principle #3: Repetition

Proj05: Repetition Poster

Proj05: Repetition Poster [Cont.] Proj05: Repetition Poster– Feedback and Finalized Designs
Week 4 LABOR DAY HOLIDAY NON-STUDENT DAY Forum Topic 3: Contrast

Design Principle #4: Contrast

Proj06: Contrast Poster

Proj06: Contrast Poster [Cont.] Proj06: Contrast Poster – Feedback and Finalized Designs
Week 5 Forum Topic 4: Critique

Principles Review(5 pages)

Principles Quiz


Part 1

Part 2


Part 3


Part 4 – Feedback & Refine


Part 4 – Feedback & Refine [Cont.]


Forum Topic 5: Composition

Chapter A: Intro, Lessons 1 & 2

Chapter A: Lessons 3 & 4 Chapter A: Lessons 3 & 4 [Cont.] Chapter A: Lessons 3 & 4 [Cont.] Chapter A: Lesson 5


Week 7 Forum Topic 6: Balance

Chapter A:
Project Builder 1

Chapter A:Project Builder 2 Chapter A:
Design Project
Chapter A:
Group Project
Chapter A:
Group Project[Cont.]Quiz
Week 8 Forum Topic 7: Feedback

Chapter A:

Chapter B: Intro and Lesson 1

Chapter B: Lesson 2 Chapter B: Lesson 2 [cont.] Chapter B: Lesson 3
Week 9 Forum Topic 8: Adding Images to Posts

Chapter B: Lesson 4

Chapter B: Lesson 5 Chapter B:Review TART Showcase Chapter B: Lessons Redux


Week 10 Forum Topic 9: Collaboration

Chapter B: Group Project

Chapter B:Group ProjectFeedback & Refine Chapter B:Project Builder 1 Chapter B:Project Builder 2 Chapter B: Quiz

Forum Topic 10: Hierarchy

Chapter C: Intro and Lesson 1

Chapter C: Lesson 2 New student logins

Chapter C: Lesson 3

Chapter C: Lessons 4 and 5 REDO Day: blooms, rapids and jacobs
Week 12 NON-STUDENT DAY Chapter C:Review Chapter C:Project Builder 1 Chapter C:Project Builder 2 Technical Problems
Week 13



Week 13/14 add on

Technical Problems



What programming languages do you need to know?

Forum Topic 11: Usability

Chapter C:
Design Project

Javascript for beginners



Chapter C:
Group Project

Ruby for beginners



Chapter C:
Group Project[Cont.]

Python for beginners




Demo: Editing images for the Web

Chapter C:
Group Project[Cont.]

Week 14 Chapter C:
Group Project[Cont.]Chapter C: Quiz

Fun project!

Animate your name


Chapter D: Intro and Lesson 1

Chapter D: Lessons 2 & 3
Week 15 Chapter D: Lessons 4 & 5 Chapter D:Review Graphics for the Web – Tutorial 01: Navigation Buttons Chapter D:Project Builder 1 Chapter D:Project Builder 2
Week 16 Chapter D:Design Project Chapter D:Design Project[Cont.]

Chapter D:Group Project

Chapter D:Group Project[Cont.] Chapter D:Group Project[Cont.]


Video: History of Computers
Week 17 Proj 08: Internet History Proj 08: Internet History [Cont.] Chapter D: Quiz

Final Project: Part 1

Final Project:
Part 1
Part 2
Final Project: Part 3

Last Day for Late Work

Week 18 Final Project: Part 3 [Cont.] Final Project: Part 3 [Cont.] END OF SEMESTER

Chapter 16: Intro, Lessons 1 & 2

Chapter 16: Lessons 3 & 4 Chapter 16: Lessons 4 & 5 Chapter 16: Lessons 5 & 6


Chapter 16: Review
Week 20 Martin Luther King Jr. Holiday Unit 6 Special Tutorial: Saving Photoshop Slices for the Web Chapter 16:Group Project Chapter 16:Group Project[Cont.] Chapter 16:Group Project[Cont.]


Week 21 UNIT 7: TABLES

Chapter E: Intro & Lesson 1

Chapter E: Lessons 2 & 3 Catch-Up Day


Chapter E: Lessons 4 & 5 Chapter E: Review
Week 22 Staff Development (no school) Chapter E: Project Builder 1 Chapter E: Project Builder 2 Chapter E: Group Project (skip step 8) Chapter E: Group Project [Cont.]
Week 23 Lincoln’s Birthday Holiday Unit 7 Quiz


Chapter G: Intro & Lesson 1

Chapter G : Lessons 2 & 3 Chapter G: Review Chapter G: Project Builder 1

Project Builder 2

Week 24 Washington’s Birthday Holiday “Design an Ad” Contest “Design an Ad” Contest [Cont.] “Design an Ad” Contest[Cont.] “Design an Ad” Contest [Cont.]
Week 25 “Design an Ad” Contest [Cont.]

Catch Up Day

Unit 7 Special Tutorial: Layout with Layers and CSS Layout with Layers and CSS[Cont.] Layout with Layers and CSS [Cont.] Layout with Layers and CSS[Cont.]
Week 26 Catch Up Day UNIT 9: BEHAVIORS

Chapter K: Intro & Lesson 1

Chapter K: Lesson 2 Chapter K: Review Chapter K: Project Builder 1

Project Builder 2

Week 27 UNIT 10: STYLES

Chapter L: Intro & Lesson 1

Chapter L: Lesson 2 Chapter L: Review Catch Up Day Certificated Holiday (No school)
Week 28 Mid-Term Project: 3-Page Web Site Mid-Term Project[Cont.]


Mid-Term Project [Cont.]


Mid-Term Project [Cont.] Mid-Term Project [Cont.]


Week 29 UNIT 12: HTML & XHTML

HTML Lesson 1

HTML Lesson 2 HTML Lesson 3 HTML Lesson 4 HTML Lesson 5
Week 30 HTML Lesson 5[Cont.] HTML Lesson 6 HTML Lesson 7 HTML Lesson 8 HTML Lesson 9
Week 31 HTML Lesson 10 HTML Lesson 11 HTML Lesson 12 Slideshow: the future of the Web, and the NAB Show Catch Up Day
Week 32 HTML Lesson 13 Putting Your Web Site Online

HTML Lesson 14

HTML Lesson 15

HTML Lesson 16

Week 33 Catch Up Day HTML Lesson 17

HTML Lesson 18

HTML Lesson 19

HTML Lesson 20

Week 34 Catch Up Day Catch Up Day Catch Up Day HTML Lesson 20 HTML Lesson 20[Cont.]
Week 35 HTML Lesson 20[Cont.] XHTML Lesson (direct PDF download) XHTML Lesson [Cont.] XHTML Lesson [Cont.] XHTML Lesson [Cont.]
Week 36 Memorial Day Holiday Rework and resubmit HTML 20 and XHTML [Cont.] CSS 1 Lesson (direct PDF download) CSS 1 Lesson [Cont.]
Week 37 CSS 1 Lesson [Cont.] CSS 2 Lesson (direct PDF download) CSS 2 Lesson [Cont.] CSS 2 Lesson [Cont.] FINAL PROJECT
3 Page Autobiographical Web Site
Week 38 FINAL PROJECT[Cont.] [Cont.] [Cont.] [Cont.] [Cont.]


Unit 1: Designing and Planning Web Pages

Module 1: Basic Site Evaluation and Rubric Creation

Module 2: Color Theory

Module 3: Web Standards & Accessible Design

Module 4: Planning a Website

Unit 2: Creating Pages with HTML

Module 1: Pre-Coding

Module 2: Basic HTML Markup

Module 3: HTML Lists

Module 4: Creating Links

Module 5: Creating a Data Table

Excel Spreadsheets (basics)
We will learn how to create a spreadsheet, do simple math and make titles and graphs
Make a gif and add it to your site!

  1. Glogster: is always a fan favorite since they can add music video and images all in one project.  This virtual poster site is always one that I see multiple times a year.
  2. Photo Story 3: has become a big hit over the past year and a half.  This is a simple video creator that allows students to take a series of images place them in any order and then narrate each image and/or add text to each image. It then generates a movie adding in transitions and panning automatically to the video.  It is simple and creates great short informational videos. They do also have a mac version.
  3. Museum Box: This is a great site for history classes.  Students place items in a box that would help describe a person or event. They can add video, audio, images and text.  This site has led to some great projects.
  4. Goanimate: takes a bit of learning but is a animated video creator that students love to create their projects with.  It generates great animated cartoons that my students have used to explain many different historical events.
  5. Google Search Stories: is a great video creator for quick informational video clips.  It uses the Google search engine and results to tell a story or explain and event.
  6. Picture A Story: allows students to tell stories about history, explain topics or concepts using preloaded images characters and objects.
  7. Flixtime: Is another video creator that allows students to take a series of images ad create great videos to explain concepts or historical events.
  8. Poster 4 Teachers: Is a free program that allows students to create online projects and reports in a poster format.  It also allows them to create simple websites to explain or discuss topics presented in class.
  9. Slideroll: This site allows kids to create simple slide shows to tell a digital story.
  10. Animoto: This site allows students o create professional looking videos projects.  This site is easy and fun for students to use.
  11. Alice.Org:  A animated story creator. That also teaches programming. I have had a few students really get into programming after using this application.
  12. Digital Story Teller: This is similar to Photo Story 3 students can add text and audio to their digital stories.
  13. Kerpoof: Always a favorite site for students to create movies and other digital media.
  14. Fotobabble: This is really a card creator but students have used it in a variety of ways to narrate  a digital story and have used it a segment in other digital projects.

Create a Peanuts character in your likeness:


Screen Shot 2015-09-23 at 3.17.56 PM

Here’s me!!! Does it look like Ms. Shotts?

Find 3 things on the internet that Ms. Shotts doesn’t know about! Can you trick her???

Module 6: HTML Video

Module 7: Reflections

Unit 3: Formatting Web Pages with Style Sheets

Module 1: Introduction to Cascading Style Sheets

Module 2: Color in CSS

Module 3: Typography in CSS

Module 4: The Box Model in CSS

Module 5: The Role of ID and Class in CSS

Module 6: Page Layout Techniques

Module 7: Reflections

Unit 4: Graphics

Module 1: Introduction to Web Graphics

Module 2: Creating a Web Photo Album

Module 3: Creating a Button

Module 4: Creating a Web Page Banner

Module 5: Reflections

Unit 5: Scripting

Module 1: Overview of Scripting on the Web

Module 2: JavaScript

Module 3: Reflections

Unit 6: Quality Control

Module 1: Validating Websites

Module 2: Testing Usability

Module 3: Reflections

Unit 7: Website Management and Authoring Tools

Module 1: Web Authoring Software

Module 2: Publishing on the Web

Module 3: Reflections

Unit 8: Client Website

Module 1: Client Website

Module 2: Reflections


This week, we are going to work through the lessons on CODING.COM. They may seem overly simple at first but we will build up to more difficult code very soon.


Click on the link and let’s work through these lessons!



Let’s start by reading this article about the benefits of hacking. Yep, there are good things about getting behind the scenes of a computer system!

(Content derived from CSU Global)


Now let’s go to Hack High







One thought on “Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s