Esimerkki Portalview-sivun rakentamisesta

Halutaan luoda uusi Portalview-sivu, tässä esimerkissä Yliopistopalveluille. Suunnitelmana olisi tehdä sivu, jossa on vaihtuvilla kuvilla varustettu karuselli sekä päällekkäisiä sarakkeita, paljolti JY:n kauppakorkeakoulun tyyliin.

Entisiin sivuihin ei haluta luontivaiheessa koskea, joten aloitetaan luomalla uutta sivuprojektia varten testikansio sopivan syrjäiseen paikkaan. Määritellään myös kansio yksityiseksi, jolloin se ei näy koko maailmalle.

Portaalinäkymän luominen

1. Aloitetaan etsiytymällä em. juuri luotuun kansioon ja valitsemalla ”Lisää uusi…”-valikon alta ”Portaalinäkymä”. Avautuvaan ”Lisää Portaalinäkymä”-sivuun laitetaan tiedot kuten yleensäkin uutta sivua luotaessa. Tuloksena on vastaluotu portaali oletusasetuksilla:

2. Oletuksena uudessa portaalissa on siis neljä saraketta, jonka kunkin leveys on 25%. Eräs selkeä tapa rakentaa Portalview-sivuja on kuitenkin aloittaa kahdesta sarakkeessa, joille sitten laitetaan sisäkkäisiä sarakkeita. Yleisohjeessa on esitelty myös kolmen sarakkeen sivurakenne. Seurataan tässä kuitenkin kahden sarakkeen tapaa.

3. Siirrytään siis ”Sisältö”-näkymään, valitaan ”Keski-vasen”- ja ”Keski-oikea”-sarakkeet ja poistetaan ne. Jäljelle jäävät vasen ja oikea sarake. Tällä hetkellä niiden molempien leveys on tosin 25%, joten tulos näyttää tältä:

Sarakkeiden koon muuttaminen

4. Korjataan siis sarakkaiden leveydet valitsemalla kumpikin erikseen. Tämä onnistuu helpoiten sarakkeiden oikeasta yläkulmasta löytyvän sarakekuvakkeen – sen kynäkuvakkeen vieressä sijaitsevan – avulla. Klikataan sarakekuvaketta ja edelleen aukeavasta näkymästä ”Muokkaa”-linkkiä. Valitaan muokkaussivun ”Sarakkeen leveys”-kohdasta vasemman sarakkeen leveydeksi 80% ja oikean 20%, jolloin saadaan sivu näyttämään seuraavalta:

Karusellin lisääminen

5. Vasemman sarakkeen sisälle halutaan erillinen sarake karusellibanneria varten, joten valitaan vasen sarake ja lisätään uusi sarake nimellä ”karuselli”. Siis: Vasen sarake, ”Lisää uusi…”, ”Sarake”. Sarakkeen leveydeksi asetetaan  100%, koska halutaan karusellin leveyden olevan 100% vasemman sarakkeen leveydestä. Luodaan sarakkeeseen karuselli käyttäen ”Vaihtuva sisältö”-sisältötyyppiä (joka löytyy "Lisää uusi..."-valikon kautta - katso PortalViewin karuselliohjeet). Sivu näyttää nyt esimerkiksi tältä:

(kuvassa näkyvä karusellikuva olisi viisasta editoida leveämmäksi, niin sen oikealle puolelle ei jäisi tyhjää tilaa – mutta sen voi tehdä lopullista versiota varten, samalla kun lisää muitakin kuvia karuselliin)

6. Seuraavaksi jaetaan karusellikuvan alapuolella oleva sarake kahteen osaan, joihin halutaan sijoittaa toisiinsa liittymätöntä sisältöä. Tämä tapahtuu lisäämällä karusellin alla näkyvään ”Vasen sarake”-nimiseen sarakkeeseen kaksi saraketta, jotka voidaan nimetä halutulla tavalla. Kummankin leveydeksi tulee 50%, siis puolet karusellin leveydestä. Sarakkeen sisältä löytyvä ”Vasen sarake”-niminen tyhjä esimerkkisivu kannattaa kuitenkin poistaa, jotta se ei jää turhaan esiin kummittelemaan (poistamisen jälkeen koko sarake häviää näkyvistä, mitä ei kannata säikähtää - täysin tyhjiä sarakkeita ei oletuksena näytetä).

Kokoelmat ja välilehtinäkymä

7. Lisätään äsken luoduista sarakkeista vasemmanpuoleiseen kolme erillistä kokoelmaa uutisia. Sivu näyttäisi lisäämisen jälkeen esimerkiksi tältä:

8. Huomataan, että kolmas kokoelma ei mahdu näytölle. Tuumataan, että kokoelmien sisältö olisi mukava saada näkymään välilehdillä. Tämä onnistuu muokkaamalla kokoelmat sisältävää saraketta (sarakkeen oikean kulman sarake-kuvake, "Muokkaa"-välilehti) ja vaihtamalla ”Näytä sisältö”-kohdan valinnaksi ”Välilehdillä”. Nyt sivu näyttää tältä:

Tavalliset sivut sarakkeessa

9. Uutispalstan oikealle puolelle karusellin alle halutaan tavallisista linkeistä koostuva kenttä. Tähän riittää tavallisen sivun lisääminen kohdassa 6 luotuun oikeanpuoleiseen sarakkeeseen, johon voi sitten lisätä linkit normaalisti. Tulos näyttää tältä:

(Jos linkkisarakkeesta haluttaisiin enemmän uutissarakkeen näköinen, pitäisi valita myös linkkisarakkeen ”Näytä sisältö”-asetukseksi valita ”Välilehdillä”, jolloin ”Linkkejä”-teksti nousisi pois varsinaisesta tekstikentästä välilehden nimeksi. Jos linkkisarakkeeseen lisäisi sitten useampia sivuja, kustakin sivusta muodostuisi erillinen välilehti.)

HUOM! Älä missään tilanteessa laita välilyöntejä tiedostonimiin/tunnisteisiin. Haitarit ja välilehdet eivät toimi tällöin.

Haitarinäkymä

10. Sivun oikeakin laita halutaan käyttää hyödyksi, joten lisätään Oikeaan sarakkeeseen kolme sivua, jotka sisältävät linkkejä. Tämä onnistuu samalla tavoin kuin kohdassa 5 lisättiin sarake ja kohdassa 7 kokoelmat. Tuloksena on samantyyppinen näkymä kuin kohdassa 7.

11. Jos oikealle lisätyt linkkisivut olisivat pidempiä, ne saattaisi tehdä mieli esittää haitarimuodossa. Haitarimuodossa ainoastaan ylin sivu on kokonaan näkyvissä, muista sivuista näkyy vain otsikko, jota klikattaessa linkkisivu laajenee kokonaan näkyväksi. Haitarimuodon käyttöönotto käy samoin kuin kohdan 8 ”Välilehdillä”-muodon: ”Näytä sisältö”-pudotusvalikosta löytyy siis kohta ”Haitarina”. Tulos näyttää siis lopulta tältä:

Lisähuomioita

• Oikeaan sarakkeeseen voisi vielä halutessaan lisätä asiaa, samoin esimerkiksi vaikkapa linkkisarakkeen alle toisen linkkilistan. Toista linkkilistaa varten ei tarvitse tehdä lisää sarakkeita, riittää kun lisää kohdassa 6 luotuun oikeanpuoleiseen sarakkeeseen uuden sivun.
• Sarakkeiden sisällön järjestystä (tässä esimerkiksi oikean reunan sarakkeen linkkisivuja) voi järjestellä sisältönäkymässä. Sarakkeen sisältönäkymään pääsee kätevimmin sarakkeen oikean yläkulman kuvaketta klikkaamalla - ei siis kynää, vaan sitä toista.
• Älä missään tilanteessa laita välilyöntejä tiedostonimiin/tunnisteisiin. Haitarit ja välilehdet eivät toimi tällöin.