Joomla 1.5 Frontend käyttöopas

1. D4-Verkosto Oy
Petri Niemelä
Henrik Toropainen
Perusohje
Joomla 1.5:n sivueditorista (JCE)

2. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
2 (22)
Sisällysluettelo
Johdanto..............................................................................................................................3
1 Sisäänkirjautuminen..........................................................................................................4
1.1 Näkymä kirjautuneena................................................................................................5
2 Sivueditorinäkymä (JCE) ..................................................................................................6
2.1 Työkalurivi ..................................................................................................................7
2.1.1 Työkalurivin lisätoiminnot.....................................................................................9
2.1.2 Tekstin kopioiminen sivulle ulkopuolisesta lähteestä.........................................10
3 Linkit ...............................................................................................................................10
3.1 Linkin lisääminen......................................................................................................10
3.2 Linkin poistaminen....................................................................................................13
3.3 Ankkurit ....................................................................................................................13
4 Kuvien hallinta ................................................................................................................15
4.3 Kuvanhallinnan ominaisuudet ..................................................................................16
4.2 Kuvan vieminen palvelimelle ....................................................................................17
4.3 Kuvan lisääminen lyhyesti........................................................................................18
5 Tallentaminen .................................................................................................................18
5.1 Julkaiseminen –välilehti............................................................................................18
5.2 Tallennusvalikko.......................................................................................................20
6 Uloskirjautuminen ...........................................................................................................21
Lähteet...............................................................................................................................22

3. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
3 (22)
Johdanto
Joomla 1.5:n sivueditorikomponentista JCE:stä ei ollut tämän ohjeen kirjoitus hetkellä saatavilla
suomenkielistä versiota. Tästä johtuen olemme yrittäneet käyttää suomenkielisiä termejä silloin kun
se on mahdollista. Kaikista toiminnoista ei kuitenkaan ole suomenkielistä vastinetta ollut.
Olemme laittaneet aina suomenkielisen termin ensin ja englanninkielisen sulkuihin sen jälkeen.
Täten ohjetta on helppo käyttää sekä englanninkielistä JCE-editoria kuin myös mahdollisesti
myöhemmin tulevaa suomenkielistä editoria käytettäessä.
Tämä ohje on ensisijaisesti tarkoitettu D4-Verkosto Oy:n asiakkaille, ja muille sidosryhmille.

4. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
4 (22)
1 Sisäänkirjautuminen
Kirjoita selaimeesi
www.omadomain.fi/login
korvaa omadomain domain-nimelläsi,
esim. www.villenfirma.fi/login
Avautuu oheinen sivu,
Sisäänkirjautumissivu
1. Kirjoita oma käyttäjätunnus
2. Kirjoita oma salasana
3. Jos haluat, ettei kirjautumisen yhteydessä kysytä salasanaa, laita rasti ruutuun. HUOM! Älä käytä
yleisellä koneella
4. Lopuksi klikkaa kirjaudu.

5. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
5 (22)
1.1 Näkymä kirjautuneena
Näkymä on hyvin samanlainen kuin julkinen etusivu, lukuun ottamatta kynä-ikonia otsikon
vieressä.
Klikkaamalla kynä-kuvaa avautuu varsinainen muokkaustila, eli tässä tapauksessa JCE-sivueditori,
jossa voit muokata sivuja.

6. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
6 (22)
2 Sivueditorinäkymä (JCE)
Tallennus-valikko
kts. kappale 5.2
Otsikkokenttä
Otsikko-kentässä näkyy muokattavan sivun nimi (muutettavissa)
Työkalurivi

7. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
7 (22)
2.1 Työkalurivi
Tekstikentän yläpuolella oleva palkki on hyvin samanlainen kuin Word –tekstinkäsittelyohjelmassa.
Tavallisimmat tekstinkäsittelytoiminnot löytyvät, kuten mm. lihavointi.
Työkalupainikkeiden selitykset:
Peruuta (Undo)
Toista (Redo)
Näyttää help-ikkunan (Help)
Luo uuden dokumentin (New document)
Lihavointi (Bold)
Kursiivi (Italic)
Alleviivaus (Underline)
Numeroimaton lista (Unordered list)
Numeroitu lista (Ordered list)
Poista muotoilu valitusta kohdasta (Remove formatting)
ts. kappale 2.1.2) (Paste from Word)
lain Text)
tsi (Find)
isennys vasemmalle (Outdent)S
Sisennys oikealle (Indent)
Yliviivaus (Strikethrough)
Leikkaa (Cut)
Kopioi (Copy)
Liitä (Paste)
Liitä Wordista (k
Liitä tavallisena tekstinä (kts. kappale 2.1.2) Paste as P
E

8. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
8 (22)
Korvaa (Find/replace)
isää viivan (Insert horizontal ruler)
laindeksi (Subscript)
t)
asaus oikeaan reunaan (Align right)
eskitä (Align center)
olempiin reunoihin (Align full)
properties)
Table cell properties)
)
n before)
(Insert column after)
table cells
)
isää linkki (kts. kappale 3.1) (advlink)
oistaa linkki (kts. kappale 3.2) (unlink)
Tekstin taustaväri (Select background color)
L
A
Yläindeksi (Superscrip
T
K
Tasaus vasempaan reunaan (Align left)
Tasaus m
Taulukko (Inserts a new table)
Taulukon rivin ominaisuudet ( Table row
Taulukon solun ominaisuudet (
Lisää rivin valitun rivin yläpuolelle (Insert row before
(Insert row after)Lisää rivin valitun rivin alapuolelle
Poistaa rivin (Delete row)
Lisää sarakkeen valitun sarakkeen eteen (Insert colum
Lisää sarakkeen valitun sarakkeen eteen
Poistaa rivin (Remove column)
Jaa taulukon solut (Split merged table cells).
Yhdistää taulukon solun (Merge
Ankkuri (kts. kappale 3.3) (Insert/edit anchor
L
P

9. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
9 (22)
Erikoismerkki (Insert custom character)
Taulukon rajat (Toggle guidelines / Invisible elements)
uuttaa tekstin suunnan vasemmalta oikealle (Direction left to right)
irection right to left)
sikatselu (Preview)
ulosta (Print)
oko näytön editori, jolloin kirjoitustilaa on enemmän (Toggle full screen mode)
isää hymiön (Emotions)
M
Muuttaa tekstin suunnan oikealta vasemmalle (D
E
T
K
L
Koodin puhdistaja (Clean up messy code)
Editoi sivun HTML-lähdekoodia (Edit HTML source)
Tekstin värin valinta (Select text color)
Lisää kuva (Insert image)
2.1.1 Työkalurivin lisätoiminnot
Tyylit (Styles): Jos käytät css-tyylitiedostoa, voit valita valmiiksi määritetyn css-
laa” hiirellä) ja sen jälkeen sopiva tyylityylin tekstillesi. Valitse haluttu teksti (”maa
alasvetovalikosta.
Muotoilu (Format): voidaan valita otsikkotasoja ja tyylejä.
Fontti (Font family): voidaan valita valitulle tekstille sopiva fontti eli
irjasintyyppi. Alasvetovalikosta löytyy yleisimmät fontit.k
Fonttikoko (Font size): tekstin koon valinta. Koot vaihtelevat 1 (8 pt) – 7 (32 pt).
Yleisimmin käytettyjä fonttikokoja ovat 1 (joka on oletusarvona), 2 (10 pt) tai 3 (12 pt).

10. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
10 (22)
28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
10 (22)
2.1.2 Tekstin kopioiminen sivulle ulkopuolisesta lähteestä
Lisää Wordista (Paste from Word) – painikkeen avulla tulee kaikki Wordin muotoilut ja
liitä (ctrl+v)
n.
teestä muotoilemattomana
Joskus
wordis
Liitä tavallisena tekstinä (Paste as Plain Text – painiketta käyttämällä voit kopioida tekstin
a. Tee kuten kopioisit
uotoilujen kanssa, mutta käyttäen Liitä tavallisena tekstinä–painiketta.
3 Linkit
un halutaan tehdä linkki johonkin toiseen artikkeliin, toimi seuraavasti:
, lause tai kuva (hiirellä maalaamalla) editorissa.
kalurivin lisää linkki-painiketta (alla).
Tekstien tuominen Wordista muotoiltuna
saa sivun näyttämään juuri siltä kuin Wordissa. Kopioi wordista (ctrl+c) ja
teksti ko. painikkeesta aukeavaan ikkunaan saadaksesi tekstin muotoilut säilymää
Tekstin tuominen Wordista tai muusta läh
muotoilut eivät kuitenkaan toistu oikein, tai haluat kopioida jostain muusta lähteestä kuin
ta.
ilman muotoiluja editoriin (sivulle), jolloin sitä on helpompi editoid
m
3.1 Linkin lisääminen
K
1. Valitse sana
2. Klikkaa työ
3. Avautuu Lisää linkki (Advanced Link) – ikkuna.

11. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
11 (22)
entät (kuvassa)
RL
sen artikkelin osoite täydellisenä, johon haluat viitata palvelimella. Myös ulkopuoliseen
K
U
Kirjoita
linkkien tekoon esim. http://www.kynnys.fi/esteettomyys/artikkelinnimi.pdf
HUOM: Osoite tulee kirjoittaa URL-kentään täydellisenä eli myös http://… tulee
nkkurit (Anchors)
sivulla. Suositus pitkille dokumentille
ohde (Target)
in aukeamisen eli avautuuko linkki samaan ikkunaan, uuteen ikkunaan vai
laittaa osoitteen alkuun.
A
Jos halutaan päästä nopeasti tiettyyn kohtaan
(katso Ankkurit, kohta 3.3).
K
Voit määrittää link
kehykseen.

12. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
12 (22)
Otsikko (Title)
ille, jotta ruudunlukuohjelmat pystyvät kertomaan linkin sisällön
SS-tyyli (Class)
edostoa, voit valita valmiiksi määritetyn css-tyylin linkkisi ulkonäöksi..
isältölinkit (Content)
n tekoon.. Tehtäessä linkki toiseen artikkeliin tai alasivuun samassa
Kuvaava nimi link
näkövammaisille.
C
Jos käytät css-tyylit
S
Sivuston sisäisten linkkie
sivustossa voidaan käyttää sisältölinkit valikkoa.
isältölinkkien Alakohdat:
hteystiedot (Contact)
asi henkilön sähköpostiin, jos olet määrittänyt sen aiemmin ”Contact”-
ääryhmä (Section)
suoraan sivuston Joomla! Pääryhmä (Section) – näkymään.
yhmä (Category)
suoraan Joomla! Ryhmä (Category) – näkymään.
rtikkelit (Articles)
ton artikkeliin valitsemalla Article- kohdan alasvetovalikosta oikean
ategorisoimattomat (Uncategorized)
e kategorisoitu. Valitse oikea alasivu alasvetovalikosta
ww-linkki (Weblink)
määriteltyyn ulkopuoliseen www-osoitteeseen.
un mielestäsi linkki on kunnossa, klikkaa Insert (Lisää) – painiketta.
S
Y
Voit tehdä linkin valitsem
moduulissa Administrator -puolella.
P
Tällä voit tehdä linkin
R
Tällä voit tehdä linkin
A
Voit tehdä linkin sivus
artikkelin (esim. uutiskomponentin uutisen)
K
Voit tehdä linkin sivuston sivuun jota ei ol
kohdasta ”Select Uncategorized”.
W
Voit tehdä linkin aiemmin
K

13. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
13 (22)
3.2 Linkin poistaminen
1. Valitse äsken maalaamasi (nyt linkitetty) kohta uudelleen
2. Klikkaa Poista linkki (Unlink) – painiketta (alla).
Poista linkki (Unlink)
3.3 Ankkurit
Halutessasi tehdä ankkurin, eli sivun sisäisen linkityksen:
1. Mene tekstissä siihen kohtaan, johon haluat tehdä ankkurin.
2. Maalaa sana ja klikkaa sivueditorin työkaluriviltä ankkurin kuvaa (linkkipainikkeen vieressä).
Ankkuri-painike (Insert / edit anchor)
3. Kirjoita ankkurin nimi (Suosittelen mahdollisimman lyhyttä ja kuvaavaa nimeä, mielellään
valittu sana tai osa siitä).
4. Klikkaa Lisää–painiketta, jolloin valitun sanan eteen ilmestyy pieni ankkurin kuva.
5. Mene tekstissä siihen kohtaan, johon haluat tehdä linkin.
6. Valitse sana ja klikkaa sivueditorista Lisää linkki – painiketta.
Lisää linkki – painike (Advlink)

14. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
14 (22)
7. Avautuu seuraava ikkuna
8. Ankkurit – kohdassa valitaan luettelosta se nimi, jonka juuri annoit.
9. Huomaat, että URL-kenttään ilmestyy automaattisesti #ankkurinnimi,
esim. #kho2 (kuten kuvassa).
10. Lopuksi klikkaa Päivitä -painiketta
Ankkurin poistaminen
Ankkurien poistaminen onnistuu helposti valitsemalla tekstin joukosta ankkurin kuva, ja painamalla
näppäimistöltä Delete/Del-näppäintä.

15. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
15 (22)
4 Kuvien hallinta
Klikkaa ensin työkaluriviltä Lisää kuva – painiketta.
Lisää kuva (Insert image)
Ilmestyy seuraavanlainen kuva-valikko.

16. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
16 (22)
URL
Kuvan Internet-osoite esim. http://www.joku.fi/esimerkki/kuva.jpg
Kuvaus (Alt)
Kenttä johon suositellaan laitettavaksi näkövammaisia varten tekstimuotoinen selitys kuvasta
(perustuu W3C WAI-suosituksiin).
Näytetään myös jos kuvaa ei löydy palvelimelta.
Otsikko (Title)
Kuva-teksti, joka tulee kun laittaa hiiren kuvan päälle.
Lisätiedot (Details)
Kun valitset kuvan hiirellä, se ilmestyy tietojen kanssa tähän Lisätiedot -ikkunaan sekä yläreunan
laatikkoon. Tämän jälkeen se voidaan valita klikkaamalla Lisää -painiketta.
Kuva asettuu siihen kohtaan, missä hiiren kohdistin kulloinkin on. Samalla työkalulla voidaan myös
viedä kuvia palvelimelle. Tämä on tarpeen, kun halutaan käyttää muita kuin Joomlan valmiita
mallikuvia.
4.3 Kuvanhallinnan ominaisuudet
Voit muuttaa kuvan arvoja tarpeittesi mukaan. Kuvalle voidaan määrittää mm. leveys ja korkeus,
kohdasta Kuvasuhteet (Dimensions). Leveys ja korkeus voidaan säilyttää myös suhteessa, jolloin
tulee ruksata kohta Suhteellinen (Proportional).
Kuvalle voidaan määritellä myös reunat, kohdasta Reunus (Border). Leveys (Width)-arvolla
voidaan määrittää reunojen paksuus. Reunus (Border)-kohdasta voidaan myös poistaa reunat, silloin
kun ne muutoin ilmestyisi, esim. kuvaa linkitettäessä, kirjoittamalla Leveys (Width) – arvoksi nolla
(0). Align-kohdasta voi määritellä kuvan sijoittelun suhteessa muuhun tekstiin (esimerkiksi left ja
right). Vspace ja Hspace määrittelevät pikseleinä kuvan ympärille jäävän tilan, Vspace
pystysuunnassa ja Hspace vaakasuunnassa.

17. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
17 (22)
Kuvakkeet, vasemmalta oikealle:
Uusi kansio (New folder)
Tekee uuden alihakemiston
Vie palvelimelle (Upload)
Vie kuvatiedoston webbipalvelimelle, kts. kohta 4.1
Ohje (Help)
Kuvakkeet, vasemmalta oikealle:
Päivitä (Refresh)
Päivittää hakemiston sisällön
Lisää (Insert)
Lisää valitun kuvan sivulle
Peru: (Cancel)
Peruu asetukset ja sulkee kuva-ikkunan
4.2 Kuvan vieminen palvelimelle
HUOM! Kun viet kuvia palvelimelle, varmista että siirrettävän kuvan koko on alle 100k (suositus).
Sivustolla näkyvän kuvan lataaminen hitailla yhteyksillä muodostuu muutoin kohtuuttoman aikaa
vieväksi, etenkin jos kuvia on useita. Lisäksi pienemmät kuvat vievät vähemmän tilaa palvelimelta.
1. Klikkaa kuvanhallintaikkunasta Vie Palvelimelle (Upload) – painiketta (kuvassa alla).
2. Ilmestyy Upload – ikkuna (kuvassa alla).

18. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
18 (22)
3. Add File – painikeella valitset kuvan työaseman hakemistoista.
4. Lopuksi klikataan Vie palvelimelle (Upload) – painiketta (kuvassa alla).
Nyt kuva on palvelimella, ja se voidaan lisätä sivuille painamalla Lisää (Insert) – painiketta. Muista
ensin kuitenkin valita kuva luettelosta.
4.3 Kuvan lisääminen lyhyesti
1. Klikkaa hiirellä tyhjää kohtaa sivulla
2. Paina Lisää kuva-painiketta sivueditorin työkalupalkista (ellet ole jo painanut).
3. Uusi ikkuna aukeaa.
4. Valitse oikea kuva liikkumalla hakemistorakenteessa haluttuun kohtaan.
5. Valitse kuva klikkaamalla kuvan nimen kohdalla. Huomaat, että kuvan tiedot päivittyvät
yläreunan laatikkoon sekä lisätiedot kohtaan.
6. Paina Lisää–painiketta ikkunan alareunasta.
5 Tallentaminen
5.1 Julkaiseminen – välilehti

19. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
19 (22)
Kentät (kuvassa)
Julkaistu (Published)
Tilassa on kaksi vaihtoehtoa: ei julkaistu ja julkaistu. Valitse julkaistu, jos haluat ko. sivun
näkyvän sivustolla.
Näytä etusivulla (Show on front page)
Tämä on tarpeen ainoastaan käytettäessä etusivu-komponenttia.
Määrittää näkyykö artikkeli etusivulla.
Kirjoittajan kutsumanimi (Author Alias)
Aloita julkaisu (Start publishing)
milloin kyseinen artikkeli alkaa näkymään sivustolla
Lopeta julkaisu (Stop publishing)
tähän voi kirjoittaa artikkelin julkaisun lopetuspäivän, jolloin kyseinen artikkeli poistuu sivustosta
(vuosi, kuukausi, päivä)

20. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
20 (22)
– painike
kalenteri, josta voi valita julkaisemisen aloitus-/lopetuspäivän visuaalisesti (kuvassa alhaalla)
Käyttöoikeustaso (Access level)
Käyttöoikeustaso – kentästä voit vaihtaa sivun käyttöoikeustasoa.
Käyttöoikeustasot ovat: Julkinen, (Public) Rekisteröityneet (Registered) ja Erikois (Special).
Käyttöoikeustasot viittaavat käyttäjäryhmiin, jotka ovat näkyvissä vain Administrator valikon
kautta (ns. Joomla back-end). Näitä ryhmiä ovat:
Public (kirjautumaton), Author, Editor, Publisher, Manager, Administrator ja Super
Administrator.
Public tarkoittaa että sivu on näkyvissä kaikille (myös kirjautumattomille).
Registered, että se näkyy vain kirjautuneille käyttäjille/yllapitäjille.
Special tarkoittaa että sivu näkyy muille käyttäjäryhmille, paitsi Registered- ja Public-
käyttäjäryhmille.
Järjestys (Ordering)
Artikkelien keskinäinen järjestys, esim. uutisten keskinäinen järjestys.
5.2 Tallennusvalikko

21. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
21 (22)
Tallenna (Save)
Käyttäjän tekemät muutokset tallentuvat välittömästi sellaisina kuin käyttäjä on syöttänyt ja sulkee
muokkaustilan. Muutokset ovat heti nähtävillä sivustolla.
Peruuta (Cancel)
Tehdyt muutokset peruuntuvat. (sivu jää sen näköiseksi kuin ennen muokkausta).
6 Uloskirjautuminen
Kirjaudu Ulos (Log out)
Kun et enää halua editoida sivustoa, poistu klikkaamalla Kirjaudu ulos-painiketta. Painike löytyy
jokaiselta sivulta (saattaa olla erinäköinen kuin kuvassa).

22. 28.5.2008
D4-Verkosto Oy
Perusohje Joomla 1.5:n sivueditorista (JCE)
22 (22)
Lähteet
Kynnys ry:n uusien kotisivujen päivitysohjeet
– Petri Kauppinen