Maksuton saavutettavuus-webinaari 10.2.2025 klo 14:00 Ilmoittaudu tästä !
Tärkeä aihe: Saavutettavuus ja esteettömyysdirektiivin vaatimukset

 

CSS ja verkkosivujen ulkoasu

Haluatko oppia luomaan visuaalisesti houkuttelevia ja ammattimaisia verkkosivuja? Tällä yhden päivän intensiivikurssilla saat tarvittavat tiedot. Kurssi on suunniteltu erityisesti graafikoille, web-suunnittelijoille sekä markkinoinnin ja viestinnän ammattilaisille
corellia_web

kesto 1 pv

890 + ALV
  • Kurssimuoto: Luokka, Etä

Muokkaa sivustosi ulkoasua

Verkkosivujen ulkoasun muokkaus tehdään käyttäen CSS-tyyleillä. HTML-merkkauksella toteutetaan sivun sisällön rakenne, mutta ulkoasu muotoillaan aina CSS-tyyleillä. Sivuston sisältö ja rakenne voi tulla valmiina  julkaisujärjestelmästä, mutta ulkoasuun voidaan vaikuttaa vielä jälkeenpäin. Myös valmiin sivuston ulkoasun muokkaus, sisällön asemoinnin korjaus tai responsiivisuuden hienosäätö ovat kaikki CSS-tyyleillä tehtävää muokkausta.

Vaikka et toteuttaisi itse verkkosivua, vaan ainoastaan suunnittelisi ulkoasua, on CSS-ominaisuuksien tunteminen hyödyksi.

Hallitsemalla CSS-tekniikkaa pystyt muokkaamaan esimerkiksi WordPress-sivuston ulkoasua, tekemättä muutoksia teeman koodiin. Omat CSS-säännöt voidaan lisätä sivustoon teeman tai sisältölohkojen ominaisuuksina tai erillisen 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ä

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:
Kalevankatu 9 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ä.