Kompozer Guide

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


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


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/


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.


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


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


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/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


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


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.


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


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


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.


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


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.


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


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