SYLLABUS – Web Design with HTML and CSS
Palisades Charter High School
Course Name: Web Design with HTML and CSS
Credit: half year
Grades 9-12
Room: G104
Teacher email: kmasihi@palihigh.org
Teacher Name: Ms. Masihi
Teacher voicemail extension: 5119
Course Description
To create effective websites you need to have an understanding of design principles, as well as the essential technology
that is used to deliver and display content to any audience.
The course Web Design with HTML and CSS introduces basic, intermediate and some advanced web page design
techniques. During the course, you will learn about Web design concepts, how to code in HTML and XHTML, style with
CSS ( Cascading Style Sheets), create interactivity with basic JavaScript and learn techniques to edit images for the web
using Photoshop. You will have additional practice opportunities through teacher prepared tutorial presentations and a
fully functional Web editor and design tool such as Dreamweaver.
Prerequisites
Know how to operate a computer
Know how to use the directory system of the computer
Know how locate, save, open files
COURSE OUTLINE
Starting Up
o
o
o
o
o
o
o
Ms. Masihi
About Web Design with HTML and CSS Digital Classroom
Prerequisites
System requirements
Understanding menus and commands
Understanding how to read HTML and CSS code changes
Loading lesson files
Video tutorials
1
o
o
1.
Hosting your websites
Additional resources
Lesson 1 - Planning Your Website
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
2.
Lesson 2 - Fundamentals of the Web
o
o
o
o
o
o
o
o
o
o
o
o
3.
Starting up
The goals of the web design
The difference between print design and web design
The web demands user interaction
Defining the user experience
User-centered design
The Stages of the planning process
Defining goals and strategy
Research
Scenarios and characters
Information architecture
Defining the navigation design of the SmoothieWorld site
Rethinking site navigation
The role of usability testing
Wireframes, prototypes and mockups
Be creative during the planning process
Self study
Review
Starting up
How web pages work
The internet and World Wide Web domain names
Domain names and hosting
The language of the web
The evolution of the web
The evolution of the web and web standards
Separating structure, style and interactivity
Designing for the web
Know your audience will read your web content
Self study
Review
Lesson 3 – Web Design Tools
o
o
o
o
o
o
o
Ms. Masihi
Starting up
Web editors versus WYSIWYG tools
Plain text editors
Text editors for web design
WYSIWYG editors
Defining sites in Dreamweaver or Expression Web
Obtaining Expression Web or Dreamweaver
2
o
o
o
o
4.
Lesson 4 – Fundamentals of HTML, XHTML and CSS
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
5.
Creating a new site in Dreamweaver
Importing an existing site into Dreamweaver CS5
Creating a new site in Expression Web
Review
Starting up
Web languages
Web page structure is based on HTML
The details of XTML lets the web syntax
Doctype lets web browser know what to expect
The W#C and page validation
HTML structure
Placing images in HTML
The role of CSS
Styling a heading
Understanding class styles and <spans>s
Three ways to use styles
Internal versus external style sheets
Creating an external style sheet
What makes styles cascading
Self study
Review
DW project1 and accompanied PowerPoint presentation Tutorials
Lesson 5 – Graphics, Color and Transparency
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
Ms. Masihi
Starting up
Optimizing graphics for the web
Resizing the image
Adjusting he image size
Applying the UnSharp Mask filter to an image
Selecting the best image format
Choosing the right file format
Choosing the best file format for your image
Saving images as JPEGS
Choosing the quality of the a JPEG
Previewing your image
Creating a transparency effect in a JPEG image
Saving your settings
Saving images as GIFSs
Optimizing the GIF image
Using the color table
Adding a matte to a GIF
Animating a GIF
Saving as a PNG
Slicing an image
Viewing the completed file
3
o
o
o
o
o
6.
Lesson 6 – Formatting Text with CSS
o
o
o
o
o
o
o
o
o
o
o
o
o
o
7.
Starting up
The importance of typography on the web
Setting a font-family
Sizing text with CSS
Pixels and points are not the best choices
Using a combination of percent and the em measurement
Using margins to modify the space between your text
Setting paragraph line-height
Transforming text with CSS
Working with HTML lists
Styling HTML lists
Self Study
Review
DW project2 and accompanied PowerPoint presentation Tutorials
Lesson 7 - Introduction to CSS Layout
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
8.
Creating Slices
Changing the attributes of the slices
Saving slices out of Photoshop
Self Study
Review
Starting up
Working with a CSS reset file
A brief history of layout techniques on the web
An overview of page layout options
Understanding <div>s: creating a two-column fixed-width CSS layout
Understanding he CSS float property
Creating columns with the float property
Working with the clear property
Creating a list-based navigation using floats
Adding text styles
The effect of margins and padding on your fixed-layout
A review of using margins and padding for layout
Styling your footer with background image
Self study
Review
DW project 3 and accompanied PowerPoint presentation Tutorials
Lesson 8 – Advanced CSS Layout
o
o
o
Ms. Masihi
Starting up
Building your page layout
Removing the background color
4
o
o
o
o
o
o
o
o
o
o
9.
Lesson 9 - Browser Compatibility
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
10.
Working with CSS background images
Using hacks to solve layout problems
Enhancing your CSS navigation bar
Moving your internal styles to external style sheet
Creating a style for the active page
Adding images to your sidebar
Working with absolute positioning
Self study
Review
DW project1 and accompanied PowerPoint presentation Tutorials
Starting up
Why browser testing is important
Are web pages required to look the same in all browsers
Choose the level of browser support you want
The special case of IE6
Virtualization solutions for the Mac OS
Virtualization solutions for
Browser compatibility applications
Addressing browser incompatibilities with CSS fixes
Addressing Internet Explorer 6
Issues with Java Script
Browser incompatibilities in the future
Future browser compatibility issues
Self Study
Review
Lesson 10 – Introduction to Interactivity
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
Ms. Masihi
Starting up
Interactivity on the web
JavaScript
Adobe Flash
JavaScript basics
JavaScript events
Placing your JavaScript into an external document
The Document Object model
JavaScript frameworks
Hiding an element with jQuery
Adding an event to trigger the show effect
Adobe Flash overview
Generating code to add Flash movies to a page
Integrating Flash into a pre-existing design
Inserting Silverlight content into a web page
Self study
Review
5
11.
Lesson 11 - Mobile Design
o
o
o
o
o
o
o
o
12.
Study up
The need for mobile-optimized websites
How is the mobile experience of the web different than the desktop?
Deciding which type of mobile device to target
The trouble with style sheets
Using CSS3 media quires
Self Study
Review
Lesson 12 – HTML5 Essentials
o Starting up
o Defining HTML5
o The motivation behind HTML5
o HTML5 markup
o The <video>, <audio> and <canvas> elements
o Embed media files using <video> and <audio> elements
o Provide drawing and animation features using the <canvas> element
o HTML5 markup is still evolving
o Grouping headings and images
o Identifying figures and captions
o Web forms
o The rest of the HTML5 family
o Geolocation
o Web Workers
o Web Storage
o CSS3 integration with HTML5
o How to begin using HTML5/CSS3
o Starting with an HTML foundation
o Words of encouragement
o Self study
o Review
Course Structure
There are more than 56 lesson projects, review questions, self-study activities, video tutorials, teacher
prepared projects and PowerPoint Tutorial Presentations using a combination of the following software
Text Wrangler, BBEdit and Dreamweaver, Photoshop, Word and PowerPoint where applicable.
Video tutorial – to encourage good listening, practice note taking, and summarizing skills - 15% point
value each
Lesson projects – to read, comprehend and code in HTML – 15% point value each
Ms. Masihi
6
Dreamweaver Project – to read, comprehend and to complete projects to gain experience in using an
industry accepted web editor and design tool – 15% point value each
Self -study activities – to challenge higher level thinking and problem solving - 15% point value each
Review Questions – check for understanding – 15% point value each
Lab rule Compliance and Class Preparedness – to learn to respect rules - 15% weight value
Test – to test memory retention - 10% weight value
Competencies
Web Design grading uses a competency based educational approach by moving control of learning from
the “instructor” to the “learner.” A competency is simply a statement of learning outcomes for a skill or a
body of knowledge. When students demonstrate a “competency,” they are demonstrating their ability to
do something. They are showing the outcome of the learning process. Lots of the things that people do in
their lives can be defined as different competencies job skills, living skills, etc. Mastery levels are
determined by course project rubrics (see below). Students must meet the criteria and demonstrate the
competencies for each project.
Evaluation
Student assessment will be based on individual completion of projects. Completion of projects may be
coding to create the web pages, reading for comprehension and following instruction to complete
projects, response to review questions. Listening to video tutorials and processing of information to
paraphrase and summarize. Self-study activates to promote thinking out of the box and not fearing
experimentation, higher-level thinking and problem solving and several multiple-choice tests to test
memory retention.
Supplemental Materials: Computer, TextWrangler, BBedit, Adobe Dreamweaver, Photoshop,
PowerPoint, Word, Notebook, pen/pencil, digital Lesson files, Presentation Tutorials, internet access,
teacher website and Earphone
Grade Weights: student’s grades are hands on and all projects/tasks/test will be done in the classroom,
mostly on the computer and some work in the personal notebook.
Percentage Grade
90 - 100%
A
80 - 89%
B
70 - 79%
C
60 - 69%
D
Ms. Masihi
7
Below 60%
F
Video tutorial – 15% weight value
Coding Lessons – 15% weight value
Review Questions – 15% weight value
Self-study activities - 15% weight value
Dreamweaver Project – 15% weight value
Test – 10% weight value
Lab rule Compliance and Class Preparedness – 15% weight value
Makeup Work (late, missing, or incomplete assignments)
All assignments in this class will be graded at the student’s computer or from student personal
notebook/copy chapter lesson. If a student is absent, it is the student’s responsibility to talk to the
teacher on what he/she had missed. Also, if the student is not able to make up assignments during class
time, the student needs to be prepared to spend time after school and make up any missing assignments.
Being on time with and presenting projects for grading is the student’s responsibility. Student are
encouraged to work at their own pace however, a misinterpretation of ‘own pace’ to leisurely completion
of assignments has led to the following condition: - Teacher will assign a certain date for the completion
of all assignments for a particular lesson (according to level of difficulty and length of time to complete
them) and students will use this date to help prioritize their work load.
Any work presented after the recommended date will be given half credit (except in very special and
unforeseen circumstances).
In addition, students will be rewarded 15 minutes of leisure time (listening to music, using their phone,
going on to the internet) after completion of all assignments pertaining any lesson. Misuse of this
privilege in any form will result in the privilege being revoked for that student for the entire semester.
Extra Help: Ms. Masihi is available period 7 on Mondays unless attending a meeting, and any other day
during period 7, by agreement.
Ms. Masihi
8
COMPUTER LAB AGREEMENT
1. NO EATING OR DRINKING near the keyboard/mouse/monitor. Food and drinks must stay in
student back pack. 10 points off your grade for non-compliance of each incident
2. NO GROOMING AT ANY THE STATIONS. This includes combing/brushing hair or putting on any
make-up. Students are not allowed to put lotion to any part of their body while in the computer
lab. 10 points off your grade for non-compliance of each incident
3. NO Use of Any ELECTRONIC EQUIPMENT (i.e. cell phone) 10 points off your grade for noncompliance of each incident
4. VANDALISM to any of the equipment, desks, chairs, mouse, keyboard, monitor etc., is NOT
allowed and acceptable. This includes writing on, painting, scratching or any mistreatment.
Dean’s office/suspension of computer use/parental meeting
5. There will be NO USE OF INAPPROPRIATE LANGUAGE, verbal or written in the computer lab.
10 points off your grade for non-compliance of each incident
6. Each student is to MAINTAIN APPROPRIATE BEHAVIOR (staying on task, talking quietly,
remain seated). He or she is not to do anything that disrupts the classroom learning
environment (WALKING AROUND, SHOUTING, BEING LOUD, SLEEPING, STANDING BY THE
DOOR to leave before the bell and before being dismissed, using ELECTRONIC EQUIPs of any
kind including cell phones).
10 points off your grade for non-compliance of each incident
7. NO GAMING/YOU TUBE ) 10 points off your grade for non-compliance of each incident
8. NO inappropriate DESKTOP IMAGE. 10 points off your grade for non-compliance of each
incident
CLASSROOM PROCEDURES
Before the end of each period, students are to show consideration and leave the classroom tidy for the
next group by : 
Students must await teacher’s prompt before twisting the monitors to log in to begin work.

After each session student are to log off their account.

Turn the monitor to face the exit door

Leave the folder to the left of their monitor

Pushing in the chair
Ms. Masihi
9

In addition, the last period students of the day are responsible to shut-down computers properly
(from the apple Menu) to save electricity – pressing the button is CRASHING the computer.

The exit door at the back of the room is the daily access/exit door unless there is an emergency, in
which case both doors must be utilized

The basin/sink at the back is not for student use

Charging personal electronic equipment is not a right but a privilege. It is considered polite and
expected that a student asks permission before such activity.
Cut out the bottom portion and give to your teacher before you are allowed to use the computer and
Keep the top portion for your reference
I have READ and FULLY UNDERSTAND what IS EXPECTED OF ME and ACCEPT to the TERMS as
stated in the above AGREEMENT.
Student Name (Please print)
Period
Date
Student Signature
I have received the Course information for Web Design and have reviewed it with my child.
Parent Signature
Contact email/phone
Date
Ms. Masihi
Fall / Spring
10
(Please circle)
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Starting Up

1








About Web Design with HTML and CSS
Digital Classroom
Prerequisites
System requirements
Understanding menus and commands
Understanding how to read HTML and CSS
code changes
Loading lesson files
Video tutorials
Hosting your websites
Additional resources
Computer Lab Agreement
Classroom Procedures
Launching and
Getting to know the
TextWrangler, BBedit and
Dreamweaver CS6 Photoshop
CS6
PowerPoint environment
How to access course
material
Structure of the
course/grading
11
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 1 - Planning Your Website
2
o Starting up
o The goals of the web design
o The difference between print design
and web design
o The web demands user interaction
o Defining the user experience
o User-centered design
o The Stages of the planning process
o Defining goals and strategy
o Research
o Scenarios and characters
o Information architecture
o Defining the navigation design of the
SmoothieWorld site
o Rethinking site navigation
o The role of usability testing
o Wireframes, prototypes and mockups
o Be creative during the planning
process
o Self study
o Review
Comparison exercise of print
design and web design of the
same company
Video tutorial 1 & summary
Talk-to-Text strategy of
reading - Lesson 1
Self study_lesson1 Design own SmoothieWorld
site on paper
Conduct the usability exercise
on a partner
Review Questions
12
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 2 - Fundamentals of the Web
Video tutorial 2 & summary
3
o Starting up
o How web pages work
o The internet and World Wide Web
domain names
o Domain names and hosting
o The language of the web
o The evolution of the web
o The evolution of the web and web
standards
o Separating structure, style and
interactivity
o Designing for the web
o Know your audience will read your
web content
o Self study
o Review
Talk-to-Text strategy of
reading - Lesson 2
Self study_lesson 2
Identification of what works
and what does not work on a
site
Recognizing the elements that
help keep readers stay on a
site longer
Review Questions
13
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 3 – Web Design Tools
o
o
o
o
o
o
4
o
o
o
o
o
Starting up
Web editors versus WYSIWYG tools
Plain text editors
Text editors for web design
WYSIWYG editors
Defining sites in Dreamweaver or
Expression Web
Obtaining Expression Web or
Dreamweaver
Creating a new site in Dreamweaver
Importing an existing site into
Dreamweaver
Creating a new site in Expression Web
Review
Video tutorial 3 & summary
Talk-to-Text strategy of
reading - Lesson 3
Coding in a plain text editor
and a web editor for behavior
comparison
Review Questions
14
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 4 – Fundamentals of HTML, XHTML and
CSS
o
o
o
o
o
5
o
o
o
o
o
o
o
o
o
o
o
o
Starting up
Web languages
Web page structure is based on HTML
The details of XTML lets the web
syntax
Doctype lets web browser know what
to expect
The W#C and page validation
HTML structure
Placing images in HTML
The role of CSS
Styling a heading
Understanding class styles and
<spans>s
Three ways to use styles
Internal versus external style sheets
Creating an external style sheet
What makes styles cascading
Self study
Review
Video tutorial 4 & summary
Lesson 4 http://validator.w3.org
w3_noncompliant.html
w3_compliant.html
w3c_compliant.html
index.html
styles.css
test.html
Self study_lesson 4
Review Questions
00A_HTML_Tags
D1A_Introduction_to_DW
D1B_DW_Interface_CS6
DW Project 1
15
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 5 – Graphics, Color and Transparency
o
o
o
o
o
o
o
o
6
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
Starting up
Optimizing graphics for the web
Resizing the image
Adjusting he image size
Applying the UnSharp Mask filter to an
image
Selecting the best image format
Choosing the right file format
Choosing the best file format for your
image
Saving images as JPEGS
Choosing the quality of the a JPEG
Previewing your image
Creating a transparency effect in a
JPEG image
Saving your settings
Saving images as GIFSs
Optimizing the GIF image
Using the color table
Adding a matte to a GIF
Animating a GIF
Saving as a PNG
Slicing an image
Viewing the completed file
Creating Slices
Changing the attributes of the slices
Saving slices out of Photoshop
Self Study
Review
Video tutorial & summary
Lesson 5 –
web0501.jpg
web0502.jpg
web0503.psd
web0504.psd
web0505.psd
web0506.psd
web0507.psd
about.html
recipes.html
books.html
store.html
Self study_lesson 5
Review Questions
Setting Up and Defining Your
First Website
Your First DW Web Page
DW Project 2
16
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 6 – Formatting Text with CSS
7
o Starting up
o The importance of typography on the
web
o Setting a font-family
o Sizing text with CSS
o Pixels and points are not the best
choices
o Using a combination of percent and
the em measurement
o Using margins to modify the space
between your text
o Setting paragraph line-height
o Transforming text with CSS
o Working with HTML lists
o Styling HTML lists
o Self Study
o Review
Video tutorial & summary
Lesson 6 –
06_fonts.html
06_sizing.htm
06lists.html
Self study-Lesson 6
Review Questions
DW Project 3
17
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Lesson 7 - Introduction to CSS Layout
8
o Starting up
o Working with a CSS reset file
o A brief history of layout techniques on
the web
o An overview of page layout options
o Understanding <div>s: creating a twocolumn fixed-width CSS layout
o Understanding he CSS float property
o Creating columns with the float
property
o Working with the clear property
o Creating a list-based navigation using
floats
o Adding text styles
o The effect of margins and padding on
your fixed-layout
o A review of using margins and
padding for layout
o Styling your footer with background
image
o Self study
o Review
Assignment (s)
Essential Standard (s)
ESLR (s)
Video tutorial & summary
Lesson 7 –
07_reset.html
07_layoutstart.html
<div> tags
Float property
Clear property
Link tags
Sidebar padding element
Margin rule
Styling footer background
image
Self study_lesson7
Review Questions
Files, Paths and URLs
Horizontal Rule
Review Creating Your First
Web Page
DW Project 4
18
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
9
Competency areas - Unit / Sections
Assignment (s)
Lesson 8 – Advanced CSS Layout
Video tutorial & summary
Lesson 8 –
08_start.html
08_layoutwork.html
08_aboutus.html
08_contact.html
FunkyOrange.png
TropicalKickback.png
Splash.png
Relative/absolute/fixed
positioning
Starting up
Building your page layout
Removing the background color
Working with CSS background images
Using hacks to solve layout problems
Enhancing your CSS navigation bar
Moving your internal styles to
external style sheet
o Creating a style for the active page
o Adding images to your sidebar
o Working with absolute positioning
o Self study
o Review
o
o
o
o
o
o
o
Self study_Lesson 8
Review Questions
DW Project 5
19
Essential Standard (s)
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
ESLR (s)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 9 - Browser Compatibility
10
o Starting up
o Why browser testing is important
o Are web pages required to look the
same in all browsers
o Choose the level of browser support
you want
o The special case of IE6
o Virtualization solutions for the Mac OS
o Virtualization solutions for
o Browser compatibility applications
o Addressing browser incompatibilities
with CSS fixes
o Addressing Internet Explorer 6
o Issues with Java Script
o Browser incompatibilities in the
future
o Future browser compatibility issues
o Self Study
o Review
Video tutorial & summary
Lesson 9 –
Adobe BrowserLab
Windows Virtual PC
Microsoft SuperPreview
Internet Explorer 6 issues
09_radius.html
Self study_Lesson 9
Review Questions
20
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Lesson 10 – Introduction to Interactivity
o
o
o
o
o
o
o
11
o
o
o
o
o
o
o
o
o
o
Starting up
Interactivity on the web
JavaScript
Adobe Flash
JavaScript basics
JavaScript events
Placing your JavaScript into an
external document
The Document Object model
JavaScript frameworks
Hiding an element with jQuery
Adding an event to trigger the show
effect
Adobe Flash overview
Generating code to add Flash movies
to a page
Integrating Flash into a pre-existing
design
Inserting Silverlight content into a
web page
Self study
Review
Assignment (s)
Essential Standard (s)
ESLR (s)
Video tutorial & summary
Lesson 10 –
Subscribe.html
Onclick_show prompt
Name prompt
Onmouseover click
Onmouseover_show prompt
Onload_show prompt
Promptwindow.js
Jquerytoggle.html
triggerCalorieBox
show/hide effect speed
SWFObject_generator.html
Smoothie_ad-swf
flashObjectCode.html
10_insertFlash.html
10_insertSliverlight.html
Self study_Lesson 10
Review Questions
21
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 11 - Mobile Design
o
o
o
12
o
o
o
o
o
Study up
The need for mobile-optimized
websites
How is the mobile experience of the
web different than the desktop?
Deciding which type of mobile device
to target
The trouble with style sheets
Using CSS3 media quires
Self Study
Review
Video tutroial & summary
Lesson 11 –
www.netmarketshare.com
11_home.html
Self study_Lesson 12
Review Questions
22
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
ESLR (s)
Lesson 12 – HTML5 Essentials
o
o
o
o
o
o
o
13
o
o
o
o
o
o
o
o
o
o
o
o
o
o
Starting up
Defining HTML5
The motivation behind HTML5
HTML5 markup
The <video>, <audio> and <canvas>
elements
Embed media files using <video> and
<audio> elements
Provide drawing and animation
features using the <canvas> element
HTML5 markup is still evolving
Grouping headings and images
Identifying figures and captions
Web forms
The rest of the HTML5 family
Geolocation
Web Workers
Web Storage
CSS3 integration with HTML5
How to begin using HTML5/CSS3
Starting with an HTML foundation
Words of encouragement
Self study
Review
Video tutorial & summary
Lesson 12 –
HTML5 and web standards
Embed media <video> and
<audio> files
Web forms
Web storage
Self study_Lesson 12
Review Questions
23
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Core Learning
Critical Thinking
Communication
Technical Education Department – Web Design – Fall 2014 - Ms. Masihi
School
Week
Competency areas - Unit / Sections
Assignment (s)
Essential Standard (s)
Test Review– Lessons 1, 2 & 3
Test
14
Test Review – Lessons 4, 5 & 6
15
Test
Test Review – Lessons 7, 8 & 9
16
Test
Test Review – Lessons 10, 11 &
12
C
Test
24
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
Graphic Arts Standards
A1.0, A1.I, A1.2
Health and Safety 6.0
Reading/language
Arts/Math/Science/History
(See Course Outline)
ESLR (s)
Core Learning
Critical Thinking
Communication
Core Learning
Critical Thinking
Communication
Core Learning
Critical Thinking
Communication
Core Learning
Critical Thinking
Communication
Implementation Process
This is a theoretical as well as a hands on course where students built a fictional website called
‘SmoothieWorld’ however, before they begin coding in HTML, style with CSS and create interactivity using
JavaScript and Silverlight, student must understand and gain an appreciation of the Design fundamentals.
Students will begin reading about the planning process, the technologies supporting the web and the
required web design tools in the first 3 lessons where they will be expected to utilize the ‘Talk to text’
method of reading to define unfamiliar vocabularies, ask questions, make comments, predictions, connect
with prior knowledge, guess, summarize sections of the reading. After which, students transfer their
handwritten work onto the downloaded digital version of the same Lesson to present for grading.
Lessons 4 to 12 teach coding in HTML, styling in CSS3 and creating interactivity with JavaScript in a
lighthearted and fun way. 15% of total grade each
Each lesson accompanies a video tutorial which needs to be listened to using personal ear/head phones as
many times as necessary to build background knowledge. Students are then expected to paraphrase and
summarize their understanding of the tutorials for grading. 15% of total grade each
After which, students will perform independent self-study to enable them to think out of the box, encourage
higher order thinking and problem solving. 15% of total grade each
The review questions are to help check for understanding of the chapter readings. 15% of total grade each
In addition to the above projects, students will have the opportunity to dabble in Dreamweaver (a web editor
and design tool). Students will need to view and follow instructions of the related PowerPoint tutorials to
complete some projects. (how many will depend on time) 15% of total grade each
Students will be tested 4 times throughout this course to test memory recall - each test will carry 10% of the
total grade