Nacházíš se zde: rozcestník kroužku → 1. Úvodní lekce → 1. lekce - Teorie klient a server → 2. lekce - Úvod do vývoje webových aplikací → 3. lekce - XHTML (XHTML tahák) → 4. lekce - CSS = kaskádové styly → 5. lekce - CSS + Třídy → 6. lekce - CSS a DIVy → 7. lekce - Publikování stránek → 8. lekce - Tvorba grafiky
Tento typ designu nemá pevně danou šířku hlavního
<div>u. To znamená, že se design přizpůsobuje velikosti
okna prohlížeče. Příkladem takového designu je např. Seznam.cz. Pokud si okno zmenšíte, či pokud
si jej zvětšíte, dojde k tomu, že se Seznam.cz přizpůsobí (až do minimální
velikosti 800px).
Takový druh designu se kóduje (zapisuje v xHTML a CSS) takto:
V xHTML
<div id="hlavni">
<!-- OBSAH -->
<p>Zde bude obsah. Může zde být hlavička webu, nějaké menu a hlavní textový obsah.</p>
</div>V CSS
#hlavni {
height:90%; /* Zajistí, že velikost hlavního DIVu bude vždy 90% okna prohlížeče */
min-height:800px; /* Pokud ale okno prohlížeče bude menší, než 800px, velikost hlavního DIVu zůstane 800px */
margin:0 auto; /* Toto zajistí, že hlavní DIV bude vycentrován */
}Jinak lze samozřejmě používat jakékoli jiné hodnoty jak v xHTML:((eXtensible HyperText Markup Language)), tak v CSS:((Cascading Style Sheets)).
Tento typ designu je na návrh mírně složitější, proto si v praxi ukážeme pouze druhý ty designu. Tento typ designu má také několik nevýhod – např. je složitější si jej při návrhu v grafickém editoru představit.
Tento design už od začátku návrhu počítá s pevnou šířkou hlavního
<div>u. Ten je většinou široký okolo
900px. A to z těchto důvodů:
Je důležité obsáhnout vždy tyto prvky:
Přičemž tyto jednotlivé prvky můžou mít většinou tuto podobu a obsah:
Pro tvorbu grafiky budeme používat program Gimp – ten je možné pro Windows stáhnout z adresy http://gimp-win.sourceforge.net/stable.html.
Po nainstalování je potřeba se v grafickém editoru zorientovat.
Popsaný postup bude pouze orientační a bez dopňkových obrázků. Popsaný postup teoreticky funguje i pro iné editory, může se ale lišit v jednotlivých krocích.
Pomocí klávesové zkratky CTRL + N, či pomocí nabídky
Soubor → Nový.
Velikost kreslící plochy nastavíme na šířku 900px (viz výše – tato šířka bude vyhovovat nejvíce uživatelům). Výšku dokumentu můžeme nastavit dle libosti, např. na 1200px.
Pro jednotlivé části webu zpravidla užíváme nástroj
Obdélník. Pomocí které si nakreslíme obdelníkovou plochu
potřebné barvy.
Je důležité aby každá část webu (hlavička, menu, obsah, patička) byla uložena v samostatné vrstvě. Vždy je tedy nutné vytvořit před vložím nové části webu novou vrstvu.
Pro vytváření těchto prvků je důležité osvojit si ovládání grafického programu. Doporučuji prostudovat si návody na webu http://grafika.cz.
Často se při tvorbě webu používají různé efekty, zde jsou ty nejpoužívanější:
Vzorek
Jedná se o malý obrázek (v rozměrech okolo několika málo pixelech), který je na pozadí vybraného prvku opakován donekonečna v obou směrech (je tedy celé pozadí vyplněné tímto vzorkem).
Jak vytvořit takový vzorek v editoru Gimp se dozvíte např. zde http://frantab.blogspot.com/…-vzorku.html.
Filtry
Filtry se aplikují pomocí nabídky Filtry v okně
s obrázkem, se kterým pracujete.
Přechody
Přechody je možné aplikovat pomocí dialogového okna, které je možné
zobrazit z nabídky Dialogy → Přechody.
Grafika je poměrně rozsáhlý obor a pokud se na něj člověk nespecializuje delší dobu, je složité jej ovládnout. Doporučuji si tedy otevřít přímo program Gimp (či případně jiný grafický editor) a něm si hrát a zkoušet nové věci. Tím se člověk naučí nejvíce.
Rozhodně je také dobré nastudovat si materiály na webových serverech, které se grafikou zabývají, např. http://www.grafika.cz.
Pro vážnější zájemce doporučuji koupit si, či půjčit si knihu Gimp: Uživatelská příručka. Lze si ji i stáhnout v počítačové podobě – http://knihy.root.cz/…ka-prirucka/.