+358 40 7070202
Search

CSS ja verkkosivujen ulkoasu

Verkkosivujen visuaalinen ulkoasu toteutetaan aina CSS-tyyleillä. CSS-tyyleillä saat sivustostasi juuri haluamasi näköisen; voit luoda uutta tai muokata valmista kunhan ymmärrät miten CSS toimii.
corellia_web

kesto 1 pv

890 + ALV 24%
  • Kurssimuoto: Luokka, Etä

Tee verkkosivuistasi kauniit

Kaikki verkkosivujen muotoilu tehdään käyttäen CSS-muotoilusääntöjä. HTML määrittää sivun sisällön rakenteen, JavaScriptilla voidaan sivulle tuoda toiminnallisuutta, mutta ulkoasu muotoillaan aina CSS-tyyleillä. Useimmille webdesignereille riittää ulkoasun suunnittelu ja joskus myös toteutus. Sivuston sisältö ja rakenne voit tulla valmiina sisällönhallintajärjestelmästä, mutta ulkoasuun voi vaikuttaa vielä jälkeenpäin. Myös valmiin sivuston osien muotoilu, taiton virheiden korjaus tai responsiivisuuden hienosäätö ovat kaikki CSS-muokkausta.

Vaikka et toteuttaisi itse verkkosivua, vaan ainoastaan suunnittelisi ulkoasua, on CSS-ominaisuuksien tunteminen edellytys sille, että osaa hyödyntää webin mahdollisuudet oikein ja tehokkaasti.

Hallitsemalla CSS-tekniikkaa pystyt mm. muokkaamaan suhteellisen paljon esimerkiksi WordPress-sivuston ulkoasua vaikka et tekisi mitään muokkauksia teeman koodiin. Omat CSS-säännöt voidaan lisätä sivustoon useissa teemoissa tai itse asennetun lisäosan avulla.

CSS-perusteet kurssilla opit mm.

  • ymmärtämään selainten toiminnan
  • tietämään miten sivut muokataan toimimaan eri kokoisilla näytöillä
  • opit CSS-kielen syntaksin
  • lukemaan ja ymmärtämään valmiiden sivujen muotoiluja
  • lisäämään omat tyylisi valmiiseen sivustoon
  • määrittämään sivuston typografian
  • käyttämään värejä, läpinäkyvyyksiä, taustoja
  • parantamaan sivuston käytettävyyttä ja käyttökokemusta
  • ja saat monia valmiita käyttöesimerkkejä sivustojen osista

Kurssin kohderyhmä

Kurssi on suunnattu kaikille verkkosivustojen suunnitteluun osallistuville graafikoille / websuunnittelijoille tai sisällön ylläpitäjille, esimerkiksi markkinoinnin tai viestinnän ammattilaisille, jotka päivittävät ja luovat sisältöjä jollain julkaisujärjestelmällä toteutulle verkkosivustolle. Kurssilla oppiminen tapahtuu hands-on-harjoitteluna.

Kurssin esitietovaatimukset

Esitiedoiksi riittävät yleiset tietokoneen käyttötaidot ja webin peruskäsitteiden tunteminen.

Tietoa koulutuksista

Luokkakoulutukset
Corellian koulutustiloissa:
Vuorikatu 20 A, Helsinki

Kiinnostaako asiakaskohtainen toteutus? Meillä onnistuu.

Kurssin olennainen sisältö

Selainten toiminta

  • Miten web toimii ja sivut latautuvat
  • Miten selaimet toteuttavat sivun ulkoasun
  • Selainten erot
  • Selainten työkalut

CSS perusteet

  • Sääntöjen rakenne ja kielioppi
  • Kommentit
  • CSS-valitsimet vs. HTML-rakenne

Valitsimet

  • Elementtivalitsimet
  • class- ja id-valitsimet
  • CSS-mittayksiköt

Sääntöjen hierarkia

  • Mihin sääntöjä voidaan kirjoittaa
  • Sääntöjen periytyvyys
  • Sääntöjen spesifisyys
  • !important määre
  • vaikutusalueen määrittäminen

Elementtien asemointi

  • CSS box-model
  • Margin
  • Padding
  • Border
  • HTML: Block, inline ja inline-block
  • Float asemointitekniikkana

Tekstimuotoilut

  • Kirjasimet, web-fontit
  • Kirjasinkoko
  • Rivikorkeus
  • Merkki- ja sanavälit
  • Otsikko- ja kappaletyylit
  • Sisennykset ja tasaukset

Värit

  • Värit selaimissa
  • Hex-arvot, hsl ja rgb
  • Läpinäkyvyys

Käytännön käyttökohteita

  • Navigaatiot
  • Linkit
  • Kuvat ja media
  • Lomakkeet
  • Taulukot

Edistynyt CSS

  • Työkalut ja editorit
  • CSS-esiprosessointitekniikat SASS ja LESS
  • Asemointitekniikoita
  • Flexbox
  • Grid layout

Hyviä käytäntöjä

  • Miten varautua uusiin ominaisuuksiin
  • @supports
  • Entäs vanhemmat selaimet

Kurssin kesto

Kesto 1 pv.

Kurssityyppi

Luokka / Etä

Kouluttajat

Kari Selovuo

Ilmoittaudu kurssille

Oletko kiinnostunut asiakaskohtaisesta toteutuksesta?

Kerro tarpeesi, niin suunnittelemme koulutuksen tarpeisiinne räätälöitynä.