Virsraksti ir izplatīti lielākajā daļā tīmekļa lapu. Faktiski gandrīz jebkuram teksta dokumentam parasti ir vismaz viens virsraksts, lai jūs zināt lasītā virsrakstu. Šie virsraksti tiek kodēti, izmantojot HTML virsraksta elementi - h1, h2, h3, h4, h5 un h6.
Dažās vietnēs jūs varat atrast, ka virsraksti tiek kodēti, neizmantojot šos elementus. Tā vietā virsrakstos var izmantot rindkopas, kurām pievienoti konkrēti klases atribūti, vai dalījumus ar klases elementiem. Iemesls, kāpēc mēs bieži dzirdam par šo nepareizo praksi, ir tas, ka dizainerim "nepatīk tas, kā izskatās virsraksti". Pēc noklusējuma virsraksti tiek parādīti treknrakstā, un tie ir lielāki, īpaši h1 un h2 elementi, kas tiek parādīti daudz lielākos burtu izmēros nekā pārējais lapas teksts. Paturiet prātā, ka tas ir tikai šo elementu noklusējuma izskats! Ar CSS, jūs varat padarīt virzienu izskatu, kā vēlaties! Jūs varat mainīt fonta lielumu, noņemt treknrakstu un daudz ko citu. Virsraksti ir piemērots veids, kā kodēt lapas virsrakstus. Šeit ir daži iemesli, kāpēc.
Kāpēc izmantot virsrakstu tagus, nevis dalījumus
Tas ir labākais iemesls, lai izmantotu virsrakstus un izmantotu tos pareizā secībā (ti. h1, tad h2, tad h3 utt.). Meklētājprogrammas piešķir vislielāko svērumu virsraksta tagos iekļautajam tekstam, jo šim tekstam ir semantiska vērtība. Citiem vārdiem sakot, iezīmējot lapas nosaukumu H1, jūs meklētājprogrammas zirneklim sakāt, ka tas ir lapas uzmanības centrā # 1. H2 virsrakstos ir uzsvars # 2 utt.
Jums nav jāatceras, kādas klases jūs izmantojāt, lai definētu savus virsrakstus
Kad jūs zināt, ka visās jūsu tīmekļa lapās būs treknrakstā, 2em un dzeltenā krāsā esošs H1, tad to varēsit vienreiz definēt stila lapā un tas būs izdarīts. Pēc 6 mēnešiem, pievienojot citu lapu, lapas augšpusē vienkārši pievienojat H1 tagu, kura jums nav lai atgrieztos citās lapās, lai uzzinātu, kāda stila ID vai klasi izmantojāt, lai definētu galveno virsrakstu un apakšvirsrakstus.
Norādiet spēcīgu lapas kontūru
Kontūras atvieglo teksta lasīšanu. Tāpēc lielākā daļa ASV skolu pirms raksta mācīja studentus uzrakstīt kontūru. Lietojot virsrakstu tagus kontūras formātā, jūsu tekstam ir skaidra struktūra, kas kļūst redzama ļoti ātri. Turklāt ir arī rīki, kas var pārskatīt lapas izklāstu, lai sniegtu kopsavilkumu, un tie paļaujas uz virsrakstu tagiem kontūras struktūrai.
Jūsu lapa radīs sajūtu pat ar izslēgtiem stiliem
Ne visi var apskatīt vai izmantot stila lapas (un tas atgriežas pie 1. numura - meklētājprogrammas skata jūsu lapas saturu (tekstu), nevis stila lapas). Ja izmantojat virsrakstu tagus, jūs padarāt savas lapas pieejamākas, jo virsraksti sniedz informāciju, kas a DIV tags nebutu.
Tas ir noderīgi ekrāna lasītājiem un vietņu pieejamībai
Pareiza virsrakstu izmantošana rada dokumenta loģisko struktūru. To ekrāna lasītāji izmantos, lai "lasītu" vietni lietotājam ar redzes traucējumiem, padarot jūsu vietni pieejamu cilvēkiem ar invaliditāti.
Veidojiet virsrakstu tekstu un fontu
Vienkāršākais veids, kā izvairīties no virsrakstu tagu problēmas "lielā, drosmīgā un neglītā", ir stila teksts tā, kā vēlaties. Patiesībā, strādājot pie jaunas vietnes, vislabāk vispirms ir rakstīt rindkopas, h1, h2 un h3 stilu. Stick tikai ar fontu saimi un izmēru / svaru. Piemēram, šī var būt provizoriska stila lapa jaunai vietnei (šie ir tikai daži piemēroti stili, kurus varētu izmantot):
Jūs varat modificēt fontus vai mainiet teksta stilu vai pat teksta krāsu. Tas viss padarīs jūsu "neglīto" virsrakstu par kaut ko dzīvāku un atbilstošāku jūsu dizainam.
Robežas var saģērbt virsrakstus
Robežas ir lielisks veids, kā uzlabot virsrakstus, un tās ir viegli pievienot. Bet neaizmirstiet eksperimentēt ar robežām - jums nav nepieciešama apmale katrā virsraksta pusē. Un jūs varat izmantot ne tikai vienkāršas garlaicīgas robežas.
Parauga virsrakstam pievienojām augšējo un apakšējo apmali, lai ieviestu dažus interesantus vizuālos stilus. Jūs varat pievienot apmales jebkurā veidā, kā vēlaties sasniegt vēlamo dizaina stilu.
Pievienojiet fona attēlus virsrakstiem, lai iegūtu vēl vairāk Pizazz
Daudzās vietnēs lapas augšdaļā ir galvenes sadaļa, kurā ir virsraksts - parasti vietnes nosaukums un grafika. Lielākā daļa dizaineru to domā par diviem atsevišķiem elementiem, taču jums tas nav jādara. Ja grafika ir paredzēta tikai virsraksta rotāšanai, tad kāpēc gan to nepievienot virsrakstu stiliem?
Šī virsraksta triks ir tāds, ka mēs zinām, ka mūsu attēls ir 90 pikseļu garš. Tāpēc virsraksta 90 pikseļu apakšdaļā mēs pievienojām polsterējumu (polsterējums: 0,5 0 90 pikseļi 0p;). Jūs varat spēlēt ar malām, līnijas augstumu un polsterējumu, lai virsraksta teksts tiktu parādīts tieši tur, kur vēlaties.
Viena lieta, kas jāatceras, lietojot attēlus, ir tā, ka, ja jums ir atsaucīga vietne (kas jums vajadzētu) ar izkārtojumu, kas mainās atkarībā no ekrāna izmēriem un ierīcēm, jūsu virsraksts ne vienmēr būs vienāda lieluma. Ja virsrakstam ir jābūt precīzam izmēram, tas var radīt problēmas. Tas ir viens no iemesliem, kāpēc mēs parasti izvairāmies no fona attēliem virsrakstā, cik forši tie dažreiz var izskatīties.
Attēlu nomaiņa virsrakstos
Šī ir vēl viena populāra tehnika Web dizaineriem, jo tā ļauj izveidot grafisku virsrakstu un aizstāt virsraksta taga tekstu ar šo attēlu. Tā patiesībā ir novecojusi tīmekļa dizaineru prakse, kuriem bija pieejams ļoti maz fontu un kuri savā darbā vēlējās izmantot eksotiskākus fontus. Tīmekļa fontu pieaugums patiešām ir mainījis dizaineru pieeju vietnēm. Virsrakstus tagad var iestatīt visdažādākajos fontos, un attēli ar iegultiem fontiem vairs nav vajadzīgi. Kā tādu jūs atradīsit CSS attēlu aizstāšanu tikai ar vecāku vietņu virsrakstiem, kuri vēl nav atjaunināti uz modernāku praksi.
Rediģējis Džeremijs Žirards