MACROMEDIA CONTRIBUTE User manual

ContributeManual
· UsingTemplateswithContribute
Navigatingtowebpages
· CreatinganewpagefromaTemplate
oEditableRegions
oOptionalRegions
· Editingexistingwebpages
· Editingpageelementsnotineditableareas
· UsingCascadingStyleSheetsinContribute
· AddingWordandExceldocumentstoawebsite
· WorkingwithtablesinContribute
· MakinghyperlinkswithContribute
· Addinganimagetoapage
· Addingkeywordsandadescriptionforapage
· SavingDrafts
· Cancelingadraftornewpage
· PublishingYourPage
UsingTemplateswithContribute
Howtemplateswork
AdevelopermakesatemplateinDreamweaverbycreatingapageandaddingcontentthat
he/shewantstobepresentonallpagesthatusethetemplate.Asimpletemplatemightonly
containatablewiththelogoandabackgroundcolorforthepage.Amorecomplextemplatemay
haveafullnavigationsysteminplace,additionalcontentacrossthetopofthepage,andafooter
containingcopyrightinformationalongthebottom.
Thepoweroftemplates,though,liesinthevariousmethodsofeditingormodifyingcertain
sectionsofthepage.Thetemplatecreatorpickscertainareasofthetemplatethatshouldremain
editableoroptional,anduserswhomakepagesfromthistemplatewillonlybeabletoedit(and
add)thecontentinthosespecificareas.
ForContributeadministratorswhowantmoreinformationabouthowtocreateatemplatein
DreamweaverMX,pleaseseetheAdditionalinformationsectionatMacromedia’swebsite. Fora
moredetailedusermanual,downloadMacromedia’sUsingContributeManual(PDF),andvisit
ContributeSupportCenter.
Navigatingtowebpages
TheeasiestwaytofindawebpageyouwanttoeditistobrowsetothepageinContribute,just
asyouwouldbrowsetoapageinanywebbrowser.Youcanusetheaddressbarinthe
ContributewindowjustasyouwouldanInternetExplorerorNetscapebrowserwindowaddress
bar.
Viewingdraftsandnewpages
Draftsyouarecurrentlyediting,andnewpagesyou’vecreatedbuthaven’tpublishedyet,appear
inthePagespanel.YoucanalsoaccessthesepagesusingtheFile menu.

Toviewadraftornewpage,dooneofthefollowing:
· ClickthedraftornewpagetitleinthePagespanelinthesidebar.
· SelectFile>Drafts,thenselectapagefromthepopupmenu.
Addingapagetoyourbookmarks
Youcanaddanywebpage–notjustpagesinwebsitesyou’veconnectedto–toyourbookmarks
list.
Toaddapagetoyourlistofbookmarks:
1. Browsetothepageyouwanttoaddtoyourbookmarkslist.
2. SelectBookmarks>AddBookmarkfromthemenu.
TheAddBookmarkdialogboxappears.
3. Ifyouwanttochangethenameofthebookmark,enteranewnameintheNametext
box.
Thisisthenamethatappearsinyourbookmarkslist.
4. Ifyouwanttoaddthepagetoafolder,clickanexistingfoldernameorclickNewFolder
toaddafolder.
5. ClickOK.
Creatinganewpagefromatemplate
1. InContribute,chooseFile>NewPage.
2. IntheNewPagewindow,therewillbealistoftemplatesavailabletoyouforcreatinga
newpage.Createanewpagebyclickingonatemplatefromthetemplatesfolder.
Note:Iftheneededtemplatedoesnotshowupinthetemplatesfolder,clicktheRefresh
Templatesbutton.
3. Afteryouhaveselectedthenameofthetemplateyouwouldliketouse,youwillseewhat
theblanktemplatelookslikeinthepreviewpanetotheright.
4. Specifyatitleforthepageinthepagetitlefield.PageTileshouldbeintheformat:
PageTitle:DepartmentName:IndianaUniversity
clickOKtomakethepage.

EditableRegions
Aneditableregionisaspaceonthetemplatebasedpageinwhichyoucanputincontent.Thisis
themostcommontemplatefeaturethatyouwillbeusing.InContribute,abasiceditablearea
looksliketheimagebelow.Thelightblue/greenoutlinedefinestheeditableregion.Inthis
example,boththeDepartmentNameareaandContentareaareoutlinedinblue/greenand
thereforeareeditable.InContribute,youwillonlybeabletoaddcontentwithintheseareas.

OptionalRegions
Youcanenableoptionalregionsbyclickingon TemplatePropertieslink. Selectoptionalregion,
checkShow,andthenclickok.
Yourpagewillnowdisplaytheoptionalrightnavigation.

Tohideoptionalregionclickontemplateproperties,selectoptionalregion,anduncheck
ShowRegion. ToedittherightnavigationpleaserefertotheEditingpageelementsnotin
editableareassection.
Editingexistingwebpages
Youcaneditanypagesonyourwebsite,aslongasyouhavepermissionandaslongas
someoneelseisnotcurrentlyeditingthepage.Whenyoubrowsetoapage,themessagearea
underthetoolbarindicateswhetheryoucaneditthatpage.
Openingapageforediting
Toopenapageforediting,simplybrowsetothepageorusetheContributeworkspacetoquickly
accessspecialpages.
Toeditapage:
1. Browsetoapageyouwanttoedit
2. Dooneofthefollowing:
· ClicktheEditPagebuttoninthetoolbar.
· SelectFile>EditPage.

Editingpageelementsnotineditableareas
Contributeenablesyoutoaccesspagesandfilesassociatedwithyourwebsitethatyoucan’t
browseto.UsetheChoosebuttoninthetoolbar(aftertheaddressbar)toaccesspagesandfiles
thataresavedinawebsitefolder,butaren’tlinkedfromanypageonyourwebsite. Themost
commoninstanceofthiswilloccurwhenyouneedtoupdatethefooter,leftnavigationorright
navigation.
Toedittheleftnavigation:
1. IntheContributebrowseroreditor,selectView>ChooseFileonWebsiteorclickthe
Choosebuttoninthebrowsertoolbar.
TheChooseFileonWebsitedialogboxappears.
2. Toedittheleftnavigation,doubleclickonthe_leftnav.shtmlfileintherootdirectory.
Includefilesareidentifiedwithanunderscore.
Whenyouselectthefile,apreviewwillappearsothatyoucanbesureyou’reselecting
thecorrectfile.
3. ClickOK
UsingCascadingStyleSheetsinContribute
CascadingStyleSheets(CSS)isalanguageusedinconjunctionwithHTMLtodefinehowa
pagelooks.CSSconsistsofasetofrulesdefinedbythewebdeveloperordesignerthattellthe

browserhowtodisplaythepageelements.
WithCSS,youcanspecifythepagelayout,fontsize,typeandcolor,bordersandotherdesign
parameters.NotonlydoesCSSprovidemoreoptionsfordesignthanHTML,butitalsoallows
developerstomanagethelookoftheentirewebsitefromacentralfile.Simplychangearuleof
styleandit'sautomaticallyappliedacrossthesite!
OverviewofCSSstyletypes
Thereare3maintypesofstyles.Theyare:
1. Customclasses:Thesearestylesthatcanbeappliedtospecificpageelements,such
asparagraphsandtables.ThesecanbemadeavailabletoContributeusers.
2. RedefinedHTMLtags:Thesearerulesthataredefinedforspecifictags.Theyare
automaticallyappliedtoeveryinstanceofthattag.Forinstance,developerscanspecify
thateverytableonthesitewillhavea2pixel,redborder.Everynewtablethatismade
willautomaticallyhavethatruleapplied.
3. CSSSelectors:Selectorsareusedtospecifystylesforspecialcombinationsoftags.For
instance,selectorsareusedforremovingtheunderlinesfromlinks.LikeredefinedHTML
tags,theseareappliedautomaticallytoeveryinstanceoftheselectorrule.
Asnotedabove,customclassesaretheonlyCSSstylesavailabletoContributeusers.Thisis
becausetheothertypesarealreadyappliedgloballytothetags.WithcustomclassesContribute
userscanselectfromthelistofdefinedclassesandapplythemtowhateverelementtheywish.
ContributeuserscannotcreateCSSfiles,buttheycanusethecustomclassesthathavebeen
linkedtothepagebytheDreamweaverMXadministrator.Oncelinkedtothepagein
Dreamweaver,thecustomclasseswillbeavailableintheStyledropdownmenu.

Applyingthecustomclasses
Toapplyacustomclass:
1. Highlightthepageelementtowhichyouwouldliketoapplythestyle.
2. ClickontheStyledropdownmenu(shownabove)andselectthedesiredstyle.Itwill
automaticallybeappliedtotheselection.
Note:ThestyleoptionsarealsoavailableintheFormat>Style menu.
3. Toremovetheclass,highlighttheselectionandselectNonefromtheStyledropdown
menu.
AddingWordandExceldocumentstoawebsite
WithContributeyoucaneasilyaddMicrosoftWordandMicrosoftExceldocumentsorcontentto
yourwebsite.
TherearetwowaystoaddWordorExcelcontenttoawebpage:
· AddthecontentsofaWordorExceldocumenttoaneworexistingwebpage
(recommendedforsmallerdocuments,under300KwhenconvertedtoHTML)
· InsertalinktoWordorExceldocumentonanexistingwebpage(recommendedfor
largerdocuments,over300KwhenconvertedtoHTML)

AddingWordorExcelcontenttoapage
YoucanaddthecontentsofaWordorExceldocumenttoaneworexistingwebpage.When
youaddcontenttoapage,ContributeconvertsthecontenttoHTMLandcopiesittoyourweb
page.YoucaneditthecontentinContribute;changesyoumaketotheoriginalfileonyour
computerwillnotappearonyourwebsite.
ToaddthecontentsofaWordorExceldocumenttoaneworexistingwebpage:
1. Dooneofthefollowingtoselectthepagewhereyouwantthecontenttoappear:
· Browsetoanexistingwebpage,clicktheEditPagebutton,thenplacetheinsertion
pointinthedraftwhereyouwanttoaddthecontent.
· Createanewpage
2. Dooneofthefollowingtoselectthefile:
· DragthefilefromitscurrentlocationtoyourContributedraftwhereyouwantthe
contenttoappear.IftheInsertMicrosoftWordorExcelDocumentdialogbox
appears,clickInsertthecontentsofthedocumentintothispage,thenclickOK.
· SelectInsert>MicrosoftWordDocumentorInsert>MicrosoftExcelDocument.
IntheOpendialogbox,browsetothefileyouwanttoadd,thenclickOpen.
ThecontentoftheWordorExceldocumentappearsinyourdraft.
InsertingalinktoaWordorExceldocument
YoucaninsertalinktoaMicrosoftWordorExceldocumentinanexistingpage.
Whenyoupublishthepagewiththelink,ContributecopiestheWordorExceldocumentintoyour
website,andthenlinkstothatcopy(nottotheoriginalfileonyourcomputer).
TocreatealinktoaWordorExceldocument:
1. Browsetoanexistingpagewhereyouwantthelinktoappear,thenclicktheEditPage
buttoninthetoolbar.
2. Dooneofthefollowingtoselectthefile:
· DragthefilefromitscurrentlocationtoyourContributedraftwhereyouwantthelink
toappear.IftheInsertMicrosoftWordorExcelDocumentdialogboxappears,
clickCreatealinktothedocument,thenclickOK.
· Placetheinsertionpointinyourdraftwhereyouwantthelinktoappear,orselecttext
oranimageofthedraft,thenclicktheLinkbutton inthetoolbarandselectFileon
MyComputer.Enterlinktext,browsetothefileyouwanttolinkto,thenclickOK.
AlinktotheWordorExceldocumentappearsinyourdraft.
WorkingwithtablesinContribute
TableBasics
MacromediaContributemakesusingtableseasyandintuitive,butit'sgoodtohavean
understandingoftableterminologysothatyoucanbuildtablesquicklyanduseallavailabletools.
Tablesconsistofrowsandcolumns.Thenumberofrowsandcolumnsdefinethenumberofcells
inthetable.Cellsaretheindividualunitsorboxesinthetable.Allcontentisinsertedintothe
cells.Youcandefineatablewithanynumberofrowsandcolumns,andhavetheflexibilityto

add,subtractandmergecellstogether.Contributehasavarietyofwaysofcreatingandediting
yourtables.
Tablesalsohavepropertiesthatdefinethelookandlayout.
· BorderThelinethatsurroundstheoutsideofthetable.Thiscanbesettoanysizeor
noneatall,but13pixelsisstandard.Bordercolorscanalsobeset.
· CellPaddingThisistheamountofspacebetweentheactualcontentofthecellandthe
cellborder.Thispropertycanaffectthelayoutofcontentwithinacell.
· CellSpacingThisistheamountofspacebetweenthebordersofthecells.
· TableHeaderAheaderisarowthatisusedtodistinguishcolumnsorrows.Ifyouhave
atableofaddresses,theheaderistherowthatspecifiestheName,Address,Phone,
etc...Headersareusuallymadebold.
· BackgroundcolorBackgroundcolorscanbesetforthewholetableorforindividual
cells.
CreatingaTable
CreatingatableinContributeiseasy.
1. Putthecursoratthepointinthedocumentwhereyouwanttoinsertthetable.
2. ClicktheTablebuttoninthetoolbar(Ctrl+Alt+T).Thisfollowingdialogboxwillappear.