Tải bản đầy đủ - 0 (trang)
Chapter 9. Adding Other Page Elements and Special Effects

Chapter 9. Adding Other Page Elements and Special Effects

Tải bản đầy đủ - 0trang

AddingWebPageandEmailLinks

We'llstartbypresentingsomeofthesimplestelementsyoucan

addtoyourlistingHTMLwebpageandemaillinks.



SpecialEffect9.1.TextLinktoMoreInformation

inaNewWindow



eBayhasspecificrulesastowhatyoucanandcan'tlinktofrom

yourauctionlistings.Ingeneral,youcanlinktoothereBay

pages,andtonon-eBaypagesthatpresentadditional

informationpertinenttoyourspecificauction.Youcan'tlinkto

pagesthatencouragenon-eBaysales.

Tothatend,youshouldbeverycarefulwhenyouchoosewhich

pagestolinkto.Thisspecialelementaddsatextlinktoan

externalwebpage,asshowninFigure9.1,andopensthatweb

pageinanewwindowsoyoureBayauctionremainsopeneven

whiletheexternalpageisbeingread.



Figure9.1.Atextlinktomoreinformationon

anotherwebpage;whenvisitorsclickthelink,

thenewpageappearsinaseparatewindow.



Toforcethelinked-topagetoopeninanewwindow,weusea

specialattributewithinthetag.Thisattributeis

target="_blank";the"_blank"partiswhatforcesanewwindowto

open.

Theentirecodeforthiselementshouldbeinsertedintoyour

templatewhereyouwantthelinktoappear.Youcanchangethe

text-alignpropertywithinthe

tagtochangethecenter

alignment;youcanalsodeletethefont-weightpropertytomake

thelinkappearlikethesurroundingbodytext.Obviously,you

shouldreplaceURLwiththefullURL(includingthe"http://")of

thepageyouwanttolinkto.



Clickformoreinformation





SpecialEffect9.2.ButtonLinktoMore

Information



Everybodyusesstandardtextlinks.Howaboutalinkthat

appearsasabuttoninyourlistingliketheoneinFigure9.2?

Whenvisitorsclickthebutton,thelinked-topageappears.



Figure9.2.Clickthebuttontolinktoapageof



moreinformation.



Thiseffectcreatesaveryshortformwithabrowser-generated

button;youdon'tneedaseparategraphicsfiletocreatethe

button.Tocreatethiseffect,weuseabitofJavaScriptcode

thatspecifieswhathappenswhenthebuttonisclickedinthis

instance,agoToURLfunction.Justinsertthefollowingcodewhere

youwantthebuttontoappearinyourlisting.(Youcanalso

changethetextonthebuttonitselfbyeditingthe"Clickfor

MoreInfo"text.)




















SpecialEffect9.3.Click-to-SendEmailLink



AnotherpopularuseofHTMLlinksistosendemailmessages.

Thiseffectputsalinkinyourlistingthat,whenit'sclickedbya

potentialbuyer,opensanewemailmessageaddressedtoyou.

Visitorscanusethislink,liketheoneshowninFigure9.3,to

askquestionsofyouduringtheauction.



Figure9.3.Asimpleclick-to-sendemaillink;

clickingthelinkopensanewblankemail

message.



Thisisasimpleclick-to-sendemaillink,andthecodeis

correspondinglysimple.Justinsertthecodewhereyouwant

thelinktoappearandfeelfreetoformatthelinktext(orthe



tag,usingCSSstyles)asyoulike.Remembertoreplace

EMAILADDRESSwithyourfullemailaddress,intheformof

name@domain.com.





Clickheretoemailmewithanyquestions







SpecialEffect9.4.Click-to-SendEmailLinkwith

AuctionNumberintheSubject



Thiseffectisabitmorecomplicated,butalsomuchmore

useful.Theonlyproblemwiththestandardclick-to-sendemail

linkisthatitdoesn'treferenceanyparticularauction;it'slikely

thatyou'llreceivemessagesfrompotentialbuyerswhereyou

can'tfigureoutwhichofyourmanyauctionsthey'reasking

about.Thiseffect,showninFigure9.4,fixesthatproblemby

addingthenumberoftheauctiontothesubjectlineofthe

email.



Figure9.4.Aclick-to-sendemaillinkthatputsthe

auctionnumberinthesubjectlineoftheemail

message.



[Viewfullsizeimage]



Tomakethisapparentlysimplechangerequiresquiteabitof

extracodeagain,usingtheprogrammingcapabilitiesof

JavaScript.Inthedocument.writeline,youneedtoreplace

EMAILADDRESSwithyourownemailaddressaspartofthelong

mailto:line,withnospacesbeforeoraftertheaddress.

Naturally,youcanchangethe"Clickheretoemailmewithany

questions"linewithyourowntext;justinsertthisentireblock

ofcodewhereyouwanttheclick-to-sendlinktoappear.



varitemnumber='';

varquerystring=document["location"].toString();

if(querystring){

myArray=querystring.split(/&/);

x=0;

while(myArray[x]){

values=myArray[x].split(/=/);

if(values[0]=="item"){

itemnumber=values[1];

}



x=x+1;

}

}

document.write

("




Clickheretoemailmewithanyquestions







AddingSpecialElements

Nowwe'llexamineavarietyofspecialelementsyoucanaddto

yourauctionlistings.Someoftheseelementsaremorestyle

thansubstance(suchasthescrollingmarquee);othersare

muchmorepractical(suchastheshippingratecalculators).

Havefunwiththem!



SpecialEffect9.5.ScrollingMarquee



Thiselementisaflashyone,butitcanhelptodrawattentionto

yourlisting.AsyoucanseeinFigure9.5,itinsertsasingle-line

scrollingmarqueeintoyourlisting;themessageinthemarquee

scrollsacrossthepage,fromrighttoleft.



Figure9.5.Ascrollingmarqueewithreversetext.



ThiselementiscreatedviauseoftheHTMLmarqueetag.This

particularmarqueeisformattedat50%oftheavailablepage

width,andfeatureswhitetextagainstaredbackground.Feel

freetochangethewidthandcolorsasyoulike;justinsertthe

codewhereyouwantthemarqueetoappear,andreplace



Messagetextwithyourowntextmessage.






font-size:14pt;color:white">



Messagetext











SpecialEffect9.6.SizeandSpecificationTable



Manytypesofproductscanbenefitfromthedisplayof

specificationsintabularformat.Forexample,ifyou'resellingan

itemofclothingyoucanuseatwo-columntabletopresentsize,

color,andfabricinformation.(SuchatableisshowninFigure

9.6.)



Figure9.6.Atwo-columnproductinformation

table.



Thiscodecreatesatwo-columntable.Thetableheaderis

displayedinasingle-columnrow,usingthecolspanattribute.

Thecellsarealldarkblue,withwhitetextandalargewhite

spacebetweenthecells.Thiseffectisaccomplishedbysetting

thetablebackgroundcolortowhite,buttherowbackground

colortodarkblue(withwhiteborders);it'sanicetouch.Toadd

morerowstothetable,justinsertadditionalblocks.You

canevenaddcolumnstothetablebyinsertingadditional

columncodesundereachrowcode;justrememberto

adjustthevalueofthecolspanattributeaccordingly.


cellspacing="3"cellpadding="2"

bgcolor="white"align="center">







TableTitle












Specification











Value













Specification









Value













Specification









Value















Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 9. Adding Other Page Elements and Special Effects

Tải bản đầy đủ ngay(0 tr)

×