FOTOGALERIE
Vložit na své stránky své fotografie a sdílet je s ostatními, představuje velmi žádanou funkci webové stránky. Uživatelé často nechtějí číst a obrázky nebo fotky jsou výborná možnost, jak něco říci na první pohled. Co ale dělat, když chceme do mašich webových stránek vložit více fotek.
První věc, kterou musíme udělat, je úprava fotek do dvou verzí. První verze bude představvovat fotografie v nezměněné velikosti, avšak s pozměněným názvem. U druhé verze také pozměníme název jednotlivých fotografií, ale také pozměníme velikost - tato sada fotografií bude sloužit jako THUMBNAIL - náhledové zmenšené fotografie. Jdeme na to.
Nejprve si však připravíme fotky a dáme si je do jedné složkym kterou pojmenujeme jako 01_fotogalerie. Pro studijní účely si můžeme stáhnout následující 4 fotky, které jsem pořídil v Jirkově:
FOTO1 | FOTO2 | FOTO3 | FOTO4
Fotografie jste si stáhli a uložili do nově vytvořené složky: 01_fotogalerie
A pokud se vám doposud dařilo a máte vše připravené, jak je výše popsáno, můžeme pokračovat. Uvnitř složky 01_fotogalerie si vytvoříme ještě jednu složku, která se bude jmenovat thumb a momentálně ponecháme tuto složku prázdnou.
Nyní přistoupíme k úpravě fotek. Jako první přejmenujeme fotografie ve složce 01_fotogalerie podle následujícího vzoru:
Jako druhé budeme upravovat velikost fotografií. Využijeme program gimp, který si nyní otevřeme. V programu otevřeme postupně jednotlivé fotografie, nejdříve soubor 01.JPG. Z menu zvolíme příkaz Obrázek / Upravit velikost a pozměníme hodnotu šířky a výšky obrázku na 100x75, jak ukazuji v následujícím obrázku (v anglické verzi programu to jsou hodnoty Width a Height)
Poté obrázek uložíme klávesovou zkratkou CTRL+SHIFT+S. Upravenou fotografii nyní uložíme do složky thumb, kterou jsme vytvořili uvnitř složky 01_fotogalerie a prozatím ji ponechali prázdnou. Všechny ostatní upravené fotografie budeme postupně vkládat zde, do této složky. Uložime je ale ve formátu podle následujícího:
A nyní máme připraveny fotografie k tomu, abychom je vložili do naší webové stránky. V tuto chvíli můžeme zavřít program GIMP. Čeká nás otevírací práce, kdy budeme připravovat programy a soubory na fotogalerii. Musíme udělat celkem 3 kroky:
- Otevřeme program FileZilla a přesuneme složku 01_fotogalerie na FTP server.
- Otevřeme program PsPad, připojíme se na FTP server. Vytvoříme nový soubor fotogalerie.html a uložíme ho na FTP server.
- Z FTP serveru otevřeme soubor index.html.
V souboru fotogalerie.html musíme vytvořit nový kód, tak do toho:
No a nyní si rozebereme, co jsme právě udělali. Nejdříve se podíváme do hlavičky od řádku 5 - 16. Zde jsme naformátovali tři tagy: BODY, P a IMG. Formát pro body je parametr background: což představuje barvu pozadí. Tentokráte jsem ale uvedl barvu v číselné podobě. Před šestimístným číslem je třeba vložit symbol křížku. S číslem pak můžete libovolně experimetovat. Pro tag P jsem formátoval barvu textu (color), zarovnání textu doprostřed (text-align), tučné písmo (font-weight) a velikost písma (font-size). Pro tag IMG jsem nastavil formát rámu, který bude černý, souvislý a v šířce 1 pixel.
Dále je zajímavé podívat se mezi řádky 22 - 25. Jsou zde uvedeny 4 řádky odkazů. Vypadají stejně, ale nejsou. Odkaz A je doplněn parametrem HREF, kde je nejprve uvedena adresa na velký obrázek a namísto textu jsem vložil mezi tagy <a></a> obrázkový tag IMG s určením adresy k malému obrázku v podobě parametru SRC. Zjednodušeně kód vypadá následovně:
<a href=“VELKÝ OBRÁZEK”><img src=“MALÝ OBRÁZEK”></a>
Jedná se vlastně o odkaz, který je vložen do obrázku. Kliknutím na malý obrázek se otevře velký obrázek. Pojďme si to vyzkoušet na své internetové adrese. Ve spodní části hlavní domovské stránky se oběví nový odkaz “Fotogalerie” a když na něj klikneme, objeví se nová stránka:
Jsou zde 4 forografie seřazeny vedle sebe a když klikneme na jednu fotografii, objeví se její velký originál.