<< 19. Webová prezentace | Témata PGR+MUM+WEB | 21. Programování webu - JS >>

20. Design webu

  • CSS - podstata, začlenění do HTML, box-model, CSS 3
  • Typografie - písma, fonty, velikost, kontrast
  • Grafika - typy grafiky, obrázky, pozadí strany, průhlednost

CSS

  • Podstata
    • CSS - Cascading Style Sheets - kaskádové styly
    • systém pravidel pro úpravu designu webových stránek
    • pravidla lze seskupovat do tzv. kaskád
    • vývoj od roku 1996, verze CSS1, CSS2, CSS2.1, CSS3
  • Syntaxe
    • Pravidlo stylu - obecný zápis
      selektor { vlastnost01: hodnota; vlastnost02: hodnota; }
    • Selektor pravidla - udává jaký HTML element bude pravidlo formátovat
  • prvek

body { color: #ffffff; background: #336699; }

  • několik prvků

h1, h2, h3 { font-family: Arial; font-weight: bold; }

  • potomek prvku

ul li a { display: block; }

  • třída (class)

.popisek { font-size: small; font-style: italic; }

  • identifikátor (id)

#navigace { text-align: center; padding: 10px; }

  • Začlenění do HTML
    • CSS v externím souboru - připojení ke stránce pomocí tagu <link> v hlavičce
      <link href="styl.css" rel="stylesheet" type="text/css" />
    • CSS v hlavičce xHTML - tag <style> v hlavičce
      <style type="text/css"> css formátování.... </style>
    • inline zápis CSS - atribut style
      <span style="color: red;"> červený text </span>

Rozvržení obsahu

  • CSS Box model
  • Definice bloku
    • pomocí tagu <div>
  • Identifikace bloku
    • využití identifikátoru ID nebo třídy CLASS
    <div id = "selektor_pro_id">Cervena</div>
    <p class = "selektor_pro_class">Zelezy odstavec</p>
    • přiřazení pravidel pomocí selektoru s křížkem nebo s tečkou
    #selektor_pro_id {color: Red}
    .selektor_pro_class {color: Green;}
  • Pozicování bloků
    • Absolutní - od levého horního rohu
      • position : absolute; left: 20px; top: 50px
    • Relativní - od předchozího bloku
      • position : relative; left: 20px; top: 50px
    • Vrstvené bloky - z-index : pořadí
    • Plovoucí bloky - float : left | right

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

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