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

Chapter 5. Creating Page Layouts with Tables

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

SeeLesson5inaction!

Usetheaccompanyingvideotogainabetter

understandingofhowtousesomeofthefeaturesshown

inthislesson.OpentheDynamic_Learning_DW_CS3.swf

filelocatedintheVideosfolderandselectLesson5to

viewthevideotrainingfileforthislesson.



Chapter5.CreatingPageLayoutswith

Tables

OneofthegreatthingsaboutDreamweaverisitsflexibility;you

haveanarrayoftoolsandvariouscreationmethodsatyour

disposal.OnetaskforwhichDreamweaveroffersseveral

differentapproachesispagelayout.Inthislesson,youwill

learnhowtousetablesonyourwebpages.



5.1.Startingup

Beforestarting,makesurethatyourtoolsandpanelsare

consistentbyresettingyourworkspace.See"Resettingthe

Dreamweaverworkspace"onpage3.

Youwillworkwithseveralfilesfromthedw05lessonsfolderin

thislesson.Makesurethatyouhaveloadedthedwlessons

folderontoyourharddrivefromthesuppliedDVD.See

"Loadinglessonfiles"onpage3.

Beforeyoubegin,youneedtocreateasitedefinitionthat

pointstothedw05lessonsfolderfromtheincludedDVDthat

containsresourcesyouneedfortheselessons.GotoSite>

NewSite,or,fordetailsoncreatingasitedefinition,referto

Lesson2,"CreatingaNewSite."



SeeLesson5inaction!

Usetheaccompanyingvideotogainabetter

understandingofhowtousesomeofthefeaturesshown

inthislesson.OpentheDynamic_Learning_DW_CS3.swf

filelocatedintheVideosfolderandselectLesson5to

viewthevideotrainingfileforthislesson.



5.2.Designandlayoutconsiderations

BeforeyouuseDreamweaver,youshouldconsiderseveral

issuesregardingweblayout:

Orientationisoneconsideration.Becauseyou'llbedesigninga

standardwebsiteinthislesson,youwillsetupahorizontal

layout.(Ifyouwerecreatingawebsitespecificallyforamobile

devicesuchasacellphoneorPDA,youmightchooseavertical

layout.)

Anotherareaofconcernistheoverallsizeofyourlayout.The

choicesrange,andthey'rebasedonoverallcomputermonitor

resolutioninpixels(i.e.,desktopsize).Thethreemostcommon

desktopsizesare640x480,800x600,and1024x768.(Yes,

640x480isstillaconsideration,becausebelieveitornot,

therearestillalotofoldermonitorsoutthere.)Granted,new

monitorsdon'tshipoutatthatresolutionandhaven'tforquite

awhile.Butnoteveryonehasthelatestandgreatestflatscreenmonitors.Averageusershangontotheirmonitorsuntil

theyseeadefiniteneedtospendthemoneyonanupgrade.

MostpeopleusetheircomputerstosurftheWeb,balancetheir

checkbooks,andmakeChristmascards,sotheydon'tneedthe

sameamountofdesktoprealestatethatawebdesignerneeds.

Furthermore,awebbrowsersuchasInternetExploreror

Firefoxdoesn'thavealotoffloatingwindows,anddoesn'tneed

theexpansivespacethatDreamweaverrequires.

Ultimately,thedemographicyouaretargetingwithyoursitewill

helpyoudecideontheoverallsizeofyourlayout.Ifyou're

creatingawebsiteforaretirementcommunity,youknowyour

audiencewillprimarilybeolder,soyoumightleantowarda

designthatwillaccommodatemonitorssetto640x480or800

x600.Ifyou'retargetingyounger,tech-savvyusers,1024x

768mightbeagoodwaytogo.

Ifyou'redevelopinganintranetsite,whichisaninternal

companysitethatonlytheemployeesofthatcompanywill



visit,youshouldknowhowtheemployees'monitorsaresetso

thatyoucantargetthatspecificresolution.

Inthislesson,we'redevelopingawebsiteforamuseum;

visitorstosuchasitewillrangedemographically.Therefore,we

willuse800x600asthetargetsizeforourlayoutbecause800

x600isagoodoverallsizeforaccommodatingdifferenttypes

ofuserswithdifferentresolutionpossibilities.

Rememberthatwebstandardscontinuetochangeasnew

technologiesemergeandbecomemorecommonplace.Atsome

point,smallerresolutionssuchas640x480and800x600will

bephasedoutcompletely;that'salreadystartingtohappen.

Thebottomlineisthatwebdesignandlayoutevolveasthe

technologyevolves,sokeepaneyeoutfornewdesigntrends

tosurface.



5.3.Tablesvs.CSS

Asmentionedearlier,therearedifferentwaystoapproachweb

pagelayout.Eachmethodhasitsadvantagesand

disadvantages.

Oneadvantageoftablesistheirflexibilityandeaseofuse.

Dreamweaver'sstandardandlayoutdesignmodesofferseveral

waystomanipulatetables.Anotheradvantageoftablesisthat

they'reuniversal—evenolderbrowserscanrecognizethem.

Onthedownside,tablescanbebulkyandveryrestrictivewhen

itcomestolayoutpossibilities.Tablesareanoldertechnology

thatisbecominglesscommonintermsofdesigntrends.

Anotherissueisthatalthoughallbrowsersrecognizetables,

theydon'talltreattablesinthesameway.Layoutscanvary

fromonebrowsertothenext,dependingonhowthetableis

formatted.

WithCascadingStyleSheets(CSS),youhaveto-the-pixel

positioning,flexibility,andyoucanplacecontentwhereveryou

wantfairlyeasily.CSSalsoprovidesyouwithmorewaysto

modifypageappearanceintermsofformattingcolor,margins,

borders,andsoon.

ThedisadvantagewithCSSisthatsinceitisanewer

technology,manyolderbrowsersdon'tsupportit.Evennewer

browsershavechosentosupportCSSatdifferentlevelsover

theyears,whichcancausepagestodisplayinconsistentlyfrom

browsertobrowser.



5.4.Insertingatable

Youwillstartbydesigningthewebsite'shomepageusing

tables.You'llfindthatyoudon'thavetousejustonetableona

page;youmighthavemultipletablestoaccommodatedifferent

facetsofyourpagelayout.Youcanevengosofarastonest

onetableinsideanother,witheachhavingdifferent

characteristics.

Incaseyou'rewonderingwhyyouwouldevenusetables,have

youevertriedtoworkwithoutthemonablankpage?Youcan't

justdragthingsandplacethemwhereyouwantthem;thecode

doesn'tworkthatway.Tablesareoneoftheelementsthatwill

allowyoutogetyourimagesandtextrightwhereyouwant

them.They'realsoawaytoprovideconsistencytoyourlayout.

Toinsertatable:

1. IntheFilespanel,double-clicktheindex.htmlpagetoopen

it.

2. Ifyourrulersaren'tvisible,selectView>Rulers>Show.



Figure5-1.Makingrulersvisible.



3. YoucanuseguidesinDreamweavertohelpestablish

consistentpositioninginyourlayout.Fromtheverticalruler

ontheleftsideofthescreen,clickanddragoutaguide.

Becauseyou'redesigningformonitorswithadesktop

resolutionsetto800(width)x600(Height)orlarger,place

theguideatthe750-pixelmarkofthetophorizontalruler.



Figure5-2.ArulerguideinDreamweaver.



Youdidn'tdragaguideouttothe800-pixel

markontherulerbecauseofthespacethat

theInternetbrowsertakesup.Forinstance,in

InternetExplorerorNetscape,thescrollbaron

therightsideofthebrowserwindowabsorbs

someofthewindow'shorizontalspace.Some

browsersalsoincludeasetofmenuoptions

ontheleftwithdifferentbuttonsforaccessing

bookmarksandotherfunctions.

4. IntheTitlewindowintheDocumentpanel,typeThe

McKnightInstituteHomePageasyourpagetitle.Press

Enter(Windows)orReturn(MacOS).



Figure5-3.Thedocumenttitlearea.



You'llfinddifferentwaystoinserttables,includingusingthe

menusalongthetopofthescreen,orthroughtheInsert

panel.

5. SelectInsert>Table,andtheTabledialogboxappears.Set

thenumberofRowsto6andColumnsto3.SettheTable

widthto750,makingsurethatthedrop-downmenuisset

topixels.Next,enter0intotheBorderthicknesstextfield.

LeavetheNoneheaderoptionselected,andthedefault

settingintheAligncaptiondrop-downmenu.



Figure5-4.TheTablesettingdialogbox.



6. ChooseFile>Savetosaveyourwork.



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

Chapter 5. Creating Page Layouts with Tables

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

×