Tải bản đầy đủ - 0 (trang)
Hack 18. Prettify Your Document with Inline Styles

Hack 18. Prettify Your Document with Inline Styles

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

itusingtheGoogleDocslayoutoptions,theHTMLyouwillsee

nowisratherminimalistandconsistsmostlyofparagraphtags

—and"strong"forboldand"em"(emphasis)foritalic—likethe

following:





Supermanisacomicbookcharactercreatedby

ShusterandJerrySiegel.Originallyspawnedin1932andsold

DC(DetectiveComics)in1938,Supermanwentontobecomeone

...



Toapplyyourownstyle,wrapthewholedocumentwitha"div"

(division)elementlikethefollowing:





Supermanisacomicbookcharactercreated

...





...



...





Thisservesascontainertowhichyoucanapplythestylesheet,

whichyoudobyaddinga"style"attributewiththewidthand

paddingdefinitions:



...





Whenyouclickthe"Backtoeditingthedocument"link,youwill



findthelayoutofyourtextchangedtosomethingmore

readable,asshowninFigure2-20.Nowthatyourtextis

wrappedwithacontainer,somebrowserswillletyouselectit

andadjustthewidthvisuallyusingthemouse.



NOTE



Forafulllistoflayoutchangesthatyoucanapplyusing

CSS,takealookattheofficiallanguagespecificationat

http://w3.org/TR/CSS21/.Note,however,thatnotall

stylingisallowedinGoogleDocs;Googleemploysa

"whitelist"ofCSSproperties,meaningthatanything

notonthewhitelistisprohibitedandwillberemoved

fromyourdocument.(BecauseGoogledocumentsare

hostedonhttp://google.com,therearecertainsecurity

restrictionswiththeHTMLyouproduce.)Toseesucha

CSSwhitelist,takealookat

http://google.com/apis/maps/documentation/mapplets/infowindowallo

AlthoughnotspecificallyaboutGoogleDocs,thathelp

pagegivesyouagoodideaofwhat'sallowedinGoogle

Docs.

MoreWaystoChangetheLayoutofYourDocument

Addanimageborder:Atthemoment,Googledoesn'toffer

youamenuentrytoputaborderaroundanimageyouinclude

viaInsert Picture.ButswitchtotheHTMLviewafterinserting

animage,andmodifythe"img"tagtoincludeastylelikethe

following:






Thearticle'slinelengthfillsthewholewindow,hurting

readabilityunlessthebrowserwindowisresized



Anewlayoutforthearticle



Switchtoadifferentfontorfontsize:Thedocumenteditor

alreadyincludesafontmenuallowingyoutoselectafontand

fontsize,butitsoptionsarelimitedandyoumaywanttogofor

yetanotherfontandsize.(It'sworthnotingthatafont

availableonyourcomputermaynotbeavailableonsomeone

else'scomputer,andasfontsarenotembeddedintoGoogle

Docsfiles,anothercomputermayshowadifferentfallback

font.)Again,youcanusea"div"containerwrappedaround



yourfulldocument,likethefollowing:




...





NOTE

Astaticfontsizeunitlike"px"—pixels—cancreate

accessibilityproblemsoncertainsystemswherethe

userrequiresabiggerfont.Ifyouwanttouseafont

thatscalesbetterwiththeuserpreferences,andlooks

goodonverylargeresolutions,considerusingarelative

fontsize,suchas"font-size:120%".

Butthere'sonehurdleleftyetforcertaindocuments.Google

alsoinsertsitsownstylesheetsintoanydocumentyoucreate,

andifyouhaveparagraphelementswithinyourtext,Google's

stylesheetwilloverrideyourownstyle,meaningthatyourfont

definitionisignored!Tosolvethis,youcanremoveall"p"tags

intheHTMLviewandincludetwobreaksbetweenanytwo

paragraphs,likethefollowing:







Thetextisnowjustified,anditusesanincreasedlineheightandfontsize



Justifyyourtext:Ifyousetthealignmentofyourtext

throughtheDocseditortoolbar,youarerestrictedtoleft

alignment,centeralignmentandrightalignment.One

alignmentyoucan'tselectisfully-justifiedtext,asshownin

Figure2-21.Usethefollowinginlinestyleforyour"div"

containertoachievethis:



...





Increasethelineheight:Toincreasethelineheightofyour

document,asshowninFigure2-21,addthefollowingstyle:



...





The"em"unitrepresentsthefontheightcurrentlyinusefor

yourdocument.It'sarelativeunit,soit'sabitmoreflexible

thanstaticoneslike"px".



Outputyourwholetextinuppercase:Toconvertallyour

writingintouppercaseletters,usethefollowingstyleonyour

"div"container:



...





Increasetheletterorwordspacing:Toincreasethespace

betweenanytwolettersofyourtext,useastylelikethe

following:



...





Negativevalueslike"-1px"areallowedaswell.If,ontheother

hand,youwanttoincreasethespacingbetweentwogiven

wordsofyourtext,usethefollowingstyleonyour"div"

container:



...





(The"ex"unitreferstotheheightofalowercase"x"inyour

currentfont.)

Floattext/imagesaroundothertext/images:Ifyouwant

topositiononeelementtotheleftorrightofanotherelement,

youcanusetablesandincludeyourelementwithinatablecell.

Oryoucanusethe"float"styleproperty,asshownhereapplied

toaparagraph:





...





...





Usethesamelayoutformultipledocuments

Whenyoudefinedadvancedlayoutoptionsusinginlinestyles,it

canbehandytoreusethesametemplateforseveral

documents.Therearetwobasicwaystodothis:youcancopy

theHTMLofa"div"containersomewheretostoreit(for

example,inaGoogleDocsdocumentitself),andthencopyand

pasteitintonewdocumentswhenyoucreatethem.There'san

eveneasierway:youcanopenanexistingdocumentthatis

alreadystyled,andthenselectFile "Copydocument"fromthe

menu.(Ifyourpreviousdocumentwasshared,youwillseea

dialogaskingwhethertokeeptheexistingsharingsettingsfor

thecopieddocument;click"Cancel"ifyournewdocument

shouldremainprivateatfirst.)



THEGOOGLEDOCSFAMILY:GOOGLE

SPREADSHEETS

Spreadsheetscanbeusedformanagingallkindsof

information.Youmightthinkfinanceandaccountingare

themostcommonusesforaspreadsheet,butJoel

Spolsky,oneofthedevelopersbehindMicrosoftExcel

5.0,foundout(ashetellsinhisgreatbook,User

InterfaceDesignforProgrammers,whichisalso

availableonline),merelykeepinglistsiswhatmost

peopledowiththem.Youcankeeplistsofyourbooks,

forinstance,withthebooktitleintheleftcolumnofthe

spreadsheettableandyourrating,expressedasnumber

from1to10,intherightcolumn.

GoogleSpreadsheets,partoftheGoogleDocssuite(see

Chapter1foranoverviewandintroduction)supportsmuch

morethanlists,butitisnotasfeature-richascompeting

desktopproductslikeMicrosoftExcel.However,asaweb

application,itdoescontainsomebuilt-innicetiesthattraditional

desktopprogramsmaynothave,suchas:

Achatprogramnexttothespreadsheet,inwhichyoucan

discussthedocumentwithyourfriendsandcolleagues

Arevisionhistorythatallowsyoutogobacktoadocument

fromminutes,days,weeks,ormonthsago(orjustcompare

changes)

Easymultiauthorediting,includingcolorindicatorsshowing

whoiscurrentlyeditingwhat

Formulasthataccessreal-timedata—financialorotherwise

—fromotherwebsitesandservices

Sharingdocumentsinrealtimewithotherswithouthaving

tomakeredundant,soon-to-be-outdatedcopies

Embeddingdynamicspreadsheetsinawebpageorblog



post

GoogleSpreadsheetshasafewinterestingtricksupitssleeves.

Readontolearnhowtomakeitdoallkindsofthings.



Hack19.AddLiveDatatoYour

Spreadsheet

Wouldn'titbeniceifsomeofyourspreadsheetdata

automaticallycreatedandupdateditself?Actually,it'svery

simplewiththeGoogleLookupandGoogleFinancefunctions.

Here'saquickquestion:whenwasMattGroening,creatorof

TheSimpsons,born?

ThecorrectanswerisFebruary15,1954.Admittedly,Ididn't

knowthateitheruntilIjustlookedituponGoogle,usinga

featurecalledGoogleQ&A(for"Questions&Answers").Tryit

outyourselfbyenteringmattgroeningbirthdayintoGoogle.On

topoftheresultsyouwillfindwhat'scalledaoneboxcontaining

theinformation,asshowninFigure3-1.



MattGroening'sdateofbirth:February15,1954,

apparently



GoogleQ&AisgoodformorethanjustresearchingMatt

Groening'sbirthday—itcanturnupavarietyofother

informationandtrivia.Theseresultsarenotprovidedbya

human:instead,aGoogleprogramautomaticallyscoursthe

WebtofindthisinformationonsiteslikeWikipedia,

Brainyquote.com,andmanymore.Hereareacoupleofother

queriesthatresultindirectanswers:



Thesearchsylvesterstallonebirthplaceresultsin"Sylvester

Stallone—PlaceofBirth:NewYork,NewYork,USA"

Thesearchberlinpopulationresultsin"Berlin—Population:

3,405,000(11/2006)"

Thesearchlengthoftheamazonriverresultsin"Amazon

River—Length:6,400KM(4,000MI)approx."

Thesearchmassofbetelgeuseresultsin"Betelgeuse—

Mass:14[solarmasses]"

Thesearchbarrylyndondirectorresultsin"BarryLyndon—

Director:StanleyKubrick"

Thesearchcatch-22authorresultsin"Catch-22—Author:

JosephHeller"



NOTE

Googleusedtoprovidealotmore"fun"queries,like

"realnameofSuperman";alas,manyofthemhave

beenremovedbynow.WhenyourelyontheGoogle

Q&Afeature,knowthatsometimesqueriesreturn

wronganswers;thatanswersaren'talwaysstructured

alike(oneanswerforabirthplacequestionmaybe"San

Francisco,"whileanothermaybe"ShermanOaks,CA,"

listingthestateaswell);andthatcertainquestions

maynotbeansweredatall.

Allthesequeriescanbebrokenintothetwobasicpieces:

entitiesandattributes.Forinstance,"MattGroening,""Berlin,"

and"Amazonriver"aretheentities.And"birthday,"

"birthplace,"and"length"aretheaccompanyingattributes.To

issueaqueryfromwithinaspreadsheet,youmustbeableto

expressitintermsofentityandattribute.Thisiswherethe

GoogleSpreadsheets'GoogleLookupfunctioncomesin.

GoogleLookup,Google'sQ&Adataforyourspreadsheet



ToincludeQ&Adatainyourspreadsheet,usetheGoogleLookup

function.Let'screateaspreadsheetcontainingcelebrity

information;you'llprovidethecelebrityname,and

GoogleLookupprovidestheresultsfortheotherfields.Opena

newspreadsheetathttp://docs.google.comandenterseveral

celebritynamesinthefirstcolumn.Leavethesecondandthird

columns,titled"birthdate"and"birthplace"emptyfornow,as

showninFigure3-2.



Creatinganautomatedcelebrityinformationspreadsheet



TheGoogleLookupformulahasthefollowingstructure:

=GoogleLookup(entity,attribute)



So,youcanselectthecellnexttoIsaacAsimovandenter:

=GoogleLookup("IsaacAsimov","Birthdate")



AssoonasyouhittheReturnkey,thiscell'svalueiscalculated

foryou;afterabrief"loading"message,thecellnowcontains

thevalue"January2,1920"(inthiscase,thevalueisofstatic



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

Hack 18. Prettify Your Document with Inline Styles

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

×