kompozer guide
TRANSCRIPT
-
8/2/2019 Kompozer Guide
1/17
Using KompoZer at SVSU
Created*bytheSVSUITDLabx7471updated9/24/08
*AdaptedfromtheKompZerandNvuUserGuidebyCharlesCooke
TableofContentsOncampuspublishinginstructions............................................................................................................... 3
Offcampuspublishinginstructions.............................................................................................................. 3
Tocreateanewpage.................................................................................................................................... 3
ToopenanexistingHTMLpage.................................................................................................................... 3
SavingaPage................................................................................................................................................ 3
Findingyourwayaround.............................................................................................................................. 4
NumberedandBulletedlists........................................................................................................................ 4
Tostartalistfromscratch........................................................................................................................ 4
Tochangeexistingtextintoalist............................................................................................................. 4
Toadditemstoalist................................................................................................................................. 4
Nestinglists............................................................................................................................................... 4
Checkingspelling........................................................................................................................................... 5
Workingwithimages.................................................................................................................................... 5
Insertingimages........................................................................................................................................ 5
Toinsertanimage..................................................................................................................................... 5
Positioningandresizingimages................................................................................................................ 5
Toalignanimage.................................................................................................................................. 6
Usingtables................................................................................................................................................... 6
Insertingtables.......................................................................................................................................... 6
Formoreoptions...................................................................................................................................... 7
Formattingtables...................................................................................................................................... 7
Tablesize............................................................................................................................................... 7
Coloring,addingdeletingandmergingcells,rowsandcolumns......................................................... 7
Cellsizes................................................................................................................................................ 8
Tableproperties.................................................................................................................................... 8
Aligningtext.............................................................................................................................................. 8
Links.............................................................................................................................................................. 9
-
8/2/2019 Kompozer Guide
2/17
Linkingtext................................................................................................................................................ 9
Linkingtoanotherfile........................................................................................................................... 9
Insertinganemailaddress.................................................................................................................... 9
InsertingnamedAnchors...................................................................................................................... 9
Linkingtonamedanchors..................................................................................................................... 9
Linkingimages..................................................................................................................................... 10
EditingLinks........................................................................................................................................ 10
Layers.......................................................................................................................................................... 10
Creatinglayers........................................................................................................................................ 10
Manipulatinglayers................................................................................................................................ 11
Gluing.......................................................................................................................................................... 11
TheBody..................................................................................................................................................... 12
Tosetabackground............................................................................................................................ 12
Tocenterapageinthewindow......................................................................................................... 12
Templates.................................................................................................................................................... 13
Createanewtemplate........................................................................................................................... 13
Savingtemplates..................................................................................................................................... 13
Createatemplatefromapage............................................................................................................... 13
Settinguptemplatedetails..................................................................................................................... 14
Tomakeblockseditable..................................................................................................................... 14
Tomakeaflowselectioneditable...................................................................................................... 14
Usingtemplates...................................................................................................................................... 14
Tocreateapage.................................................................................................................................. 14
Tousethepage................................................................................................................................... 15
Editingtemplates.................................................................................................................................... 15
SiteManager............................................................................................................................................... 15
Settingupsites........................................................................................................................................ 16
SiteManagerFunctions...................................................................................................................... 16
Remotesites....................................................................................................................................... 16
Publishing............................................................................................................................................ 17
-
8/2/2019 Kompozer Guide
3/17
Oncampuspublishinginstructions1. WhenKompoZeropens,gotoEdit PublishSettings2. Insertthefollowinginformation:3. SiteName: SVSU4. HTTPaddress: http://www.svsu.edu5. Publishingaddress:netstorage.svsu.edu/public_html6. Username: SVSUusername7. Password:SVSUpassword8. ClickOK
OffcampuspublishinginstructionsTODOWNLOADCOREFTPGOTO
http://www.svsu.edu/its/servicessupport/technologyresources/pages/coreftpinstallationinstructions
.html
1. Changethepreconfiguredsettingstothis::2. SiteName:M:/drive3. Host/IP/URL:netstorage.svsu.edu4. ClickAdvanced5. ClickDirectory/Folder
RemoteStartFolder: public_html
6. ClickOkay7. Username: yourSVSUusername8.
Password:
your
SVSU
password
9. Checkthisitem:SSH/SFTP10.ClickConnect
TocreateanewpageOntheCompositiontoolbarClicktheNewbutton.
ToopenanexistingHTMLpageOnthemenuBarclickFilethenOpenFile.BrowsetothefileandclickOpen.
SavingaPageOntheCompositiontoolbarclickSave.
Ifyouaretryingtosaveanewdocument,adialogwindowwillaskyoutoenteraTITLEforthepage.
TheTITLEthatyouenterhereisNOTthefilename. Typeatitle,thenClickOK.
http://www.svsu.edu/http://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/its/services-support/technology-resources/pages/coreftp-installation-instructions.htmlhttp://www.svsu.edu/ -
8/2/2019 Kompozer Guide
4/17
Nextasavewindowwillopenwhichallowsselectionofthefolderthepageshouldbesavedwithin.
Typeanameforthefile.ThefileextensionwillbeHTML.
Findingyourwayaround
age.
WhenKompoZerstarts,amenubarwillbedisplayedacrossthetop(File,Edit,Viewetc).BelowthisarethreeToolbars.ToensurethateverythingisvisibleontheMenubarselectView>Show/Hideandplace
achecknexttoeachofthefollowingtoolbars:CompositionToolbar,FormatToolbar1,FormatToolbar
2,EditModeToolbar,Statusbar,Rulers,SiteManager.
Acrossthecentreofthewindowaretwopanes:theSiteManagerontheleftandablankwebpageon
theright.
AtthetopofthePageareathereisaPagetabwhichdisplaysthenameofthepage(Untitled). If
thereareseveralpagesopen,clickontheappropriatetabtodisplaythecorrectp
AtthebottomofthepageareaistheEditModeToolbarwhichallowsoneoffourViewingmodesforapage(Normal,'HTMLTags','Source','Preview'.)
NumberedandBulletedlistsTostartalistfromscratch
1. Clickoneofthelistbuttons(NumberedListorBulletedlist)ontheFormattoolbar.2. Typethefirstitem.3. PressEnterandtypethenextitem.4.
To
finish,
on
the
last
(blank)
item
press
Enter
Tochangeexistingtextintoalist1. Selectthetextrequired.2. Clickoneofthelistbuttons(NumberedListorBulletedlist)ontheFormattoolbar.3. Thetextwillbechangedintoalistanewitemstartingforeachparagraphorotherblockitem
encountered.
Toadditemstoalist1. Clickattheendofthelastiteminthelist.2. PressEnterandtypethenewitem.3. Numberingandformatwillcontinuefromthepreviousitem.
Nestinglists1. Tostartanewleveloflistwithinanexistinglist,clickattheendofthelineprecedingthenew
listtobegenerated.
2. PressEnterthenhitthetabkeyonthekeyboard.3. TypethecontentofeachlistitemfollowedbyEnter.
-
8/2/2019 Kompozer Guide
5/17
CheckingspellingClickontheSpellbutton.Thespellcheckerwillworksequentiallythroughthepage.
Byfirsthighlightingasectionofapageonlythatsectionwillbechecked.
Itisalsopossibletorunthespellcheckerallthetime. Anymisspelledwordsunderlinedinred. Tosethisoption,ontheMenuBar,selectTools>Options.Inthefollowingwindow,selectthe'Advanced
buttonandsetUnderlinemisspelledwordsOK.
t
n
in
x
ge.
Note: Spellcheckingusesenormousprocessorresources. Openonlyonedocumentatatimewhe
spellchecking. Whenworkingonlongdocuments,ifyoursystemgrindstoahalt,disablethiswhennot
required.
WorkingwithimagesWithKompoZeritiseasytoinsertimagesontoyourpage.Browsersacceptimagesinthreeformatsgif,
jpgorpng.Youmayhavetouseagraphicspackagetogetyourimageintoasuitableformat. Itis
necessarytolocateanyimagesinthesamefolderasyourwebpagedocumentorinasubfolderofthis.
InsertingimagesWarning: Beforeinsertinganimage,saveyourpage. OtherwiseKompoZerwillhavedifficulty
referencingwhereyourimageislocated.
Toinsertanimage1. Clickthe'Image'buttonontheCompositiontoolbar.2. TheImagepropertieswindowopens. Click'ChooseFile'andbrowseandselectafile.3. ClickOpen.4. IntheboxlabeledAlternatetextaddadescriptionoftheimage. Thisprovidestextwhichwill
appearinplaceoftheimagewithbrowsersthatcannotdisplayimages. Itwillalsobeusedby
thosewithvisualimpairmentsusingscreenreadersandvoicesynthesizers. Thecontentofthis
boxmustbecarefullyconsidered.
o Wheretheimageispurelydecorative,andnotnecessarytounderstandingthepage,alternativetextisnotrequiredandshouldbeomitted.
5. ClickOKPositioningandresizingimagesTheimagewillbeinsertedatthepointwherethecursorwaslocated. Clicktheimage. Asizingboappearsaroundtheimage. Theboxhas8graphicalhandles(smallwhitesquares)oneateachcorner
oftheimageandoneinthemiddleofeachside).
Dragonahandleatacornertoalterthesizeoftheimage. Draggingahandleinthecentreofaside
willaltertheshapeoftheima
-
8/2/2019 Kompozer Guide
6/17
Note: Ideallyimagesshouldbeproducedatthesizerequiredratherthanresizingthem.Importing
largeimagesandreducingthesizewastesbandwidthandslowspresentation. Resizingbysmall
amountscanintroduceundesirableartifacts.
Imagesinthemiddleofparagraphsarenotusuallywhatisneeded.Youcanplacethemateitherthe
rightorleftsideandhavethetextwrapround.
Toalignanimage1. Clickontheimage.2. ClicktheImagebuttonontheCompositiontoolbar:thiswillopentheImagepropertiesbox.3. SelecttheAppearancetab4. InthedropdownboxAligntexttoimageselecttherequiredalignment.5. ClickOK
Trythevariousoptions.Thetext,startingfromwheretheimageisinserted,willwraparoundtheimage.
Youmaypreferthecompleteparagraphtowrap.Clickontheimageanddragthecursortothestartoftheparagraph.
Basically,thereisonlytheoptiontoleftjustifythepictureorrightjustifythepictureinrelationtotext.
Youmaydecidethattheimageistooclosetothetext,thatyouwouldlikemorespacearoundit.Again
ImagePropertiesallowsthis.OntheAppearancetabsetSpacingTopandBottomand/orLeftand
Rightasrequired.Youcanalsoputaborderofselectedwidtharoundanimage.Theborderwillbethe
samecolorastheadjacenttext.
UsingtablesTablesallowdataimages,links,forms,formfields,othertables,text,etc.tobearrangedintorows
andcolumnsofcells.
Atableisbasicallyarectangulargridforminganarrayofboxesintowhichthedataareplaced.Therules,
betweencells,andtheborder,aroundtheoutsideofthetable,maybeeithervisibleorinvisible.The
boxesarecalledcellsandmaybecolored.
Insertingtables1.
On
the
Composition
Toolbar
click
the
Table
button.
The
Insert
table
window
appears.
2. LeavetheQuicklytabselectedanddragoutamatrixthenclickthebottomrightcelltodefinethetablearrangement.
3. ThecellsappearonthescreenwithnarrowoutlinesNote: IflaterthetableborderissettozerotheseoutlinesdisappearbutKompoZerinnormalview
replacesthemwitharedoutline.ThisdoesnotappearinPrevieworinabrowser.
Tableshaveresizingboxessimilartothoseusedwithimages
-
8/2/2019 Kompozer Guide
7/17
FormoreoptionsRightclickthetableandselectTableCellproperties.TheTablepropertieswindowopens.Thishastwo
tabsTableandCellswhichallowoverallcontrolofseveralaspectsofeitherthetableorindividual
cells.Thisincludes:
a. Alignmentoftextwithincellsb. Wrappingoftextc. Cellspacing thegapbetweencellsd. Cellpadding thegapbetweentheedgeofthecellandthetextwithinite. Sizeoftableandcellsf. Backgroundcolorg. Selectionofcellsas'Normal'orHeader(Cellswhichareheadingstorowsorcolumns
shouldbeselectedasHeader.Normallythisresultsinthembeingrenderedinbold
type.)
FormattingtablesTablesizeTablescreatedusingtheQuicklytabhavewidthsetto100%ofthewindowsize.
Tablesatfullwindowwidthgivethemaximumavailablespacefordata.Thewidthaccommodatesto
screenorwindowsize.
Itispossibletosetthewidthtoasmallerpercentageofwindowsizeortoafixedsizeinpixels.Fixed
sizedtablesareinflexibleinuseandcouldresultintheuserhavingtoscrollhorizontallytoreadthe
contentsomustbeusedwithcaution.Itisalsopossibletoleavethewidthunspecified.Thisislikelyto
resultinthebestpresentationasthebrowserwillsetthewidthtotheoptimalvalue.
Toadjusttablesize,withthecursorinthetable,clickthetablebutton(ordoubleclickthetable).Inthe
TablePropertieswindowselecttheTabletab.Thewidthcanbeseteitherasapercentageofwindow
widthorinpixels.Toleaveitunspecifiedclearanynumberinthewidthbox.
Itispossibletoadjustthesizeofatableusingthesizingboxes.Whenyoudothisthesizeisspecifiedin
pixels.
Coloring,addingdeletingandmergingcells,rowsandcolumnsRightClickinatableorcellandseveralmenuoptionsappearwhichallowthetableorcelltobe
formattedasdesired.Someoftheoptionsarecontextsensitive.
Tableorcellbackgroundcolorallowsthecolorofthecompletetableoranycelltobeset. TableInsertprovidesmeansofaddingrows,columns,individualcellsoreventablesintoacell. Tabledeletedeletesthetable
Acellcanbejoinedwiththecellonitsright,thusmergingtwocells.Virgincellscannotbesplitbut
joinedcellscan.
Ifadjacentcells(whetherwithinaroworcolumn)areselectedtogethertheycanbejoined.
-
8/2/2019 Kompozer Guide
8/17
Eachcell,whenclicked,revealsasetofsixmanipulationsymbols(trianglesandcircleswithxinside),
theseprovidearapidmethodofinsertingordeletingrowsandcolumnsofcellsasshowninthefigure.
Settingthecellbackgroundcolorforadjacentcellstoadarkcolorrevealsgapsbetweenthecells.
Thismaybeconvenientifthecellsaretobefilledwithtextasitavoidstwoitemsoftextabuttingeach
other.
Atothertimesitisaproblem.ThegapiscontrolledbytheCellspacingattribute.
CellsizesAsyouworkonatablethesizesofthecellsmaykeepchanging.Itisusefultounderstandhowbrowsers
treattables.Unlessthesizeofatableorcellisconstrainedinsomewayabrowserwillexpandthecellin
anattempttoaccommodateanytextinserted.Othercellsinthesamecolumnwillhavethesamewidth.
Thiswilltendtoreducethespaceavailableforanyadjacentcolumnofcells.Eventuallythebrowserwill
attempttobalancetheallocationtoeachcolumnbywrappingthetext.Theoveralleffectwillprobably
minimizethetotalheightofthetable.
Tablescanhavetheirwidthcompletelyunspecified,specifiedtobeaparticularwidthinpixelsorsome
percentageofwindowwidth.
WhenatableisstartedtheInsertTableautomaticallyselectstheQuicklytab.ThisallowsKompoZerto
makethedecisions.IfthePreciselytabisselectedtheusercanmakeselectionsspecifyingthewidthin
pixelsorasapercentageandspecifyingtheborderwidth.Tablesspecifiedaspercentageorunspecified
aremoreaccommodatingtodifferingwindoworscreensizesandarerecommended.
Browsersdonothavetoslavishlyfollowinstructions.Ifatablespecificationistoonarrowto
accommodatethecellcontentsthetablewillgrowbeyonditsspecifiedlimit.ThiscanoccurifalargeimageisinsertedorlongwordslikeAntidisestablishmentarianism.
TablepropertiesThetablepropertieswindowopenswhenyou
Clickatableandclickthetablebutton RightclickanywhereinatableandselectTablecellproperties.
Tablesand
cells
can
be
reformatted
inmany
ways.
This
means
that
you
dont
have
toplan
everything
in
advancebeforeyoustartyourtableassettingscanbeadjustedlater.
Thetablepropertieswindowprovidesanoptiontoinsertacaptionwhichcanbepositionedonany
edge.
AligningtextBrowsersnormallydisplaytextalignedleftand,intheverticaldimension,inthemiddleofthecell.To
alterthis,placethecursorinacellandclicktheTablebutton.TheTablepropertieswindowallowsthe
alignmenttobealtered.TosetthealignmentforallcellsfirstselectTable>Select>AllCells
-
8/2/2019 Kompozer Guide
9/17
LinksLinksprovidethemainmeansofnavigatingwebsites.Theyallowyoutomovequicklyfromoneplaceto
eitheranotheronthesamepage,adifferentpageonthesamesiteorapageonanexternalsite.Links
maybeattachedtoanyelementonapage. Usuallyhoweverweuseafewwordsoftextoranimage
whichweclickontoactivatethelink.
LinkingtextLinkingtoanotherfile
1. Selectafewwordsoftext2. OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselect
CreateLink.TheLinkPropertieswindowopens
3. ClickonChooseFileandbrowsetothefilethatyouwanttolinkto4. ClickOPEN5. ClickOK
Thetextisnowunderlinedandinadifferentcolor(probablyblue)indicatingthatthetextislinked.
InsertinganemailaddressInsteadoflinkingtoafileitispossibletoinsertanemailaddress.Theresultwillbewhenthelinkis
clickedtheemailclientonthevisitorsmachinewillbeopenedwiththecorrectaddressselected.
1. Selectafewwordsoftext2. OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselect
CreateLink.TheLinkPropertieswindowopens
3. EntertheemailaddressandchecktheboxTheaboveisanemailaddress4. ClickOK
InsertingnamedAnchorsThereisasecondtypeofAnchorelementtheNamedanchor.Suchananchorisextremelyusefulasit
canactasatypeofbookmarkdefiningaparticularplaceonapage. Linkscanjumptosuchbookmarks.
1. Placethecursoratthepointyouwanttomark.2. ClicktheAnchorbuttonontheCompositiontoolbaror,ontheMenuBar,selectInsert>
NamedAnchor.Thenamedanchorpropertieswindowappears.
3. Enterauniquenamefortheanchor.4. ClickOK.InNormalviewanchorsaremarkedbyapictureofananchor.
Linkingtonamedanchors1. Selectafewwordsoftext
-
8/2/2019 Kompozer Guide
10/17
2. OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselectCreateLink.TheLinkPropertieswindowopens
3. Usethedropdownlisttoselecttheanchornamethatyoucreatedintheprevioussection.4. Youranchornameshouldappearthereprecededbya#.ClickOK.
Note: Ifyourpageisshortyoumaynotnoticethelinkwhiletesting.Youneedtotestwithalongpage
withthelinktowardsthebottomandtheanchortowardsthetop.
Linkingimages1. Clickontheimage2. OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselectCreate
Link.The'ImagePropertieswindowopens
3. ClickonChooseFileandbrowsetothefilethatyouwanttolinkto.4. ClickOPEN5.
Click
OK
EditingLinksTochangethefiletowhichalinkrefers,doubleclickonthelink.TheLinkpropertieswindowopens(for
animagetheImagePropertieswindowopens clicktheLinktab).Editthelink.
Toremovethelink,deletethelinkreferenceinthebox.
LayersItemsforminglayersaretakenoutofthenormaldocumentflowandplacedinpositionsdefinedonthe
pageabsolutelye.g.inpositionsfixedrelativetothepageboundary.
Whilelayersintroducealevelofflexibilitytopagedesigntheyalsoinvolvecomplexitiesthatnewcomers
maywishtoavoid.Thissectionisthereforeforthosewhowishtodelvefurther.
Creatinglayers1. Clickintheblockthatyouwanttoformatasalayer.2. ClickthelayerbuttonontheFormat(2)toolbar.
a. TheblockbecomesaLayer.Layershavesizingboxeswhichallowthesizetobealtered.Atthe
topofthelayerisapositioninghandle(denotedbyafourwayarrow).
b. Tomovethelayerclickanddragthehandle.Layersdonothavetoconsistofasingleblockanysequenceofelementsthatcanbeselectedtogether
canbeconvertedintoalayer.Thismaybeseveralparagraphswithorwithoutheadings,imagesand
tables.
-
8/2/2019 Kompozer Guide
11/17
Layersallowitemstobeplacedonapagesothattheabsoluteposition,relativetothepage,isdefined.
Thisprovidesafacilitycommonindrawinganddesktoppublishingprogramsandallowsitemstobe
overlaidontopofeachother.Assuchitisaverypowerfultool.
ts.
r
Textitemsnormallyhaveatransparentbackgroundsowhenoverlaidbecomeconfused.Byformatting
themwithabackgroundcolortheybecomesolid.Similarlytableswithsolidbackgroundandnontransparentimagesmaybeoverlaidoneachothertoproducecleareffec
ManipulatinglayersTomovealayer,clickthepositioninghandleanddragittotherequiredpositiononthepage.
Toresizealayer,dragasizinghandleasforotherelements.
Whenpositioningalayer,KompoZerallowspixelaccuracymovement.Thiscanbedifficulttoachieve
and,ifitisattemptedtolineupitems,smallerrorsmaybecomeobvious.Betterresultsmaybeachieved
bysnappingpositionstoacoarsergrid.TodososelectFormat>Positioninggridandsetthegranularity
required.Movementwillnowbeconstrainedtotheselectionmade.
Note: Thissettingmustbeseteachtimeapageisopened.Itisnotremembered.
Note: Snappingappliestodraggingthepositionnotthesize.
Warning: Ifseveraloverlappinglayersoccuronapageitmaybecomeimpossibletoclickonahandle.
Inthiseventtryresizingitsothatthehandlesbecomeaccessible,alternativelytemporallymoveanothe
layeroutoftheway.
Whenpositioninglayerssothattheyoverlapamechanismisneededtodefinewhichisinfront(soentirelyvisible)whichbehind(sopartiallyobscured).Twobuttons(BringtofrontandSendto
back)ontheFormat2toolbartakecareofthis.Selectthelayerandclicktheappropriatebutton.
Gluing
-
8/2/2019 Kompozer Guide
12/17
SixotherbuttonsontheFormat2toolbarcanbeusedtomodifythebehavioroflayers.Theyare
Gluetotheleftborder Gluetotherightborder Stayinthecenter Gluetothetop Gluetothebottom Stayinthemiddle
Clickingthefirst(Gluetotheleft)initiallyhasnoeffectsincethisisthedefaultcondition.Ifclickedafter
someconflictingconditionwassetitfixesthedistanceofthelefthandsideoftheselectedlayerfrom
theleftedge.
Gluetotherightfixesthedistanceoftherighthandside(ratherthanthelefthandside)ofthelayer
fromtherighthandedge.
Gluetothecenterdefinestheposition,notinabsolutetermsbutasapercentageoftheavailablewidth.
Thus,ifcreatedatthecentreofthespace,itwillremaininthecentre,similarlyforanyotherratio.
Gluetothetopalsorepresentsthedefaultconditionotherwiseitfixesthedistancefromthetopofthe
layertothetopedge.
GluetothebottomandStayinthecenterarebestavoidedbyotherthanadvanceduserswhowill
probablybeusingstylesheetstoachievetheeffectrequired.
TheBodyThisisthebackgroundonwhichthewholepagesits.TheBodymaybethoughtofasthePageitself.
Normallyitisoflittleconcerntothedesignerbutthereareafewsituationswhenitis.
ThebodycancarryabackgroundcolororimagewhichliesbehindeverythingelseonthepageinHTML
documents.
Tosetabackground1. OntheStatusbar,clickthemarker.Allthecontentsofthepagewillbehighlighted.2. RightclickandselectInlineStylesandBackgroundproperties.3. MakethedesiredselectionsandclickOK.
Tocenterapageinthewindow1. OntheStatusbar,clickthemarker.Allthecontentsofthepagewillbehighlighted2. RightclickandselectInlineStylesandBoxproperties3. IntheWidthboxselectthewidthdesiredforthepage4. IntheMarginsareainbothLeftandRightboxestypeauto5. ClickOK
-
8/2/2019 Kompozer Guide
13/17
TemplatesTemplatesarebasicallypageshavingsomecontent(egaletterhead)whichcanbereusedtocreate
otherpageswhichwillhavethesameunderlyingpagestructureand,often,thesamegraphicallayout.
l
Templatesarenotalteredinuseandcanbeusedoverandoveragain,i.e.apagewhichhasabanner
andperhapsamenutoappearoneverypage. Anotherexamplecouldbeacompletepagelayoutforuseonall,ormany,pagesofasitebutwhichincludesareasforcustomizingindividually.Templatesmay
beconsideredashavingtwopartsthefixedpartorboilerplatewhichremainsthesameforevery
pageandtheeditablepartwhichchanges.
KompoZerrecognizestwotypesofeditableparts. Blockandflow. Blockitemsarelikeanyotherhtm
blockandmayconsistofparagraphlikeitems. Blocksmaybemaderepeatable sothatseveralsimilar
itemsmaybeaddedifrequired.
Flowitemswillbecontainedwithinotherblockitemsinlinewiththetext,forinstancetochangeoneor
twowordsinaparagraph.
CreateanewtemplateTemplatesarepreparedandeditedusingKompoZerjustlikeanyotherpage. Tocreateatemplate
1. ClickFile>NewthenselectAblanktemplateandCreate.
2. Addanycontentwhichistoappearonallpagesbasedonthetemplate.
3. Formatthisinthenormalway.4. Addtheareaswhicharetobemade
editable.a. Filltheseinusingdummytextso
thatacompletepagelayoutis
achievedeventhoughsomeofit
maybemeaningless.Formatthis
asrequired.
Savingtemplates1. ClickFile>SaveorFile>SaveAs.
a. Theextensionmztwillbeselectedautomatically.CreateatemplatefromapageApreexistingdocumentmaybetransformedintoatemplate
1. ClickFormat>PageTitleAndProperties2. ChecktheboxThispageisatemplate.3. ClickOK.4. ClickFile>SaveasThefiletypeHTMLTemplatewillbecompleted.5. Nameandsavethefileasnormal.
-
8/2/2019 Kompozer Guide
14/17
SettinguptemplatedetailsThecontentofthepage boilerplateandexamplesofeditablecontent shouldalreadybesetupand
formatted.
Tomakeblockseditable1. Inturn,selecteachblockthatyou
wishtomakeeditable.
2. Onthestatusbarrightclickthecorrespondinghighlightedtag.
3. ClickTemplates>Makeeditable.4. IntheInsertaneditablearea
windowgivetheblocka
recognizablename.Nowcheckthe
optionsboxesifrequired.
a.Note:
The
option
Area
is
optionalallowsittobe
deletedeasilywhenthe
pageisinuse.Areais
repeatableallowscopiesto
bemaderapidly.Areais
moveableturnsthearea
intoamovablelayer.
5. ClickOK.Tomakeaflowselectioneditable
1. Inturnselect(highlight)eachsectionoftextthatyouwishtomakeeditable.2. ClickInsert>Templates>Inserteditablearea.3. IntheInsertaneditableareawindowgivetheblockarecognizablename.4. LeavecheckedtheoptionFlowoftext.5. Checktheoptionsboxesifrequiredasdescribedabove.
a. Note: TheoptionAreaismoveableisinappropriateforflowareas).6. ClickOK
Whenyouhavefinishedsavethetemplate.
UsingtemplatesTobaseapageonatemplatefirstensurethatthetemplateitselfhasbeensavedandclosedapage
cannotbebasedonanopentemplate.
Tocreateapage1. ClickFile>New>Anewdocumentbasedonatemplate>ChooseFile.2. SelecttheTemplate(Notetemplateshavethefileextensionmzt)3. ClickCreate.
a. Thepagethatappearscarries
-
8/2/2019 Kompozer Guide
15/17
i. Boilerplateitemsii. Labelsfortheeditableareaswithincoloredrectangles(withroundedupper
corners)
iii. Sampletext(sameasthelabels)withinsurroundingeditableboxes(withdashedborders).
Tousethepage1. Clickinturnineacheditableareas.2. Selectanddeletethesampletextand
replaceitwithnewtext.
a. Iftheeditableareawasrepeatableasmallsquare
appearswithinthelabel,
hoveringturnsitredandclicking
makesacopy.Copieshavesmall
circleswhichactasdeletebuttons.
b. Ifanyareawasoptionalasmallcirclewithanxappearswithin
thelabel.Hoveringturnsitred
andclickingdeletesit.
3. WhenalleditableboxeshavebeencompleteddetachthepagefromthetemplatebyclickingEdit>Detachfromtemplate.Thepagenowassumesitsfinalappearance.
4. Savethepageinthenormalway.Thelastfigureshowsthefinalresult.Theareaswhichcouldnotbeeditedearlierhavebeencompleted.
Nowitispossibletoeditanyitemand,asaworkaround,thefrozenrepeatableitemsmaybeadded.
EditingtemplatesTemplateswhichhavealreadybeensavedmaybealteredafteropeningusingmenucommandsFile>
OpenFileandselectingFilesofTypethenHTMLTemplates.
Note: ThedefaultopeningsettingisHTMLFileswhichwillnotopentemplates.
SiteManagerThesitemanagerallowsyoutonavigateyoursiteorbetweensiteseasily.
TotoggletheSiteManageronoroffeitherpressF9oruseView>Show/Hide>SiteManager.
SiteManagerprovidesadirectorytreeviewofasitesimilartotheviewwithWindowsExplorer.It
howeverlistsonlydirectorieswhichyouhavespecificallysetupasSites.Youcansetupmanysites,
theyappearinSiteManagerirrespectiveofwheretheyappearinanormaldirectorytree.
-
8/2/2019 Kompozer Guide
16/17
Settingupsites
it.
onlyhtmlfiles(whichincludeshtmfiles)oronlyimagefiles(theseincludegif,jpg,jpegandpngfiles).
Itis
notpossibletochangetheorderofthelisting.
Doubleclickonanyhtmlfiletoloaditdirectlytothepageareaforediting.
teManagerwindow,andselectingafile,itispossibletorenameanddeletefilesandtocreatefolders.
amewayaslocalsites.
Thispermitsthesamebrowsing,displayandeditingfunctionsasforalocalsite.
Tosetupanewsite(assumingthatpagesforthesite
havealreadybeencreated)openSiteManager,click
EditSites.ThisopensthePublishSettingswindow.
Chooseaconvenientnameforthesite(YoumayliketocallitsomethinglikeMySiteLocaltodifferentiateit
fromalaterMySiteRemote)andenteritinthebox
SiteName.
InthePublishingserverareaclickSelectdirectory
andbrowsetothefolderwherethesiteislocated,
selectthefolderandOK.Theboxshouldread
somethinglikefile:///C:/Documents....(Ignorethe
hintlinewhichappliestoremotesitesonly.)
BackinSiteManagerinthecolumnheadedNamethe
newsiteshouldbelistedandcanbeexpandedtoshow
itscontents.
SiteManagerFunctionsThemainwindowlistsallsiteswhichhavebeensetup
and,foranysiteswhichhavebeenexpanded,thefilescontainedinit. Doubleclickanysitetoexpand
AtthetopoftheSiteManagerwindowadropdownboxallowsyoutoviewallfilesortoselecttoview
Forfilesitispossibletodisplaythefilesizeand
modifieddate.Toselectordeselecttheseoptions,in
thecolumnheadingclicktherightmostdivisionand
selecttheoptionsrequired.(Youmayhavetowiden
thesitemanagerwindowtomakethispossible.)
ByusingthebuttonsatthetopoftheSi
RemotesitesRemotesitesontheserverhostingasitemaybesetupinalmostexactlythes
-
8/2/2019 Kompozer Guide
17/17
Publishing Setting nginstructions(sameasonpage1)
on:
ess: http://www.svsu.edu
upyoursite: Oncampuspublishi1. WhenKompoZeropens,gotoEdit PublishSettings2. Insertthefollowinginformati3. SiteName: SVSU4. HTTPaddr
address:netstorage.svsu.edu/public_html
ame: SVSUusername
8. ClickOK
wanttoupload.AneasywaytodothisisfromtheSiteManager.
Filenameshouldalready
4.
viewthedataandmakeachangeifyouwish.
anduploadingwillcommence.(Ifyouareona
.)
publication. Whetherthe
e.g.Wrongcase
9. Onceyouhavepublishedapage,ifyouneedtopublishitagain,yoursettings(e.g.subdirectories)shouldberememberedbyKompoZer.Youwillnotseesteps2to4againunless
changeshavebeenmadetothepage.
5. Publishing6. Usern7. Password:SVSUpassword
UploadingOpenthepagethatyou
1. ClickthePublishbutton.2. OnthePublishPagewindowonthePublishtab,thePagetitleand
becompleted.
3. Ifthepageistobeuploadedtoasubdirectory,ratherthantherootdirectory,enterthenameofasubdirectoryandanyoftheotherdataifrequired.
a. Note:Thisdirectorymustexist.KompoZercannotcreateit.ChecktheboxIncludeimagesandotherfiles. Thefileswillbeplacedinthesamedirectoryas
thepage.IfyouwantthemtogoinasubdirectorychecktheboxUsethissitesubdirectory
andnamethedirectory.Inthiscasethedirectorywillbecreatedifneeded.
a. Note: thisisasubdirectoryoftherootdirectorynotanydirectorydetailedinthepreviouspoint.Ifyouwanttousesuchadirectorythismustbeexplicitlydetailede.g.
pagesubdirectory/filessubdirectory/
b. Note: alltheimagesandstylesheetswillbeplacedinthesamedirectory.ThisistheonlyarrangementsupportedbytheSiteManagerPublisher.
5. YoushouldnotneedtorefertotheSettingstabasthedatashouldbecollectedviatheSitenameyouhaveselectedbutyoumay
6. ClickPublish.APublishingwindowwillappeardialupconnectionthiswillbeconnected
7. Withinashorttimeyoushouldreceiveconfirmationofcorrecttransferwassuccessfulorhasfailed.
8. Somepossiblereasonsforfailureincludea. Somerequiredfilesaremissingb. Fileordirectorynamesincorrect