-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
1/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
2/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
3/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
4/104
4
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
5/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
6/104
Lastweek,wetalkedabouthowimportantitwasforusalltohaveasolid
understandingofhowthewebworks,whoyouaretryingtoreach(I.e.,the
user),andwhattechnologiesareinvolvedincreatingawebsite
Withoutafirmunderstandingofallofthischancesareyourdesignisnot
goingtowork.So
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
7/104
LastweekIintroducedustooneofourLyndacourses,HTMLEssential
Training.Thosevideosgaveusagreatoverviewofhowthewebworkedand
thetechnologiesinvolved.
Tonightwe
are
talking
more
about
our
role
as
adesigner
and
will
soon
get
intotheWebDevelopmentLifeCycle.ThereasonIwantustowatchthisnext
clipisthatIwantyoutobeginthinkingaboutwhatyoumightuseyournewdesignskillsforandhowtheymightfitintoyourfutureprofession.Itis
importantforustothinkaboutthinkaboutthesethingsfromtimetotime
becauseIdoubtyoutookthisclassjusttolearnhowtogetanAontheterm
project.
WatchVideo
So,whoinherereallywantstobecomeaprofessionalwebdesigner?Why?
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
8/104
Forthepurposesofthiscourse,Iamgoingtoassumethatweallwanttobe
professionalwebdesigners.Inasecond,wearegoingtowatchavideothat
discusesaHobbyistwebdesigner.Eitherway,itisimportanttonotethat
youshouldnottakeanyshortcuts.Butagaininthiscourse,Iamgoingto
assumethatyouwanttobeaprofessional.
Sopleasedonttakeanyshortcutswhencreatingyourtermprojector
learningaboutHTML.Feelfreetogoaboveandbeyondthescopeofthis
class.Thekeyistolearnsomethingnewanduseitorapplyittosomething
thatmeetsyourneeds.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
9/104
So,donttakeshortcutsandusetemplates. Whiletherearetemplatesouttherethatwillcreateabasicsiteforyouandthenallyouhavetodoisgoin
andinsertyourcontent. Thetruthisthatoftenprofessionalsdonotuse
these.Mostlikelyeachsitetheycreatewillneedtobespecifictotheuserand
theirneeds.Theseneedsdonotoftenfitnicelyintoadownloadable
template.So,
please
do
not
take
any
short
cuts
when
creating
your
website
foryourtermproject.
9
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
10/104
10
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
11/104
So,donttakeshortcutsanduseanIDE. Whiletherearetoolsavailablethatwillallowyoutocreateyoursitesvisuallyandthengeneratethecodeforyou,
e.g.,Dreamweaver,NetObjects,ExpressionWeb,Frontpage,VisualBasic,etc.
thetruthisthatveryfewofthosetoolscreateprofessionallevelcode.Ona
sidenoteifyoudoendupwantingtouseoneoftheseafteryouhavetaken
thisclass
please,
please,
stay
away
from
Front
Page.
Ataminimum,aprofessionalwebdesigner/developeryouwillneedtoknow
alloftheinsandoutsofXHTMLandCSSandsoonHTML5.Ihavedesignedthiscoursetogiveyouafoundationinthesetwoareas.Itisuptoyoutobuilduponthatfoundation.Forexample,inyourhomeworkfromlastweekInoticedthatmanyofyouwereexploringstylesandevensomeCSS.ThisisexactlywhatIwanttosee.
So,please
dont
cause
yourself
adisservice
by
using
one
of
these
until
you
leanthebasics.Perhapsyoucantakemyeditorsclassinthespring,wherewe
willlearnhowtouseDreamweaverbasedonwhatyouhavelearnedinthis
class.
11
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
12/104
UserAccessibility,SEO,andMultipleDevicesTemplatesandIDEscannothelpwiththeseissues.Thesearethe
responsibilityofthewebdesigner.LikeIwassayingearlier,adesignerhasto
haveasolidunderstandingofhowthewebworks,whoyouaretryingtoreach
(I.e.,theuser),andwhattechnologiesareinvolved.
12
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
13/104
Doesanyonewanttochangetheiranswerfromearlier?Doyouconsider
yourselfmoreofahobbiestorprofessional?
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
14/104
Soletsgetstartedtodaybyrecapingwhatthosethingsarethatwedesign?
So,aswebdesignerswhatdowedesign?
Ans:RawcontentforthewebthroughtheuseofHTML,CSS,etc.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
15/104
15
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
16/104
16
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
17/104
Wedesigntheseforthewebnotnecessarilycreatethecontentitself.
17
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
18/104
18
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
19/104
Sowhatdoweuseallofthesedesignsfor?Whatdotheyworkon?Whoare
theyfor?Etc.
Ans:Multipledifferenttypesofuseragents,e.g.,browsers,screenreaders,
pads,phones,
etc.
ALL
USER
EXPERIENCES
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
20/104
20
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
21/104
21
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
22/104
22
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
23/104
23
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
24/104
24
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
25/104
Nowletsdiscusshowthesedesignsfunction?Whatdotheydo?Whatdotheyallowtheusertodo?Ans:Ecommerce,forms,databases,searching,navigation,etc.Whatabout
embeddingservices
from
other
sites?
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
26/104
26
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
27/104
27
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
28/104
28
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
29/104
Sothepurposeofthisslideisjusttohithomethefactthatthispurposethat
wehavebeendiscussingistheheartofthewebsite.Whatarewewithoutour
hearts?Arewesuccessful?
Soplease
know
that
awebsite
is
more
than
just
its
HTML
and
CSS
is
has
aspecificpurposetosolveausersproblem.
Thepurposeofawebsiteistheveryreasonforitsexistence!Everyother
elementshouldbebuilt,createdanddesignedtosupportthatpurposein
someway.Ifitisnotsupportingthepurpose?Thenwhatisitdoing?
29
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
30/104
30
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
31/104
31
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
32/104
32
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
33/104
33
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
34/104
Allofthesethingsshouldaddvaluetotheusersexperience.Ifitisntadding
valuethenwhatisitdoing?Itisdistractingthem.
Soyes.Ifyoufindsomethingthatisdistractingyouavoiditlikean
advertisement.You
close
the
window,
hit
the
back
button,
and
move
on
34
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
35/104
Whataresomethingsthataredistractingonwebsites?Whatarethingsthatyouhateonwebsites?
35
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
36/104
36
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
37/104
37
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
38/104
38
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
39/104
39
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
40/104
40
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
41/104
41
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
42/104
42
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
43/104
43
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
44/104
Thereisevenadebategoingontoday.Whichismoreimportant?Thecontent,
thedesign,orthefunctionality?Thiscouldbeaveryengagingdiscussionfor
COAP2150,WebDesignPrinciplesI.
Ultimatelyit
really
is
just
abalancing
act
between
creating
something
that
is
visuallyimpressivewebsitewithoutjeopardizingtheusability.Butalsowhatif
somethingisvisuallyimpressivebutthecontentispoor?Whatthen?
HonestlysubliminallyIhaveputcontentuphereatthetopforareason.This
iswhattheuserismostlikelylookingfor?Theydontgosearchingforatea
kettleandbuyonefromthemostimpressivevisuallystunningwebsite?Do
they?Areusersthatsuperficial?
Thinkaboutit.Ifthewebsiteseemstobetootrickytonavigate?What
happensthen?
They
may
then
leave
the
site
altogether,
which
defeats
the
purposeofthewebsite.ItshouldbeRULE#1.Givetheuserwhattheyneed
beforetheyleave!
44
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
45/104
Youwouldthinkitwouldbeanobrainer,butaftersomeresearchwehave
discoveredthatfunctionalitygoeshandinhandwithknowingyourtarget
audience.Thisiskeytothedesignoftheentiresite,asdesignerswillneedto
makethewebsiteaccessibleandappealingourusers.
45
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
46/104
Witheritisateenagerlookingtobuyteeshirtsfromhisfavoritecartoonsor
someonelookingforwaystheycanitemizetheirdeductionsontheirtaxes.
Thosewebsitesshouldhelptheuseraccomplishwhattheyneedtodo.
46
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
47/104
Itisimportanttonownotethattheusercanchoose.WhatImeanbythatis
thatWebDesignisdifferentthangraphicdesignwherethedesignisahard
copy.Forawebdesignersdesigns,theusercanchoosetheirOS,browser,
fonts,fontsize,internetspeed,whereandwhentonavigate,etc.
Thetermuseragentsisoftenmentionedherewhichbasicallymeans
somethingusedtoaccesstheWWWandtheyallfunctiondifferently.
47
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
48/104
So,weshouldunderstandthatweatsomelevelhavealackofcontrolover
theenvironmentwearedesigninganddevelopingin.Sowhatdowedo?
Weneedtolearnallthatwecanaboutthisenvironmentanddesigning
specificallyfor
this
medium.
So,weneedtolearnhowpresentationiscontrolledontheweb.Howto
maximizereadabilityandusabilityforourcontent.
Soweneedtounderstandwebstandardsthatgoverntheweb.Keepinmindthattheseareconstantlychanging.Itisbestforustoevolve.Weneedtoutilizewebdesignprinciplesfordifferenttypesofwebsites,e.g.,
howaecommerce
site
looks,
how
ablog
looks,
how
ainformational
site
looks,etc.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
49/104
Comprehensiveplanningand analysisensuresthatdesignersanddevelopers
willprovidewhattheiruserswant.IfyoustarttocodeyourWebpages
withoutthoroughplanningandanalysis,youruntheriskofmissingpertinent
information.ItismuchlessexpensivetomakecorrectionstoaWebsiteinthe
earlyphasesofaprojectdevelopmentthatitistoalterWebpagesthatare
completed.
Itsallabouttheuser.Alwaysabouttheuser.Thewebsiteisfortheuser.Not
forthedesignerortheclient.Amazonswebsiteisnotforthecompany
Amazon.Itisfortheircustomerstheusers.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
50/104
Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwill
actuallyhelpsolveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite.Thenthesolepurposeofthewebsiteistomakesurethatthe
usercandoX.Thatiswhythewebsiteisthereinthefirstplace.Thenknowing
thiswecanleverageourentiredesignandfunctionalitybasedonthat
purpose.
Soaswebdesignerscanapproachworkingwithaclientbythinkingoftheir
siteassolvingaproblemfortheuserandthewebsiteisthesolutiontothat
problem.Thisthenallowsustoconsiderhowthewebsitefunctionsasa
meansofsolvingtheproblemoransweringaquestion, ratherthanjust
havingcoolfunctionalityforfunctionalitysake.
AsIhavebeenteachingthiscourseformanyyears,Iseestudentsfallintothe
snareof
designing
and
developing
functionality
in
their
sites
bases
on
apple
pickingofthecoolestfeaturesfromdifferentsitesallovertheinternet.When
IstartseeingthisIquicklyremindthestudentofthedangerindoingso.JustbecauseNikedoesitontheirsitedoesntmeanitwillworkforyours.Thesitemaycapableofdoingallsortsofreallyinterestingthings,butthe
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
51/104
functionalityisalmostcertainlygoingtoseemlikeadisjointedconfusingmessfortheuserwithoutpurposeorvision.Theusercantaccomplishwhattheyoriginallysetouttodo.Soremember,thisquoteonpage14ofyourbookwillhelpusstayontrack.
50
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
52/104
Whenwedesignwebsitesweshouldbecreatingsomethingthatsatisfiesthe
needsforboththeclientandtheuser.Forthepurposesofthiscourseweare
mostlythinkingabouttheuser.
Weshouldalwayshaveafirmunderstandofoursites goals.Thisinformation
oftenwillcomefromtheclient.Whydoestheclientwantitonline?Forthepurposesofthiscourse,weareourownclients.Anotherkeyelementtoknow
hereiswhataretheuserssupposedtodo?BuyingthebandsCDs,finding
theirconcerts,readingtheirrecentnews,ordiscussingonthemessage
board?Theclientwillhelpusunderstandwhichgoalisthemostimportant.
Knowingthiswilldrivetheorganizationofthesite.
ThisiswhatyouwillbediscussingwiththeclassinyourTPjournalseach
week.
Weshouldunderstandtheaudienceofoursites.Remember,yourtextstates
onpage14.
51
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
53/104
Soafteralloftheanalysislegworkwethenneedtomakesurethatour
contentiscentraltoourdesigns.RememberContentIsKing!Oursitescould
havereallycoolimagesandvideosbutifourcontentisntclearand
accessible,thenoursitesfail.Itisimportanttonotethatasitescontentis
basedontheresultsofthepreviousphases,e.g.,thepurpose&analysis.Itis
alsohighly
possible
that
asite
design
and
development
team
might
have
to
go
backwordsandrethinkthepreviousphasesbecauseofwhatisfoundoutin
thedesignphase.
Sometimesasitesdesignactuallyrestrictswhattheuserislookingfor.Agood
designisclear,concise,anduncluttered.Thevisualsofasiteshouldenhance
theuserexperienceanddrawattentiontothecontentandnotdistractthem
fromit.Ifyoucannotjustifyusingsomethingthatcreatesmorecompelling
anddirectcontent..dontuseit.Becauseitscoolisnotajustification.
OnoursyllabusImentioninthetermprojectsection:
If there is ever a question about whether an image, video, color, etc. meets the
needs of the user, then discuss it with your instructor. It may be determined
that the object or tag should not be included. All attributes of a web site should
52
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
54/104
always be purposeful and not distracting to the user.
52
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
55/104
Tomakesurethatyoursitedoeswhatitneedstodo,itneedstobetested
withyouruseranddeterminewhatneedstobechangedsothattheycando
whattheyneedtodo.Forexample,howwillyourtargetaudiencewantto
navigateyoursite?Byknowingthis,youcanfinetunethesitesfunctionality.
Therecouldbebarriersthatyoumightnotofmeanttobeputupthatwould
needto
be
taken
down.
LastweekIwastellingyouaboutagoodfriendofminewhoworksinaweb
designfirminIllinois.Heisadesignerinalargewebdesignshop.Clients
cometothemforhosting,sitedesign,maintenance,etc.Eachdayhegets
informationfromthesalesteamonwhattheclientwants.Becausehehasa
trainedeye,heoftenfindsthingsthatwillbedistractingornotworkforthe
userandwillsendthedesignbacktothesalesteamforthemtoreconfigure
withtheclient.Soitisimportanttonotethatthewebsitedevelopmentcycle
cangobackwards.
Onthelastdayofclassthistermwhenyoupresentyourwebsitetotheclass,
anotherclassmatewillcompleteausabilityformforyoursiteastheytestits
functionalityanddesign.
53
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
56/104
54
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
57/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
58/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
59/104
Soletsgooutandgetsomesampletexttoplaywith.Iamgoingtograbsome
andplaceitinmysample.htmlpageasonelargeparagraph.
Makesuretogivethepageadescriptivetitleandsaveaswithanewfilename
inyour
Week
2folder.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
60/104
Ifyouhaventsavedanewfileinawhile,letssavethisoneaslists.htmlaswe
playwithlists.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
61/104
RobertDeNiro
Thisismyfavoriteactorbecauseofhisearlywork:
MeanStreets(1973)
GodfatherII(1974)
TaxiDriver(1976)
DeerHunter(1978)
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
62/104
RagingBull(1980)
OnceUponATimeInAmerica(1984)
Saveaslists.htmlinyourweek2folder.
59
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
63/104
Letsuseoneofourfilesandpracticeaddingcomments.
Whyisitimportanttousecomments?
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
64/104
61
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
65/104
Sobeforewegetstartedweneedtogetoursample.htmlpagefromlastweek
andopenitupinsaveitinafolderthatwewillcallweek2onthedesktop.We
willcreatemanydifferentpracticepagesthisweekandsavetheminour
practicefolderforthisweek.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
66/104
Samewiththisone.Letscreateanewfileandcallitnoncharacterentities
andsaveitinthesamefolder.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
67/104
64
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
68/104
Letspracticeputtingintwodifferenttypesofimages.Theyreallyarenot
differentimagestheyaredifferentintermsofwheretheyarelocated.Are
theyinthedirectoryofthesite?Oraretheyfoundsomewhereexternallyon
theinternet?SorememberallwearedoingiscodingourXHTMLsothatthere
willbeawindowtowherethatimagewillbefound,I.e.,thesourceofthe
image.
TobefullyXHTMLcompliantweneedtohavethealternativetextattribute.Whydoyouthinkthatisrequired?Welloneofthew3sgoalsistomakethe
webaccessibleforallusers.Someusersarevisuallyimpairedandthealt
attributewillreadythedescriptionoftheimagetotheuseriftheyareusinga
screenreader.
Goourandrightclickonanimageandsaveitinyourweek2rootfolderina
newdirectory
called
images.
We
also
need
to
find
an
image
that
is
on
the
internetandgetitsuniversalresourcelocator,I.e.,URL.
Togetthewidthandheight,rightclickandviewproperties.
65
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
69/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
70/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
71/104
RobertDeNiro
Thisismyfavoriteactorbecauseofhisearlywork:
Saveasaddingimagesintheweek2folder.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
72/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
73/104
Thereare4typesoflinks.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
74/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
75/104
Syntaxisthesamebutthelinkisnotwithintherootofthesite(sitesmain
directory)
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
76/104
Allexternallinksshouldhavethetargetattribute.
Yourusershouldneverleaveyoursiteaccidentally.Ifyouownastoreatthe
mallandsomeonecomesintotryonsomejeansyouwouldntwantthemto
gointo
the
dressing
room
and
then
accidentally
leave
the
store
would
you?
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
77/104
Twostepprocess
1. Findwhereyouwanttoanchorto
2. Placethe
link
that
will
direct
the
user
to
the
anchor.
Youcanevenanchorauseronaspecificpageonaspecificlocation.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
78/104
Showtheemailaddressandnotclickhere
Invitetheusertoemailyou
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
79/104
BesurethatyoucheckoutRobertonInternet
MovieDatabase
(IMDB).
WanttoknowmoreaboutRobert?Pleaseemailmeat [email protected]
BackToTop
Saveaslinks.htmlintheweek2folder.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
80/104
77
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
81/104
Saveasdir_image.html
78
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
82/104
79
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
83/104
Mostlikelyasitehasmultipledirectoriesforimages,scripts,files,etc.But
thereshouldnotbeanewdirectoryforeverypageofoursite!!!
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
84/104
WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyle
Sheets.Theserulesdefinehowallparagraphsorlistsmightlookonapage.These
dealmorewiththeappearanceofawebpage.CSSisnotcontent.
Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar.
Youcan
take
the
car,
what
is
under
the
hood,
the
body
and
add
color
to
it.
Add
leatherseats,chromewheels,convertibletop,coloritred,etc.Butontheslipitstill
saysitsaFordMustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstilla
MustangandfunctionslikeaMustang.Whileitlooksdifferent,itisstillaMustang.
Toillustratethispoint,letsallcheckoutCSSZenGarden.com
81
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
85/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
86/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
87/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
88/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
89/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
90/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
91/104
WhatwouldbeadeclarationthatIcouldusetostylethisheading?
88
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
92/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
93/104
90
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
94/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
95/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
96/104
WhatwouldbeadeclarationthatIcouldusetostylethisheading?
93
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
97/104
HavestudentsgotoAppendixDintheirbook
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
98/104
Saveasinline_styles.html
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
99/104
96
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
100/104
Aswebdesignersanddevelopersweshouldalwaysbeobservantofwhatis
outthereontheweb.Doessomethinglookincorrect?MaybeIcancontact
themandhelpout?WowthatisreallycoolmaybeIcouldlearnhowtodo
thatandaddittomysite.
Weshouldespeciallybekeepinganeyeonthefunctionalityanddesign.This
weekweexploredsitestoseegoodandbadexamplesofsiteswith
meaningfulcontent.Thisiswherewekeepaneyeonthefunctionalityand
design.Aswedevelopoureyesforthesethingsitwillhelpustomakesure
ourfutureclientsanduserswillgetwhattheyneedandusallagreaterreturn
onthewebsiteinvestment.
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
101/104
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
102/104
99
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
103/104
100
-
7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U
104/104