Nvu 1.0. by Sami Mäkinen

Transkriptio

1 Nvu 1.0 by Sami Mäkinen

2 Sisällysluettelo HTML... 1 Yleistä Nvusta... 3 Apua... 3 Sivun ja sivuston rakentamisesta... 3 Tiedostojen nimeämisestä... 3 Uuden sivun aloittaminen... 3 Näkymät... 3 Sivun tallentaminen ja sivun otsikko... 4 Fonttimuotoilut... 5 Rivimuotoilut... 6 Vierivä teksti... 7 Vaakaviiva... 8 Tekstilinkit... 8 Tekstilinkkien muotoilu CSS:n avulla Taustaväri ja taustakuva Kuvan lisääminen Rollover-kuvat Taulukot... 16

3 HTML HTML (HyperText Markup Language) on WWW-dokumenttien kirjoitukseen käytettävä merkintäkieli. HTML-koodia voi kirjoittaa tekstieditoreilla, jotka pystyvät tallentamaan tekstiä puhtaassa ASCII-muodossa. Esim. Windowsin mukana tuleva Muistio-apuohjelma tekee puhdasta ASCII-tekstiä, joten se soveltuu erittäin hyvin HTML-koodin kirjoittamiseen. HTML:ään löytyy Internetistä hyviä suomenkielisiä oppaita. Eräs näistä on osoitteessa HTML-dokumentin perusrakenne HTML-dokumentin perusrakenne on lähes aina seuraavanlainen: <HTML> <HEAD> <TITLE> </HEAD> <BODY> </BODY> </HTML> </TITLE> Tämä rakenne kirjoitetaan siis lähes aina ensimmäisenä. Head-osa (<HEAD>:n ja </HEAD>:n välinen alue) sisältää yleensä TITLE-elementin, jonka sisälle kirjoitetaan selaimen otsikkorivillä näkyvä teksti, ja mahdollisesti META-elementtejä. HTML-koodia voi kirjoittaa sekä pienillä että suurilla kirjaimilla tai käyttämällä sekaisin suuria ja pieniä kirjaimia. Myöskään ylimääräiset tyhjät välit ja välilyönnit eivät haittaa. Kirjoita yllä oleva koodi Muistio-apuohjelmalla, ja tallenna se nimellä index.html. HTML-dokumentit on tapana tallentaa tarkentimella htm tai html. Järjestelmä tunnistaa nämä tiedostomuodot HTML-dokumentiksi ja tätä muotoa olevat tiedostot voidaan avata oletusselaimeen kaksoisnapsauttamalla niitä. Kaksoisnapsauta tiedostoa index.html. Oletusselain käynnistyy ja ruutu näyttää tyhjältä, koska body-osa (<BODY>:n ja </BODY>:n välinen alue) on tyhjä. Body-osassa on kaikki, mitä selainikkunassa näytetään. Jos haluat avata selaimen muuhun kuin oletusselaimeen, avaa ensin selain ja sitten dokumentti siihen tavallisella tiedon avaamismenetelmällä. Siirry Muistio-ohjelmaan ja lisää body-osaan jotain tekstiä. Tallenna. Siirry selaimeen ja napsauta (tarvittaessa) Päivitä- tai Reload-painiketta. Nyt ruutuun pitäisi ilmestyä juuri lisäämäsi teksti. HTML-elementti HTML-elementti koostuu yleensä kahdesta komennosta (alkutagista ja lopputagista), joilla rajataan komennon vaikutusalue. Useimmilla elementeillä on lisäksi parametreja eli attribuutteja. Niillä annetaan komennolle lisämääreitä. Parametri sijoitetaan aina alkutagiin ja sille annetaan aina arvo samalla tavalla (=merkin avulla, katso seuraava esimerkki). Parametrin arvo on tapana (virallisen määritelmän mukaan) kirjoittaa lainausmerkkeihin. Useimmiten parametrit toimivat ilman lainausmerkkejäkin. Esim. alkutagi parametri parametrin arvo Tekstiä, johon FONT-elementti vaikuttaa. Tämä teksti pitäisi näkyä normaalina. Lisää tämä teksti index.html tiedostosi body-osaan ja kokeile, mitä se saa aikaan. Alkutagissa voidaan antaa arvo monelle parametrille. Silloin syntaksi on seuraavanlainen: Esim. Tekstiä, johon FONT-elementti vaikuttaa. Kokeile. 1

4 Tällä tavoin siis kirjoittamalla koodia jollain alkeellisella editorilla voidaan luoda laajojakin WWWsivustoja. Homma on kuitenkin melko työlästä. Koko WWW-dokumenttia ei välttämättä tehdä HTML:llä, vaan HTML-koodin sekaan laitetaan muilla tekniikoilla (esim. JavaScript, Java ja CSS) tehtyjä juttuja. Näillä tekniikoilla pystytään tekemään juttuja, joita ei voida toteuttaa HTML:llä. 2

5 Yleistä Nvusta Nvu on ohjelma avoimen lähdekoodin ohjelma WWW-sivujen luontiin. Nvun virallinen sivu on josta ohjelma on myös ladattavissa. Suomenkielisen Nvun sivu on Kun Nvu asennetaan, on ohjelma englanninkielinen. Ohjelman saa muutettua suomenkieliseksi lataamalla kielipaketin ja asentamalla sen. Ohjeet tähän ovat sivulla Nvu on saman tyyppinen ohjelma kuin maksullinen (kallis) Microsoft FrontPage. Nvu on WWW-dokumenttien tekoon tarkoitettu WYSIWYG-tyyppinen (What You See Is What You Get) editori. Editorilla uusien sivujen luonti ja muokkaus on melko yksinkertaista. Nvua käytettäessä ei siis tarvitse kirjoittaa HTML-koodia, vaan Nvu tekee koodin automaattisesti. Objekteja (esim. tekstiä, kuvia ja taulukkoja) voidaan lisätä helposti. Nvua käyttämällä voidaan keskittyä HTML-koodin sijasta dokumentin sisältöön. Apua Kuten useimmissa muissakin ohjelmissa, apua löytyy Ohje-valikosta. Sivun ja sivuston rakentamisesta Sivustolla tarkoitetaan kokonaisuutta, joka sisältää useita sivuja, jotka on linkitetty yhteen. Tehdään sitten sivua tai sivustoa, pitää kaikki sivulle tai sivustolle tuleva materiaali laittaa samaan (alun perin) tyhjään kansioon. Tähän kansioon voi luoda alikansioita (esim. kuvat-kansio), johon voi sijoittaa sivulle tulevaa materiaalia. Kun esimerkiksi kuva on lisätty sivulle, kyseisen kuvatiedoston sijaintia ei saa mennä muuttamaan. Tiedostojen nimeämisestä Mikäli aiot katsella sivua vain Windowsissa, voit käyttää Windowsin nimeämissääntöjä eli voit käyttää esimerkiksi välilyöntejä ja skandinaavisia merkkejä (ä, ö, å, Ä, Ö ja Å) tiedostojen nimissä. Mikäli laitat tiedostot Internetiin, ei tiedostojen nimissä saa edellä mainittuja merkkejä. Uuden sivun aloittaminen Avattaessa Nvu avautuu samalla yksi tyhjä sivu omalle (nimetön)-välilehdelleen. Uusi tyhjä sivu, joka avautuu uudelle välilehdelle, voidaan luoda napsauttamalla -painiketta. Valitsemalla Tiedosto Uusi saadaan esiin lisäasetuksia luotaessa uutta sivua. Mikäli näkyvissä on enemmän kuin yksi välilehti, välilehtiä pystyy sulkemaan -painikkeella tai pikavalikon Sulje välilehti toiminnolla. Näkymät Sivua voidaan katsella useassa eri näkymässä. Näkymää vaihdetaan sivun alalaidan painikkeilla ( ) tai Näytä-valikosta löytyvillä vastaavilla toiminnoilla. Normaalinäkymä Normaalinäkymässä tapahtuu sivujen muokkaus. Työskentely tapahtuu siis pääasiassa tässä näkymässä. HTML-tagit-näkymä HTML-tagit-näkymä näyttää jotkut HTML-tagit (HTML-elementit). 3

6 Lähdekoodinäkymä Lähdekoodinäkymässä näkyy sivun koodi. Ohjelma siis luo koodi sitä mukaa, kun muissa näkymissä tehdään muutoksia sivulle. Lähdekoodinäkymässä koodia voi muokata suoraan. Esikatselunäkymä Voisi arvata, että esikatselunäkymässä pystyisi esikatselemaan sivua WWW-selaimessa. Näin ei kuitenkaan ole, vaan esikatselunäkymä näyttäisi toimivan lähes samalla tavalla kuin normaalinäkymä. Tältä osin ohjelma siis näyttää olevan vielä kehitysvaiheessa. Sivun esikatselun suorittaminen aloitetaan napsauttamalla ensin -painiketta. Mikäli tallentamattomia muutoksia on, napsautetaan joko - tai - painiketta. Lopuksi napsautetaan -painiketta, jolloin sivu avautuu WWW-selaimeen. Vaikka sivu näkyykin usein normaalinäkymässä samanlaiselta kuin WWW-selaimessa, ei normaalinäkymässä pysty testaamaan esimerkiksi linkkien toimintaa. Normaalinäkymä on kapeampi kuin täysikokoisen WWWselaimen ikkuna. Vasemmassa laidassa olevan sivustonhallinnan voi sulkea sen oikeassa yläkulmassa olevasta rastista, jolloin normaalinäkymän saa lähes yhtä leveäksi kuin täysikokoisen WWW-selaimen ikkunan. Sivustonhallinnan saa uudelleen näkyviin valitsemalla Näytä Palkit ja paneelit Sivustonhallinta. Sivustonhallinnan käsittely sivuutetaan, koska siitä ei näytä olevan juuri mitään iloa. Sivustonhallinnan toimintoja kehitettäneen ohjelman seuraavissa versioissa. Sivun tallentaminen ja sivun otsikko Sivun tallentaminen aloitetaan normaaliin tapaan napsauttamalla -painiketta, valitsemalla Tiedosto Tallenna tai valitsemalla Tiedosto Tallenna nimellä. Mikäli sivua ei ole vielä tallennettu, avautuu seuraavan kuvan mukainen valintaikkuna, jossa kysytään sivun otsikkoa. Otsikko näkyy selaimen otsikkorivillä, kun sivu on siinä auki. Otsikolla ei ole mitään tekemistä sivun nimen kanssa. Annetaan sopiva otsikko tai jätetään kohta tyhjäksi, ja napsautetaan -painiketta, jolloin tallennusikkuna avautuu. Tässä toimitaan tavalliseen tapaan. Otsikkoa voi muuttaa jälkikäteen valitsemalla ensin Muotoile Sivun otsikko ja ominaisuudet, jolloin Sivun ominaisuudet valintaikkuna avautuu. 4

7 Tähän voi kirjoittaa myös tekijän ja tekijän ja sivun kuvauksen. Nämä tulevat metatietoihin HTML-koodin alkuun. Fonttimuotoilut Tekstin kirjoittamissa ovat yleiset periaatteet voimassa muuten, paitsi että Enter-näppäimen painaminen tekee rivinvaihdon eikä kappaleen vaihtoa. Mikäli haluat virinvaihtojen rajoittaman tekstin kappaleeksi, vie kohdistin kyseiseen tekstiin johonkin kohtaan ja valitse kappalemuotoilun luetteloruudusta ( ) Kappaletyyli tai valitse Muotoile Kappale Kappaletyyli. HTML:ssä kappaleiden väliin jätetään tyhjä rivi. HTML-koodissa tarkoittaa rivinvaihtoa ja P on kappale-elementti. Kappaleen saa pois vaihtamalla kappaletyyliksi Leipätekstin tai poistamalla koodista - ja -tagit. Fonttimuotoilut tehdään työkalurivin painikkeiden ( ), työkalurivin luetteloruudun ( ) ja Muotoile-valikon Kirjasinlaji-, Koko-, Tekstin tyyli- ja Tekstin väri kohtien avulla. Sivun tekstin oletusväriä voi vaihtaa valitsemalla ensin Muotoile Sivun värit ja tausta, ja vaihtamalla Normaali teksti: -kohdan väriä. Hyvin suurikokoista tekstiä ei saa suoraan. Suurikokoisen tekstin aikaansaamiseksi muuta ensin tekstin kokoa valitsemalla Muotoile Koko valikon avulla. Tämän jälkeen voit muuttaa koodissa fontin kokoa. Esim. HTML:ssä fontin peruskoko on 3, joka vastaa pistekokoa 12. Edellä olevassa kuvassa koko on 8 (3+5). Huomaa, että ohjelma muuttaa koodissa skandinaaviset merkit (ä, ö, å, Ä, Ö ja Å) HTML:n erikoismerkeiksi. Jos haluat käyttää tarkkoja pistekokoja, muuta koodi vaikkapa seuraavan kuvan mukaiseksi. Style-määrittelyt eivät ole HTML:ää vaan CSS:ää. HTML-koodin sekaan voidaan laittaa monenlaista HTML:ään kuulumatonta koodia. 5

8 Jos haluat tekstiin reunavärin, lisää taustaväri seuraavan kuvan mukaiseksi. -painikkeen avulla ja muokkaa koodi vaikkapa Edellä olevaa koodi näkyy selaimessa seuraavanlaisena:. Päävärit ja muutamat muut värit voidaan siis kirjoittaa suoraan eikä mitään koodia tarvita. Suoraan kirjoituksella toimia värejä ovat ainakin white, red, blue, yellow, green, purple, fuchsia, black, gray, silver, maroon, lime, olive, navy, teal ja aqua. Värien RGB-arvoja ja HTML-koodeja saa selville mm. osoitteesta Edellä olevassa kuvassa on ensimmäinen väri ilmoitettu RGBarvoilla. Värin voi ilmoittaa myös värin HTML-koodilla, joka alkaa aina #-merkillä. Edellä olevassa kuvassa solid-arvon tilalla voisi olla dashed, dotted, double groove, ridge, inset tai outset. Kopioitaessa tekstiä tekstinkäsittelyohjelmista Nvuun, jäävät teksrinkäsittelyohjelman fonttimuotoilut usein voimaan. Alla on lähdekoodi, kun Nvuun on kopioitu Wordistä Times New Roman fontilla pistekoolla 11 kirjoitettua tekstiä. Mikäli edellä olevaa tekstiä haluaa muotoilla tekstiä Nvulla, on hyvä poistaa vanhat muotoilut ensin. Tämä tapahtuu tässä tapauksessa poistamalla -elementti. Kopioitaessa vastaava teksti OpenOffice.org Writeristä, tulee lähdekoodista seuraavan kuvan kaltaista. Mikäli tätä tekstiä haluaa muokata Nvussa on hyvä poistaa vanhat muotoilut ensin. Tämä tapahtuu tässä tapauksessa poistamalla - ja -elementit. Muutamia erikoismerkkejä saa lisättyä Lisää Merkit ja symbolit toiminnolla. Rivimuotoilut Tässä pykälässä käsiteltävät muotoilut koskevat yhden tekstipätkän muotoilua. Tätä tekstipätkää voi rajoittaa esim. rivinvaihto, kappaleen vaihto, dokumentin tai dokumentin loppu. Seuraavaksi esiteltävät muotoilut ovat tekstinkäsittelyohjelmissa kappalemuotoiluja, mutta Nvussa asia on siis hieman toisin. Tekstin tasausta voi muuttaa työkaluriviltä löytyvillä painikkeilla ( ) tai Muotoile Tasaus valikon toiminnoilla. Sisennystä saa muutettua työkaluriviltä löytyvillä painikkeilla ( ) ja Muotoile-valikon Lisää sisennystä ja Vähennä sisennystä toiminnoilla. Sisennys muuttuu automaattisesti 40 kuvapistettä. Mikäli haluaa sisennykseksi muita arvoja kuin 40 monikertoja, pitää arvo kirjoittaa suoraan koodiin. Esim. yhden sentin sisennys saadaan aikaan seuraavasti: 6

9 Mikäli halutaan sisentää (myös) ensimmäistä riviä pitää koodi muuttaa esim. seuraavan kuvan mukaiseksi. Mikäli haluaa muuttaa rivivälin vaikkapa arvoon 1,5 pitää käyttää seuraavan kuvan kaltaista koodia. Valitut tekstinpätkät saa luetteloksi napsauttamalla -painiketta. Luettelomerkit saa pois napsauttamalla uudelleen -painiketta. Ennen luetteloa ja luettelon jälkeen jätetään automaattisesti yksi tyhjä rivi. Luetteloa voi muokata (esim. luettelomerkkiä voi vaihtaa) valitsemalla ensin Muotoile Luettelo: ominaisuudet tai luettelon pikavalikosta Luettelo: ominaisuudet. Numeroitu luettelo saadaan aikaan - painikkeella. Numeroitua luetteloa muokataan samalla tavalla kuin numeroimatonta luetteloa. HTML:ssä on määritelty kuusi eri otsikkotasoa. Tekstinpätkän saat otsikoksi valitsemalla kappalemuotoilun luetteloruudusta ( ) jonkun otsikkotason tai valitsemalla Muotoile Kappale valikosta jonkun otsikkotason. Ennen otsikkoa ja otsikon jälkeen jätetään automaattisesti yksi tyhjä rivi. Otsikon teksti on lihavoitu ja sen koko vaihtelee otsikkotason mukaan. Vierivä teksti Mikäli haluat vierivää tekstiä, kokeile vaikkapa alla olevan kuvan mukaista koodia, jossa on MARQUEEelementti lähes kaikkine parametreineen. Behavior voi saada arvon scroll, slide tai alternate. Scrollamount-parametrin arvo määrittelee, kuinka monta pikseliä tekstiä liikutetaan kerrallaan. Scrolldelay kertoo hyppäyksien välisen viiveen millisekunteina. 7

10 Scrollamount- ja Scrolldelay-parametrien arvot vaikuttavat siis tekstin vieritysnopeuteen. Loop-arvo määrittelee toistokertojen määrän. Infinite (eli päättymätön) on oletusarvo. Vaakaviiva Vaakaviiva lisätään valitsemalla Lisää Vaakaviiva. Vaakaviivan ominaisuuksia voi muuttaa Vaakaviivan ominaisuudet valintaikkunassa, joka avautuu mm. kaksoisnapsautettaessa vaakaviivaan tai valittaessa vaakaviivan pikavalikosta Vaakaviiva: ominaisuudet. Ohjelma tekee vaakaviivan muotoilut CSS:n avulla. Käyttämällä HTML:ää pystytään vaihtamaan myös viivan väriä. Jos haluat vaihtaa myös viivan väriä, käytä seuraavan kaltaista koodia:. Kaikki selaimet eivät ehkä tue HRelementin color-parametria. Edellä oleva koodi toimii (eli viiva näkyy sinisenä) ainakin Microsoft Internet Explorer 7.0 selaimessa ja Mozilla Firefox 2.0 selaimessa. Tekstilinkit Linkki voi osoittaa esim. samassa koneessa olevaan tiedostoon, Internetissä olevaan tiedostoon tai sähköpostiosoitteeseen. Näytetään ensiksi, miten sivulta tehdään linkki samassa kansiossa olevaan toiseen sivuun. Valitaan ensiksi linkkiteksti. Napsautetaan -painiketta, valitaan pikavalikosta Luo linkki tai valitaan Lisää Linkki, jolloin Linkin ominaisuudet valintaikkuna avautuu. Tarvittaessa ominaisuuksia saa näkyviin enemmän napsauttamalla Napsautetaan -painiketta. -painiketta. 8

11 Valitaan haluttu (tässä tapauksessa kokeilu2.html) tiedosto ja napsautetaan -painiketta. Napsautetaan -painiketta. Huomataan, että linkkiteksti muuttuu alleviivatuksi ja siniseksi. Tätä on käyttämättömän linkin oletusmuotoilu. Linkkien muotoilua käsitellään myöhemmin. Mikäli linkin toimivuuden haluaa testata, se on tehtävä WWW-selaimessa. Tässä linkki tehtiin toiseen WWW-sivuun. Linkki voidaan tehdä kuitenkin minkä tyyppiseen tiedostoon tahansa. Yleisesti linkkejä tehdään mm. jpgkuviin, pdf-tiedostoihin, doc-tiedostoihin (eli Microsoft Word -dokumentteihin) ja mp3-tiedostoihin (eli musiikkitiedostoihin). WWW-selain osaa näyttää jpg-kuvat suoraan. Pdf- ja doc-tiedostot näkyvät ainakin, jos koneeseen on asennettu sopiva ainakin kyseisen tiedoston katselemiseen pystyvä ohjelma. Mp3- tiedostojen kohdalla (ja muidenkin isojen tiedostojen kohdalla) kannattaa kohde yleensä tallentaa ensin omalle koneelle ja avata sitten tiedosto omalta koneelta. Linkin kohteen tallentaminen tapahtuu WWW- 9

12 selaimesta riippuen yleensä joko pikavalikon Tallenna kohde levylle tai Tallenna kohde nimellä -toiminnolla. Näytetään seuraavaksi, miten tehdään linkki Turun yliopiston kotisivulle. Valitaan ensin linkkiteksti ( ). Napsautetaan -painiketta. Käytetään alla olevan kuvan mukaisia asetuksia. Huomaa, että myös protokollaosa (joka on tässä tapauksessa pitää kirjoittaa. Linkki voitaisiin tehdä myös sähköpostiosoitteeseen. Tällöin linkki olisi muotoa mailto:etunimi.sukunumi@yritys.fi. Tämän voi kirjoittaa suoraan Linkin kohde kohtaan. Mikäli rastittaa Yllä oleva on sähköpostiosoite kohdan, ei mailto:-merkkijonoa tietenkään kirjoiteta. Tällöin linkkiä napsautettaessa koneen oletussähköpostiohjelma avautuu. Tästä on kuitenkin useimmiten vain haittaa, koska aika harvat käyttävät sähköpostiohjelmia. Linkin ominaisuudet -valintaikkunan saa uudelleen esille (jolloin siis linkkiä pystyy muokkaamaan) viemällä kohdistimen linkin kohdalle ja napsauttamalla -painiketta, viemällä kohdistimen linkin kohdalle ja valitsemalla Muotoile Linkki: ominaisuudet tai pikavalikon Linkki: ominaisuudet toiminnolla. Linkki avautuu oletuksena samaan ikkunaan. Usein kuitenkin halutaan linkin avautuvan uuteen selaimeen. Tämä onnistuu seuraavan kuvan mukaisilla asetuksilla. 10

13 Linkki voidaan tehdä myös ankkuriin. Ankkuri on nimetty kohta sivulla. Ankkuri ei näy sivulla millään tavalla. Ankkureita käytetään pitkissä teksteissä, kun esimerkiksi lopusta halutaan päästä suoraan alkuun. Ankkureita käytetään siis lähinnä tehtäessä sivun sisäisiä linkkejä. Ankkurin tekeminen aloitetaan viemällä kohdistin haluttuun kohtaan tai valitsemalla haluttu kohde ja napsauttamalla valitsemalla Lisää Nimetty ankkuri. -painiketta tai 11

14 Kirjoitetaan nimi (esim. loppu), ja napsautetaan -painiketta. Havaitaan, että ankkuri näkyy normaalinäkymässä -merkkinä. Linkkejä luotaessa määritellyt ankkurit näkyvät Linkin kohde luetteloruudussa. Linkkien värejä voi vaihtaa Muotoile Sivun värit ja tausta toiminnon avaamassa valintaikkunassa. Ainakaan normaalin tekstin seassa olevien linkkien värien muuttaminen ei ole suositeltavaa, koska monet käyttäjät ovat tottuneet linkkien oletusväreihin: Linkin värin muuttaminen saattaa siis hämätä käyttäjää. Tekstilinkkien muotoilu CSS:n avulla CSS (Cascading Style Sheets, kaskadi tyylimäärittely) on tyylikieli, jolla voidaan liittää tyylimääritykset HTML-elementteihin. Tekstilinkkien muotoilu käy kätevästi kirjoittamalla itse CSS-tyylimäärittely ja käyttämällä sitä haluttuihin linkkeihin. Tehdään sivulle vaikkapa harjoituksena kaksi linkkiä ja muokataan koodi vaikkapa seuraavien kuvien mukaisiksi. 12

15 Tässä siis määritellään oma ala-tyyli, jota käytetään vain ensimmäisessä linkissä. Link viittaa käyttämättömään linkkiin, visited käytettyyn linkkiin ja active aktiiviseen linkkiin. Hover-tyyliä käytetään silloin, kun hiiri on linkin päällä. Huomaa, että väri voidaan antaa ainakin heksadesimaalikoodina tai englanninkielisenä sanana. Väriä määriteltäessä ainakin seuraavien sanojen pitäisi toimia: black, gray, silver, white, red, purple, fuchsia, aqua, blue, navy, teal, lime, green, olive, maroon, gold, yellow, brown, pink ja orange. Edellä oleva on vain yksi esimerkki. Lisää voit opiskella esimerkiksi sivulta Taustaväri ja taustakuva Taustaväriä ja taustakuvaa voi vaihtaa Muotoile Sivun värit ja tausta toiminnon avaamassa valintaikkunassa. Taustakuvan asettamiseksi napsautetaan ja napsautetaan -painiketta. -painiketta, haetaan haluttu kuva, 13

16 Ohjelma tekee kuvan osoitteesta automaattisesti suhteellisen. Tästä huolimatta taustakuvan on oltava samassa kansiossa (tai tämän kansion alikansioissa) kuin sivun, mikäli halutaan, että taustakuva näkyy vielä kyseisen kansion siirron jälkeenkin. Epäsuhteellisia eli absoluuttisia osoitteita ei kannata käyttää lainkaan WWW-sivuja tehtäessä, koska absoluuttisilla osoitteilla homma ei toimi, mikäli kyseisen sivun sisältävän kansion sijaintia muutetaan. Kuvan lisääminen Kuten taustakuvan tapauksessa ennen kuvan lisäämistä kyseinen kuva on hyvä olla samassa kansiossa kuin sivu tai tämän kansion alikansiossa. Myös kuvan lisäämisessä kannattaa käyttää aina suhteellista osoitetta. Kuvan lisääminen aloitetaan viemällä kohdistin kohtaan, johon kuva halutaan, ja napsauttamalla - painiketta tai valitsemalla Lisää Kuva. 14

17 Haetaan haluttu tiedosto. Työkaluvihjeen ja vaihtoehtoisen tekstin voi jättää tyhjäksi. Laitetaan nekin nyt kuitenkin ihan harjoituksen vuoksi. Työkaluvihjeteksti näkyy, kun hiiren vie kuvan päälle. Vaihtoehtoinen teksti näkyy, mikäli itse kuva ei jostain syystä näy. Havaitaan, että kuva tulee kohdistimen kohdalle ja käyttäytyy kirjaimen tavoin. Kuvan kokoa voi muuttaa hiirellä vetämällä. Kuvan ominaisuudet valintaikkunan saa uudelleen esille esimerkiksi kaksoisnapsauttamalla kuvaa. Mitat-välilehdellä voidaan asettaa kuvan tarkka pistekoko. Ulkoasu-välilehdellä voidaan muuttaa välistystä ja kuvan paikkaa. Mikäli välistystä lisätään, jää kuvan ja tekstin väliin enemmän tilaa. Linkki-välilehdellä kuva voidaan asettaa linkiksi. Rollover-kuvat Monesti web-sivuilla näkee painikkeita tai kuvia, jotka muuttuvat, kun niiden päällä kuljettaa hiirtä. Rollover-kuva saadaan aikaiseksi muokkaamalla linkkikoodia alla olevan kaltaisesti. Molemmat näytettävät kuvat on tietenkin oltava olemassa. Olkoot kuvat Tampere1.gif ja Tampere2.gif samassa kansiossa sivun kanssa. Lisätään sivulle Tampere1.gif-kuva, ja laitetaan se linkiksi osoitteeseen Muokataan koodi seuraavan kuvan mukaiseksi. 15

18 Nyt Tampere2.gif näytetään, mikäli hiiri on linkin päällä. Muussa tapauksessa näytetään Tampere1.gif. Taulukot Taulukko on varsin kätevä keino sivun elementtien asemoimiseksi. Esimerkiksi kuvien sijoittelu tekstin sekaan tai tekstin palstoittaminen voidaan tehdä taulukon avulla. Näissä tapauksissa taulukon reunaviivat piilotetaan, jolloin katsoja ei välttämättä edes huomaa, että sivulla on taulukko. Taulukon luominen aloitetaan viemällä kohdistin haluttuun kohtaan ja napsauttamalla -painiketta tai valitsemalla Taulukko Lisää Taulukko. Vedetään taulukolle haluttu koko ja napsautetaan, jolloin taulukko luodaan. Ohjelma määrittelee taulukon leveyden joka tapauksessa. Mikäli haluaa, että taulukon leveys noudattaa sen solujen sisällön leveyksiä, mikä on mielestäni kätevää, kannattaa leveysmäärittely (esim. ) poistaa koodista. Taulukon soluihin voidaan kirjoittaa tekstiä ja lisäillä kuvia tavalliseen tapaan. Taulukon kokoa voi muuttaa kahvoista vetämällä. Taulukon ominaisuudet valintaikkunan Taulukko-välilehdellä voi muuttaa taulukon ominaisuuksia. Kyseinen valintaikkuna avautuu viemällä kohdistin taulukkoon ja valitsemalla Taulukko Taulukon ominaisuudet tai valitsemalla taulukon pikavalikosta Taulukon solu: ominaisuudet. 16

19 Välistys määrittelee solujen väliin jäävän tyhjän tilan määrän pikseleissä. Täyte määrittelee solun seinämän ja elementin (esimerkiksi tekstin tai kuvan) väliin jäävän tyhjän tilan määrän pikseleissä. Huomaa, että jos Reunus:-kohdan arvo on nolla (eli reunusta ei näy), näkyy normaalinäkymässä kuitenkin punaiset reunukset. Taulukon ulkoasu onkin syytä tarkistaa selaimessa. Yksittäisen solun ominaisuuksia voi muuttaa Solut-välilehdellä. Käsiteltävä solu näkyy taulukossa kehystetty harmaalla suorakulmiolla. Valitut solut voi yhdistää pikavalikon Yhdistä valitut solut toiminnolla. Taulukko-valikosta ja taulukon pikavalikosta löytyy toiminnot sarakkeiden ja rivien lisäämiseksi ja poistamiseksi ja koko taulukon poistamiseksi. Mikäli taulukkoon halutaan taustakuva, pitää TABLE-elementtiin lisätä backgroundparametri. Esim. 17

20 Lopputulos on seuraavan kuvan näköinen. Background-parametrin voi laittaa myös tr- tai td-elementin sisään, jolloin taustakuva tulee vain riville tai yksittäiseen soluun. 18