Lomakkeiden muotoilu, mediatyypit ja CSS-valitsimet - Demo 6
- Mallivideot
- Lomakkeiden ulkoasu
- Tulostus (print)
- Projisointi (projection)
- Mobiililaitteet (handheld)
- Valitsimet
- Lisätietoa
Mallivideot
- lomakecss.wmv 4.8M
- printmedia.wmv 2.1M
- projectionmedia.wmv 2.3M
- mobilemedia.wmv 5.1M
- selectors.wmv 4.9M
Näissä demoissa opetellaan lomakkeiden muotoilua CSS:llä, CSS:n mediatyyppejä tekemällä Nanonanon kotisivuille oma ulkoasu tulostusta, videotykillä esittämistä sekä mobiililaitteita varten. Lisäksi harjoitellaan tärkeimpien CSS-valitsimien käyttöä
Lomakkeiden ulkoasu
Lomakkeiden ulkoasu -mallivideo
Muotoillaan CSS:llä lomakesivujen ulkoasua. Haluamme muotoilla kaikkia sivustolla olevia lomakkeita, mutta ongelmana on demo3:ssa tehty erillinen CSS-tyylilomake. Yleensä sivustolla kannattaakin pyrkiä käyttämään vain yhtä CSS-tiedostoa, joka määrittelee sivustolle yhtenäisen ulkoasun. Toisen CSS-tiedoston ulkoasumääritykset voi kuitenkin liittää toiseen CSS-tiedostoon @import-määreellä.
- Liitä demo2.css:ssä määritellyt tyylit form.css:ään @import-määreellä.
- Muokataan nyt demo2.css:ää. Muutokset tapahtuvat nyt kaikkiin lomake-elementteihin. Muuta kaikkiin lomake-elementteihin (input, option, textarea) tasalevyinen kirjasin eli esim. Courier New ja yleisvaihtoehto monospace. Tasalevyinen kirjasin lomake-elementeissä helpottaa käyttäjää hahmottamaan eri kirjaimet toisistaan.
Sähköpostilomake
- Muotoillaan vielä hieman sähköpostilomaketta.
Lisää tyylitiedostoon demo2.css seuraavat rivit:
form .tasa { width: 15%; float: left; clear: both; }
- form .tasa viittaa form-elementin sisällä olevaan elementtiin (jälkeläinen), jonka luokka (class) on tasa.
- float-ominaisuudella otsikot saadaan liutettua vasempaan laitaan, jolloin tavalliset kappaleet tulevat otsikon perään.
- clear-ominaisuudella voidaan estää kahden otsikon asettuminen vierekkäin, jolloin seuraava otsikko rivittyy edellisen alapuolelle.
<label class="tasa" for="to">Vastaanottaja:</label> <p><input type="text" id="to" name="to" size="40" /></p>
Testaa tasausta selaimella. - Tee tyyli, joka liu'uttaa Lähetä viesti -painikkeen oikeen laitaan. Tarvitset apuna css-valitsimia. Kaikki CSS-valitsimet eivät välttämättä toimi Internet Explorerissa!
- Lisää fieldset-elementeille valkoisesta eroavat taustaväri (väriksi esim. #dddd99 ). Kokeile saada erilainen väritys Formaatti-osioille (väriksi esim. #eeeebb ).
Kyselylomake
- Tee erillinen CSS-tiedosto kyselylomakkeen erillismuotoiluja varten. Tallenna CSS-tiedosto kahvila-hakemistoon.
- Lisää kahvila-hakemiston lomakkeeseen link-elementti, jolla viittää lisämääreet sisältävään CSS-tiedostoon.
- Lisää sopivat värimääritykset lomakkeen eri osiin (esim. #ffeeff ja #fffcff ). Tallenna taustakuvio samaan hakemistoon lomakkeen kanssa ja määrittele lomakkeelle toistuva taustakuviointi viittaamalla siihen CSS:ssä.
Hakulomake
- Positioi lomake sivun oikeaan ylänurkkaan.
Tulostus (print)
CSS-ulkoasupohjan päälle voi tarvittaessa tehdä lisä- tai muutosmäärityksiä erilaisten medioiden tarpeisiin.
- Aloita Xetorilla uusi css-tiedosto nimeltään print.css ja tallenna se www-hakemistoon.
- Avaa it-hakemistossa oleva XHTML-dokumentti ja
lisää sivun head-osaan rivi:
<link rel="StyleSheet" href="../../print.css" type="text/css" media="print"/>
Tällä linkitetään tiedostoon tulostusasetuksia varten oma css-tiedosto (print.css).
- Avaa selaimella it-hakemistossa oleva sivu ja valitse File | Print Preview.
-
Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen
kannalta turhat sivuelementit eli
Nanonanon sivujen tapauksessa .navbartop- ja .navbar-lohkot.
Piilottaminen onnistuu display-ominaisuuden avulla:
.navbartop, .navbar { display: none; }
- Kokeile selaimen Print Preview -toiminnolla miten sivun tulostusasu muuttui.
- Määritellään tulostukseen sopivat marginaalit body-elementille:
Määrittele haluamasi marginaalit ja kokeile taas miltä sivu näyttää selaimen tulostusesikatselussa. Oikeampi tapa olisi käyttää @page-valitsinta mutta sitä eivät selaimet juurikaan tue. Lisäksi täytyy muistaa, että määritellyt marginaalit tulevat käyttäjän omien tulostusasetusmarginaalien lisäksi.body { margin-top: 1cm; margin-left: 1cm; margin-right: 1cm; margin-bottom: 1cm; }
-
Tulostettaessa ongelmana voi olla esim. keskelle otsikkotekstiä osunut sivunvaihto. Tätä
ongelmaa voi yrittää välttää page-break-before, page-break-inside
ja page-break-after-ominaisuuksilla:
- page-break-before määrää tehdäänkö sivunvaihto ennen lohkoa (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- page-break-inside määrää tehdäänkö sivunvaihtoja lohkon sisällä (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- page-break-after määrää tehdäänkö sivunvaihto lohkon jälkeen (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- Lisää tulostusmuotoilut Nanonanon kotisivujen etusivulle. Tarkastele tulostetta Print Preview-toiminnolla. Mitä tulostusasetuksiin voisi vielä lisätä?
- Voit lisämuotoilla tulostusasua normaaleilla css-ominaisuuksilla jos haluat. Tarkemmin tulostamiseen liittyvistä erikoisasetuksista voit halutessasi lukea W3C:n CSS2.1 Paged media-sivulta.
Projisointi (projection)
CSS:stä löytyy oma mediatyyppi piirtoheittimellä ja videotykillä tehtäviä esityksiä varten. Voit kokeilla Operalla miltä tämä demosivu näyttäisi jos projection-median asetukset ovat käytössä. Käynnistä Opera-selain ja aseta se täysnäyttötilaan painamalla F11-näppäintä.
projection-tilassa toimitaan sivuttain kuten paperitulostuksessakin joten kummassakin voi käyttää samoja css-ominaisuuksia. Lisää it-artikkeliin käyttöön projection.css-tyylitiedosto:
<link rel="StyleSheet" href="../../projection.css"
type="text/css" media="projection"/>
Luo projection.css ja tallenna se www-hakemistoon. Kirjoita siihen seuraavat määrittelyt:
- Poista näkyvistä navigointipalkit
- Suurenna kirjasimen koko kaksinkertaiseksi
- Pakota sivunvaihto aina ennen h2- ja h3-elementtejä
- Kiellä sivunvaihdot .kuva-tyylin sisällä
- Säädä koko sivun marginaalit sopiviksi
Mobiililaitteet (handheld)
WWW-sivuja selataan yhä enemmän kännyköillä, pda-laitteilla ja muilla pienillä vempaimilla. Näiden laitteiden suurin rajoitus on pieni näyttö. Sopivilla CSS-asetuksilla saadaan myös Nanonanon sivu näyttämään hienosti mobiililaitteissa.
- Kokeile miten Operan Small Screen Rendering (SSR) -tekniikka näyttää Nanonanon
sivut. Avaa sivu operalla ja paina Shift+F11 jolloin opera siirtyy emuloimaan
kännyköitä. Painamalla uudelleen Shift+F11 opera palaa normaaliin näyttötilaan.
Operan mobiiliversiota käytetään selaimena useissa kännyköissä.
Valitettavasti tavallisen Operan SSR-tilan toiminta on välillä hieman epämääräistä joten käytetään testaukseen ennemmin Mozillaa tai Firefoxia. Ota käyttöösi Handheld Tester, joko Mozillassa tai Firefoxissa.
-
Lisää it-artikkeliin viite
handheld.css-tyyleihin:
<link rel="StyleSheet" href="../../handheld.css" type="text/css" media="handheld"/>
- Luo handheld.css-tiedosto ja tallenna se www-hakemistoon. Kopioi handheld.css-tiedostoon pohjaksi koko demo2.css-tiedoston sisältö, jolloin kukin ominaisuus tulee uudelleenmääritellyksi. Älä siis poista ominaisuuksia vaan muuta kyseisiä arvoja!
-
Muokkaa handheld.css:ään sopivat
CSS-säännöt, joilla saat sivun näyttämään
siistiltä kapeassa ja matalassa selaimessa.
Testaa sivua Handheld Testerin avulla.
Mallia voit katsoa esim. tämän kurssisivuston
handheld.css-tiedostosta.
Huomioi erityisesti seuraavat seikat:
-
Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:
img { max-width: 100%; }
- Mobiililaitteiden näytöt ovat pieniä joten säädä sivun marginaalit minimiin. Poista turhat marginaalit myös muualta kuin body-elementistä.
- Poista näkyvistä mahdolliset epäoleelliset osat sivusta.
- Poista kaikki asemointi. Useimmat mobiililaitteet eivät tue asemointia mutta siltä varalta, että
jokin tukee niin kaikki asemointi täytyy joko poistaa tai varmistaa, että asemoidut lohkot
varmasti mahtuvat pieneen näyttöön. Helpointa on poistaa kaikki asemoinnit:
position: static;
- Muuta leivänmurunavigointi takaisin tavalliseksi listaksi.
- Muuta sivun otsikoiden koot järkeviksi esim. h1-elementin kirjasinkoko voisi olla 120% ja h2 ja h3 jotain 100% ja 120% väliltä.
- Määrää taulukoiden, textarea-elementin ja pre-elementin maksimileveydeksi 100%
- Poista kaikki lohkojen leijutukset (float), koska niille ei juurikaan ole tilaa.
-
Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:
Valitsimet
Valitsimet -mallivideo (HTML-kit)
Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Kopioi itsellesi V:-asemalle mallitiedosto. Valitsimista löytyy esimerkkejä luento 4:n sivulta. Aloita XetorjEditissä uusi CSS-tiedosto ja tallenna se valitsimet.css-nimellä V:-asemalle. Seuraavissa tehtävissä saat tehdä muutoksia vain ja ainoastaan tähän css-tiedostoon. Mitään muutoksia et saa tehdä edellä tallentamaasi mallitiedostoon vaan joudut miettimään millaisten valitsimien avulla pystyt seuraavat asiat toteuttamaan. Joudut kuitenkin tarkkaan tutkimaan millainen rakenne mallidokumentissa on.
Dokumentin rakennetta voit tutkia Mozillan DOM Inspector -työkalulla (Tools|Web Development|DOM Inspector). Valitsimien toimintaa sinun pitää testata Mozillalla tai Firefoxilla koska muilla selaimilla kaikki tarvitut valitsimet eivät välttämättä vielä toimi. Mallia voit katsoa myös esimerkkiratkaisun kuvakaappauksesta.
- Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi
- Muuta "Aliquam venenatis ipsum"-alkuisen kappaleen taustaväriksi harmaa
- Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
- Muuta navigointidivin sisällä oleva sed neque-teksti keltaiseks
- Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555
- Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi
- Muuta listaa edeltävän tekstikappaleen ympärille musta raja
- Muuta kaikkien niiden linkkien väri vihreäksi joissa on title-attribuutin arvona sana orci
Käyttäjien kommentit