<< 14.Kaskádové styly | Témata WEB | 16.Programování webu >>

15. Design webu

  • Typografie - písma, fonty, velikost, kontrast
  • Barvy - barevné modely, kódování barev, barevná schemata
  • Grafika - typy grafiky, obrázky, pozadí strany, průhlednost, animace

Typografie

  • nauka o písmu, jeho zákonitostech a správném užití
  • Písmo - pojmy
    • Font - druh písma - Arial, Calibri, Verdana, Times New Romain ...
    • Rodina fontů - Font-family - souhrn písem téhož druhu
    • Bezpatkové písmo - Sans-serif - tahy stejně silné, technický charakter
    • Patkové písmo - Serif - patkové zakončení tahů, novinový charakter ...
  • Velikost písma - důležitá vlastnost pro zajištění čitelnosti a přehlednosti
    • přehlednost - zajištěna pomocí úrovní nadpisů - html tagy <h1> - <h6>
    • čitelnost - nastavení pomocí css vlastnosti font-size nebo pomocí zoomu prohlížeče
      • pojmenované výšky - "xx-small", "x-small", "small", "medium", "large", "x-large" a "xx-large"
      • relativní jednotky - obrazový bod - pixel - px, procento písma rodičovského prvku - %, násobek velikosti znaku M - em
  • Výška řádku - důležitá vlastnost pro zajištění čitelnosti - line-height - px, %, em
  • Kontrast - určuje čitelnost závislou na rozdílu barvy písma a pozadí - color, background-color

Barvy

  • Barevné modely
    • Model RGB - aditivní, pro monitor
      • složky - red, green, blue
      • stupně - 0 - 255
      0,0,0 - černá, 100,100,100 - šedá, 255,255,255 - bílá
    • Model CMYK - substraktivní, pro tisk
      • složky - cyan, magenta, yellow, black
      • stupně - 0 - 100
      0,0,0 - bílá, 0,0,0,100 - černá, 10,10,10 - šedá
  • Kódování barev v HTML
    • pojmenované barvy - <font color="red">red</font>, <font color="silver">silver</font>, <font color="magenta">magenta</font>, <font color="navy">navy</font>...
    • procentní kód RGB - <font color="rgb(20%,50%,80%)">rgb(20%, 50%, 80%)</font>
    • desítkový kód RGB - <font color="#33aa00">rgb(80, 200, 0)</font>
    • hexadecimální kód RGB - <font color="#0033ff">#0033ff</font> 
body {background-color: yellow; color: blue}
h2 {color: green; border: red}
  • Barevná schemata
    • kombinace barev použitých na daném webu
      • monochromatické - černá, bílá + 1 barevný odstín
      • analogické barvy - použití podobných barev s jednou dominantní
      • komplementární barvy - použití dvou kontrastních barevných odstínů
    • možnost použití on-line generátoru
    • volba barevného ladění podle tématu webu
      • zelená - peníze, příroda; červená - láska; modrá a žlutá - cestování...
      • použití firemních barev pro firemní prezentace

Grafika

  • Typy grafiky
    • rastrová - JPG, PNG, GIF, ICO
      • fotografie, ikony, tlačítka, vzorky, barevné přechody
    • vektorové fonty - TTF, EOT
    • vektorová grafika - SVG, SWF
      • písma, kliparty, kresby, loga, schémata
  • Obrázky
    • využití tagu IMG s atributy - zdrojový soubor, rozměry, rámeček, popis, zarovnání (obtékání) v textu 
      <img  src="foto.jpg" width="60" height="60" border="1" alt="Obrázek" align="left">
<!-- náhled s odkazem na obrázek -->
<a href="obrazek.jpg"><img src="obrazek.jpg" width="80" height="50" alt="popis obrázku"></a>
  • Pozadí strany
    • použití CSS pravidla BACKGROUND pro stylování prvku BODY
    • nastavení barvy pozadí, obrázku, pozice, opakování a ukotvení 
      body {background: yellow url("pozadi.jpg") bottom repeat-x fixed}
/* použití souhrnné vlastnosti background je stejné jako použití samostatných vlastností */
body {background-color: yellow; background-image: url("pozadi.jpg"); background-position: bottom;
      background-repeat: repeat-x; background-attachment: fixed;}
  • Grafické efekty
    • Průhlednost - CSS3 - vlastnost RGBA (red, green, blue, opacity)
    • Zaoblení - CSS3 - vlastnost - BORDER-RADIUS nebo BORDER-RADIUS-TOPLEFT
    • Stínování - CSS3 - vlastnost TEXTSHADOW, BOXSHADOW (délka-x, délka-y, rozpití, barva)
    • Animace - CSS 3 - vlastnost ANIMATION, animované obrázky - GIF, animace s využitím technologie flash - SWF

Školní stránky

RSS