Návrh stánky
Webová stránka obsahuje mnoho html prvků, jako například nadpisy, podnadpisy, odstavce, obrázky, hypertextové odkazy na další stránky apod. Tyto prvky jsou seskupeny a umístěny v tak zvaných blocích, které si můžeme představit jako obdélníky vymezující určitý prostor. Jejich velikost, případně barvy, pozadí, rámečky a podobně (bloky mohou být ale i průhledné) jsou nastaveny pomocí css stylů.
Jednotlivé bloky mohou být pod sebou, vedle sebe, či vnořeny v jiných blocích.
Rozmístění těcho bloků vytváří rozvržení webové stránky, její návrh, layout, grafický design.
Základní bloky
Pro jednoduché rozvržení stránky použijeme bloky:
- header - hlavička - zpravidla obsahuje název webu, logo, obrázek a navigační menu
- main - vlastní obsah stránky - obsahuje článek nebo více článků, událostí apod., zpravidla rozdělených na skupiny
- footer - patička - může obsahovat rychlé odkazy, kontakty apod.
Pro další rozdělení těchto bloků použijeme:
- nav - navigační menu - odkazy na další stránky webu
- article - článek, událost, produkt atd.
- div - kontajner - seskupuje jiné bloky, aby mohly být později umístěny vedle sebe
- section - seskupuje articly stejného zaměření - kontajner, nebo naopak dělí jeden article na oddíly, podkapitoly
<!doctype html>
<html>
<head>
<title>Titulek webu</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="basic.css">
</head>
<body>
<header>
<div>
<h1>Název webu</h1>
<nav></nav>
</div>
</header>
<main>
<article>
<h1>Nadpis článku</h1>
</article>
</main>
<footer></footer>
</body>
</html>
Připojení CSS stylů
Pro návrh stránky, resp. pro styly jednotlivých prvků stránky, tedy i jednotlivých bloků, vytvoříme společný css soubor.
Tento soubor připojíme ke všem html stránkám webu. Připojení se provede pomocí značky link.
<link rel="stylesheet" href="basic.css">
Syntaxe CSS
Styl pro html značku vytvoříme tak, že v css souboru zapíšeme název značky bez špičatých závorek < a > a do složených závorek { } vložíme příslušné vlastnosti. Každá vlastnost je ukončena středníkem.
Ukázka:
header {
background-color: #660099;
color: #FFFFFF;
padding: 30px 10%;
}
CSS styly jednoduchého návrhu
Pro začátek vytvoříme jednoduché uspořádání jednotlivých bloků pod sebou tak, jak budou i později zobrazeny na mobilu. Jak se na širším monitoru umístí název webu a menu či několik článků vedle sebe, si ukážeme později.
- Celé stránce (značce body) nastavíme nulový okraj (margin), protože jinak má přednastavený okraj 8px (ostatní bloky přednastavené okraje nemají).
- Všem blokům (header, main, article, footer) nastavíme vnitřní odsazení (padding) a barvy pozadí (background-color).
- Levý a pravý padding hlavních bloků (header, main, footer) je vhodné nastavit v %. Čím větší bude okno prohlížeče, tím větší budou okraje a naopak.
- I horní a dolní padding, je-li zadaný v %, se počítá ze šířky. Toho lze využít u headeru, zejména má-li hlavička obrázek na pozadí, protože s měnící se výškou dolního paddingu (název webu a navigační menu nahoře, padding pod ním) se bude měnit výška hlavičky. Dojde tak k proporcionální změně velikosti obrázku hlavičky (čím širší, tím vyšší a naopak).
V navigačním bloku (nav) budou vloženy odkazy, v kapitole Odkazy se je naučíme používat a formátovat.
Do article podle další kapitoly později vložíme text článku tvořený nadpisy a odstavci, pak budeme tedy formátovat tyto prvky.
Typ písma (font-family) je vhodné mít na celé stránce stejné, můžeme jej tedy nastavit body a vnořené prvky jej zdědí, pokud sami nebudou mít nastaveno jiné písmo (viz např. h1 v headeru v následující ukázce).
