Galeria zdjęć

Miniaturki zdjęć

Najłatwiej zmniejszyć obrazki za pomocą CSS. 

 <a href="fotka1.jpg"><img src="fotka1.jpg" alt="Pierwsza fotka"/></a>

W ten sposób po kliknięciu w obrazek użytkownik przejdzie do dużej wersji zdjęcia.

Galeria

Przydało by się jeszcze zdjęcia jakoś zgrupować i dodać im opisy. Można na przykład za pomocą listy uporządkowanej: 

 <ol>
 <li><a href="ciolek.jpg"><img src="ciolek.jpg" alt="Gryzelda z chomikiem Ciołkiem"/></a>Mój chomiś!!</li>
 <li><a href="rower.jpg"><img src="rower.jpg" alt="Jakaś dziwna dziewczynka"/></a> Ależ ten Bill jest sweet :*</li>
 <li><a href="paskuda.jpg"><img src="paskuda.jpg" alt="Różowe paskudztwo"/></a> To ja :P:P</li>
 </ol>

Prezentowanie powiększonych wersji

Są do tego różne podejścia. Można pozostawić po prostu odnośniki do obrazków — wtedy przeglądarka zajmie się ich prezentacją.

Często spotykane jest otwieranie nowych okien (pop-up) ze zdjęciem — to wymaga użycia XHTML 1.1 i tego DTD — jest to po prostu specyfikacja XHTML 1.1 wzbogacona o atrybut target. I wreszcie używa się zupełnie osobnej strony z osadzonym zdjęciem. Ta wersja wymaga najwięcej ładowania, ale umożliwia dodanie długiego opisu/komentarzy do zdjęcia. Przykład dokumentu wykorzystującego to DTD możesz zobaczyć tutaj. Aby użyć tego DTD, w miejsce standardowego DOCTYPE wpisz: 

 <!DOCTYPE html PUBLIC "-//golem.ph.utexas.edu//DTD XHTML 1.1 plus Target 1.0//EN" "http://golem.ph.utexas.edu/DTD/xhtml11-target.dtd">

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Tekst - Prezentacja | Galeria - Prezentacja
Zmodyfikowano: 30.08.2011, 09:56
submit