Základní rozvržení

Struktura stránky

Vzhledem k současnému obsahu webu Fakulty informatiky Masarykovy univerzity v Brně lze stránky rozdělit do dvou skupin. Stránky obsahující určitou formu navigace - zpravidla v podobě menu v levé části stránky. A stránky na kterých není tato navigace a tedy i prostor nutný. Oba dva druhy stránek však obsahují společné prvky designu - záhlaví a zápatí.

Společné prvky designu

Záhlaví

Záhlaví stránky tvoří jednak oblast pro jazykové mutace a dále hlavička obsahující název fakulty. Obě oblasti jsou zarovnány doprava.

Jazykové mutace

Oblast pro odkazy na jazykové mutace má šedý podklad, je zarovnána doprava a odkazy v ní jsou zobrazeny nepodtržené, tučně a tmavší barevnou variantou 1 pro všechny typy odkazů. Pro oživení byly v tomto případě ještě přidány "dvojtečky". Jde o v současné době hojně využívaný prvek, který však není nezbytný.

V případě potřeby mohou být do této oblasti umístěny další globální odkazy, jako je vyhledávání nebo mapa serveru.

Výpis kódu:

<div class="gray rightonly">
	<a href="#">:: cesky ::</a>
	<a href="#">:: english ::</a>
</div><!-- /gray rightonly -->

Hlavička

Hlavička stránky je šafránově žlutý pruh. Jeho šířka je dána na celou stránku. Text v rámci hlavičky je bílý, tučný a jako jediný má nastaven patkové písmo pro odlišení od ostatních oblastí. Obsah hlavičky může být buď stejný na všech stránkách (Fakulta Informatiky Masarykova univerzita v Brně), nebo obsahovat nadpis stránky (název sekce, atd.). Osobně bych doporučila spíše první variantu a pro uvedení nadpisu využít prvek H1.

Výpis kódu:

<div class="fi_head rightonly">
   Fakulta informatiky<br />
   <span class="small">Masarykova univerzita v Brně</span>
</div><!-- /fi_head rightonly -->

Zápatí

Zápatí je umístěno pochopitelně ve spodní části stránky, je šedé, má výrazně zmenšené písmo a všechny odkazy by měly být černě. V návrhu bylo použito stávající struktury zápatí, obohacené o adresu fakulty a další kontakt.

Rozvržení stránek

Aby bylo dosaženo určitého vzhledu designu, je základní rozvržení stránky následující.

Nejprve jsou uvedeny prvky v záhlaví -- jazykové mutace a po té hlavička s názvem fakulty.

Poté následuje prvek <div class="disp_area">, který přesouvá tok zobrazení obsahu zpět do levého horního rohu. Jako poslední je v rámci tohoto prvku uvedeno zápatí.

<body>

<div class="gray rightonly">
	<a href="#">:: cesky ::</a>
	<a href="#">:: english ::</a>
</div><!-- /gray rightonly -->

<div class="fi_head rightonly">
   Fakulta informatiky<br />
   <span class="small">Masarykova univerzita v Brně</span>
</div><!-- /fi_head rightonly -->

<div class="disp_area">

 <!-- zde je vložena celá stránka včetně prvků určujících další strukturu -->

  <div class="paticka">
    <div class="rightonly">
      <a href="http://www.fi.muni.cz/index.cgi.cz.iso-8859-1"><img src="http://www.fi.muni.cz/globfi/fid_images/logo_fi_small.gif" alt="Fakulta informatiky" /></a>
      <a href="http://www.muni.cz/"><img src="http://www.fi.muni.cz/globfi/fid_images/ic_s_mu.gif" alt="Masarykova univerzita" width="24" height="24" /></a>
    </div>
    <p>Fakulta informatiky MU Brno, Botanická 68a, 602 00 Brno, tel.: ++420-549 491 810, e-mail:<a href="mailto:info@fi.muni.cz" title="e-mail">info@fi.muni.cz</a></p>
  </div><!-- /paticka -->

</div><!-- /disp_area -->

</body>

Z důvodů velkého a především proměnlivému počtu odkazů v případném menu nelze využít menu vodorovné. Proto je umístěno v levé části stránky, takže může libovolně narůstat.

V tomto případě obsahuje prvek <div class="disp_area"> dva další prvky (spolu s patičkou tedy celkem tři). Nejprve je uveden prvek <div class="leftcol">, který obsahuje levé menu. Poté následuje prvek <div class="obsah">.

Levé menu obsahuje vždy logo fakulty. Kromě toho může obsahovat vlastně libovolný text. V případě, že budou použity nadpisy velikosti 2, budou zobrazeny jako bílý text na šafránovém podkladu. Ostatní typy nadpisu budou mít stejný styl jako v jiných částech stránky. Odkazy v této části stránky nejsou podtrženy, nečíslované seznamy nemají grafické prvky.

Základní rozvržení i s menu lze vidět ve stránce layout_only.html.

Stránky neobsahující menu

V některých případech není nutné, aby stránka obsahovala levé menu. Aby zůstal zachován jednotný styl, zůstává ve struktuře levý sloupec -- ale obsahuje pouze logo fakulty. Liší se třída definující vzhled obsahu stránky. Místo třídy obsah je použita třída narrow_obsah.

Základní rozvržení bez menu lze vidět ve stránce layout_narrow.html.

Další prvky v designu stránky

Rychlá navigace v rámci obsahu stránky.

Pro přidání další navigace na stránky slouží kombinace následujících tříd gray rightonly a v případě potřeby (především, pokud má být navigace umístěna hned pod hlavičkou, tedy je jako první prvek obsahu pak i třídu settop. Velikost prvku je dána velikostí obsahu.Velikost prvku je dána velikostí obsahu. Prvek by měl být uveden jako přímý potomek prvku obsah. Použití navigace lze vidět ve stránce layout_nav.html.

Rozdělení prostoru na dva sloupce

V některých případech je prostor na stránce lépe využit, pokud je rozdělen do více sloupců. K tomuto účelu je určena třída col2. Aby byl prostor správně rozdělen je třeba oba dva sloupce "zabalit" do dalšího prvku div. Prvek obsah tedy bude obsahovat následující strukturu:

    <div class="rel">
      <div class="col2">
        <!-- obsah prvního sloupce -->
      </div><!-- /col2 -->
      <div class="col2">
        <!-- obsah druhého sloupce -->
      </div><!-- /col2 -->
    </div><!-- /rel -->

Použití struktury lze vidět na stránce layout_2col.html, pro strukturu s levým menu a na stránce layout_2col_narrow.html.

Novinky a upozornění

Text je v obou případech doplněn barevným pruhem vpravo. A je ostatním textem obtékán

Pro případ, že bude třeba určitý text na stránkách vyčlenit, jsou připraveny třídy novinky a pozor. Vyčleněný text bude umístěn v pravé části stránky, jeho šířka je stanovena na 30% volného prostoru (tedy prostoru, který má prvek k dispozici) a měl by být použit buď se šedým pozadím nebo s pozadím barvy světlejší varianta 2. Pro upozornění spíše informačního typu (doplňující poznámky, vysvětlující text atd.) by mělo být použito především šedého pozadí:

<div class="gray novinky">
vyčleněný text 
</div><!-- /gray novinky -->

V případě, že se rozhodnete některému následujícímu prvku zabránit, aby danou novinku obtékal, použijte v něm třídu clear

Pokud je třeba uživatele na něco upozornit (změny, termíny, podmínky apod.) je vhodnější použít barevné pozadí:

<div class="pozor novinky">
vyčleněný text 
</div><!-- /gray novinky -->

:: nahoru ::

Obecné prvky návrhu

Barvy

Ve všech variantách jde o kombinaci šedé a barevných odstínů šafránově žluté. Při určování barev bylo vycházeno z barvy definované na současných stránkách.
#fff7ee, #fff7ee Světlejší varianta 1
#ffcc99, #ffcc99 Světlejší varianta 2
#ff9933, #ff9933 Základní barva
#bb6622, #bb6622 Tmavší varianta 1
#774411, #774411 Tmavší varianta 2

:: nahoru ::

Fonty

Při rozhodování o použitých fontech lze vzít v úvahu dvě hlediska: čitelnost textu a zažité zvyklosti v rámci společnosti či instituce. Vzhledem k tomu, že součástí zadání není grafický manuál FI MUNI Brno, vychází návrh při výběru typu (rodiny) písma z aktuálního návrhu stránek.

Ve skutečnosti existuje ještě druhá výjimka - pro specifické účely je v rámci elementu <pre> použito písmo typu monotype.

Až na jedinou výjimku by měl být obsah stránek zobrazován bezpatkovým písmem. Toto písmo je na obrazovce čitelnější. Z aktuálního návrhu byla převzata následující definice písem. Pokud je v grafickém manuálu FI MUNI Brno definována jako základní jiná rodina písem, lze ji na jediném místě předefinovat.

* {font-family: verdana,helvetica,arial,sans-serif;}

V samostatném kaskádovém stylu pro tisk by pak mělo být nastaveno jako výchozí písmo patkové.

Hlavička

Jedinou výjimku tvoří hlavička v záhlaví stránky pro odlišení byla vybrána jiná rodina písem. Tentokrát jde o písmo patkové. Opět lze - v případě, že je to v grafickém manuálu řečeno - přepsat definici na odpovídající rodinu písem.

Odkazy

Zobrazení odkazů lze rozdělit do dvou skupin - v jedné skupině jsou odkazy, u kterých lze předpokládat, že uživatel bez přemýšlení rozpozná, že jde o odkaz. Ve druhé skupině jsou pak klasické odkazy v rámci textu, seznamů apod.

Stálé odkazy

Především jde o odkazy opakující se na více stránkách - odkazy na jazykové mutace v horní části stránky, odkazy v levé části - svislé menu a odkazy ve vodorovném menu (abecední seznam, rychlá navigace ve struktuře) - tam kde bude vodorovné menu využito.

Tyto odkazy jsou nepodtržené a mají ve všech variantách (link, active link, visited link) nastavenu stejnou barvu (tmavší varianta 1: #bb6622). Základní barva by byla příliš výrazná při větším nahromadění odkazů a v místech, kde je šedý podklad, by byla málo kontrastní.

Odkazy na jazykové mutace a odkazy v rámci vodorovných menu by měly být navíc zobrazeny na šedém pozadí (#eeeeee) a umístěny v pravé části stránky. Více informací je v popisu struktury.

Klasické odkazy

Klasické odkazy jsou zobrazeny podtržené, základní barva pro nenavštívený odkaz je tmavší varianta 1 (#bb6622). Navštívený odkaz je zobrazen tmavší variantou 2 (#774411) a aktivní odkaz je zobrazen základní barvou.

Poznámky k vlastní realizaci

Aby bylo vyhověno podmínkám zadání byl popsaný desing "nasazen" na požadované stránky. V některý případech není bohužel struktura ze zadání příliš jasná a odlišuje se od stávajících stránek. Navíc lze předpokládat, že budoucí podoba stránek se bude lišit (především v případě tit.stránky www.fi.muni.cz., resp. fadmin.fi.muni.cz.

Stránky dle zadání:

wwwindex.xhtml
fadmin.xhtml
sekce.xhtml
aplikace.xhtml
varianta2 - aplikace2.xhtml
informace.xhtml
obecna.xhtml Vysledná stránka neodpovídá zadání. Již puvodní text obsahoval parametry id. Dalši parametry id ani class navíc se v předepsaném těle stránky nevyskytují.
simplelist.xhtml
list.xhtml

Fakulta informatiky MU Brno, Botanická 68a, 602 00 Brno, tel.: ++420-549 491 810, e-mail:info@fi.muni.cz

Struktura stránky

Rozvržení stránek

Další prvky v designu stránky

Obecné prvky

Struktura stránky

Společné prvky designu

Záhlaví

Jazykové mutace

Výpis kódu:

Hlavička

Výpis kódu:

Zápatí

Rozvržení stránek

Stránky obsahující menu

Stránky neobsahující menu

Další prvky v designu stránky

Rychlá navigace v rámci obsahu stránky.

Rozdělení prostoru na dva sloupce

Novinky a upozornění

Obecné prvky návrhu

Barvy

Fonty

Hlavička

Odkazy

Stálé odkazy

Klasické odkazy

Poznámky k vlastní realizaci

Stránky dle zadání: