Aloitus esittelyt, jyti.net palvelimen käyttö. w3school.com -palvelun käyttäminen. Ensimmäinen www-sivu Muistiolla. Komentojen kirjoittaminen. Aloitettiin Notepad ++ ohjelmaan tutustuminen. Käytiin läpi html-komentoja liittyen linkittämiseen. Päästiin ankkurin lisäämiseen asti.

Video - HTML -komentojen kirjoittaminen
Notepad++ ohjelman esittely

Lisäys Notepad++ videoon

Aineiston sivut HTML historia , HTML -komentojen kirjoittaminen, html-sivun perusrakenne ja yleisimmät komennot, josta ehdittin linkit -kohtaan.

Katsoimme linkittämisen sivun sisällä (ns. ankkuri-rakenne), jonka jälkeen aloitimme tutustumisen CSS-tyyleihin tekemällä erillisen tyylitiedoston, johon määritimme muutamia muotoiluasetuksia h1, h2, p ja a komennoille.

Yleisimmät komennot

Käivimme ensin CSS määritykset lihavointi, alleviivaus ja kursivointi. Liitimme määrityksen alueeseen span -komennolla. Sen jälkeen katsoimme portaisuuden (Cascating), eli tyylimäärityksen ohituksen sivukohtaisesti (head osaan) ja komentokohtaisesti (esim. h2 style="jne..).

Lopuksi katsoimme kuvan liittämistä sivulle (img). Muutimme kuvan kokoa Photoshopissa Image-Image size -komennolla ja koon muuttamista sekä rajaamista Crop Tool -työkalulla. Lisäksi tallennus Export - Save for web -komennolla. Katsoimme myös responsiivisen kuvan määrityksen (style - max-width:100% - height:auto). Alla video CSS:n lisäämisestä html-sivulle.

Video CSS:n lisäämisestä html sivulle

Kertasimme ensin lyhyesti kuvan koon muuttamisen Photoshop -ohjelmassa. Sen jälkeen katsoimme taulukon lisäämistä html-sivulle ja aloitimme lyhyesti taulukon ulkoasun muotoilun CSS:n avulla.

Tunnilla tuli myös kysymys kuinka voisi muotoilla samalla sivulla olevat taulukot toisistaan poikkeavasti. Näytin tunnilla ns. luokkaratkaisun (class), mutta parempi voisi olla tehdä asia ns. aluekomentojen avulla (lohkoelementti). Alla olevalla videolla on näytetty lyhyesti kuinka asian voisi ratkaista div -tagin ja aluemuotoilun avulla.

Video aluetyylimäärittelystä

Muotoilimme ensin taulukkoa (matkapuhelinvertailu) CSS -tyylien avulla. Katsoimme osan muuotoiluista w3school -palvelun kautta. Sen jälkeen lyhyesti luettelomerit ja numeroitu luettelo. Sen jälkeen määritimme värin värinimen lisäksi rgb-arvoja ja heksadesimaaliarvoa käyttämällä. Lopuksi aloitimme tutustumisen lomakekomentoihin.

Taulukkomuotoilut w3school palvelussa

Aloitimme lomakekomentojen läpikäymisen. Ehdimme käsitellä form -komennon (attribuutit method ja action), tekstikentän ja salasanakentän. Lisäksi muotoilimme lomakekenttiä CSS:n avulla. Teimme myös Javascriptillä kentän tyhjentävän toiminnon. Oheissa tiedostossa on tehty koodiin reilusti kommentteja (kommentit vihreällä Notepadissa). Avaa ja ota lähdekoodi esiin.

lomake.html

Tunnilla oli puhetta myös siitä miten salasanakentän tekstin saisi näkyviin haluttaessa tavallisena tekstinä. Alla olevassa tiedostossa on muutama tapa toteuttaa asia Javascriptin avulla.

salasana.html

Käytiin loppuun eri lomakekomennot. Aineistossa mainittujen lisäksi mainittiin myös fieldset ja legend. Lopuksi kävimme läpi imagemap toiminnon sekä käsin koodaamalla että Dreamweaverin avulla.

Fieldset ja Legend w3school palvelussa
Lomakekomennot
Imagemap

Canvas -osio jätettiin myöhempään ajankohtaan ja aloimme käydä läpi Muita komentoja -osuutta. Ehdimme käsitellä muut paitsi object-komennon joka ensi kerralla ensimmäisenä. Katsoimme myös Youtube -videon upottamisen omalle www-sivulle ja sen koon pienentämisen. Lisäksi teimme javascript koodin, jolla voi pysäyttää automaattisesti alkavan taustaäänen (autoplay) sekä muutamia css tyylimäärittelyjä objektien muotoilua varten.

Muut komennot

Katsoimme ensin object -komennon flash -tiedoston avulla. Seuraavaksi katsoimme div -aluemäärityksen kiinteälle (absolute) ja kelluvalle (fixed) asetukselle. Sen jälkeen aloitimme Autovuokraamo -sivuston suunnittelun tekemällä sille rakenteen aluemääritysten avulla (erillenen css-tiedosto). Lopuksi aloitoimme navien tekemisen css:n avulla. Ehdimme aloittaa vaakanavin. Tiedostot löytyvät O-asemalta 070217 -kansiosta.

Jatkoimme css-navien tekemistä. Saimme valmiiksi perus vaakanavin ja perus pystynavin. Aloitimme lopuksi pudostusvalikon tekemisen vaakanaviin. Sen saimme body -osan koodin puolesta valmiiksi. CSS -muotoilut siihen ensi tiistaina. Tiedostot löytyvät edelleen O-asemalta 070217 -kansiosta.

Aluksi katsoimme navien teon loppuun (lähinnä pudotusvalikko). Sen jälkeen aloitimme Dreamweaver sivuston (Site), jossa aiheena autovuokraamo. Lisäsimme aiemmin tehtyyn rakenteeseen yläpalkin kuvan, aiemmin tehdyn ylänavin ja alapalkin tekstin. Sitten teimme sivunavin ns. library -elementtinä ja perustimme kolme sivua (Aygo, C1 ja Ka). Päädyimme muotoilemaan näin syntyneen sivun ulkoasua CSS:n avulla.

Jatkettiin Dreamweaver sivuston tekemistä. Säädettiin vähän ulkoasua CSS:n avulla ja tehtiin päänavista aukeavat sivut. Muutettiin sivupohjaa lisämällä siihen mainos ja linkittämällä edellä perustetut sivut. Hyvää talvilomaa...

Teimme Dreamweaver -sivuston tällä kertaan loppuun, eli teimme autosivujen sisältö -osan CSS:n valmiiksi ja lisäksi kartta ja palautelomake -sivut. Lopuksi aloitimme responsiivisen sivun tekemisen, teimme siitä aivan perusideaa selventävän esimerkin, jonka koodi oheisesta linkistä (kolme portainen CSS, jossa erilainen muotoilu alle 400 px leveille sivuille, toinen muotoilu 401 - 800 px leveille ja yli 801 px leveille).

responsiivinen_1

Jatkettiin responsiivisen sivun määrittämistä. Tehtiin kolme erilaista media screen -määritystä autovuokraamo -ulkoasuun (alle 480, 481 - 799, yli 800 px). Lisäsimme sivuun myös containerin, jolla maksimileveys asetettiin tuhanteen pikseliin. Lopuksi teimme sivulle oman tulostusasun (media print), jossa määritimme vain sisältöosan tulostuvaksi ja tulostusulkoasun h1, body ja p -tageille. Tiedostot ovat O-aseman 020317 kansiossa.

Tänään aloitimme Bootstrap osuuden. Teimme ensin perussivun ja vertailimme eri col-**-** asetusten käyttäytymistä mallitiedostolla. Sen jälkeen aloitimme Autovuokraamo -sivun (Toyota Aygo) toteuttamisen Bootstrapin avulla. Saimme tehtyä perusrakenteen, yläpalkin (kuva), ylänavin, vasemman navin ja alapalkin. Ensi kerralla vielä Sisältö -osa ja Mainos -osa.

Tiedostot O-aseman Dat16b/Jyrki kansiossa. Tämän hetkinen tilanne on bootstrap -nimisessä kansiossa, tiedostot 070317 -kansiossa.

Jatkoimme viimeksi aloitettua Bootstrap -osuutta. Teimme sisältö -osaan normaalien tekstien lisäksi Accordion -avattavan valikon, jossa taulukko -osuus. Kuvalle teimme erillisen float:right luokkatyylin responsiivisyyden lisäksi. Teimme myös luokkatyylin, joka lopettaa oikealle tasauksen. Tiedostot O-asemalla bootstrap kansiossa.

Jatkoimme vielä bootstrapiin tutustumista. Toiminnoista glyphicon, dropdown -painike, javascript puolelta Modal ja kuvakaruselli. Sen jälkeen katsottiin taustakuvan tekeminen (Photoshop) ja liittäminen (backgroud-image / background-repeat). Lopuksi kävimme lyhyesti läpi jo käsiteltyjä aiheita (pienimuotoista kertausta).

Aloitimme palautettavan tuntitehtävän. Jatkamme sitä vielä tiistaiaamuna.

Ensimmäisen tunnin teimme edellisellä kerralla aloitettua tehtävää. Sen jälkeen kävimme lyhyesti esimerkin avulla Canvas komennon ja CSS animaation.

Canvas
CSS animaatio

Kävimme tänään läpi palautettavan tehtävän. Ohessa vastaus tehtävään. Kiitos aktiivisuudesta ja hyvää kevään jatkoa!
Tehtävän vastaus (pdf)