Valitsimet ja asemointia CSS:llä

Näissä tehtävissä tutustutaan valitsimiin sekä WWW-sivun ulkoasun asemointiin CSS:n avulla.

Jos et vielä ehtinyt tehdä loppuun ohjaus 3:n tehtäviä, niin viimeistele ne ennen näihin tehtäviin siirtymistä.

Mallivastaus

Valitsimet

Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Tee seuraavat aloitustoimenpiteet:

  1. Kopioi itsellesi W:-asemalle mallitiedosto johonkin hakemistoon (klikkaa oikealla ja Save Link As...). Et saa tässä tehtävässä tehdä mitään muutoksia edellä tallentamaasi malli.html-tiedostoon.
  2. Aloita uusi tyhjä tekstitiedosto ja tallenna se valitsimet.css-nimellä samaan hakemistoon malli.html-tiedoston kanssa W:-asemalle.
  3. Avaa malli.html Firefox-selaimeen.
  4. Avaa dokumentin puunäkymä (Tools | Web developer | Inspector). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä.
  5. Avaa Web Developer -työkalupalkista CSS | Edit CSS. Saat tässä tehtävässä tehdä muutoksia ainoastaan näihin CSS-tyyleihin ja tallentaa ne valitsimet.css-tiedostoon.

Toteuta seuraavat ulkoasumuutokset CSS-valitsimien ja -ominaisuuksien avulla. Valitsimista löytyy esimerkkejä CSS-valitsimet-luennolta.

Galleria float-ominaisuudella toteutettuna

Tehdään Nanonanon sivustoon galleria-sivu, johon tulee modernia tietokonetaidetta esittäviä pikkukuvia myyntiin:

  1. Lataa galleriakuvat.zip ja pura paketti W:\www\galleria\-hakemistoon.
  2. Luo uusi HTML-dokumentti ja tallenna se index.html-nimellä galleria-hakemistoon.
  3. Lisää link-elementillä viite sivuston juurihakemistossa olevaan ohjaus3.css-tiedostoon. Lisää myös galleriasivulle pääotsikko ja jokin lyhyt johdantotekstikappale.
  4. Kopioi esim. linkit-hakemistossa olevasta index.html-tiedostosta lohkot <nav class="navbartop">...</nav> ja <nav class="navbar">...</nav> juuri luomasi dokumentin body-osaan. Muuta murupolku oikeaksi Galleria-sivulle sekä täydennä navigointilohkon sisältämät navigointilinkit kuntoon. Lisää linkki Galleria-sivulle myös muiden hakemistojen index.html-tiedostojen navigointipalkkeihin.
  5. Lisää Galleria-sivun body-osaan seuraavalla tavalla viisi lohkoa, joissa on galleriahakemiston kuvat ja näiden kuvatekstit:
    <div class="galleriakuva">
    <img alt="Viitatorni ja järvimaisema" src="viitatorni.jpg" />
    <p>Viitatorni</p>
    </div>
  6. Tutki miltä sivu näyttää nyt selaimessa.

Liu'utus

Galleriasivu, jossa kuvat liu'utettu vierekkäin

Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan vierekkäin rivittyviksi.

  1. Muokkaa ohjaus3.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.
  2. Käy Nanonanon kotisivujen galleria-sivulla. Tutki mikä on suurimman kuvan leveys ja korkeus. Lisää .galleriakuva-lohkolle ominaisuudet width ja height, joihin sijoitat arvot, jotka ovat hieman yli suurimman kuvan koon. Voit käyttää tässä tapauksessa px-arvoja (miksi?). Huomioi lohkon korkeudessa myös kuvatekstin tarvitsema tila.
  3. Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
  4. Testaa miltä galleria näyttää nyt. Muokataan vielä kuvatekstejä. Lisää ohjaus3.css-tiedostoon lohko, joka vaikuttaa vain galleriakuva-lohkon sisällä olevaan tekstilohkoon. Tee lohkolle seuraavat määritykset:
    • Määrää tekstilohkolle korkeus. Korkeus kannattaa määrittää suhteessa fontin kokoon, sillä se saattaa vaihdella.
    • Keskitä teksti.
    • Määrää tekstin ylivuotava osuus piiloon.
    • Poista marginaalit (margin) ja täytteet (padding).
    • Pienennä fonttikokoa hieman.
  5. Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella. Voit laittaa lohkoille myös pienen ylämarginaalin, jotteivät ne mene ihan kiinni navigointilohkoon.

Galleria flex-ominaisuudelle toteutettuna

Toteutetaan samanlainen galleria mutta käytetään nyt flex-ominaisuutta.

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus4/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-20 12:15:39
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta