Cum să creați Swap-uri cu mai multe imagini în Dreamweaver - dummies

Înainte de a începe să creați un design mai complex al paginii cu comportamentul Swap Image al Dreamweaver, o pagină finalizată.Pentru comportamentul Swap Image puteți înlocui oricare sau toate imaginile de pe o pagină

Când utilizați comportamentul Swap Image, este important să faceți toate imaginile pe care le veți schimba cu aceeași dimensiune (înălțime și lățime) Dacă imaginile nu au aceeași dimensiune, toate imaginile, cu excepția primei, vor fi întinse sau comprimate pentru a se potrivi cu spațiul ocupat de prima imagine inserată în pagină

Dacă utilizați comportamentul Swap Image cu o serie de imagini care nu au aceeași înălțime și lățime, aveți câteva opțiuni:

Decupați cele mai mari, astfel încât toate imaginile să aibă aceeași dimensiune.

Asigurați-vă că imaginile orizontale și verticale ocupă același spațiu în design prin combinarea a două imagini verticale pentru fiecare orizontală. Pur și simplu creați un fișier într-un program precum Photoshop, introduceți două imagini verticale în același fișier unul lângă celălalt și apoi măriți imaginea astfel încât fișierul să aibă aceeași dimensiune ca o imagine orizontală.

Creați un fișier de imagine cu dimensiunea celei mai mari imagini, setați fundalul la o culoare neutră, cum ar fi negru sau alb, apoi introduceți toate celelalte imagini pe fundal pentru a le putea salva pe toate cu aceeași dimensiune a fișierului.

Urmați acești pași pentru a utiliza comportamentul Swap Image:

1 Creați un design al paginii cu toate imaginile pe care doriți să le afișați inițial.

Fiecare dintre cele trei fotografii din designul paginii pentru Bridge Tower din Londra are două copii: o miniatura și o versiune mai mare. Atunci când prima pagină este încărcată într-un browser web, toate cele trei imagini miniatură sunt poziționate în partea de jos a paginii, prima dintre versiunile mai mari afișate în zona principală chiar deasupra miniaturilor.

2Numai imaginile în inspectorul Proprietăți.

Pentru a viza imaginile cu JavaScript, care este modul în care comportamentele funcționează, dați mai întâi fiecărei imagini un ID unic. ID-ul imaginii nu este același cu numele fișierului imagine sau eticheta de text, deși puteți utiliza aceleași nume sau nume similare. Identificatoarele de imagini nu trebuie să aibă spații sau caractere speciale.

3Selectați fereastra → Comportamente.

Se deschide panoul Comportamente. Puteți glisa panoul Comportamente în altă parte a paginii și puteți să-l extindeți trăgând partea inferioară sau laterală. De asemenea, puteți închide orice alte panouri deschise pentru a face mai mult spațiu făcând clic pe bara gri închisă din partea de sus a oricărui panou.

4Selectați o imagine.

Selectați imaginea din pagină care va servi drept declanșator al acțiunii.

5 Selectați comportamentul Swap Image.

Cu imaginea de declanșare selectată în spațiul de lucru, faceți clic pe semnul plus din panoul Comportamente pentru a deschide lista derulantă a acțiunilor și alegeți acțiunea pe care doriți să o aplicați.

6Specificați imaginile de schimbat în caseta de dialog Swap Image.

În lista Imagini, selectați ID-ul pentru imaginea care va fi înlocuită. Faceți clic pe butonul Răsfoiți pentru a selecta imaginea care înlocuiește imaginea principală. Dacă imaginea nu este deja salvată în folderul site-ului local, Dreamweaver va oferi să-l copiați acolo pentru dvs.

7În partea de jos a casetei de dialog Swap Image, selectați opțiunea Preload Images pentru a instrui browserul să încarce toate imaginile în memoria cache atunci când pagina este încărcată.

Dacă nu selectați această opțiune, poate apărea o întârziere atunci când se utilizează schimbul de imagini.

8Dacă doriți, deselectați opțiunea Restore Images OnMouseOut.

Opțiunea Restore Images OnMouseOut înseamnă că atunci când un eveniment este finalizat (cum ar fi atunci când mouse-ul este mutat de pe miniatură declanșatoare), imaginea originală este înlocuită. În mod implicit, Dreamweaver preselectează această opțiune pentru comportamentul Swap Image. Poate doriți să deselectați această opțiune dacă descoperiți că înlocuirea imaginii originale de fiecare dată când rotiți cursorul peste o altă miniatură distrag atenția.

9 După ce specificați toate setările pentru comportament, faceți clic pe OK.

Noul comportament apare în panoul Comportamente.

10Specificați un eveniment pentru comportament.

După ce ați aplicat acțiunea, puteți reveni și puteți specifica ce eveniment va declanșa acțiunea. În mod implicit, Dreamweaver aplică evenimentul OnMouseOver atunci când utilizați acțiunea Swap Image, dar puteți schimba acel eveniment la oricare dintre cele disponibile, cum ar fi OnClick, care necesită ca utilizatorul să facă clic pe imagine pentru a declanșa acțiunea Swap Image.

11Aplicați comportamente suplimentare.

Pentru a aplica comportamentul Swap Image la alte imagini de pe o pagină, repetați pașii 5-10, făcând clic pentru a selecta imaginea pe care doriți să o utilizați ca declanșator și apoi specificați imaginea corespunzătoare care ar trebui schimbată.

12Testați-vă munca într-un browser.

Nu puteți vedea efectele comportamentelor de genul acesta, până când faceți clic pe butonul Vizualizare live în partea din stânga sus a spațiului de lucru din Dreamweaver sau vă previzualizați pagina într-un browser web.