Lisätehtävät. Frantic 2015 sivu 1

Koko: px

Aloita esitys sivulta:

Download "Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com"

Krista Heikkilä
8 vuotta sitten
Katselukertoja:

1 Lisätehtävät Frantic 2015 sivu 1

2 Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan laitteessa on. Siksi Google on myös luonut ilmaisen fonts-palvelun, jolla sivustoille voi lisätä fontteja, jotka ladataan selaimeen suoraan googlen palvelimelta. google.com/fonts Fontin lisääminen 1. Mene google.com/fonts -osoitteeseen, ja etsi sopiva fontti 2. Klikkaa halutusta fontista Add to Collection 3. Klikkaa alareunaan ilmestyneestä laatikosta Use 4. Valitse fontin leikkaukset (paksu, ohut, kursiivi jne.) 5. Lisää googlen ehdottama koodi <head> -tagien sisään. 6. Määrittele css-tyylissä halutulle elementille font-family, font-weight ja font-style. Frantic 2015 sivu 2

3 CSS - Responsiivisuus Kun puhutaan sivustojen responsiivisuudesta, tarkoitetaan sitä, kuinka sivusto mukautuu erikokoisiin päätelaitteisiin eli näyttää erilaiselta eri selainikkunan leveyksissä ja korkeuksissa. CSS-tiedostossa voi määritellä tyylejä eri selainkoille (min width: <leveys>) { element { property: value; property: value;.class { property: value; property: value; Esimerkki : Kaksi rinnakkaista laatikkoa isommalla näytöllä, jotka siirtyvät allekkain mobiilissa HTML <div class= container clearfix > <h2>boksin otsikko</h2> <div class= inner box > <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. </p> </div> <div class= inner box > <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. </p> </div> </div> Frantic 2015 sivu 3

4 CSS /* Pienemmän selainkoon (esim puhelin) tyylit ovat tässä */.container { width: 96%; max width: 1080px; margin: 0 auto; h2 { font size: 24px;.inner box { width: 100%; margin: 2% 0; /* Isomman selainkoon tyylit ovat tässä (min width: 640px) { h2 { font size: 36px;.inner box { float: left; width: 46%; margin: 2%; Frantic 2015 sivu 4

5 CSS - Transitiot CSS-transitioilla voi tehdä sulavia ja yksinkertaisia animointeja elementtien tyyleistä. Transition-ominaisuus määritellään seuraavasti: transition: <mitä animoidaan> <animaation kesto sekunteina> <animointitapa> <viive>; Esimerkki 1: napin värin muuttaminen Seuraava esimerkki muuttaa napin taustavärin punaisesta vihreäksi silloin, kun hiiri siirtyy napin päälle. HTML <a class="button" href=" mua</a> CSS a { color: white; text decoration: none; display: inline block; padding: 0.5em 1em; background color: red; transition: background color 0.4s linear 0s; a:hover { background color: green; Frantic 2015 sivu 5

6 Esimerkki 2: Sisällön näyttäminen Seuraava esimerkki näyttää laatikon sisällön silloin, kun hiiri siirtyy laatikon päälle. HTML <div class= box > <h2>boksin otsikko</h2> <div class= inner box > <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. </p> </div> </div> CSS.inner box { max height: 0; overflow: hidden; transition: max height 0.4s ease 0s;.box:hover.inner box { max height: 600px; Frantic 2015 sivu 6

7 JavaScript-komponentit JavaScript on kieli, jolla pystytään luomaan verkkosivuille toiminnallisuuksia; sillä pystytään esimerkiksi tarkkailemaan, mitä käyttäjä tekee hiirellä tai mitä käyttäjä kirjoittaa näppäimistöllä ja niiden perusteella tekemään haluttuja asioita. Koodikoulussa ei vielä opetella, miten JavaScriptia kirjoitetaan itse, mutta näiden lisätehtävien kautta pääset kokeilemaan muutamia JavaScript-toiminnallisuuksia, joita olemme luoneet sinulle valmiiksi. 1. Näytä/piilota elementti klikatessa toista elementtiä Lisää seuraavanlaiset elementit sivullesi haluttuun kohtaan: <span class="js toggle" data target="kissa">näytä kissa</span> <div class="js toggle target" id="kissa">tämä on kissa</div> Elementtien sisälle (kohdat näytä kissa ja tämä on kissa ) voit lisätä ihan mitä haluat, vaikka useita muita elementtejä. Kun klikkaa näytä kissa -kohtaa, tämä on kissa -elementti tulee näkyviin, tai jos se on jo näkyvissä, se piilotetaan. Kohdissa data target="kissa"ja id="kissa"oleva kissa on myös vapaavalintainen - kunhan se on molemmissa sama ja siinä ei ole ääkkösiä, välilyöntejä tai erikoismerkkejä. Laita se siis kuvastamaan sisältöäsi. Huomioi kuitenkin, että samaa id:tä ei voi käyttää useammassa elementissä, sillä silloin selain ei tiedä, kumpaan viittaat. Voit lisätä luokkia (class-attribuutti) kaikille näille elementeille, ja lisätä css-tiedostoon haluamiasi tyylejä. Frantic 2015 sivu 7

8 2. Skrollaa sivu haluttuun elementtiin klikatessa toista elementtiä Lisää seuraavanlaiset elementit sivullesi haluttuun kohtaan: <a class="js scroll" href="#koira">skrollaa koiraan</a> <div id="koira">tämä on koira</div> Elementtien sisälle (kohdat skrollaa koiraan ja tämä on koira ) voit lisätä ihan mitä haluat, vaikka useita muita elementtejä. Kun klikkaa skrollaa koiraan -kohtaa, sivu skrollautuu tämä on koira -elementin kohdalle, kunhan sivu on tarpeeksi pitkä. Jos sivu on lyhyt ja haluat testata skrollaamista, lisää sivun loppuun näkymätön elementti, joka pidentää sivua: <div style="height: 1000px;"></div> Kohdissa href="#koira"ja id="koira"oleva koira on myös vapaavalintainen - kunhan se on molemmissa sama ja siinä ei ole ääkkösiä, välilyöntejä tai erikoismerkkejä. Laita se siis kuvastamaan sisältöäsi. Huomioi kuitenkin, että samaa id:tä ei voi käyttää useammassa elementissä, sillä silloin selain ei tiedä, kumpaan viittaat. Kokeile myös, mikä ero on näillä kahdella: <a href="#koira">skrollaa koiraan</a> <a class="js scroll" href="#koira">skrollaa koiraan</a> Huomaat, että toinen näistä hyppää suoraan elementtiin, ja toinen skrollaa tasaisesti. Voit lisätä luokkia (class-attribuutti) kaikille näille elementeille, ja lisätä css-tiedostoon haluamiasi tyylejä. Frantic 2015 sivu 8

9 3. Tuo tekstiä esiin kirjoituskone-efektillä Lisää seuraavanlaiset elementit sivullesi haluttuun kohtaan: <div class="js typewriter">tämä teksti tulee näkyviin vähitellen</div> Elementin sisälle (kohta tämä teksti tulee näkyviin vähitellen ) voit lisätä mitä ja kuinka paljon tahansa tekstiä, mutta älä lisää muita elementtejä. Huomaa, että voit laittaa class="js typewriter"-ominaisuuden useammallekin elementille sivullasi, ja ne kaikki ilmestyvät vähitellen esiin. Esim. <h1 class="js typewriter">tämä on sivun otsikko</h1> <p class="js typewriter">tässä kohtaa on leipätekstiä</p> Voit lisätä luokkia (class-attribuutti) kaikille näille elementeille, ja lisätä css-tiedostoon haluamiasi tyylejä. Frantic 2015 sivu 9

10 4. Tuo näkyviin modaali/popup klikatessa toista elementtiä Lisää seuraavanlainen elementti sivullesi haluttuun kohtaan: <span class="js modal" data target="hamsteri">avaa hamsteri</span> Lisää seuraavanlainen elementti sivun loppuu: <div class="js modal target" id="hamsteri">tämä on hamsteri</div> Elementtien sisälle (kohdat avaa hamsteri ja tämä on hamsteri ) voit lisätä ihan mitä haluat, vaikka useita muita elementtejä. Kun klikkaa avaa hamsteri -kohtaa, sivun päälle avautuu uusi alue, jossa on sisältönä tämä on hamsteri -kohta. Kohdissa data target="hamsteri"ja id="hamsteri"oleva hamsteri on myös vapaavalintainen - kunhan se on molemmissa sama ja siinä ei ole ääkkösiä, välilyöntejä tai erikoismerkkejä. Laita se siis kuvastamaan sisältöäsi. Huomioi kuitenkin, että samaa id:tä ei voi käyttää useammassa elementissä, sillä silloin selain ei tiedä, kumpaan viittaat. Voit lisätä luokkia (class-attribuutti) kaikille näille elementeille, ja lisätä css-tiedostoon haluamiasi tyylejä. Frantic 2015 sivu 10

11 Mitä jatkossa? 1. CodeSchoolin jquery-kurssi Vaatii rekisteröitymisen, mutta on ilmainen. jquery on JavaScript-kirjasto, jonka avulla pystyy helposti ja nopeasti tekemään toiminnallisuuksia verkkosivuille. Myös lisätehtävissä käytetyt valmiit toiminnallisuudet on tehty jquerylla CodeSchoolin JavaScript-kurssi Vaatii rekisteröitymisen, mutta on ilmainen. Frantic 2015 sivu 11

Samankaltaiset tiedostot

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS