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

Ongelmia videon katselussa?

Kertaus

Kertauksena:

Tarpeellisia linkkejä:

Word XHTML-editorina

Word 2003 Professional tukee XML-tilaa, jossa voidaan muokata myös XHTML-dokumentteja. Demoissa käytetään kuitenkin XetorjEdit-ohjelmaa, koska Wordillä voi saada helposti aikaan toimimattomia XHTML-dokumenttia.

XHTML-tiedoston muokkaaminen

Jos teet Wordillä XHTML-dokumenttia, niin ole hyvin tarkkana miten aloitat dokumentin tekemisen!

XHTML-dokumenttia ei saa suoraan avata Wordiin sillä ilman "säännöstöä" ohjelma ei osaa tulkita dokumenttia oikein. On siis tehtävä seuraavasti:

  1. Valitse New | XML Document.
  2. Nyt pääset XML-tilaan ja voit valita "säännöstön", joka kuvaa XHTML-dokumentin elementit ja niiden suhteet. Tätä ns. säännöstöä sanotaan Schemaksi.
  3. Schema-luettelon saa esiin napauttamalla Templates and add-ins. Valikoista tämä kohta löytyy valinnan Tools | Templates and Add-ins | XML Schema alta.
  4. Valitse Add Schema ja kirjoita tiedoston nimeksi osoite http://appro.mit.jyu.fi/dtd/xhtml_simple.xsd
  5. Tallenna XHTML Simple-tyypin mukainen dokumenttipohja omaan hakemistoosi.
  6. Avaa pohja (File | Open). Pohjaa ei saa kopioida suoraan dokumenttiin (Copy&Paste). Nyt elementtien lisäily onnistuu.
  7. Tallentaessa katso, että alhaalla on valittuna tallennustyypiksi XML Document (*.xml). Tällöin Word muuttaa päätettä, mutta nimen voi muuttaa .html-päätteelle resurssienhallinnassa.
  8. Wordilla muokatusta XHTML-dokumentista katoaa rivinvaihdot. Avattessa XetorjEditiin kannattaa jäsentely tehdä uudelleen valinnalla Plugins | XML Indenter | Indent XML.

Word-dokumentti (.doc) XHTML:ksi

CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia

Periaate

Hyödyt

Muistettava

Esimerkkejä

Tyylien määrittäminen

Tyylien liittäminen dokumenttiin

XHTML-dokumentin otsikkotietoihin (head) seuraava määritys:

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

CSSDialog

XetorjEditin CSSDialog

Ennen CSS-tyylien muokkaamista täytyy lisätä XHTML-dokumenttiin link-elementti, joka viittaa järkevään (samassa hakemistossa olevaan) CSS-tiedostoon.

CSS-tiedostoa itse muokkaamalla

Perusperiaate on muuttaa olemassaolevien XHTML-elementtien ulkoasun ominaisuuksia. Ominaisuuksilla saattaa olla olemassa jotkut alkuarvot (kuten esim. että tausta on valkoinen ja teksti musta body-lohkossa). Ominaisuuksia voidaan muokata suoraan kirjoittamalla CSS-muotoiseen tekstitiedostoon. Muoto on määritelty CSS-standardissa.

Muutoksia voi tehdä esim. XetorjEditssä avaamalla CSS-tiedosto, mutta Mozilla-selaimiin saatavalla Web Developer-työkalurivillä voit muokata css:ään suoraan niin, että vaikutukset näkyvät sivussa.

Edit CSS -palkki Web developer -työkalurivillä

Syntaksi


tyylinimi {

  ominaisuus: arvo;

}

Huomaa seuraavat asiat:

Esimerkki

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

Isompi esimerkki

Esimerkki CSS-tiedostosta

Tarkemmin CSS:n eri ominaisuuksiin tutustutaan WWW-julkaiseminen-kurssilla.

Pituuksien määrittäminen

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina. px (pikseli) yksikköä voi käyttää reunusten ja marginaalien määrittelyssä. 


h1 {
	margin-top: 1%;
}
h2 {
	border: 1px solid black;
}

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%);
}

Värikoodin saaminen onnistuu helpoimmin jollain värityökalulla, esim.

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

Tärkeimmät CSS-ominaisuudet

Ominaisuuden nimiToimintaEsimerkki
font-familyKäytettävä kirjasinfont-family: Verdana, Arial, sans-serif;
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: 1%;
margin-bottomAlamarginaalimargin-bottom: 1%;
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;

Kuvat

Kuvatiedoston koko

Kuvatiedoston kokoon vaikuttavat seuraavat asiat:

Kuvankäsittelytermistöä

Kuvaformaatteja

Kuvaformaattien vertailua

TIFF ja BMP

PNG

JPEG

Vektorigrafiikka

Kuvat käyttötarkoituksen mukaan

Seuraavassa muutamia vinkkejä kuvien käyttämiseen.

Kuvienkäsittelyn perustoimintoja

Käsiteltäviä esimerkkikuvia (© Tommi Lahtonen):

Isot kuvat kannattaa kopioida aina ensin C:\Mytemp-hakemistoon (tai vastaavaan) eikä käyttää verkkolevyltä. Käsittelytoimenpiteitä:

Ohjelmistoja kuvien käsittelyyn

Lisätietoa kuvista ja kuvankäsittelystä

PDF ja PostScript

Näitä tiedostomuotoja käytetään, kun halutaan teksti jaettavaksi juuri sellaisessa muodossa kuin millaisena se tulostuisi.

Word-dokumentti (.doc) PDF:ksi

Ghostview

OpenOffice Writer

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/luento10/
© 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/>
2005-05-03 11:43:32
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto