Harjoituksessa www-sivuston kaikilla sivuilla käytetään samoja värisävyjä tietyissä sivun osissa. Värisävyt poimitaan kuvasta Paint-ohjelmalla.
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.
<p style="color: Aqua"> Väri nimellä </p>
<p style="color: #00FFFF"> Väri heksalukuna </p>
<p style="color: RGB(0,255,255)"> Väri RGB-koodina </p>
<p style="color: PaleVioletRed"> Haalea punavioletti </p>
- astettaa tekstinvärin<p style="background-color: #6B8E23"> Oliivinvihreä </p>
- astettaa taustanvärin<p style="background-color: RGB(117,129,71) color= RGB(255,233,1)"> Värejä </p>
- astettaa taustan- ja tekstinvärin
Tämän tekstin taustaväri on asetettu RGB-arvossa desimaalilukuna, RGB( 255, 9, 87).
Sama taustaväri mutta asetettu heksalukuna, #FF0957.
Desimaaliluku 255 = heksaluku FF = binääriluku 1111 1111
Desimaaliluku 9 = heksaluku 09 = binääriluku 0000 1001
Desimaaliluku 87 = heksaluku 57 = binääriluku 0101 0111
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 2. Käynnistä Paint-ohjelma (vasemmalla alhaalla Windows-painike ja Windowsin apuohjelmat):
2. Seuraavaksi värikoodi vaihdetaan HTML-koodauksessa menu - li elementin taustaväriksi RGB-koodilla.
.menu li
-ohje ja asetus
background-color :#33b5e5;
RGB(119,105,44)
3. Laitetaan sama värikoodi aside elementin taustaväriksi.
.aside
-ohje ja background-color :#33b5e5;
Tilanne tässä vaiheessa www-sivulla, menu- ja aside-osissa väri vaihdettu:
4. Vaihdetaan header- ja footer-osien taustaväri:
.header
-ohje ja background-color :#9933cc;
Tilanne www-sivulla, header- ja footer-osissa väri vaihdettu:
5. Asetetaan koko www-sivun taustaväri:
body{ background-color: RGB(250,245,220); }
Tilanne www-sivulla, body-elementtille taustaväri asetettu:
<div class="col-3 col-s-3 menu"> <ul> <li> Landscape </li> <li> River </li> <li> Forest </li> <li> City </li> </ul> .
<a href="www-sivun tiedoston nimi"> LINKKITEKSTI </a>
- LINKKITEKSTI-sanaan liitetään linkki jollekin sivulle<li> <a href="sivu.html"> Sivu 1 </a> </li>
- listan Sivu 1 tekstiin liitetty linkki joka avaisi sivu1.html tiedoston selaimeen target="_self"
tai avautuuko
sivu uudelle välilehdelle selaimessa target="_blank"
<li> <a href="sivu.html#kuvasto"> Kuvasto </a> </li>
<h2 id="kuvasto"> Kuvasto </h2>
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; }
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 tekstiLinkkien CSS-muotoiluja löytyy täältä josta perusmuotoilut on kopioitavissa muokattavaksi, alla sama CSS-koodaus jolla linkit voidaan muotoilla:
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;CSS-ohje jolla linkkitekstin alla on viiva:
text-decoration: underline;CSS-ohje jolla fontin koko suuremmaksi:
font-size: 110%;
Lisää linkeille muotoiluohjeita seuraavasti (yllä CSS-ohjeet):
Seuraavassa vaiheessa 4, tehdään varjoja sekä etsitään sivustolle erilainen fontti-tyyppi sekä perehdytään itse nimetyn CSS-ohjeen saloihin.