Utilizați Fonturi, Frontiere și Imagini pentru Decorarea titlurilor
Titlurile sunt comune pe majoritatea paginilor web. De fapt, aproape orice document text tinde să aibă cel puțin un titlu, astfel încât să știi titlul a ceea ce citești. Aceste titluri sunt codificate folosind elementele de titlu HTML - h1, h2, h3, h4, h5 și h6.
Pe unele site-uri, puteți găsi că titlurile sunt codificate fără a utiliza aceste elemente. În schimb, titlurile pot folosi paragrafe cu atribute de clasă specifice adăugate la ele sau diviziuni cu elemente de clasă. Motivul pentru care aud adesea despre această practică incorectă este că designerul "nu-i place cum arată capul". În mod prestabilit, rubricile sunt afișate cu caractere aldine și sunt mai mari, mai ales elementele h1 și h2 care se afișează cu o dimensiune mult mai mare a fontului decât textul restului paginii. Rețineți că aceasta este numai aspectul implicit al acestor elemente! Cu CSS, poți să te uiți în direcția dorită, oricum vrei! Puteți modifica dimensiunea fontului, eliminați caracterele aldine și multe altele. Titlurile reprezintă modalitatea corectă de codare a titlurilor unei pagini. Iată câteva motive de ce.
De ce folosiți etichete de titluri mai degrabă decât DIV-urile și stilul
Motoarele de căutare sunt similare cu titlurile din etichete
Acesta este cel mai bun motiv pentru a utiliza titlurile și pentru a le utiliza în ordinea corectă (de exemplu, h1, apoi h2, apoi h3, etc.). Motoarele de căutare dau cea mai mare ponderare textului inclus în etichetele de titlu, deoarece există o valoare semantică pentru acel text. Cu alte cuvinte, prin etichetarea titlului paginii H1, îi spui păianjenului motorului de căutare că acesta este cel mai bun foc al paginii. Subcategoria H2 are accentul # 2, și așa mai departe.
Nu trebuie să vă amintiți ce clase ați folosit pentru a vă defini titlurile
Când știți că toate paginile dvs. Web vor avea un H1 care este îndrăzneț, 2 și galben, atunci puteți defini o dată în foaia de stil și să fie făcut. 6 luni mai târziu, când adăugați o altă pagină, adăugați o etichetă H1 în partea de sus a paginii, nu trebuie să vă întoarceți la alte pagini pentru a afla ce ID sau clasă de stil ați folosit pentru a defini principalele titlurile și subcapitolele.
Acestea oferă o imagine puternică a paginii
Contururile fac ca textul să fie mai ușor de citit. De aceea, majoritatea școlilor din SUA îi învață pe elevi să scrie o schiță înainte de a scrie lucrarea. Când folosiți etichetele de rubrică într-un format contur, textul dvs. are o structură clară care devine aparentă foarte rapid. În plus, există instrumente care pot examina conturul paginii pentru a oferi o sinoptică, iar acestea se bazează pe etichetele de titlu pentru structura conturului.
Pagina ta se va simți chiar și cu stilurile dezactivate
Nu oricine poate vizualiza sau utiliza foile de stil (și acest lucru revine la # 1 - motoarele de căutare văd conținutul (textul) paginii dvs., nu foile de stil). Dacă utilizați etichete de rubrică, faceți paginile mai accesibile, deoarece titlurile oferă informații pe care o etichetă DIV nu le-ar face.
Este util pentru cititorii de ecran și accesibilitatea site-ului
Utilizarea corectă a titlurilor creează o structură logică a unui document. Aceasta este ceea ce cititorii de ecran vor folosi pentru a "citi" un site unui utilizator cu deficiențe de vedere, făcând site-ul dvs. accesibil persoanelor cu dizabilități.
Stilul textului și fontului titlurilor dvs.
Cea mai ușoară cale de a vă îndepărta de problema "mare, îndrăzneață și urâtă" a etichetelor este să stylizați textul așa cum doriți să-i arate. De fapt, când lucrez la un nou site web, scriu în primul rând stilurile paragrafului, h1, h2 și h3. De obicei, rămân doar cu familia fontului și mărimea / greutatea. De exemplu, aceasta ar putea fi o foaie de stil preliminară pentru un site nou (acestea sunt doar câteva exemple de stiluri care ar putea fi utilizate):
corp, html {margine: 0; umplutura: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2 "Times New Roman", Times, serif; } h2 {font: bold 1.5 "Times New Roman", Times, serif; } h3 {font: bold 1.2m Arial, Geneva, Helvetica, sans-serif; }Puteți modifica fonturile titlului dvs. sau puteți modifica stilul textului sau chiar culoarea textului . Toate acestea vor transforma titlul tău "urât" în ceva mai vibrant și în concordanță cu designul tău.
h1 {font: bold italic 2e / 1em "Times New Roman", "MS Serif", "New York", serif; marja: 0; umplutura: 0; culoare: # e7ce00; }Frontierele se pot imbraca in titluri
Frontierele reprezintă o modalitate excelentă de a vă îmbunătăți titlurile. Și granițele sunt ușor de adăugat. Dar nu uitați să experimentați cu granițele - nu aveți nevoie de o graniță pe fiecare parte a titlului. Și puteți folosi mai mult decât granițele simple plictisitoare.
h1 {font: bold italic 2e / 1em "Times New Roman", "MS Serif", "New York", serif; marja: 0; umplutura: 0; culoare: # e7ce00; vârf frontal: mediu solid # e7ce00; frontală de fund: punctată # e7ce00 subțire; lățime: 600px; }Am adăugat un margine de sus și de jos la titlul meu de probă pentru a introduce câteva stiluri vizuale interesante. Puteți adăuga granițe în orice mod pe care ați dorit să-l atingeți stilul de design dorit.
Adăugați imagini de fundal la titlurile dvs. pentru Pizazz și mai mult
Multe site-uri Web au o secțiune antet în partea de sus a paginii care include un titlu - de obicei titlul site-ului și un grafic. Cei mai mulți designeri consideră acest lucru ca fiind două elemente separate, dar nu trebuie. Dacă graficul există doar pentru a decora titlul, atunci de ce să nu îl adăugați la stilurile de titlu?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; fundal: #fff url ("fancyheadline.jpg") repeat-x jos; umplere: 0.5m 0 90px 0; text-align: centru; marja: 0; margine de fund: solid # e7ce00 0.25em; culoare: # e7ce00; }Trucul pentru acest titlu este că știu că imaginea mea are o înălțime de 90 de pixeli. Așa că am adăugat căptușeală în partea de jos a titlului de 90px (padding: 0.5 0 90px 0p;). Puteți juca cu margini, înălțimea liniei și umplutura pentru a obține textul titlului pentru a afișa exact unde doriți.
Un lucru de reținut când utilizați imaginile este că, dacă aveți un site web receptiv (care ar trebui să aveți) cu un aspect care se modifică în funcție de dimensiunile și dispozitivele de pe ecran, titlul nu va avea întotdeauna aceeași dimensiune. Dacă aveți nevoie de titlul dvs. pentru a avea o dimensiune exactă, acest lucru poate cauza probleme. Acesta este unul dintre motivele pentru care evit, în general, imaginile de fundal dintr-un titlu, la fel de misto cum pot uneori să pară.
Înlocuirea imaginilor în titluri
Aceasta este o altă tehnică populară pentru designerii de web, deoarece vă permite să creați un titlu grafic și să înlocuiți textul etichetei de titlu cu acea imagine. Aceasta este o adevărată practică antichizată de la web designerii care au avut acces la foarte puține fonturi și au vrut să folosească fonturi mai exotice în munca lor. Creșterea fontului web a schimbat cu adevărat modul în care designerii se apropie de site-uri. Titlurile pot fi acum setate într-o mare varietate de fonturi, iar imaginile cu acele fonturi încorporate nu mai sunt necesare. Ca atare, veți găsi numai înlocuirea imaginilor CSS pentru titlurile pe site-uri vechi care nu au fost încă actualizate la practici mai moderne.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 9/6/17