Project 1
Widgets
Timing:
8 to 12
hours
Project 1-Widgets.pdf file
Project
overview
In
this
project,
students will
use their
knowledge
of design
principles,
HTML, and
CSS to
customize
an existing
widget.
Through
analyzing widgets
and websites,
they will
learn to
identify
purpose and
audience and to
use design
principles to
emphasize
purpose and
audience. They
will also
learn about
the phases
of web production
and
about
publishing
web projects.
The
main focus
of this
project is
for students
to learn
and understand
how CSS
is used
to create
consistency
and allow
for easy
site-wide
changes.
The
emphasis
is
on employing
their
understanding
of design
principles
to inform
the modifications
and customizations
they make
to the
widget’s
Cascading Style
Sheet.
Student
product:
Customized widget
Note:
Portions
of the
Widget
project align
to
the
Adobe
Certified
Associate,
Web
Communication
objectives. Within
the
instruction
steps and
technical
guides,
the specific
learning
objectives
for the
exam are referenced
with
the following
format:
1.1
Project
objectives
At the
completion of
the project,
students will
have developed
the
following
skills:
Project
management
skills
• Designing
for a
specific audience
and purpose
• Understanding
the phases
of web
development
Design
skills
• Designing
for their
audience(s)
• Applying
design principles
• Creating
wireframes
• Creating
design comps
• Learning
basic
HTML
• Understanding
CSS
• Applying
design
aspects
such
as
color, design,
layout, contrast,
and composition
• Integrating
images and
text
• Planning
graphics based
on needs
and audience
Research
and
communication
skills
• Understanding
the role
and purpose
of widgets
• Analyzing
and critiquing
widgets and
websites
• Evaluating
and analyzing
content
validity
• Evaluating
and analyzing
website navigation
• Understanding
copyright
issues
and fair-use
guidelines
• Advocating
and practicing
legal use
of images
• Collecting
and analyzing
audience needs
and purpose to
inform design
• Participating
in a
peer review
• Communicating
and presenting
design decisions
• Giving
feedback
on a project
Technical
skills
Fireworks
• Understanding
the Fireworks
workspace
• Creating
a wireframe
• Creating
design comps
• Preparing
images
Photoshop
• Understanding
the
Adobe
Photoshop
interface
• Resizing,
rotating,
and
cropping images
• Correcting
color
• Retouching
images
• Generating
multiple file
formats
Dreamweaver
• Understanding
the
Dreamweaver
workspace
• Creating
a
new
document
• Using
the Insert
panel
• Inserting
images
• Inserting
text
• Using
the
Widget
Browser
• Inserting
a widget
into an
HTML
web page
• Editing
and customizing
CSS rules
• Using
the CSS
Styles
panel
• Publishing
web
files
Project
materials
• Adobe
Fireworks
CS6 installed
on all
machines
• Adobe
Photoshop
CS6 installed
on all machines
• Adobe
Dreamweaver
CS6
installed
on all machines
• Digital
cameras
• Presentation:
Introduction to
design principles
• Presentation:
Introduction to
page design
principles
•
Worksheet:
Analyzing websites
• Presentation:
Introduction to
HTML and
CSS
• Guide:
Introduction
to HTML
and CSS
• Presentation:
Web
project production
phases
• Fireworks
guide: Overview
of Adobe
Fireworks
CS6 workspace
• Fireworks
guide: How
to create
a wireframe
• Electronic
file:
slideshow_widget_wireframe.fw.png
• Electronic
file:
spry_slideshow_widget_comp1.fw.png
• Electronic
file:
spry_slideshow_widget_comp2.fw.png
• Fireworks
guide: How
to create
a design
comp
• Guide:
Peer
review
Guide: Introduction to digital photography
• Guide: Principles and
rules of copyright
• Photoshop
guide:
Overview
of the
Adobe
Photoshop
CS6
workspace
• Fireworks
guide:
How
to prepare
photographs
• Photoshop
guide: How
to resize,
rotate, and crop
images
• Photoshop
guide: How
to correct
color
• Photoshop
guide:
How
to retouch
photos
• Photoshop
guide: How
to generate
different
file formats
• Dreamweaver
guide:
Overview of
Adobe
Dreamweaver
CS6 workspace
• Dreamweaver
guide:
How to
use the
Adobe
Dreamweaver
Widget
Browser
• Dreamweaver
guide:
How to
work with
text and images
• Dreamweaver
guide:
The Dreamweaver
Insert panel
• Dreamweaver
guide:
How
to
create
and
edit
a
CSS
rule
• Dreamweaver
guide: How
to publish
web files
Background
preparation
resources
•
Technical
and content
information
• Key
terms
• ISTE
NETS*S
Standard
for
Students
• Adobe Certified
Associate,
Web
Communication
objectives
Project
steps
1.
Introduce
students
to the
goals
of the
project.
• Introduce
design principles
• Introduce
HTML and
CSS
• Analyze
widgets and
websites
• Introduce
wireframing and
design comps
• Select
and prepare
images
• Edit
and customize
CSS rules
• Add
a widget
to an
HTML web
page
Introduction
to
design
principles
(Suggested
time: 50–100
minutes)
2.
Introduce
the
concept
of using
design
principles
to
evaluate and
inform
web
design.
Use the
following
presentation to
introduce specific
design
principles.
Presentation:
Introduction
to design
principles
2.3
3.
Show
students at
least two
websites, one
that
is
well
designed
and one
that is
not, and
discuss
them in relation
to consistency
and
visual hierarchy.
Ask
students
to identify
the design
elements on
the sample websites.
Identify visual
elements on
some
of the
web pages
that can
support content
hierarchy,
such as
navigation
scheme,
the
use of
color,
text headings,
fonts (color,
emphasis,
and size),
indentation and alignment,
paragraph
headings, and
lists.
Presentation:
Introduction
to page
design
principles
2.3
4.
Time
permitting, discuss
some or
all of
these design
tips from
Don’t
Make
Me Think:
A Common
Sense
Approach
to
Web
Usability,
by
Steve
Krug (Que
Books,
2005):
• Make
the
most important
things prominent:
larger,
bolder,
near the
top, with
more white
space.
• Relate
similar content
visually:
grouped
by
heading,
lined
up, with
similar
look
or size,
grouped
in an
area.
• Nest
content
visually:
use boxes
in boxes,
have
headings and
indented
subheadings
to
show elements
as parts
of groups.
How
to
analyze
a
widget
(Suggested
time: 50–100
minutes)
5.
Now
that
students
have
an understanding
of
design
principles,
introduce
the use
of widgets
on web pages.
Have
a class discussion
on the
role and
purpose
of widgets,
especially within
a larger
website. Because widgets
vary in
kind and
definition,
some guiding
discussion
points are:
•
Widgets
are useful
applications
that can
be embedded
on
a web
page,
blog,
or social
media
page
to perform
a specific
function. They
display information
and invite
users
to
act in
a number
of ways.
• A
widget
is a
piece
of self-enclosed
code
(usually
a combination
of
HTML,
CSS, and
JavaScript)
that
is often
created by
reusing existing
code or
HTML Snippets.
• Some
widgets are
simple and
provide
an enhanced
user experience.
Examples include
accordions,
tabbed
panels, buttons,
dialog
boxes,
pop-up
windows,
selection
boxes, toggle
switches,
and
slide shows.
• Some
widgets
are small
applications
that open
up to a
larger
application. Examples
of
this
kind
of widget include
stock quotes
and news;
search
boxes
for Google,
eBay and
other popular
search- based
websites; clocks
and counters;
games;
feeds;
and
more.
6.
Show
students a
variety
of
widgets
and help
them identify
the specific
purpose
and functionality
of each.1.2
Discuss
the following:
• What
is the
purpose of
the widget?
• What
is its
functionality?
• Who
is the
audience?
• Who
created
the widget?
Note:
You
might
gather
some
popular
widgets
showing
various
functionalities
and
purposes.
The Adobe
Dreamweaver
Widget
Browser includes
a variety
of widgets
to show
your
students.
To
access the
Widget
Browser in
Dreamweaver,
create
a new
HTML document
and, under
Insert, select
Widget
and then
select
Widget
Browser
in the
dialog box.
The
Widget
Browser
is
an
Adobe AIR
application you
will be
required to
install on
your computer.
You
will need
to create
a free
Adobe ID
to access
the Widget
Browser and
download widgets.
Student
computers
will need
access to
the
Widget
Browser for this
project, so
take the
installation
and Adobe
ID requirements
into consideration
when you
are preparing
to
teach
the project.
How
to
analyze
websites
(Suggested
time: 50–100
minutes)
7.
Now
that you
have discussed
widgets,
explain
that you
will
now look
at
websites. Begin
with
a general
class
discussion
about
the purpose
and
audience
of a
website.
Identify
the
kind
of information
that determines
purpose, audience,
and
audience
needs.
Focus
the discussion
on
websites
that have
sections targeted
to a
variety of
audiences.
For example,
you
might
contrast
the
PBS site
for adults,
www.pbs.org,
with
their site
for kids,
www.pbskids.org,
discussing
the following:
• Purpose
of the
site
• Audience
for
the
site
• How
the
site uses
design principles
to
emphasize
purpose
and audience
8.
Demonstrate
website
analysis
techniques.2.1
Criteria
for evaluating
sites might
include
the
following:
•
Design
•
Visual
layout
• Consistency
structures
• Color
scheme
•
Visual
hierarchy
elements
• Content
• Bias
• Currency
• Source
• Ability
to
corroborate
information
9.
Divide
the
class
into
small
groups and
ask
each
group
to evaluate
your
school’s
website
for design
and content.
Worksheet:
Analyzing
websites
1.1, 1.2,
1.3,
1.5, 2.3
Note:
If
your
school
does
not
have
a
website
or the
website
is not
conducive to
this activity,
you can use
another website
that is
relevant
to
your
students.
10.
When
students have
finished evaluating
your school’s
website
for
design
and consistency
elements,
open the
website
in a
web browser,
select
Source (or
Page Source)
from the
View
menu,
and
show students
the
source
code.
Briefly
explain
what HTML
is and
how
it works.
Briefly explain
Cascading
Style
Sheets
and why
it is
important
to use
CSS
when
creating
designs.
Presentation:
Introduction
to HTML
and
CSS
2.1,
4.1
Guide:
Introduction
to
HTML
and
CSS
2.1, 4.1
11.
Briefly
demonstrate what
tags to
include on
every
HTML
document
(<HTML>, <HEAD>,
<TITLE>,
<BODY>).4.1,
5.6
12.
Briefly
discuss the
importance of
CSS as
follows:2.1
• Simplifies
text
formatting
• Enables
design of
consistent-looking
pages
• Enables
site-wide
changes
13.
Briefly
discuss best
practices
for using
CSS and
introduce
the three
main
types of
CSS
styles: Class,
Tag,
and
ID.2.1
Using
the source
code,
show
students
where
and
how
CSS
was
used
on the
school’s website.
Wireframes,
design
comps,
and
customizing
a
widget
(Suggested
time: 100–150
minutes)
14.
Explain
that in
another
project they
will
go through
each
phase of
the production
process.
However,
for this project
they will
only be
working with
wireframes
and design
comps
to
assist them
in customizing the
Spry Image
Slideshow with
Filmstrip
for use
on the
school’s
website.
Note:
If
your
school
does
not
have
a
website
or the
website
is not
conducive to
this activity,
you can add
the widget
to another
website.
15.
Briefly
discuss and
define the
phases
of a
web project:
• Define:
◦ Goals,
target
audience,
content,
and delivery
requirements for
the project
◦ Project
plan
◦ Content
production
•
Structure:
◦
Information
architecture
and
design
document
◦ Flowchart
to portray
the overall
structure of
the site
◦
Wireframes
to block
out the
basic
structure of
site pages
• Design:
◦ Design
of comps
to
provide
detailed alternative
designs
◦ Review
of
comps
with client
to
ascertain
client’s
design
preferences
◦ Redesign
based
on client
feedback
◦ Production
storyboard
◦ Prototype
• Build
and test:
◦ Site
production
based
on storyboards
◦
Technical
and usability
testing, recording
bugs
and
design-change
requirements
◦ Revision
based
on test
results
◦
Technical
and usability
testing of
revised site
◦ Final
presentation to
client
and final
revision
• Launch:
◦ Launch
plan
Presentation:
Web
project
production
phases
1.6
16.
Ask
students to
think about
their
widget
and
the
design elements
that
would
make
it consistent.
Some guiding
questions:
• What
font will
you use
for titles
or headings?
• What
color will
you use
for titles
or headings?
• What
font will
you use
for descriptions?
• What
color
will
you
use for
the
description
font?
• How
will your
navigation
bar
and text
navigation
help
visitors
know
where
they
are?
17.
Introduce
students
to
the
interface,
terminology,
and basic
panels and
tools in
Adobe Fireworks
CS6.
Briefly
demonstrate how
to create
a
wireframe
in Fireworks,
explaining
that
students
will
re-create
a wireframe of
their school’s
website, showing
where
the widget
will be
placed on
the page.
A wireframe of
the Spry
Image Slideshow
widget is included
for students
to use
in this
exercise.2.5
Fireworks
guide:
Overview
of
Adobe
Fireworks CS6
workspace
Fireworks
guide:
How
to
create
a wireframe
Electronic
file:
slideshow_widget_wireframe.fw.png
18.
Allow
students
time to
re-create
a wireframe
of the
home page
on their
school website.
19.
Introduce
the concept
of a
design
comp,
an
electronic
drawing that
shows a
detailed design
of a
web page
or project.
Show a
sample design
comp to
discuss
and emphasize
the following:2.4
• Mood:
A comp
is the
first impression
of what
a project
will really
look like.
The comp
should immediately
convey an
appropriate
message,
such
as
fun,
serious,
youthful, organized,
trendy,
or family-oriented.
• Color:
Colors
should
be
well
coordinated,
fit the
mood
and
tone
of the
project,
and
provide
enough
contrast for
legibility.
Discuss web-safe
colors and
decide whether
it’s
appropriate for
students to design
only with
web-safe
colors.
Time
permitting,
show Adobe
Kuler
(http://kuler.adobe.com)
to students and
explain how
they
can
use this
web
service
to
create
and save
custom
color palettes
for any visual
design project.
• Fonts:
Vary
fonts sparingly
to be
effective;
consider
how size
and weight
draw attention.
Most web-based
projects
are designed
with
one
or
two
fonts,
using size,
color,
and
boldface for
further distinction.
Make
sure
the
contrast
between the
font
and
background
colors
is adequate
to make
the text
legible. Discuss
which fonts
are common
on
Windows
and
Macintosh
operating
systems.
• Images:
Images reflect
content
and
mood.
Photographs
should
be
of highest
quality.
Text
used with an
image should
be close
enough to
be visually
associated
with the
image. An
organization logo
should be
properly
positioned,
sized, and
so on.
•
Text:
Web
visitors are
more likely
to
skim than
to read
carefully.
The biggest
challenge is
to use only
as much
text as
is necessary
to
convey
key
messages.
Organize
the text
so visitors
can
scan
it to find
relevant information.
• Navigation
elements: Buttons,
menus,
and navigation
bars should
all reflect
the site’s
mood and integrate
effectively
with
site
colors,
fonts, and
images.
Electronic
file:
spry_slideshow_widget_comp1.fw.png
Electronic
file:
spry_slideshow_widget_copm2.fw.png
20.
Ask
each
student
to make
at least
one design
comp of
the Spry
Image Slideshow
with Filmstrip,
using
Fireworks.
Fireworks
guide:
How
to
create
a design
comp
21.
After
individuals
have
completed their
comps,
ask several
students
to
share
their design
comps with the
class
for feedback.
Guide:
Peer
review
2.6
Selecting
and
preparing
images
(Suggested
time: 50–100
minutes)
22.
Explain
that students
need
to
select
images
to use
in their
slide-show
widgets.
Note:
You
may want
to supply
images for
students
to
select
from or
have
students use
digital
cameras
and take
photographs
of images
around
the school.
You
can use
the
following
guides
if you
are asking
students to
take their
own images:
Guide:
Introduction to
digital photography
23.
Emphasize
the importance
of copyright
and protecting
one’s
work by
discussing
copyright rules,
fair- use
guidelines,
and intellectual
property.
Instruct
the students
to
investigate
whether they
need
permission
to
use
any
of
their
images. Have
them
provide
the
appropriate
type
of copyright
citations
and have
them copyright
their own
work.
Guide:
Principles
and
rules
of copyright
1.3
Note:
Depending
on
your
students’
knowledge
of
copyright
issues,
you
might
want
to
discuss
some
or all
of the
following: knowing
when permission
must be
obtained;
the
difference
between
copyrighted
material,
fair use,
intellectual
property,
and derivative
works; and
how to
indicate
that content
is copyrighted.
24.
Explain
that most
images need
to be
edited.
Allow
students time
to
edit their
images in
Adobe
Fireworks
CS6 or
Adobe
Photoshop
CS6 and
introduce
them
to the
interface, terminology,
and
basic panels.
Discuss
and
demonstrate
the
purpose
of layers
in
both
Photoshop
and
Fireworks.
Photoshop
guide:
Overview
of the
Adobe Photoshop
CS6 workspace
25.
Using
the
“I do,
we
do,
you
do”
method,
discuss
and demonstrate
the following
techniques
to help students
make
their pictures
the best
they can
be for
their slide
shows:
• Navigating
images: Demonstrate
the tools
for navigating
images, rotating
the canvas,
and panning and
zooming.
• Cropping
and
straightening:
Use the
Crop
tool
to
remove
unwanted elements
of
a photograph.
• Resizing:
Use
the image
and canvas
size tools
to adjust
the
size
of the
image.
• Adjusting
color: Use
the tools
in the
adjustment panel
to automatically
correct color.
• Retouching:
Use the
Clone
Stamp
to remove
unwanted
elements,
use the
Spot Healing
Brush
to touch up
small
areas,
or use
the Red
Eye tool
to remove
red
eye.
• Resolution:
Use
Resolution Check
to prepare
the image
for web
output.
• Experimenting:
Experiment
and
keep
track of
your
changes
by using
the History
panel
and remove unwanted
steps with
the
Undo
panel.
Fireworks
guide:
How
to prepare
photographs
Photoshop
guide:
How
to resize,
rotate, and
crop images
Photoshop
guide:
How
to correct
color
Photoshop
guide:
How
to retouch
photos
Photoshop
guide:
How
to generate
different
file formats
Note:
As
you demonstrate
the editing
tools, you
may want
to discuss
the idea
of nondestructive
editing and
emphasize to
students the
importance
of using
adjustment
layers,
filters, and
other methods
for making edits
to their
photos without
changing
the
original images.
26.
Have
students
edit
and
size their
images appropriately
for both
the slide-show
images and
their respective thumbnail
images for
the filmstrip.
Explain
that they
also
need
to choose
the order
in which their
images
should appear
in the
slide
show.
The required
sizes
for the
Spry Image
Slideshow with Filmstrip
are:
• Horizontal
images: 800
px
wide
by 533
px
high
•
Vertical
images:
533
px
wide
by 800
px
high
• Horizontal
thumbnails:
200
px
wide
by 133
px
high
•
Vertical
thumbnails:
133
px
wide
by 200
px
high
Editing
and customizing
CSS
rules
(Suggested
time: 100–150
minutes)
27.
Introduce
students
to the
interface,
terminology,
and workspaces
in
Adobe
Dreamweaver
CS6. Using
the
“I do,
we do,
you
do” method,
discuss
and
demonstrate
the following
techniques:
• Identifying
elements of
the Dreamweaver
interface
• Using
the workspace
switcher
and customizing
the Dreamweaver
workspace
• Showing
the views:
Design, Code,
Split,
Live
• Creating
a
new
document
4.3
Dreamweaver
guide:
Overview
of Adobe
Dreamweaver
CS6 workspace
3.1,
3.6
28.
Introduce
the Adobe
Dreamweaver
Widget
Browser.
Explain
that the
Widget
Browser is
an application that
lets you
preview
and
configure
widgets
using
a visual
interface.
You
can
use the
Widget
Browser to add
widgets
to Adobe
Dreamweaver
so you
can easily
insert them
in your
web pages.
Demonstrate
how to
add the
Spry Image
Slideshow with
Filmstrip
to My
Widgets.
Demonstrate
how to
save
the widget files
to a
computer.
Demonstrate how
to insert
the
Spry
Image
Slideshow
with
Filmstrip
into a Dreamweaver
HTML
document
and/or open
the widget
files from
the saved
location on
the
computer.
Dreamweaver
guide:
How
to use
the Adobe
Dreamweaver
Widget
Browser
29.
Explain
that students
will
now insert
their images.
In Code
or
Split
view,
show students
the location
of the
slide-show
images. Using
the “I
do,
we
do, you
do”
method,
demonstrate
how to
insert their images
into the
Spry
Image
Slideshow
with
Filmstrip
and
how to resize
their images
from within Dreamweaver.
Dreamweaver
guide:
How
to work
with text
and images
4.4,
4.5, 5.4
Dreamweaver
guide:
The
Dreamweaver
Insert panel
3.2
30.
Remind
students
of when
they looked
at the
school’s
CSS.
Explain
that
they will
now change
the font, text,
color,
borders,
and so
on in
the
Spry
Image Slideshow
with
Filmstrip’s
CSS style
sheet according
to their
design
comp.5.1
Note:
Dreamweaver provides
an option
for customizing
the widget
from within
the
Widget
Browser, but
by
doing
so
the students
will
not
learn
how
to
make
direct
changes
to a
CSS style
sheet.
You
can mention
that in
the future
students can
customize
the CSS
styles in
the widget
from within
the
Widget Browser.
31.
Demonstrate how
to open
the widget’s
Cascading
Style
Sheet
file (basic_fs.css)
from the
CSS styles panel.
Using
the
styles
in the
CSS
file, go
through
the style
features
on the
CSS
Styles
panel
to
show
students the
types
of styles
and rules
used
to create
the CSS
in the Spry
Image Slideshow
with Filmstrip
widget.
Dreamweaver
guide:
How
to create
and edit
a CSS
rule
3.3,
5.1,
5.2,
5.8
32.
Ask
your students
to
customize
the basic_fs.css
file
according
to their
design
comps.
Ask
students
to select
a style
in the
CSS
Styles
panel and
make changes
to an
existing property.
Then ask
them to
make a change
to the
features
of the
style to
see how
the change
is implemented
on the
page.
(They
can
click Apply
to see
changes
without closing
the dialog
box if
they use
the Edit
Style
button.)
Note:
Time
permitting,
have students
create
a new
style and
add it
to the
CSS file.
33.
Demonstrate
how
to use
Live
view
to see
how their
widgets
look and
function
according
to changes
they
make
to the
CSS file.
Encourage them
to make
any necessary
revisions.5.2
Adding
a customized
widget
to
a
web
page
(Suggested
time: 50–100
minutes)
34.
Once
the students
have
finalized their
widgets,
have
them save
their widget
files.
Explain that
widgets
are saved
as Spry
folders, with
all
relevant
CSS, JavaScript,
images, and
so on.
35.
Explain
that students
will now
publish and/or
display
their widgets.
Choose
from several
options, depending
on
time and
resources.
Have
your
students
publish
and/or
display
their
widgets
in one
of
the following ways:
• If
you don’t
have access
to a
web
server,
have
students
use Preview
In Browser
to display
the HTML page
with their
widget.
Explain
that to
preview
their widget
in a
web browser,
they need
to select
File >
Preview In
Browser
and select
their preferred
web
browser.
If they
have
not
already saved
their
HTML
file,
they will
be required
to
do so
before previewing
it.
• Have
students
publish
the blank
HTML page
with the
inserted widget
to a
web
server.
• Obtain
the
HTML
file for
your
school’s
home
page and
have students
insert
their widgets
where they were
intended to
go based
on their
wireframes
and either
preview
the home
page or
publish it to
a web
server.
Dreamweaver
guide:
How
to publish
web files
6.5
Note:
If
you are
preparing your
students
for the
Adobe Certified
Associate,
Web
Communication
exam, publishing
files to
a remote
server is
a certification
objective
and should
be
covered
here. However,
students will
also have
the opportunity
to publish
a website
in Project
3:
Web
development and deployment.
Presenting
their
work
(Suggested
time: 30–50
minutes)
36.
Ask
several or
all
of your
students to
present
their
widgets
to the
class,
explaining
where they
would place
the
widget
on the
school’s
home
page,
the
reasons for
the placement,
and what
customizations
they
made
and
why.2.6
Extension
activities
You
can extend
the project
in
the
following
ways:
•
More
design investigation:
Add
more
graphic
design
exploration
to this
activity
by
having
students
use the Internet
to find
examples
of
each
design
principle.
• Research:
To
provide students
with a
deeper foundation
in
Cascading
Style
Sheets,
you might
have teams of
students
spend some
time researching
topics
and then
present their
findings to
the class.
Topics
could
include
the following:
◦ The
emergence
of CSS
◦ The
current
standards
around
CSS
from the
W3C
◦ The
benefits
of
using
CSS
•
Student
Seminar
Introduction:
You
might
ask
a small
student group
to review
Using Dreamweaver
or the online
Dreamweaver
Support Center
(in the
Dreamweaver
Help menu)
to research
how to
set
up the local
site and
root folder.
This
group can
then report
to
the
class
the
reasoning
for setting
up the
site and
why
doing
so is
important.
• Reflection
supplement: Ask
students to
write up
the decisions
they
made
in planning
their
widgets.
This
document will
help students
reflect on
their process
and provide
a framework
for
the
next time they
plan a
website.
• Interview:
To
help students
better
understand
the importance
of creating
a wireframe
for a
website, find a
web designer
students can
interview
about the
planning process.
•
Technical
Help in
the Classroom:
To
encourage
students to
develop
self-sufficiency
when
seeking help,
you can
assign a
small group
or pair
of students
to research
challenging skills
and present
their findings to
the
class.
Ask
them to
define
key terms
(such
as
optimization)
and to
explain the
relevance of
these terms
to the
task
at
hand. Then
ask
students to
give a
three- to
five-minute oral
report at
the beginning
of
class,
demonstrating
the skill
and
reporting
their findings.
• Fast
finishers:
For students
who finish
early,
ask them
to export
their widget
to Flash
and build
a mobile
or
tablet
widget
or
have
them publish
their
widget
as a
mobile
application
using
Dreamweaver
and PhoneGap
(http://phonegap.com).
Assessment
• Project
rubric
Background
preparation
resources
• Review
the student
step-by-step
guides
referenced in
this project.
•
To
view video
tutorials
aligned
with
the skills
required
to complete
this project,
visit the
Digital Design
CS6
show
on Adobe
TV:
http://tv.adobe.com/show/digital-design-cs6/
• For
more teaching
and learning
resources
on widgets
and other
topics
in this
project,
search for resources
from the
community
on the
Adobe Education
Exchange:
http://edexchange.adobe.com
• For
an overview
of the
interface and
for more
information
on the
technical
aspects
of Fireworks,
see
Fireworks
Help.
• For
an overview
of the
interface and
for more
information on
the technical
aspects
of Dreamweaver,
see
Dreamweaver
Help.
Key terms
• Cascading
Style
Sheets (CSS)
• copyright
•
design
comp
•
design
principles
• HTML
• HTML5
• widget
• wireframe
ISTE
NETS*S Standard
for Students
This
project is
aligned
to the
ISTE NETS*S
Technology
Standards.
Depending on
the
subject and
content area the
student selects
you may
research
your own
state
content
standards
to see
how this
project aligns
to your state
requirements.
ISTE
NETS*S: Curriculum
and Content
Area
Standards
– NETS
for
Students
1.
Creativity
and
Innovation
Students
demonstrate creative
thinking,
construct
knowledge,
and
develop
innovative
products
and
processes
using technology.
Students:
a. apply
existing
knowledge to
generate
new
ideas,
products, or
processes.
b. create
original works
as
a means
of personal
or group
expression.
2.
Communication
and Collaboration
Students
use digital
media
and environments
to communicate
and work
collaboratively,
including at
a distance,
to support
individual
learning and
contribute
to the
learning of
others.
Students:
a. interact,
collaborate, and
publish
with
peers,
experts
or
others
employing
a variety
of
digital environments
and
media.
3.
Research
and Information
Retrieval
Students
apply
digital
tools
to
gather,
evaluate,
and
use information.
Students:
b.
locate,
organize,
analyze,
evaluate, synthesize,
and ethically
use information
from a
variety of sources
and media.
4.
Critical
Thinking and
Problem Solving
Students
use critical
thinking skills
to plan
and conduct
research, manage
projects, solve
problems and make
informed
decisions
using
appropriate
digital tools
and resources.
Students::
b.
plan
and manage
activities to
develop a
solution or
complete
a project.
5.
Digital
Citizenship
Students
understand
human, cultural,
and
societal
issues related
to technology
and practice
legal and ethical
behavior.
Students:
a. advocate
and
practice
safe,
legal, and
responsible
use
of
information
and
technology.
6.
Technology
Operations
and
Concepts
Students
demonstrate a
sound
understanding
of
technology
concepts,
systems,
and operations.
Students:
a. understand
and use
technology
systems.
b.
select
and use
applications
effectively
and productively.
Adobe
Certified Associate,
Web
Communication objectives
1.1
Identify
the
purpose,
audience,
and
audience needs
for a
website.
1.2
Identify web
page content
that
is relevant
to the
website
purpose and
appropriate for
the target
audience.
1.3
Demonstrate knowledge
of standard
copyright rules
(related terms,
obtaining permission,
and citing copyrighted
material).
1.5
Make website
development
decisions
based
on your
analysis
and
interpretation
of design
specifications.
1.6
Understand project
management
tasks
and responsibilities.
2.1
Demonstrate general
and Dreamweaver-specific
knowledge
of best
practices for
designing a
website, such as
maintaining consistency,
separating content
from
design, using
standard fonts,
and utilizing visual
hierarchy.
2.3
Demonstrate
knowledge
of page
layout
design
concepts
and
principles.
2.4
Identify basic
principles of
website usability,
readability,
and accessibility.
2.5
Demonstrate
knowledge
of flowcharts,
storyboards,
and
wireframes to
create
web pages
and a
site
map
(site
index)
that
maintain the
planned website
hierarchy.
2.6
Communicate
with
others
(such
as peers
and
clients) about
design plans.
3.1
Identify elements
of the
Dreamweaver interface.
3.2
Use the
Insert
bar.
3.3
Use the
Property inspector.
3.6
Customize the
workspace.
4.1
Demonstrate
knowledge
of Hypertext
Markup
Language
4.3
Create,
title, name,
and save
a web
page.
4.4
Add text
to a
web
page.
4.5
Insert
images
and
apply
alternative
text
on
a web
page.
5.1
Set and
modify
document
properties.
5.2
Organize
web-page layout
with
relative and
absolutely positioned
div tags
and CSS
styles.
5.4
Modify images
and
image properties.
5.6
Use basic
HTML
tags to
set up
and HTML
document,
format text,
add links,
create
tables,
and
build ordered
and unordered
lists.
5.8
Use CSS
to implement
reusable
design
6.5
Publish and
update site
files to
a remote
server.
Assessment
|
|
0 -
Does not
meet
expectations |
3 - Meets
expectations |
5 -
Exceeds expectations |
|
Website
evaluation |
Absent
or incomplete. |
Website
evaluation includes visual
representation with copyright
documentation,
analysis
of design
features,
and content
validity. |
Website
evaluation includes
visual
representation with copyright
documentation.
Evaluations include
a complete analysis
of
design
features and
content validity as
they relate
to
effectiveness
of site
for its audience
and
purpose. |
|
Widget
wireframe |
Absent
or incomplete. |
Wireframe
re-creates school
website and includes
placement
of widget. It
is based
on design
principles
and includes information
on placement
and navigation choices.
Students
clearly explain
design
decisions
for the
widget. |
Wireframe
re-creates school
website and includes
placement
of widget.
It is
based on design
principles
and includes
information on
placement
and
navigation
choices.
Students
clearly explain
design
decisions
for the
widget. Explanations
also include synthesis
of information from
widget
and
website analysis. |
|
Design
comp |
Absent
or
incomplete. |
Student’s
design
comps
accurately
reflect audience,
goals,
color
choices,
mood, images, text,
and
navigation
choices.
The selected
comps
reflect
a variety
of
approaches
to
the
design.
The
design comps
match the
overall
design
of the
website the widget
is designed
for. |
Student’s
design comps accurately
reflect
audience,
goals,
color
choices,
mood, images, text,
and navigation
choices.
The selected
comps reflect
a variety
of approaches
to
the
design.
The
design
comps match
the overall
design
of the
website the widget
is designed
for and
the
students
can
clearly
articulate the
ways the design
principles
are
implemented
to impact
the audience. |
|
Image
manipulation |
Absent
or incomplete. |
Student
correctly uses color
correction, selection
tools,
and
retouching
tools to
manipulate
images and focus
the composition
on the subject.
Alterations to the
image support
the original meaning
of the image. |
Student
correctly and appropriately
uses color correction,
selection
tools, and
retouching
tools
to manipulate
images and focus
the composition
on the subject.
Alterations to the
image support
the original meaning
of the image. |
|
|
0 -
Does not
meet
expectations |
3 - Meets
expectations |
5 -
Exceeds expectations |
|
Widget |
Absent
or
incomplete. |
Student
understands
CSS styles
and uses
them
to customize a
widget.
Student
creates
CSS styles,
using
a combination
of redefined
styles and
new styles.
Students
publish their
widgets
on an
HTML
web
page. |
Student
understands
and clearly
articulates CSS styles
and their
uses
in customizing a
widget.
Student
creates
CSS
styles, using
a combination
of redefined
styles and
new styles.
Students
publish their
widgets
on the
school website. |