Tải bản đầy đủ - 0 (trang)
Chapter 6. Creating Page Layouts with CSS

Chapter 6. Creating Page Layouts with CSS

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

SeeLesson6inaction!

Usetheaccompanyingvideotogainabetter

understandingofhowtousesomeofthefeaturesshown

inthislesson.OpentheDynamic_Learning_DW_CS3.swf

filelocatedintheVideosfolderandselectLesson6to

viewthevideotrainingfileforthislesson.



Chapter6.CreatingPageLayoutswith

CSS

Nowthatyou'veputCascadingStyleSheets(CSS)touse,

you'veseenhowpowerfultheycanbeforstylingtext,images,

andtableswithflexibilityandease.CSSisequallypowerfulasa

layouttool,allowingyoutofreelyposition,flow,andoverlap

pagecontentinwaysnotpossiblewithHTMLalone.



6.1.Startingup

Beforestarting,makesurethatyourtoolsandpanelsare

consistentbyresettingyourworkspace.See"Resettingthe

Dreamweaverworkspace"onpage3.

Youwillworkwithseveralfilesfromthedw06lessonsfolderin

thislesson.Makesurethatyouhaveloadedthedwlessons

folderontoyourharddrivefromthesuppliedDVD.See

"Loadinglessonfiles"onpage3.

Beforeyoubegin,youneedtocreateasitedefinitionthat

pointstothedw06lessonsfolderfromtheincludedDVDthat

containsresourcesyouneedfortheselessons.GotoSite>

NewSite,or,fordetailsoncreatingasitedefinition,referto

Lesson2,"CreatingaNewSite."



SeeLesson6inaction!

Usetheaccompanyingvideotogainabetter

understandingofhowtousesomeofthefeaturesshown

inthislesson.OpentheDynamic_Learning_DW_CS3.swf

filelocatedintheVideosfolderandselectLesson6to

viewthevideotrainingfileforthislesson.



6.2.TheCSSBoxmodel

CSSpositionselementswithinapageusingtheBoxmodel,

whichreferstorectangularvirtualboxesusedtoholdandplace

contentwithinadocument.Eachboxcanactasacontainerfor

text,images,media,andtablesandtakesupacertainareaon

thepagedeterminedbyitswidthandheight.Additionally,each

boxcanhaveitsownoptionalpadding,margin,andborder

settings(describedindetailshortly).Inreferencetothedisplay

ofitemsonapage,CSSregardsalmosteveryelementona

pageasabox.

AlthoughCSSregardsmanyHTMLelementsasboxes,inthis

lessonyou'llbeworkingspecificallywiththe
tag,which

Dreamweaverusestocreatenewboxeswhenpositioning

contentinCSS.The
tag,inconjunctionwithCSSrules,

canbefreelypositioned,formatted,andeventoldhowto

interactwithotherboxesadjacenttoit.Youcanalsostackand

overlap
containers,openingthedoortoflexibleand

creativelayoutsnotpossiblewithHTMLalone.

Ifyou'veworkedwithlayoutapplicationssuchas

InDesignCS3,theideaofcreatingandpositioning

containersforpagecontentshouldbevery

familiartoyou.Boxescreatedwiththe
tag

canbethoughtofasanalogoustothetextand

imageframesyoucreateinInDesign.



6.2.1.Margins,padding,andborders

TheBoxmodelallowseachelementonapagetohaveunique

margin,padding,andbordersettings.Thefollowingfigure

showsthevariouspartsofthebox:

Figure6-1.A.Margin.B.Border.C.Padding.D.Content

width.E.Visiblewidth.



Marginsrefertothetransparentareasurroundingthebox,

whichyousetusingthemargingroupofCSSproperties.

Marginscanplayanessentialroleincreatingdistancebetween

aboxandthecontentsurroundingit(suchasotherboxes),or

theboundariesofthepageitself.Youcansetmarginsforall

sidesatonceoruniquelyforeachside.

Paddingisthedistancebetweentheinsideedgeoftheboxand

itscontents;bysettingpadding,youcreatespacebetweenthe

boxandanytext,images,orothercontents.Yousetpadding

usingthepaddinggroupofCSSproperties,and,likemargins,

youcansetthemforallfoursidesofaboxatonceorforeach

sideindividually.

Theborderofaboxistransparentbydefault,butyoucanadd

width,color,andaborderstylefordecorationordefinition

aroundboxes.Borderssitdirectlybetweenmarginsand

padding,anddefinetheactualboundariesofthebox.Youset

bordersusingthebordergroupofCSSpropertiesand,like

marginsandpadding,youcandefinebordersforallfoursides

atonceorforeachsideindividually.

Youcanincorporateeachpropertyintoanystyleruleandattach

ittoabox,similartothewayyou'veattachedclassesto

paragraphsandtablesinpreviouslessons.



6.2.2.The
tag

AsyouexploreandcreatepagelayoutswithCSS,youwill

frequentlyencounterthe
tag.The
tagcreates

areasorsectionswithinanHTMLdocument;youcanplacepage

contentsuchastextandimagesdirectlywithinsetsof


tags.DreamweaverenablesyoutocreateCSS-drivenpage

layoutsusingtheInsertDivTagandDrawAPDivbuttons,both

ofwhichutilizethe
tagtocreateboxesthatyoucan

placepreciselywithinyourpagesandstylewithCSSrules.



6.2.3.TheCSSIDselectortype

InLesson4,"StylingYourPagewithCSS,"youlearnedabout

thedifferentselectortypesinCSS:classes,tags,

pseudoselectors,andIDs.Inthislesson,IDsbecomean

essentialpartofworkingwithCSSboxesandpositioning.AnID

isaspecialselectortypecreatedforauniqueelementbythe

samenamewithinapage,andit'smeantforone-timeuseonly.

IDrulesappearwithinastylesheetandareprecededbya

pound(#)sign.

Forthisreason,IDsareidealforsettingpropertiesthatneedto

bespecifictoasingleelement,suchaspositioninginformation.

WhencreatinglayoutsusingtheInsertDivTagbutton,

DreamweaverrequiresyoutocreateorassignanIDrulefor

eachboxcreated.WhendrawingboxeswiththeDrawAPDiv

button,DreamweaverautomaticallycreatesauniqueIDrule

thatcontainspositioning,width,andheightinformationforthat

specificbox.

Because
tagshavenodisplayattributes,theyaregiven

theirpropertiesbyeitheranIDoraclass,orboth.Thinkofan

IDasasetofinstructionsthatgivea
itsunique

appearanceandbehavior(asDNAistoahumanbeing).AnID

ruleismatchedtoa
usingthetag'sIDattribute.

Figure6-2.TheCodeviewshowsthestylesheetand

tagthatcreatesthecontainershownintheDesign



viewbelowit.



Tablesorboxes?

Along-standingdebatehasexistedwithintheweb

designcommunityaboutthebestapproachtocreating

pagelayouts.Manydesignersfeelthattablesare

antiquated,andthatCSSboxesneedtobeadoptedas

theprimarymethodforpositioningpagecontent.Others

assertthattablesaremorereliableinolderbrowsers,

anddisplayconsistentlyacrossplatformsandbrowsers.

Bothsidesofthediscussionhavesomemerit.

Tablesareoneoftheoldestmethodsoflayingoutpage

content,andtheyaresupportedconsistentlybyolder

browsers.Thisisanimportantconsiderationifmostof

youraudiencemaynotbeonthelatestandgreatest

setups.

Tables'limitations,ofcourse,areobvious.Youare

restrictedtothetable'sgrid-likestructure,andto

achievemorecomplexlayouts,youneedtonestseveral

levelsoftables.Youcannotfreelypositiontableswithin

thepage,andtheydependontheflowofother

elementsaroundthem.

Boxes:The
tagandCSSpositioninghavebeen

aroundforsometime,butsincetheirinceptiondifferent

browsershavechosentosupportthematvaryingand

ofteninconsistentlevels.Atthispoint,though,most

CSSpositioningpropertiesandpracticesaresupported

consistentlyacrossInternetExplorer,Safari,Firefox,and

Netscape.You,however,willfindthattestingisstill

necessarytoexposepotentialinconsistencies.

TheadditionoftheCSSAdvisorandBrowser

CompatibilityCheckfeaturestoDreamweaverCS3isa

hugebenefittodesignerswhohavechosentoembrace

CSSmoreextensively.Thesetoolsflagandhelp

troubleshootanyCSS-relateditemsthatmaybe



incompatibleorinconsistentincommonlyused

browsers.WediscusstheCSSAdvisorandBrowser

CompatibilityCheckindetailinLesson13,"Managing

YourWebSite:Reports,Optimization&Maintenance."



6.3.PositioningcontentwithAPDivs

Inpreviouslessons,youpositionedcontentdirectlywithina

pageorusingthegrid-likestructureofthetag.Ifthe

limitationsofthesemethodsleaveyouwantingmorecreative

flexibility,CSSgivesyouthatintuitivedrag-and-placefreedom

you'vebecomeaccustomedtoinotherdesignapplications.

Boxesarecreatedwiththe
tag,andtheirpositioning

informationisstoredwithinanIDrulewithinastylesheet.Box

positionisdeterminedbythetopandleftCSSproperties;these

setthedistanceoftheboxinpixelsfromthetopandleftedges

ofthepage(orwhateverelementcontainsit)respectively.

Togetstarted,switchtotheLayoutinsertpanel,whichcontains

theiconsyou'llneedtoplacedivandAPDivboxeswithinyour

page.

TousetheLayoutinsertpanel,makesuretheInsertbaris

visible(Window>Insert).TheInsertpanelisdividedintotabs;

selecttheLayouttabtobringtheLayoutinsertobjectsforward.

IftheInsertbarappearsintheMenuview,

chooseLayoutfromthedrop-downmenuonthe

left-handsideofthepanel.



6.3.1.CreatingyourfirstboxeswithDrawAPDiv

NowthatyouunderstandhowboxesworkinCSS,it'stimeto

putthatknowledgeintopractice.Theeasiestandmosttactile

waytoplaceboxesiswiththeDrawAPDivbutton.AnAP

(AbsolutePositioned)Divisplacedexactlywhereyoudrawit,

usingthepageoracontainingelement(suchasanotherDiv)as

itspointofreference.Onceyou'vecreatedabox,youcan

formatit,typeinit,orplaceimagesandothercontentintoit.

1. ChooseFile>New.WhentheNewDocumentpanel

appears,chooseBlankPage>HTML,thenpressCreate.



2. ChooseFile>Save.WhentheSaveAsdialogboxappears,

navigatetothedw06lessonsfolder.Typelayout1.htmlin

theNametextfieldandpressSave.

3. OntheLayoutinsertpanel,locateandselecttheDrawAP

Divbutton( ).Movebackoverthepage;thecursor

changestoacrosshair.

4. Clickanywhereonthepageanddragtodrawaboxinthe

upperleft-handcorner.Theboxappearswithatabonthe

top-leftedge,andhandlesonallsidesandcornersthatcan

beusedtoresizethebox.



Figure6-3.Clickanddragonthestagetodraw

anewbox.



5. Selecttheentireboxbyclickingthetabinitstop-left

corner;thePropertyinspectordisplaysalloftheoptionsfor

yourbox,includingitscurrentwidth,height,andposition.

PresstheBgcolorswatchandselectcolor#CCCCCCfrom

theSwatchespanel.



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

Chapter 6. Creating Page Layouts with CSS

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

×