Struktura stránky
Obsah tohoto souboru je v mnohém stejný, jako u varianty 1AB. Případné rozdíly budou zvýrazněny.
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="glob">, který přesouvá tok zobrazení obsahu zpět do levého horního rohu. Zanoření jednotlivých prvků ve struktuře je uvedeno tak, aby byly oba sloupce vždy stejně dlouhé (opticky).Vlastní obsah stránky je v toku dokumentu předřazen před levým menu. Je to dáno využitím plovoucích prvků. Nicméně v řadě případů je dávána přednost tomu, aby se navigační prvky nahrávaly do obsahu stránky až po nahrání obsahu, takže to není na závadu. Zápatí je uvedeno poslední v rámci prvku <div class="glob">.
<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="glob">
<div class="rel marg">
<div class="out">
<div class="float_left">
<div class="center">
<!-- vlastni obsah stranky -->
<!-- zde je vložen obsah stránky -->
<!-- konec obsahu stranky -->
</div> <!-- /center -->
<div class="left">
<div class="left_in">
<!-- obsah leveho menu -->
<div class="logoimg">
<img src="http://www.fi.muni.cz/globfi/fid_images/logo_fi.gif" width="100" height="100" alt="Logo" />
</div><!-- /logoimg -->
<!-- zde je vložen obsah svislého levého menu -->
<!-- konec obsahu leveho menu -->
</div><!-- /left_in -->
</div> <!-- /left -->
</div><!-- /float_left -->
<br class="clear" />
</div><!-- /out -->
</div><!-- /rel -->
<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>
Stránky obsahující menu
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.
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
Základní rozvržení stránek bez menu využívá rozložení s menu. Pouze je logo fakulty zmenšeno, přesunuto na začátek prvku div class="float_left" a má třídu logoimg_nar. Následující prvek nemá třídu center, ale center_nar a obsah levého menu je prázdný (nicméně je přítomen, aby se vytvořil v levé části pruh).
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í
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 -->
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><!-- /pozor novinky -->
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
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.
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. Pči vlastním použití doporučuji vycházet spíše ze stránek začínajících na layout.
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
- uzká varianta list.xhtml, varianta s menu
