<< 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
- Pravidlo stylu - obecný zápis
|
body { color: #ffffff; background: #336699; } |
|
h1, h2, h3 { font-family: Arial; font-weight: bold; } |
|
ul li a { display: block; } |
|
.popisek { font-size: small; font-style: italic; } |
|
#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>
- CSS v externím souboru - připojení ke stránce pomocí tagu
Rozvržení obsahu
![]() |
|
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
- přehlednost - zajištěna pomocí úrovní nadpisů - html tagy
- 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
|