Tot ceea ce vizitatorul vede pe paginile site-ului este afișat de browser pe baza instrucțiunilor detaliate trimise acestuia de către server. Aceste instrucțiuni se numesc codul html al paginii și sunt alcătuite din „etichete” separate care descriu tipul, aspectul și locația fiecărui element în mod individual. Pentru a plasa orice element nou (de exemplu, o imagine) într-o pagină, trebuie să adăugați o instrucțiune corespunzătoare - o etichetă - la codul său sursă. Luați în considerare cel mai simplu mod de a face acest lucru.
Instrucțiuni
Pasul 1
Dacă utilizați orice fel de sistem de gestionare a conținutului, atunci este foarte probabil să includă un editor de pagini. Mai întâi, trebuie să deschideți pagina dorită în acest editor. Mai departe - sunt posibile opțiuni. În cel mai bun caz, editorul de pagini va avea un „mod vizual”, cu alte cuvinte - „modul WYSIWYG” (Ceea ce vedeți este ceea ce obțineți - „ceea ce vedeți este ceea ce obțineți”). În acest mod, nu va trebui să vă ocupați deloc de codul html original! Pagina din editor va arăta la fel ca pe site, va fi suficient să introduceți mouse-ul în locul dorit și să apăsați butonul „inserare imagine” de pe panoul editorului.
Pasul 2
Ca urmare, se va deschide o casetă de dialog în care trebuie să selectați imaginea dorită. Dacă nu ați încărcat-o încă, există și un buton pentru selectarea unei imagini de pe computer și încărcarea acesteia pe server. În plus, în acest dialog puteți seta culoarea și lățimea cadrului din jurul imaginii, distanța și culoarea umpluturii dintre cadru și imagine, textul pentru sfat. Nu este necesar să specificați dimensiunile aici, dar din motive de accelerare a încărcării paginii și pentru a preveni denaturarea designului, este totuși mai bine să faceți acest lucru. Când toate câmpurile obligatorii ale dialogului sunt completate, faceți clic pe „OK” și apoi salvați pagina editată.
Pasul 3
Datorită faptului că nu există un singur standard pentru sistemele de control, procedura de introducere a unei imagini în modul vizual al sistemului dvs. poate diferi ușor, dar principiul va fi același. Din același motiv, este posibil ca modul WYSIWYG să nu apară în sistemul de management al site-ului dvs. Apoi, trebuie totuși să editați codul sursă al paginii în HTML (HyperText Markup Language - „limbaj de marcare hipertext”). Va trebui să introduceți o etichetă la locul potrivit în codul care îi spune browserului să afișeze imaginea aici. În forma sa cea mai simplă, ar trebui să arate astfel: Iată „adresa relativă” a imaginii - la această adresă browserul ar trebui să contacteze serverul pentru a obține fișierul imagine de la acesta. Dacă adresa este relativă, atunci browserul va presupune că fișierul se află în același folder de server ca pagina însăși (sau într-un subfolder). Dar, pentru a nu fi greșit, este mai bine să specificați „adresa absolută” - de exemplu, așa: Bineînțeles, pentru ca serverul să găsească și să trimită imaginea către browser, aceasta trebuie încărcată în Locație. Cel mai simplu mod de a face acest lucru este prin intermediul managerului de fișiere, care se află în fiecare sistem de gestionare a conținutului, precum și în panoul de control al companiei dvs. de găzduire. Puteți face acest lucru și folosind protocolul FTP (File Transfer Protocol - „protocol de transfer de fișiere”), folosind un program special - client FTP. Există multe dintre ele, atât plătite, cât și gratuite - de exemplu, Cute FTP, FlashFXP, WS FTP, etc. un browser este o opțiune mai ușoară.
Pasul 4
În plus față de adresa din eticheta html a imaginii, puteți specifica informații suplimentare - „atribute” ale etichetei. De exemplu, atributul alt="Imagine" conține textul pentru sfatul de instrumente care apare când treceți cursorul mouse-ului peste imagine: Poate fi înlocuit cu atributul - title: - Dimensiunea dreptunghiului în care ar trebui să fie browserul afișarea imaginii este setată de atributele de lățime și înălțime: - Atributul de margine specifică lățimea chenarului din jurul imaginii (în pixeli): Dacă imaginea are un link, browserul va desena o margine albastră în jurul său. Pentru a scăpa de el, setați valoarea chenarului la zero: - Celelalte două atribute conțin informații despre cantitatea de indentare a imaginii de la elementele adiacente (din liniile de text, alte imagini etc.) - hspace setează dimensiunea indentare orizontală (stânga și dreapta), vspace - vertical (jos și sus):
