Dreamweaver CS6

Topics• WorkingwithText,List,

andtables• WorkingwithImages

Level 3

19

Dreamweaver CS6

Importing Word documentsInanefforttocreateefficientworkflows,AdobehasintegratedDreamweaverwithmanyotherprogramsthatyouoryourteammembersarelikelytouse.MostintegrationisunderstandablywithinAdobe’sCreativeSuite,butotherprogramslikeWordfeaturedifferinglevelsofintegrationaswell.It’snotoftenthatIhavetobreakbadnewstoMacfolks,butthisissadlyoneofthosetimes.TheintegrationbetweenWordandDreamweaverthatI’mabouttoshowyouonlyworksonthePCversionofDreamweaver.Still,theMacfolksshouldkeepreadingnoneedtoskipthis,becausethereisoneoptioninthefollowingexamplethatdoesworkforyouandit’ssomethingyoumightwanttotakeadvantageoflateron.

ThefirstthingistogototheMenuoption,gotoFileandchooseImportyouwillnoticethatoneoftheoptionsinImportistoimportaWorddocument.Soratherthancopyingandpasting,IcanjustimporttheWordDocument.

AssoonasIdothatitjusttakesitscontentanddropsitrightinto

Changing the Copy/Paste Prefences inDreamweaverYoucansetspecialpastepreferencesasdefaultoptionswhenusingEdit>Pastetopastetextfromotherapplications.Forexample,ifyoualwayswanttopastetextastextonly,ortextwithbasicformatting,youcansetthedefaultoptionintheCopy/PastePrefer-encesdialogbox.

Note: When you paste text into a Dreamweaver document, you can use either the Paste or the Paste Special command. The Paste Special command lets you specify the format of pasted text in different ways.

20

Dreamweaver CS6

theareathatIhaveselected.Howcoolisthat?It’saveryquick,it’sveryeasy.Nowoneofthethingsthatyouaregoingtonoticeaboutthisisitdidn’tpromptmeintermsofhowitwantedtoprocessthiscopyandbringitin.It’sbasingitssettingsoffofthepreferencesthatIhavesetinthecopyandpastepreferences.Soifyou’relook-ingforaprompt,ifyoueverwanttochangethat,youeitherneedtochangethepreferencesbeforeyoudotheimport,oryouneedtousethesecondmethodSoifIundothisandIgoovertomyFilespanel,actuallygrabthe

.docfileanddraganddropitintotheregionthatIwantthetexttoappearin.Assoonasyouletgoofthemouse,yourpreferenceswillcomeupandnowDreamweaverisactuallypromptingyouinsay-ing,okay,wellhowdoyouwanttoinsetthis?Youwillnoticeit’stheexactsamepreferencesthatyouhavewithinyourCopyandPastepreferencesexceptforonedownhereonthebottom.

21

Dreamweaver CS6

NowIamgoingtocomebacktothisoptioninjustamoment.SowhenIclickOK,youwillnoticeIgettheexactsameresults,thetextcomesinandit’sformattedexactlythewayIwanttoformatitbaseduponstructurethatit’sgrabbingfromtheWordDocumentandthestylesthatIhaveappliedtomysite.Thatlastoption,Iwanttotalktoyouaboutthatforjustamoment.WhatifyouhadaWordDocumentthatyouwantedtogivetheusersofyoursiteanoptiontodownload?SoifIgotothenextlinehereforexample,andjustcreatesortofanemptyparagraphoverthere,wellifgoovertotheFilespanelandIgrabtheWorddocumentandIdragittothatemptyparagraph,IcanchoosethislastoptionwhichistoCreatealink.

NowforyouguysthatareontheMac,thisistheoptionthatworksforyou.Soalthough,it’snotgoingtobringinthecontentasquick-lyandeasilyasitwillforPCusers,ifyouwanttogivepeopletheoptionofclickinganddownloadingthisfiletotheirharddrive,youcanusethisoptiontoCreatealink.Itusesthetitleofthedocumentanditjustcreatesalinktothat,andofcourseyoucanchangetothetext.Youcansaysomethinglikedownloadtheprogramsworddoc.Thatwouldpromptpeoplewhentheyclickthattodownloadthedocumenttothelocalharddrive.Sothereyougo,that’sit,it’squickandeasy.What’seasierthandragginganddroppingright?NowI’msorrytosaythisfeaturedoesn’tworkontheMac.ButdotakenoteofthefactthatifyouwanttolinktoanexternalWordfileforusersofyoursitetodownload,itaseasyasdragginganddroppingaswell.

Note: The user interface has been simpli-fied in Dreamweaver CC and later. As a re-sult, you may not find some of the options described in this handout in Dreamweaver CC and later.

22

Dreamweaver CS6

About tables

TablesareapowerfultoolforpresentingtabulardataandforlayingouttextandgraphicsonanHTMLpage.Atableconsistsofoneormorerows;eachrowconsistsofoneormorecells.Althoughcolumnsaren’tusuallyexplicitlyspecifiedinHTMLcode,Dreamweaverenablesyoutomanipulatecolumnsaswellasrowsandcells.

Dreamweaverdisplaysthetablewidthandthecolumnwidthforeachtablecolumnwhenthetableisselectedorwhentheinsertionpointisinthetable.Nexttothewidthsarearrowsforthetableheadermenuandthecolumnheadermenus.Usethemenusforquickaccesstocommontable-relatedcommands.Youcanenableordisablethewidthsandmenus.

Ifyoudonotseeawidthforthetableorforacolumn,thenthattableorcolumndoesnothaveaspecifiedwidthintheHTMLcode.Iftwonumbersappear,thenthevisualwidthasitappearsinDe-signviewdoesn’tmatchthewidthspecifiedintheHTMLcode.Thiscanhappenwhenyouresizeatablebydraggingitslower-rightcornerorwhenyouaddcontenttoacellthat’slargerthanitssetwidth.

Forexample,ifyousetacolumn’swidthto200pixelsandthenaddcontentthatstretchesthewidthto250pixels,twonumbersappearforthatcolumn:200(thewidthspecifiedinthecode)and(250)inparentheses(thevisualwidthofthecolumnasit’srenderedonyourscreen).Note: You can also lay out your pages using CSS positioning. Table formatting precedence in HTML

WhenformattingtablesinDesignview,youcansetpropertiesfortheentiretableorforselectedrows,columns,orcellsinthetable.Whenaproperty,suchasbackgroundcolororalignment,issettoonevalueforthewholetableandanothervalueforindividualcells,cellformattingtakesprecedenceoverrowformatting,whichinturntakesprecedenceovertableformatting.

Theorderofprecedencefortableformattingisasfollows:

CellsRowsTable

Forexample,ifyousetthebackgroundcolorforasinglecelltoblue,thensetthebackgroundcoloroftheentiretabletoyellow,thebluecelldoesnotchangetoyellow,sincecellformattingtakesprecedenceovertableformatting.

23

Dreamweaver CS6

Note:Whenyousetpropertiesonacolumn,Dreamweaverchangestheattributesofthetdtagcorrespondingtoeachcellinthecolumn.

About splitting and merging table cells

Youcanmergeanynumberofadjacentcells—aslongastheentireselectionisalineorarectangleofcells—toproduceasinglecellthatspansseveralcolumnsorrows.Youcansplitacellintoanynumberofrowsorcolumns,regardlessofwhetheritwasprevi-ouslymerged.Dreamweaverautomaticallyrestructuresthetable(addinganynecessarycolspanorrowspanattributes)tocreatethespecifiedarrangement.

Inthefollowingexample,thecellsinthemiddleofthefirsttworowshavebeenmergedintoasinglecellthatspanstworows.

InsertatableandaddcontentUsetheInsertpanelortheInsertmenutocreateanewtable.Then,addtextandimagestotablecellsthesamewaythatyouaddtextandimagesoutsideofatable.IntheDesignviewoftheDocumentwindow,placetheinsertionpointwhereyouwantthetabletoappear.

Note:Ifyourdocumentisblank,youcanplacetheinsertionpointonlyatthebeginningofthedocument.SelectInsert>Table.

Note: The Layout mode feature is deprecated as of Dreamweaver CS4 and later. Layout mode created page layouts using layout tables, which are no longer recommended by Adobe. For more information on Layout mode and why it was deprecated, see the Dreamweaver Team Blog.

IntheCommoncategoryoftheInsertpanel,clickTable.SettheattributesoftheTabledialogboxandclickOKtocreatethetable.RowsDeterminesthenumberoftablerows.ColumnsDeterminesthenumberoftablecolumns.Table WidthSpecifiesthewidthofthetableinpixels,orasapercentageofthebrowserwindow’swidth.Border ThicknessSpecifiesthewidth,inpixels,ofthetable’sborders.Cell Spacing Determinesthenumberofpixelsbetweenadjacenttablecells.Whenyoudon’texplicitlyassignvaluesforborderthicknessorcellspacingandcellpadding,mostbrowsersdisplaythetableborderthicknessandcellpaddingsetto1andcellspacingweresetto2.Toensurethatbrowsersdisplaythetablewithnoborder,pad-dingorspacing,setCellPaddingandCellSpacingto0.Cell PaddingDeterminesthenumberofpixelsbetweenacell’sborderanditscontents.NoneDoesnotenablecolumnorrowheadingsforthetable.LeftMakesthefirstcolumnofthetableacolumnforheadings,sothatyoucanenteraheadingforeachrowofthetable.TopMakesthefirstrowofthetablearowforheadings,sothatyoucanenteraheadingforeachcolumnofthetable.Both Enablesyoutoentercolumnandrowheadingsinthetable.It’sagoodideatouseheadersincaseanyofyourwebsitevisitorsusescreenreaders.Screenreadersreadtableheadingsandhelpscreen-readeruserskeeptrackoftableinformation.CaptionProvidesatabletitlewhichdisplaysoutsideofthetable.Align CaptionSpecifieswherethetablecaptionappearsinrelationtothetable.SummaryProvidesatabledescription.Screenreadersreadthesummarytext,butthetextdoesnotappearintheuser’sbrowser.

24

Dreamweaver CS6

Import and export tabular data

Youcanimporttabulardatathathasbeencreatedinanotherapplication(suchasMicrosoftExcel)andsavedinadelimitedtextformat(withitemsseparatedbytabs,commas,colons,orsemicolons)intoDreamweaverandformatitasatable.YoucanalsoexporttabledatafromDreamweaverintoatextfile,withthecontentsofadjacentcellsseparatedbyadelimiter.Youcanusecommas,colons,semicolons,orspacesasdelimiters.Whenyouexportatable,theentiretableisexported;youcannotselectportionsofatabletoexport.Ifyouwantonlysomeofthedatafromatable—forexample,thefirstsixrowsorthefirstsixcolumns—thencopythecellscontain-ingthatdata,pastethosecellsoutsideofthetable(tocreateanewtable),andexportthenewtable.ImporttabledataDooneofthefollowing:SelectFile>Import>TabularData.IntheDatacategoryoftheInsertpanel,clicktheImportTabularDataicon.SelectInsert>TableObjects>ImportTabularData.SpecifytheoptionsforthetabulardataandclickOK.DataFileThenameofthefiletoimport.ClicktheBrowsebuttontoselectafile.DelimiterThedelimiterusedinthefileyou’reimporting.IfyouselectOther,atextboxappearstotherightofthepop-upmenu.Enterthedelimiterusedinyourfile.

Note: Specify the delimiter that was used when the data file was saved. If you don’t do this, the file will not be imported properly, and your data will not be correctly formatted in a table.Table Width The width of the table.

SelectSettospecifyafixedtablewidthinpixelsorasapercentageofthebrowserwindow’swidth.

BorderSpecifiesthewidth,inpixels,ofthetable’sborders.Cell Padding Thenumberofpixelsbetweenacell’scontentandthecellboundaries.Cell SpacingThenumberofpixelsbetweenadjacenttablecells.Ifyoudon’texplicitlyassignvaluesforborders,cellspacing,andcellpadding,mostbrowsersdisplaythetablewithbordersandcellpaddingsetto1,andcellspacingsetto2.Toensurethatbrowsersdisplaythetablewithnopaddingorspacing,setCellPaddingandCellSpacingto0.Toviewcellandtableboundarieswhentheborderissetto0,selectView>VisualAids>TableBorders.Format Top Row Determineswhatformatting,ifany,isappliedtothetoprowofthetable.Selectfromfourformattingoptions:noformatting,bold,italic,orbolditalic.

Export a tablePlacetheinsertionpointinanycellofthetable.SelectFile>Export>Table.Specifythefollowingoptions:Delimiter Specifieswhichdelimitercharactershouldbeusedtoseparateitemsintheexportedfile.Line BreaksSpecifieswhichoperatingsystemyou’llbeopeningtheexportedfilein:Windows,Macintosh,orUNIX.(Differentoperatingsystemshavedifferentwaysofindicatingtheendofalineoftext.)ClickExport.EnteranameforthefileandclickSave.

25

Dreamweaver CS6

Creating and Formatting ListsListsorganizetheeverydayinformationofourlives:to-dolists,grocerylists,leastfavoritecelebritylists,andsoon.Onwebpages,listsareindispensableforpresentinggroupsofitems,suchaslinks,companyservices,orsetsofinstructions. Bulleted and Numbered ListsBulletedandnumberedlistssharesimilarformatting.Dreamweaverautomaticallyindentslistitemsinbothcases,andautomaticallyprecedeseachitemwithacharacter—abullet,number,orletter,forexample:•Unordered,orbulleted,lists,likethisone,aregoodforgroupsofitemsthatdon’tnecessarilyfollowasequence.Browsersprecedeeachlistitemwithabullet.•Orderedlistsareusefulwhenyouwanttopresentitemsthatfollowasequence,suchasthenumberedinstructionsinthesectionbelow.Insteadofabullet,anumberorletterprecedeseachiteminanorderedlist.Dreamweaversuggestsanumber(1,2,3,andsoon),butyoucansubstituteRomannumerals,letters,andothervariations.YoucancreatealistfromscratchwithinDreamweaver,orapplylistformattingtotextthat’salreadyonapage.CREATING A NEW BULLETED OR NUMBERED LISTWhenyoumakeanewlistinDreamweaver,firstchoosealistformat,andthentypeinthelistitems:1.InDesignviewinthedocumentwindow,clickthepointonapagewhereyouwanttostartthelist.2.InthePropertyInspector,clicktheOrderedListorUnorderedListbuttontoapplythelistformat(TheUnorderedoptionisalsoknownasabulletedlist.)Alternatively,youcanchooseFormat>List>UnorderedListorOrderedList.Eitherway,thefirstbulletornumberappearsautomaticallyinyourdocument.3.Typeinthefirstlistitem,andthenpressEnter(Return).Repeatthisstepuntilyouaddalltheitemsinthelist.Thetextyoutypeappearsafterthebulletornumber.WhenyoupressEnter(Return),anewbulletornumberappears,readyforyournextitem.(Ifyoujustwanttomovetothenextlinewithoutcreatinganewbullet,theninsertalinebreakbypressingShift+Enter[Shift-Return].)4.Whenyoufinishthelist,pressEnter(Return)twice.Thedoublehardreturnendsthelistandcreatesanewemptypara-graph.

HTMLoffersformattingoptionsforthreebasictypesoflists.Thetwomostcommonarebulletedlists(calledunor-deredlistsinHTML)andnumberedlists(calledorderedlistsinHTML).Thethirdandlesser-knownlisttype,thedefi-nitionlist,comesinhandywhenyouwanttocreateglossariesordictionaryentries.

HTMLhasseveralpredefinedlistfor-matsthatletyouorganizeinformationintoorderlyunits.OnceyoutellDreamweaverthatyouintendtocreateabulleted,numbered,ordefinitionlist,itautomaticallyaddsthebullets,numbers,orword/definitionformattingforyou.(You’llfinddefinitionlistsdiscussedinthenextsection.)

26

Dreamweaver CS6

FORMATTING EXISTING TEXT AS A LISTYoumayhaveseveralparagraphsoftextyoualreadytypeduporpastedinfromanotherprogram.Youcaneasilychangeanysuchgroupofparagraphsintoalist:1.Selectthetextyouwishtoturnintoalist.Theeasiestwaytodothisistodragfromthefirstlistitemstraightdowntothelastone.Listsareblock-levelelements;eachparagraph,whetherit’saheadlineoraregularblockoftext,becomesonebulletedornumberediteminthelist.NOTE You can use the Property Inspector to change existing text in to a list in Code view as well.2.Applythelistformat.Justasyoucreatedalistfromscratchasdescribedabove,clickeithertheUnorderedListorOrderedListbuttoninthePropertyInspector,orchoosefromtheFormat>Listsubmenu.Theselectedparagraphsinstantlytakeonthelistformatting,completewithbulletsorautomaticnumbering.Whicheverwayyoucreateyourlist—eitherbytypingitinfromscratchorformat-tingexistingtext—you’renotstuckwiththeresultsofyourearlydecisions.Youcanaddontolists,addextraspaces,andevenrenumberthem,asdescribedinthefollowingsection.REFORMATTING BULLETED AND NUMBERED LISTSHTMLtagsdefinelists,justastheydefineotherwebpageele-ments.Makingchangestoanexistinglistisamatterofchangingthosetags,usingDreamweaver’smenucommandsandPropertyInspector.

TIP:Webbrowsersgenerallydisplaylistitemsstackeddirectlyoneontopoftheother.Ifyouwanttoaddalittlebreathingroombetweeneachitem,usetheCSSmarginpropertytoaddspaceaboveorbelow<li>tags

ADDING NEW ITEMS TO A LISTOnceyoucreatealist,youcaneasilyadditems.Toaddanitematthebeginningofalist,clickinfrontofthefirstcharacterofthefirstlistitem(notitsbulletornumber),typetheitemyouwishtoadd,andthenpressEnter(Return).Yourfirstitemnowsitsbesidethefirstbulletornumber,andpressingtheEnter(Return)keyautomaticallygeneratesthenextbulletornumber(andrenumberstheotherlistitems,ifnecessary).

NOTE You can use the Property Inspector to create a numbered or bul-leted list in Code view, but Dreamweaver won’t automatically add a new list item each time you hit return. To insert a new list item, you must click outside the current list item (either before an opening <li> or after a closing </li>) and either choose Insert>HTML.> Text Object>List Item, or just type the HTML yourself (for example: <li>New item</li>). As you can see, using Design view to add lists is a lot easier. The only benefit of the Code view is that you can insert paragraphs, headlines and other elements inside the <li> tags, which is perfectly valid HTML, but which Dreamweaver doesn’t let you do in Design view.

NOTE You may sometimes run into this problem: You select what looks like a handful of paragraphs and apply the list format, but only one bullet (or number) appears. This glitch arises when you use the line break <br> tag to move text down a line in a paragraph. While it’s true that using the <br> tag visually separates lines in a paragraph into sep-arate blocks, the text is still part of a single paragraph, and it appears as only one bulleted or numbered item. The presence of multiple <br> tags can be a real problem when you paste text from other programs. See page 93 for more on the <br> tag and how to get rid of these pesky critters.

27

Dreamweaver CS6

Insert and edit images

Insert an imageWhenyouinsertanimageintoaDreamweaverdocument,aref-erencetotheimagefileisgeneratedintheHTMLsourcecode.Toensurethatthisreferenceiscorrect,theimagefilemustbeinthecurrentsite.Ifitisnotinthecurrentsite,Dreamweaveraskswhetheryouwanttocopythefileintothesite.Youcanalsoinsertimagesdynamically.Dynamicimagesarethoseimagesthatchangeoften.Forexample,advertisingbannerrotationsystemsneedtorandomlyselectasinglebannerfromalistofpotentialbanners,andthendynamicallydisplaytheselectedbanner’simagewhenapageisrequested.Afteryouinsertanimage,youcansetimagetagaccessibilityattributesthatcanbereadbyscreenreadersforvisuallyimpairedusers.TheseattributescanbeeditedinHTMLcode.

1. PlacetheinsertionpointwhereyouwanttheimagetoappearintheDocumentwindowanddooneofthefollowing:

• IntheCommoncategoryoftheInsertpanel,clicktheImagesicon.• IntheCommoncategoryoftheInsertpanel,clicktheImagesbuttonand

selecttheImageicon.WiththeImageicondisplayedintheInsertpanel,youcandragtheicontotheDocumentwindow(ortotheCodeviewwindowifyouareworkinginthecode).

• SelectInsert>Image.• DraganimagefromtheAssetspanel(Window>Assets)tothedesired

locationintheDocumentwindow;thenskiptostep3.• DraganimagefromtheFilespaneltothedesiredlocationintheDocument

window;thenskiptostep3.• DraganimagefromthedesktoptothedesiredlocationintheDocument

window;thenskiptostep3.2. Inthedialogboxthatappears,dooneofthefollowing:• SelectFileSystemtochooseanimagefile.• SelectDataSourcetochooseadynamicimagesource.• ClicktheSitesAndServersbuttontochooseanimagefileinaremotefolder

ofoneofyourDreamweaversites.3. Browsetoselecttheimageorcontentsourceyouwantto

insert.• Ifyouareworkinginanunsaveddocument,Dreamweavergeneratesafile://

referencetotheimagefile.• Whenyousavethedocumentanywhereinthesite,Dreamweaverconverts

thereferencetoadocument-relativepath.

4. ClickOK.TheImageTagAccessibilityAttributesdialogboxappearsifyouhaveactivatedthedialogboxinPreferences(Edit>Preferences).

Manydifferenttypesofgraphicfileformatsexist,butthreegraphicfileformatsaregenerallyusedinwebpag-es—GIF,JPEG,andPNG.GIFandJPEGfileformatsarethebestsupportedandcanbeviewedinmostbrowsers.YoucaneasilyinsertimagesandeditthemusingtheDreamweaveruserinterface.

GIF(GraphicInterchangeFormat)

GIFfilesuseamaximumof256colors,andarebestfordisplayingnoncontin-uous-toneimagesorthosewithlargeareasofflatcolors,suchasnavigationbars,buttons,icons,logos,orotherimageswithuniformcolorsandtones.

JPEG(JointPhotographicExpertsGroup)

TheJPEGfileformatisthesuperiorformatforphotographicorcontinu-ous-toneimages,becauseJPEGfilescancontainmillionsofcolors.AsthequalityofaJPEGfileincreases,sodoesthefilesizeandthefiledownloadtime.Youcanoftenstrikeagoodbalancebe-tweenthequalityoftheimageandthefilesizebycompressingaJPEGfile.

PNG (PortableNetworkGroup)

ThePNGfileformatisapatent-freereplacementforGIFsthatincludessupportforindexed-color,grayscale,andtrue-colorimages,andalphachannelsupportfortransparency.PNGisthenativefileformatofAdobe®Fireworks®.PNGfilesretainalltheoriginallayer,vector,color,andeffectsinformation(suchasdropshadows),andallelementsarefullyeditableatalltimes.Filesmusthavethe.pngfileextensiontoberecognizedasPNGfilesbyDreamweaver.

28

Dreamweaver CS6

5. EntervaluesintheAlternateTextandLongDescriptiontextboxes,andclickOK.

• IntheAlternateTextbox,enteranameorbriefdescriptionfortheimage.Thescreenreaderreadstheinformationyouenterhere.Youshouldlimityourentrytoaround50characters.Forlongerdescriptions,considerprovid-ingalink,intheLongDescriptiontextbox,toafilethatgivesmoreinforma-tionabouttheimage.

• IntheLongDescriptionbox,enterthelocationofafilethatdisplayswhentheuserclickstheimageorclickthefoldericontobrowsetothefile.Thistextboxprovidesalinktoafilethatisrelatedto,orgivesmoreinformationabout,theimage.

Note:Youcanenterinformationinoneorbothtextboxesdependingonyourneeds.ThescreenreaderreadstheAltattributefortheimage.

Note:IfyouclickCancel,theimageappearsinthedocument,butDream-weaverdoesnotassociateaccessibilitytagsorattributeswithit.InthePropertyinspector(Window>Properties),setpropertiesfortheimage.

Note:Wheninsertingimagesit’salsopossibletouseanabsolutepathtoanimagethatresidesonaremoteserver(i.e.,animagethatisnotavailableonthelocalharddrive).Ifyouexperienceperformanceproblemswhileworking,however,youmightwanttodisableviewingtheimageinDesignviewbydeselectingCommands>DisplayExter-nalFiles.

29

Dreamweaver CS6

Wrap-up

Uponcompletingthisworkshop,youshouldbeabletodothefollowing:

• InsertImportWordDocuments(Windows)• InsertTablesandModifythem• InsertImages