8 Tvorba grafického návrhu stránky


Nacházíš se zde: rozcestník kroužku1. Úvodní lekce1. lekce - Teorie klient a server2. lekce - Úvod do vývoje webových aplikací3. lekce - XHTML (XHTML tahák)4. lekce - CSS = kaskádové styly5. lekce - CSS + Třídy6. lekce - CSS a DIVy7. lekce - Publikování stránek8. lekce - Tvorba grafiky


Tvorba grafického návrhu webu

7.1 Opakování

7.2 Typy návrhových vzorů

7.2.1 Fluidní (=přizpůsobitelný) design

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:

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>

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:((eXten­sible 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.

7.2.2 Fixní (=pevný) design

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ů:

7.3 Rozvržení prvků v návrhu webu

Je důležité obsáhnout vždy tyto prvky:

  1. Hlavička a logo webu
  2. Menu
  3. Vlastní obsah
  4. Patička webu

Přičemž tyto jednotlivé prvky můžou mít většinou tuto podobu a obsah:

  1. Hlavička a logo webu
  2. Menu
  3. Vlastní obsah
  4. Patička

7.4 Tvorba grafiky

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.

7.4.1 Vytvoření nového dokumentu

Pomocí klávesové zkratky CTRL + N, či pomocí nabídky SouborNový.

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.

7.4.2 Vytvoření hlavičky, menu, místa pro obsah a patičky

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.

7.4.3 Použití efektů

Č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 DialogyPřechody.

7.5 Další znalosti v tvorbě grafiky

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/.

Máš chuť na další lekci?