Cum se creează o imagine de tip rollover simplă în Dreamweaver - dummies

Rolloversul este o caracteristică populară pe care Dreamweaver o include o casetă specială de dialog doar pentru rollovers: caseta de dialog Insert Rollover Image. Rularea imaginilor, așa cum sugerează și numele, este proiectată să reacționeze atunci când cineva rotește un cursor peste o imagine. Efectul poate fi la fel de dramatic ca o imagine a unui câine care este înlocuită de o imagine a unui leu sau subtilă ca culoarea unui cuvânt care se schimbă.

Aveți posibilitatea să creați mai multe efecte de imagine rollover complexe cu opțiunea Swap Image din panoul Behaviors. Opțiunea Swap Image vă permite să modificați mai multe imagini în același timp.

Pentru a crea un efect de rollover simplu cu două imagini utilizând caseta de dialog Introduceți Image Rollover al Dreamweaver, urmați acești pași:

1. Așezați cursorul pe pagina în care doriți să apară rolloverul.

   Efectele de rulare necesită cel puțin două imagini: una pentru starea inițială și una pentru starea de răsturnare. Puteți utiliza două imagini diferite sau două similare, dar ambele ar trebui să aibă aceleași dimensiuni. În caz contrar, veți observa efecte stranii de scalare, deoarece ambele imagini trebuie să fie afișate exact în același spațiu din pagină.

2. Selectați Insert → Image → Rollover Image.

   Alternativ, puteți utiliza lista derulantă disponibilă din pictograma Imagini din panoul Common Insert și selectați Rollover Image.

   Se afișează caseta de dialog Insert Image Rollover Image.

   

3. În caseta Nume imagine, denumiți imaginea.

   Înainte de a putea aplica un comportament unui element, cum ar fi o imagine, elementul trebuie să aibă un nume, astfel încât scriptul de comportament să îl poată indica. Puteți numi elementele care vă plac, atâta timp cât nu utilizați spații sau caractere speciale.

4. În caseta Original Image, specificați prima imagine dorită. Utilizați butonul Răsfoiți pentru a localiza și selecta imaginea.

   Dacă imaginile nu sunt deja în dosarul site-ului dvs. local, Dreamweaver le copiază pe site-ul dvs. atunci când creați rolloverul.

5. În caseta Rollover Image, introduceți imaginea pe care doriți să o vizualizați atunci când un vizitator mișcă cursorul peste prima imagine.

   Din nou, puteți utiliza butonul Răsfoiți pentru a localiza și selecta imaginea.

6. bifați caseta de validare Preload Rollover Image pentru a încărca toate imaginile de tip rollover în memoria cache a browserului atunci când prima pagină se încarcă.

   Dacă nu alegeți să faceți acest pas, vizitatorii dvs. pot întâmpina o întârziere, deoarece a doua imagine nu va fi descărcată până când un cursor nu va fi rulat peste imaginea originală.

7. În câmpul Alternate Text, introduceți o descriere a imaginilor.

   Textul alternativ este opțional, dar recomandat deoarece utilizarea cuvintelor cheie poate îmbunătăți optimizarea motorului de căutare.În mod similar, textul alternativ reprezintă o parte esențială a accesibilității web, deoarece acest text este citit cu voce tare de către browserele speciale numite cititoare de ecran, care sunt folosite de persoane care sunt nevăzătoare și altele cu vedere limitată sau mobilitate. Textul alternativ este afișat numai în browser dacă imaginile nu sunt vizibile.

8. În caseta Când ați făcut clic, Mergeți la adresa URL, introduceți orice adresă web sau răsfoiți pentru a găsi o altă pagină de pe site-ul dvs. pe care doriți să îl conectați.

   Dacă nu specificați o adresă URL, Dreamweaver introduce automat semnul # ca substituent în cod.

   Semnul # este o tehnică comună pentru crearea de linkuri care nu se leagă nicăieri. Deoarece imaginile cu rollover care nu au legătură cu altă pagină au multe utilizări deosebite, această tehnică este utilă. Amintiți-vă că dacă doriți să vă conectați la rollover, trebuie să înlocuiți semnul # cu un link către o altă pagină.

9. Faceți clic pe OK.

   Imaginile sunt configurate automat ca o răsturnare.

10. Pentru a vedea rolul în acțiune, salvați fișierul și apoi faceți clic pe pictograma globului din partea superioară a spațiului de lucru pentru a previzualiza pagina într-un browser web.

Puteți vedea cum funcționează rolloverul dvs. în vizualizarea Dreamweaver Design sau utilizând opțiunea Live view. Când faceți clic pe butonul Live din partea stângă sus a spațiului de lucru, transformați Dreamweaver într-un browser web care afișează pagini asemănătoare browserului Chrome.

Atunci când previzualizați o pagină de pe computer care include o imagine de tip rollover, unele browsere web vor afișa un avertisment care să precizeze că trebuie să permiteți controalelor ActiveX să vizualizeze pagina. Acesta este un avertisment de securitate care apare numai când pagina este deschisă pe același computer unde este salvată pagina.

Dacă publicați pagina pe un server web și apoi o vizualizați printr-o conexiune la Internet, dvs. și vizitatorii site-ului dvs. nu veți vedea această eroare.

Credit: Lucrare realizată de istockphoto. com