Dreamweaver CS6 - Mason Workshops...Dreamweaver enables you to manipulate columns as well as rows...
Transcript of Dreamweaver CS6 - Mason Workshops...Dreamweaver enables you to manipulate columns as well as rows...
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