UsingKompoZeratSVSU

Created*bytheSVSUITDLabx7471updated9/24/08
*AdaptedfromtheKompZerandNvuUserGuidebyCharlesCooke

TableofContents
Oncampuspublishinginstructions...............................................................................................................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

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

Oncampuspublishinginstructions
1.
2.
3.
4.
5.
6.
7.
8.

WhenKompoZeropens,gotoEditPublishSettings
Insertthefollowinginformation:
SiteName: SVSU
HTTPaddress: http://www.svsu.edu
Publishingaddress:netstorage.svsu.edu/public_html
Username: SVSUusername
Password:SVSUpassword
ClickOK

Offcampuspublishinginstructions
TODOWNLOADCOREFTPGOTO
http://www.svsu.edu/its/servicessupport/technologyresources/pages/coreftpinstallationinstructions
.html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Changethepreconfiguredsettingstothis::
SiteName:M:/drive
Host/IP/URL:netstorage.svsu.edu
ClickAdvanced
ClickDirectory/Folder
RemoteStartFolder: public_html
ClickOkay
Username: yourSVSUusername
Password: yourSVSUpassword
Checkthisitem:SSH/SFTP
ClickConnect

Tocreateanewpage
OntheCompositiontoolbarClicktheNewbutton.

ToopenanexistingHTMLpage
OnthemenuBarclickFilethenOpenFile.BrowsetothefileandclickOpen.

SavingaPage
OntheCompositiontoolbarclickSave.

Ifyouaretryingtosaveanewdocument,adialogwindowwillaskyoutoenteraTITLEforthepage.
TheTITLEthatyouenterhereisNOTthefilename. Typeatitle,thenClickOK.

Nextasavewindowwillopenwhichallowsselectionofthefolderthepageshouldbesavedwithin.
Typeanameforthefile.ThefileextensionwillbeHTML.

Findingyourwayaround
WhenKompoZerstarts,amenubarwillbedisplayedacrossthetop(File,Edit,Viewetc).Belowthisare
threeToolbars.ToensurethateverythingisvisibleontheMenubarselectView>Show/Hideandplace
achecknexttoeachofthefollowingtoolbars:CompositionToolbar,FormatToolbar1,FormatToolbar
2,EditModeToolbar,Statusbar,Rulers,SiteManager.
Acrossthecentreofthewindowaretwopanes:theSiteManagerontheleftandablankwebpageon
theright.
AtthetopofthePageareathereisaPagetabwhichdisplaysthenameofthepage(Untitled). If
thereareseveralpagesopen,clickontheappropriatetabtodisplaythecorrectpage.
AtthebottomofthepageareaistheEditModeToolbarwhichallowsoneoffourViewingmodesfora
page(Normal,'HTMLTags','Source','Preview'.)

NumberedandBulletedlists
Tostartalistfromscratch
1.
2.
3.
4.

Clickoneofthelistbuttons(NumberedListorBulletedlist)ontheFormattoolbar.
Typethefirstitem.
PressEnterandtypethenextitem.
Tofinish,onthelast(blank)itempressEnter

Tochangeexistingtextintoalist
1. Selectthetextrequired.
2. Clickoneofthelistbuttons(NumberedListorBulletedlist)ontheFormattoolbar.
3. Thetextwillbechangedintoalistanewitemstartingforeachparagraphorotherblockitem
encountered.

Toadditemstoalist
1. Clickattheendofthelastiteminthelist.
2. PressEnterandtypethenewitem.
3. Numberingandformatwillcontinuefromthepreviousitem.

Nestinglists
1. Tostartanewleveloflistwithinanexistinglist,clickattheendofthelineprecedingthenew
listtobegenerated.
2. PressEnterthenhitthetabkeyonthekeyboard.
3. TypethecontentofeachlistitemfollowedbyEnter.

Checkingspelling
ClickontheSpellbutton.Thespellcheckerwillworksequentiallythroughthepage.
Byfirsthighlightingasectionofapageonlythatsectionwillbechecked.
Itisalsopossibletorunthespellcheckerallthetime. Anymisspelledwordsunderlinedinred. Toset
thisoption,ontheMenuBar,selectTools>Options.Inthefollowingwindow,selectthe'Advanced
buttonandsetUnderlinemisspelledwordsOK.
Note: Spellcheckingusesenormousprocessorresources. Openonlyonedocumentatatimewhen
spellchecking. Whenworkingonlongdocuments,ifyoursystemgrindstoahalt,disablethiswhennot
required.

Workingwithimages
WithKompoZeritiseasytoinsertimagesontoyourpage.Browsersacceptimagesinthreeformatsgif,
jpgorpng.Youmayhavetouseagraphicspackagetogetyourimageintoasuitableformat. Itis
necessarytolocateanyimagesinthesamefolderasyourwebpagedocumentorinasubfolderofthis.

Insertingimages
Warning: Beforeinsertinganimage,saveyourpage. OtherwiseKompoZerwillhavedifficultyin
referencingwhereyourimageislocated.

Toinsertanimage
1.
2.
3.
4.

Clickthe'Image'buttonontheCompositiontoolbar.
TheImagepropertieswindowopens. Click'ChooseFile'andbrowseandselectafile.
ClickOpen.
IntheboxlabeledAlternatetextaddadescriptionoftheimage. Thisprovidestextwhichwill
appearinplaceoftheimagewithbrowsersthatcannotdisplayimages. Itwillalsobeusedby
thosewithvisualimpairmentsusingscreenreadersandvoicesynthesizers. Thecontentofthis
boxmustbecarefullyconsidered.
o Wheretheimageispurelydecorative,andnotnecessarytounderstandingthepage,
alternativetextisnotrequiredandshouldbeomitted.
5. ClickOK

Positioningandresizingimages
Theimagewillbeinsertedatthepointwherethecursorwaslocated. Clicktheimage. Asizingbox
appearsaroundtheimage. Theboxhas8graphicalhandles(smallwhitesquares)oneateachcorner
oftheimageandoneinthemiddleofeachside).
Dragonahandleatacornertoalterthesizeoftheimage. Draggingahandleinthecentreofaside
willaltertheshapeoftheimage.

Note: Ideallyimagesshouldbeproducedatthesizerequiredratherthanresizingthem.Importing
largeimagesandreducingthesizewastesbandwidthandslowspresentation. Resizingbysmall
amountscanintroduceundesirableartifacts.
Imagesinthemiddleofparagraphsarenotusuallywhatisneeded.Youcanplacethemateitherthe
rightorleftsideandhavethetextwrapround.
Toalignanimage
1. Clickontheimage.
2. ClicktheImagebuttonontheCompositiontoolbar:thiswillopentheImagepropertiesbox.
3. SelecttheAppearancetab
4. InthedropdownboxAligntexttoimageselecttherequiredalignment.
5. ClickOK
Trythevariousoptions.Thetext,startingfromwheretheimageisinserted,willwraparoundtheimage.
Youmaypreferthecompleteparagraphtowrap.Clickontheimageanddragthecursortothestartof
theparagraph.
Basically,thereisonlytheoptiontoleftjustifythepictureorrightjustifythepictureinrelationtotext.
Youmaydecidethattheimageistooclosetothetext,thatyouwouldlikemorespacearoundit.Again
ImagePropertiesallowsthis.OntheAppearancetabsetSpacingTopandBottomand/orLeftand
Rightasrequired.Youcanalsoputaborderofselectedwidtharoundanimage.Theborderwillbethe
samecolorastheadjacenttext.

Usingtables
Tablesallowdataimages,links,forms,formfields,othertables,text,etc.tobearrangedintorows
andcolumnsofcells.
Atableisbasicallyarectangulargridforminganarrayofboxesintowhichthedataareplaced.Therules,
betweencells,andtheborder,aroundtheoutsideofthetable,maybeeithervisibleorinvisible.The
boxesarecalledcellsandmaybecolored.

Insertingtables
1.
OntheCompositionToolbarclicktheTablebutton.TheInserttablewindowappears.
2. LeavetheQuicklytabselectedanddragoutamatrixthenclickthebottomrightcelltodefine
thetablearrangement.
3. Thecellsappearonthescreenwithnarrowoutlines
Note: IflaterthetableborderissettozerotheseoutlinesdisappearbutKompoZerinnormalview
replacesthemwitharedoutline.ThisdoesnotappearinPrevieworinabrowser.
Tableshaveresizingboxessimilartothoseusedwithimages

Formoreoptions
RightclickthetableandselectTableCellproperties.TheTablepropertieswindowopens.Thishastwo
tabsTableandCellswhichallowoverallcontrolofseveralaspectsofeitherthetableorindividual
cells.Thisincludes:
a.
b.
c.
d.
e.
f.
g.

Alignmentoftextwithincells
Wrappingoftext
Cellspacingthegapbetweencells
Cellpaddingthegapbetweentheedgeofthecellandthetextwithinit
Sizeoftableandcells
Backgroundcolor
Selectionofcellsas'Normal'orHeader(Cellswhichareheadingstorowsorcolumns
shouldbeselectedasHeader.Normallythisresultsinthembeingrenderedinbold
type.)

Formattingtables
Tablesize
TablescreatedusingtheQuicklytabhavewidthsetto100%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,rowsandcolumns
RightClickinatableorcellandseveralmenuoptionsappearwhichallowthetableorcelltobe
formattedasdesired.Someoftheoptionsarecontextsensitive.

Tableorcellbackgroundcolorallowsthecolorofthecompletetableoranycelltobeset.
TableInsertprovidesmeansofaddingrows,columns,individualcellsoreventablesintoacell.
Tabledeletedeletesthetable

Acellcanbejoinedwiththecellonitsright,thusmergingtwocells.Virgincellscannotbesplitbut
joinedcellscan.
Ifadjacentcells(whetherwithinaroworcolumn)areselectedtogethertheycanbejoined.

Eachcell,whenclicked,revealsasetofsixmanipulationsymbols(trianglesandcircleswithxinside),
theseprovidearapidmethodofinsertingordeletingrowsandcolumnsofcellsasshowninthefigure.
Settingthecellbackgroundcolorforadjacentcellstoadarkcolorrevealsgapsbetweenthecells.
Thismaybeconvenientifthecellsaretobefilledwithtextasitavoidstwoitemsoftextabuttingeach
other.
Atothertimesitisaproblem.ThegapiscontrolledbytheCellspacingattribute.
Cellsizes
Asyouworkonatablethesizesofthecellsmaykeepchanging.Itisusefultounderstandhowbrowsers
treattables.Unlessthesizeofatableorcellisconstrainedinsomewayabrowserwillexpandthecellin
anattempttoaccommodateanytextinserted.Othercellsinthesamecolumnwillhavethesamewidth.
Thiswilltendtoreducethespaceavailableforanyadjacentcolumnofcells.Eventuallythebrowserwill
attempttobalancetheallocationtoeachcolumnbywrappingthetext.Theoveralleffectwillprobably
minimizethetotalheightofthetable.
Tablescanhavetheirwidthcompletelyunspecified,specifiedtobeaparticularwidthinpixelsorsome
percentageofwindowwidth.
WhenatableisstartedtheInsertTableautomaticallyselectstheQuicklytab.ThisallowsKompoZerto
makethedecisions.IfthePreciselytabisselectedtheusercanmakeselectionsspecifyingthewidthin
pixelsorasapercentageandspecifyingtheborderwidth.Tablesspecifiedaspercentageorunspecified
aremoreaccommodatingtodifferingwindoworscreensizesandarerecommended.
Browsersdonothavetoslavishlyfollowinstructions.Ifatablespecificationistoonarrowto
accommodatethecellcontentsthetablewillgrowbeyonditsspecifiedlimit.Thiscanoccurifalarge
imageisinsertedorlongwordslikeAntidisestablishmentarianism.
Tableproperties
Thetablepropertieswindowopenswhenyou

Clickatableandclickthetablebutton
RightclickanywhereinatableandselectTablecellproperties.

Tablesandcellscanbereformattedinmanyways.Thismeansthatyoudonthavetoplaneverythingin
advancebeforeyoustartyourtableassettingscanbeadjustedlater.
Thetablepropertieswindowprovidesanoptiontoinsertacaptionwhichcanbepositionedonany
edge.

Aligningtext
Browsersnormallydisplaytextalignedleftand,intheverticaldimension,inthemiddleofthecell.To
alterthis,placethecursorinacellandclicktheTablebutton.TheTablepropertieswindowallowsthe
alignmenttobealtered.TosetthealignmentforallcellsfirstselectTable>Select>AllCells

Links
Linksprovidethemainmeansofnavigatingwebsites.Theyallowyoutomovequicklyfromoneplaceto
eitheranotheronthesamepage,adifferentpageonthesamesiteorapageonanexternalsite.Links
maybeattachedtoanyelementonapage. Usuallyhoweverweuseafewwordsoftextoranimage
whichweclickontoactivatethelink.

Linkingtext
Linkingtoanotherfile
1. Selectafewwordsoftext
2.

OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselect
CreateLink.TheLinkPropertieswindowopens
3. ClickonChooseFileandbrowsetothefilethatyouwanttolinkto
4. ClickOPEN
5. ClickOK
Thetextisnowunderlinedandinadifferentcolor(probablyblue)indicatingthatthetextislinked.
Insertinganemailaddress
Insteadoflinkingtoafileitispossibletoinsertanemailaddress.Theresultwillbewhenthelinkis
clickedtheemailclientonthevisitorsmachinewillbeopenedwiththecorrectaddressselected.
1. Selectafewwordsoftext
2.

OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselect
CreateLink.TheLinkPropertieswindowopens
3. EntertheemailaddressandchecktheboxTheaboveisanemailaddress
4. ClickOK
InsertingnamedAnchors
ThereisasecondtypeofAnchorelementtheNamedanchor.Suchananchorisextremelyusefulasit
canactasatypeofbookmarkdefiningaparticularplaceonapage. Linkscanjumptosuchbookmarks.
1. Placethecursoratthepointyouwanttomark.
2. ClicktheAnchorbuttonontheCompositiontoolbaror,ontheMenuBar,selectInsert>
NamedAnchor.Thenamedanchorpropertieswindowappears.
3. Enterauniquenamefortheanchor.
4. ClickOK.
InNormalviewanchorsaremarkedbyapictureofananchor.
Linkingtonamedanchors
1. Selectafewwordsoftext

2.

OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselect
CreateLink.TheLinkPropertieswindowopens
3. Usethedropdownlisttoselecttheanchornamethatyoucreatedintheprevioussection.
4. Youranchornameshouldappearthereprecededbya#.ClickOK.
Note: Ifyourpageisshortyoumaynotnoticethelinkwhiletesting.Youneedtotestwithalongpage
withthelinktowardsthebottomandtheanchortowardsthetop.
Linkingimages
1. Clickontheimage
2. OntheCompositiontoolbarclickontheLinkbutton,alternativelyRightclickandselectCreate
Link.The'ImagePropertieswindowopens
3. ClickonChooseFileandbrowsetothefilethatyouwanttolinkto.
4. ClickOPEN
5. ClickOK
EditingLinks
Tochangethefiletowhichalinkrefers,doubleclickonthelink.TheLinkpropertieswindowopens(for
animagetheImagePropertieswindowopensclicktheLinktab).Editthelink.
Toremovethelink,deletethelinkreferenceinthebox.

Layers
Itemsforminglayersaretakenoutofthenormaldocumentflowandplacedinpositionsdefinedonthe
pageabsolutelye.g.inpositionsfixedrelativetothepageboundary.
Whilelayersintroducealevelofflexibilitytopagedesigntheyalsoinvolvecomplexitiesthatnewcomers
maywishtoavoid.Thissectionisthereforeforthosewhowishtodelvefurther.

Creatinglayers
1. Clickintheblockthatyouwanttoformatasalayer.
2. ClickthelayerbuttonontheFormat(2)toolbar.
a. TheblockbecomesaLayer.Layershavesizing
boxeswhichallowthesizetobealtered.Atthe
topofthelayerisapositioninghandle(denoted
byafourwayarrow).
b. Tomovethelayerclickanddragthehandle.
Layersdonothavetoconsistofasingleblockanysequenceofelementsthatcanbeselectedtogether
canbeconvertedintoalayer.Thismaybeseveralparagraphswithorwithoutheadings,imagesand
tables.

Layersallowitemstobeplacedonapagesothattheabsoluteposition,relativetothepage,isdefined.
Thisprovidesafacilitycommonindrawinganddesktoppublishingprogramsandallowsitemstobe
overlaidontopofeachother.Assuchitisaverypowerfultool.
Textitemsnormallyhaveatransparentbackgroundsowhenoverlaidbecomeconfused.Byformatting
themwithabackgroundcolortheybecomesolid.Similarlytableswithsolidbackgroundand
nontransparentimagesmaybeoverlaidoneachothertoproducecleareffects.

Manipulatinglayers
Tomovealayer,clickthepositioninghandleanddragittotherequiredpositiononthepage.
Toresizealayer,dragasizinghandleasforotherelements.
Whenpositioningalayer,KompoZerallowspixelaccuracymovement.Thiscanbedifficulttoachieve
and,ifitisattemptedtolineupitems,smallerrorsmaybecomeobvious.Betterresultsmaybeachieved
bysnappingpositionstoacoarsergrid.TodososelectFormat>Positioninggridandsetthegranularity
required.Movementwillnowbeconstrainedtotheselectionmade.
Note: Thissettingmustbeseteachtimeapageisopened.Itisnotremembered.
Note: Snappingappliestodraggingthepositionnotthesize.
Warning: Ifseveraloverlappinglayersoccuronapageitmaybecomeimpossibletoclickonahandle.
Inthiseventtryresizingitsothatthehandlesbecomeaccessible,alternativelytemporallymoveanother
layeroutoftheway.

Whenpositioninglayerssothattheyoverlapamechanismisneededtodefinewhichisin
front(soentirelyvisible)whichbehind(sopartiallyobscured).Twobuttons(BringtofrontandSendto
back)ontheFormat2toolbartakecareofthis.Selectthelayerandclicktheappropriatebutton.

Gluing

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.

TheBody
Thisisthebackgroundonwhichthewholepagesits.TheBodymaybethoughtofasthePageitself.
Normallyitisoflittleconcerntothedesignerbutthereareafewsituationswhenitis.
ThebodycancarryabackgroundcolororimagewhichliesbehindeverythingelseonthepageinHTML
documents.
Tosetabackground
1. OntheStatusbar,clickthe<body>marker.Allthecontentsofthepagewillbehighlighted.
2. RightclickandselectInlineStylesandBackgroundproperties.
3. MakethedesiredselectionsandclickOK.
Tocenterapageinthewindow
1. OntheStatusbar,clickthe<body>marker.Allthecontentsofthepagewillbehighlighted
2. RightclickandselectInlineStylesandBoxproperties
3. IntheWidthboxselectthewidthdesiredforthepage
4. IntheMarginsareainbothLeftandRightboxestypeauto
5. ClickOK

Templates
Templatesarebasicallypageshavingsomecontent(egaletterhead)whichcanbereusedtocreate
otherpageswhichwillhavethesameunderlyingpagestructureand,often,thesamegraphicallayout.
Templatesarenotalteredinuseandcanbeusedoverandoveragain,i.e.apagewhichhasabanner
andperhapsamenutoappearoneverypage. Anotherexamplecouldbeacompletepagelayoutfor
useonall,ormany,pagesofasitebutwhichincludesareasforcustomizingindividually.Templatesmay
beconsideredashavingtwopartsthefixedpartorboilerplatewhichremainsthesameforevery
pageandtheeditablepartwhichchanges.
KompoZerrecognizestwotypesofeditableparts. Blockandflow. Blockitemsarelikeanyotherhtml
blockandmayconsistofparagraphlikeitems. Blocksmaybemaderepeatablesothatseveralsimilar
itemsmaybeaddedifrequired.
Flowitemswillbecontainedwithinotherblockitemsinlinewiththetext,forinstancetochangeoneor
twowordsinaparagraph.

Createanewtemplate
TemplatesarepreparedandeditedusingKompoZerjustlikeanyotherpage. Tocreateatemplate
1. ClickFile>NewthenselectAblank
templateandCreate.
2. Addanycontentwhichistoappearonall
pagesbasedonthetemplate.
3. Formatthisinthenormalway.
4. Addtheareaswhicharetobemade
editable.
a. Filltheseinusingdummytextso
thatacompletepagelayoutis
achievedeventhoughsomeofit
maybemeaningless.Formatthis
asrequired.

Savingtemplates
1. ClickFile>SaveorFile>SaveAs.
a. Theextensionmztwillbeselectedautomatically.

Createatemplatefromapage
Apreexistingdocumentmaybetransformedintoatemplate
1.
2.
3.
4.
5.

ClickFormat>PageTitleAndProperties
ChecktheboxThispageisatemplate.
ClickOK.
ClickFile>SaveasThefiletypeHTMLTemplatewillbecompleted.
Nameandsavethefileasnormal.

Settinguptemplatedetails
Thecontentofthepageboilerplateandexamplesofeditablecontentshouldalreadybesetupand
formatted.
Tomakeblockseditable
1. Inturn,selecteachblockthatyou
wishtomakeeditable.
2. Onthestatusbarrightclickthe
correspondinghighlightedtag.
3. ClickTemplates>Makeeditable.
4. IntheInsertaneditablearea
windowgivetheblocka
recognizablename.Nowcheckthe
optionsboxesifrequired.
a. Note: TheoptionAreais
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.

Usingtemplates
Tobaseapageonatemplatefirstensurethatthetemplateitselfhasbeensavedandclosedapage
cannotbebasedonanopentemplate.
Tocreateapage
1. ClickFile>New>Anewdocumentbasedonatemplate>ChooseFile.
2. SelecttheTemplate(Notetemplateshavethefileextensionmzt)
3. ClickCreate.
a. Thepagethatappearscarries

i. Boilerplateitems
ii. Labelsfortheeditableareaswithincoloredrectangles(withroundedupper
corners)
iii. Sampletext(sameasthelabels)withinsurroundingeditableboxes(withdashed
borders).
Tousethepage
1. Clickinturnineacheditableareas.
2. Selectanddeletethesampletextand
replaceitwithnewtext.
a. Iftheeditableareawas
repeatableasmallsquare
appearswithinthelabel,
hoveringturnsitredandclicking
makesacopy.Copieshavesmall
circleswhichactasdelete
buttons.
b. Ifanyareawasoptionalasmall
circlewithanxappearswithin
thelabel.Hoveringturnsitred
andclickingdeletesit.
3. Whenalleditableboxeshavebeencompleteddetachthepagefromthetemplatebyclicking
Edit>Detachfromtemplate.Thepagenowassumesitsfinalappearance.
4. Savethepageinthenormalway.Thelastfigureshowsthefinalresult.Theareaswhichcould
notbeeditedearlierhavebeencompleted.
Nowitispossibletoeditanyitemand,asaworkaround,thefrozenrepeatableitemsmaybeadded.

Editingtemplates
TemplateswhichhavealreadybeensavedmaybealteredafteropeningusingmenucommandsFile>
OpenFileandselectingFilesofTypethenHTMLTemplates.
Note: ThedefaultopeningsettingisHTMLFileswhichwillnotopentemplates.

SiteManager
Thesitemanagerallowsyoutonavigateyoursiteorbetweensiteseasily.
TotoggletheSiteManageronoroffeitherpressF9oruseView>Show/Hide>SiteManager.
SiteManagerprovidesadirectorytreeviewofasitesimilartotheviewwithWindowsExplorer.It
howeverlistsonlydirectorieswhichyouhavespecificallysetupasSites.Youcansetupmanysites,
theyappearinSiteManagerirrespectiveofwheretheyappearinanormaldirectorytree.

Settingupsites
Tosetupanewsite(assumingthatpagesforthesite
havealreadybeencreated)openSiteManager,click
EditSites.ThisopensthePublishSettingswindow.
Chooseaconvenientnameforthesite(Youmayliketo
callitsomethinglikeMySiteLocaltodifferentiateit
fromalaterMySiteRemote)andenteritinthebox
SiteName.
InthePublishingserverareaclickSelectdirectory
andbrowsetothefolderwherethesiteislocated,
selectthefolderandOK.Theboxshouldread
somethinglikefile:///C:/Documents....(Ignorethe
hintlinewhichappliestoremotesitesonly.)
BackinSiteManagerinthecolumnheadedNamethe
newsiteshouldbelistedandcanbeexpandedtoshow
itscontents.
SiteManagerFunctions
Themainwindowlistsallsiteswhichhavebeensetup
and,foranysiteswhichhavebeenexpanded,thefilescontainedinit. Doubleclickanysitetoexpand
it.
AtthetopoftheSiteManagerwindowadropdownboxallowsyoutoviewallfilesortoselecttoview
onlyhtmlfiles(whichincludeshtmfiles)oronlyimagefiles(theseincludegif,jpg,jpegandpngfiles).
Forfilesitispossibletodisplaythefilesizeand
modifieddate.Toselectordeselecttheseoptions,in
thecolumnheadingclicktherightmostdivisionand
selecttheoptionsrequired.(Youmayhavetowiden
thesitemanagerwindowtomakethispossible.)Itis
notpossibletochangetheorderofthelisting.
Doubleclickonanyhtmlfiletoloaditdirectlytothepageareaforediting.
ByusingthebuttonsatthetopoftheSiteManagerwindow,andselectingafile,itispossibletorename
anddeletefilesandtocreatefolders.
Remotesites
Remotesitesontheserverhostingasitemaybesetupinalmostexactlythesamewayaslocalsites.
Thispermitsthesamebrowsing,displayandeditingfunctionsasforalocalsite.

Publishing
Settingupyoursite: Oncampuspublishinginstructions(sameasonpage1)
1. WhenKompoZeropens,gotoEditPublishSettings
2. Insertthefollowinginformation:
3. SiteName: SVSU
4. HTTPaddress: http://www.svsu.edu
5. Publishingaddress:netstorage.svsu.edu/public_html
6. Username: SVSUusername
7. Password:SVSUpassword
8. ClickOK
Uploading
Openthepagethatyouwanttoupload.AneasywaytodothisisfromtheSiteManager.
1. ClickthePublishbutton.
2. OnthePublishPagewindowonthePublishtab,thePagetitleandFilenameshouldalready
becompleted.
3. Ifthepageistobeuploadedtoasubdirectory,ratherthantherootdirectory,enterthename
ofasubdirectoryandanyoftheotherdataifrequired.
a. Note:Thisdirectorymustexist.KompoZercannotcreateit.
4. ChecktheboxIncludeimagesandotherfiles. Thefileswillbeplacedinthesamedirectoryas
thepage.IfyouwantthemtogoinasubdirectorychecktheboxUsethissitesubdirectory
andnamethedirectory.Inthiscasethedirectorywillbecreatedifneeded.
a. Note: thisisasubdirectoryoftherootdirectorynotanydirectorydetailedinthe
previouspoint.Ifyouwanttousesuchadirectorythismustbeexplicitlydetailede.g.
pagesubdirectory/filessubdirectory/
b. Note: alltheimagesandstylesheetswillbeplacedinthesamedirectory.Thisisthe
onlyarrangementsupportedbytheSiteManagerPublisher.
5. YoushouldnotneedtorefertotheSettingstabasthedatashouldbecollectedviatheSite
nameyouhaveselectedbutyoumayviewthedataandmakeachangeifyouwish.
6. ClickPublish.APublishingwindowwillappearanduploadingwillcommence.(Ifyouareona
dialupconnectionthiswillbeconnected.)
7. Withinashorttimeyoushouldreceiveconfirmationofcorrectpublication. Whetherthe
transferwassuccessfulorhasfailed.
8. Somepossiblereasonsforfailureinclude
a. Somerequiredfilesaremissing
b. Fileordirectorynamesincorrecte.g.Wrongcase
9. Onceyouhavepublishedapage,ifyouneedtopublishitagain,yoursettings(e.g.
subdirectories)shouldberememberedbyKompoZer.Youwillnotseesteps2to4againunless
changeshavebeenmadetothepage.