Ero sivun ”Nettisivun tekeminen NVU:lla” versioiden välillä
Siirry navigaatioon
Siirry hakuun
ei muokkausyhteenvetoa
(Siirto linuxkouluun.fi:stä) |
Ei muokkausyhteenvetoa |
||
| Rivi 1: | Rivi 1: | ||
[[NVU]] on monipuolinen ja helppokäyttöinen verkkosivustojen tekemiseen tarkoitettu ohjelmisto. Tässä ohjeessa tutustutaan ohjelman perustoimintoihin tekemällä yksinkertainen esimerkkisivu. | |||
== Johdanto == | == Johdanto == | ||
| Rivi 7: | Rivi 7: | ||
== Alkutoimet == | == Alkutoimet == | ||
[[Kuva:]] | [[Kuva:1-nvuperusohje-nvu perusikkuna.png]] | ||
Tyhjä NVU-ikkuna | Tyhjä NVU-ikkuna | ||
| Rivi 16: | Rivi 16: | ||
== Tekstin lisääminen == | == Tekstin lisääminen == | ||
Varsinaisen sivun tekemisen aloitamme lisäämällä sivuille muutaman kappaleen tekstiä. Mallisivulle on generoitu Lorum Ipsum generaattorilla viisi kappaletta tekstiä, jonka muokattu versio löytyy tiedostosta [http://materiaali.linuxkouluun.fi/malli_teksti.txt malli_teksti.txt]. Mikäli ohjelman käyttöä halutaan | Varsinaisen sivun tekemisen aloitamme lisäämällä sivuille muutaman kappaleen tekstiä. Mallisivulle on generoitu Lorum Ipsum generaattorilla viisi kappaletta tekstiä, jonka muokattu versio löytyy tiedostosta [http://materiaali.linuxkouluun.fi/malli_teksti.txt malli_teksti.txt]. Mikäli ohjelman käyttöä halutaan harjoitella esimerkin mukaisesti on suositeltavaa käyttää valmista tekstiä, mutta vaihtoehtoisesti voidaan käyttää myös jotain muuta valmista tekstiä. | ||
* Avaa malliteksti [http://materiaali.linuxkouluun.fi/malli_teksti.txt malli_teksti.txt] esimerkiksi napsauttamalla linkkiä tai avaamalla se erilliseen tekstieditoriin | * Avaa malliteksti [http://materiaali.linuxkouluun.fi/malli_teksti.txt malli_teksti.txt] esimerkiksi napsauttamalla linkkiä tai avaamalla se erilliseen tekstieditoriin | ||
| Rivi 27: | Rivi 27: | ||
=== Tyylien merkkaaminen === | === Tyylien merkkaaminen === | ||
Tyylin asettaminen | Tyylin asettaminen | ||
Seuraavaksi merkataan tekstiin tyylit eri otsikoille ja kappaleille. Jos käyttämäsi teksti on muualta kuin esimerkkitiedostosta, lisää sekaan muutamia otsikoita ja alaotsikoita. Maalaa ensimmäinen varsinainen tekstikappale otsikoiden jälkeen ja valitse tälle tyylivalikosta tyyliksi ''Kappaletyyli''. Toista tämä kaikille muillekin tekstikappaleille, niin että kaikki kappaleet on merkitty oikealla tyylillä. | Seuraavaksi merkataan tekstiin tyylit eri otsikoille ja kappaleille. Jos käyttämäsi teksti on muualta kuin esimerkkitiedostosta, lisää sekaan muutamia otsikoita ja alaotsikoita. Maalaa ensimmäinen varsinainen tekstikappale otsikoiden jälkeen ja valitse tälle tyylivalikosta tyyliksi ''Kappaletyyli''. | ||
[[Kuva:2-nvuperusohje-nvu aseta kappaletyyli.png]] | |||
Toista tämä kaikille muillekin tekstikappaleille, niin että kaikki kappaleet on merkitty oikealla tyylillä. | |||
Seuraavaksi merkitään otsikot niiden omilla tyyleillä. | Seuraavaksi merkitään otsikot niiden omilla tyyleillä. | ||
| Rivi 37: | Rivi 39: | ||
* Mustaa pääotsikko “''Lorem Ipsum''” | * Mustaa pääotsikko “''Lorem Ipsum''” | ||
Pääotsikon merkkaminen | Pääotsikon merkkaminen | ||
* Valitse sille tyyliksi ''Otsikko 1'' | * Valitse sille tyyliksi ''Otsikko 1'' | ||
[[Kuva:3-nvuperusohje-nvu aseta otsikkotyyli.png]] | |||
* Seuraavaksi merkitse kaikki toisen tason otsikot tyylillä ''Otsikko 2''. | * Seuraavaksi merkitse kaikki toisen tason otsikot tyylillä ''Otsikko 2''. | ||
* Lopuksi merkitse kolmannen tason otsikot tyylillä ''Otsikko 3''. | * Lopuksi merkitse kolmannen tason otsikot tyylillä ''Otsikko 3''. | ||
| Rivi 47: | Rivi 49: | ||
Nyt sivun kappaleet on merkitty onnistuneesti ja työtilan tulisi näyttää suunnilleen seuraavalta. | Nyt sivun kappaleet on merkitty onnistuneesti ja työtilan tulisi näyttää suunnilleen seuraavalta. | ||
[[Kuva:]] | [[Kuva:4-nvuperusohje-tyylit valmiina.png]] | ||
== Kuvan lisääminen == | == Kuvan lisääminen == | ||
| Rivi 57: | Rivi 58: | ||
* Siirrä kursori tälle tyhjälle riville. | * Siirrä kursori tälle tyhjälle riville. | ||
[[Kuva:]] | [[Kuva:6-nvu-perusohje-lisaa tyhja rivi.png]] | ||
* Napsauta ylätyökalupalkin ''Kuva''-painiketta. | * Napsauta ylätyökalupalkin ''Kuva''-painiketta. | ||
[[Kuva:]] | [[Kuva:5-nvu-perusohje-lisaa kuva.png]] | ||
* Hae lisättävä kuva ja kirjoita sille kuvaus kohtaan vaihtoehtoinen teksti. | * Hae lisättävä kuva ja kirjoita sille kuvaus kohtaan vaihtoehtoinen teksti. | ||
[[Kuva:]] | [[Kuva:7-nvu-perusohje-lisaa kuva valikko.png]] | ||
* Napsauta ''OK'' ja kuva lisätään haluttuun kohtaan. | * Napsauta ''OK'' ja kuva lisätään haluttuun kohtaan. | ||
| Rivi 74: | Rivi 75: | ||
* Siirry aivan sivun loppuun ja tee sinne yksi tyhjä rivi taulukon sijoittamista varten. | * Siirry aivan sivun loppuun ja tee sinne yksi tyhjä rivi taulukon sijoittamista varten. | ||
* Valitse työkaluriviltä ''Taulukko''. | * Valitse työkaluriviltä ''Taulukko''. | ||
* Aseta hiirellä taulukon kooksi ''3x 4'' ja lukitse koko napsauttamalla. | * Aseta hiirellä taulukon kooksi ''3x 4'' ja lukitse koko napsauttamalla. | ||
[[Kuva:]] | [[Kuva:8-nvu-perusohje-lisaa taulukko.png]] | ||
* Napsauta ''OK''. | * Napsauta ''OK''. | ||
| Rivi 85: | Rivi 83: | ||
Nyt taulukko lisätään sivun loppuun ja sen solut voidaan täyttää valitsemalla solu hiirellä ja lisäämällä siihen tarkoitettu informaatio. | Nyt taulukko lisätään sivun loppuun ja sen solut voidaan täyttää valitsemalla solu hiirellä ja lisäämällä siihen tarkoitettu informaatio. | ||
[[Kuva:]] | [[Kuva:9-nvu-perusohje-lisaa taulukko sisalto.png]] | ||
== Linkin tekeminen == | == Linkin tekeminen == | ||
| Rivi 96: | Rivi 94: | ||
* Valitse työkalupalkista ''Linkki''-painike. | * Valitse työkalupalkista ''Linkki''-painike. | ||
[[Kuva:]] | [[Kuva:10-nvu-perusohje-lisaa linkki.png]] | ||
* Kirjoita avautuneen ikkunan tekstikenttään osoite johon linkki osoittaa. Malliesimerkissä tämä on http://www.lipsum.com. | * Kirjoita avautuneen ikkunan tekstikenttään osoite johon linkki osoittaa. Malliesimerkissä tämä on http://www.lipsum.com. | ||
[[Kuva:]] | [[Kuva:11-nvu-perusohje-lisaa linkki valikko.png]] | ||
* Napsauta ''OK''. | * Napsauta ''OK''. | ||
| Rivi 106: | Rivi 104: | ||
Nyt linkin pitäisi näkyä seuraavanlaisena. | Nyt linkin pitäisi näkyä seuraavanlaisena. | ||
[[Kuva:]] | [[Kuva:12-nvu-perusohje-lisaa linkki valmis.png]] | ||
=== Linkki kuvaan === | === Linkki kuvaan === | ||
| Rivi 114: | Rivi 112: | ||
* Valitse tiedostoista kohde johon kuvasta painamalla siirrytään. Mallisivussa linkki osoittaa saman kuvan suurempaan versioon. | * Valitse tiedostoista kohde johon kuvasta painamalla siirrytään. Mallisivussa linkki osoittaa saman kuvan suurempaan versioon. | ||
[[Kuva:]] | [[Kuva:13-nvu-perusohje-lisaa kuvalinkki.png]] | ||
* Napsauta ''OK''. | * Napsauta ''OK''. | ||