File 0003

placesthe background imageat the bottom-right cornerof the element.lf you includeonly one positionvalue,the browserappliesthatvalueto the horizontalpositionand vertically centersthe image.Thusthe style background-position:

30px

placesthe background image30 pixelsto the rightof the element's leftmarginand centers it verticallv. By default,a backgroundimagemovesalongwith itselementas a userscrollsthrough a page.Youcan changethis usingthe style background-attachmenL.

type

wheretype is eitherscrollor fixed."Scroll"(thedefault)scrollsthe imagealongwith the element."Fixed"placesthe imagein a fixedplacein the browsertdisplaywindow,preventingit from movingevenif the userscrollsdown throughtheWeb page.Fixedbackgroundimagesareoften usedto createthe effectof a watermark,which is a translucent graphicimpressedinto the very fabricof paper,oftenfound in specializedstationery.

The BackgroundStyle Likethe font stylediscussed in the lastsession, you can combinethe variousbackground stylesintothe style backgroundz

col-or

image repeat

attachment

position

whereco7or, image, and so on, arethe valuesfor the variousbackgroundattributes.For example,the style background:

yellow

url(logo.gif)

no-repeat

fixed

center

center

createsa yellowbackground on which the imagefile logo.gifis displayed. Theimagefileis not tiled acrossthe background,but is insteadfixed in the horizontaland verticalcenter.As with the font style,you do not haveto enterall of the valuesof the backgroundstyle. However,thosevaluesthat you do specifyshouldfollow the order indicatedby the syntax in orderto avoidunpredictable resultsin somebrowsers. procedurein the Web designteamat Arcadiumincludesplacinga watermark Standard containingthe word, "DRAFT"on anyWeb pagethat is still in the designstage.Because theAboutpageis still undergoingreview,Tomhasaskedyou to changethe background imageto displaythe word "DRAFT".He suppliesyou with the appropriate imagefile for the watermark.

To insert the bachgroundimage: 1. Return to theabout.htm filein yourtexteditor. 2. Replace thebackground-color stylewiththefollowing styledeclaration. Besureto usea semicolon to separate thisstylefromthecolorstyle.SeeFigure J-50. background:

white

urI(draft.jpg)

no-repeat

fixed

center

center

Settingthe backgroundstyles < b o d ys t y ' l e = " c o l o r : r g b ( 1 5 3 , 1 0 2 , 1 8 2 ) ; U r : l a r o l n . l : r i h i r e u r l ( L ! - a f t . i r r f t r f o - t e D E t Tf i . . e d : p r r L e t..: e f r t ? r nelvetica, sans-serif;

< i m g s r c = " 1o g o .g i f " a 1 t = " , o . n c A D r u rw
< a h i e f = " a b o u t . h t m " > A b o u t n n c a d i u m < / a >& n b s p ; & n b s p ; & n b s p ; < a h r e f = " r n a ph. t f l " > P a r k N a p < / a > & n b s p ;& n b s p ;& n b s p ; < a h r e f = " w a t e r , h t m " > w a t e r n i d e s < , / a >& n b s p ; & n b s p ; & n b s p ; ; n b s p& ; nbsp; < a h r e f = " k a r t s , h t n " > c o K a r t s < / a > & n b s p& < a h r e f = " r i d e s .h t m " > R o l l e r c o a s t e r s < . / a > <./o>

yourchanges. thefile,saving Close page.Notethat thecompleted Figure 3-51shows in yourWebbrowser. about.htm I Reopen window. page, in center of the browser watermark remains the you the the scroll through as The completedAbout page

r oasters A b o uA t r c a d i u m P a r kh d a n W a t e rR i d e s G o K a r t s R o l l eC

&ulrg advecuresav"'artyou at Arcadium, y*r:r a$c,rd;rhl*fanrd'l fun r:tlnter The parkis located5 r:ilesrrortlirryesl +f Derblr - cl*s* to many of Georgta':s,;e$c'.v+nJerg. offersover 5r.tr:Jes,r'ri:iuJrqgs,:rie ofthe :r!ate'rrnL]etexcit*1qr':1lerc,rasters Arcadrum ud waterndes.T1rert'salst,plenhr,:f i.rlr for the yonngerkjds. uirltrdrig tl'ro r:s!'at'a1:6 ndesftr drehdg. liddiepoolsarrdsg,rcrul openi,.'tr,:ldaTsa',r.'eek-: Arcadiumis . . . r

Day il"eektnc: l0arl t,r if.,m Apd 1 up to ls{e*'r+rial Memonal Day'a'rekendtk+lgh Lahru !ay: lam t,i 11pm Tbedayaftrrtrrbor Day drr-'rr,*rUrkrber I i: 1f arnto 5pm November1 draush h{irch i 1: rli s*d

rs easyc,nyour br:dget.{':tni:ale <,r:rI'rt" daiiy rfftEst{i thn big rh;rrr park:. Arcadrunr to purtharea golcltrckei for a:ryf;u*ntg nd*s. a plaiinwrrr.rket l'or *-rrny Youcanchoose you 'ra:'rt Spec,rrJ +f-etaswi ti&s,orfor bestr,'alue , a full-rJavpas: to nde ;ls malv lknes ;1sytu lrr;:nt"'a.het.errer group ratesareavarlable.

Arcdrliln . H!r'{ 1:. Erii 431'

OBfh!, CA :nDl['

a:icl larg*

1 i80d] :55-54.11

yourbrowser. youmayctose Ifyouplanontakinga breakbeforegoingto thenextsession,

olderbrowsers do not supportbackgroundimagesfor any pageelement. lngeneral, attributebackgroundto the tag to createa backcanaddthedeprecated forthe entirepage. No attributesare availableto control the tiling or placementof

image. background

EEI@@

Se

ReferenceWindow To inserta background imagebehindan element,usethe style background-image:

ur1( url )

whereurf is the filenameandthe locationof the imagefile. To controlthe tiling of the background image,usethe style background-repeat: type where type is repeat (the defautt),repeat-x,repeat-y,or no-repeat. To place the backgroundimage in a specificpositionbehind the element,usethe style background-position: horizontai vertical where hori a ontaT is the horizontalpositionof the image, and verticar is the vertical position.You can specifya positionas the distancefrom the top-left corner of the element, a percentageof the element'swidth and height, or by using a keyword.Keyword optionsare top, center,or bottom for vertical position,and [eft, center,or right for horizontal placement. To control whether the backgroundimage scrolls,usethe style background-attachment 2 type where type is scroll (the defautt) or fixed. To place all of the backgroundoptionsin a single declaration,usethe style background: coTor image repeat attachment position where col.or is the backgroundcolor,image is the image file, repeat is the method of tiling the image, attachment defineswhether the image scrollsor is fixed, and position definesthe positionof the image within the element.

Ur

Ton task bei pag( ing1 coas

the t

Deprecated . To specifya background imagefor the pagebody,add the foltowingattributeto the tag: background-" ur7" where url is the filenameand locationof the image file.

Y o u ' r ef i n i s h e dw o r k i n g w i t h t h e i n l i n e i m a g e so n y o u r W e b p a g e .Y o u ' v el e a r n e da b o u t the different image formatssupportedby most browsers,and their advantagesand disadvantages.You'vealso seen how to control the appearanceand placementof imageson y o u r W e b p a g e .I n t h e n e x t s e s s i o ny, o u ' l l l e a r n h o w t o c r e a t ei m a g em a p s .

Session3.2 Quick Check 1 . L i s tt h r e e r e a s o n sf o r u s i n gt h e C I F i m a g ef o r m a t i n s t e a do f t h e J P E Gf o r m a t . 2 . L i s tt h r e e r e a s o n sf o r u s i n gt h e J P E Ci m a g ef o r m a t i n s t e a do f t h e C I F f o r m a t . 3. What style floats an element on the left margin?What style preventsan elementfrom b e i n g d i s p l a y e du n t i l t h a t m a r g i n i s c l e a r ? 4 . W h a t s t y l es e t sa 1 0 - p i x e lm a r g i na b o v ea n d b e l o w a n e l e m e n t ,a n d a 1 5 - p i x e lm a r g i n t o t h e l e f t a n d r i g h to f t h e e l e m e n t ? 5 . W h a t a t t r i b u t e sw o u l d y o u a d d t o t h e < i m g / > t a g t o s e tt h e d i m e n s i o n so f t h e i m a g e t o 2 0 0 p i x e l sw i d e b y 3 0 0 p i x e l sh i g h ? 6 . W h a t s t y l ep l a c e st h e i m a g ef i l e m a r k . j p gi n a n e l e m e n t ' sb a c k g r o u n df,i x e d a t t h e t o p c e n t e rw i t h n o t i l i n g ? 7. lf you need to support older browsers,what code would you enter to use the p a p e r . j p gi m a g ef i l e f o r t h e p a g e b a c k g r o u n d ?

To li image. u s e rc l i You r of all h< imager

Server-Side lmageMaps ln a server-side imagemap,the imagemap is storedon theWeb server(seeFigure3-53). When a userclicksa hotspot,the coordinates wherethe userclickedaresentto a program runningon the server.The programusesthe coordinatesto determinewhich hotspotwas clickedand thenactivates the corresponding link.

the serverconsults the imagemap and accesses the link indicatedon the map userclicksa hotspot on the imagemap

the serversendsthe destinationdocument back to the user

Theserver-side imagemapwasthe originalstandardfor imagemaps,and mostgraphical browsersstill supportserver-side imagemaps.However,usingthemcomeswith some limitations.Because a programon the servermustprocessthe imagemap,you cannottest your HTMLcode usinglocalfiles.Additionally,server-side imagemapscan be slowto operate,sinceeverytime a userclicksthe image,the requestis sentto the serverfor proWith mostWebbrowsers, cessing. the targetof a link is indicatedin the browser's status bar,providingvaluablefeedbackto the user.However,this is not the casewith hotspots in a server-side imagemap. Because the serverhandlesthe hotspotsratherthantheWeb browser,usersreceiveno feedbackregardinghotspotlocationsand targets.

Client-SidelmageMaps Because of the limitationsof server-side imagemaps,mostmapsare now handledby the client.To setup a client-sideimagemap,you insertthe imagemap into the sameHTML file that containsthe image,and the Web browserprocesses the imagemap. Because all of the processing is done locally,ratherthan on theWeb server,you can easilytestyour Web pagesusingthe HTMLfilesstoredon your computer.In addition,client-sideimage mapstendto respondto userinteractionmorequicklythan server-side maps,because map coordinates and link informationdo not haveto be sentovera networkor lnternet connection.Finally,when a usermovesthe pointerovera hotspotin a client-sideimage map,the browser's statusbar displaysthe targetURL.Forthe purposes of thistutorial, you'll concentrate solelyon client-sideimagemaps. Youcreatea client-sideimagemap usingthe map element.Thesyntaxof the map elementis <map name="map" id="map"> hotspots

DefininglmageMap Hotspots Youdefinea hotspotusingtwo properties:its locationin the imageand its shape.Thesyntax of the hotspotelementis: <area shape="shape"coords="coordinates" href="urL" alt="text"

/>

where shapeis the shapeof the hotspol,coordinates are the coordinatesof the hotspot in pixels,url is the URLof the link, and the alt attributeproon the image,expressed browsers.Notethatthe alt attributeis requiredfor videsalternatetext for nongraphical code. XHTML-compliant lf you want to testyour coordinatesbut do not havea destinationdocumentready,you The imagemapwill then the attribute"nohref"for the hrefattribute. can substitute thatyou use includethe hotspotwithouta link.Youcan alsoincludeany of the attributes with the tag. Especiallyusefulattributesfor a hotspotincludethe targetattribute, browserwindow,and documentin a secondary which allowsyou to openthe destination of the hotspot the destination the title attribute,which createsa pop-uptitle describing that appearsas a userhoversthe mousepointeroverthe hotspotlocation. One methodof determiningthe locationsand shapesof the hotspotsis to open the of the pointscorreimagein an imageeditingapplicationand recordthe coordinates procedure if However,thiscan be a time-consuming spondingto the hotspotboundaries. the imageincludesseveralhotspots.To makethis processeasier,Web designersinstead often useimagemap softwarethat allows you to specifyhotspotsby drawingoverthe <area/> tagsthat you can pasteinto image.Usingyour selections,the softwaregenerates at yourWeb page.ln thiscase,we'll assumethat a colleaguein the designdepartment Arcadiumhasgivenusthe coordinates. hotspot,"circle"fora Theshapeattributehasthreepossiblevalues:"tect"for a rectangular circularhotspo!and "poly" for a polygonor an irregularlyshapedhotspot.Thevaluesof the in termsof the coordinates coordsaftributedependon which shapeyou choose.Youexpress the distanceof the top-leftcornerof the image.Forexample,the coordinate(123,45)refers to a pointthat is 123 pixelsfrom the leftedgeand 45 pixelsdown from the top. Thereis no limit to the numberof hotspotsyou can placeon an image.An image's hotspotscan alsooverlap.lf this happensand a userclickswithin the overlap,the browseropensthe link of the firsthotspotdefinedin the map.Thus,ordercan be important in enteringthe areaelements. a polygonalhotspotfor the roller Tomwantsthe imagemapto includethreehotspots: coasterrides,a circularhotspotfor the go-karttrack,and rectangularhotspotfor the wa park.You'll startwith the water park hotspot.

Creatinga RectangularHotspot Two pointsdefinea rectangularhotspot:the upper-leftcornerand the lower-rightcorner. The syntaxfor enteringthe coordinatevaluesis shape="rect"

coords="xl

t yL t x2,

y2"

wherexJ and y7 are(x, y) coordinatesfor the upper-leftcorner andx2, y2 arethe coordinatesof the lower-rightcorner.Thesepointsfor the waterparkhotspotare locatedat (350, 38) and (582,200).Thusthe valuesfor the shapeand coordsattributesare shape="rect"

coords="350f

38,

582, 200"

fi Add this hotspotto the parkmapimagemap.You'll link the hotspotto the water.htm Thealternatetext for this hotspotwill be "WaterPark".

the rectangularhotspotl <map>tagyoujust tothemap.htm filein yourtexteditorandbelowtheopening (youcanplacethistagontwolinesto makeyour areaelement insert thefollowing readabte): more ghape="rect" alt="Water

coords="350, 38r582, 200" href="Itater.htm" Park" />

yourchanges to thefile.

a CircularHotspot is definedby the locationof its centerand the sizeof the circle'sradius. hotspot for creatinga circularhotspotare attributes "circle"

coords="xr

!r

t"

of the circle'scenterandr is the sizeof the radiusin pixels. x,y a(ethecoordinates hasthe hotspotattributes parkmap,the hotspotfor the go-kartracetracks "circle"

coords="255, 733,7 4"

file. to the water.htm linkthishotspot You'll

the circularhotspot: youjustcreated, insertthefollowing tag: theareaelement shape="circle" coords=" 255 r L33t7 4" href="karts.htm" a1t="Go-Karts" />

your changes.

of its irreguyou needto defineis for the rollercoasterrides.Because finalhotspot youneedto createa polygonalhotspot.

a PolygonalHotspot for creatinga polygonalhotspotare attributes y" coords="xL, y7,

x2,

y2,

x3,

y31 ..."

(*1,yt), (x2,y2), (x3, y3), and so on are the coordinates of each vertex in the shape. 3-55showsthe coordinatesfor the vertices of the roller coaster hotspot.

Coordinatesfor the roller coasterhotspot (172,38)

(17,38)

(172,223)

(333,223)

ffi* (17,300)

(333,300)

into the areaelement,you follow the outlineclockwise To enterthesecoordinates for eachpointasyou come aroundthe polygonalimage,and add the x and y coordinates to it. The attributesfor the roller coasterhotspotare s h a p e = " p o I y " c o o r d s = " L 7 , 3 8 t 1 72 , 3 8 , L 72 , 2 2 3 ' 3 3 3 , 2 2 3 , 3 3 3 , 3 0 0 ' L 7 ' 3 0 0 "

file. Enterthishotspotin the parkmapimagemap,linkingthe hotspotto the rides.htm

To create the polygonal hotsPot: tag: insertthefollowing hotspot, thecircular 1. Below < a r e a s h a p e - " p o l y "c o o r d s = " 1 7 r 3 8 t L 1 2 , 3 8 , L 7 2 t 2 2 3 t 3 3 3 , 2 2 3 t 3 3 3 t 3 0 0 t 1 7 r 3 0 0 ' href="rides.htn" alt="Roller Coastets" /)

textfor allthreehotspots' thecompleted Figure J-56shows lmage map hotspots km <' "n s t v l e = " t e x t - -aal i q n :E b . c e n t e r " > qift' i lt="park Map" wi dth="61-0" hei ght="395 ",/> tr*o-t.,=t' < m-an6" fn. ia m e = " p a r k r n a p "i d = " p a r k r n a p " > roi:rds=' l5u,36, 5ts2,100' n'ef="v6ter.frtril :hiue= r'ect alt="water < a r e a s h a p a = " . i . . t l i " . o t o l ' r s= " 2 5 5 , 1 1 1 . 7 ' 1" h r e f = " k a r t s ' h t f t r " alt="Gtr-Harts" /> ."rea ihine="pnly" co,:rd:="17,18,172,J8,L72,713,i33,211.133,100,17'100' aoastert" //: trrpi=="ridei.htm" alt="nollEr

2. Saveyourchanges.

With all of the areaelementsin place,you'refinisheddefiningthe imagemap.Your nexttaskis to instructthe browserto usethe parkmapimagemapwith the inlineimage. Thenyou'll testthe mapto confirmthatthe linkswork properly.

To remove the border from the image map: ) 1. Return to map.htmin yourtexteditor. > 2. Addthefollowing styleto theparkmap graphic, asshown in Figure J-58:

ill

style="border-width:

0"

) Removingthe border around a linked image <'p s t v l e = " t e x t - a l i q n : c e n t e r " > < i m-g s r c = " p q r k m 5 p . g i f " a 1 t = " n a r k t 4 a p "w i d t h = " 6 1 0 " h e i g h t = " 3 9 5 " u s e m a p = " # p a r k f l a p " s r ) . 1e = " n L , r d b r ' - rd' ti l r : D " / > < m a pn a m e = " p a r k m a pi "d = " p a r k m a p " > < a r e a s h a p e = " r e c "t c o o r d s = " 35 0 ,3 8 , 5 8 2 ,? 0 0 " h r e f = " w a t e r .h t m " alt="water park" ./> < a r e a s h a p e = " c i r c l e " c o b r d s = " 2 5 5 , 1 3 37,4 " h r e f = " k a r t s . h t r r l " a l t = " c o - r c a n t s" . / > < a r e a s h a p e = " p o 1 y "c o o r - d s = " L 7 , 3 8 , t 7 2 , i a , t 7 ? , 2 2 3 , 3 3 i , 2 2 3 , 3 2 3 , 3 0 0 , i _ 7 , 3 0 0 " href="rides.htm" a'lt="nolIer coasters" ./> <,/map> <,/s>

5. Close yourchanges. thefile,saving 4. Reopen map.htmin yourWebbrowser andverifythatnocolored borderappears around partofthecompleted theimagemap.Figure page. J-59shows ) The completed Map page

A b o uA t r c a d i u m F a r kl v l a p W a t e rR i d e s G 0 K a d s

R o l l eC r oasters

-ffi

-F

EO_ | o dd+r

ffi

Frg rilFFtr

W*m

Fnol

i

Hb;ffia FlrshFlood

4

lb

brlF-af a*flf

€ l

I 1

--,.

_

,.

. +B(tt4el

"&

e f

Arcadiun . Hwy 12,Exit49'l . Derby,cA 20010. 1 (800)555-5431

yourWebbrowser, Close

Theborder-width styleis only one of the manystylesthatyou can useto createand borders aroundpageelements. We'll explorethe variousborderstylesin greater in a futuretutorial.Notethatvou can alsoadd the attribute

the tagto achievethe sameeffect.Howeverthe borderattributehasbeendep-

Reference Window

l

. Asyoucan see,an image map can be a useful addition to a Web page. However, you

providetextuallinksin additionto an imagemap,so that userswithout always can still navigateyour site.You'vedonethis in the Map pageby proicalbrowsers thelistof linksat the top of the page.

psfor Web Page Design yourcolorand imagesunderdifferentcolor resolutions. UseWeb-safecolorsto View prevent dithering on browsers with 256-colorpalettes. foreground colorsthat contrastwell with the background. Use a font face,listthe specificand mostdesirablefacesfirst,and conspecifying When withthegenericfont. clude yourfontchoicessimple.Toomanyfont styleswithin a singlepagecan distract Keep you shouldnot usemorethantwo font faces.Largeblocksof bold or Ingeneral, users. textcanbe difficultto read.Keepyourfontsto about3 or 4 basicsizes. italicized units(suchasthe em unit)when you want yourfontsto be scalableunder Userelative monitorsizesand resolutions. different yourcodeeasierto readand morecompactby combiningthe variousfont styles Make style. intoa single and line art that involvea few basiccolors.UseJPEGs for phoUse ClFsfor illustrations that involvemorethan 256 colors. andillustrations tographs Themoreimagesyou include,the longera a Web pagewith images. Donotoverload pagetakes to load.Generallya Web pageshouldcontainno morethan40 to 50 kiloof inlineimages. bytes downloadsan image,it keepsa copyof it on the user'scomputer; a browser Once you therefore, canmakea Web siteloadfasterby reusingimageswheneverpossible thesite.Usea singlebackgroundimageor logo on everypagein orderto throughout give yourWebsitea consistent look and feel. for eachof your inline imagesto makethe page thewidthand heightattributes Include quickly. loadmore

. Useminiatureversionsof images(knownasthumbnails) to let userspreviewlarge largerimageso that interested imagefiles.Linkeachthumbnailto the corresponding userscan view the imagein greaterdetail.Youshouldcreatethumbnailsin a separate graphicsprogram,ratherthansimplyreducingthe full-sizeimageusingthe width and heightattributes.Changingthe width and heightattributesdecreases an image'sdimensions,but not the file size. . View yourWeb pagein a browserwithoutgraphicalcapability(or with the graphicsupport turnedoffl to verifythat userswith non-graphicalbrowserscan still effectivelyuse your site. . Avoid largeareasof white spacesurroundedby pagecontent.Usethe float and margin stylesto movewhite spaceto the outsidemarginsof the page. . lf you usean imagemap,providetext link alternatives for userswith non-graphical browsers.

Session3.3 Quick Check What is an imagemap? 1. What is a hotspot? 2. What arethe two typesof imagemaps? 3. What HTML tag would you useto definea rectangularhotspotwith the upper-left edgeof the rectangleat the point (5,20)and the lower-rightedgelocatedat (85,100) and with oregon.htmdisplayedwhen the hotspotis activated? 4. What HTML tag would you usefor a circularhotspotcenteredat (44,81)with a radiusof 23 pixelsto be linkedto la.htm? 5. What HTMLtagwould you usefor a hotspotthat connectsthe points(5,10),(5,35), (25,35),(30,20),and (15,10)and thatyou want linkedto hawaii.htm? 6. What HTML tag would you useto assignan imagemap namedStatesto westcoast.gif?

Tutorial Summanl In this tutorial,you learnedaboutthe stylesand HTML attributesavailableto modifythe appearance of a Web site.Youfirstlearnedhow HTML handlescolor,and how to use color to formatthe foregroundand backgroundof your pageelements.Youthen learned aboutthe differentstylesfor formattingthe appearanceof Web pagetext.You usedthese stylesto specifydifferentfonts,font sizes,weights,and spacing.In the secondsession, you learnedaboutthe differenttypesof imageformatssupportedby HTML and how to applythem.Yousawhow to wrap contentaroundan elementlike an inline image,and you learnedhow to set marginsaroundyour elements.Thesessionalsoshowedhow to createand formatbackgroundimages.The lastsessiondiscussedthe differenttypesof imagemapsavailableto a Web designer,and showedhow to createand usehotspots within an imagemap.Thesessionconcludedwith a briefdiscussion of bordersand how to removethemfrom linkedimages.

absoluteunit animated CIF client-sideimagemap colorvalue

dithering dpi em unit ex unit

leading Macromedia noninterlaced CIF palette pixel PNG PortableNetworkCraphics progressive JPEC relativeunit RGBtriplet safetypalette scalable

CraphicsInterchange Format hangingindent hexadecimal hotspot imagemap interlacedGIF interlacing JointPhotographic Experts Group JPEC kerning

Scalable VectorCraphics server-side imagemap spacer specificfont splashscreen SVG tiling tracking color transparent watermark Web-safecolors

ReviewAssignments theskillsyou in the tutorial thesamecase

Data files neededfor this ReviewAssignmentabout.jpg abouttxt.htm,indextxt.htm, karts.jpg kartstxt.htm, logo.gif, logoanim.gif,maptxt.htm, paper.jpg,parkmap.gif, review.jpg,rides.jpg,ridestxt.htm,toddler.jpg,toddtxt.htm,water.jpg watertxt.htm Tomhasaskedyou to makesomemorechangesand additionsto theArcadiumWeb site. for very designed Theparkhasa new areacalledtheToddlerPark,which is specifically the new youngchildren.Tom needsyou to revisethe parkmap hotspots to accommodate parkmap,and he needsyou to designa Web pagefor the toddlerpark.Figure3-60 shows a previewof the toddlerpageyou'll create.

Abor{tArcadiun FErkMaB VlltELElgigS GoKads

RollerCoas'lers ToddlerPark

prcuries irftractirlrr tl:,r d qqes (]f.'et:ttr tl:rs eurrun':rii,r t-anilier:Irrth ,&,:-rir,:hurrr y':uragclll,1r,:n"we presrflt the todiller park, ',,-ttfisaft, age specific,nrle: At thr: :e :b . rr :f -J: t ;r :tufil. i.-iu ii Lr:rtilil : J.a1 r Frtle ihr -B,rc;rthuR f-1;1-11p Sirr: arrd icrir thr srtes of tLiEFffk. l,-,ietrh the Ht'rrtl Ht,q rerrrelu. +H I:,,:4:ru1€d' ihi\'t Erth f,lr- rh:racter:: .ur.l i:.ngJ . Flrr't n dt 'ror1d': i;u,qr:t bali J.,it . Errjc,y.s,r'ra,1iun rriin;,iur': .,vatrr 1>a;ir:uiC !:dJre 1:r:ol . !!a:l at,:ur J6hc,le triinafi,re gc,if c+r.r:e -SJlt,irJdler iuEil:r arB rr-4:ernserl L,y t ur e:ryerierrieil ald *ierr':liT siaff

Arre,li!fi

' Hp:{ 1:. E,1it4:11 . Derir,/, r-jA ?B'l1t , 1 {FLltJ 555,5431

i [ il d

t[

ill ilt

liliill r'l' rl

Tocompletethistask: 1. Useyour text editorto open the files indextxt.htm,abouttxt.htm,maptxt.htm, kartstxt.htm,ridestxt.htm,toddtxt.htm,and watertxt.htmfrom the tutorial.O3/review folderof your DataFiles.Enteryournameand the date in the commentsectionof eachfile. Savethe files as index.htm,about.htm,map.htm,karts.htm,rides.htm, toddler.htm,and water.htm,respectively. 2. Co to the index.htmfile in yourtexteditor.In the bodysection,enclosethe text FamilyFun"in a spanelementanddisplaythetextin a blue22ptbold "Affordable font. Enclosethe text,"EnterArcadium"in anotherspanelement.Displaythistextin a 14pt italicizedfont.Closethe file, savingyour changes. 3. Co to the toddler.htmfile in yourtexteditorand makethe followingchanges to the page: . Setthe textcolorto the rgb color value(204,102,O). . Setthe background color to white. . Displaythe reviewjpgfile asthe backgroundimage,placedin the horizontaland verticalcenterof the page,withoutscrolling,and withouttiling. 4. Locatethe paragraph containingthe listof linksand setthe font sizeof the paragraph to 0.7emand displaythe text in an Arial, Helvetica,or sans-serif font. 5. Locatethe h1 headingcontainingthe text,"ForKids"and makethe following changes to the heading: . Setthe textcolorto white. . Setthe background colorto the color value(204,102,O). . Displaythe text in an Arial,Helvetica,or sans-serif font. o Setthe font sizeto 1.5 em. o Setthe kerningvalueto 1.5em. o Setthe indentation to 1em. 6. Locatethe inlineimagefor the toddler.jpg file.Add the followingattributes to the i n l i n ei m a g e : o Setthe image'swidth and heightto 250 pixelsby 239 pixels. o Floatthe imageon the rightmarginof the paragraph. r Setthe image'sleft marginto 15 pixels.Setthe otherthreemarginsizesto 0 pixels. 7. Locatethehorizontal lineand setthepagetonotdisplaythis lineuntiltheright marginis clear. B. Locatethe addresselementand makethe followingchangesto it: . Displaythe addressin a Bptfont. . Displaythetextin a normal(non-italic)font. . Displaythe text in an Arial,Helvetica,or sans-serif font. 9. Closethe file, savingyour changes. 10. Go to map.htmin yourtexteditor.Directlybelowthe parkmap.gif image,inserta mapelementwith the nameand id "park".Insertthe followinghotspotsintothemap: r A rectangular hotspotwith the cornerslocatedat (350,48) and (582,293).Link the hotspotto the water.htmfile. Insertthe alternate text "WaterPark". o A c i r c u l a r h o t s p o t c e n t e r e d a t t h e c o o r d i n a t e ( 2 5 6 , 2 1 6 ) w i t h a r8a1dpi ui xseolfs , Linkthe hotspotto the karts.htm file. lnsertthe alternate text "Co-Karts". . A polygonalhotspotwith the vertices(18,48),(170,48),(170,293),(333,293), (333,383),and (18,383).Linkthe hotspotto the rides.htm file.Insertthealternate text "Roller Coasters". o A polygonalhotspotwith the vertices(176,30),(345,30),(345,71),(259,116]), and(176,72).Linkthe hotspotto the toddler.htm. Insertthe alternate text "ToddlerPark".

Once you becomefamiliarwith the contentsof this proposedsite,startdesigning the site.Thereshouldbe five pages:a pageintroducingthe new listings,and one page with detailson eachof the new homes.Thenameof the intropageshouldbe new.htm,the namesof the four listingspagesshouldbe 13'l7081.htm, 1317082.htm, 1317083.htm, and 1317084.htm. In your preparations for the site,createa storyboard of the site'scontentsand links.Make surethat you makeyour siteeasyto navigate. Within eachpage,insertcommentsthat includeyour name,the date,and a description of the page'scontent. Thedesignand layoutof the siteis up to you, but your pagesshouldincludeat least one exampleof the followingdesignelements: . A stylethatsetsthe foregroundand background colorfor a pageand an element page. within the r A stylethat setsa backgroundimagefor eitherthe entirepageor an element within the page. o A stylethatchangesthe font familyfor at leastone element. o A stylethat setsthe font sizefor at leastone element. r A stylethat setsthe font weight and font stylefor at leastone element. r An inlineimagethatfloatsalongthe rightor left borderof itscontainingelement. o A stylethat setsthe marginsizefor an elementor for the entirepage. Useone of the suppliedthumbnailimagesto createan imagemap Iinkingthe introductionpageto eachof the pagesdescribing the new listings.Usea graphicsprogramto determinethe coordinates of the hotspotsin the imagemap. Submitthe completedWeb siteto your instructor.

Quick Check Answers Session 3.1 1. cofor:yellow;background-color: rgb(51 ,"102,5"1) 2. Web-safecolorsare colorsthat will not be ditheredby a Web browserlimitedto a 256-colorpalette.Youwould usethemwhen you wantto ensurethatyour colors appearcorrectlywithoutbrowsermodificationon monitorsthatdisplayonly 256 colors. 3. font-family:CourierNew,monospace 4. font-size:16pt 5. Theem unit is a relativeunit of lengthequalto the width of the capitalletter"M" in the browsert defaultfont. Becausethe size is expressedrelativeto the defaultfont size,textthat is sizedwith the em unit is scalableand will appearcorrectrelative to othertext, no matterwhat font size hasbeenseton the user'sbrowser. 6. Kerningrefersto the amountof spacebetweenletters.To setthe kerningto 2em,use the styleletter-spacing: 2em. 7. line-height: 2 B. font-weight:bold;font-style:italic 9. Thespanelementis a genericinlineelementusedto containor markan inline content.

Session3.2 1. UseGIFwhen you want to usea transparent color,when you wantto createan animatedimage,and when your imageis an illustration of 256 colorsor less. photographic 2. UseJPEGfor images,for imagesthat containmorethan256 colors,or when you needto reducethe file sizethroughcompression.

3. float: left clear:left 4 . m a r g i n1: O p x1 5 p x 5. width=,'200"height=,,396', 6. background: url(mark.jpg) no-repeat fixedcentertop 7.

Session3.3 1. A hotspotis a definedareaof an imagethatactsas a link.An image map lists

coordinatesof the hotspotswithin the image. ) Server-sideand client-side

the

3 . <areashape="rect" coords="S,20,85, 100" href=',oregon. htm"/> 4. <areashape="ci rcle,' coords=,, 44,81,23, href=',Ia.htm',/> 5 . <areashape-"poly,, coords=',5,.1 0,5,35,25,35,3o,2o,15,1 0,,href=,,hawaii.htm,, /> 6 .