Jak przenosić obrazy w programie Dreamweaver CS5

Krok 1

Pobierz predefiniowany plik lightbox do wyboru i rozpakuj go. Znajdziesz serię czterech folderów i plik index.html. Foldery to "css", które ma pliki z kaskadowymi arkuszami stylów, "zdjęcia", które zawierają dwie kopie każdego z użytych zdjęć, jedno z miniaturą, drugie z pełną rozdzielczością, "obrazy", Zawiera ikony używane dla przycisków i kontrolek oraz "JS", który zawiera pliki JavaScript, których będziesz używać.

Krok 2

Skopiuj własne zdjęcia i miniaturki w folderze "zdjęcia", upewnij się, że w miniaturach prefiksujesz nazwę obrazu za pomocą "thumb_". Na przykład "car.jpg" będzie mieć miniaturkę "thumb_car.jpg". Upewnij się, że każdy obraz ma odpowiednią miniaturę.

Krok 3

Skopiuj plik lightbox z katalogu roboczego, aby utworzyć lokalną kopię witryny i otwórz stronę internetową w programie Dreamweaver. Użyj opcji narzędzia "obrazy linków", aby połączyć miniatury strony internetowej z miejscami, w których mają być.

Krok 4

Kliknij każdy obraz miniatury i spójrz na obszar właściwości elementu aplikacji Dreamweaver, znajdziesz tam opcję utworzenia linku do tej miniatury. Obok tego pola tekstowego znajduje się ikona "bezpośrednio do pliku". Kliknij tam i przeciągnij strzałkę, która powiększa obraz na obrazie tej miniatury. Powtarzaj tę procedurę, dopóki nie połączymy miniatury każdego obrazu.

Krok 5

Kliknij okno kodu pliku HTML i przewiń do nagłówka. Wewnątrz głowy i napisz etykietę wyglądającą tak:

Krok 6

Dodaj drugi znacznik skryptu, na przykład:

Dodany znacznik skryptu wyświetla pasek narzędzi "jQuery" i zatrzymuje określony kod javascript. Nazwa kodu może się różnić w zależności od używanego lightboxa.

Krok 7

Ustaw funkcję "hook" w swoim lightboxie z podanego kodu źródłowego, wewnątrz funkcji JavaScript, która wygląda następująco:

Krok 8

Przewiń w dół i znajdź każdą etykietę, która otacza etykietę , Wpisz następujący tekst w każdym tagu:

class = "lightbox"

tuż przed zamknięciem klapy tagu. Na przykład może to wyglądać tak:

Krok 9

Połącz plik CSS dołączony do lightbox z nagłówkiem dokumentu HTML, możesz to zrobić za pomocą funkcji "Dołącz arkusz stylów" programu Dreamweaver w panelu Pliki. Znajdź plik jQuery.css i połącz go.