:: cesky :: :: english ::
Fakulta informatiky
Masarykova univerzita v Brně

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

Rozvržení stránek se od varianty 1AB liší

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>
Rozvržení stránek se od varianty 1AB liší

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

Rozvržení stránek se od varianty 1AB liší

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í

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

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. 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í:


Masarykova univerzita Fakulta informatiky webmaster, Fakulta informatiky MU Brno