Fotogalerie

Fotografie jsou velmi častou součástí osobních stránek (nikdy nezežloutnou :-) ), ať už z různých akcí, srazů, oslav, soutěží atd. Protože jsou fotografie kvalitní obrázky, mají větší velikost - například ve stovkách KB, není tedy vhodné mít více kvalitních fotografií na jedné stránce. Fotogalerie jsou tedy většinou tvořeny stránkou s náhledy (zmenšeninami) fotografií (či jiných obrázků), které slouží jako odkazy na stránky s větším obrázkem. Tvořit takovou stránku znamená nejprve všechny obrázky vhodně zmenšit, potom je na stránce uspořádat do divů nebo tabulky, zajistit, aby fungovaly jako odkazy na větší obrázky nebo stránky s větším obrázkem (to by ale znamenalo tvořit další stránky pro jednotlivé obrázky) - neboli moře práce, kterou si už asi dovedete představit. Proto ve většině prohlížečů obrázků existují možnosti jednoduchého vytvoření fotogalerií, my využijeme prohlížeč, který jsme poznali v minulých lekcích - Zoner PhotoStudio (naší školou legálně zakoupený :-) ).

Pro jednoduchou tvorbu fotogalerií v programu Zoner Photostudio můžeme využít nabídku Publikovat - Vytvořit galerii HTML. Nejprve musíme vybrat obrázky, které chceme do galerie použít (všechny musí být v jedné složce). V dalším kroku máme k dispozici výběr z několika šablon (jejich omezený počet je právě nevýhodou této snadné a rychlé tvorby galerií). Každý typ galerie může mít trochu jiné možnosti nastavení, není možné ale ani nutné všechny možnosti všech galerií procházet, protože jsou poměrně intuitivní. Většina galerií obsahuje základní možnosti nastavení podle obrázku:


Globální nastavení obsahuje například společný titulek všech stránek, dále jsou nastavení rozdělena pro stránku s náhledy a stránku s obrázkem. Pro stránku s náhledy i stránku s obrázkem můžete volit například barvu pozadí, titulky. V obou případech lze určit vlastnosti záhlaví a zápatí - barvy textu, odkazů, do zápatí lze zapsat informační text (o akci, autorovi galerie atd.).
Pro náhledy je řada dalších voleb, z nich se zmíním alespoň o těchto:
- šířka, výška - velikost náhledu v pixelech, běžný poměr rozměrů digitálních fotografií je 4:3 (například šířka 160px a výška 120px)
- JPEG komprese - zmenšuje velikost souboru náhledu a snižuje jeho kvalitu, přednastavený je kompromis 85%
- počet sloupců a řádků - je nutné volit rozumně podle počtu fotografií, je-li fotografií více, potom se rozdělí na další stránky (není vhodné, aby na poslední stránku zbyl jeden nebo dva obrázky), nezapomeňte, že počet sloupců a šířka náhledu určují celkovou šířku galerie
- text popisku - uvedete-li {NAME}, bude pod obrázkem uvedený jeho název (bez přípony), hodí se pro pojmenované fotky
U obrázku můžete zvolit jeho rozměry, fotografie z digitálního fotoaparátu jsou většinou podstatně větší, než by se na www stránky hodilo.

Po úpravách nastavení můžete vyzkoušet Náhled galerie - do náhledu si Zoner automaticky vybere jen několik (šest) obrázků, aby se vytvořil rychleji. Náhled zavřete a můžete znovu upravovat nastavení, dokud s nimi nebudete spokojeni (zvláště děvčata s barvičkami :-) ).

Pokud jste už konečně se vzhledem své galerie spokojeni, vyberte znovu všechny fotografie (můžete Ctrl + A - vybrat vše a potom stačí "odfajfknout" jen jednu z nich) a přejděte na další krok, ve kterém můžete galerii uložit.

Ve složce s galerií je velká spousta souborů, ten hlavní je vždy index.htm (pozor na příponu), proto je také nutné každou galerii vytvářet do nové složky, jinak by se tyto soubory index.htm přepsaly. Další soubory htm obsahují další stránky s náhledy nebo stránky s obrázkem. Vzhled všech stránek je určený pomocí stylů, většinou index.css a image.css, ve kterých už byste se měli zhruba orientovat. Do těchto souborů jsem zasahoval například, když se mi nelíbily zbytečně velké mezery mezi náhledy, nebo zbytečná čára nad prázdným zápatím apod.


Úkoly:

Úkol (5 bodů):

Ve složce ŠKOLA vytvoř složku FOTO a zkopíruj si do ní z našeho školního disku s fotografiemi (případně odjinud) fotografie všech spolužáků (či jiná fota, alespoň dvacet) a vytvoř fotogalerii v programu Zoner Photostudio. Uprav styl pro stránku s náhledy tak, aby mezi náhledy byla mezera 5px. Na pozadí stránky s náhledy vlož obrázek. Nezapomeň přidat odkaz na tuto fotogalerii na svém indexu.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_20_10B_tvorba www20
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.