© 2010 IBM Corporation1 Etusivun muokkaaminen  Portaalisivut ja niihin määritetyt komponentit muodostavat varsinaiset internet-sivut.  Etusivu muodostuu neljästä alueesta –Otsikkokuva + hakulaatikko • Nämä pitävät sisällään otsikkomalli esitysmallipohjan ja hakulaatikko html-komponentin. –Vasen päänavigaation muodostuu navigaattoreista ja ne yhteen kokoavasta HTML-komponentista. –HTML/valikkokomponentit kokoavat sivun keskiosan ja oikean laidan • Valikkokomponentit rakentavat uutiset etusivun keskiosaan • Pikalinkit ovat HTML-komponentteja ja niiden alapuolella olevat osa-alueet ovat yleensä joko HTML- tai valikkokomponentteja –Etusivun ala-laatikko on HTML-komponentti, joka voi pitää sisällään muita komponentteja.  Etusivun muokkaus tapahtuu pääsääntöisesti muokkaamalla komponentteja, joista etusivu rakentuu.

© 2010 IBM Corporation2 Etusivun muokkaaminen  Virastojen otsikkokuva ja hakulaatikko muodostavat sivun yläosan –Se rakentuu virasto_otsikkomalli esitysmallipohjasta, josta löytyy komponenttiviittaus Virasto_haku HTML-komponentiin. • HTML-hakukomponentti pitää sisällään hakuosuuden tekstit ja linkit • Kalenteri ja kello komponentteihin löytyy viittaukset esitysmallipohjasta.  Näitä objekteja muuttamalla voidaan vaikuttaa esimerkiksi hakulaatikon ulkonäköön.

© 2010 IBM Corporation3 Etusivun muokkaaminen  Virastojen vasen päänavigaatio rakentuu Virasto_nav_vasen HTML-komponentista, joka kokoaan yhteen varsinaisen navigaation navigaattorikomponenteista. –Oikealla olevassa esimerkissä on käytetty neljää navigaattoria. • Virasto_nav_vasen_1 • Virasto_nav_vasen_2 • Virasto_nav_vasen_3 • Virasto_nav_vasen_4  Päänavigaation alle voidaan lisätä muita komponentteja.  Tässä HTML-komponentilla muodostetaan Palvelujen hakulaatikko.

© 2010 IBM Corporation4 Etusivun muokkaaminen  Etusivun keskiosa ja oikealaita muodostuu useista komponenteista.  Virastojen etusivu-sisällössä on määritettynä HTML-komponentti, joka rakentaa sivun.  Tässä esimerkissä se on ’Helsinki_paasivu’, jossa on komponenttiviittaukset varsinaiseen sivun keskiosan ja oikean laidan rakentaviin valikkokomponenttiin. Yleensä virastoilla on käytössä oikeassa laidassa HTML-komponentti. –helsinki_etusivu_uutinen –helsinki_palveluvalikko

© 2010 IBM Corporation5 Etusivun muokkaaminen  Valikkokomponentti ’helsinki_etusivu_uutinen’ tulostaa varsinaisen keskiosan uutislaatikon ja siihen uutisnoston, alaosan otsikon ’Asioi ja osallistu verkossa’ ja sen linkit.  Valikkokomponentti ’helsinki_etusivu_uutinen’ sisältää komponenttiviittauksen valikkokomponenttiin ’helsinki_uutisvalikko’, joka muodostaa etusivulla olevat kolme uutislinkkiä.

© 2010 IBM Corporation6 Etusivun muokkaaminen  Valikkokomponentti ’helsinki_palveluvalikko’ rakentaa oikeaan laitaan ’Helsinki palvelee kun’ laatikon, joka pitää sisällään esiin nostettuja sisältölinkkejä.  Valikkokomponentissa ’helsinki_palveluvalikko’ on komponenttiviittaus ’helsinki_pikalinkit’ HTML- komponenttiin, joka tulostaa sivulle oikeanlaidan pikalinkit ’Matkailu’, ’Sää nyt’ ja ’Työpaikat’. –Pikalinkki HTML-komponentti sisältää siis varsinaiset pikalinkit ja tässä tapauksessa komponenttiviittaukset pikalinkkien alla oleviin bannereihin.

© 2010 IBM Corporation7 Etusivun muokkaaminen  Virastojen etusivun alaosa rakentuu muutamaa poikkeusta lukuun ottamatta ’Virasto_etu_ala’ HTML-komponentista.  Komponentti pitää sisällään laatikossa näkyvät tekstit ja toiminnallisuudet.  ’Virasto_etu_ala’ HTML-komponentista voi olla komponenttiviittauksia myös muihin komponentteihin.

© 2010 IBM Corporation8 Etusivun muokkaaminen  Yksi yleisimmistä etusivulle tehtävistä muutoksista on pikalinkkien päivittäminen.  Pikalinkkien päivittäminen tapahtuu viraston pikalinkki HTML-komponentissa.  Käymme nyt läpi miten etusivulle lisätään uusi pikalinkki. –Avaa virastosi pikalinkkikomponentti auki muokkaustilassa. –Kopio varmuudeksi komponentin koodi HTML-elementistä muistioon( ja tallenna se). –Näin kannattaa tehdä aina, kun komponentteja muokataan, koska silloin virhetilanteessa voimme palauttaa alkuperäisen koodin komponenttiin.

© 2010 IBM Corporation9 Etusivun muokkaaminen  Pikalinkit on jaoteltuina osiin, jossa kerrotaan mistä pikalinkistä on kyse.  Tässä esimerkkinä on ’Matkailu’ pikalinkki, jonka koodi on kommenttien ja sisällä.  koodi jatkuu…….  Kopioi pikalinkin koodiosa kommentit mukaan lukien ja liitä se varsinaiseen pikalinkki komponentin koodiin viimeisen pikalinkin jälkeen.  Huom! Virastoilla voi olla pieniä eroavaisuuksia pikalinkkikomponentin koodeissa, joten kopioitua koodia voi joutua hieman muuttamaan.  Muuta kopioituun koodiin uuden pikalinkin tiedot ja tallenna. –Kommentin nimi –Pikalinkin teksti –Hyperlinkit –Pikkukuva • Tätä varten tee uusi kuvakomponentti, jossa on uusi pikkukuva.

© 2010 IBM Corporation10 Etusivun muokkaaminen Uusi pikalinkki

© 2010 IBM Corporation11 Etusivun muokkaaminen  Uusi pikalinkki on nyt tehty ja se on näkyvillä viraston etusivulla.  Voit myös tehdä päivitykset suoraan olemassa olevan pikalinkin päälle muokkaamalla sen koodia.  Pikalinkin voit poistaa kommentoimalla sen esimerkiksi ulos koodista –Pikalinkin alkuun laitetaan <!-- tagi –Koodin loppuun --> tagi.