(Yhtä välissä olevaa versiota samalta käyttäjältä ei näytetä)
Rivi 1:
Rivi 1:
Verkkosivujen tekeminen helpottuu ja nopeutuu huomattavasti, jos käytössä on valmiita sivupohjia. Sivupohjien avulla sivuston ulkonäkön suunnittelu voidaan erottaa johdonmukaisesti sen sisällöstä. Tässä ohjeessa tutustutaan esimerkin avulla helppoon tapaan tehdä omia sivupohjia.
Verkkosivujen tekeminen helpottuu ja nopeutuu huomattavasti, jos käytössä on valmiita sivupohjia. Sivupohjien avulla sivuston ulkonäkön suunnittelu voidaan erottaa johdonmukaisesti sen sisällöstä. Tässä ohjeessa tutustutaan esimerkin avulla helppoon tapaan tehdä omia sivupohjia [[Nvu]]:n avulla.
== Johdanto ==
== Johdanto ==
Nykyinen versio 23. toukokuuta 2010 kello 15.08
Verkkosivujen tekeminen helpottuu ja nopeutuu huomattavasti, jos käytössä on valmiita sivupohjia. Sivupohjien avulla sivuston ulkonäkön suunnittelu voidaan erottaa johdonmukaisesti sen sisällöstä. Tässä ohjeessa tutustutaan esimerkin avulla helppoon tapaan tehdä omia sivupohjia Nvu:n avulla.
Sivupohjien avulla omien sivustojen tekemistä voidaan helpottaa etenkin ulkoasua lisättäessä. Ohjeen soveltamiseksi suositellaan kokemusta tietokoneiden käytöstä ja yleisten työpöytäohjelmistojen hallintaa. Myös edellisviikon NVU ohjeeseen, jossa tarkasteltiin NVU:n yleisimpiä ominaisuuksia, kannattaa tutustua.
Tässä ohjeessa tehtävän sivun asettelu perustuu taulukoiden käyttämiseen sivun eri osien sijaintien määrittelyyn. Nykyään sivustojen ulkoasun määrittämiseen suositeltavampi tapa olisi käyttää niin sanottuja CSS-tyylisivuja. Tässä ohjeessa niitä ei kuitenkaan käytetä, koska niiden tekeminen olisi hieman työläänpää ja hitaampaa sekä vaatisi syvällisempää tutustumista sekä HTML- että CSS- merkkauskielten hallintaan. Ohjeessa käytettävää taulukoilla tehtävää asettelua voidaan kuitenkin hyvin käyttää esimerkiksi pienimuotoisilla omilla kotisivuilla.
Nyt tehtävässä sivumallissa ei oteta vielä kantaa sivuston sisältöön muuta kuin aihealueittain. Nyt tehtävää sivumallia hyödynnetään viikon kuluttua julkaistavassa oppaassa, jossa sivumallin avulla tehdään pieni sivusto.
Huom! NVU:n kehitystyö on pysähtynyt ja sitä on jatkettu Kompozer nimisenä projektina. Kompozerissa on kuitenkin havaittu toiminnan epävakautta ja lisäksi myös sen kehitystyö on sittemmin keskeytynyt joten Linuxkouluun.fi -ohjeet keskittyvät edelleen NVU:hun. Ohjeita voidaan kuitenkin hyödyntää suurimmaksi osaksi myös Kompozeria käytettäessä.
Tyylipohjien tekeminen voidaan aloittaa käynnistämällä NVU ja lataamalla esimerkissä käytettävä materiaali ohjeen viimeisestä kappaleesta löytyvistä linkeistä.
Kun NVU on käynnistetty perustilaan, voidaan sivuille antaa ensimmäisenä perustiedot, asettaa sivulle sopiva taustakuva ja tallentaa tyhjä sivu sopivaan kansioon. Kaikki sivuille tuleva materiaali kannattaa tästä lähtien sijoittaa samaan kansioon.
Perustietojen syöttämisen jälkeen sivumalli tallennetaan omaan kansioon. Kansion tulisi olla sellainen että sinne kasataan kaikki sivulle tulevat tiedostot ja kuvat.
Valitse Tiedosto > "Tallenna nimellä..."
Valitse tai tee kansio jonne kaikki sivuja koskevat tiedostot voidan tallentaa.
Tallenna mallipohja tähän hakemistoon ja tarkasta että tiedostotyyppinä on HTML-mallit
Seuraavaksi kannattaa hakea ohjeen viimeisen kappaleen linkkien mukaiset materiaalit ja tallentaa ne samaan kansioon.
Sivujen sisältö tullaan asettelemaan taulukon solujen sisään. Taulukoiden avulla sivun eri elementit saadaan helposti aseteltua halutuille paikoille. Esimerkkissä sivuille tehdään kaksisoluinen taulukko, joista ylempään soluun lisätään sivuston otsikkokuva ja toiseen sivuston eri sivujen väliseen siirtymiseen tarkoitettu navigointi ja itse sivun sisältöteksti.
Taulukon lisääminen tehdään seuraavasti.
Valitse Lisää > Taulukko...
Valitse taulukon kooksi 2x1
Nyt taulukko on lisätty sivupohjalle ja sen tulisi näyttää seuraavalta.
Poista taulukolta näkyvät reunukset tyhjentämällä Reunus, Välitys ja Täyte -kentät
Valitse taulukon tasaukseksi Keskitetty
Nyt taulukon asetukset ovat valmiit. Sivun reunoilla on nyt ikkunan koon suhteen muutuvat marginaalit ja itse taulukko on näkymättömänä taustalla ja siihen voidaan aloittaa lisäämään sivustolle tulevia elementtejä.
Syötä kohtaan Heksadesimaali seuraava värikoodi #DEB86D
Napsauta OK
Nyt otsikkosoluun on syötetty sopiva taustaväri ja siihen voidaan lisätä sopiva kuva.
Valitse Lisää > Kuva...
Tarkasta että olet Sijainti -välilehdellä
Valitse lisättävä kuva napsauttamalla "Valitse kuva..." -painiketta. Esimerkissä käytetty kuva on otsikko.jpg
Syötä kuvalle vaihtoehtoinen teksti, joka näkyy selaimissa joissa kuvien lataaminen on estetty. Esimerkissä tekstinä on "Pingviinin omat sivut"
Napsauta OK
Nyt sivujen otsikkokenttä on valmis. Asetetulla taustavärillä mahdollistettiin se että internet-selainikkunan kokoa voidaan vapaasti vaihdella ilman että otsikko kentän ulkonäkö rikkoutuu. Nyt näyttää ikäänkuin käytetty kuva jatkuisi koko otsikon leveydeltä, vaikka itseasiassa kuva on pelkästää väriliukuna otsikon vasemmassa reunassa ja taustaväri näkyy jatkeena sen oikeassa reunassa.
Sivunavigoinnin avulla voidaan siirtyä helposti sivuston eri sivujen välillä. Ensikerralla toteutettavaan sivujen sisältöön tehdään sivustolle kolme erilaista sivua. Nämä ovat pääsivu, linkkisivu ja harrastukset-sivu.
Valitse taulukon alempi solu napsauttamalla sitä hiirellä
Lisää siihen kolme rivin vaihtoa painamalla Enter-näppäintä
Siirrä tekstikursori takaisin ylimmälle riville
Lisää ylimälle tekstiriville riville seuraava teksti: Pääsivu | Harrastukset | Linkit
Maalaa hiirellä juuri lisätty tekstirivi
Muuta kirjasintyyppiä valitsemalla Muotoile > Kirjasinlaji > sans-serif
Seuraavaksi lisätään sivupohjaan tekstialue johon eri sivujen varsinainen sisältö lisätään. Tekstialue tehdään yhdestä uudesta taulukosta joka sijoitetaan samaan alueeseen navigoinnin kanssa.
Lopuksi määritetään sivupohjaan alue jota voidaan jatkossa muokata. Tällöin sivupohjan muita asetuksia ei voi vahingossa muokata vaan sisältöä voidaan lisätä pelkästään tiettyyn paikkaan.
Valitse sisällölle edellä tehty kenttä napsauttamalla sitä hiirellä, niin että kursori alkaa vilkkua siinä
Valitse Lisää > Mallit > Lisää muokattava sisältö
Anna muokattavan alueen nimeksi esim. sisältö
Valitse alueen tyypiksi tekstin virtaus
Napsauta OK
[[Kuva:|thumb|250px|none]]
Valmis sivupohja
Nyt sivupohja on tallentamista vaille valmis. Tätä sivupohjaa voidaan käyttää nyt kokonaisen sivuston tekemiseen, jolloin jokainen sivu näyttää samalta, mutta sisältöä voidaan vaihtaa. Nyt sivu voidaan siis tallentaa ja siitä voidaan aloittaa tekemään sivuja. Sivupohjan hyödyntämiseen tutustutaan tarkemmin viikon kuluttua.
Alhaalla olevista linkeistä voidaan ladata esimerkissä käytetyt kuvat sekä valmis mallipohjatiedosto. Tiedostot voidaan ladata samaan kansioon seuraavien vaiheiden mukaisesti. Kaikki tiedostot kannattaa sijoittaa samaan kansioon.
Napsauta alhaalla olevaa tiedostolinkkiä hiiren kakkospainikkeella (yleensä oikeapainike)
Valitse avautuneesta valikosta "Tallenna kohde levylle"
Edellisviikolla tutustuttiin sivupohjien tekemiseen NVU-verkkosivujen teko-ohjelmistolla. Tässä ohjeessa tutustutaan sivupohjien hyödyntämiseen tekemällä kolmesta erillisestä sivusta koostuva pieni verkkosivusto.
Seuraavassa tutustutaan sivupohjien hyödyntämiseen.
Ohjeessa tehtävä esimerkkisivusto ja siinä käytettävät materiaalit ovat ladattavissa ohjeen viimeisessä kappaleessa olevien ohjeiden mukaisesti.
Sivupohjan avaaminen ja tarvittava materiaali[muokkaa]
Sivustolle tullaan tarvitsemaan lisättävänä materiaalina sivuille kuuluvat tekstit ja kuvat. Esimerkissä käytettävät tekstit ja kuvat ovat hyödynnettävissä kokeilua varten.
Sivuston tekeminen aloitetaan luomalla uusi sivu ja valitsemalla käytettävä sivupohja.
Valitse Tiedosto> Uusi...
Valitse "Uusi malliin perustuva dokumentti" aktiiviseksi
Valitse käytettävä mallisivutiedosto napsauttamalla "Valitse tiedosto..." -painiketta
Napsauta avaa
Nyt sivupohja ladataan uuden verkkosivun pohjaksi ja siihen voidaan aloittaa lisäämään sisältöä.
Pääsivu on sivuston sisääntulosivu jossa on sivuston yleinen esittely ja muuta tietoa. Pääsivu tehdään lisäämällä sille sisällöksi tekstiä ja kuva pingviinistä. Sivulle tuleva teksti on avattavissa seuraavasta linkistä josta se voidaan halutessa kopioida suoraan NVU:hun seuraavasti.
Napsauta tästä hiiren kakkospainikkeella ja valitse "Avaa linkki uudessa ikkunassa", vaihtoehtoisesti voit tallentaa tiedoston edellisestä linkistä tai oppaan lopusta ja avata sen erillisellä ohjelmalla.
Maalaa hiirellä tekstistä pääsivulle kuuluva sisältö
Valitse Muokkaa>Kopioi
Siirry takaisin NVU-ikkunaan
Napsauta sisältö -tekstikenttää
Pyyhi pois siinä oleva Sisältö -teksti
Valitse Muokkaa> Liitä
Nyt sivuille tuleva teksti on lisätty pelkistetyssä muodossa ja se tulee muotoilla oikein tyylien avulla. Tyylien asettamiseen on tutustuttu ensimmäisessä NVU -oppaassa.
Pääsivulla on kaksi erilliseksi listaksi tarkoitettua kohtaa, jotka on merkitty *-merkillä. Nämä kohdat merkitään siis listatyylillä ja pyyhitään niiden edestä *-merkki pois.
Maalaa ensimmäinen listakohta
Aseta se luetteloksi napsauttamalla luettelopainiketta
Pyyhi rivien edestä *-merkit pois
Maalaa Uutisia -tekstin alla oleva toinen luettelo
Aseta myös se luetteloksi
Pyyhi rivien edestä *-merkit pois
Lopuksi Luettelossa olevat päivä määrät voidaan vahventaa.
Harrastukset sivu tehdään samojen periaatteiden mukaisesti kuin pääsivukin.
Luo uusi sivu valinnalla Tiedosto>Uusi...
Ota käyttöön sama sivupohjatiedosto ja siirry Esikatselu-tilaan
Sivustolle tulevat tekstit on samassa tekstitiedostossa kuin pääsivunkin. Mikäli ikkuna on jo suljettu sen saa auki samalla tavalla tästä linkistä.
Kopioi Harrastukset sivun sisältö NVU:hun samalla tavalla kuin aiemmin
Muuta kirjasinlajiksi sans-serif
Merkkaa pääotsikko, alaotsikot, kappaletekstit ja listat
Lopuksi sivulle lisätään harrastuksiin liittyvät pienet kuvat. Lisääminen tapahtuu samalla tavalla kuin pääsivulla, siirtämällä kursori otsikon loppuun ja lisäämällä kuva siihen.
Käytä "Lintujen bongaus" -otsikkoon kuvaa lintu.png ja vaihtoehtoisena tekstinä "Kuva linnusta"
Lisättynä linnun kuva voi olla turhan suuri ja sitä pitää pienentää.
Tämä onnistuu kuvan kulmissa olevista pienistä kahvoista.
Vetämällä kahvoista kuvan kokoa voidaan pienentää sopivaksi.
Käytä "Kokkailu"-otsikkoon kuvaa kakku.png ja vaihtoehtoisena tekstinä "Kuva suklakakusta"
Lopuksi sivu tallennetaan nimellä harrastukset.html.
Myös linkit sivu toteuttetaan täysin samalla tavalla kuin edelliset sivut. Sivuilla olevista linkkikohteista tehdään oikeat linkit lisäämällä niihin tiedot linkityksen kohteista.
Aloita uusi dokumentti samasta mallipohjasta ja kopioi siihen sisältö.
Lopuksi sivulle voidaan lisätä jokin kuva antamaan sille väriä. Esimerkissä on lisätty kuvatiedosto apina.png. Tämän jälkeen sivu tallennetaan nimellä linkit.html.
Kun sivut on tallennettu, voidaan niitä kokeilla paikallisesti omalla tietokoneella. Tämä onnistuu lataamalla tallennettu pääsivu-tiedosto (index.html) verkkoselaimessa. Tavallisesti tämä onnistuu seuraavasti.
Käynnistä verkkoselain
Valitse Tiedosto>Avaa tiedosto...
Valitse avattavaksi tiedostoksi tallennettu pääsivu eli index.html
Nyt sivuston tulisi avautua selaimeen ja kaikkien kolmen sivun välillä voidaan siirtyä.
Seuraava vaihe olisi verkkosivujen julkaiseminen Internetissä ja tähän aiheeseen tutustumme lyhyesti ensiviikon artikkelissa.
Alhaalla olevista linkeistä voidaan ladata esimerkissä käytetty kuvat, teksti ja valmiit sivut. Tiedostot tulisi ladata samaan kansioon seuraavien vaiheiden mukaisesti.
Napsauta alhaalla olevaa tiedostolinkkiä hiiren kakkospainikkeella (yleensä oikeapainike)
Valitse avautuneesta valikosta "Tallenna kohde levylle"
Esimerkissä käytettävät kuvat löytyvät Open Clip Art -arkistosta ja ne ovat julkaistu Public Domainina. Kuvien piirtäjinä ovat toimineet: Nicu Buculei, Architetto Francesco Rollandin, Valessio Soares de Brito ja clemente.
