Cascading Style Sheets (CSS) -perusteet - Demo 8

• Alkuvalmistelut
• Navigointipalkkien rakenne
  • Murupolku
  • Päänavigointi
  • Navigointipalkkien linkit
• Ulkoasun määrittäminen
• Navigoinnin ulkoasu
• Linkkien muotoilu
• Kuvat
• Testaus
• Lisätehtäviä
  • Taulukot
  • Absoluuttinen asemointi

Alkuvalmistelut

Näissä demoissa opetellaan perusteet WWW-sivun ulkoasun tekemisestä CSS-kielen avulla. Jatketaan edelliskerran tehtävistä ja tehdään Nanonanon kotisivuille siisti ulkoasu. Jos edelliset demot jäivät kesken, niin tee ne ensin valmiiksi..

Navigointipalkkien rakenne

Tarkoituksena on luoda jokaiselle sivulle navigointi. Navigointi koostuu kahdesta osasta. Sivun yläreunaan halutaan palkki, joka kertoo, missä sivu sijaitsee sivuston hierarkiarakenteessa. Kustakin navigointipalkin tekstin osasta tehdään linkki kyseiselle sivulle, paitsi tietenkin viimeisestä, koska se viittaa sivulle, jota parhaillaan selataan.

Murupolku

Murupolkunavigointi kertoo missä hakemistossa sijaitsemme sivustolla. Listan osia napauttamalla pääsee ylemmille tasoille.

1. Käynnistä Amaya. Avaa W:-asemalta Nanonano-sivuston etusivu-dokumentti.
2. Lisää dokumentin alkuun (body-elementin sisälle) div-elementti. Anna lohkon class-attribuutin arvoksi navbartop. Attribuutteja (ominaisuuksia) voi lisäillä työkalupalkin Attributes-kohdan alta:
   • Valitse ensin Structure-näkymästä elementti jolle haluat lisätä ominaisuuksia.
   • Valitse Attributes-lohkon Insert-listasta haluamasi attribuutti
   • Kirjoita attribuutille arvo
   • Tallenna attribuutti ja arvo Apply-painikkeella
3. Tallenna pieni kuva Nanonanosta W-asemalle samaan hakemistoon etusivun kanssa.
4. Lisää lohkon sisään järjestämätön lista (ul) ja lisää ainoaan lista-alkioon (li) tallentamasi kuva.
5. Tekemäsi listan ulkoasu määritellään myöhemmin.

Päänavigointi

Lisäksi sivun toiseen laitaan halutaan yleisnavigointi, josta löytyy sivuston pääkohdat. Kustakin listan kohdasta tehdään linkki kyseiselle sivulle. Navigointipalkkien muotoilu tehdään myöhemmin tässä demossa. Tässä vaiheessa keskitytään määrittämään palkkien sisältö ja rakenne.

1. Tee ensimmäisen div-elementin jälkeen toinen div-lohko. Sijoita tämän lohkon class-attribuutin arvoksi navbar.
2. Lisää lohkoon järjestämätön lista (ul) ja siihen lista-alkioiksi kaikki mahdolliset alasivut vaikka toteutettuna ovatkin vain galleria ja opiskelu (Artikkelit, Galleria, Harrastukset, Linkit, Opiskelu, Työt ja Vieraskirja).
3. Tee sanoista Galleria ja Opiskelu linkit kyseisiin alikansioihin. Katso, että viitteisiin ei jää index.html-sivua, vaan viittaus on pelkästään kansioon.

Navigointipalkkien linkit

Usealla sivulla toistuvan navigoinnin automaattiseen lisäämiseen on tekniikoita, joita emme käsittele tällä kurssilla vaan liitämme navigointipalkit leikepöydän avulla kopioimalla.

1. Kopioi molemmat edellä tekemäsi div-lohkot leikepöydälle.
2. Avaa alihakemistojen index.html-tiedostot muokkaamista varten.
3. Liitä div-lohkot leikepöydältä kunkin dokumentin body-elementin alkuun.
4. Muokkaa kussakin tiedostossa ensimmäisen div-lohkon sisällä olevaa listaa siten, että lisäät listakohdaksi alasivujen otsikot. Esimerkiksi opiskelu-kansion index.html-tiedostoon tulisi siis lista:
   • Nanonanon kuva
   • Opiskelu
5. Tee listakohdista linkit oikeisiin sivuihin. Käytä suhteellista viittausta.
   • Nanonanon kuvasta tehdään linkki etusivulle. Korjaa myös kuvan osoite!
   • Viimeisestä kohdasta ei tehdä linkkiä, koska se viittaa samalle sivulle.
   Esimerkiksi opiskelu-hakemiston index.html-tiedoston body-elementin alkuun tulisi:

   <div class="navbartop">
   <ul>
     <li><a href="../"><img src="../nanonano.png" alt="Nanonano" /></a></li>
     <li>Opiskelu</li>
   </ul>
   </div>
   

6. Päivitä myös toisen div-lohkon suhteelliset viittaukset kuntoon eri tiedostoissa.
7. Testaa koko sivuston toimivuus jollakin selaimella. Testaa sivu suoraan W:-asemalta ja users.jyu.fin kautta. Miksi linkit toimivat eri tavalla suoraan W:-asemalta käytettyinä kuin users.jyu.fin kautta?

Ulkoasun määrittäminen

1. Tallenna pohja.css samaan kansioon nanonanon etusivudokumentin kanssa.
2. Muuta jokainen tekemäsi XHTML-dokumentti käyttämään pohja.css-tiedostoa. Linkitä css-tiedosto xhtml-dokumenttiin Amayassa valinnalla Format|Stylesheets|Link. Dokumenttisi head-osaan pitäisi ilmestyä rivi:

   Varmista, että viittaus css-tiedostoon pysyy suhteellisena kaikissa tiedostoissa.

3. Saat Amayassa dokumenttisi ulkoasun päivitetty F5-painikkeella
4. Tarkista myös WWW-selaimella miltä sivusi näyttävät nyt.
5. CSS-kielellä voidaan määritellä oletusulkoasu halutuille XHTML-elementeille. Voidaan luoda myös uusia tyylimäärityksiä, joita voi ottaa XHTML-dokumentissa käyttöön halutessaan. Esimerkkejä CSS-määrityksistä löytyy kurssimonisteesta ja luentosivulta.
6. Avaa pohja.css tiedosto Amayalla uuteen välilehteen
7. Vaihda sivulla käytetty kirjasin seuraavasti:
   • Etsi body-lohko. Ohjeet CSS:n merkintätavoista löytyvät luennolta 3.
   • Kirjoita ominaisuuden font-family arvoksi (kaksoispisteen jälkeen):

     Verdana, Arial, "Trebuchet MS", sans-serif;

   • Verdana, Arial ja "Trebuchet MS" ovat käytettävien kirjasimien nimiä. Listasta ensimmäisenä löytyvää kirjasinta käytetään sivulla oletuksena. WWW-sivun tekijä ei voi tietää mitä kirjasimia on asennettuna kunkin selaajan koneelle, joten on pakko antaa useita vaihtoehtoja.
   • sans-serif tarkoittaa päätteetöntä kirjasinperhettä, josta poimitaan käyttöön jokin kirjasin, jos mitään muuta kirjasinta ei ole käytettävissä.
8. Tallenna CSS-tiedosto ja päivitä F5-painikkeella jokin XHTML-tiedostosi niin näet miten ulkoasu muuttuu. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
9. Määritellään seuraavaksi sivun marginaali. Lisää body-elementille määrittelyt:

   margin-left: 5%;
   margin-right: 5%;
   margin-top: 1%;
   margin-bottom: 1%;

   Määritellään siis koko sivun vasemmaksi ja oikeaksi marginaaliksi 5 % sivun koosta. Ylä- ja alamarginaaliksi määritellään 1 % sivun koosta.

10. Lisää body-elementtiin myös rivivälimääritys:

    line-height: 150%;

    Isompi riviväli parantaa luettavuutta.

11. Määritellään lisää marginaaleja. Nyt h1-, h2-, ja p-elementeille. Lisää näille kaikille määritykset seuraavaan tapaan:

    h1 {
      margin-left: 1em;
      margin-right: 1em;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }

    em-yksikkö suhteuttaa koon määrityksen selaimen oletusfontin kokoon.

12. Amayalla voit lisätä uusia CSS-sääntöjä Style-painikkeella aukeavasta dialogista . Jo olemassaolevia sääntöjä ei kuitenkaan voi tällä dialogilla muuttaa vaan ainoastaan lisätä uusia. Voit kokeilla mitä kaikkea dialogista löytyy Characters-välilehdeltä.

Navigoinnin ulkoasu

1. Määritellään seuraavaksi sivustolla käytetylle navigointipalkille erottuva ulkoasu.
2. Lisää uusi .navbar-tyyli ja sille reunus seuraavalla tavalla:

   .navbar {
   border-style: solid;
   border-width: thin;
   border-color: black;
   }

   Kokeile sivujen toimintaa selaimella.

   Pisteellä (.) alkavat tyylit ovat määrityksiä, joita voidaan käyttää minkä elementin yhteydessä tahansa kertomalla XHTML-dokumentissa class-attribuutilla käytetyn tyylin nimi.

3. Navigointipalkille voidaan määritellä myös taustaväri. Aina taustaväriä (background-color) määriteltäessä pitää muistaa määritellä myös tekstin väri (color). Lisää värimääritykset:
   • Avaa CSS-dialogi
   • Siirry Colors-välilehdelle
   • Valitse paletista sopiva väri taustaksi ja tekstin väriksi
   • Dialogi lisää värit #-alkuisina heksadesimaalimuodossa olevina RGB-arvoina. Värien määritteleminen RGB-koodeina on selitetty esim. RGB Color Values -dokumentissa.
4. Navigointipalkille pitää määrittää myös normaalista poikkeava leveys, jotta se sopii siististi sivun jompaan kumpaan laitaan:

   width: 20%;

5. Navigointipalkin siirtäminen jompaan kumpaan laitaan onnistuu helposti float-ominaisuudella, jolla voi liu'uttaa elementin oikeaan (right) tai vasempaan (left) laitaan:

   float: right;

6. 
   Määrittele oma ulkoasu myös sivun yläosassa olevalle leivänmurunavigoinnille, joka käyttää .navbartop-css-tyyliä. Aseta taustaväriksi #D69C52.
7. Määritellään lista näyttämään leivänmurunavigoinnin sisällä muulta kuin perinteiseltä listalta. Lisää seuraava uusi tyylimäärittely:

   .navbartop ul li {
     display: inline;
   }

   Ylläoleva määrittely on voimassa .navbartop-tyylin sisällä olevan ul-listan li-elementeillä, eli kyseessä on ns. asiayhteyden mukaan määräytyvä tyyli.

   display-ominaisuudella muutetaan lista ulkoasultaan tavalliseksi tekstitason (inline) elementiksi.

   Tallenna ja kokeile.

8. Lisätään linkkien väliin pieni pystysuora viiva. Muutetaan navbartop:ssa olevan linkkilistan rajoja seuraavilla lisäyksillä edellä määriteltyyn tyyliin (.navbartop ul li):

   border-left: 1px solid black;
   margin-left: 0.5em;
   padding-left: 0.5em;

   Välistys tulee elementin sisällön ja rajan väliin. Marginaali taas rajan ulkopuolelle.

9. Lisää hieman välistystä (padding) .navbartop-tyylin sisällä olevaan ul:än ylä- ja alapuolelle. Poista samalla marginaali ja padding kokonaan vasemmasta laidasta, niin navigointi siirtyy siististi aivan vasempaan reunaan. Samalla voit lisätä pienen vasemman reunan välistyksen .navbartop-tyyliin, jotta kuva ei ole ihan kiinni lohkon reunassa.
10. 
    Vielä pieneksi kauneusvirheeksi jää vasemmanpuolimmaisen linkin viereen tuleva turha palkki. Se voidaan piilottaa seuraavalla määrityksellä:

    .navbartop ul li:first-child {
      border-left: 0;
      margin-left: 0;
      padding-left: 0;
    }

    Edelläoleva tyyli on voimassa vain ul-elementin ensimmäisessä li-lapsielementissä eli ensimmäisessä li-elementissä.

11. Siisti .navbar-tyylin sisällä olevaa linkkilistaa. Siirrä lista aivan laatikon vasempaan reunaan.
12. Tallenna CSS-tyylisi pohja.css-tiedostoon.
13. Validoi CSS-tiedostosi W3C CSS Validatorilla valitsemalla Firefoxiin asentamastasi Web Developer -työkalupalkista Tools | Validate CSS. Korjaa mahdolliset virheet ja varoitukset.

Linkkien muotoilu

1. WWW-sivun linkeille on mahdollista määrittää ns. pseudoluokkia, joiden ominaisuudet tulevat voimaan riippuen siitä, onko linkki aktiivinen, onko hiiri linkin päällä tai onko linkin viittaamassa osoitteessa jo käyty.
   • a määrittää linkeille yhteiset ominaisuudet.
   • a:link määrittää käymättömien linkkien ulkoasun.
   • a:visited määrittää käytyjen linkkien ulkoasun.
   • a:hover määrittää linkin ulkoasun hiiren ollessa linkin päällä.
   • a:active määrittää aktiivisen linkin ulkoasun.

   Määritä linkeille seuraavat ominaisuudet:

   • Käymättömän linkin väriksi sininen.
   • Käydyn linkin väriksi purppura.
   • hover-efektiin linkin taustaväriksi #D69C52 ja tekstin väri valkoiseksi.
2. Poista lisäksi navigointipalkkien sisällä olevista linkeistä alleviivaus. Muista poistaa alleviivaus sekä käymättömiltä että käydyiltä linkeiltä.

   .navbartop a:link, .navbar a:link {
     text-decoration: none; /* poistaa alleviivauksen */
   }

   Jos sama tyylimääritys sopii useampaan paikkaan, niin sama määritys voidaan tehdä helposti vaikka useammalle elementille, jos luettelee elementit pilkulla eroteltuina. Sama pätee myös asiayhteyden mukaan määräytyville tyyleille. Yllä oleva esimerkki tarkoittaa, että .navbartop-tyylin sisällä olevien käymättömien linkkien ja .navbar-tyylin sisällä olevien käymättömien linkkien ulkoasua muutetaan.

3. Navigointipalkkien linkkien väritys kannattaa myös määrätä hieman leipätekstin linkeistä eroaviksi. Keksi sopivat väriarvot ja laita ne CSS-tiedostoon samoihin luokkiin, joista poistit alleviivauksen navigointipalkkien linkeiltä.
4. Tallenna tyylitiedosto.

Kuvat

Muotoillaan myös ylänavigoinnissa oleva Nanonano-kuvalinkki järkevän näköiseksi.

1. Kirjoita asiayhteydestä riippuva tyyli, joka poistaa reunukset ylänavigoinnin sisällä olevilta kuvilta.
2. Lisää samaan tyyliin määritys, joka keskittää sisällön pystysuunnassa.
3. Lisää Nanonanon sivuston etusivudokumenttiin kuva Nanonanon lemmikkipupusta:

   

   Älä tallenna pupua omaan kansioosi vaan käytä suoraan ylläolevaa kuvaa. Lisää kuva dokumenttiin oman kappaleen (p-elementti) sisään.
4. Lisää kuvan sisältävän p-elementin class-attribuuttiin arvo kuva.

   <p class="kuva">

5. Lisää css-tiedostoon .kuva-tyyli, jossa liu'utat (float) kuvan oikeaan laitaan. Määrittele kuvan ympärille siistit marginaalit.
6. Kokeile selaimella miten teksti kiertää kuvaa.
7. Voit myös halutessasi liu'uttaa address-lohkon oikeaan laitaan samalla tavalla.
8. Tallenna tyylitiedostosi.

Testaus

• Validoi tekemäsi CSS-tiedosto valitsemalla Web Developer -työkalupalkista Tools | Validate CSS. Korjaa mahdolliset virheet CSS-tiedostosta.
• Testaa, että kaikki Nanonanon sivut näyttävät järkeviltä Firefoxilla, Operalla ja Internet Explorerilla. Ei tarvitse hätääntyä, jos sivut eivät näytä täysin samanlaisilta jokaisella selaimella. Täysin samanlaiseen ulkoasuun on turha edes pyrkiä, koska selaimia ja käyttöympäristöjä on liian monenlaisia. Oleellisinta on, että sivusto on jokaisella selaimella järkevästi luettavissa.

Lisätehtäviä

Taulukot

Muotoile Nanonanon Opiskelu-sivulla oleva taulukko siistiksi:

• Lisää koko taulukon ympärille raja.
• Lisää jokaisen solun ympärille raja.
• Muotoile otsikkosolut (th) selkeästi erottumaan varsinaisista soluista (td).
• Keskitä otsikkosolujen sisältö.
• Tasaa muiden solujen sisältö solun vasempaan reunaan.
• Muotoile myös taulukon otsikko (caption) sopivaksi.
• Määritä solujen väliin neljän pikselin alue.
• Voit myös laittaa soluille hiukan välistystä (padding).

Absoluuttinen asemointi

• Tutustu tarkemmin asemointiin
• Yritä asemoida pupun kuva sivun oikeaan alalaitaan käyttämällä absoluuttista asemointia
• Yritä tehdä sama kiinnitetyllä asemoinnilla. Mitä eroa näissä on?