Tekstin muotoilu

Tekstin saavutettavassa muotoilussa tärkeintä on käyttää Lukkarin valmiita tyylejä, ja vain siinä käyttötarkoituksessa, johon ne on suunniteltu. Esimerkiksi otsikkotyylejä ei siis saa käyttää korostuskeinona tekstinosissa, jotka eivät ole otsikoita.

Tyylit eivät muuta pelkästään tekstin ulkoasua, vaan tuottavat samalla verkkosivun koodiin oikeat merkinnät. Näin myös ruudunlukuohjelmat tunnistavat esimerkiksi otsikot otsikoiksi. Johdonmukaisesti käytetyt muotoilut takaavat hyvän käyttökokemuksen myös näkeville.

Valmiit tyylit löydät tekstieditorin Tyyli-pudotusvalikosta.

Jos kopioit tekstiä muista ohjelmista, muista aina liittää se Lukkariin muotoilemattomana CTRL + Shift + V -näppäinyhdistelmällä. Liittämisen jälkeen teksti muotoillaan Lukkarin tekstieditorin työkaluilla.

Muotoile teksti näin

Kirjaudu sisään Lukkariin ja avaa sisältöportletin muokkausnäkymä.
Maalaa haluamasi osa tekstistä, esim. otsikko.
Valitse tekstieditorin Tyyli-valikosta oikea tyyli.
Jos kyse on luettelosta, klikkaa tekstieditorissa luetteloikonia (numeroitu tai numeroimaton). Myös lihavoinnille on työkalurivillä oma ikoni.
Julkaise portlettiin tehdyt muutokset.

Tarkista ainakin seuraavat asiat:

Jokaisella sivulla on yksi pääotsikko (H1).
Alaotsikoita on käytetty loogisessa järjestyksessä.
Olennainen tieto on sivun alussa.
Sisältö on jaoteltu silmäiltäviin kokonaisuuksiin väliotsikoilla.
Otsikoita ei ole kirjoitettu isoilla kirjoimilla eikä niitä ole lihavoitu.
Teksti on muotoiltu Lukkarin valmiilla tyyleillä ja tyylejä on käytetty vain niiden nimen mukaiseen käyttötarkoitukseen.
Teksti on tasattu vasempaan reunaan.
Lihavointia on käytetty harkitusti ja kursivointia mielellään ei lainkaan.
Alleviivausta on käytetty korkeintaan tekstilinkeissä.

Tekstieditorin painikkeet

	Muuta tästä tekstin tyyliä. Normaalin tekstin tyyli on Leipäteksti. Sivun pääotsikon tyyli on Otsikko 1 ja alaotsikoiden tyylinä voi käyttää tyylejä Otsikko 2—4. Ingressi-tyyliä voidaan käyttää tekstin alussa kiinnittämään huomiota kaikkein tärkeimpiin asioihin. Huomio-tyyli lisää tekstin taakse korostusvärin, jolloin tekstin keskellä oleva osio voidaan korostaa. Sitaatti kannattaa valita esimerkiksi Raamatun teksteille.
	Tekstin lihavointi ja kursivointi.
	Poista muotoilu
	Peruuta ja tee uudelleen viimeinen toiminto
	Leikkaa ja Kopioi
	Liitä teksti muotoiluineen (CTRL + V). Käytä tätä toimintoa vain, jos kopioit valmiiksi muotoiltua tekstiä Lukkarin sivulta toiselle.
	Liitä tekstinä (CTRL + Shift + V). Käytä tätä vaihtoehtoa, kun kopiot tekstiä jostain toisesta lähteestä. Toiminto liittää tekstin ilman mitään muotoiluja, jolloin korostukset, otsikoinnit ym. pitää lisätä tekstiin jälkikäteen.
	Luo numeroitu lista. Luo numeroimaton lista.
	Suurenna ja pienennä tekstin sisennystä.
	Klikkaamalla Koodi-painiketta saat näkyviin Content-portletin sisällön koodinäkymän. Koodinäkymässä voit muotoilla sisältöä monipuolisemmin sekä selvittää esim. muotoilun ongelmia.
	Lisää tai muokkaa linkki tai lisää liitetiedosto. Tämä painike avaa ikkunan, jossa voit lisätä haluamasi tyyppisen linkin/liitetiedoston sisältöösi. Lue lisää linkin lisäämisestä »
	Poista linkki
	Lisää tekstiin ankkuri antamalla sille kuvaava nimi. Ankkuri on kohta tekstissä, johon linkki voi kohdistua. Esim. jos artikkeli on hyvin pitkä, tekstin alkuun voidaan tehdä linkkejä, jotka vievät tekstissä oleviin ankkureihin, jotka on sijoitettu tärkeisiin otsikkoihin. Välttääksesi linkkimuotoilun ankkurin kohdassa, ankkuri kannattaa lisätä aivan rivin alkuun tai edelliselle riville valitsematta varsinaista tekstiä.
	Lisää tai muokkaa kuva. Tällä painikkeella voit lisätä kuvapankista kuvan tekstin yhteyteen. Harkitse kuitenkin kuvan lisäämistä, sillä Lukkarilla luotu sivusto on responsiivinen, mutta kuvatyökalulla tuodut kuvat eivät ole. Siksi on suositeltavaa, että kuvia lisätään ennemmin MEDIA HIGHLIGHT -portletteihin.
	Lisää tai muokkaa taulukkoa. Työkalu avaa ikkunan, jossa voit antaa taulukolle haluamasi määreet. Lisäominaisuudet-välilehdellä voit muokata taulukon tyyliä.
	Erikoismerkit
	Valitse tekstin kieli, mikäli se on eri kuin sivuston kieli.

Otsikointi

Otsikot auttavat asioiden löytymisessä silmäiltäessä. Sokeiden lukulaitteille ne ovat erityisen tärkeitä, koska muuten sivun jäsennys ja asioiden kontekstit jäävät hyvin epäselväksi.

Otsikot tehdään maalaamalla otsikoksi haluttu teksti ja valitsemalla sisältöportletin tekstieditorin Tyyli-valikosta haluttu otsikkotaso:

Otsikkotasoja on neljä:

Pääotsikko (h1)
Otsikko 2 (h2)
Otsikko 3 (h3)
Otsikko 4 (h4)

Otsikoinnin periaatteet:

Anna sivulle vain yksi pääotsikko (H1). Jokaisella sivulla on oltava sivun pääotsikko. Varmista, että se vastaa valikossa olevaa sivun nimeä. Pääotsikko voi olla pidempi ja tarkempi kuin sivun nimi valikossa, mutta niissä molemmissa tulisi käyttää samoja termejä.
Käytä riittävästi väliotsikoita jaksottamaan tekstiä pienemmiksi kokonaisuuksiksi.
Älä hyppää otsikkohierarkiassa otsikkotasojen yli (esim. H1:n jälkeen tulee olla H2, H2-tason jälkeen H3, jne).
Älä tee otsikointia tekstiä lihavoimalla vaan käytä valmiita otsikkotyylejä.
Älä käytä otsikkotyylejä korostuskeinona tekstinosissa, jotka eivät oikeasti ole otsikoita.
Tee kuvaavia ja napakoita lauseotsikoita. Ydinasia otsikon alkuun.

Esimerkki: Älä tee näin

Väärä tapa:

ISOSKOULUTUKSET SYKSYLLÄ 2022

Rippikoulun jälkeen voit osallistua kaksivuotiseen isoskoulutukseen. Isoskoulutuksessa tutustut uusiin ihmisiin, saat koulutusta ryhmänvetäjänä toimimiseen ja opit lisää itsestäsi ja Jumalasta.

Isoskoulutukset alkavat jälleen syyskuussa 2022. Syksyn ensimmäinen tapaamiskerta on poikkeuksellisesti ma 5.9. klo 19 Esimerkkilän pappilassa. Ensimmäisen tapaamiskerran jälkeen tapaamme joka toinen keskiviikko klo 18 Esimerkkilän seurakuntatalolla.

Ilmoittaudu isoskoulutukseen 31.7.2022 mennessä tästä

Tervetuloa mukaan!

Ps. Kiinnostaako kerhonohjaaminen? Kerhonohjaajakoulutus alkaa elokuussa ja tapaamisia on kerran kuukaudessa. Kun olet käynyt kerhonohjaajakoulutuksen, voit tulla isoseksi lastenleireille.

Mikä oli pielessä?

Otsikko on kirjoitettu isoilla kirjaimilla.
Ingressitekstin tyyliksi on valittu otsikko 2 (H2), vaikka pitäisi käyttää ingressityyliä.
Ingressin jälkeinen tekstikappale on kokonaan lihavoitu, jolloin korostuskeinon teho katoaa.
Korostuskeinona on käytetty alleviivausta, joka merkitsee verkkotekstissä linkkiä.
Tervetuloa mukaan! -tekstissä on käytetty ingressityyliä ja se on tasattu keskelle.
Viimeinen kappale on kursivoitu.

Esimerkki: Oikea tapa

Oikea tapa:

Isoskoulutukset syksyllä 2022

Rippikoulun jälkeen voit osallistua kaksivuotiseen isoskoulutukseen. Isoskoulutuksessa tutustut uusiin ihmisiin, saat koulutusta ryhmänvetäjänä toimimiseen ja opit lisää itsestäsi ja Jumalasta.

Isoskoulutukset alkavat jälleen syyskuussa 2022. Syksyn ensimmäinen tapaamiskerta on poikkeuksellisesti ma 5.9. klo 19 Esimerkkilän pappilassa. Ensimmäisen tapaamiskerran jälkeen tapaamme joka toinen keskiviikko klo 18 Esimerkkilän seurakuntatalolla.

Ilmoittaudu isoskoulutukseen 31.7.2022 mennessä tästä

Tervetuloa mukaan!

Isoseksi lastenleireille

Kiinnostaako kerhonohjaaminen? Kerhonohjaajakoulutus alkaa elokuussa ja tapaamisia on kerran kuukaudessa. Kun olet käynyt kerhonohjaajakoulutuksen, voit tulla isoseksi lastenleireille.

Mitä oli tehty oikein?

Otsikko on kirjoitettu alkukirjainta lukuun ottamatta pienillä kirjaimilla.
Pääotsikossa ja ingressissä on käytetty niille tarkoitettuja tyylejä (Sivun pääotsikko H1 ja ingressityyli).
Korostuskeinona on lihavointi ja sitä on käytetty maltillisesti.
Ilmoittautumisajankohdan korostamiseen on käytetty huomiotyyliä.
Tavallisen tekstisisällön tyyli on leipäteksti.
Lastenleirien isosuudesta kertova teksti on erotettu oman väliotsikkonsa (Otsikko 2) alle, jolloin tekstin silmäiltävyys paranee.

Tekstieditorin ikkunan voi suurentaa

Vinkkejä edistyneemmille käyttäjille (kikkakolmoset)

Tälle sivulle on koostettu vinkkejä Lukkari-sivuston sisällön elävöittämiseen Content-portletin Koodi-näkymää hyödyntäen. Näitä keinoja tulisi käyttää vain poikkeustapauksissa ja tilanteissa, joissa sivuston omat tyylit eivät esitä sisältöä järkevästi/halutulla tavalla. Oheiset esimerkit toimivat vain, kun ne liitetään tekstieditoriin Koodi-näkymän ollessa päällä:

Käytännön vinkkejä

Koodi-näkymässä syötetyt elementit kuten <style> ja <script> eivät näy normaalissa tekstieditorin muokkaustilassa. Sen vuoksi on järkevää sijoittaa elementit aina Content-portletin loppuun tai alkuun (tai jopa omaan Content-portlettiinsa), jotta sisältöä muokatessa ei vahingossa tule poistaneeksi myös Koodi-näkymän kautta syötettyä koodia.
Content-portlettiin syötetty koodi on sivukohtaista. Jos koodi halutaan toistuvan koko sivuston laajuisesti, esim. joka sivulla näkyvän käyttäjäkyselyn upotuskoodi, täytyy se erikseen pyytää Lukkari-tuesta Itsepalvelupisteen kautta.
Content-portletin editori tarkistaa sisällön tallennusvaiheessa. Jos koodissa on virheitä, voi editori korjata ne tai poistaa kokonaan. Kannattaa siis olla tarkkana koodia muokattaessa!

Omat tyylimääritykset (CSS-tyyliluokat)

Content-portlettiin voi syöttää tyylejä sekä <style>-tägeihin että elementteihin suoraan ns. inline-tyylimääreinä.

Esimerkki 1 (inline-tyylimääre): linkin fonttikoon pienentäminen

<a href="http://lukkariohje.evl.fi" style="font-size:0.8em;">Pieni linkki</a>

Esimerkki 2 (inline-tyylimääre): kuvan reunojen pyöristäminen

Esimerkki 3 (<style>-tägi): usean tekstikappaleen korostaminen taustavärillä

<p class="korostettu">Lorem ipsum</p>
<p>Ei korostettu</p>
<p class="korostettu">Dolor sit amet</p>
<style>
.korostettu{background:#f9ff5a;}
</style>

Lisätietoa tyylimääreistä: CSS How toLinkki avautuu uudessa välilehdessä

Omat skriptimääritykset (JavaScript ja jQuery)

Content-portlettiin voi syöttää sekä <script>-tägiin että elementteihin suoraan JavaScript-koodia. Myös jQuery-komentojen käyttö on mahdollista.

Esimerkki 1 (inline-koodi): Viesti-ikkunan näyttäminen tekstielementtiä klikattaessa

<span onclick="alert('Klikkasit tekstiä!')">Klikattava teksti</span>

Esimerkki 2 (inline-koodi ja jQuery): yksittäisen tekstikappaleen piilotus/näyttäminen tekstielementtiä klikattaessa

<p id="piilotettava">Lorem ipsum dolor sit amet</p>
<p><span onclick="jQuery('#piilotettava').toggle();">Piilota/näytä tekstikappale</span></p>

Esimerkki 3 (<script>-tägi ja jQuery): tekstikappaleiden piilotus klikattaessa

<p class="piilotettava">Lorem ipsum dolor sit amet. Klikkaa ja piilota.</p>
<p class="piilotettava">Lorem ipsum dolor sit amet. Klikkaa ja piilota.</p>
<script>
jQuery(".piilotettava").each(function(index) {
jQuery(this).click(function(){
jQuery(this).hide();
});
});
</script>

Lisätietoa JavaScriptistä: JavaScript TutorialLinkki avautuu uudessa välilehdessä

Lukkari-ohje

Info ja tilat

Tekstin muotoilu

Muotoile teksti näin

Tarkista ainakin seuraavat asiat:

Tekstieditorin painikkeet

Otsikointi

Pääotsikko (h1)

Otsikko 2 (h2)

Otsikko 3 (h3)

Otsikko 4 (h4)

Otsikoinnin periaatteet:

Väärä tapa:

ISOSKOULUTUKSET SYKSYLLÄ 2022

Rippikoulun jälkeen voit osallistua kaksivuotiseen isoskoulutukseen. Isoskoulutuksessa tutustut uusiin ihmisiin, saat koulutusta ryhmänvetäjänä toimimiseen ja opit lisää itsestäsi ja Jumalasta.

Ilmoittaudu isoskoulutukseen 31.7.2022 mennessä tästä

Mikä oli pielessä?

Oikea tapa:

Isoskoulutukset syksyllä 2022

Isoseksi lastenleireille

Mitä oli tehty oikein?

Tekstieditorin ikkunan saa suurennettua

Vinkkejä edistyneemmille käyttäjille (kikkakolmoset)

Käytännön vinkkejä

Omat tyylimääritykset (CSS-tyyliluokat)

Omat skriptimääritykset (JavaScript ja jQuery)

Lukkari-ohje

Tekstin muotoilu

Muotoile teksti näin

Tarkista ainakin seuraavat asiat:

Lukkari-ohje

Evästeet