Cum să tranziți imaginile în Dreamweaver CS5

Pasul 1

Descărcați fișierul cu casete predefinite, la alegere, și dezarhivați-l. Veți găsi o serie de patru dosare și un fișier index.html. Dosarele sunt "css", care are fișiere cu foi de stil în cascadă, "fotografii", care conține două copii ale fiecărei fotografii pe care o veți folosi, una cu o miniatură, una cu rezoluție completă, "imagini" Conține pictogramele utilizate pentru butoane și comenzi și "JS", care conține fișierele Javascript pe care le veți folosi.

Pasul 2

Copiați propriile imagini și miniaturile în dosarul "fotografii", asigurați-vă că în miniaturile pe care le prefixați numele imaginii cu "thumb_". De exemplu, "car.jpg" ar avea o miniatură a "thumb_car.jpg". Asigurați-vă că fiecare imagine are miniatură corespunzătoare.

Pasul 3

Copiați caseta lightbox din directorul de lucru pentru a crea o copie locală a site-ului dvs. Web și deschideți-o în Dreamweaver. Utilizați opțiunea de instrument "link-uri imagine" pentru a conecta miniaturile paginii dvs. web la locurile în care doriți să fie.

Pasul 4

Faceți clic pe fiecare imagine miniatură și examinați zona de proprietăți a elementului aplicației Dreamweaver, veți găsi o opțiune de a crea o legătură în jurul acestei miniaturi. Lângă caseta text există o pictogramă "direct la fișier". Faceți clic acolo și glisați săgeata care face ca imaginea să fie mai mare în imaginea miniaturii respective. Repetați această procedură până când conectați miniaturile fiecărei imagini.

Pasul 5

Faceți clic pe fereastra de cod a fișierului HTML și alegeți antetul. În interiorul capului și, scrieți o etichetă care arată astfel:

Pasul 6

Adăugați o a doua etichetă de script, după cum urmează:

Eticheta script adăugată afișează bara de instrumente "jQuery" și oprește codul javascript specific. Numele codului poate varia în funcție de caseta de lumină pe care o utilizați.

Pasul 7

Setați funcția "cârlig" din caseta lightbox din codul sursă dat, în interiorul unei funcții Javascript care arată astfel:

Pasul 8

Derulați în jos și găsiți fiecare etichetă care înconjoară o etichetă . Introduceți următorul text în fiecare etichetă:

class = "lightbox"

chiar înainte de închiderea închizătorului etichetei. De exemplu, ar putea fi astfel:

Pasul 9

Conectați fișierul CSS care însoțește caseta lightbox la antetul documentului dvs. HTML, puteți face acest lucru cu ajutorul funcției "Atașare foaie de stil" a Dreamweaver în panoul Fișiere. Găsiți fișierul jQuery.css și conectați-l.