Keskustelu: Nettisivujen teko: Ulkoasukysymyksiä

Suunnittelen tuossa sivua ja teen ulkoasua, joten pari kysymystä:

1. Kun piirrän ulkoasua, pitääkö huomioida jotain selaimeen liittyviä seikkoja? Tarkoitan sitä että kaikki sivut eivät välttämättä toimi syystä tai toisesta kaikilla selaimilla?

2. Kun teen tuota ulkoasua Paint.net:illä, pitääkö huomioida koko siellä jne.? Esim: Jos teen vaikkapa 10 cm leveän sivun, niin onko se ulkoasu merkkauksen jälkeen 10 cm vai? Jos CSS:llä sitä suurentaa, muuttuuko ulkoasu sekavaksi, epätarkaksi tms.?

Vai voiko ulkoasun tehdä vaikka paintilla oman kokon mukaan, ja merkkauksella laittaa sitten omat kokot?

Beuling kirjoitti:

1. Kun piirrän ulkoasua, pitääkö huomioida jotain selaimeen liittyviä seikkoja?

Ei minusta. Oletan että "ulkoasun piirtämisellä" tarkoitat, että teet luonnosta. Kuvia piirretään, nettisivuja suunnitellaan.

On tärkeä ymmärtää että nettisivu ei ole kuva. Jos haluat ihan kuvan, niin sen voi toki laittaa nettisivulle. Myös nettisivusta voi "ottaa kuvan" ja laittaa sen vaikka kuvaan.

Beuling kirjoitti:

Tarkoitan sitä että kaikki sivut eivät välttämättä toimi syystä tai toisesta kaikilla selaimilla?

Toimimattomuus johtuu huonosti tehdystä sivusta, ei ulkoasusta.

Beuling kirjoitti:

2. Kun teen tuota ulkoasua Paint.net:illä, pitääkö huomioida koko siellä jne.?

Minusta ei. Kun olet piirrustellut sen luonnoksen valmiiksi, niin sitten alat oletettavasti miettiä, että miten se sivu toteutetaan. Toki voi olla jo piirusteluvaiheessa hyvä miettiä, ettei käytä sellaisia juttuja joita ei osaa tai ole halukas opettelemaan. Tietty jos vaan itse teet, niin ainahan siihen suunnitelmaan voi palata ja muuttaa tarvittaessa.

Beuling kirjoitti:

Esim: Jos teen vaikkapa 10 cm leveän sivun, niin onko se ulkoasu merkkauksen jälkeen 10 cm vai?

Minusta fyysisten mittayksiköiden käyttäminen nettisivujen suunnittelussa on melko tuhoontuomittu ajatus, ellei sitten olla nimenomaan ensisijaisesti tulostettavaksi ajateltua sivua tekemässä.

Lisäksi on tekninen mahdottomuus tehdä sivu, joka olisi kaikilla sivua selaavien näytöillä likimainkaan 10cm levyinen. Ja toisaalta jos joku tekisi 10cm leveän sivun ja eksyisin sinne 50" televisiollani, jota katselen 3 metrin päästä, niin en varmasti tulisi samalle sivulle uudestaan.

Beuling kirjoitti:

Vai voiko ulkoasun tehdä vaikka paintilla oman kokon mukaan, ja merkkauksella laittaa sitten omat kokot?

Juhannussivustolle voi olla hyvä idea laittaa omat kokot. Muuten kysymys meni kyllä viuhuen "ohi".

Jees, kiitosta.

Siis tarkoitan jos piirrän paintilla valikot, sisältökohta jne... ja koko sivu on vaikkapa leveä (esimerkkinä nyt cm) 10 cm, niin tarkoitan sitä että kun merkkaan sitä, pitääkö se olla juuri se 10 cm, vai voiko se merkata CSS:llä niin että olisi vaikka paljon kapeampi?

Jos teet kuvia paintilla, niin ne on ns. bittikarttakuvia (erotuksena ns. vektorikuvista). Bittikarttakuvien ainoa luonnollinen mittayksikkö on pikselit.*

Näin ollen jos merkkaillessa määrittelet niille kokoja, etkä halua niiden venyvän/puristuvan, niin kannattaa joko jättää koko kokonaan määrittämättä, tai määrittää se pikseleissä (samaksi kuin kuvan koko)

Jos taas haluat että kuva venyy/puristuu, niin voit toki määritellä sen missä vaan yksikössä. Silloin mielestäni on jokseenkin epäolennaista, minkä kokoisen olet siitä alun perin tehnyt.

* (Bittikarttakuville voidaan toki määritellä esim. senttimetrimääräinen koko, eli pisteiden koko eli resolutio, jolloin se joissain näyttämis- tai tulostamistilanteissa venytetään/puristetaan määriteltyyn kokoon. Mikään www-selain ei tietääkseni välitä kuvaan itseensä määritellystä resoluutiosta)

Kuvien koko taustakuvissa määräytyy aina pikselikoon mukaan. Yhden pikselin kuva näkyy jokaisella laitteella yhden pikselin levyisenä. Jopa mobiililaitteissa. Mobiililaitteet yleensä näyttävät ensin kutistetun version sivusta, jota voi sitten tähystää lähemmäs normaalikokoon, eli tilaan jossa 1 pikseli vastaa laitteen näytön yhtä pikseliä.

CSS:llä toteutettaessa ulkoasun eri kohdat koostuvat palasista taustakuvia. Tämä tarkoittaa sitä, että tekemäsi ulkoasu on hyvä jakaa osiin. CSS:ssä oletuksena elementtien koko määräytyy sisällön mukaan. Suurin osa elementeistä jakautuu kahteen eri tapaan toimia:

Lohkoelementit (display: block;)

Esimerkiksi divit, lomakkeet (form), tekstikappaleet (p) ja otsikot (h1, h2...) ovat lohkoelementtejä. Ne varaavat itselleen laatikon muotoisen alueen, joka varaa leveyssuunnassa niin suuren alueen kuin mahdollista. Korkeus määräytyy sisällön (rivien) mukaan. CSS:llä voi lisätä muita sääntöjä, jotka muuttavat tätä käyttäytymistä. Esimerkiksi kelluttaminen (float) tai elementin sijoittaminen absoluuttisesti (position: absolute;) kumoavat leveyden maksimoinnin.

Rivielementit (display: inline;)

Nämä elementit rivittyvät tekstin mukana vasemmalta oikealle, ylhäältä alas. Esimerkiksi kuvat (img) ovat oletuksena inline-elementtejä, jolloin ne käyttäytyvät kuin ne olisivat merkki tekstin seassa. Linkkielementit taas voivat sisältää tekstiä ja lisää elementtejä, joten ne jatkavat rivittymistä sisältönsä ja käytettävissä olevan tilan mukaan. Rivielementtien tyylittely on rajatumpaa eikä niille voi esimerkiksi määrittää sisennystä (padding). Poikkeuksen tähän tuo jälleen kelluttaminen, joka muuttaa tapaa jolla elementti käyttäytyy.

.

Kun siis alat tehdä ulkoasua, niin eteesi tulee heti se kova fakta, että CSS on erittäin joustava ja pelkkien kiinteiden arvojen (olivat sitten pikseleitä tahi senttimetrejä) käyttö tekee asioista vaikeampia. Jonnekin on pakko tehdä jotakin, joka voi joustaa, vähintään pystysuuntaan. Jos vaikka lätkäiset vaan yhden kuvan taustakuvaksi, etkä mitään muuta, ja kutsut tätä "ulkoasuksi", niin se ei tule toimimaan kovin hyvin. Jos sisältöä onkin paljon ja kuvassa oleva tila ei riitä, niin sitten ulkoasu alkaa näyttää tavalla tai toisella rikkonaiselta, vaikka olisitkin sijoitellut vaikkapa useita divejä oikeille paikoilleen kiinteillä pikselikoilla.

Parempi lähtökohta on kuitenkin suunnitella ensin HTML:n rakenne kertomaan mitä kaikki se tekstisisältö on ja sitten koristella se CSS:llä.

Joudut siis pilkkomaan ulkoasusta useampia eri palasia, joista osa toistuu vaaka- tai pystysuuntaan ja toiset taas ovat vain jossakin yksittäisessä nurkkauksesa. Lisäksi CSS:llä tarvitsee asetella elementtejä siten, että voit sijoittaa näitä taustakuvia johonkin. Valitettavasti useamman taustakuvan tuki elementtiä kohden on vasta tulossa kaikkiin selaimiin (IE9:n julkaisua odotellaan), joten asetettavien taustakuvien määrä on rajattu yhteen per elementti. Elementit oletuksena ovat täysin läpinäkyviä, joten käyttämällä päällekkäin olevia elementtejä saa luotua useamman kerroksen. Toistuvat taustakuvat menevät usein pohjalla oleviin elementteihin, joiden koko määräytyy sisältönsä mukaan, kun taas päällä oleviin elementteihin laitetaan muuta koristelua.

Käytännön esimerkki: haluat että h2-otsikoissa on aina tietynlainen reunus vasemmasta yläkulmasta alkaen. Siispä määrität otsikolle hieman lisää sisennystä (padding) ja lisäät kuvan (background: url(kuvat/tausta_h2.png) no-repeat left top;). Tämä kuva taas voi olla alunperin vaikkapa monikerroksisesta kuvasta, jonka olet tehnyt Paint.NETillä, jossa otsikon tausta on ollut omassa layerissä (kerros), josta olet sitten napannut kuvan omaksi tiedostokseen ja tallentanut (alfaläpinäkyvänä) PNG-kuvana.

Tavallaan kuitenkin luot CSS:llä monikerroksista kuvaa, jossa HTML:ssä määritelty sisältö (teksti, kuvat, videot) tulee vaikuttamaan siihen, miten paljon tilaa kukin elementti/kerros tarvitsee ja missä järjestyksessä elementit/kerrokset ovat. Lapsielementit ovat lähes poikkeuksetta pienempiä kuin isäntäelementtinsä.

.

Kaip täst jottai tolkkuu suapi.

Joo, sai tolkkua. :D

CSS:llä tosiaan voi nähtävästi saada ihmeitä aikaan. Kun katoin Mozilla Firefoxsista ohjelmointiputkan sivun tiedot ja kuvat, niin esim. toi Ohjelmoinitiputkan logo ei taida olla noin "pitkä" leveyssuunnassa.

Ei ole. Elementille voi määrittää taustavärin. Kuvan jälkeen siis näkyy taustaväriä.

Tulossa olevat CSS-määritykset mahdollistavat mm. liukuvärjäyksen ilman kuvia. Se on kuitenkin semmoista kamaa, joka tulee käyttöön kait seuraavan viiden vuoden sisään, eli ei kovin kovalla kiireellä. Selaimet kehittyvät hitaasti mutta varmasti.

Firefoxiin voit ladata Firebug-laajennoksen, jonka avulla voi tutkia (inspect) elementtejä sekä niiden CSS-arvoja.

Täältä löytyy hyvä opas CSS:n opiskeluun ja jos tulossa olevat (CSS3) ominaisuudet kiinnostavat löytyy täältä joitakin esimerkkejä :)

Jos tämä olisi MikroPC:n kysymys & vastausosio niin merri saisi vastauksestaan 50€ Oli mielestäni parhaiten opastettu vastaus...