KompoZer s. 1/15 1 Johdanto KompoZer on ohjelma www-sivujen tekemiseen ja sivustoon kuuluvien tiedostojen hallintaan. Ohjelmassa on graafinen WYSIWYG-käyttöliittymä (what you se is what you get), jonka avulla on helppo tehdä www-sivuja. Ohjelma tukee hyvin CSS-tyylisivuja, joiden avulla sivuston ulkoasumääritykset luodaan. KompoZerissa on sisäänrakennettu CSS-editori tyylimääritysten tekemiseksi. KompoZerin kotisivu on osoitteessa kompozer.net, josta sivun yläreunan Download-linkin takaa löytyy suomenkielisen version asennusohjelma. 2 Asetukset Asennuksen jälkeen valitse KompoZerissa Työkalut-valikosta Asetukset ja sen jälkeen Lisäasetukset. Valitse XHTML 1 ja Transitional, jonka jälkeen kaikki uudet dokumentit luodaan käyttäen dokumenttityyppimäärittelyä XHTML 1.0 Transitional. XHTML:ää käytettäessä KompoZerissa on syytä valita merkistöksi UTF-8. Valitse samassa valintaikkunassa Uusi sivu ja kirjoita Merksitö-kohtaan UTF-8. Hyväksy tehdyt asetukset OK-painikkeella. Tehtyjä määrityksiä sovelletaan kaikkiin tämän jälkeen luotaviin sivuihin. 3 Sivustonhallinta Sivusto koostuu tavallisesti useista HTML- ja kuvatiedostoista. HTML-tiedostot ovat sivuja, joihin kirjoitetaan sisältöteksti ja lisätään kuvat. Sivustonhallinta näyttää kaikki sivustoon eli projektiin kuuluvat tiedostot, jolloin niiden käsittely on helpompaa.
KompoZer s. 2/15 Sivustonhallinta näkyy KompoZerin vasemmassa reunassa. Jos sitä ei näy, valitse Näytä, Palkit ja paneelit, Sidebar tai paina F9-näppäintä. Napsauta sivustonhallinnan Muokkaa sivustoja -kuvaketta. Jos olet luomassa ensimmäistä sivustoa, niin Selaa kansioita -valintaikkuna avautuu ensimmäisenä. Sulje se Peruuta-painikkeella, jolloin seuraava valintaikkuna avautuu. Napsauta Uusi sivusto -painiketta ja määritä kansio, johon perustat sivuston. Voit valita jonkin jo olemassa olevan kansion tai luoda uuden. Kirjoita tarvittaessa Sivuston nimi -kohtaan kuvaavampi nimi sivustolle. Hyväksy lopuksi asetukset OK-painiketta napsauttamalla. Uusi sivusto ja mahdolliset aikaisemmin luodut sivustot näkyvät nyt sivustonhallinnassa. Aluksi sivustossa ei ole tiedostoja, mutta työn edetessä KompoZerista tallennetut HTML-tiedostot ja sivustoon lisätyt kuvatiedostot näkyvät sivustonhallinnassa oheisen kuvan tapaan. Jos tiedostoja lisätään projektikansioon Windowsin Resurssienhallinnan kautta, tiedostot eivät heti näy Site Managerissa. Saat tiedostot näkyville napsauttamalla Päivitäkuvaketta. Kaksoisnapsauttamalla HTML-tiedostoa se avautuu muokattavaksi KompoZerin editoriin.
KompoZer s. 3/15 4 Sivujen luominen Kirjoittaminen ja muotoilu Editorissa on valmiina yksi tyhjä sivupohja (nimetön). Editoriin voi kirjoittaa ja luoda sisällön samaan tapaan kuin tekstinkäsittelyohjelmissa. Valitse työkalurivin tyylivalikosta kullekin tekstikappaleelle oikea tyyli. Käytä otsikoille tyylejä Otsikko 1-6 ja varsinaiselle tekstille Kappaletyyliä. Älä muuta tekstin muita asetuksia, kuten fonttia, fonttikokoa ja väriä. Kaikki ulkoasuun liittyvät asetukset tehdään CSS-tyyleillä. Jos muotoilet tekstin ominaisuuksia työkalurivin tai Muotoile-valikon toiminnoilla, CSS-tyylit eivät vaikuta muotoiltuihin kappaleisiin. Sivun tallentaminen Tallenna sivut napsauttamalla työkalurivin Tallenna-kuvaketta tai näppäimistöltä Ctrl+S. Anna sivulle sen sisältöä kuvaava otsikko, joka tulee näkymään selaimen otsikkorivillä. Seuraavaksi valitse tiedoston tallennuspaikaksi se kansio, jonka määritit luodessasi sivustoa sivustonhallinnaassa. Anna HTML-tiedostolle nimi, mutta vältä käyttämästä tiedostonimessä skandimerkkejä (åäö) ja välilyöntejä. Saat tiedoston näkyville sivustonhallinnassa napsauttamalla Päivitä-kuvaketta.
KompoZer s. 4/15 Sivujen käsittely Editorissa voi olla useampi sivu (HTML-tiedosto) samanaikaisesti käsiteltävänä. Avoinna olevat sivut näkyvät editorialueen yläreunassa välilehtinä (tab). Välilehdissä näkyvät sivujen otsikot eivät tiedostonimet. Avoinna olevan sivun voi sulkea oikean reunan punaisesta kuvakkeesta. Jos jokin sivuista on tallentamatta, sivun otsikon vasemmalla puolella näkyy punainen kuvake. 5 Linkkien luominen KompoZerilla voi tehdä linkkejä samalla sivulla oleviin ns. kirjanmerkkeihin, toisille sivuille samassa sivustossa tai muille sivustoille. 5.1 Linkki toiselle sivulle Linkit saman sivuston sivujen välillä Jotta liikkuminen saman sivuston eri sivujen välillä olisi mahdollista, jokaisella sivulla on oltava linkit kaikille muille sivuille. On tietysti mahdollista, että joltakin sivulta voi avata lisätietosivun, jota ei ole linkitetty muille sivuille. Luo linkki seuraavasti. 1. Varmista, että olet tallentanut tiedoston. Jos tekeillä olevaa sivua ei ole tallennettu tiedostoksi, linkkiin tulee vääränlainen tiedostoviittaus. 2. Valitse (maalaa) se sana tai tekstin osa, johon haluat luoda linkin. 3. Napsauta työkalurivin Linkki-kuvaketta, jolloin avautuu valintaikkunan linkin luomiseksi. 4. Napsauta tiedostonvalintakuvaketta ja etsi se tiedosto, johon haluat linkin viittaavan. Kohdetiedoston pitää sijaita saman sivuston jossakin kansiossa. 5. Nyt linkkirivillä pitäisi näkyä pelkästään kohdetiedoston nimi tai kansion ja tiedoston nimi. 6. Luo linkki valintaikkunan OK-painiketta napsauttamalla.
KompoZer s. 5/15 Linkit muihin sivustoihin Tiettyyn URL-osoitteeseen eli netissä oleviin sivuihin viittaavat linkit tehdään seuraavasti. 1. Valitse (maalaa) se sana tai tekstin osa, johon haluat luoda linkin. 2. Napsauta työkalurivin Linkki-kuvaketta. 3. Kirjoita kohteen URL-osoite linkkiriville. Osoitteeseen on kirjoitettava mukaan myös alkuosan protokolla (esim. http). Kaikkein helpointa on siirtyä selaimella halutulle nettisivulle ja kopioida kohdesivun osoite selaimesta KompoZerin linkkiriville. Tällä tavalla osoite tulee varmasti oikein. 4. Jos haluat, että linkki avautuu uuteen selainikkunaan, rastita valintaruutu Linkki avautuu ja valitse alasvetoluettelosta uuteen ikkunaan. Tämä on suositeltavin tapa avata ulkopuolisille sivustoille osoittavat linkit. 5. Luo linkki valintaikkunan OK-painiketta napsauttamalla.
KompoZer s. 6/15 5.2 Linkki ankkuriin samalla sivulla Kun samalla sivulla on pitkä, yhtäjaksoinen teksti, on järkevää käyttää ankkureita. Ankkuri on tekstiin merkitty näkymätön kohta, johon voidaan hypätä avainsanaa napsauttamalla. Kun tekstiin tehdään väliotsikoita, on kirjanmerkki luonnollista luoda näiden väliotsikoiden kohdalle. Seuraavaksi sivun alkuun luodaan luettelo tekstin luvuista. Luettelon kohtia napsauttamalla käyttäjä voi nopeasti siirtyä suoraan haluamaansa lukuun tai tekstikappaleeseen. Tekstiin voi tehdä myös paluulinkit, joilla siirrytään takaisin sivun alkuun. Kirjanmerkin luominen Sisältö: Aihe 1 Aihe 2 Aihe 3 Aihe 1 Fjoisjgosij osd siodj osijdosijodjg sodj osjdg ojdogsj odg sdgosdog sjogdjos Paluu Aihe 2 Hsdgs sd sdgos kdgosdk sdgks sdgjs sodgksjd sodkg sdokg sjdkg sdgs sdkg sd sdgsod sg Paluu Aihe 3 Jygs sdgjsod sdg sdgsdg sdgk sdlög sdlgksö dglsdög sdglsö Paluu 1. Tallenna tekeillä oleva sivu, jos sitä ei ole vielä tallennettu tiedostoksi. Sisällysluettelo Väliotsikko kirjanmerkkinä Paluulinkki 2. Merkitse (valitse) se teksti, josta tehdään kirjanmerkki (esimerkiksi väliotsikko edellisessä kuvassa). 3. Napsauta työkalurivin Ankkuri-kuvaketta. KompoZer ehdottaa merkittyä tekstiä kirjanmerkiksi. Voit muuttaa tekstiä, tai hyväksy sellaisenaan OK-painikkeella. Linkin luominen kirjanmerkkiin 1. Valitse se teksti, josta tehdään linkki kirjanmerkkiin siirtymistä varten (teksti sisällysluettelossa sivun alussa). 2. Napsauta työkalurivin Linkki-kuvaketta. 3. Napsauta linkkirivin oikeassa reunassa olevaa alasvetonuolta ja sen jälkeen valitse kirjanmerkki. Luo linkki kirjanmerkkiin OK-painiketta napsauttamalla.
KompoZer s. 7/15 6 Kuvien lisääminen Sivuille voidaan lisätä GIF-, JPG- ja PNG-kuvia. Ennen sivuille liittämistä kuvien koko täytyy säätää jossakin kuvankäsittelyohjelmassa. Tähän voidaan käyttää esimerkiksi ilmaista IrfanViewohjelmaa. Tallenna kaikki sivustossa käytettävät kuvat johonkin sivuston kansioon, esimerkiksi kuvat-alikansioon. Muista tallentaa sivu ennen kuvan lisäämistä. Näin varmistat, että sivu on tallennettu tiedostoksi. Muuten HTML-koodiin tulee vääränlainen viittaus kuvatiedostoon, ja kuva ei näy nettisivulla. Helpoimmin kuva lisätään vetämällä hiirellä sivustonhallinnasta haluttuun kohtaan sivulle.
KompoZer s. 8/15 Sivulle lisätyn kuvan ominaisuuksia pääsee tarkastelemaan ja muuttamaan kaksoisnapsauttamalla kuvaa. Toinen vaihtoehto on napsauttaa kuvaa hiiren kakkospainikkeella ja valitsemalla Kuva: ominaisuudet. Sijainti-välilehdellä voit kirjoittaa Vaihtoehtoinen teksti -kohtaan selitetekstin, joka näkyy nettiselaimessa vietäessä hiiren kohdistin kuvan päälle. Oletuksena näytetään kuvatiedoston nimi. Jos et halua näyttää mitään tekstiä, valitse kohta Älä käytä vaihtoehtoista tekstiä. Mitat-välilehdellä voi määrittää, minkä kokoisena kuva näkyy sivulla. Tätä toimintoa ei kuitenkaan pidä käyttää, vaan kuvan koko on säädettävä oikeaksi kuvankäsittelyohjelmassa. Ulkoasu-välilehdellä säädetään kuvan sijaintia tekstin suhteen. Tavallisimmat valinnat ovat Vasemmalle (teksti rivittyy kuvan vasemmalle puolelle) ja Oikealle (teksti rivittyy kuvan oikealle puolelle). Välistys-kohdassa määritetään tarvittaessa tyhjät reunukset kuvan ympärille. Linkki-välilehdellä kuvaan voidaan lisätä linkki, jolloin kuvaa napsauttamalla päästään siirtymään kirjanmerkkiin samalla sivulla, toiselle sivulle samassa sivustossa tai johonkin muuhun sivustoon.
KompoZer s. 9/15 7 Taulukot Taulukoita käytetään tiedon esittämisen lisäksi yleisesti sivun eri elementtien asettelemiseen. Taulukkoa asettelujen apuna käytettäessä sen reunaviiva määritetään näkymättömäksi. Taulukko lisätään seuraavalla tavalla. 1. Siirrä kohdistin siihen kohtaan, johon haluat lisätä taulukon. 2. Napsauta Taulukko-kuvaketta. 3. Siirry Solu-välilehdelle ja valitse tekstin vaakasuuntaiseksi tasaukseksi Vasemmalle. Valitse pystytasaukseksi Yläreuna. Siirry Nopeasti-välilehdelle, maalaa haluamasi rivi- ja sarakemäärä ja napsauta ruutua hiirellä. 4. Vedä hiirellä taulukko sopivaan leveyteen joko taulukon reunasta tai sivun yläreunan taulukkokahvoista. Taulukon ominaisuuksia pääset muokkaamaan napsauttamalla hiiren kakkospainikkeella taulukkoa ja valitsemalla taulukon solu: ominaisuudet. Valintaikkunan Solut-välilehdellä muokataan yksittäisten solujen ominaisuuksia ja Taulukko-välilehdellä koko taulukkoon liittyviä ominaisuuksia.
KompoZer s. 10/15 Tärkeimpiä taulukon ominaisuuksia: Reunus määrittää uloimman reunaviivan leveyden. Jos arvoksi asetetaan 0, ei taulukon reunaviivoja näytetä. Huomaa kuitenkin, että KompoZer näyttää tästä huolimatta muokkaustilassa taulukossa ohuet punaiset reunaviivat. Viivat eivät tule näkyville selaimessa katsottaessa. täyte välistys Täyte määrittää tekstin ja solun reunan välimatkan. Välistys määrittää uloimman reunaviivan ja solun välisen etäisyyden sekä solujen keskinäisen välimatkan. reunus Korkeus ja Leveys: Taulukon ulkomitat voi määrittää joko pikseleinä tai prosentteina. Määritettäessä koko pikseleinä taulukko pysyy samankokoisena kaikilla näyttötarkkuuksilla. Ilmoitettaessa taulukon koko prosenttiarvona, määritetään taulukon suhteellinen koko selainikkunaan nähden. Kun selainikkunan koko muuttuu (esimerkiksi näyttötarkkuutta vaihdettaessa tai ikkunan kokoa muuten säädettäessä), muuttuu myös taulukon leveys. Taulukon tasaus: Taulukon sijainti vaakasuunnassa. Tärkeimpiä solun ominaisuuksia: Pystytasaus ja Vaakatasaus: määrittävät tekstin tai kuvan sijoittumisen valitussa solussa pysty- ja vaakasuunnassa. Voit valita muokattavan solun Edellinen- ja Seuraava-painikkeilla. Taulukon ja/tai solujen taustaväri määritetään napsauttamalla taulukon solua hiiren kakkospainikkeella ja valitsemalla Taulukon tai solun taustaväri. Valintaikkunan yläreunasta valitaan Taulukko tai Solu riippuen siitä kumman väriä muutetaan. Taulukon väri määrittää solujen välisen välistysalueen värin, tai jos soluille ei ole asetettu eri väriä, myös solujen taustavärin. Solujen väri asetetaan valituille soluille, ja voi olla vaikka joka solussa erilainen. 8 Ulkoasu CSS-tyyleillä Sivujen ulkoasuun liittyvät muun muassa seuraavat seikat sivun taustaväri otsikoiden fontti ja fonttikoko leipätekstin fontti ja fonttikoko linkkien värit elementin tausta, reunat, marginaalit ja täytteet Ulkoasun voi periaatteessa tehdä jokaiselle sivulle erikseen. Näin ei kuitenkaan kannata menetellä, sillä jos kyseessä on useamman sivun laajuinen sivusto, muutosten tekeminen jokaiselle sivulle erikseen on työlästä. Ulkoasu kannattaakin siksi määrittää ulkoista CSS-tyylitiedostoa (Cascade Style Sheet) käyttäen.
KompoZer s. 11/15 CSS-tyylitiedosto sisältää kaikki tarvittavat tyylimääritykset. Tiedoston voi luoda vaikkapa Notepadilla (mieluummin Notepad++, jossa syntaksi esitetään eri väreillä) ja linkittää jokaiselle HTMLsivulle. CSS-tiedoston voi luoda kätevästi myös KompoZerista käsin. CSS-tyylitiedoston luominen Kompozerilla 1. Napsauta Kompozerin työkalurivin CSS-kuvaketta. 2. Napsauta vasemman yläkulman palettikuvakkeen pientä nuolta ja valitse Ulkoinen linkki. 3. Kirjoita luotavan tyylitiedoston nimi URL-kohtaan. Anna nimeksi esimerkiksi tyylit.css. Napsauta Luo tyylisivu -painiketta ja valitse vasemman reunan luettelosta juuri luotu tyylit.css. 1. 3. 2. 4. Napsauta vasemman yläkulman palettikuvaketta, jolloin valintaikkunaan tulee näkyville tyylisääntövalinnat. 5. Luo kaikille tarvittaville HTML-elementeille tyylisäännöt. Valitse ylin vaihtoehto tyyli, jota käytetään kaikkiin tätä tyyppiä oleviin elementteihin, sitten valitse elementti alasvetovalikosta (esim. body) ja napsauta Luo tyylisääntö -painiketta. body: kaikki HTML-elementit ovat body-elementin sisällä, joten esimerkiksi fonttimääritykset kattavat kaiken tekstin p: paragraph- eli kappale-elementti, jonka sisään teksti kirjoitetaan. Tätä ei välttämättä tarvitse luoda. h1: ensimmäisen tason otsikot h2: toisen tason otsikot h3: kolmannen tason otsikot
KompoZer s. 12/15 6. Luodut tyylisäännöt näkyvät vasemmassa reunassa tyylitiedoston nimen alapuolella. Punainen kuvake tyylitiedoston nimen edessä tarkoittaa tallentamatonta tiedostoa. Kaikki määritykset tallennetaan automaattisesti suljettaessa valintaikkuna OK-painiketta napsauttamalla. 7. Napsauta muokattavaa tyylisääntöä ja siirry sitten esimerkiksi Tekstivälilehdelle, jossa määritetään tekstin asetukset. Valitse ensimmäiseksi fonttiperhe, esimerkiksi Ennalta määritetty -kohdasta Arial, Helvetica, sans-serif. Voit myös valita Käytä määrättyä kirjasinlajia -kohdan ja luoda haluamasi fonttimäärityksen kirjoittamalla esimerkiksi Verdana, Arial, Helvetica. Ensimmäinen fontti listalla on se mitä selain pyrkii käyttämään. Jos sitä ei löydy, käytetään jotain seuraavista. Määritä fontin koko Tekstin koko- kohdasta valitsemalla alasvetovalikosta 0px. Kasvata sitten lukuarvoa alasvetovalikon oikealla puolella olevilla nuolipainikkeilla. Vastaavalla tavalla voit säätää tekstirivien välistä etäisyyttä (Rivin korkeus). Valintaikkunan Tausta-välilehdellä määritetään elementin taustaväri tai -kuva. Kun määritys tehdään body-elementille, asetetaan sivun taustaväri. Esimerkiksi h-elementeillä taustavärillä voidaan korostaa otsikkoa. Reunukset-välilehdellä elementille voi asettaa reunaviivan. Sitä voi käyttää esimerkiksi otsikkotyylien yhteydessä. Laatikko-välilehdellä elementille voi asettaa marginaalin (etäisyyden) muihin elementteihin tai täytteen. Täyte-asetuksella esimerkiksi reunaviivan ei tarvitse olla aivan kiinni tekstissä, sillä asetuksella saadaan määritettyä sopiva tekstin ja reunan välinen etäisyys. 8. Tee sopivat määritykset kaikille luomillesi tyylisääntöelementeille (body, h1, h2 jne.).
KompoZer s. 13/15 CSS-tyylitiedoston liittäminen HTML-tiedostoihin Luotaessa CSS-tyylitiedosto edellä kuvatulla tavalla, se myös liitetään siihen HTML-tiedostoon, josta käsin CSS-tyylieditori avattiin. Kerran luotu tyylitiedosto liitetään muihin HTML-tiedostoihin seuraavasti. 1. Avaa editoriin muokattavaksi se HTML-sivu, johon haluat liittää tyylitiedoston. 2. Napsauta CSS-kuvaketta ja valitse palettikuvakkeen takaa Ulkoinen linkki. 3. Etsi tyylitiedosto Valitse tiedosto -painikkeella. 4. Napsauta Luo tyylisivu -painiketta, jolloin tyylitiedosto linkitetään sen hetkiseen HTMLtiedostoon (tyylitiedostoa ei luoda uudelleen, kuten painikkeesta voisi päätellä). Linkkien tyylit CSS-tyylieditorilla on helppo luoda tyylimääritykset linkeille niin sanottujen pseudoelementtien avulla. Nämä elementit ovat: a:link avaamattomien linkkien ominaisuudet a:visited avattujen linkkien ominaisuudet a:hover kun kohdistin saapuu linkin päälle Huomaa, että nämä kolme linkkimääritystä on luotava tässä järjestyksessä (oltava CSStiedostossa tässä järjestyksessä). 1. Siirry CSS-editoriin ja valitse vasemman reunan luettelosta ulkoinen tyylitiedosto. 2. Napsauta vasemman yläkulman palettikuvaketta. 3. Valitse oikealta puolelta kohta tyyli, joka koskee kaikkia elementtejä seuraavan valitsimen mukaisesti, valitse alasvetovalikosta pseudoelementti a:link ja napsauta Luo tyylisääntö - painiketta. 4. Luo samalla tavalla a:visited ja a:hover. Muista elementtien järjestys!
KompoZer s. 14/15 5. Tee kullekin luodulle elementille tyylimääritykset. Lähinnä kyseeseen tulevat tekstin väri ja tehosteet (tekstin koristeet), mutta kaikki muutkin tyylimääritykset linkeille ovat mahdollisia (kuten taustaväri, reunaviiva jne.). 6. Testaa ja kokeile, miltä eri linkit näyttävät (a:link, a:visited, a:hover). Pyri luomaan sellaiset määritykset, että linkkien tyyli on yhteneväinen, mutta erottuvat silti toisistaan ja muusta tekstistä. Tämän voi toteuttaa esimerkiksi siten, että kaikkien linkkien väri on samansävyinen, mutta värin voimakkuus vaihtuu. Kokeile myös, mihin linkkeihin alleviivaus sopii ja mihin ei. Luokkavalitsimen luominen Luokkavalitsimen avulla voidaan soveltaa tyylejä monessa eri elementissä. Esimerkiksi voidaan luoda luokkavalitsimet.keskitetty ja.oikeatasaus, joilla elementti voidaan tasata sivusuunnassa sivun keskelle tai oikeaan reunaan. Luokkavalitsimen voi liittää vaikkapa otsikko- tai kappaleelementtiin. 1. Siirry CSS-editoriin ja valitse vasemman reunan luettelosta ulkoinen tyylitiedosto. 2. Napsauta vasemman yläkulman palettikuvaketta. 3. Valitse oikealta puolelta nimetty tyyli, joka koskee luokkia. Kirjoita tekstikenttään pisteen kera tyylin nimi, esimerkiksi.keskitetty. Napsauta Luo tyylisääntö -painiketta. 4. Luo samalla tavalla tyyli.oikeatasaus. 5. Tee luoduille luokkavalitsimille tyylimääritykset valitsemalla Teksti-välilehdeltä Tasauskohdasta Keskitä (.keskitetty-luokkavalitsimelle) Oikealle (.oikeatasaus-luokkavalitsimelle)
KompoZer s. 15/15 Luokkavalitsimen käyttäminen 1. Valitse se tekstialue, johon haluat soveltaa tyyliä. 2. Valitse työkalurivin vasemmanpuoleisesta alasvetovalikosta elementti (otsikko, kappaletyyli), jota kyseisessä kohdassa haluat käyttää. Valitse oikeanpuoleisesta alasvetovalikosta luokkavalitsin eli tyyli elementille.