Popis designu
Struktura
Každá stránka obsahuje levé menu, volitelně rychlé odkazy a hlavní část. Hlavní část je nahoře a dole uvozena šafránovým pruhem, který nalevo přechází do šedé. V horním pruhu je název stránek, v dolním může být odkaz na webmastera, informace o copyrightu nebo něco podobného, nebo taky vůbec nic.
Hlavní část
Na stránkách, kde je rozcestník, je hlavní část rozdělena na 2 sloupce. V pravém je rozcestník, v levém je nějaká obsažnější informace (úvodní text, aktuality nebo něco podobného). Týka se to stránek wwwindex.xhtml, faindex.xhtml, a sekce.xhtml.
Levé menu
Levé menu má pevnou šířku 135 px a mělo by obsahovat především seznamy s odkazy. K lepšímu zvýraznění odkazů se používá střídavě dvou barev – šedé a bílé a mezi nimi trojúhelníky. Shora začíná vždy bílá.
Rychlé odkazy
Rychlé odkazy (pokud se použijí) jsou nahoře v hlavní části. V rychlých odkazech se použije max. 5 z 27 dodaných ikonek. Ikonka by se neměla opakovat (jinak by kód nebyl validní). Při použití více než 5 ikonek, přesahuje šířka stránky 600 px. Ikonky v rychlých odkazech se rovněž střídají bílé a šedé a jsou odděleny trojúhelníky. Zleva začíná vždy bílá, kódují se ovšem v obráceném pořadí (zprava doleva), takže v kódu je bílá na konci. (Bohužel to nešlo provést nějak chytřeji, kvůli zobrazování v různých prohlížečích) Do rychlých odkazů se také vkládá odkaz na druhou jazykovou verzi.
Barvy
Používají se:
- šafránová v ikonách, prvku TH, prvku HR, v pruzích na začátku a konci stránky: RGB 255, 154, 49 (#ff9a31)
- tmavě červená v ikonách a odkazech po přejetí myši: RGB 153, 0, 0 (#990000)
- šedá v rámečcích tabulek a zkratek: RGB 153, 153, 153 (#999999)
- šedá v odkazech: RGB 102, 102, 102 (#666666)
- šedá v podkladu levého sloupce a rychlých odkazů: RGB 231, 231, 231 (#e7e7e7)
- bílá v podkladu stránky, podkladu levého sloupce a rychlých odkazů: RGB 255, 255, 255 (#ffffff)
- černá v textu: RGB 0, 0, 0 (#000000)
Písma
Písmo by mělo být Arial, Helvetica nebo jiné bezpatkové. Velikost písma je definovaná relativně, kromě písma v rychlých odkazech, kde je velikost 10px.
Obrázky
Obecné
- bgr_line.png šedo-šafránový podklad v horním pruhu a v pruhu oddělujícím rychlé odkazy
- bgr_line_bottom.png šedo-šafránový podklad v dolním pruhu
- fi_cz_logo.png značka fakulty
- list_white.png seznam na bílém podkladu
- list_gray.png seznam na šedém podkladu
- gray_white_horiz.png trojúhelník oddělující sekce levého menu
- white_gray_horiz.png trojúhelník oddělující sekce levého menu
- gray_white_vert.png trojúhelník oddělující ikonky rychlých odkazů
- white_gray_vert.png trojúhelník oddělující ikonky rychlých odkazů
Ikonky
Ikonky slouží k zobrazení rychlých odkazů. Vzhledem k tomu, že mi nebylo jasné, co všechno v rychlých odkazech může být, je jich 27 a snad dokáží pokrýt většinu myslitelných odkazů. Každá ikonka existuje ve 4 podobách – na bílém a šedém podkladu a ve variantě obyčejná a po přejetím myši. Toto rozdělení se promítá do jmen ikonek koncovkou _white, resp. _gray a _hi pro ikonky, které se zobrazují po přejetí myši. Následuje seznam jednotlivých ikonek s možným přiřazením odkazům:
- admin_gray.png, admin_gray_hi.png, admin_white.png, admin_white_hi.png administrativní server nebo vstup do autentizované části
- aktuality_gray.png, aktuality_gray_hi.png, aktuality_white.png, aktuality_white_hi.png aktuality, upozornění apod.
- bezdrat_gray.png, bezdrat_gray_hi.png, bezdrat_white.png, bezdrat_white_hi.png připojení do bezdrátové sítě
- cvt_gray.png, cvt_gray_hi.png, cvt_white.png, cvt_white_hi.png CVT
- czech_gray.png, czech_gray_hi.png, czech_white.png, czech_white_hi.png česká verze
- dokument_gray.png, dokument_gray_hi.png, dokument_white.png, dokument_white_hi.png dokument, přihláška, formulář
- domu_gray.png, domu_gray_hi.png, domu_white.png, domu_white_hi.png domovské stránky, budova
- english_gray.png, english_gray_hi.png, english_white.png, english_white_hi.png anglická verze
- heslo_gray_hi.png, heslo_gray.png, heslo_white_hi.png, heslo_white.png volba hesla
- informatika_gray_hi.png, informatika_gray.png, informatika_white_hi.png, informatika_white.png informatické kolokvium, informatický seminář, konference, apod.
- info_gray_hi.png, info_gray.png, info_white_hi.png, info_white.png informace
- katalog_gray_hi.png, katalog_gray.png, katalog_white_hi.png, katalog_white.png studijní katalog, dokumentace
- kontakt_gray_hi.png, kontakt_gray.png, kontakt_white_hi.png, kontakt_white.png kontakt
- lide_gray_hi.png, lide_gray.png, lide_white_hi.png, lide_white.png lidé na FI, lidé na MU, seznam studentů, zaměstnanců apod.
- materialy_gray_fi.png, materialy_gray.png, materialy_white_hi.png, materialy_white.png knihovna, studijní materiály, dokumentace
- mu_gray_hi.png, mu_gray.png, mu_white_hi.png, mu_white.png univerzita, IS MU
- obecna_gray_hi.png, obecna_gray.png, obecna_white_hi.png, obecna_white.png nezařaditelné odkazy
- obecna1_gray_hi.png, obecna1_gray.png, obecna1_white_hi.png, obecna1_white.png nezařaditelné odkazy
- pozor_gray.png, pozor_gray_hi.png, pozor_white.png, pozor_white_hi.png upozornění, důležité věci
- struktura_gray.png, struktura_gray_hi.png, struktura_white.png, struktura_white_hi.png struktura, katedry, hierarchie
- studijni_gray.png, studijni_gray_hi.png, studijni_white.png, studijni_white_hi.png studijní oddělení
- tech_gray.png, tech_gray_hi.png, tech_white.png, tech_white_hi.png technické informace
- uvt_gray.png, uvt_gray_hi.png, uvt_white.png, uvt_white_hi.png ÚVT
- vyuka_gray.png, vyuka_gray_hi.png, vyuka_white.png, vyuka_white_hi.png výuka, konference, přednáška, seminář, workshop
- vyveska_gray.png, vyveska_gray_hi.png, vyveska_white.png, vyveska_white_hi.png vývěska, zápisník, připomínka
- vyzkum_gray.png, vyzkum_gray_hi.png, vyzkum_white.png, vyzkum_white_hi.png věda, výzkum
- za512_gray.png, za512_gray_hi.png, za512_white.png, za512_white_hi.png na poslední chvíli, důležité, upozornění, rozvrh, harmonogram