Lomakkeet ja CSS - Demo 1

• Mallivideot
• Alkuvalmistelut
  • Hakemistot
  • Mozilla Firefox -laajennukset
  • Editori
• WWW-lomake
  • Kyselylomakkeen tiedot
  • Lomakkeen rakenne
• Lomakkeen ulkoasu
• CSS-asemointia

Näissä demonstraatioissa on tarkoitus tutustua yleisimpiin XHTML-elementteihin ja niiden käyttämiseen WWW-dokumenteissa.

Näissä demoissa kerrataan Tietokone ja tietoverkot työvälineenä ja WWW-julkaiseminen-kurssilla opittuja asioita. Tehtävissä voit käyttää apunasi luennon 1 ja luennon 2 materiaaleja.

Alkuvalmistelut

Hakemistot

• Luo W-asemalle hakemisto sovellukset (tms.)
• Luo tämän hakemiston alle alihakemisto demo1 (tms.)
• Jatkossa demo- ja viikkotehtävät kannattaa kerätä saman hakemiston alle järkevän nimisiin alihakemistoihin.

Ellei sinulla näy vielä W-asemaa, niin käy aktivoimassa users.jyu.fi-tilasi linkin takaa löytyvien julkaisuohjeiden avulla. V-asema ei käy tämän kurssin tarpeisiin, sillä verkkolevyn tiedostot näkyvät vain IT-tdk:n MS IIS-palvelimella.

Mozilla Firefox -laajennukset

Asennetaan ensin Mozilla Firefox -selaimeen muutama erittäin hyödyllinen laajennus:

• Web Developer.
• Firebug
• ColorZilla
• Tamper Data

Laajennuksen asennus toimii seuraavasti:

1. Mene laajennuksen asennussivulle.
2. Napauta Install Now ja sama myös esiin tulevasta ikkunasta.
3. Käynnistä Mozilla Firefox uudelleen.
4. Laajennus löytyy yleensä joko Tools-valikosta, View | Toolbars -valikosta tai alalaidan statuspalkista.

Editori

Nämä demotehtävät voi tehdä haluamallaan WWW-sivueditorilla, mutta suositeltavia ovat Eclipse PDT, HTML-Kit, Amaya tai XetorjEdit. Nämä kaikki ohjelmat löytyvät Agoran mikroluokista. Seuraavilla ohjeilla pääset alkuun XHTML-dokumenttien luonnissa:

• Eclipse -aloitusohje
• HTML-Kit -aloitusohje
• Amaya -aloitusohje
• XetorjEdit -aloitusohje

WWW-lomake

Napauttamalla saat esiin isomman kuvan.

Kuvitteellinen kahvilayritys haluaisi tehdä nettisivuilleen pienimuotoisen kyselylomakkeen, jolla he voisivat kartoittaa asiakkaiden maku- ja kokemusmaailmaa. Kävijöiltä halutaan kerätä tietoja seuraavasti:

Kyselylomakkeen tiedot

• Taustatiedot
  • Sähköpostiosoite (tekstikenttä)
    • Oletuksena etunimi.sukunimi@yritys.invalid
  • Ikä (valintalista), jossa vaihtoehdot
    • < 15 vuotta
    • 15 - 20 vuotta
    • 20 - 25 vuotta (oletus)
    • 25 - 30 vuotta
    • > 30 vuotta
• Palaute
  • Suosikkijuoma (valintaruutu), jossa vaihtoehtoina:
    • kahvi (oletus)
    • espresso
    • cappuccino
    • makuteet
    • limonadi
  • Musiikki (usean vaihtoehdon valintalista), jossa vaihtoehdot ryhmiteltynä (optgroup) seuraavasti:
    • Jazz
      • Perinteinen Jazz
      • Vokaalipainotteinen jazz
      • Groove Jazz
    • Blues
      • Rhythm & Blues (oletus)
      • Kitarablues (oletus)
    • Pop
      • MTV-dance
      • Trance-tekno
      • Rauhallinen elektroninen

Lomakkeen rakenne

1. Aloita tyhjä XHTML Strict-dokumentti aloitusohjeiden avulla. Laita link-elementti viittaamaan kahvila.css:ään ja luo tätä varten uusi tyhjä tiedosto. Tallenna tiedostot W:\sovellukset\demo1-hakemistoon.
2. Muuta otsikko mallikuvan mukaiseksi. Lisää form-elementti, jonka action-attribuuttiin voit laittaa toistaiseksi esimerkiksi skriptin http://appro.mit.jyu.fi/cgi-bin/view.cgi. Kumpi method-attribuutin arvoista sopii tällaiselle lomakkeelle, get vai post?
3. Lisää kaksi fieldset- ja legend-elementtiparia. Laita kuvan mukaiset otsikot.
4. Lisää ensimmäiseen ryhmään kappale (p) ja sen sisään sähköpostin otsikko (label) ja tekstikenttä (input type="text"). Anna tekstinkentälle tarvittavat ominaisuudet id, name ja size. Kytke label tekstikenttään for-ominaisuudella. Katsasta muutokset selaimesta, kokeile napauttaa kentän otsikkoa: siirtyykö kursori tekstikenttään?
5. Lisää toinen kappale, jonka sisään label ja select.
   • Lisää ikävaihtoehdot option-elementillä.
   • Määrää kullekkin option-elementille jokin järkevä value-arvo.
   • Anna oletusvaihtoehdolle selected="selected".
6. Validoi XHTML (esim. Web Developer Toolbar | Tools | Validate HTML tai IDE-ympäristön omilla validointitoiminnoilla). Jos virheitä tuli, niin tarkista merkkien koodaus, erityisesti < on merkittävä &lt; ja > on merkittävä entiteetillä &gt;.
7. Lisää jälkimmäisen fieldset-elementin sisälle kaksi uutta fieldset-elementtiä. Laita näiden sisälle legend-elementit, joissa kuvan mukaiset tekstit.
8. Lisää näistä ensimmäiseen suosikkijuoman valintavaihtoehdot. Kapseloi kukin vaihtoehto p-elementin sisälle. Merkitse otsikot label-elementeillä. Lisää valintaruudut (input type="checkbox") ja anna tarvittavat ominaisuudet id, name ja value. Huomaa, että name voi olla sama kaikille valintaruuduille. Lisää oletusvaihtoehdolle ominaisuus checked="checked". Kytke label-elementit input-elementteihin.
9. Lisää näistä toiseen yksi kappale ja sen sisään kuvan mukainen label. Lisää select-elementti ja anna sille ominaisuudet id, name, size ja multiple. Lisää select-elementin sisälle musiikkivaihtoehdot (8 kpl). Merkitse nämä option-elementeille ja keksi niille value-ominaisuuteen arvot. Lisää oletusvaihtoehdot selected="selected" -ominaisuuksilla.
10. Validoi dokumenttisi. Jos saat virheilmoituksen, niin kyse voi olla & -merkistä, joka pitää koodata entiteetillä &amp;
11. Ryhmittele valintavaihtoehdot kolmeen ryhmään optgroup-elementillä. Ryhmän otsikko merkitään label-ominaisuuteen.
12. Lisää toisen fieldset-elementin jälkeen lähetä-painike. Tämä onnistuu input type="submit" -elementillä, jolla on ominaisuudet name ja value.

Lomakkeen ulkoasu

Muotoillaan CSS:llä lomakesivujen ulkoasua. CSS:ää on helppo muotoilla Web Developer Toolbarin CSS | Edit CSS -valinnalla, joka näyttää muutokset lähes reaaliaikaisesti. Muista aina aika ajoin tallentaa muutokset tiedostoon kahvila.css.

1. Tallenna taustakuvio samaan hakemistoon lomakkeen kanssa ja määrittele lomakkeelle toistuva taustakuviointi body-lohkolle viittaamalla siihen CSS:ssä. Vaihda fontiksi Trebuchet MS, kakkosvaihtoehtona Arial ja kolmas mikä tahansa päätteetön fontti.
2. Vaihda option-elementtien kirjasimeksi Courier New, Prestige tai joku muu tasavälinen fontti.
3. Keskitä h1.
4. Poista p-elementiltä ylä- ja alamarginaali.
5. Lihavoi kaikkien legend-elementtien tekstit.
6. Poista sisemmiltä fieldset-elementeiltä reunaviiva. Tarvitset myös selektoria, jolla voidaan valita fieldset-elementin sisällä oleva fieldset.
7. Lisää sopivat värimääritykset lomakkeen eri ryhmiin (esim. #ffeeff ja #fffcff ).
8. Tasataan valintavaihtoehdot samalle tasalle. Lisää seuraavat rivit:

   .tasa label {
     width: 5em;
     float: left;
     clear: left;
   }
   

   • .tasa label viittaa label-elementtiin, joka on jonkun elementin sisällä, jonka class-ominaisuuden arvo on tasa.
   • float-ominaisuudella otsikot saadaan liu'utettua vasempaan laitaan, jolloin muut elementit tulevat otsikon perään.
   • clear-ominaisuudella voidaan estää kahden otsikon asettuminen vierekkäin, jolloin seuraava otsikko rivittyy edellisen alapuolelle.
9. Merkitse nyt XHTML-dokumentissa class="tasa" -ominaisuudella p-elementti, jonka sisällä on ikävalinta, ja fieldset-elementti, jonka sisällä on suosikkijuomavalinta.

CSS-asemointia

Napauttamalla saat esiin isomman kuvan.

Asemoidaan lomake vielä keskelle sivua ja lisätään viereen navigointipalkki ja ylätunniste.

1. Kapseloi h1-otsikko div-lohkon sisään ja anna tällä lohkolle id-arvoksi header.
2. Luo tämän jälkeen yleinen lohko, jonka id="navbar". Lisää tämän sisälle lista (ul), jossa listakohtina (li) ovat kuvasta löydettävät linkit (Palautekysely-kohtaan ei tarvitse tehdä linkkiä). Linkkien ei tarvitsee johtaa mihinkään.
3. Kapseloi lomake-elementti yleisen lohkon sisälle ja anna tälle ominaisuus id="content".
4. Kapseloi navbar- ja content-lohkot vielä yhden div-elementin sisälle ja anna tälle ominaisuus id="container".
5. Lähdetään muokkaamaan CSS:ää. Laita container ja header-lohkojen kooksi 65% body-lohkon koosta. Laita ominaisuus margin: auto; jolloin lohkon pitäisi mennä keskelle ruutua.
6. Laita navbar- ja content-lohkoille arvo float:left;, jolloin niiden pitäisi liukua vierekkäin. Laita navbar-lohkon kooksi 20% container-lohkon koosta ja content-lohkon kooksi 75%.
7. Lisää navbar-lohkolle sama taustanväri kuin fieldsetille.
8. Nyt navbar-lohkon tausta pitäisi saada jatkumaan vielä yhtä pitkäksi kuin lomakkeen. Käytetään artikkelin One True Layout kikkaa CSS3:sta odotellessa:
   • Laita navbar-lohkolle

     padding-bottom: 1000em;
     margin-bottom: -1000em;

   • Laita container-lohkolle ominaisuus overflow: hidden;
9. Tehdään vielä hienosäätöjä navigointipalkille:
   • Siirrä lohkoa hieman alaspäin margin-top-ominaisuuden avulla.
   • Tee hieman tyhjää tilaa oikealle margin-right-ominaisuuden avulla.
   • Lisää yhden pikselin kokoinen harmaa reunus.
10. Keskitään navbar-lohkon sisällä oleva linkkilista ja poistetaan listamerkit:
    • Valitse sopivalla selektorilla navbar-lohkon sisällä oleva ul. Poista tältä paddingit ja marginaalit.
    • Määrää leveydeksi 6em.
    • Laita automaattiset marginaalit.
    • Valitse navbar-lohkon sisällä olevat li-elementit. Poista näiltä listamerkki list-style-type-ominaisuudella.
11. Tallenna muutokset. Validoi CSS (esim. Web Developer Toolbarista valinnalla Tools | Validate CSS) ja korjaa tarvittaessa. Testaa selaimella. Kokeile muuttaa ikkunan ja tekstin kokoa.