Eticheta HTML de spațiere a fost cândva cea mai bună modalitate de a insera un spațiu negativ într-o pagină. Cum putem construi o pagină web ușor de citit fără această etichetă?
Deși eticheta HTML nu mai există, au apărut tehnici mai sofisticate pentru a construi spațiu negativ pe o pagină web. Spațiul negativ este esențial pentru a menține un echilibrul al paginii, favorizând concentrarea și lizibilitatea designului. Acestea fiind spuse, este important să utilizați tehnici moderne pentru a lucra eficient.
Eticheta HTML de spațiere este învechită
Eticheta HTML de spațiere a fost folosită pentru a crea spațiu negativ, numit și spațiu alb, între elementele care compun aspectul unei pagini la scrierea de cod HTML. Deși această tehnică a funcționat, designerii au avut nevoie, în cele din urmă, de un control mai profund pe măsură ce complexitatea site-urilor a crescut. Limbajele CSS și JavaScript au fost introduse pentru a prelua controlul asupra aspectului, a prezentării și a comportamentului elementelor paginii, iar HTML a fost gândit pentru a crea structura site-ului.
Lansarea din 2011 a browserului Firefox 4, a eliminat suportul pentru spațiere, marcând astfel începutul sfârșitului folosirii etichetei. Ulterior, toate browserele web au eliminat-o treptat. Unele site-uri care nu au făcut actualizări au permis în continuare afișarea acesteia, însă majoritatea din ele tratează spațierea ca un UnknownElement.
În prezent, designerii web inserează spațiul negativ prin mai multe metode. În primul rând, cu ajutorul CSS, sau cu instrumentele fără cod care vă permit să proiectați vizual designul. Mai jos, vă vom prezenta unele dintre cele mai eficiente tehnici de adăugare a spațiului negativ în designul vostru.
Înțelegeți termenii de care aveți nevoie pentru a crea spațiul negativ
Unitățile EM sau REM
Unitățile EM și REM sunt unități de lungime relativă specifice pentru tipografie. Utilizarea unităților relative în loc de unități absolute, cum ar fi pixelii, ajută la adaptabilitatea designului, astfel încât să se poată conforma la dispozitive de diferite dimensiuni, cum ar fi telefoanele. Unitățile REM sunt relative, de aceea se vor adapta conform dimensiunii tipografiei din conținutul paginii. În cazul în care un utilizator accesează pagina de pe un telefon, REM se va adapta astfel încât conținutul să fie vizibil.
Pe de altă parte, EM se va adapta conform tipografiei elementului părinte de la care și moștenește atributele. Este nevoie să dobândiți cunoștințe mai avansate pentru a utiliza corect EM, însă permite un control aprofundat în anumite secțiuni.
Clasele și combinațiile de clase
O clasă aplică un set specific de proprietăți oricărui element căruia i se aplică. Odată ce clasa este aplicată, schimbările aduse în clasa respectivă va schimba simultan toate elementele atribuite acelei clase. Acest lucru generează economisirea de timp și conduce la o realizare mai consistentă a modelelor. O clasă combo este o clasă suplimentară care adaugă și mai multe stiluri specifice peste clasa primară. Aceasta poate fi folosită pentru a face excepții specifice clasei de bază. Folosirea claselor pentru a adăuga spațiu, spre deosebire de setarea unor margini individuale pe fiecare element dintr-o pagină, generează un cod mai îngrijit și mai eficient.
Simbolurile
Un simbol este un element care se repetă pe parcursul unui proiect. Poate fi o bară de navigare, un buton sau chiar un bloc de spațiu negativ. Odată ce un element a fost transformat într-un simbol, acesta va apărea în panoul simboluri. Acesta se poate folosi cu ușurință în orice design direct din panoul respectiv.
Simbolurile permit designerilor să construiască și să mențină layout-uri complexe și consistente, într-un mod mult mai eficient. Este suficient să creați un element o singură dată, iar mai apoi să-l utilizați în mod repetat, oricând este necesar. Ele sunt, de asemenea, deosebit de benefice în aplicarea unui sistem de proiectare pe întreg website-ul. Simbolurile sunt vizibile și în navigator. De aceea, ele vă permit să vedeți mai ușor structura generală a paginii voastre dintr-o singură privire.
Creați spațiu negativ ca obiect folosind elemente div
Utilizarea elementelor div pentru a crea spațiu este ca și cum ați utiliza eticheta HTML de spațiere. Mai exact, va crea un obiect invizibil care ocupă o anumită cantitate de spațiu aplicat dintr-o clasă. Această clasă poate fi denumită chiar „spațiere”. Odată ce ați creat acest obiect, le puteți introduce în designul vostru ori de câte ori doriți, într-un mod simplu și eficient. Adăugând un stil suplimentar elementului, precum un chenar unei laturi, puteți utiliza, de asemenea, această tehnică pentru a plasa separatoare (linii sau simboluri) în designul vostru.
Cum se utilizați elementele div
Puteți începe prin a plasa un element div în zona în care doriți să plasați spațiul negativ. Setați o înălțime și o lățime minime folosind REM.
Redenumiți numele clasei automate (de exemplu, „Spațiere”). Pentru a crea spațieri de diferite dimensiuni, puteți crea clase combinate pe care să le adăugați la clasa voatră “Spațiere”, acolo unde este nevoie.
Pentru a utiliza aceste elemente div „Spațiere” ca spațiu pe orizontală, setați containerul cu paragrafele în cauză și spațiile dvs. în flexbox. Apoi setați aspectul pe orizontală, iar acestea vor deveni spații între coloane în loc de spațiu pe verticală. Dacă utilizați grile, acestea vor deveni spații goale în grilă creând layouturi offset sau nesimetrice.
Următorul pas este transformarea acestor elemente în Simboluri. Faceți clic dreapta pe elementul dorit. În partea de jos a meniului drop-down este prezentă funcția „creează simbol”. Faceți clic pe acesta și denumiți noul simbol. Veți dori să creați simboluri individuale pentru fiecare variație a elementului „Spațiere”. Acest simbol poate fi apoi tras pe pânza de lucru și plasat oriunde este nevoie de spațiu negativ pe site-ul vostru. Actualizând simbolul principal veți actualiza fiecare instanță.
Creați spațiul negativ în raport cu un obiect folosind o clasă de utilitate marginală
În CSS, unui obiect i se pot aplica trei tipuri de spațiu – margine, chenar și umplutură. Marja este zona din afara bordurii, în timp ce umplutura este zona din interiorul bordurii. Fiecare dintre aceste distanțe este relativă conform elementului la care sunt aplicate.
Crearea unei clase va menține spațierea consistentă și va face ca aplicarea să fie rapidă. Deoarece clasa este atașată fiecărui element individual, poate crea efecte imprevizibile în aspectul general atunci când două sau mai multe obiecte interacționează, ceea ce este important de reținut.
Cum se utilizează acest tip de clasă
Mai întâi, creați o clasă de utilitate cu margine cu o singură setare. Această clasă poate fi apoi atașată ca o clasă combinată fiecărui element în care este nevoie de spațiu.
Pentru a crea o clasă de utilitate globală, cel mai bine este să aveți un stil după care să vă ghidați sau o pagină similară pentru a menține aceste clase. Creați fiecare clasă pe un element div și lăsați-le să adopte stilul conform ghidului. Acest lucru le va face ușor de editat pe viitor și vă asigură că nu vor fi eliminate accidental atunci când utilizați “curățarea” stilurilor neutilizate din panoul “Manager de stil”. Acum puteți aplica aceste clase de utilitate de marjă oricărui element din orice pagină pentru a obține spațierea dorită.
Utilizați cod personalizat pentru a introduce un element hr
Inserarea unui element pe orizontală creează o distanțiere cu un stil anume, prin scrierea unui cod personalizat. Acest lucru permite crearea unui element care poate să nu fie acceptat în mod nativ. Pentru a face acest lucru, trebuie să adăugați o componentă Embed și să tastați simplu <hr>. Nu aveți nevoie nici măcar de o etichetă de închidere. Din nou, transformarea acestuia într-un simbol vă va permite să-l plasați oriunde aveți nevoie pentru a adăuga spațiu.
Setările pentru elementul hr sunt aplicate de foaia de stil a browserului. Pentru a ajusta modul în care apare elementul hr, plasați codul de mai jos în “Setările proiectului” între etichetele de deschidere și de închidere <style> </style>. Apoi ajustați proprietățile din codul respectiv sau adăugați modificări suplimentare, cum ar fi culoarea sau stilul.
Acest cod poate fi scris și mai scurt, pentru a-l simplifica și mai mult.
Pentru a transforma elementul hr într-un spațiu negativ gol, setați border: none.
Creați spațiu înăuntrul grilelor
De asemenea, vă puteți juca cu spațiul negativ folosind grile în aspectul paginii voastre. Oriunde nu veți plasa un element (sau plasați un div gol) va fi inserat un bloc de spațiu negativ care este poziționat și dimensionat uniform conform celorlalte elemente din acea grilă.
Proprietatea grid gap poate fi, de asemenea, utilizată pentru a adăuga uniform spațiu între fiecare coloană și rând dintr-o grilă. Deși nu este modul ideal în care ați dori să încorporați spațiu în site-ul vostru în general, dar poate fi o tehnică de proiectare utilă atunci când editați anumite secțiuni.
Fii în control asupra utilizării spațiului negativ
Folosind în mod eficient spațiul negativ (cunoscut și ca spațiu alb), ghidați privirea vizitatorului pe fiecare pagină de pe site. Concentrați-i atenția pe ceea ce este cu adevărat important și folosiți-vă de spațiul negativ pentru a nu sufoca elementele între ele.
Înțelegerea temeinică a instrumentelor pe care le puteți folosi pentru a crea spațiul negativ vă permite să aveți controlul deplin asupra structurii site-ului vostru. Folosindu-vă de aceste informații, creați designuri dinamice și receptive. Avantajul designului modern al unui website fără cod este că permite o structură curată și îngrijită. Structurarea este realizată atât vizual, cât și în codul care este generat pe site. Mai puține editări back-end presupun o gestionare mai ușoară a site-ului și mai puține șanse de a obține inconsistență sau lipsuri.
Pentru a folosi adecvat eticheta HTML de spațiere sau pentru a încorpora eficient spațiul negativ este nevoie de cunoștințe mai aprofundate de web design. Dacă doriți să obțineți sfaturi și designuri de calitate, ne puteți contacta și să ne specificați ideea voastră. Aveți posibilitatea, de asemenea, de a alege din modelele pe care vi le punem la dispoziție astfel încât să selectați cel mai potrivit proiect pentru voi.
