Tekijä Mervi Ruotsalainen Kajaanin AMK päivitys:

Transkriptio

1 Tekijä Mervi Ruotsalainen Kajaanin AMK päivitys:

2 2 Sisältö 1 YLEISTÄ WWW-SIVUISTA OHJELMAN KÄYNNISTYS TYÖKALU- JA MUOTOILUVALIKON ESITTELY TIEDOSTON TALLENNUS TIEDOSTON AVAUS UUDEN SIVUPOHJAN LUONTI TEKSTIN KIRJOITUS JA MUOKKAUS LINKIN TEKO SIVUN TAUSTAN JA TEKSTIN HYPERLINKKIEN VÄRIN VALINTA LISTAN LUONTI TEKSTISTÄ KUVAN TUONTI SIVULLE TAULUKKO TAULUKON OMINAISUUKSIEN MUUTTAMINEN:: TAULUKON SOLUN ASETUSTEN MUUTTAMINEN KIRJANMERKKI KIRJANMERKIN LUONTI LINKIN LUONTI KIRJANMERKKIIN PALAUTELOMAKE VALMIIN LOMAKEPOHJAN AVAAMINEN YHDEN RIVIN MUOKKAUSRUUTU VIERITETTÄVÄ TEKSTIALUE VALINTANAPPI VALINTARUUTU AVATTAVA LUETTELORUUTU PALAUTA - PAINIKE LÄHETÄ PAINIKE LOMAKKEEN ARVOJEN ANTAMINEN VIDEON LISÄÄMINEN WWW-SIVUILLE VIDEO LISÄTÄÄN SEURAAVASTI VIDEOASETUSTEN MUUTTAMINEN TAUSTAÄÄNEN LISÄÄMINEN KUVATIEDOSTOJEN FORMAATIT WWW-SIVUILLA WWW-SIVUJEN TEKOON TARVITTAVIEN OHJELMIEN IMUROINNISTA VERKOSTA...30

3 3 19 WEB-KOMPONENTIN LISÄÄMINEN WWW-SIVUILLE DYNAAMINEN TEHOSTE VIERIVÄ TEKSTI: VUOROVAIKUTTEINEN PAINIKE: OFFICE-TAULUKKO: LASKURI: SISÄLTÖTUOTANTO DIGITAALISEN MATERIAALIN NAVIGOINTIRAKENTEESTA LINEAARINEN MALLI ASSOSIATIIVINEN MALLI HIERARKKINEN MALLI (PUUMAINEN RAKENNE) RUOTO (EI-LINEAARISET MALLIT) HYBRIDI MALLI ESIMERKKI WWW-SIVUN HYPERRAKENTEESTA WWW-MATERIAALIN TEKIJÄNOIKEUS...38

4 4 Front Page ohjeita 1 Yleistä WWW-sivuista. WWW-sivut muodostuvat yleensä useammasta yhteen linkitetystä sivusta. Linkitys voi olla joko lineaarista eli peräkkäin olevia sivuja tai sivut voidaan linkittää eri tasoihin ns. hyperlinkeillä, jolloin sivujen välinen linkitys muodostaa verkon sivujen välille. WWW-sivujen rakenne voidaan myös rakentaa ns. kehysrakenteeseen, jota nykyisin käytetään lähes aina sivuston rakenteena. Yleensä Kotisivun (tai Muun kokonaisuuden) aloitussivu talletetaan nimellä index.htm tai index.html. Muut sivut voidaan tallettaa niitä kuvaavilla sivuilla. 2 Ohjelman käynnistys 1. Valitse Start ja sieltä Microsoft Office ja sieltä Microsoft FrontPage Työkalu- ja muotoiluvalikon esittely Työkaluvalikon ja Muotoiluvalikon esittely: Muista, että pudotusvalikoista löytyvät myös kaikki valikoiden toimenpiteet. Vakiotyökalurivin oikeasta reunasta olevasta painikkeesta (työkalurivin asetukset) saadaan lisää toimenpidekuvakkeita tai niitä voidaan myös poistaa. Sieltä voidaan valita myös, että toimenpidekuvakkeet näkyvät kahdella rivillä.

5 5 Näytä- valikko Viivain ja ruudukko. Saadaan apuruudukko näkyville ja sille säädettyä arvot Näytä tunnisteet: Näyttää tekstiosassa HTMLkoodien merkinnät. Yleensä pois päältä. Tunnisteiden pikavalinta: Harmaa rivi sivun yläreunassa, jossa näkyvät tunnisteet. Tehtävä ruutu: Näytön oikeass reunassa oleva tehtääruutu. Työkalruutu: :Valitaan mitkä työkaluvalikot näkyvät. Sivun koko: voidaan valita sivun koko FrontPages-ohjelman alareunasta voidaan katsoa sivun sisältöä työskentelytilassa (Rakenne), Jakaminen- tilassa näyttö jakaantuu kahteen osaan siten, että yläosassa näkyy HTML-koodi ja alaosassa Rakenne, jossa normaalisti työskentely tehdään. Koodi-tilassa nähdään pelkästään koodi. Esikatselutilassa testataan sivun toiminta ns. selainnäkymänä, eli linkit toimivat vain tässä tilassa. HUOM: Työskentely tapahtuu yleensä Rakenne-tilassa. 4 Tiedoston tallennus Tyhjälle pohjalle voi heti alkuun antaa sitä kuvaavan nimen ja tallentaa tiedoston. Valitse valikosta Tiedosto / Tallenna nimellä. Tiedoston nimi kohtaan (1.) kirjoitetaan tiedoston nimi ja tallennusmuotona annetaan olla Web-sivut (2). Kohde- alasvetovalikosta (3.) valitaan kansio, jonne tiedosto talletetaan. Samaan sivustoon liittyvät sivut kannattaa tallentaa samaan kansioon, jotta niitä on helpompi viedä internetin palvelimelle ja samalla vältytään absoluuttiselta polkuviittauksilta. Uuden kansion (4.) voi luoda painamalla Luo uusi kansio kuvaketta ja antamalla kansiolle nimi Muuta-painikkeen (5.) kautta annetaan sivustolle nimi, joka näkyy www-selaimen sinisessä yläpalkissa. Lopuksi tiedosto talletetaan painamalla Tallenna-painiketta (6.)

6 6 5 Tiedoston avaus Valitse valikosta Tiedosto/ Avaa. Valitse Kohde alasvetovalikosta kansio ja valitse sieltä avattava tiedosto ja paina Avaa painiketta. 6 Uuden sivupohjan luonti Painamalla Luo uusi normaali sivu-painiketta saadaan normaalisivu. Jos painetaan ko painikkeen nuoli alaspäin kuvaketta, niin aukeaa lista, josta valitaan tyhjä sivu.

7 7 Valikosta Tiedosto / Uusi avautuu oikealle kehys, josta voidaan valita Tyhjän sivun luonti (3.) tai valmiin Sivumallin (2.) luonti. Tällöin aukeaa Sivumallit-lehti, jossa on kolme lehteä Yleiset-lehdeltä valitaan haluttu vaihtoehto. Täältä löytyy tyhjän sivun pohta(normaalisivu), Lomakepohja jne.. Kehyssivut-lehdeltä löytyvät valmiit kehysrakenteiden mallit. Tyylisivut-lehdeltä löytyvät valmiita sivupohjia, joissa on määritelty tyylit (Otsikko, kappaleteksti jne..) Valitse sopiva vaihtoehto ja kuittaa OK HUOM: Sivumalleja katsotaan palautelomakkeen ja kehysrakenteen tekemisessä 7 Tekstin Kirjoitus ja muokkaus Kirjoita teksti ja muokkaa sitä aina Suunnittelu-tilassa (alhaalta vasemmalta). Jos välttämättä hautaan tehdä sivua kooditasolla, niin silloin käytetään Koodi- tai Jakaminen näkymää. Voit muokata tekstin ulkoasua Muotoiluvalikon työkaluilla. Muista maalata muotoiltava teksti ensin. Muokkaus tapahtuu vastaavalla tavalla kuin tekstinkäsittelyohjelmissa 8 Linkin teko Linkki voidaan luoda joko kuvakkeesta tai tekstistä ohjautuvaksi linkiksi. Linkki voi avata joko kuvan, uuden muulla sovellusohjelmalla tehdyn tiedoston, uuden sivun tai uuden WWW-osoitteen ( Tekstistä aukeava linkki tehdään siten, että linkkisana maalataan ensin (kuva, kohta 1) ja sitten painetaan Lisää hyperlinkki kuvaketta tai valitse valikosta Lisää / Hyperlinkki

8 8 Näytettävä teksti: kohdassa näkyy maalattu teksi. Tässä kohtaa voidaan myös muuttaa tekstiä. Kohdekehys voidaan valita linkille kohdekehys- painikkeen alta. Oletuksena on, että kohdekehys on sama ikkuna, mutta se voidaan myös muuttaa. Uusi ikkuna tarkoittaa, että linkki aukeaa uudeksi selainikkunaksi Kuitataan valinta OK Hyperlinkin muokkaaminen ikkunasta vasemmalta puolen valitaan millainen linkki tehdään A) Aiemmin luotu tiedosto tai web-sivu.: Linkki tiedostoon: Valitse kohde: kohdasta levyasema ja levyaseman alapuolen näkymästä kansio ja sieltä tiedosto, johon linkki tehdään. Kuvassa on valittu levyasemalla kansiossa StreamAuthor2_5\harjoitus1\ kansiosta tiedosto harjoitus_1.htm. Tämä tieto tulee näkyville Osoite: kohtaan. (vrt. Hyperlinkin muokkaaminen ikkuna)

9 9 B) Kohta tästä tiedostosta: Jos sivulle on luotu ns. kirjanmerkki, joka määrittää mikä kohta sivusta keskittyy vasempan ylänurkkaan näytöllä, niin siihen voidaan luoda myös linkki. (Tulee ohjeissa myöhemmin kirjanmerkki- ohjeistuksessa). Kuvassa on esimerkki alkuun, kappale1, kappale2 nimisistä kirjanmerkeistä, joihin voidaan luoda linkki. Tässä esimerkissä luodaan samalle sivulle kappale1 nimiseen kirjanmerkkiin linkki. C) Luo uusi tiedosto: Näytettävä teksti: kohdassa lukee teksti, josta tehdään linkki (1.) Vaihda..- painikkeesta valitaan kansio, jonne tiedosto talletetaan. Jos Koko polku kohdassa on jo oikea tiedostopolku, niin kansiota ei vaihdeta. Uuden tiedoston nimi: kohtaan kirjoitetaan tiedostolle nimi (3.) Kohdekehys- kohdasta valitaan kohdekehys (4.) Valinnat kuitataan OK-painikkeella (5.)

10 10 D) Sähköpostiosoite: Tässä määritetään linkistä aukeamaan selaimen sähköposti. Tämä linkki ei toimi, jos selaimeen ei ole laitettu ko. asetuksia päälle. Huomioi, että nykyisin ei ole suositeltavaa laittaa enää webbi-sivuille näkyviin oikeaa sähköpostia, koska se helpottaa roskapostin lähettämistä ja väärinkäytöksiä. Tällöin voidaan ilmoittaa sähköpostin muoto esim. seuraavasti. ja kun tiedossa on henkilön etu- ja sukunimet, niin lukija itse osaa muodostaa sähköpostiosoitteen.

11 11 9 Sivun taustan ja tekstin hyperlinkkien värin valinta.sivun tausta ja hyperlinkin värin valinta yms. Voidaan määrittää sivun ominaisuudet valinnasta. Valitse Tiedosto ja sieltä ominaisuudet Tai valitse Muotoile ja sieltä Tausta Avautuu ikkuna, jossa on useampi lehti: Yleiset: Tiedoston sijainti, otsikko, taustaääni yms. Tausta: Määritä taustan väri ja tekstin väri, sekä hyperlinkkiin liittyvät värit värit-kohdasta Taustakuva määritetään laittamalla rasti Taustakuvakohtaan j a etsitään tiedosto Selaa-painikkeen alta. 10 Listan luonti tekstistä Numerointi: Maalaa numeroitava luettelo ja paina Numerointi-painiketta. Painike aktivoituu. Numeroidusta listasta poistetaan numerointi vastaavasti painamalla ko painike uudelleen, jolloin numerointi poistuu Luettelomerkit: Maalaa luettelo ja paina Luettelomerkit-painiketta. Painike aktivoituu. Luetteloidusta listasta poistetaan luettelointi vastaavasti painamalla ko painike uudelleen.. Luettelomerkkejä voi muokata valitsemalla valikosta Muotoile / luettelomerkit ja numerointi 11 Kuvan tuonti sivulle Paina joko Lisää kuva tiedostosta painiketta tai valitse valikosta Lisää / Kuva/tiedostosta tai ClipArt Valitse Kohde alasvetovalikko ja sieltä hakemisto ja alapuolelta tarvittaessa alakansio ja lopuksi osoita kuvatiedostoa. (Jos haluat nähdä esikatselussa kuvatiedostot, niin valitse 4.-painikkeen (näkymät) alta pikkukuvakkeet. Kuittaa valinta lopuksi Lisää-painikkeella

12 12 12 Taulukko WWW-sivujen tekstin ja kuvien asemointi tehdään hyvin usein taulukko-muotoon. Tällöin taulukossa voi olla paljonkin tyhjiä soluja, mutta niiden olemassa olo ei haittaa varsinaisen sivun katselua. Asemoinnin yhteydessä poistetaan taulukon reunat, jolloin katselija ei näe niitä. Muista, että voit muotoilla taulukkoa myöhemmin. Sarakkeiden ja rivien lukumäärää, Solujen sijaintia, väriä, Tekstin ulkoasua jne.. Soluun voidaan myös laittaa kuva ja solun tekstistä tai kuvasta voidaan tehdä linkki. Voit laittaa taulukon solun seinämän näkymättömäksi tai määrätä sen leveyden. Voit määrittää taulukon taustavärin tai tuoda taustalle kuvan. Lisää taulukko valitsemalla valikosta Taulukko / Lisää/ taulukko

13 13 Määritä Koko kohdasta rivien ja sarakkeiden määrät. Asettelu kohdasta voit määrittää Tasaus: Taulukon paikka sivulla. Sijainti: Kun taulukko ei ole koko sivun levyinen, niin taulukon paikka määritetään sijainnilla muuhun sisältöön nähden.. Määritä leveys: Kun määritetään manuaalisesti taulukon leveys joko kuvapisteina tai suhteellisena prosentteina.. Reunaviivat- kohdasta voit määrittää Koko: Reunan paksuus (jos 0, niin taulukon reunoja ei näy) Väri: Reunaviivan väri Tausta kohdasta voit määrittää Väri: Taustan väri Käytä taustakuvaa: Sivulle taustakuva. Huomioi, että taustakuva monistuu taulukon sisällä, kunnes taulukon alue on täyttynyt. Suositeltavaa on, että käytetään aina jpg, png tai gif-muotoista kuvaa, jotta kuvat näkyvät kaikissa selaimissa.. Explorer selain näyttää bmp ja wmf- muotoiset kuvat lisäksi mutta nämä muodot eivät näy kaikissa selaimissa. Taulukon muodon muokkaus:

14 14 Voit lisätä tai tuhota taulukon soluja, rivejä tai sarakkeita, sekä muuttaa taulukon reunan ja taustan väriä, muuttaa reunaviivan paksuutta jne.. Tiettyihin soluihinkin voidaan tehdä vastaavanlaisia muuotoksia. Jos taulukkoon lisätään rivejä ja sarakkeita, niin muutoksen paikka tulee osoittaa aina ensiksi taulukossa. Esim rivin lisäys toiminnon yhteydessä viedään kursori siihen kohta taulukkoa, johon rivi lisätään. Taulukon muotoiluun päästään valitsemalla valikosta taulukko, jolloin avautuu seuraavat valintalistat Lisää Taulukko Lisätään taulukko solun sisään Rivit tai sarakeet : Vie kursori siihen kohti taulukkoa, johon haluat lisätä rivejä ja sarakkeita. Määritä avautuneesta ikkunasta lisäätkö rivejä vai sarakkeita ja anna lisättävien osien lukumäärä ja lisäksi valitse suunta, jonne lisättävät osiot tulevat. Lisää Solu: Riville tulee uusi solu Lisää otsikko: Taulukon otsikko kirjoittuu taulukon yläpuolelle Poista solut Poistetaan valitut solut Valitse Valitaan osoitettu alue kuten Taulukko, Sarake, Rivi, Solu Yhdistä Solut: Ensin maalataan yhdistettävät solut, jolloin soluista tulee yksi yhteinen solu. Jaa solut: Määritä jaetaanko sarakkeisiin vai riveihin.

15 15 Jaa taulukko Jakaa taulukon kahdeksi taulukoksi Taulukon automaatinen muotoilu Muotoillaan taulukon ulkoasua Muotoilut: Valitaan taulukon ulkoasu. Käytettävät muotoilut: Rasti osoittaa mitä muotoilua käytetään automaattisesti taulukossa. Käytettävät erikoismuotoilut: Rasti osoittaa mitä erikoismuotoilua käytetään automaattisesti taulukossa. Muunna taulukko tekstiksi Muunnetaan taulukko tekstiksi ja samalla häviää taulukon reunukset Taulukon ominaisuudet Valitaan muutetaanko taulukon vai valittujen solujen ominaisuuksia. Taulukon ominaisuuksien muuttaminen tehdään seuraavan ikkunan kautta 12.1 Taulukon ominaisuuksien muuttaminen:: Aukeaa sama ikkuna kuin taulukon lisäys tilassa.

16 16

17 Taulukon solun asetusten muuttaminen Taulukossa voidaan muuttaa yksittäisten solujen ominaisuuksia. (Taulukko / Ominaisuudet / Solu ) Asettelu: Vaakatasaus ja pystytasaus kohdasta solun sisällön tasaus. Levitetyt rivi ja sarakkeet: Kuinka monen sarakkeen ja rivin verran solua levitetään. Reunat: Määritä leveys-kohdan valinnassa määritetään solun leveys Reunat: valitaan solun reunaviivan väri ja taustan väri tai kuva Tausta Valitaan taustaväri tai kuva 13 Kirjanmerkki Kirjanmerkki on sivun sisällä oleva nimetty kohdistin paikka, johon voidaan viitata linkillä. Pitkät väliotsikoilla varustetut tekstit ovat joskus hankalia rullata näytöllä ja etsiä tiettyä kappaletta rullaamalla tekstiä. Tekstin paikantamiseen ja etsimiseen voidaan käyttää kirjanmerkkejä. Kirjanmerkit on luotava ja paikannettava aina ensin sivulle ja tämän jälkeen niihin voidaan viitata linkillä. Kirjanmerkin luonnin jälkeen voidaan kirjanmerkin paikkaa siirtää tai se voidaan tuhota DELnäppäimellä Kirjanmerkin luonti. Vie kursori siihen paikkaan tekstiä, johon kirjanmerkki luodaan. Valitse valikosta Lisää / Kirjanmerkki Kirjoita merkin nimi Kirjanmerkki-nimi kohtaan ja kuittaa OK-painikkeella. Esimerkiksi sivun alkuun kohdistetaan kirjanmerkki Alkuun. Kun tähän tehdään linkki, ja sitä napautetaan, niin sivunäkymä siirtyy alkuun.

18 18 Esim Sivun alkuun tehdään kirjanmerkki nimeltä Alkuun seuraavasti. Vie kursori sivun alkuun ja valitse valikosta Lisää / Kirjanmerkki 1. Kirjoita Kirjanmerkin nimi kohtaan Alkuun (tämä on kirjanmerkin nimi) Paina OK-painiketta Sivulle ilmestyy seuraava kirjanmerkki Esim Sivun loppuun voidaan tehdä kirjanmerkki nimeltä Loppuun seuraavasti. Vie kursori sivun loppuun ja valitse valikosta Lisää / Kirjanmerkki 1. Kirjoita Kirjanmerkin nimi kohtaan Loppuun (tämä on kirjanmerkin nimi) Paina OK-painiketta (Huomaa, että aikaisemmin luodut kirjanmerkit näkyvät listassa 13.2 Linkin luonti Kirjanmerkkiin. Maalaa linkki-sana tekstistä (esim. Loppuun) ja tee linkki valitsemalla valikosta Lisää / Hyperlinkki

19 19 Valitse B) Kohta tästä tiedostosta: Valitse listasta (1.) kirjanmerkki, johon linkki luodaan ja kuittaa OK 14 Palautelomake www-sivuille voidaan laittaa palautelomake, jonka välityksellä www-sivujen katselija voi välittää tekstitietoa sivun haltijalle osoitettuun sähköpostiosoitteeseen. Front Page ohjelmassa voidaan esim. avata suoraan sivu, jolle tehdään palautelomake. Lomakkeeseen voidaan lisätä yhden rivin tekstiruutu tai vieritettävä teksti ruutu, jolle voidaan kirjoittaa pitkiäkin tekstejä. Lomakkeeseen voidaan laittaa myös ns. luetteloruutuja, valintaruutuja, valintanappeja sekä tietenkin lomakkeen tyhjennyt ja lähetyspainikkeet. Ohjelmassa voidaan käyttää valmista lomakepohjaa tai aloittaa lomakkeen tekeminen itse 14.1 Valmiin lomakepohjan avaaminen Valitse valikosta Tiedosto / uusi Valitse oikealle ilmestyneestä tehtäväruudusta Uusi (1.) ja Uusi sivu listasta Lisää sivumalleja (2.) Valitse Yleiset lehdeltä palautelomake kuvake. Kuittaa valinta OK-painikkeella. Tällöin avautuu valmis malli, jota muokkaamalla voidaan tehdä itselle sopiva palautelomake. Palautelomakkeeseen voidaan lisätä uusia toimintoja tai siitä voidaan poistaa tarpeeton toiminto. Lomakkeen objekteja voidaan siirtää hiirellä uuteen paikkaan viemällä kursori objektin päälle

20 20 ja raahaamalla se uuteen paikkaan 14.2 Yhden rivin muokkausruutu Yhden rivin tekstikenttä lisätään valikosta Lisää / lomake/ muokkausruutu Sivupohjaan ilmestyy lomakkeen kehykset katkoviivalla ja muokkausruutu sekä Lähetä ja Palauta- painikkeet. Kaikki lomakkeessa vastattavat kentät tulevat olemaan katkoviivan sisässä. Sisäkkäisiä katkoviivoja ei saa olla. Lomake kenttä kasvaa automaattisesti sitä mukaa kuin siihen lisätään sisältöä. Uusien lomakkeen toimintojen lisäys ei enää lisää Lähetä- ja Palauta-painikkeita Palautelomakkeen lomakekenttien nimet ja sisältö välittyvät vain sähköpostiin. Esim. Etunimi niminen muokkausruudun asetusten muuttaminen tapahtuu seuraavasti Kaksoisklikkaa yhden rivin muokkausruutua (2.), ja muuta uudet arvot Ominaisuudet-ikkunassa. Jokaiselle objektille kannattaa antaa sitä kuvaava nimi Nimi:-kenttään (3.), jotta tiedetään minkä kentän sisältö on tulostunut sähköpostiin. Tässä tapauksessa Etunimi. Kentän leveys merkkeinä (4.) annetaan Leveys merkkeinä: (4.) kohdassa. Huomaa, että lomakkeessa kohdassa (1.) oleva teksti Etunimi on eri teksti kuin mitä Ominaisuudet ikkunassa oleva teksti. Kohdan (1.) teksti ei lähde lomakkeen lähetyksessä mukaan. Alkuarvo kohtaan annettu teksti näkyy valmiiksi tekstikentässä.

21 Vieritettävä tekstialue Vieritettävä tekstialue lisätään valikosta Lisää / lomake/ tekstialue Esim: osoite Kaksois klikkaa vieritettävän tekstialueen päällä, jolloin saat seuraavan ominaisuudet - ikkunan Anna nimi kohtaan kentälle kuvaava nimi ja määritä leveys merkkeinä sekä kuinka monta riviä ikkuna on laaja Valintanappi Valintapainikeryhmästä voidaan valita yksi vaihtoehto. Ensimmäisen valintapainikkeen yhteydessä annetaan valintapainikeryhmälle nimi Esim. Siviilisääty ja arvoksi tulee valittava valinta Esim. Naimaton. Kaikilla vaihtoehdoilla, jotka kuuluvat tähän siviilisääty-ryhmään tulee olla Ryhmän nimi kohdassa sama nimi. Lisää ensimmäinen valintanappi valikosta Lisää / lomake/ valintanappi Kaksois klikkaa valintanappia ja anna ominaisuudet ikkunassa seuraavat arvot. (HUOM! Älä käytä ääkkösiä äläkä erikoismerkkejä Ryhmän nimi- kentässä

22 22 Arvo: - kenttään kirjoitetaan valinnan nimi Alkutila:-kenttään laitetaan Ei vastattu, tällöin valmista valintaa ei esiinny valintapainikkeessa. Seuraavan valintanapin lisäyksessä (Naimisissa) annetaan valintanapille Arvoksi Naimisissa ja Ryhmän nimi kohdassa tulee olla Siviilisaaty, eli sama kuin Naimaton valintanapissa. Lisätään tarvittava määrä valintanappeja Valintaruutu Valintaruutupainike on yksinäinen elementti joka saa joko ruksin arvokseen tai ei mitään. Ei ole riippuvainen toisten valintaruutujen valinnoista kuten on valintanappi. Valintaruutu lisätään valikosta Lisää / lomake/ valintaruutu Kaksoiklikkaa valintaruutua ja anna ominaisuudet ikkunassa seuraavat arvot. Sähköpostiin välittyy teksti Seura ja jos tähän tähän kohtaan on laitettu rasti, niin arvona saadaan Kyllä.

23 Avattava luetteloruutu Avattava luetteloruutu lisätään valikosta Lisää / lomake/ avattava luetteloruutuu Esim. Kysytään auton väriä Avattavaan luetteloruutuun määritetään valintavaihtoehdot jälleen kaksoisklikkaamalla luetteloruutua. ja avautuvaan ominaisuudet- ikkunaan määritetään halutut vaihtoehdot. Ominaisuudet- ikkunan Nimi- kenttään kirjoitetaan kysymystä kuvaava nimi (AutonVari). Vaihtoehto lisätään painamalla Lisää.. painiketta ja kirjoittamalla vaihtoehdon nimi ilmestyneeseen ikkunan Vaihtoehto:- kenttään (Musta). Kuitataan OK painikkeella ja samalla tavalla lisätään loput vaihtoehdot. Muokkaa painikkeella voidaan muokata jo annettua tekstiä sekä Poista painikkeella poistetaan koko valinta. Korkeus paikkaan ilmoitetaan kuinka monta riviä on kerralla näkyvissä. Salli monivalinta tarkoittaa sitä että listasta voidaan valita useampi vaihtoehto kerrallaan 14.7 palauta - painike Lomakkeeseen lisätään yleensä palauta painike, joka palauttaa alkuarvot kenttiin. Koska painike on valmiiksi lomakkeessa, sitä ei tarvitse lisätä. Jos se on jostain syystä tuhoutunut, niin se lisätään valikosta Lisää / lomake/ painike Palauta - painikkeen ominaisuuksia päästään katsomaan kaksoisklikkaamalla painiketta, jolloin aukeaa seuraava ikkuna.

24 24 Arvo tai selite kohdassa oleva teksti näkyy painikkeessa tekstinä ja painikkeen tyyppi pitää olla Palauta. Siis se palauttaa alkutilan lomakkeelle Lähetä painike Lomake tarvitsee myös lähetä painikkeen, jolla täytetty lomake lähetetään. Lähetä Lähetä- painikkeen tietoja pääsee muuttamaan kaksois-klikkaamalla lähetä-painiketta. Arvo tai selite kohtaan kirjoitettu teksti näkyy painikkeessa ja painikkeen tyypiksi valitaan lähetä Lomakkeen arvojen antaminen Lomakkeelle itselleen on määritettävä tietoja, jotta Lähetä -painikkeen painalluksen jälkeen lomakkeen tiedot lähtevät oikeaan sähköpostiosoitteeseen. Lomakkeen tietoja päästään määrittämään painamalla hiiren oikean puoleinen näppäin alas lomakkeen kenttien päällä ja valitsemalla sieltä lomakkeen ominaisuudet (HUOM! Päästäksesi muuttamaan lomakkeen tietoja sinun on pitänyt luoda jo yksi lomake-elementti.) Valitse Lähetä muualle kuvan mukainen vaihtoehto:

25 25 Asetukset.. Avaa seuraavaksi Asetukset painikkeen alta aukeava lehti täytä kentät mallin mukaan. Kajaanin ammattikorkeakoulun henkilökunta ja opiskelijat voivat käyttää seuraavaa mailto.exe ohjelmaa lomakkeen tietojen palauttamisessa. Tässä toiminto-kentässä oleva komento kertoo sen että käytetään AMK-n palvelimella olevaa ohjelmaa mailto.exe, joka muuttaa palautelomakkeen sellaiseen muotoon, jotta palaute olisi luettavissa suoraan sähköpostista. Lisäasetukset. Vielä pitää määrittää sähköpostiosoite, johon lomake lähetetään. Se tehdään seuraavasti. Valitse edelleen palautelomakkeen ikkunasta painike Lisäasetukset. Paina painiketta Lisää ja lisää seuraavat toiminnot Nimi arvopari ikkunaan : Nimi: sendto Arvo:oma sähköpostiosoite Kuittaa OK- painikkeella

26 26 Lisää seuraava nimi-arvopari serverimäärityksille Nimi: Server Arvopari: Lisää seuraava nimi-arvopari: Nimi: subject Arvo:www-lomake Server tarkoittaa palvelinta ja subject kohtaan kirjoitettu teksti näkyy saapuvassa sähköpostissa subject- eli aihekentässä Lomakkeen lisäasetukset ikkunan tulisi näyttää seuraavalta Kuittaa lopuksi OK ja kuittaa OK- ominaisuudet -ikkuna 15 Videon lisääminen www-sivuille WWW-sivuille voi myös lisätä videoita. Videon kokona kannattaa käyttä 320X240, sillä muuten videon lataamisaika voi kasvaa suureksikin ja video näkyy nykivänä tai ei pyöri lainkaan. Videon esitys aika kannattaa pitää muutamissa minuuteissa korkeintaan. Videotiedosto pitää muistaa myös viedä palvelimelle HTML-dokumentin mukana, jossa se aukeaa. Se on siis erillinentiedosto kuten kuva, word-dokumentti jne.. Muutamia linkkejä, josta löytyy videoita:

27 Kuvat, ääni ja video World Wide Webissä ( Lainaus yllä olevasta linkistä Koska tiedostojen koko on pulma, ne täytyy pakata. Yleisimmin käytetty tekniikka on ns. MPEGpakkaus, joka on still-kuvissa käytetyn JPEG-pakkaustekniikan sovellus liikkuvaan kuvaan. Tämä pakkaustapa on tehokas, joten siirrettävä tiedosto on melko pieni, mutta toisaalta pakkaustapa hävittää kuvan tarkemmat yksityiskohdat. Nykyisin näkee myös käytettävän Microsoftin Video for Windows-videoformaattia, Intelin Indeo-videofor-maattia ja Apple Computerin Macintosh-koneille kehittämää QuickTime-videoformaattia. Yleensä kukin näistä tarvitsee oman apuohjelmansa käyttäjän mikroon ennen kuin niitä voi katsoa. Kunkin tiedostomuodon hallitsevia ns. runtime-ohjelmia voi löytää ilmaiseksi verkon ftptiedostopalvelimista, myös QuickTime-ohjelmia PC-koneille ja Video for Windows -muodon hallitsevia ohjelmia Macintosheille. Kaikkein yleisimmän eli MPEG-videon esittämiseen löytyy verkosta myös monia eri apuohjelmia, mutta ne ovat yleensä kaikki ns. shareware-ohjelmia, eli niistä täytyy maksaa pienehkö rekisteröintimaksu tekijälle. Tyypillistä on, että rekisteröimätön, ilmainen mpeg-esitysohjelma suostuu näyttämään vain alle 1 Mb kokoisia videotiedostoja eli siis vain aivan lyhyitä pätkiä. Maksamalla maksun saa täyden version, jolla voi sitten esittää vaikkapa satojen megatavujen esittelyvideoita Video lisätään seuraavasti Valitse valikosta Lisää / kuva / video Valitse Look In kohdasta hakemisto, jossa video sijaitsee ja valitse videotiedosto sekä kuittaa OK. Löydät videon esim. D:\windows\clock.avi) 15.2 Videoasetusten muuttaminen Voit muuttaa videon esitysasetuksia klikkaamalla hiiren oikeanpuoleista näppäintä videoklipin päällä ja valitsemalla listasta Kuvan ominaisuudet Avautuneesta ikkunasta varmistetaan että ollaan Videot lehdellä ja tältä lehdeltä voidaan muuttaa videon esitystoistokertoja jne.

28 TAUSTAÄÄNEN LISÄÄMINEN HTML-sivuille voi lisätä myös soimaan taustaäänen Taustaäänitiedosto lisätään valitsemalla valikosta Muotoile / Tausta ja avautuneesta ikkunasta valitaan Yleiset lehti Ääni tiedostoja löytyy c:\\ windows\media- kansiosta. MID-äänet soivat pitempään ja WAV- äänet ovat tietokoneen hyvin lyhyitä merkkiääniä. Tältä lehdeltä Taustaääni-kohdasta painetaan Selaa-painiketta, ja valitaan kansio, jossa taustaäänitiedosto sijaitsee. Valitaan tiedosto Taustaäänen toistokerrat määritetään Toistokerrat kohdasta Lopuksi kuitataan OK

29 29 17 Kuvatiedostojen formaatit WWW-sivuilla Tietokoneella voidaan esittää ja tallentaa hyvin monia erilaisia kuvatiedostoformaatteja. Kuvatiedostoformaatit jaetaan vektori- ja bittikarttakuviin. Vektorikuvia voidaan skaalata näytöllä ilman, että kuvan laatu kärsii. Bittikarttakuvan skaalaaminen vaikuttaa kuvan näköön. Esim. bittikarttakuvan suurentaminen tekee kuvasta epätarkemman ja rakeisen. Bittikarttaformaatteja ovat esim. GIF, TIFF, JPEG, PNG, BMP, PICT. Esim. BMP-tiedostostoksi talletettu kuva on suuri tiedostokooltaan, mutta sen tallentaminen esim. GIF-muotoon pienentää kuvan tiedostokokoa. Yleisin kuvaformaatti on GIF (logot, grafiikka jne..)ja seuraavaksi yleisin JPEG (valokuvat ja paljon värisävyjä sisältävät kuvat). XBM ( X Windows System Bitmap) on harvemmin käytetty. Se on UNIX-koneissa käytetty yksivärinen pakkautuva kuvatiedosto. WWW-selaimet voivat näyttää vain tiettyjä pieneen tiedostokokoon pakkaavia kuvaformaatteja. Näitä ovat GIF, JPEG, PNG ja XMB. WWW-selainten avulla voidaan myös katsella vektorigrafiikkaa,

30 30 multimediaa, ja esitysgrafiikkaa, mutta silloin on www-selaimen tueksi ladattava laajennusosa (Esim. Directorilla tehtyjä multimediaesityksiä voidaan katsella www-sivujen kautta, kunhan ensin asennetaan ilmainen verkosta ( saatava laajennusosa, shockware) GIF (Grafics Interchange Format) GIF on yleisin www-sivuilla käytetty pakkautuva kuvaformaatti, joka toimii kaikissa www-selaimissa. GIF kuva pakkautuu siten, että pakkausvaiheessa ei häviä alkuperäistä kuvainformaatiota (GIF89a). Koko pienenee ½ - 1/10 osaan alkuperäisestä koosta. GIF-kuvan ongelma on se, että piirretty kuva tallentuu 8 bittisenä kuvana, jossa on maksimissaan 256 värisävyä. Etuna on puolestaan se, että kuvasta voidaan määrittää yksi väri läpinäkyväksi (GIF89a). GIF-kuva voidaan myös animoida. Tällöin yhteen tiedostoon tallennetaan useita kuvia. GIF-kuva soveltuu logojen, painikkeiden, taustakuvien ja koristekuvien esittämiseen. JPEG ( Joint Photographic Expert Group) JPEG on toiseksi yleisin WWW-sivuilla käytetty kuvaformaatti. Se soveltuu hyvin runsaasti värisävyjä sisältävien valokuvien esittämiseen. Pakkaussuhde on 1/1,5 1/100 osa alkuperäisestä. Pakkausvaiheessa häviää alkuperäistä tietoa, mutta se ei ole yleensä olennaista ja kuvan laatu ei heikkene ratkaisevasti. WWW-sivuilla tulevat kuvat voidaan pakata 80 % pakkaus eli kompressioasteella ilman, että näkyvää eroa huomaa alkuperäiseen kuvaan. JPEG-kuva soveltuu siis laajasävyisten sävykuvien esim. valokuvasta skannattujen kuvien tallentamiseen. Voimakkaita värikontrasteja sisältävät kuvat kannattaa tallentaa GIF-muotoon. JPEG kuva tallentuu 24 bittisenä eli se voi sisältää tuhansia tai miljoonia värisävyjä. Kuvaa ei voi tehdä läpinäkyväksi yhden värin suhteen. PNG (Portable Network Greaphics) PNG-kuvaformaatissa yhdistyy GIF- ja JPEG kuvien parhaat puolet. Kaikki selaimet eivät tue PNGformaattia suoraan. Esim. Netscape ei tue suoraan vaan siihen on haettava Live PNG-laajennus ( LivePNG mahdollistaa kuvan osan suurentamisen suoraan selainikkunassa. 18 WWW-sivujen tekoon tarvittavien ohjelmien imuroinnista verkosta Www-dokumenttien työstämisessä tarvittavia sovellusohjelmia löytyy internetistä mm. macromedian ja Tucowsin kotisvuilta. Tucowsin kotisivuilta löytyy paljon sovellusohjelmia, joita voi käyttää ilmaiseksi noin kuukauden Esim. DreamWeaver-ohjelman ilmaisversion hakeminen (uusi suosion saavuttanut HTML-editori) 1. Mene 2. Valitse Dreamweaver 3. Valitsee Dreamweaver DOWNLOAD 5. Valitse hakemisto, jonne talletan tiedoston ja kuittaa OK 5. Pura ohjelma menemällä hakemistoon, jossa tiedosto on ja avaa se. Toimi ohjelman ohjeiden mukaan.

31 31 (HUOM!: macromedian sivuilta löytyy myös paljon muita apuohjelmia kotisivun tekemiseen. Edellä mainitut toimenpiteet eivät välttämättä aina päde, mutta kun muistat että DOWNLOAD-komennon alta voi aina ladata ohjelmia, kunhan noudattaa ohjeita.) 19 Web-komponentin lisääminen www-sivuille www-sivuille voidaan lisätä myös Web-komponentti, joka voi olla esim. Excel-laskentataulukon osa, pivot-taulukko tai kaavio tai jokin muu Web-Komponentin lisääminen tapahtuu valikosta Lisää / Web-komponentti jolloin aukeaa seuraava ikkkuna Ikkunasta valitaan ensin vasemmalta puolen komponentin laji ja oikealta puolen tehoste Dynaaminen tehoste Vierivä teksti: www-sivuille voi lisätä myös vieriviä tekstejä valitsemalla Komponentin laji Dynaamiset tehosteet ja sieltä Vierivä teksti Kuittaa valinta Valmis-painikkeella. Kirjoita avautuneeseen ikkulaan Teksti:- kohtaan teksti ja valitse muut asetukset.