Mendelova univerzita v Brně Provozně ekonomická fakulta

Dokumentace k projektu Kvetoucí kaktusy

Chalupová Lenka LS 2012 Webový Design

Obsah 1.

Úvod a cíl práce .............................................................................................................................. 3

2.

Informační architektura .................................................................................................................. 3

2.1.

Rozdělení obsahu na kategorie .................................................................................................. 3

2.2.

Schématické znázornění struktury informací - diagram ............................................................. 4

3.

Rozvržení ........................................................................................................................................ 4

3.1.

Grafické zobrazení rozvržení hlavní stránky ............................................................................... 4

3.1.

Znázornění mřížky ...................................................................................................................... 6

4.

Barevné řešení ................................................................................................................................ 6

5.

Technické řešení ............................................................................................................................. 7

5.1.

Způsob pozicování prvků ............................................................................................................ 7

5.2.

Použité grafické nástroje ............................................................................................................ 7

6.

Závěr............................................................................................................................................... 8

7.

Seznam obrázků ............................................................................................................................. 9

1. Úvod a cíl práce Pro téma webová prezentace zájmového sdružení jsem si zvolila Klub kaktusářů Zlín. Hlavním důvodem výběru bylo zvolit nový design pro jejich stávající webové stránky. Slouží jím především pro sdělení informací o klubu, členech, hlavnímu majiteli a akcích pořádaných klubem a fotografií. Webová stránka je zaměřena na kaktusy a sukulenty a je také laděna do jemných přírodních barev. Projekt byl zpracován v jazyce HTML za pomocí kaskádových stylů a java scriptu.

Obrázek 1:Původní vzhled

2. Informační architektura 2.1. Rozdělení obsahu na kategorie Webová stránka obsahuje hlavní stránku, na kterou se lze dostat kliknutím na logo klubu a další čtyři stránky (Aktuality, Moje maličkost, Archiv, Seznam členů Klubu kaktusářů Zlín). Stránka „Moje maličkost“ obsahuje dvě podkategorie (O mně, Náš pes) další podkategorie má stránka „Náš pes“ (Mandy a Cherry, Cherry má štěňátka). „Archiv“ je rozdělen na jednotlivé roky a ty jsou rozděleny na měsíce. Na stránce „Seznam členů KKZ“ obsahuje členy klubu, na které se můžeme podívat na informace o nich kliknutím na jejich jméno. Na každé stránce se nachází drobečková navigace, pomocí níž se můžeme orientovat, v které kategorii se zrovna nacházíme. Na jednotlivé stránky se dostaneme pomocí menu, u kterého některé položky nabízí po kliknutí podkategorie. Položky, které nabízí podkategorie, poznáme podle dvou šipek „>>“, které značí, že daná položka menu není konečná. Odkazy v menu jsou řešeny pomocí funkce v java scriptu, aby položka v menu zůstala rozevřena, když si ji návštěvník otevře. Hlavní stránka je uvítací, obsahuje proto fotografii a základní informaci o webové stránce. „Aktuality“ – obsahuje aktuální informace nejen pro členy klubu, ale i pro ostatní, kteří by měli zájem podívat se třeba na výstavu kaktusů klubu. 3

„Moje maličkost“ – obsahuje dvě kategorie předsedy klubu, jedná se o informace o něm samotném i o jeho psech. „O mně“ – nachází se zde informace o předsedovi klubu. „Náš pes“ – zde budeme moci vidět fotografie psů předsedy klubu „Archiv“ – stránka je rozdělena na jednotlivé roky, které obsahují informace za měsíce daného roku a také fotografie ze skleníků členů klubu a z různých klubových akcí. „Seznam členů KKZ“ - zde může návštěvník najít seznam členů klubu a po kliknutí na jeho jméno se podívat na informace o něm a také na jeho osobní fotografie a fotografie jeho kaktusů.

2.2. Schématické znázornění struktury informací - diagram

Obrázek 2:Mapa stránek

3. Rozvržení 3.1. Grafické zobrazení rozvržení hlavní stránky Webové stránky obsahují v menu i podkategorie, které se zobrazí po kliknutí na danou položku v menu. Různé podstránky se liší pouze v obsahu stránky. Odlišnost tedy mezi stránkami výrazná není, to můžeme porovnat i na drátěných modelech.

4

Obrázek 3:Drátový model hlavní stránky

V záhlaví se vlevo nachází logo klubu, které je symbolem celých stránek. Poté v hlavičce najdeme název stránky a malý obrázek kvetoucího kaktusu. Dále vlevo se nachází menu, které má i podkategorie. Tyhle součásti jsou na všech podstránkách stejné, liší se jen tělo stránky, které se nachází vpravo pod hlavičkou. Na úvodní stránce se nachází pouze název a úvodní fotografie (viz. Obrázek3). Na dalších stránkách se nachází i drobečková navigace, která je hned pod hlavičkou, poté vždy nadpis, podnadpis a informace k dané podstránce. Na stránce aktualit můžeme vidět i obrázek, který se týká aktualit (viz. Obrázek4).

5

Obrázek 4:Drátěný model stránky-aktuality

3.1.

Znázornění mřížky

Pro úhlednější text je zarovnán do bloku. Menu je zarovnané vlevo pod logem. A tělo stránky je zarovnané k pravému okraji pod hlavičkou po celé její zbylé šíři.

4. Barevné řešení Barvy byly zvoleny hlavně tak, aby byly v duchu celého loga (viz.Obrázek5). Odstíny zelené byly vybrány, jako přírodní barvy, které se pro tohle téma hodí. V menu jsou odstíny zelené s bílým textem. Nadpisy stránek jsou červeně, podle květu kaktusu z loga. Název stránky byl vyřešen černou barvou, také podle loga.

6

Obrázek 5:Logo klubu

5. Technické řešení Při vytváření webových stránek bylo použito programu PsPad a grafiický program Correl Draw. Vzhled byl tvořen pomocí kaskádových stylů CSS, které jsou v jazyce HTML volány pomocí tagu