CSS ja WWW-grafiikka

Tällä luennolla käsitellään lyhyesti WWW-sivujen ulkoasun muokkaamista CSS-kielen avulla sekä kuvankäsittelyn perusteita WWW:hen tuotettavan grafiikan kannalta.

Luentotaltiointi

CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets, level 1 (CSS1)-suosituksen mukaisesti

Periaate

Hyödyt

Muistettava

Esimerkkejä

Tyylien määrittäminen

Perusperiaate on muuttaa olemassaolevien HTML-elementtien ominaisuuksia.

Syntaksi


tyylinimi {

  ominaisuus:  arvo;

}

Esimerkki

body {
  color:  black;
  background-color:  white;
}

Tyylien liittäminen dokumenttiin

HTML-dokumentin otsikkotietoihin seuraava määritys:

  <link href="tyylit.css" rel="stylesheet" type="text/css"  />

Erilliseen tyylitiedostoon (tyylit.css) seuraava määritys:

h1 {
  color:red;
  text-align: center;
}

Pituuksien määrittäminen

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon. px (pikseli) yksikköä voi käyttää reunusten ja marginaalien määrittelyssä mutta ei kirjasin koon määrittämiseen. 


p {
	font-size: 120%;
}
h1 {
	margin-top: 1em;
}
h2 {
	border: 1px solid black;
}

Kommentit

Kommentointi onnistuu c-kielestä tutulla tavalla:

strong { /* Korostamiseen käytettävä tyyli */
       background-color: white;
       color: red;
}

Asiayhteyden mukaan määräytyvät tyylit

Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.

p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:


p strong {
		background-color: white;
		color: red;
}

Esimerkki asiayhteyden mukaan määräytyvästä tyylistä.

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Helpoin tapa on käyttää prosentteja. Esimerkin värisekoituksessa on punaista 90%, vihreää 30% ja sinistä 60%. 

p {
	background-color: rgb(90%, 30%, 60%);
}

Linkkejä värien määrittämisestä:

Käyttöliittymän visuaalisesta suunnittelusta (Minja Revonkorpi). Sopii myös hyvin ohjenuoraksi nettisivujen suunnittelussa.

Tyylien aliluokat (engl. selectors)

Aliluokat täytyy aina liittää rakenteellisesti oikeaan elementtiin.

class-attribuutti

Seuraavassa esimerkki class-attribuutin käytöstä

<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus </p>

Esimerkki aliluokan lisäämisestä tyylitiedostoon.

p {
  background-color: white;
  color: green;
  text-align: center;
}

p.varoitus {
  background-color: white;
  color: red;
}

Edellisen aliluokan yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.

.varoitus {
  background-color: white;
  color: red;
}

Esimerkki tyylin aliluokan käytöstä .

Näennäisluokat (pseudoluokat)

Näennäisluokat ovat tyylien erikoistapauksia, jolla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan onko linkki vierailtu vai ei.


a:link {		/* vierailematon linkki */
	color: blue;
	background-color: transparent;
}

a:visited {		/* vierailtu linkki 	*/
	color: purple;
	background-color: transparent;
}

a:active {		/* aktiivinen linkki 	*/
	color: red;
	background-color: transparent;
}

a:hover {   /* kohdistettu linkki */
  color: blue;
	background-color: gray;

}

Esimerkki näennäisluokkien käytöstä.

Tärkeimmät CSS-ominaisuudet

Ominaisuuden nimiToimintaEsimerkki
font-familyKäytettävä kirjasinfont-family: Verdana, Arial, sans-serif;
font-sizeKirjasimen kokofont-size: 1.1em;
colorTekstin väricolor: black;
background-colorTaustan väribackground-color: #ffffff;
text-alignTekstin tasaustext-align: center;
margin-leftVasen marginaalimargin-left: 1%;
margin-rightOikea marginaalimargin-right: 1%;
margin-topYlämarginaalimargin-top: 1em;
margin-bottomAlamarginaalimargin-bottom: 1em;
border-leftVasen rajaborder-left: 1px solid black
border-rightOikea rajaborder-right: 1px solid black
border-topYlärajaborder-top: 3px dotted #e0e0e0;
border-bottomAlarajaborder-bottom: 3px solid #000000;
padding-leftVasen täytepadding-left: 0.5em;
padding-rightOikea täytepadding-right: 0.5em;
padding-topYlätäytepadding-top: 1em;
padding-bottomAlatäytepadding-bottom: 1em;
floatElementin leijutusfloat: left;
list-style-typeListan tyyppilist-style-type: disc;

Esimerkkejä

Esimerkki css-tiedostosta

Tarkemmin CSS:n eri ominaisuuksia voi lukea Tietoverkot työvälineenä -kurssin monisteesta ja luentosivuilta.

Kuvat WWW:ssä

Kuvatiedoston koko

Kuvatiedoston kokoon vaikuttavat seuraavat asiat:

Kuvankäsittelytermistöä

Bittikarttaformaatit

JPEG

PNG

GIF

BMP

TIFF

Vektorigrafiikka

SVG (Scalable Vector Graphics)

WWW-sivuille tulevat kuvat

Kuvia laitettaessa WWW-sivuille kannattaa muistaa seuraavat asiat:

Kuvankäsittelyn perustoimintoja

Kuvat käyttötarkoituksen mukaan

Seuraavassa muutamia vinkkejä kuvien käyttämiseen.

Ohjelmistoja kuvien käsittelyyn

Yllämainittujen graafisella käyttöliittymällä varustettujen ohjelmien lisäksi voi käyttää myös komentoriviliittymällä toimivaa ImageMagick-ohjelmistoa, joka on täysin ilmainen ja löytyy useimmille eri käyttöjärjestelmille. Jukka Korpela on kirjoittanut pikaohjeen ImageMagickin asentamisesta Windowsiin. ImageMagic löytyy valmiiksi asennettuna atk-keskuksen st-sarjan (silmu, itu, verso) linux-koneista ja www-palvelimesta.

Lisätietoa kuvista ja kuvankäsittelystä

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tyovaline/luennot/luento6/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2004-02-18 15:44:41
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto