© 2010 IBM Corporation1 Bannerikaruselli  Bannerikaruselli on sisällönhallinnan komponentti, jolla voidaan laittaa www-sivulla haluttuun kohtaan näkymään.

Esitys aiheesta: "© 2010 IBM Corporation1 Bannerikaruselli  Bannerikaruselli on sisällönhallinnan komponentti, jolla voidaan laittaa www-sivulla haluttuun kohtaan näkymään."— Esityksen transkriptio:

1 © 2010 IBM Corporation1 Bannerikaruselli  Bannerikaruselli on sisällönhallinnan komponentti, jolla voidaan laittaa www-sivulla haluttuun kohtaan näkymään useita erilaisia bannerikuvia. Karusellin kuvat eivät näy samanaikaisesti, vaan kuvat vaihtuvat näkyviin yksi kerrallaan syrjäyttäen näkyvistä edellisen kuvan. Kuvan vaihtuminen tapahtuu www-sivun päivittyessä.  Karusellin kuvat vaihtuvat satunnaisessa järjestyksessä. Karuselli arpoo yhden kuvan näkyviin karuselliä varten www-sivulle lisätyistä kuvista. Toimintatapa on samansuuntainen kuin Hel.fi-sivujen ylälaidan otsikkokuvilla.  Kuvaan voi liittää www-linkin. Samassa karusellissa voi olla useampia kuva-linkki -pareja. Lisäksi yhdellä www-sivulla voi olla 5 bannerikarusellia.  Jokainen bannerikuva voi olla yksilöllisen kokoinen. Samassa karusellissa kannattaa kuitenkin käyttää samankokoisia kuvia ja muistaa www-sivulle asemoidut palstarajat. Liian iso kuva voi rikkoa www-sivun ulkoasun.  Bannerikarusellin luomisessa on 3 vaihetta: 1.Lisätään www-sivulle paikat karusellin kuville ja linkeille eli kuva- ja linkkielementit 2.Lisätään paikkoihin halutut kuvat ja linkit 3.Lisätään lopuksi varsinainen karusellikomponentti www-sivulle haluttuun paikkaan esimerkiksi sisältötekstikenttään tai lisätietolaatikkoon.

2 © 2010 IBM Corporation2 Bannerikarusellin elementit, rakennuspalkat  Toisin kuin otsikkokuville, bannerikaruselleille ja sen käyttämille elementeille ei ole toistaiseksi määritelty valmiita paikkoja www-sivujen pohjissa eli ns. luontimallipohjissa. Siitä syystä karuselli ja sen käyttöön liittyvät elementit täytyy lisätä käsin www-sivulle.  Bannerikarusellissa käytetään kirjastoon tallennettuja kuvakomponentteja. Jokaista kuvakomponenttia varten sivupohjaan lisätään yksi elementti, johon määritellään kuva ja linkki.  Elementtien lisäämisessä tulee noudattaa tiettyä nimeämiskäytäntöä, koska www- sivulla voi olla useampia karuselleja, tulee elementeissä määritellä, mihin karuselliin tietyt kuvat ja linkit kuuluvat. –Kuvakomponentteja käytettäessä: KaruselliXBanneriY, missä X on karusellin numero ja Y osoittaa monesko karusellin kuva. HUOM! Linkkipaikka sisältyy jo kuvakomponenttiin. –Kirjoitusmuotojen on oltava samat, vain numerot vaihtuvat. Jos kirjoitusmuoto on erilainen, kuva ei näy karusellissa.  Elementtien nimet liittyvät aina vain kyseiseen www-sivuun, jonne ne ovat lisätty. Tällöin kahdella eri www-sivulla voi kuitenkin olla samalla tavalla nimetyt elementit. Esim. etusivulla elementit on nimetty Karuselli1Banneri1, Karuselli1Banneri2, Karuselli1Banneri3 ja yhteystietosivulla myös Karuselli1Banneri1, Karuselli1Banneri2 jne. silti karuselli toimii.  Karusellikomponentti, joka käyttää elementtejä, sijaitsee common-kirjastossa.

3 © 2010 IBM Corporation3 Kuvakomponenttien käyttäminen bannerikarusellissa 1/3  Tee kuvakomponentit valmiiksi viraston kirjastoon.  Avaa www-sivu, johon karuselli halutaan.  Lisätään www-sivulle paikat karusellissa käytettäville kuvakomponenteille. Paina Elementtien hallinta.  Valitse kuvakomponenttia varten elementtilajiksi: Linkki.  Nimeä elementti: KaruselliXBanneriY, jossa X on karusellin ja Y on bannerin järjestysnumero. Muista sama kirjoitusmuoto, vain numerot vaihtuvat. Kopioi sama teksti myös näyttöalueen otsikoksi.  Paina Lisää ja elementti ilmestyy alapuoliseen elementtilistaan.  Toista elementin lisääminen niin monta kertaa kuin tarvitset kuvia karuselliin. Jokaista kuvaa varten täytyy olla yksi elementti.  Paina OK.  Tallenna sivu. 3

4 © 2010 IBM Corporation4 Kuvakomponenttien käyttäminen bannerikarusellissa 2/3  Sisältöön (www-sivupohjaan) on ilmestynyt elementti, johon pitää lisätä sisältö.  Jos kuvaan liitetään linkki, jonka kohteena on www- sivu, valitse linkkityypiksi Ulkoinen URL-osoite ja lisää www-osoite sille varattuun tekstikenttään. Absoluuttinen osoite portaalin ulkopuolisia (http://www.helsinkikanava.fi ) ja suhteellinen (/hki/helsinki/fi/Palvelut/Liikunta+ja+ulkoilu) Hel.fi-portaalin sivuja varten.  Täytä vain alla mainitut kohdat, muihin asetuksiin ei tarvitse koskea.  Linkin näyttömuoto on kuvakomponentti.  Valitse kuva -näppäimellä kuva selataan sisällönhallinnan kuvakomponenttikirjastosta.  Linkin kohde Ei mitään -valinta avaa linkin samaan ikkunaan (kohde Hel.fi-portaalissa) ja Uusi ikkuna - valinta uuteen (kohde muualla kuin Hel.fi-portaalissa, ulkoisilla www-sivuilla).  Tallenna sivu. 4

5 © 2010 IBM Corporation5 Kuvakomponenttien käyttäminen bannerikarusellissa 3/3  Jos kuvaan liitettävän linkin kohde onkin sisällönhallinnassa oleva tiedosto: Linkkityypiksi valitaan Sisältö, tiedosto tai kuva.  Avautuu näkymä, jossa paina Valitse sisältö, tiedosto tai kuva.  Avautuu näkymä, jonka Linkkityyppi -alas- vetovalikosta valitaan Tiedosto, koska vain tiedostokomponenttien käyttö on tuettu. Selataan valittava tiedosto viraston omasta tai common- kirjastosta ja painetaan OK.  Täytä vain alla mainitut kohdat, muihin asetuksiin ei tarvitse koskea.  Linkin näyttömuoto on kuvakomponentti.  Valitse kuva -näppäimellä kuva selataan sisällönhallinnan kuvakomponenttikirjastosta.  Linkin kohde Ei mitään -valinta avaa linkin samaan ikkunaan (kohde Hel.fi-portaalissa) ja Uusi ikkuna -valinta uuteen (kohde muualla kuin Hel.fi-portaalissa, ulkoisilla www-sivuilla).  Tallenna sivu. 5

6 © 2010 IBM Corporation6 Karusellikomponentin lisääminen www-sivulle sisältöön  Kun tarvittavat elementit bannerikuville on tallennettu www-sivuun valmiiksi, voidaan sivulle lisätä niitä käyttävä kuvakaruselli.  Avaa www-sivun tekstin sisältökenttä editoriin muokattavaksi  Valitaan Lisää-painikkeen alasvetovalikosta Bannerikaruselli ja valitse avautuvasta Pop Up -näkymästä karuselli 1-5, riippuen siitä minkä karusellin kuvat ja linkit halutaan ilmestymään kyseiseen paikkaan ja painetaan Lisää.  Tallenna www-sivu.  Varmista karusellin toimivuus ja kuvien asettuminen esikatselun (hkistaging) kautta.  Jos haluat lisätä bannerikarusellin muualle kuin sisältökenttään voi html-koodin puolella viitata: loppunumero on vaihdettavissa 1-5 välillä.  Esimerkki bannerikarusellin muusta sijoituspaikasta on useimpien virastojen etusivuilla oikeassa laidassa olevat ns. pikalinkit-alue.  Muista tallentaa www-sivu ajoittain eri vaiheissa, kun etenet karusellin lisäämisprosessissa.