1. Spring 2016
Media: Web Page Development & Design Final Project – 30 pts.
Goal
UsingeitherDreamweaverorNotepad++create a two page website basedonatheme usingphotosthat
you’ve takenpertainingtothe subject.
Requirements (Seniors due June 1 and Underclassmen due June 13)
The webpage shouldcontainthe followingelements:
The tab on the webbrowsershouldhave “LastName Final”writteninit. Ex.SitlerFinal
Create a bannerimage that measures900 x 300 pixels witharesolution of 72px (You will need
to use Photoshop toplace and/orresize alandscape photo)
Create a workingnavigationbar
Addone workingsocial mediabuttontoyourpage (YouTube,Twitter,orFacebook).Use the
iconsfromthe ShearsDesignsite
Adda workinglinkthatredirectsyourviewertoanotherwebsite.
Include aroll overeffect onone of your photos(Youwillneedtouse Photoshoptodesaturate
an image)
o Hint:Image => Adjustments=>Desaturate
Change the backgroundcolorof the website.
Change the fontstyle of the <h1> or <p>
Textshouldbe detailedandappeartobe realisticwithnogrammarmistakesorspellingerrors.
One creative orstylisticelementof yourchoice thatmakesthatyour page lookprofessionallike
formattingthe textof the headingsoraddinga stroke line arounda picture.
Photos – minimumof four(banner,roll overphotos,linkphotoandadditional photo)
You may use anyof yournotesor previouswebsite projectstohelpyou. The webpage mustfollowall
of the rulesandprinciplesof gooddesign,linksspecial effectsshouldwork, andcode shouldvalidate
withoutanyerrors.
Project steps
Step 1:
Conference withMrs.Sitlertohave yourtopicapproved.
Step 2:
Designthe website inyourGoogle Drive.
Step 3:
Validate the website andprintouta confirmationof noerrors.
Step 4:
Share finalizedwebsite withall images andvalidationprintout withMrs.Sitlerfora grade. Projectwill
be assessedbasedonthe rubricincluded.
2. Category Superior (5) Sufficient (3) Incomplete (1) Missing (0)
Web Browser Tab in web browser
has students last
name and the word
final.Ex. Sitler Final
usingcorrect
capitalization.
Browser tab has
error in
capitalization.
Browser tab
contains a different
title.
No titlethe tab is
present.
Banner Banner photo is
appropriatesize,
photo is notdistorted
and fills appropriate
space. Enhances the
website.
Banner photo is
appropriatesize
and photo is not
distorted but is
appropriatefor the
website.
Banner photo is
wrong size or
doesn’t follow the
theme
Banner photo is
distorted or of poor
quality. Itdetracts
from the siteor
doesn’t followthe
theme.
Background The background color
of the website is a
color not white that
enhances the website
and theme.
The background
color of the website
is something other
than white. It adds
interest the website
The background
color of the website
is something other
than white. But it
detracts from the
website or makes it
hard to read.
Did not change the
background color
from white. Or
cannot read the
font or text because
of the background
color.
Special Effects Both Effect work and
enhances the website
and reflects the
theme.
Both effect work
but one doesn’t
look likeit belongs
on the website
page.
One effect works
but the other one
does not.
Element is missing,
ineffectively
manipulated or
doesn’t work
correctly.
Content & Photos Website contains 4 or
more high quality
photos and detailed
error-free written text
describingthe theme.
Viewers seem to think
it is an actual website.
Website contains at
least4 photos and
detailed text
describingthe
theme. Viewers
could think it is an
actual website.
Website contains at
least 3 photos and
text describing the
theme, but it is not
comprehensive.
Viewers don’t seem
to think it is an
actual website.
One or more photo
or text element is
missing. Or there
are more than two
mistakes in the text
and information
about the website is
missingor
incomplete.
Link Link is attached to a
photo or text and
works correctly.
Directs users to a link
that reflects the
theme of the website
and enhances it.
Link is attached to a
photo or text and
works correctly.
Directs users to
another website.
Link doesn’t work. Link is missing.
CSS ( formatting
font, color and
spacing)
Design reflects
incorporation of the
css elements of
formatting, spacing
and color. The page is
visually appealing.
Design has
attempted css
formatting, but
issues thatprohibit
it from following
good design
principles.
Little to no css
formatting is
evident.
No css formattingis
evident.
