Väriteemaan muokkaaminen ja muutakin CSS-muotoiluja

Harjoituksessa www-sivuston kaikilla sivuilla käytetään samoja värisävyjä tietyissä sivun osissa. Värisävyt poimitaan kuvasta Paint-ohjelmalla.

Tehtävä 1. Värit etusivun kuvasta

Väriteema www-sivulle voidaan rakentaa poimimalla värit kuvasta. Tällä tavalla voidaan esimerkiksi toteuttaa yrityksen tai muun yhteisön www-sivut käyttäen Windowsin Paint-ohjelmaa.

1. TAVOITE:

• header- ja footer-elementtien taustaväri on sama tummaväri
• menu- ja aside-elementeissä sama tumma taustaväri joka on eri väri kuin edellisissä (yllä)
• body-elementin eli sivun taustaväri on vaalea, kuvasta otettu ja sellainen mistä teksti erottuu
• menu-elementissä painikkeiden taustaväri sekä tekstinväri vaihtuu kun hiiren osoitin on kohdalla
• menu-elementin painikkeisiin tehdään linkit ja tarvittavat tekstivärit eri tilanteissa
• www-elementeille varjoja, esimerkiksi kuvalle, menu-painikkeille ja aside-osalle
• Käytetään Googlen fontti-tyyppiä

2. Käynnistä Paint-ohjelma (vasemmalla alhaalla Windows-painike ja Windowsin apuohjelmat):

• Avaa aiemmin tallennettu kuva1.jpg (auton kuva) Paint-ohjelmaan
• Kuvaa voi zoomata (suurentaa) Näytä - Lähennä valinnalla
• Valitaan aluksi Paintissä Värivalitsin-työkalu, värivalitsimella voidaan poimia kuvasta väri
  
• Valitaan värivalitsimella tummanvihreä väri (kuva) keltaisen renkaan alueelta
  
• Valittu väri (vasemmalla kuvassa), klikkaa Muokkaa värejä (kuvassa oikealla).
  
• Aukeavassa Muokkaa värejä-ikkunassa, tarvittava värikoodi on oranssilla ympyröity ja halutessa voi oikeassa reunassa olevalla kolmiolla säätää värisävyä
  
• Siirrä Muokkaa värejä sellaiseen paikkaan että näet koodin ja Notepad-ohjelmassa koodauksen yhtä aikaa.

2. Seuraavaksi värikoodi vaihdetaan HTML-koodauksessa menu - li elementin taustaväriksi RGB-koodilla.

• Etsi HTML-koodin alusta style-elementistä,
  • .menu li -ohje ja asetus background-color :#33b5e5;
  • kirjoita keltaisen kohdan paikalle
    värikoodi seuraavasti RGB(119,105,44)
  • tarkista vielä että rivin lopussa on puolipiste ( ; )
• Talleta HTML-tiedosto ja päivitä www-sivu selaimessa
• Tarkista näkyykö Paint:ssä valittu väri www-sivulla

3. Laitetaan sama värikoodi aside elementin taustaväriksi.

• Etsi HTML-koodin alusta ylhäältä style-elementistä,
  • .aside -ohje ja background-color :#33b5e5;
    kirjoita (tai kopioi-liitä) sama RGB-koodi tännekin
  • tarkista vielä että rivin lopussa on puolipiste ( ; )
• Talleta HTML-tiedosto ja päivitä www-sivu
• Tarkista näkyykö tämäkin www-sivulla

Tilanne tässä vaiheessa www-sivulla, menu- ja aside-osissa väri vaihdettu:

4. Vaihdetaan header- ja footer-osien taustaväri:

• Jälleen Paint-ohjelman Värivalitsimella valitaan kuva1.jpg kuvasta väri
• Otetaan kuvasta tällä kertaa tummahko ruskea-sävy
• Vaihda valittu RGB-värikoodi aluksi header-osan background-color -muotoiluun HTML-koodauksen style-osassa
• .header -ohje ja background-color :#9933cc;
• kirjoita keltaisella korostetun värikoodin kohdalle valitsemasi värin RGB-koodi
• Kopioi RGB-värikoodi ja Liitä se footer-osan background-color -muotoiluun
• Tallenna ja Päivitä sekä Tarkista tulos, www-sivun ylä- ja ala-osan väri

Tilanne www-sivulla, header- ja footer-osissa väri vaihdettu:

5. Asetetaan koko www-sivun taustaväri:

• Jälleen Paint-ohjelman Värivalitsimella valitaan kuva1.jpg kuvasta väri
• Otetaan kuvasta auton ja pilvien välistä vaalea-sävy
• Koko www-sivun tausta asetetaan body-elementille. Koska style-elementissä ei ole body-elementille vielä tehty muotoiluohjetta,
  on ohje kirjoitettava style-elementtiin.
  Tee style-elementin alkuun tyhjä rivi ja kirjoita sinne seuraava:

  body{
    background-color: RGB(250,245,220);
  }
         

• Tallenna ja Päivitä sekä Tarkista tulos, www-sivun ylä- ja ala-osan väri

Tilanne www-sivulla, body-elementtille taustaväri asetettu:

MENU, LIIKKUMINEN WWW-SIVUSTOLLA

Tilanne ennen ja jälkeen värin vaihtamisen (kuva alla). Liikutettaessa hiiren osoitinta menu-osassa, kunkin menu-osan väri vaihtuu hover-väriksi (sininen sävy vasemmalla). Tavoiteena on vaihtaa väri kuvan oikean puolen mukaiseksi.

1. Värin vaihto kohdistuu www-sivulla menu-osaan ja siellä listaan sekä ns hover-asetukseen. Etsitään siten HTML-koodauksen alusta style-elementistä muotoilu-ohje jossa lukee menu-li-hover tyyppiset asiat:

   .menu li:hover {
     background-color: #0099CC; 
   }
   

• Poimi jälleen auto-kuvasta Paint-ohjelmassa värivalitsimella väri, vaalea sävy auton vierestä kivestä
• vaihda yllä mainittuun kohtaan CSS-ohjeessa (keltainen) poimimasi RGB-koodi
• Talleta, päivitä ja tarkista www-sivulla

2. Seuraavaksi rakennetaan menu-osaan linkit muille sivuille.
Linkit koodataan menu:n HTML-osaan keltaisella merkittyihin kohtiin.

      <ul>
       <li>  Landscape  </li>
       <li>  River  </li>
       <li>  Forest  </li>
       <li>  City  </li>
      </ul>
   

3. Aluksi ensimmäinen linkki, linkki joka avaa etusivun selaimeen:

       <li><a href="index.html"> Landscape </a> </li>
   

4. Menu:n kolmeen seuraavaan tulee linkit tiedostoihin sivu1.html (River), sivu2.html (Forest) ja sivu3.html (City(.
Koodaa myös nämä, helpointa kopioida Landscape-kohdan linkki ja vaihtaa vain tiedoston nimi.
Tallenna tiedosto ja päivitä selain.

Tilanne www-sivulla, menu-osaan linkit lisätty:


Koska harjoituksessa ei ole vielä kuin index.html -tiedosto, ei kokeiltaessa muita sivuja löydy. Loput sivut luodaan kun etusivu on viimeistelty täysin valmiiksi.

5. Menu:n "painikkeiden" tekstit tässä vaiheessa eivät enään olekaan valkoisia, korjataan tämä seuraavaksi.

Linkin sisältävien painikkeille, eli li-elementeille on tehtävä CSS-muotoilut eri tilanteita varten kun:

    - www-sivu avautuu selaimeen, esim. valkoinen teksti
    - hiiren osoitin on linkin päällä, esim musta teksti
    - hiiren valinta-painiketta painetaan, esim oranssi teksti
    - linkkiä on käytetty eli valittu, esim. valkoinen teksti
   

a:link {		   /* linkki sivun avautuessa, vaihda valkoiseksi */
    color: red;
}
a:visited {        /* linkki jota käytetty, vaihda valkoiseksi */
    color: green;
}
a:hover {          /* linkki kun hiiren osoitin kohdalla, vaihda mustaksi */
    color: hotpink;
}
a:active {         /* linkki kun hiiren valinta-painiketta painetaan, vaihda oranssiksi */
    color: blue;
} 
   

Kopioi yllä oleva muotoiluohje index.html tiedostoon style-elementtiin, liitä .aside-ohjeen yläpuolelle (tee tyhjä rivi, liitä kopio).

Tallenna ja päiväitä selain sekä testaa. Alla tilanne kun värejä ei ole vaihdettu:

6. Vaihda edellä lisättyyn menun-muotoilu-ohjeeseen linkkitekstien värit kohdan 5 alussa mainittuihin.
Tilanne kun linkkien värit vaihdettu (Forest-linkin fontikoko suurempi):

7. Seuraavaksi muokkaillaan hiukan linkkien CSS-muotoiluja lisää, alla joukko pieniä kikkoja linkin muotoiluun.

CSS-ohje jolla linkkitekstin alla ei ole viivaa:

    text-decoration: none;
   

    text-decoration: underline;
   

    font-size: 110%;
   

Lisää linkeille muotoiluohjeita seuraavasti (yllä CSS-ohjeet):

• www-sivun auetessa, linkillä ei alla viivaa
• linkki jota käytetty, linkillä ei alla viivaa
• hiiren osoitin linkin päällä, fontin koko 110%
• hiiren painiketta painetaan, linkin alleviiva

Seuraavassa vaiheessa 4, tehdään varjoja sekä etsitään sivustolle erilainen fontti-tyyppi sekä perehdytään itse nimetyn CSS-ohjeen saloihin.