NVU ja sivupohjien käyttö - Muutoshistoria

213.216.234.112: :

2010-05-23T12:08:05Z

← Vanhempi versio		Versio 23. toukokuuta 2010 kello 15.08
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 [[Nvu]]n avulla.		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 ==

213.216.234.112 (23. toukokuuta 2010 kello 12.07)

2010-05-23T12:07:41Z

← Vanhempi versio		Versio 23. toukokuuta 2010 kello 15.07
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 ==

213.216.234.112 (23. toukokuuta 2010 kello 00.02)

2010-05-23T00:02:34Z

← Vanhempi versio		Versio 23. toukokuuta 2010 kello 03.02
Rivi 511:		Rivi 511:

	[[Luokka:Ohjeet]]		[[Luokka:Ohjeet]]
			[[Luokka:Kehitystyökalut]]

213.216.234.112: luokitus

2010-05-23T00:01:12Z

luokitus

← Vanhempi versio		Versio 23. toukokuuta 2010 kello 03.01
Rivi 508:		Rivi 508:

	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.		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.


			[[Luokka:Ohjeet]]

OpinsysASokero: /* Sivupohjien ottaminen käyttöön */

2010-01-15T08:48:42Z

Sivupohjien ottaminen käyttöön

← Vanhempi versio		Versio 15. tammikuuta 2010 kello 11.48
Rivi 220:		Rivi 220:
	Seuraavassa tutustutaan sivupohjien hyödyntämiseen.		Seuraavassa tutustutaan sivupohjien hyödyntämiseen.

	[[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|~~left~~]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|~~left~~]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|~~left~~]]		[[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|none]] [[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|none]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|none]]

	Ohjeessa tehtävä esimerkkisivusto ja siinä käytettävät materiaalit ovat ladattavissa ohjeen viimeisessä kappaleessa olevien ohjeiden mukaisesti.		Ohjeessa tehtävä esimerkkisivusto ja siinä käytettävät materiaalit ovat ladattavissa ohjeen viimeisessä kappaleessa olevien ohjeiden mukaisesti.

OpinsysASokero: /* Sivupohjien ottaminen käyttöön */

2010-01-15T08:48:08Z

Sivupohjien ottaminen käyttöön

← Vanhempi versio		Versio 15. tammikuuta 2010 kello 11.48
Rivi 220:		Rivi 220:
	Seuraavassa tutustutaan sivupohjien hyödyntämiseen.		Seuraavassa tutustutaan sivupohjien hyödyntämiseen.

	[[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|~~none~~]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|~~none~~]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|~~none~~]]		[[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|left]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|left]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png\|thumb\|250px\|left]]

	Ohjeessa tehtävä esimerkkisivusto ja siinä käytettävät materiaalit ovat ladattavissa ohjeen viimeisessä kappaleessa olevien ohjeiden mukaisesti.		Ohjeessa tehtävä esimerkkisivusto ja siinä käytettävät materiaalit ovat ladattavissa ohjeen viimeisessä kappaleessa olevien ohjeiden mukaisesti.

	== Sivupohjan avaaminen ja tarvittava materiaali ==		== Sivupohjan avaaminen ja tarvittava materiaali ==

OpinsysASokero (15. tammikuuta 2010 kello 08.47)

2010-01-15T08:47:23Z

← Vanhempi versio		Versio 15. tammikuuta 2010 kello 11.47
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.

	== Johdanto ==		== Johdanto ==

OpinsysASokero: Siirto linuxkouluun.fi:stä - Antti Sokero

2010-01-15T08:47:03Z

Siirto linuxkouluun.fi:stä - Antti Sokero

Uusi sivu

''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.''

== Johdanto ==
[[Kuva:1-nvu-sivupohjat-esimerkkisivu.png|thumb|250px|none]]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ä.

== Sivupohjan yleistoimet ==
[[Kuva:2-nvu-sivupohjat-tyhja_nvuikkuna.png|thumb|250px|none]]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.

=== Sivuston perustietojen syöttäminen ===
[[Kuva:3-nvu-sivupohjat-sivun_ominaisuudet.png|thumb|250px|none]]Ensin syötetään sivuille tulevat perustiedot seuraavasti.

* Valitse ''Muotoile > "Sivun otsikko ja ominaisuudet"''
* Syötä ''otsikko''-kentään sivuille otsikko, joka tulee näkymään internet-selaimen yläpalkissa.
* Anna tekijän tiedot
* Valitse raksi kohtaan "''Tämä sivu on malli''"
* Aseta sivun kieleksi tunnus ''fi'' eli ''Suomi''

=== Sivumallin tallentaminen ===
[[Kuva:4-nvu-sivupohjat-sivumalli_tallennus.png|thumb|250px|none]]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.

=== Taustakuvan lisääminen ===
[[Kuva:5-nvu-sivupohjat-sivun_varit.png|thumb|250px|none]]Sivuille asetetaan taustakuva seuraavalla tavalla.

* Valitse ''Muotoile'' ''>'' "''Sivun värit ja tausta...''"
* Valitse taustakuvaksi tarkoitettu tiedosto napsauttamalla "''Valitse tiedosto...''" -painiketta. Esimerkissä käytetty kuva on ''taustakuva.png''
* Tarkasta että kohdassa "''Osoite on suhteellinen''" on raksi

==Sivurakenteen tekeminen==

=== Taulukoiden tekeminen ===
[[Kuva:6-nvu-sivupohjat-taulukoiden_tekeminen.png|thumb|250px|none]]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.

[[Kuva:7-nvu-sivupohjat-taulukon_ulkoasu.png|thumb|250px|none]]

Seuraavaksi taulukon ulkoasua muokataan hieman.

* Napsauta taulukkoa hiiren kakkospainikkeella (oikeakätisille oikea-painike)
* Valitse valikosta ''Taulukonsolu: Ominaisuudet...''

[[Kuva:8-nvu-sivupohjat-valikko_taulukon_ominaisuudet.png|thumb|250px|none]]

* Siirry ''Taulukko'' -välilehdelle
* Aseta Taulukon leveydeksi ''90% ikkunasta''
* Poista taulukolta näkyvät reunukset tyhjentämällä ''Reunus'', ''Välitys'' ja ''Täyte'' -kentät
* Valitse taulukon tasaukseksi ''Keskitetty''

[[Kuva:9-nvu-sivupohjat-taulukon_ominaisuudet.png|thumb|250px|none]]

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ä.

=== Otsikkokuvan lisääminen ===
Sivupohjan otsikkokuvaksi lisätään sopiva mallimateriaalista löytyvä kuva mutta sitä ennen muutetaan otsikkokentän taustaväriä kuvalle sopivaksi.

* Napsauta hiiren kakkospainikkeella taulukon ylempää solua
* Valitse ''Taulukon tai solun taustaväri''

[[Kuva:10-nvu-sivupohjat-taulukon_solun_taustavari.png|thumb|250px|none]]

* Ota rasti pois kohdasta ''Läpinäkyvä''
* Syötä kohtaan ''Heksadesimaali'' seuraava värikoodi ''<nowiki>#DEB86D</nowiki>''
* Napsauta ''OK''

[[Kuva:11-nvu-sivupohjat-taulukon_solun_taustavari_valinta.png|thumb|250px|none]]

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''

[[Kuva:12-nvu-sivupohjat-kuvan_ominaisuudet.png|thumb|250px|none]]

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.

[[Kuva:13-nvu-sivupohjat-otsikko_valmis.png|thumb|250px|none]]

=== Sivunavigoinnin tekeminen ===
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ä

[[Kuva:14-nvu-sivupohjat-navigointi_rivit.png|thumb|250px|none]]

* Lisää siihen kolme rivin vaihtoa painamalla ''Enter''-näppäintä

[[Kuva:15-nvu-sivupohjat-navigointi_rivit_ylin.png|thumb|250px|none]]

* Siirrä tekstikursori takaisin ylimmälle riville
* Lisää ylimälle tekstiriville riville seuraava teksti: ''Pääsivu | Harrastukset | Linkit''

[[Kuva:16-nvu-sivupohjat-navigointi_tekstit.png|thumb|250px|none]]

* Maalaa hiirellä juuri lisätty tekstirivi

[[Kuva:17-nvu-sivupohjat-navigointi_maalattu.png|thumb|250px|none]]

* Muuta kirjasintyyppiä valitsemalla ''Muotoile'' > ''Kirjasinlaji'' > ''sans-serif''

* Lihavoi rivi valitsemalla ''Lihavoi''-pikapainike [[Kuva:18-nvu-sivupohjat-navigointi_maalattu_lihavoi.png|thumb|250px|none]] työkaluriviltä

Seuraavaksi teksteistä tehdään linkit jotka ohjaavat ne oikeille sivuille. Sivuja ei ole vielä tehty mutta niihin viittaavat linkit voidaan jo tehdä.

* Maalaa ensimmäinen sana ''Pääsivu''
* Valitse ''Lisää'' > ''Lisää linkki...''
* Kirjoita linkin osoitteeksi ''index.html''. Huomaa että osoite on kirjoitettu kokonaan pienillä kirjaimilla.

[[Kuva:19-nvu-sivupohjat-navigointi_maalattu_linkin_ominaisuudet.png|thumb|250px|none]]

* Napsauta ''OK''

[[Kuva:20-nvu-sivupohjat-navigointi_linkit_ekavalmis.png|thumb|250px|none]]

Valmis linkki

Toista tämä sama kohdalle harrastukset ja linkit. ''Harrastukset'' -linkin kohteeksi voidaan antaa ''harrastukset.html ''ja ''linkit''-kohdalle ''linkit.html''

[[Kuva:21-nvu-sivupohjat-navigointi_linkit_kaikki.png|thumb|250px|none]]

Kaikki linkit lisätty

Lopuksi voidaan muuttaa alueen pohja vielä sopivamman väriseksi, jotta linkit näkyvät paremmin.

* Napsauta talukon alimmaista solua hiiren kakkospainikkeella
* Valitse "''Taulukon tai solun taustaväri''"
* Aseta värikoodiksi ''Heksadesimaali'' -kohtaan ''<nowiki>#F6E8CE</nowiki>''
* Napsauta ''OK''

[[Kuva:22-nvu-sivupohjat-navigointi_linkit_taustavari.png|thumb|250px|none]]

Valmis linkkirivi

=== Tekstialueen lisääminen ===
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.

* Siirrä kursori alimmalle tekstiriville navigoinnin alapuolelle
* Valitse ''Lisää ''> ''Taulukko...''
* Valitse kooksi ''1x1''

[[Kuva:23-nvu-sivupohjat-tekstialue-taulukko.png|thumb|250px|none]]

* Napsauta lisättyä taulukkoa hiiren kakkospainikkeella ja valitse "''Taulukon solu: ominaisuudet...''"
* Siirry ''Taulukko''-välilehdelle [[Kuva:24-nvu-sivupohjat-tekstialue-taulukko-ominaisuudet.png|thumb|250px|none]]
* Aseta Sarakkeiden leveydeksi ''98%'' solusta
* Poista taulukolta näkyvät reunukset tyhjentämällä ''Reunus'', ''Välitys'' ja ''Täyte'' -kentät
* Aseta Taulukon tasaus ''Keskitetyksi''
* Valitse'' ''taustaväriksi värikoodi ''<nowiki>#F3E4C5. </nowiki>''Lisääminen tapahtuu samalla tavalla kuin ''Taulukoiden tekeminen'' -kappaleessa.
* Napsauta ''OK''

Nyt sisällölle on lisätty oma kenttä johon eri sivujen tekstejä ja kuvia voidaan lisätä.

[[Kuva:25-nvu-sivupohjat-tekstialue-valmis.png|thumb|250px|none]]

=== Muokattavan alueen määrittäminen ===
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ä

[[Kuva:26-nvu-sivupohjat-tekstialue-sisallon_muokkaus.png|thumb|250px|none]]

* 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.

== Esimerkkimateriaalin lataaminen ==
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''"
* Valitse hakemisto mihin tiedosto tallennetaan
* Napsauta ''Tallenna''

# Lataa esimerkissä käytetty ''taustakuva ''[http://materiaali.linuxkouluun.fi/taustakuva.png tästä]
# Lataa esimerkissä käytetty ''otsikkokuva'' [http://materiaali.linuxkouluun.fi/otsikko.jpg tästä]
# Lataa esimerkissä tehty ''mallipohjatiedosto'' [http://materiaali.linuxkouluun.fi/NVU_mallipohja.mzt tästä]

''Edellisviikolla tutustuttiin sivupohjien tekemiseen NVU-verkkosivujen teko-ohjelmistolla. Tässä ohjeessa tutustutaan sivupohjien hyödyntämiseen tekemällä kolmesta erillisestä sivusta koostuva pieni verkkosivusto.''

== Sivupohjien ottaminen käyttöön ==

Seuraavassa tutustutaan sivupohjien hyödyntämiseen.

[[Kuva:1-nvu-sivupohjasta-mallisivu1.png|thumb|250px|none]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png|thumb|250px|none]][[Kuva:1-nvu-sivupohjasta-mallisivu1.png|thumb|250px|none]]

Ohjeessa tehtävä esimerkkisivusto ja siinä käytettävät materiaalit ovat ladattavissa ohjeen viimeisessä kappaleessa olevien ohjeiden mukaisesti.

== Sivupohjan avaaminen ja tarvittava materiaali ==
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

[[Kuva:2-nvu-sivupohjasta-mallisivu2.png|thumb|250px|none]]

* Napsauta ''avaa''

Nyt sivupohja ladataan uuden verkkosivun pohjaksi ja siihen voidaan aloittaa lisäämään sisältöä.

[[Kuva:3-nvu-sivupohjasta-mallisivu3.png|thumb|250px|none]]

== Sisällön lisääminen sivupohjalle ==
Sisällön lisääminen on helpointa tehdä ''esikatselu''-tilassa johon voidaan siirtyä NVU-ikkunan alalaidassa olevasta valikosta.

[[Kuva:4-nvu-sivupohjasta-uusi_dokumentti.png|thumb|250px|none]]

Sivuston sivut tehdään yksikerrallaan käyttämällä valmista mallipohjaa ja syöttämällä siihen sivuille kuuluva sisältö.

=== Pääsivu ===
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 [http://materiaali.linuxkouluun.fi/NVU-sivun_teksti.txt 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ö

[[Kuva:5-nvu-sivupohjasta-ladattu_pohja.png|thumb|250px|none]]

* Valitse ''Muokkaa'' ''>'' ''Kopioi''
* Siirry takaisin NVU-ikkunaan
* Napsauta ''sisältö'' -tekstikenttää

[[Kuva:6-nvu-sivupohjasta-esikatselutila.png|thumb|250px|none]]

* Pyyhi pois siinä oleva ''Sisältö'' -teksti

[[Kuva:7-nvu-sivupohjasta-mallisisalto.png|thumb|250px|none]]

* Valitse'' Muokkaa'' ''> Liitä''

[[Kuva:8-nvu-sivupohjasta-sisallonlisays1.png|thumb|250px|none]]

Nyt sivuille tuleva teksti on lisätty pelkistetyssä muodossa ja se tulee muotoilla oikein tyylien avulla. Tyylien asettamiseen on tutustuttu ensimmäisessä NVU -oppaassa.

==== Fontin asettaminen ====
Ensin lisätyn tekstin kirjasinlajiksi vaihdetaan ''sans-serif'' maalaamalla lisätty teksti.

[[Kuva:9-nvu-sivupohjasta-sisallonlisays2.png|thumb|250px|none]]

Valitaan kirjasinlaji valitsemalla ''Muotoile'' ''> Kirjasinlaji > sans-serif''

==== Pääotsikon lisääminen ====
* Maalaa sivun pääotsikoksi tarkoitettu ensimmäinen rivi

[[Kuva:10-nvu-sivupohjasta-sisallonlisays3.png|thumb|250px|none]]

* Valitse sille tyyliksi ''Otsikko1''

[[Kuva:11-nvu-sivupohjasta-sisallonlisays-fontti.png|thumb|250px|none]]

==== Tekstikappaleiden lisääminen ====
Maalaa ja valitse toisella ja kolmannella rivillä oleville teksteille tyyliksi ''Kappaletyyli.''

[[Kuva:12-nvu-sivupohjasta-sisallonlisays-paaotsikko.png|thumb|250px|none]]

==== Listat ====
Pääsivulla on kaksi erilliseksi listaksi tarkoitettua kohtaa, jotka on merkitty ''<nowiki>*</nowiki>''-merkillä. Nämä kohdat merkitään siis listatyylillä ja pyyhitään niiden edestä ''<nowiki>*</nowiki>''-merkki pois.

* Maalaa ensimmäinen listakohta

[[Kuva:13-nvu-sivupohjasta-sisallonlisays-tyylin_valinta.png|thumb|250px|none]]

* Aseta se luetteloksi napsauttamalla luettelopainiketta

[[Kuva:14-nvu-sivupohjasta-sisallonlisays-tyylin_valinta_kpl.png|thumb|250px|none]]

* Pyyhi rivien edestä ''<nowiki>*</nowiki>''-merkit pois

[[Kuva:15-nvu-sivupohjasta-sisallonlisays-luettelo_maalattu.png|thumb|250px|none]]

* Maalaa ''Uutisia'' -tekstin alla oleva toinen luettelo
* Aseta myös se luetteloksi
* Pyyhi rivien edestä ''<nowiki>*</nowiki>''-merkit pois

Lopuksi Luettelossa olevat päivä määrät voidaan vahventaa.

* Maalaa päivämäärä

[[Kuva:16-nvu-sivupohjasta-sisallonlisays-luettelo_pallot.png|thumb|250px|none]]

* Napsauta ''vahvenna''-painiketta

[[Kuva:17-nvu-sivupohjasta-sisallonlisays-luettelo_valmis.png|thumb|250px|none]]

Listat näyttävät valmiins seuraavilta.

[[Kuva:18-nvu-sivupohjasta-sisallonlisays-pvm_bold.png|thumb|250px|none]]

Toista sama toisellekin päivämäärälle.

==== Alaotsikon tekeminen ====
Viimeisenä tekstiasetteluna asetetaan alaotsikolle oikea tyyli.

* Maalaa ''Uutisia''-teksti

[[Kuva:19-nvu-sivupohjasta-sisallonlisays-bold-painike.png|thumb|250px|none]]

* Valitse sille tyyliksi ''Otsikko2''

[[Kuva:20-nvu-sivupohjasta-sisallonlisays-pvm_valmis.png|thumb|250px|none]]

==== Kuvan lisääminen ====
Lopuksi pääsivulle lisätään vielä kuva.

* Siirrä teksikursori pääotsikko rivin loppuun
* Valitse ''Lisää'' ''>'' ''Kuva''
* Valitse lisättäväksi kuvaksi [http://materiaali.linuxkouluun.fi/pingviini.png pingviini.png]
* Aseta vaihtoehtoiseksi tekstiksi "''Pekka pigviinin kuva''"

[[Kuva:21-nvu-sivupohjasta-sisallonlisays-alaotsikko.png|thumb|250px|none]]

* Siirry ''Ulkoasu''-välilehdelle
* Valitse Kuvan ja tekstin tasaukseksi ''Vasemmalle''

[[Kuva:22-nvu-sivupohjasta-sisallonlisays-alaotsikko_valmis.png|thumb|250px|none]]

* Napsauta ''OK''

[[Kuva:23-nvu-sivupohjasta-sisallonlisays-kuvan_ominaisuudet.png|thumb|250px|none]]

==== Sivun tallentaminen ====
Nyt pääsivu on valmis ja se voidaan tallentaa.

* Valitse ''Tiedosto'' ''>'' ''Tallenna nimellä...''
* Anna tiedostolle nimeksi ''index.html'' ja sen sijainnin tulee olla sama kuin sivuilla olevin kuvien

=== Harrastukset-sivu ===
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 [http://materiaali.linuxkouluun.fi/NVU-sivun_teksti.txt tästä] linkistä.

* Kopioi Harrastukset sivun sisältö NVU:hun samalla tavalla kuin aiemmin

[[Kuva:24-nvu-sivupohjasta-sisallonlisays-kuvan_ominaisuudet2.png|thumb|250px|none]]

* Muuta kirjasinlajiksi ''sans-serif''
* Merkkaa pääotsikko, alaotsikot, kappaletekstit ja listat

[[Kuva:25-nvu-sivupohjasta-eka_sivu_valmis.png|thumb|250px|none]]

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 [http://materiaali.linuxkouluun.fi/lintu.png lintu.png] ja vaihtoehtoisena tekstinä "''Kuva linnusta''"

Lisättynä linnun kuva voi olla turhan suuri ja sitä pitää pienentää.

[[Kuva:26-nvu-sivupohjasta-harrastukset-sivu-sisalto.png|thumb|250px|none]]

Tämä onnistuu kuvan kulmissa olevista pienistä kahvoista.

[[Kuva:27-nvu-sivupohjasta-harrastukset-sivu-tyylit.png|thumb|250px|none]]

Vetämällä kahvoista kuvan kokoa voidaan pienentää sopivaksi.

[[Kuva:28-nvu-sivupohjasta-harrastukset-sivu-kuva.png|thumb|250px|none]]

* Käytä "''Kokkailu''"-otsikkoon kuvaa [http://materiaali.linuxkouluun.fi/kakku.png kakku.png] ja vaihtoehtoisena tekstinä "''Kuva suklakakusta''"

[[Kuva:29-nvu-sivupohjasta-harrastukset-sivu-kuvakoko.png|thumb|250px|none]]

Lopuksi sivu tallennetaan nimellä ''harrastukset.html''.

=== Linkit-sivu ===
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ö.
* Muuta kirjasinlajiksi ''sans-serif''
* Aseta tekstille oikea tyyliasettelu

[[Kuva:30-nvu-sivupohjasta-harrastukset-sivu-kuvakoko2.png|thumb|250px|none]]

==== Linkkien tekeminen ====
Jokaiseen linkitettävään kohtaan lisätään tieto missä kyseinen sivu sijaitsee.

* Poista listoista ''<nowiki>*</nowiki>''-merkit
* Maalaa kohta josta tehdään linkki

[[Kuva:31-nvu-sivupohjasta-harrastukset-sivu-kakkukuva.png|thumb|250px|none]]

* Valitse ''Lisää'' ''>'' ''Linkki''
* Anna kohteeksi tieto missä sivu sijaitsee

[[Kuva:32-nvu-sivupohjasta-linkitsivu-tyylit.png|thumb|250px|none]]

* Napsauta ''OK''

[[Kuva:33-nvu-sivupohjasta-linkitsivu-linnkien_tekeminen.png|thumb|250px|none]]

Seuraavassa on lueteltu sivuilla olevien kohteiden osoitteet joihin niiden tulisi viitata.

''Suklaalinkkejä''

* ''Tee itse suklaata'' http://www.rihmasto.fi/wiki/Suklaa
* ''Oulun suklaayhdistys'' http://www.suklaayhdistys.com/suklaasuomi.php
* ''Tietoa suklaasta'' http://fi.wikipedia.org/wiki/Suklaa

''Lintulinkkejä''

* ''Perustietoa linnuista'' http://fi.wikipedia.org/wiki/Linnut
* ''Lintukuvia ja linkkejä'' http://www.biomi.org/linnut/
* ''Lintujen tunnistus harjoituksia'' http://www.tkukoulu.fi/~viyrhe/opetus/

[[Kuva:34-nvu-sivupohjasta-linkitsivu-linkit_ominaisuudet.png|thumb|250px|none]]

Lopuksi sivulle voidaan lisätä jokin kuva antamaan sille väriä. Esimerkissä on lisätty kuvatiedosto [http://materiaali.linuxkouluun.fi/apina.png apina.png]. Tämän jälkeen sivu tallennetaan nimellä ''linkit.html''.

[[Kuva:35-nvu-sivupohjasta-linkitsivu-eka_valmis.png|thumb|250px|none]]

== Sivun kokeilu ==
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.

== Esimerkkimateriaalin lataaminen ==
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''"
* Valitse hakemisto mihin tiedosto tallennetaan
* Napsauta ''Tallenna''

''Esimerkissä käytettävät tiedostot''

# Lataa esimerkkissä käytetty ''teksti ''[http://materiaali.linuxkouluun.fi/NVU-sivun_teksti.txt tästä]
# Lataa esimerkkissä käytetty ''pingviinin ''kuva [http://materiaali.linuxkouluun.fi/pingviini.png tästä]
# Lataa esimerkkissä käytetty ''linnun ''kuva [http://materiaali.linuxkouluun.fi/lintu.png tästä]
# Lataa esimerkkissä käytetty ''kakun ''kuva [http://materiaali.linuxkouluun.fi/kakku.png tästä]
# Lataa esimerkkissä käytetty ''apinan ''kuva [http://materiaali.linuxkouluun.fi/apina.png tästä]
# Lataa esimerkissä tehty ''pääsivu ''html-muodossa [http://materiaali.linuxkouluun.fi/index.html tästä]
# Lataa esimerkissä tehty ''harrastukset''-sivu'' ''html-muodossa [http://materiaali.linuxkouluun.fi/harrastukset.html tästä]
# Lataa esimerkissä tehty ''linkit''-sivu'' ''html-muodossa [http://materiaali.linuxkouluun.fi/linkit.html tästä]

''Sivupohjassa käytetyt tiedostot edellisestä oppaasta''

# Lataa esimerkissä kaytetty ''mallipohjatiedosto'' [http://materiaali.linuxkouluun.fi/NVU_mallipohja.mzt tästä]
# Lataa esimerkissä käytetty ''taustakuva ''[http://materiaali.linuxkouluun.fi/taustakuva.png tästä]
# Lataa esimerkissä käytetty ''otsikkokuva'' [http://materiaali.linuxkouluun.fi/otsikko.jpg tästä]

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.