KompoZerin editoriin

KompoZer
s. 1/15
1 Johdanto
KompoZer on ohjelma www-sivujen tekemiseen ja sivustoon kuuluvien tiedostojen hallintaan. Ohjelmassa on graafinen WYSIWYG-käyttöliittymä (what you se is what you get), jonka avulla on
helppo tehdä www-sivuja. Ohjelma tukee hyvin CSS-tyylisivuja, joiden avulla sivuston ulkoasumääritykset luodaan. KompoZerissa on sisäänrakennettu CSS-editori tyylimääritysten tekemiseksi.
KompoZerin kotisivu on osoitteessa kompozer.net, josta sivun yläreunan Download-linkin takaa
löytyy suomenkielisen version asennusohjelma.
2 Asetukset
Asennuksen jälkeen valitse KompoZerissa Työkalut-valikosta Asetukset ja sen jälkeen Lisäasetukset. Valitse XHTML 1 ja Transitional, jonka jälkeen kaikki uudet dokumentit luodaan käyttäen dokumenttityyppimäärittelyä XHTML 1.0 Transitional.
XHTML:ää käytettäessä KompoZerissa on syytä valita merkistöksi UTF-8. Valitse samassa valintaikkunassa Uusi sivu ja kirjoita Merksitö-kohtaan UTF-8. Hyväksy tehdyt asetukset OK-painikkeella.
Tehtyjä määrityksiä sovelletaan kaikkiin tämän jälkeen luotaviin sivuihin.
3 Sivustonhallinta
Sivusto koostuu tavallisesti useista HTML- ja kuvatiedostoista. HTML-tiedostot ovat sivuja, joihin
kirjoitetaan sisältöteksti ja lisätään kuvat. Sivustonhallinta näyttää kaikki sivustoon eli projektiin
kuuluvat tiedostot, jolloin niiden käsittely on helpompaa.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 2/15
Sivustonhallinta näkyy KompoZerin vasemmassa reunassa. Jos sitä ei näy, valitse Näytä, Palkit ja
paneelit, Sidebar tai paina F9-näppäintä.
Napsauta sivustonhallinnan Muokkaa sivustoja -kuvaketta
. Jos olet luomassa ensimmäistä
sivustoa, niin Selaa kansioita -valintaikkuna avautuu ensimmäisenä. Sulje se Peruuta-painikkeella,
jolloin seuraava valintaikkuna avautuu. Napsauta Uusi sivusto -painiketta ja määritä kansio, johon
perustat sivuston. Voit valita jonkin jo olemassa olevan kansion tai luoda uuden. Kirjoita tarvittaessa Sivuston nimi -kohtaan kuvaavampi nimi sivustolle. Hyväksy lopuksi asetukset OK-painiketta
napsauttamalla.
Uusi sivusto ja mahdolliset aikaisemmin luodut sivustot
näkyvät nyt sivustonhallinnassa. Aluksi sivustossa ei ole
tiedostoja, mutta työn edetessä KompoZerista tallennetut
HTML-tiedostot ja sivustoon lisätyt kuvatiedostot näkyvät
sivustonhallinnassa oheisen kuvan tapaan.
Jos tiedostoja lisätään projektikansioon Windowsin Resurssienhallinnan kautta, tiedostot eivät heti näy Site Managerissa. Saat tiedostot näkyville napsauttamalla Päivitäkuvaketta
.
Kaksoisnapsauttamalla HTML-tiedostoa se avautuu muokattavaksi KompoZerin editoriin.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 3/15
4 Sivujen luominen
Kirjoittaminen ja muotoilu
Editorissa on valmiina yksi tyhjä sivupohja (nimetön).
Editoriin voi kirjoittaa ja luoda sisällön samaan tapaan kuin tekstinkäsittelyohjelmissa. Valitse työkalurivin tyylivalikosta kullekin tekstikappaleelle oikea tyyli.
Käytä otsikoille tyylejä Otsikko 1-6 ja varsinaiselle tekstille Kappaletyyliä.
Älä muuta tekstin muita asetuksia, kuten fonttia, fonttikokoa ja väriä. Kaikki ulkoasuun liittyvät asetukset tehdään CSS-tyyleillä. Jos muotoilet tekstin ominaisuuksia työkalurivin tai Muotoile-valikon toiminnoilla, CSS-tyylit eivät vaikuta
muotoiltuihin kappaleisiin.
Sivun tallentaminen
Tallenna sivut napsauttamalla työkalurivin Tallenna-kuvaketta
tai näppäimistöltä Ctrl+S. Anna sivulle sen sisältöä kuvaava otsikko, joka tulee näkymään selaimen otsikkorivillä.
Seuraavaksi valitse tiedoston tallennuspaikaksi se kansio, jonka määritit luodessasi sivustoa sivustonhallinnaassa. Anna HTML-tiedostolle nimi, mutta vältä käyttämästä tiedostonimessä skandimerkkejä (åäö) ja välilyöntejä.
Saat tiedoston näkyville sivustonhallinnassa napsauttamalla Päivitä-kuvaketta
Hannu Matikainen
1.2.2011
.
KompoZer.doc
KompoZer
s. 4/15
Sivujen käsittely
Editorissa voi olla useampi sivu (HTML-tiedosto) samanaikaisesti käsiteltävänä. Avoinna olevat sivut näkyvät editorialueen yläreunassa välilehtinä (tab). Välilehdissä näkyvät sivujen otsikot – eivät
tiedostonimet. Avoinna olevan sivun voi sulkea oikean reunan punaisesta kuvakkeesta . Jos jokin
sivuista on tallentamatta, sivun otsikon vasemmalla puolella näkyy punainen kuvake .
5 Linkkien luominen
KompoZerilla voi tehdä linkkejä samalla sivulla oleviin ns. kirjanmerkkeihin, toisille sivuille samassa
sivustossa tai muille sivustoille.
5.1 Linkki toiselle sivulle
Linkit saman sivuston sivujen välillä
Jotta liikkuminen saman sivuston eri sivujen välillä olisi mahdollista, jokaisella sivulla on oltava linkit kaikille muille sivuille. On tietysti mahdollista, että joltakin sivulta voi avata lisätietosivun, jota
ei ole linkitetty muille sivuille.
Luo linkki seuraavasti.
1. Varmista, että olet tallentanut tiedoston. Jos tekeillä olevaa sivua ei ole tallennettu tiedostoksi, linkkiin tulee vääränlainen tiedostoviittaus.
2. Valitse (maalaa) se sana tai tekstin osa, johon haluat luoda linkin.
3. Napsauta työkalurivin Linkki-kuvaketta
, jolloin avautuu valintaikkunan linkin luomiseksi.
4. Napsauta tiedostonvalintakuvaketta
ja etsi se tiedosto, johon haluat linkin viittaavan.
Kohdetiedoston pitää sijaita saman sivuston jossakin kansiossa.
5. Nyt linkkirivillä pitäisi näkyä pelkästään kohdetiedoston nimi tai kansion ja tiedoston nimi.
6. Luo linkki valintaikkunan OK-painiketta napsauttamalla.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 5/15
Linkit muihin sivustoihin
Tiettyyn URL-osoitteeseen eli netissä oleviin sivuihin viittaavat linkit tehdään seuraavasti.
1. Valitse (maalaa) se sana tai tekstin osa, johon haluat luoda linkin.
2. Napsauta työkalurivin Linkki-kuvaketta
.
3. Kirjoita kohteen URL-osoite linkkiriville. Osoitteeseen on kirjoitettava mukaan myös alkuosan
protokolla (esim. http). Kaikkein helpointa on siirtyä selaimella halutulle nettisivulle ja kopioida kohdesivun osoite selaimesta KompoZerin linkkiriville. Tällä tavalla osoite tulee varmasti oikein.
4. Jos haluat, että linkki avautuu uuteen selainikkunaan, rastita valintaruutu Linkki avautuu ja
valitse alasvetoluettelosta uuteen ikkunaan. Tämä on suositeltavin tapa avata ulkopuolisille
sivustoille osoittavat linkit.
5. Luo linkki valintaikkunan OK-painiketta napsauttamalla.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 6/15
5.2 Linkki ankkuriin samalla sivulla
Kun samalla sivulla on pitkä, yhtäjaksoinen teksti, on järkevää käyttää ankkureita. Ankkuri on tekstiin merkitty näkymätön kohta, johon voidaan hypätä
avainsanaa napsauttamalla. Kun tekstiin
tehdään väliotsikoita, on kirjanmerkki
luonnollista luoda näiden väliotsikoiden
kohdalle. Seuraavaksi sivun alkuun luodaan luettelo tekstin luvuista. Luettelon
kohtia napsauttamalla käyttäjä voi nopeasti siirtyä suoraan haluamaansa lukuun tai tekstikappaleeseen. Tekstiin
voi tehdä myös paluulinkit, joilla siirrytään takaisin sivun alkuun.
Sisältö:
Aihe 1
Aihe 2
Aihe 3
Sisällysluettelo
Aihe 1
Fjoisjgosij osd siodj osijdosijodjg sodj
osjdg ojdogsj odg sdgosdog sjogdjos
Paluu
Aihe 2
Hsdgs sd sdgos kdgosdk sdgks sdgjs
sodgksjd sodkg sdokg sjdkg sdgs sdkg
sd sdgsod sg
Paluu
Väliotsikko
kirjanmerkkinä
Paluulinkki
Aihe 3
Jygs sdgjsod sdg sdgsdg sdgk sdlög
sdlgksö dglsdög sdglsö
Paluu
Kirjanmerkin luominen
1. Tallenna tekeillä oleva sivu, jos sitä ei ole vielä tallennettu tiedostoksi.
2. Merkitse (valitse) se teksti, josta tehdään kirjanmerkki (esimerkiksi väliotsikko edellisessä kuvassa).
3. Napsauta työkalurivin Ankkuri-kuvaketta
. KompoZer ehdottaa merkittyä tekstiä kirjan-
merkiksi. Voit muuttaa tekstiä, tai hyväksy sellaisenaan OK-painikkeella.
Linkin luominen kirjanmerkkiin
1. Valitse se teksti, josta tehdään linkki kirjanmerkkiin siirtymistä varten (teksti sisällysluettelossa
sivun alussa).
2. Napsauta työkalurivin Linkki-kuvaketta
.
3. Napsauta linkkirivin oikeassa reunassa olevaa alasvetonuolta ja sen jälkeen valitse kirjanmerkki. Luo linkki kirjanmerkkiin OK-painiketta napsauttamalla.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 7/15
6 Kuvien lisääminen
Sivuille voidaan lisätä GIF-, JPG- ja PNG-kuvia. Ennen sivuille liittämistä kuvien koko täytyy säätää
jossakin kuvankäsittelyohjelmassa. Tähän voidaan käyttää esimerkiksi ilmaista IrfanViewohjelmaa. Tallenna kaikki sivustossa käytettävät kuvat johonkin sivuston kansioon, esimerkiksi
kuvat-alikansioon.
Muista tallentaa sivu ennen kuvan lisäämistä. Näin varmistat, että sivu on tallennettu tiedostoksi. Muuten HTML-koodiin tulee vääränlainen viittaus kuvatiedostoon, ja kuva ei näy nettisivulla.
Helpoimmin kuva lisätään vetämällä hiirellä sivustonhallinnasta haluttuun kohtaan sivulle.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 8/15
Sivulle lisätyn kuvan ominaisuuksia pääsee tarkastelemaan ja muuttamaan kaksoisnapsauttamalla
kuvaa. Toinen vaihtoehto on napsauttaa kuvaa hiiren kakkospainikkeella ja valitsemalla Kuva:
ominaisuudet.
Sijainti-välilehdellä voit kirjoittaa Vaihtoehtoinen teksti -kohtaan selitetekstin, joka näkyy nettiselaimessa vietäessä hiiren kohdistin kuvan päälle. Oletuksena näytetään kuvatiedoston nimi. Jos
et halua näyttää mitään tekstiä, valitse kohta Älä käytä vaihtoehtoista tekstiä.
Mitat-välilehdellä voi määrittää, minkä kokoisena kuva näkyy sivulla. Tätä toimintoa ei kuitenkaan
pidä käyttää, vaan kuvan koko on säädettävä oikeaksi kuvankäsittelyohjelmassa.
Ulkoasu-välilehdellä säädetään kuvan sijaintia tekstin suhteen. Tavallisimmat valinnat ovat Vasemmalle (teksti rivittyy kuvan vasemmalle puolelle) ja Oikealle (teksti rivittyy kuvan oikealle puolelle). Välistys-kohdassa määritetään tarvittaessa tyhjät reunukset kuvan ympärille.
Linkki-välilehdellä kuvaan voidaan lisätä linkki, jolloin kuvaa napsauttamalla päästään siirtymään
kirjanmerkkiin samalla sivulla, toiselle sivulle samassa sivustossa tai johonkin muuhun sivustoon.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 9/15
7 Taulukot
Taulukoita käytetään tiedon esittämisen lisäksi yleisesti sivun eri elementtien asettelemiseen.
Taulukkoa asettelujen apuna käytettäessä sen reunaviiva määritetään näkymättömäksi.
Taulukko lisätään seuraavalla tavalla.
1. Siirrä kohdistin siihen kohtaan, johon haluat lisätä taulukon.
2. Napsauta Taulukko-kuvaketta.
3. Siirry Solu-välilehdelle ja valitse tekstin vaakasuuntaiseksi tasaukseksi Vasemmalle. Valitse
pystytasaukseksi Yläreuna.
Siirry Nopeasti-välilehdelle, maalaa haluamasi rivi- ja sarakemäärä ja napsauta ruutua hiirellä.
4. Vedä hiirellä taulukko sopivaan leveyteen joko taulukon reunasta tai sivun yläreunan taulukkokahvoista.
Taulukon ominaisuuksia pääset muokkaamaan napsauttamalla hiiren kakkospainikkeella taulukkoa ja valitsemalla taulukon solu: ominaisuudet. Valintaikkunan Solut-välilehdellä muokataan yksittäisten solujen ominaisuuksia ja Taulukko-välilehdellä koko taulukkoon liittyviä ominaisuuksia.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 10/15
Tärkeimpiä taulukon ominaisuuksia:





Reunus määrittää uloimman reunaviivan leveytäyte
välistys
den. Jos arvoksi asetetaan 0, ei taulukon reunaviivoja näytetä. Huomaa kuitenkin, että KompoZer
näyttää tästä huolimatta muokkaustilassa taulukossa ohuet punaiset reunaviivat. Viivat eivät tule
näkyville selaimessa katsottaessa.
Täyte määrittää tekstin ja solun reunan välimatkan.
Välistys määrittää uloimman reunaviivan ja solun
reunus
välisen etäisyyden sekä solujen keskinäisen välimatkan.
Korkeus ja Leveys: Taulukon ulkomitat voi määrittää joko pikseleinä tai prosentteina. Määritettäessä koko pikseleinä taulukko pysyy samankokoisena kaikilla näyttötarkkuuksilla. Ilmoitettaessa taulukon koko prosenttiarvona, määritetään taulukon suhteellinen koko selainikkunaan nähden. Kun selainikkunan koko muuttuu (esimerkiksi näyttötarkkuutta vaihdettaessa tai ikkunan kokoa muuten säädettäessä), muuttuu myös taulukon leveys.
Taulukon tasaus: Taulukon sijainti vaakasuunnassa.
Tärkeimpiä solun ominaisuuksia:


Pystytasaus ja Vaakatasaus: määrittävät tekstin tai kuvan sijoittumisen valitussa solussa
pysty- ja vaakasuunnassa.
Voit valita muokattavan solun Edellinen- ja Seuraava-painikkeilla.
Taulukon ja/tai solujen taustaväri määritetään napsauttamalla taulukon solua hiiren kakkospainikkeella ja valitsemalla Taulukon tai solun taustaväri. Valintaikkunan yläreunasta valitaan Taulukko
tai Solu riippuen siitä kumman väriä muutetaan. Taulukon väri määrittää solujen välisen välistysalueen värin, tai jos soluille ei ole asetettu eri väriä, myös solujen taustavärin. Solujen väri asetetaan valituille soluille, ja voi olla vaikka joka solussa erilainen.
8 Ulkoasu CSS-tyyleillä
Sivujen ulkoasuun liittyvät muun muassa seuraavat seikat





sivun taustaväri
otsikoiden fontti ja fonttikoko
leipätekstin fontti ja fonttikoko
linkkien värit
elementin tausta, reunat, marginaalit ja täytteet
Ulkoasun voi periaatteessa tehdä jokaiselle sivulle erikseen. Näin ei kuitenkaan kannata menetellä, sillä jos kyseessä on useamman sivun laajuinen sivusto, muutosten tekeminen jokaiselle sivulle
erikseen on työlästä. Ulkoasu kannattaakin siksi määrittää ulkoista CSS-tyylitiedostoa (Cascade
Style Sheet) käyttäen.
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 11/15
CSS-tyylitiedosto sisältää kaikki tarvittavat tyylimääritykset. Tiedoston voi luoda vaikkapa Notepadilla (mieluummin Notepad++, jossa syntaksi esitetään eri väreillä) ja linkittää jokaiselle HTMLsivulle. CSS-tiedoston voi luoda kätevästi myös KompoZerista käsin.
CSS-tyylitiedoston luominen Kompozerilla
1. Napsauta Kompozerin työkalurivin CSS-kuvaketta
.
2. Napsauta vasemman yläkulman palettikuvakkeen pientä nuolta ja valitse Ulkoinen linkki.
3. Kirjoita luotavan tyylitiedoston nimi URL-kohtaan. Anna nimeksi esimerkiksi tyylit.css. Napsauta Luo tyylisivu -painiketta ja valitse vasemman reunan luettelosta juuri luotu tyylit.css.
1.
3.
2.
4. Napsauta vasemman yläkulman palettikuvaketta
tyylisääntövalinnat.
, jolloin valintaikkunaan tulee näkyville
5. Luo kaikille tarvittaville HTML-elementeille tyylisäännöt.
Valitse ylin vaihtoehto tyyli, jota käytetään kaikkiin tätä
tyyppiä oleviin elementteihin, sitten valitse elementti
alasvetovalikosta (esim. body) ja napsauta Luo tyylisääntö -painiketta.
 body: kaikki HTML-elementit ovat body-elementin
sisällä, joten esimerkiksi fonttimääritykset kattavat
kaiken tekstin
 p: paragraph- eli kappale-elementti, jonka sisään
teksti kirjoitetaan. Tätä ei välttämättä tarvitse luoda.
 h1: ensimmäisen tason otsikot
 h2: toisen tason otsikot
 h3: kolmannen tason otsikot
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 12/15
6. Luodut tyylisäännöt näkyvät vasemmassa reunassa tyylitiedoston nimen
alapuolella. Punainen kuvake tyylitiedoston nimen edessä tarkoittaa tallentamatonta tiedostoa. Kaikki määritykset tallennetaan automaattisesti
suljettaessa valintaikkuna OK-painiketta napsauttamalla.
7. Napsauta muokattavaa tyylisääntöä ja siirry sitten esimerkiksi Tekstivälilehdelle, jossa määritetään tekstin asetukset. Valitse ensimmäiseksi
fonttiperhe, esimerkiksi Ennalta määritetty -kohdasta Arial, Helvetica, sans-serif. Voit myös
valita Käytä määrättyä kirjasinlajia -kohdan ja luoda haluamasi fonttimäärityksen kirjoittamalla esimerkiksi Verdana, Arial, Helvetica. Ensimmäinen fontti listalla on se mitä selain pyrkii
käyttämään. Jos sitä ei löydy, käytetään jotain seuraavista.
Määritä fontin koko Tekstin koko- kohdasta valitsemalla alasvetovalikosta 0px. Kasvata sitten
lukuarvoa alasvetovalikon oikealla puolella olevilla nuolipainikkeilla. Vastaavalla tavalla voit
säätää tekstirivien välistä etäisyyttä (Rivin korkeus).
Valintaikkunan Tausta-välilehdellä määritetään elementin taustaväri tai -kuva. Kun määritys
tehdään body-elementille, asetetaan sivun taustaväri. Esimerkiksi h-elementeillä taustavärillä
voidaan korostaa otsikkoa.
Reunukset-välilehdellä elementille voi asettaa reunaviivan. Sitä voi käyttää esimerkiksi otsikkotyylien yhteydessä.
Laatikko-välilehdellä elementille voi asettaa marginaalin (etäisyyden) muihin elementteihin tai
täytteen. Täyte-asetuksella esimerkiksi reunaviivan ei tarvitse olla aivan kiinni tekstissä, sillä
asetuksella saadaan määritettyä sopiva tekstin ja reunan välinen etäisyys.
8. Tee sopivat määritykset kaikille luomillesi tyylisääntöelementeille (body, h1, h2 jne.).
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 13/15
CSS-tyylitiedoston liittäminen HTML-tiedostoihin
Luotaessa CSS-tyylitiedosto edellä kuvatulla tavalla, se myös liitetään siihen HTML-tiedostoon, josta käsin CSS-tyylieditori avattiin. Kerran luotu tyylitiedosto liitetään muihin HTML-tiedostoihin
seuraavasti.
1. Avaa editoriin muokattavaksi se HTML-sivu, johon haluat liittää tyylitiedoston.
2. Napsauta CSS-kuvaketta ja valitse palettikuvakkeen takaa Ulkoinen linkki.
3. Etsi tyylitiedosto Valitse tiedosto -painikkeella.
4. Napsauta Luo tyylisivu -painiketta, jolloin tyylitiedosto linkitetään sen hetkiseen HTMLtiedostoon (tyylitiedostoa ei luoda uudelleen, kuten painikkeesta voisi päätellä).
Linkkien tyylit
CSS-tyylieditorilla on helppo luoda tyylimääritykset linkeille niin sanottujen pseudoelementtien
avulla. Nämä elementit ovat:
 a:link
avaamattomien linkkien ominaisuudet
 a:visited avattujen linkkien ominaisuudet
 a:hover kun kohdistin saapuu linkin päälle
Huomaa, että nämä kolme linkkimääritystä on luotava tässä järjestyksessä (oltava CSStiedostossa tässä järjestyksessä).
1. Siirry CSS-editoriin ja valitse vasemman reunan luettelosta
ulkoinen tyylitiedosto.
2. Napsauta vasemman yläkulman palettikuvaketta
.
3. Valitse oikealta puolelta kohta tyyli, joka koskee kaikkia elementtejä seuraavan valitsimen
mukaisesti, valitse alasvetovalikosta pseudoelementti a:link ja napsauta Luo tyylisääntö painiketta.
4. Luo samalla tavalla a:visited ja a:hover. Muista elementtien järjestys!
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 14/15
5. Tee kullekin luodulle elementille tyylimääritykset. Lähinnä kyseeseen tulevat tekstin väri ja tehosteet (tekstin koristeet), mutta kaikki muutkin tyylimääritykset linkeille ovat mahdollisia (kuten taustaväri, reunaviiva jne.).
6. Testaa ja kokeile, miltä eri linkit näyttävät (a:link, a:visited, a:hover). Pyri luomaan sellaiset
määritykset, että linkkien tyyli on yhteneväinen, mutta erottuvat silti toisistaan ja muusta
tekstistä. Tämän voi toteuttaa esimerkiksi siten, että kaikkien linkkien väri on samansävyinen,
mutta värin voimakkuus vaihtuu. Kokeile myös, mihin linkkeihin alleviivaus sopii ja mihin ei.
Luokkavalitsimen luominen
Luokkavalitsimen avulla voidaan soveltaa tyylejä monessa eri elementissä. Esimerkiksi voidaan
luoda luokkavalitsimet .keskitetty ja .oikeatasaus, joilla elementti voidaan tasata sivusuunnassa
sivun keskelle tai oikeaan reunaan. Luokkavalitsimen voi liittää vaikkapa otsikko- tai kappaleelementtiin.
1. Siirry CSS-editoriin ja valitse vasemman reunan luettelosta ulkoinen tyylitiedosto.
2. Napsauta vasemman yläkulman palettikuvaketta
.
3. Valitse oikealta puolelta nimetty tyyli, joka koskee luokkia. Kirjoita tekstikenttään pisteen kera tyylin nimi, esimerkiksi .keskitetty. Napsauta Luo tyylisääntö -painiketta.
4. Luo samalla tavalla tyyli .oikeatasaus.
5. Tee luoduille luokkavalitsimille tyylimääritykset valitsemalla Teksti-välilehdeltä Tasauskohdasta
 Keskitä (.keskitetty-luokkavalitsimelle)
 Oikealle (.oikeatasaus-luokkavalitsimelle)
Hannu Matikainen
1.2.2011
KompoZer.doc
KompoZer
s. 15/15
Luokkavalitsimen käyttäminen
1. Valitse se tekstialue, johon haluat soveltaa tyyliä.
2. Valitse työkalurivin vasemmanpuoleisesta alasvetovalikosta elementti (otsikko, kappaletyyli),
jota kyseisessä kohdassa haluat käyttää. Valitse oikeanpuoleisesta alasvetovalikosta luokkavalitsin eli tyyli elementille.
Hannu Matikainen
1.2.2011
KompoZer.doc