Tämä sivupohja on toteutettu kokonaan html5 ja css3 kielillä. Sitä saa käyttää ja muokata täysin vapaasti. Se on tehty lähinnä oppimista varten, esimerkkien avullahan sitä parhaiten oppii, kunhan perusteet tietää. Tässä artikkelissä kerrotaan myös muutamia vinkkejä ja neuvoja miten käytät hyväksesi uusia html5 ja css3 standardeja.
 |
| Klikkaa nähdäksesi suurempana |
Lataa sivupohja
http://www.multiupload.com/R65P63W3ZG
Sivupohjan muokkaaminen
Jos et omaa aikaisenpaa kokemusta html:stä tämä voi olla hieman hankalaa. Tässä kuitenkin ohjeet muutamaan yksinkertaiseen ja helppoon muutokseen.
Taustakuvan vaihto
- Voit vaihtaa taustakuvan yksinkertaisesti laittamalla uuden vanhan tilalle
Taustakuvan käyttäytymisen muuttaminen
- Aloita avaamalla main.css, joka sijaitsee css-kansiossa (notepadilla, jos sinulla ei ole html-editoria)
- body-tagin ensimmäisellä rivillä pitäisi olla parametri background
- Muokkaamalla arvoja voit vaikuttaa siihen, miten taustakuva käyttäytyy (lue lisää w3schools.com)
Logon fontin vaihto
- Aloita avaamalla index.html (notepadilla, jos sinulla ei ole html-editoria)
- Etsi head-tagin sisältä '<link href='http://fonts.googleapis.com/...'. Tämä on ensimmäinen rivi, jonka korvaat uudella viimeisessä vaiheessa, joten jätä tiedosto auki
- Avaa main.css, joka sijaitsee css-kansiossa ja etsi #banner-id (ctrl+f)
- Vaihda uuden fontin nimi vanhan tilalle kohtaan 'font-family: 'Paytone One';'. Tämä on toinen rivi, jonka korvaat seuraavassa vaiheessa , joten jätä tiedosto auki
- Mene osoitteeseen google.com/webfonts, valitse haluamasi fontti ja toimi ohjeiden mukaan.
CSS 3:n uusia ominaisuuksia
Koska tämä blogi keskittyy web designiin, en ala selittämään uuden html:n hienouksia ja css:stäkin käsittelen vain muutamaa pientä asiaa. Lisää aiheesta löytyy vaikka miten paljon opastusta ja kirjoituksia englanniksi.
Varjo tekstiin
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Tämä luo varjon tekstin alle. Ensimmäinen määre kertoo kuinka kaukana varjo on tekstistä sivusuunnassa oikealle ja toinen kuinka kaukana alaspäin varjo on. Kolmas määrittää sumennuksen määrän. Viimeiseksi laitetaan varjon väri. Tämä ei toimi IE:ssä.
Lue lisää: w3schools.com
Pyöreät reunukset laatikoihin
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 ja vanhemmat */
}
Ennen piti tehdä erilliset kuvat joka nurkkaa varten, jos halusi laatikkoon pyöreät nurkat. Nyt se onnistuu todella helposti ja kaikki uudet selaimet tukevat sitä.
Lue lisää: w3schools.com
Sivustoja joihin sinun tulisi tutustua
Jos HTML5:n käyttäminen sivullasi alkoi kiinnostaa, suosittelen tutustumaan seuraaviin sivuihin.
w3schools.com - Erittäin hyvät selitykset mitä mikäkin tekee
http://www.w3schools.com/html5/default.asp
http://www.w3schools.com/css3/default.asp
Inspect Element
http://inspectelement.com/
