KL00CT67

Web-ohjelmoinnin perusteet

Tehtävä 6

Tavoite

Tämän tehtävän tavoitteena on tutustua tarkemmin tyylimäärittelyjen tekemiseen CSS:n avulla mukaan lukien sivun asettelu ja navigaatiopalkki. Lisäksi otetaan huomioon responsiivisuus (sivun asetteluun liittyen).

CSS-tyylimäärittelyjä ja -asetteluja

a) Kopioi projektiisi tiedostot tyylisivuista.html sekä tyylit_t6.css ja tutustu niihin. Huomioi erityisesti <div>-elementtien ja <class> -attribuuttien käyttö sivun osien kuvaamiseen. Ota käyttöön tyylitiedosto tyylit_t6.css poistamalla kommentit tiedostossa tyylisivuista.html <head>-osassa olevan <link>-elementin ympäriltä ja tutki, miten ulkoasu muuttuu.

b) Tee tarvittavat muutokset tiedostoon tyylit_t6.css, jotta sivun tyylisivuista.html asettelusta tulee kuvan 1 mukainen.

c) Lisää CSS-tyylimäärityksiin alla olevissa ohjeissa mainittu responsiivisuutta parantava määrittely, joka tekee b-osassa tehdystä asettelusta näytön kokoon mukautuvan. Kokeile, miten määrittely vaikuttaa, kun pienennät selainikkunan leveyttä.

Ohjeita

a) Laita tiedosto tyylisivuista.html projektisi alihakemistoon, jossa pidät .html-tiedostoja ja tiedosto tyylit_t6.css alihakemistoon, jossa pidät .css-tiedostoja. Muuta tarvittaessa tiedostossa tyylisivuista.html <head>-osassa olevan <link>-elementin attribuutin <href> sisältämää polkua.

b) Jos käytät flexbox-asettelua, voit esimerkiksi määritellä

row-<div>:t (elementit, joissa class="row") asettelun juureksi (display: flex ja flex-wrap: wrap), ja
main- ja side-<div>:t (elementit, joissa class="main" ja class="side") siten, että
- main vie 70 % käytettävissä olevasta leveydestä (flex: 70%), ja
- side vie loput 30 % flex: 30%.

Määrittele lisäksi main- ja side-<div>:eille taustaväri (background-color, main:lla #f1f1f1 ja side:lla white) sekä tyhjä tila (täyte, molemmilla 20 pikseliä eli padding: 20px).

Jotta tyhjä tila lasketaan osaksi ao. elementtiä, lisää seuraava määrittely:

* {
  box-sizing: border-box;
}

(Jos tätä ei tee, lasketaan padding erikseen esimerkiksi leveyteen, jolloin yllä olevalla tehdyn asettelun leveys olisi 70 % + 30 % + padding:it pikselinä, ts. yli 100 %.)

c) Lisättävä määrittely on seuraava:

@media screen and (max-width: 800px) {
  .row, .navbar {  
    flex-direction: column;
  }
}

Voit halutessasi muuttaa max-width arvoa.

Materiaalin, yhteistyön ja tekoälyn käyttö

Hyödynnä tässä tehtävässä W3C:n CSS-tutoriaalin aiempien kohtien lisäksi kohtia linkit, navigaatio, ja flexbox-layout.

Voit tarvittaessa pyytää apua toiselta opiskelijalta tai opettajalta. Älä käytä tässä tehtävässä tekoälyä.

Kuvat

Sivu tyylisivuista.html muokatun tyylit_t6.css:n kanssa.

Kuva 1. Sivu tyylisivuista.html muokatun tyylit_t6.css:n kanssa.

This site is open source. Improve this page.