Sivun muokkaaminen
Opiportal 3:n sisältöeditori perustuu avoimen lähdekoodin CKEditoriin. Voit tutustua CKEditorin toimintoihin ja demoon CKEditorin sivuilla (englanninkielinen sivusto).
1. Muokattavan sivun valitseminen
- Muokattavan sivun voi valita kahdella eri tavalla:
- A: Kun olet sisältöeditorin puolella, niin klikkaa muokattavaa sivua valikosta. Sivu aukeaa editoriin muokattavaksi. HUOM! Jos sivua ei löydy suoraan valikosta, niin katso kohta B.
- B: Klikkaa "Toiminnot" -linkin oikealta puolelta "Muokkaa" -linkkiä. Linkistä aukeaa lista kaikista sivuston sivuista. Klikkaa sivun nimeä listasta, jolloin se aukeaa muokkaustilaan.
2. Tekstin muokkaaminen
- Klikkaa sisältöaluetta, jonka sisältöä haluat muokata (sisältöalueeseen ilmestyy punainen kehys ja työkalupalkki).
- Tämän jälkeen voit muokata sisältöä kuten tekstinkäsittelyohjelmassa.
- Sisältöeditorissa toimii kaikki yleisimmät näppäinyhdistelmät:
- Ctrl+Z - peruuta muutos
- Ctrl+Y - tee muutos uudelleen
- Ctrl+X - leikkaa valittu sisältö leikepöydälle
- Ctrl+C - kopioi valittu sisältö
- Ctrl+V - liitä sisältöä leikepöydältä
- Ctrl+A - valitse koko sisältö
- Ctrl+B - lihavoi valittu teksti
- Ctrl+I - kursivoi valittu teksti
- Ctrl+U - alleviivaa valittu teksti
- Ctrl+L - lisää linkki valittuun tekstiin tai kuvaan
- Näppäinyhdistelmien toiminnot löytyvät myös sisältöeditorin työkalupalkista.
- Voit katsoa kaikki näppäinyhdistelmät täältä (englanninkielinen ohje).
- Tekstin muotoiluun löytyy kattavat työkalut joista voit lukea lisää täältä ja täältä (englanninkielinen ohje).
3. Linkkien lisääminen/muokkaaminen
- Kun olet sisältöeditorissa valitse joko linkitettävä teksti tai kuva.
- Klikkaa työkalupalkista "Lisää linkki/muokkaa linkkiä" -kuvaketta tai paina Ctrl+L.
- Yleisimpiä linkkejä ovat:
- Ulkoiset linkit:
Jos haluat luoda linkin ulkoiseen sivustoon, niin kirjoita tai kopioi osoite "Osoite" -kenttään.
- Sivuston sisäiset linkit:
Klikkaa "Hae sivu" -painiketta ja valitse linkitettävä sivu uuteen ikkunaan aukeavasta listasta. Muista valita "Protokolla" -kohdasta "<muu>" -vaihtoehto.
- Liitetiedosto:
Mikäli olet lisäämässä esim. pdf-tiedostoa, niin klikkaa "Hae tiedosto" -painiketta. Etsi linkitettävä tiedosto Mediapankista ja klikkaa sen alla olevaa vihreää "nuoli" -painiketta tai lisää uusi tiedosto. Muista valita "Protokolla" -kohdasta "<muu>" -vaihtoehto.
- Sähköpostiosoite:
Valitse ensin "Linkkityyppi" -alasvetovalikosta "Sähköposti" -vaihtoehto ja kirjoita sähköpostiosoite sen jälkeen "Sähköpostiosoite" -kenttään.
- JOS lisäät ulkoisen linkin tai liitetiedoston:
niin on suositeltavaa, että linkki aukeaa uuteen ikkunaan. Klikkaa ensin ylhäältä "Kohde" -välilehti auki ja valitse "Kohde" -alasvetovalikosta "Uusi ikkuna".
- Kun olet valmis:
klikkaa "OK" -painiketta.
4. Kuvien lisääminen/muokkaaminen
- Jos olet lisäämässä kuvaa:
- A: Raahaa uusi kuva suoraan tietokoneesi työpöydältä tai kansiosta sisältöalueeseen.
- Tämän jälkeen aukeaa vahvistusikkuna, jossa varmistetaan, että haluatko ladata uuden kuvan.
- Kun olet hyväksynyt kuvan lataamisen ja kuva on latautunut, niin aukeaa "Kuvan ominaisuudet" -ikkuna.
- B: Vie kursori siihen kohtaan johon haluat kuvan sijoittaa ja klikkaa työkalupalkista "kuva" -kuvaketta.
- Mikäli olet linkittämässä kuvaa ulkoiselta sivustolta niin kirjoita tai kopioi kuvan osoite "Osoite" -kenttään.
- Jos haluat lisätä uuden kuvan tai hakea kuvan mediapankista, niin klikkaa "Selaa palvelinta" -painiketta.
- Etsi linkitettävä tiedosto Mediapankista ja klikkaa sen alla olevaa vihreää "nuoli" -painiketta tai lisää uusi tiedosto.
- Voit määrittää mm. kuvan koon, kohdistuksen tekstiin nähden ja esim. tilan kuvan ja tekstin välissä. Lue lisää kuvien ominaisuuksista (englanninkielinen ohje).
- Kun olet säätänyt kuvan koon ja muut asetukset, niin klikkaa "OK" -painiketta ja kuva ilmestyy sisältöalueeseen kursorin osoittamaan kohtaan.
- Kun haluat muokata kuvaa:
- Klikkaa ensin muokattavaa kuvaa ja sitten työkalupalkista "Kuva" -kuvaketta tai vie hiiri kuvan päälle ja klikkaa hiiren oikealla kuvaa. Valitse aukeavasta listasta "Kuvan ominaisuudet" -vaihtoehto.
- Tämän jälkeen voit määrittää mm. kuvan koon, kohdistuksen tekstiin nähden ja esim. tilan kuvan ja tekstin välissä. Lue lisää kuvien ominaisuuksista (englanninkielinen ohje).
5. Slideshow:n lisääminen/muokkaaminen
- Kun haluat lisätä uuden slideshown:
- Vie hiiren kursori kohtaan, jonne haluat lisätä slideshown.
- Klikkaa työkalupalkista "Lisää / muokkaa slideshowta" -kuvaketta.
- Määritä ensin kuvien vaihtumisväli (sekunneissa), slideshown leveys ja korkeus.
- Klikkaa "kuvat" -kohdasta "Hae kuva" -painiketta ja valitse Mediapankista haluamasi kuva. Toista toimenpide kunnes olet lisännyt kaikki haluamasi kuvat. HUOM! suositeltava kuvien määrä on maksimissaan 3-5 kpl.
- Kun olet valinnut kuvat, niin voit vielä vaihtaa niiden järjestystä "Ylös" ja "Alas" -painikkeista.
- Klikkaa lopuksi "OK" -painikketta.
- Kun haluat muokata slideshowta:
- Klikkaa sisältöalueessa näkyvää slideshow -kehystä ja sen jälkeen työkalupalkista "Lisää / muokkaa slideshowta" -kuvaketta tai klikkaa kehystä hiiren oikealla ja valitse "Muokkaa slideshowta".
- Tee haluamasi muutokset ja klikkaa "OK" -painiketta.
6. Google Maps -kartan lisääminen/muokkaaminen
- Kun haluat lisätä uuden kartan:
- Vie hiiren kursori kohtaan, jonne haluat lisätä kartan.
- Klikkaa työkalupalkista "Lisää Google Maps kartta" -kuvaketta.
- Syötä osoite, jonka haluat näkyvän kartassa sekä kartan leveys ja korkeus.
- Lopuksi klikkaa "OK" -painiketta ja tallenna sivun muutokset.
- Kun haluat muokata karttaa:
- Klikkaa kartan kuvaketta sisältöalueessa ja valitse työkalupalkista "IFrame-kehys" -kuvaketta tai klikkaa kehystä hiiren oikealla ja valitse "Muokkaa IFrame-kehystä".
- Tee haluamasi muutokset ja klikkaa "OK" -painiketta.
7. Sivupohjan lisääminen
- Vie hiiren kursori kohtaan, jonne haluat lisätä sivupohjan.
- Klikkaa työkalupalkista "Pohjat" -kuvaketta.
- Etsi listasta haluamasi pohja ja klikkaa sitä. Pohja ilmestyy tämän jälkeen sisältöalueeseen.
- HUOM! jos haluat korvata pohjalla vanhan sisällön, niin ruksaa "Pohjat" -ikkunassa "Korvaa koko sisältö" -ruksi.
8. QR-koodin lisääminen
- Vie hiiren kursori kohtaan, jonne haluat lisätä QR-koodin.
- Klikkaa työkalupalkista "QR-koodi" -kuvaketta.
- Syötä ensin osoite tai merkkijono, josta haluat luoda QR-koodin.
- Määritä myös kuvan koko. Huom! leveys ja korkeus ovat aina identtisiä.
- Lopuksi klikkaa "OK" -painiketta jolloin QR-koodi ilmestyy sisältöalueeseen.
- Huom! jos haluat vaihtaa koodia, niin sinun täytyy ensin poistaa vanha klikkaamalla koodikuvaa ja painamalla joko "Delete" tai "Backspace" -näppäintä.
9. Facebook -liitännäisen lisääminen
- Kirjaudu Facebook-palveluun perinteiseen tapaan.
- Mene Facebook Developers -sivuille tästä linkistä, josta näet listan saatavilla olevista liitännäisistä.
- Valitse omaan käyttöösi soveltuva liitännäinen "Yhteisöliitännäiset (eng. Social Plugins)" kategoriasta.
- Täytä tarvittavat asetukset muokataksesi liitännäistä omiin tarpeisiisi ja asettaaksesi liitännäisen toimimaan oman Facebook sivusi yhteydessä.
- Paina "Get Code" -painiketta ja valitse tästä aukenevasta ikkunasta "IFRAME", josta kopioit palvelun tarjoaman koodin leikepöydälle.
- Siirry verkkosivujesi ylläpitonäkymään ja luo haluamallesi sivulle uusi elementti. Mikäli kyseessä on esim. sivupalkissa, jokaisella sivulla näkyväksi haluttu elementti, voi tämän valita näkyväksi kaikilla sivuilla elementtiä lisätessä.
- Muokkaa elementtiä ja valitse työkalupalkista "Koodi", liitä tänne Facebook -liitännäisen iFrame koodi ja paina "OK".
- Tallenna sivu ja käy katsomassa miten liitännäinen sivuillesi istuu, ja että se näkyy oikein.
Liitännäisten yleiset asetukset ja määritteet
Facebook Page URL - Tähän tulee Facebook sivujesi URL-osoite.
Width - Tämä asettaa liitännäisen leveyden, jonka arvo asetetaan pikseleissä.
Height - Tämä asettaa liitännäisen korkeuden.
Color Scheme - Tästä voit valita liitännäisen väriteeman.
Huomioitavaa
Esikatselu ei välttämättä näytä iFrame-elementtejä oikein. Tämä tila saattaa näyttää virheellistä tietoa, vääristyneitä liitännäisiä tai jäädä ihan kokonaan tyhjäksi, jonka takia on suositeltavaa Tallentaa sivu esikatselun sijasta.