sâmbătă, 21 mai 2011

Inserarea unei Imagini

Grafica este unul dintre aspectele cele mai atractive la un site. Chiar dacă site-ul prezintă informaţii importante, este posibil ca o grafică încărcată sau plasată necorespunzător să nu atragă vizitatorii.
Încă de la început trebuie precizat că o pagină complexă din punct de vedere grafic se încarcă mai greu, deci este de preferat să fie inserate doar imaginile necesare, ale căror formate şi calitate vor trebui verificate. Din această perspectivă, sunt recomandate imagini în format *.gif sau *.jpeg. Tabelul de mai jos poate fi util pentru alegerea formatelor grafice pentru Internet:
  
1=Da 0=Nu
GIF87a GIF89a JPEG P-JPEG PNG
Profunzime de culoare 8-bit 8-bit 24-bit 24-bit 48-bit
Tipul compresiei Fără pierderi Fără pierderi Cu pierderi Cu pierderi Fără pierderi
Întreţesere
1
1
0
1
1
Animaţie
0
1
0
0
0
Transparenţă
0
1
0
0
1
Transparenţă variabilă
0
0
0
0
1
Corecţie Gamma
0
0
0
0
1
Navigatoare
Explorer, Navigator
Explorer3, Navigator2
Explorer2, Navigator2
Explorer4, Navigator4
Explorer4, Navigator4
După alegerea şi prelucrarea imaginilor care urmează a fi inserate în pagină, în folderul care conţine paginile, este bine să fie creat un subfolder cu nume sugestiv, în care să fie copiate imaginile.
ATENŢIE: Imaginile trebuie să se găsească în folderul site-ului în momentul inserării lor, iar poziţia lor să nu fie ulterior modificată. Inserarea imaginii se face prin selectarea comenzii " Image... " din meniul " Insert ".
Fig. 1
Ca urmare a comenzii de mai sus, va apărea o fereastră (fig. 2) în care va putea fi specificată calea imaginii respective. Poate fi accesată opţiunea "From File", având astfel acces la o imagine din folderul cu imagini creat, dacă se lucrează în modul "Offline" (nu există acces direct la Internet). Dacă se lucrează "Online", poate fi accesată opţiunea "From Location" şi astfel poate fi inserată o imagine din orice locaţie din Internet, cu condiţia să fie corect specificată calea.
Fig. 2
 Din acest moment pot fi prelucrate imaginile din document, după cum se poate observa în continuare. În prima imagine este prezentat modul de redimensionare a imaginii (fig. 3). O altă posibilitate este oferită de opţiunile din meniul imaginii, accesat cu butonul drept al mouse-ului (sau din meniul Edit). Aşa cum se vede şi în figura 4, există posibilitatea de decupare ("Cut"), de copiere ("Copy") şi de lipire ("Paste"), în funcţie de opţiune. La acţionarea simultană a tastelor Alt+Enter sau la selectarea comenzii "Image Properties" va apărea o fereastră cu opţiuni de setare a proprietăţilor imaginii.
Figura3: Exemplu de redimensionare a imaginii
Figura4: Meniu de prelucrare a imaginii
Fereastra "Image Properties" (fig. 5) oferă posibilitatea de a integra mai bine imaginea inserată în pagina web. În lista "General" se poate configura comportamentul imaginii în pagina HTML. Dacă în caseta "Alternative Representation/Text" este scris un text, acesta va fi afişat în momentul în care cursorul va fi poziţionat pe imagine, în browser. De asemenea, există posibilitatea inserării unui link în pagină, astfel încât în momentul accesării cu un simplu clic a imaginii în browser, să aibă loc redirecţionarea spre o altă pagină sau spre alt fişier. Inserarea acestui link se realizează în caseta "Default Hyperlink/Location". Tot în această fereastră, dar în lista "Appearance", pot fi stabilite dimensiunile, marginile şi chenarul imaginii.
Fig. 5
 Inserarea imaginii poate fi realizată direct în html, utilizând sintaxa :
<img src=�nume_fisier.extensie''>
În acest caz, imaginea şi pagina web trebuie să se afle în acelaşi folder, sau:
<img src=�cale\nume_fişier.extensie�>.
•  vspace=�...%�
•  hspace=�...%�
Exemple:
•  <img src=�imagine.jpg� vspace=�10%� hspace=�20%�>
Opţiunile �vspace� şi �hspace�, urmate de valoarea numerică, specifică distanţa pe verticală/orizontală între imagine şi alte elemente din pagină.
•  <p align= "center" >
<a href= "ajutor.html" ><img border= "0" src= "imagini/poza.gif" alt= "Apasati aici" width= "388" height= "336" ></a></p>
Opţiunile �width� şi �height�, urmate de valoarea numerică, specifică dimensiunile imaginii inserate.
Imaginea "poza.gif", din directorul "imagini", va fi inserată centrat pe pagină, cu dimensiunile 388/336, direcţionată spre pagina "ajutor.html", având textul opţional "Apăsaţi aici".

Niciun comentariu:

Trimiteți un comentariu