Websuunnittelu – Annukka Leppänen

2017/09/26

Kategoriat

Luo kuvaresursseja Photoshopissa

En tiedä tekeekö kukaan muu enää mun lisäkseni web-grafiikkaa Photoshopilla, mutta tässä todella paljon aikaa säästävä vinkki kaikille ’ei-Sketch-käyttäjille’. Tämän niksin avulla vältyt itse tekemästä jokaisesta kuvasta kaksi eri kokoista versiota webiä varten ja annat Photoshopin luoda ne puolestasi. Nimeä kaikki tasot […]

2016/06/16

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 Osa 10: Pseudo-luokat

Pseudo-luokat (pseudo-class) Osaat jo tehdä linkkejä sivuillesi, mutta niiden oletus-ulkoasu saattaa olla epäsopiva muuhun designiin nähden. Onneksi niitä voi tyylitellä, sillä <a> on tagi siinä missä muutkin. a { color: red; background-color: yellow; } Linkit ovat kuitenkin hieman monimutkaisempia, sillä niillä on […]

2016/05/24

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 Osa 9: Div ja Span

Nämä kaksi ovat hyviä kandidaatteja edellisessä osassa opetelluilla id:llä ja classilla muotoiltaviksi, sillä niillä ei ole mitään ennalta määrättyä tarkoitusta. Ennen HTML5:n uusia rakenne-elementtejä (näistä myöhemmin lisää) käytettiin diviä todella paljon sivun asetteluun, ja sillä on yhä paikkansa, jos et pysty käyttämään jossain […]

2016/04/13

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 8: class ja ID

Luokka eli class ja ID Edellisessä osassa opimme muotoilemaan tekstiä. Ja ottaa säännöt käyttöön esim kappaleessa. Mutta mitä jos haluaisimme tehdä yhden kappaleen, jossa on erilainen ulkoasu kuin sen alla olevassa kappaleessa? Ratkaisuja on parikin, mutta aloitetaan luokalla. Luokan eli classin hyvä puoli […]

2016/02/22

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 7: Tekstin ulkoasu

Tekstin ulkoasu (font-family) Aloitetaan fontista. Asetetaan pääotsikon fontiksi Verdana: h1 { font-family: Verdana, Arial, sans-serif; } Säännöissä kannattaa hyödyntää mahdollisuutta lisätä yksi varafontti, mikäli ekaa vaihtoehtoa ei löydy (tässä siis toivotaan Verdanaa, mutta jos käyttäjän koneelta ei sitä löydy, käy myös Arial) ja […]

2016/01/20

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 6: CSS alkaa

Pääsemme vihdoin CSS:n pariin. Homma käynnistyy esittelyllä ja värien käytöllä. Nyt meillä on HTML:n avulla rakennettuna sivu, jolla kuvia, lomake ja tekstiä. Tulos on aika ”ruma”, koska nykyään sivujen ulkoasua ei enää säädellä erilaisten tagien kautta, vaan käyttämällä Cascading Style Sheetseja, tyylitiedostoja […]