Naudokite šriftus, sienas ir nuotraukas, kad galėtumėte dekoruoti antraštes
Antraštės dažniausiai naudojamos daugumoje tinklalapių. Tiesą sakant, beveik kiekvienas tekstinis dokumentas paprastai turi bent vieną antraštę, kad žinotumėte, ką skaitote. Šios antraštės yra koduojamos naudojant HTML antraščių elementus - h1, h2, h3, h4, h5 ir h6.
Kai kuriose svetainėse gali būti, kad antraštės yra koduojamos nenaudojant šių elementų. Vietoje to antraštės gali naudoti dalis su tam tikromis jiems priskirtais klasių atributais arba dalimis su klasių elementais. Priežastis, dėl kurios dažnai girdžiu apie šią neteisingą praktiką, yra tai, kad dizaineris "nepatinka, kaip atrodys antraštės". Pagal numatytuosius žodžius antraštės rodomos paryškintu šriftu, o jų dydis yra didesnis, ypač h1 ir h2 elementai, kurie rodomi žymiai didesniame šrifto dydyje nei likusio puslapio tekstas. Turėkite omenyje, kad tai tik numatytasis šių elementų išvaizda! Naudodamiesi CSS, galite atrodyti, bet tik norite! Galite pakeisti šrifto dydį, pašalinti paryškintuosius ir dar daugiau. Antraštės yra tinkamas būdas koduoti puslapio antraštes. Štai keletas priežasčių.
Kodėl verta naudoti antraščių žymes, o ne DIV ir stilių
Paieškos sistemos kaip antraštės žymos
Tai yra geriausia priežastis naudoti antraštes ir jas naudoti teisingai (pvz., H1, tada h2, tada h3 ir tt). Paieškos sistemos teikia didžiausią svorį tekste, kuris yra antraštėje žymių antraštėje, nes šiam tekstui yra semantinė vertė. Kitaip tariant, pažymėdami savo puslapio pavadinimą H1, pasakote paieškos voratinkliui, kad tai # 1 puslapio fokusavimas. H2 antraštės turi # 2 akcentą ir pan.
Jūs neturite prisiminti, kokias klases naudojate savo antraštėms apibrėžti
Kai žinote, kad visuose jūsų tinklalapiuose bus paryškintas, 2em ir geltonas H1, tuomet galėsite jį apibrėžti savo stilių lentelėje ir padaryti. Po 6 mėnesių, kai pridedate kitą puslapį, tiesiog pridėkite H1 žymą prie puslapio viršuje, nereikia grįžti į kitus puslapius, kad sužinotumėte, kokį stiliaus ID ar klasę naudojate pagrindinei antraštės ir pogrupiai.
Jie suteikia stiprią puslapio schemą
Apibendrinant tekstą lengviau skaityti. Štai kodėl dauguma JAV mokyklų mokėdavo rašyti kontūrus, kol jie rašo popierių. Kai naudojate antraščių žymas antraštės formatu, jūsų tekstas turi aiškią struktūrą, kuri paaiškėja labai greitai. Be to, yra įrankių, kurie gali peržiūrėti puslapio apibendrinimą, kad būtų galima pateikti santrauką, ir jie remiasi antraščių struktūros antraščių antraštėmis.
Jūsų puslapis sutaps su stiliais, išjungtais
Ne kiekvienas gali peržiūrėti ar naudoti stiliaus lapus (ir tai grįžta į # 1 - paieškos sistemos žiūri į savo puslapio turinį (tekstą), o ne į stiliaus lapus). Jei naudojate antraščių žymes, galite padaryti puslapius lengviau pasiekiamus, nes antraštėse pateikiama informacija, kad DIV žyma nebus.
Tai naudinga ekrano skaitytuvams ir interneto prieinamumui
Tinkamas antraščių naudojimas sukuria loginę struktūrą dokumentui. Tai, ką ekrano skaitytojai naudos "skaitydami" svetainę vartotojui, turinčiam regos sutrikimų, todėl jūsų svetainė bus prieinama žmonėms su negalia.
Stiliaus savo antraščių tekstą ir šriftą
Lengviausias būdas pasitraukti nuo "didelės, drąsios ir negražios" rubrikų etiketės problemos yra stiliaus tekstas, kurį norite atrodyti. Tiesą sakant, kai dirbu naujoje svetainėje, aš paprastai rašau pastraipą, h1, h2 ir h3 stilius pirmiausia. Aš paprastai laikau tik šrifto šeimos ir dydžio / svorio. Pavyzdžiui, tai gali būti preliminarus naujos svetainės stiliaus lapas (tai tik keli pavyzdžiai, kuriuos galima naudoti):
body, html (margin: 0; padding: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans serif; }Galite keisti savo antraštės šriftus arba pakeisti teksto stilių ar net teksto spalvą . Visa tai pavers jūsų "negraži" antraštę į kažką daugiau gyvybingo ir atitinka jūsų dizainą.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marža: 0; padding: 0; spalva: # e7ce00; }Sienos gali puošti antraštes
Sienos yra puikus būdas pagerinti jūsų antraštes. Ir sienas lengva pridėti. Tačiau nepamirškite eksperimentuoti su sienomis - jums nereikia sienos kiekvienoje jūsų antraštės pusėje. Ir jūs galite naudoti ne tik paprastas nuobodžias sienas.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marža: 0; padding: 0; spalva: # e7ce00; border-top: tvirta # e7ce00 terpė; border-bottom: dotted # e7ce00 thin; plotis: 600px; }Pridėjau viršutinę ir apatinę ribas į mano pavyzdinę antraštę, kad galėtumėte pristatyti įdomius vizualinius stilius. Galite papildyti sienas taip, kad norėtumėte pasiekti norimą dizaino stilių.
Pridėkite fono paveikslėlių savo antraštėms dar daugiau Pizazz
Daugelyje interneto svetainių puslapio viršuje yra antraštė, kurioje yra antraštė, paprastai svetainės pavadinimas ir grafika. Dauguma dizainerių tai laiko dviem atskirais elementais, bet to nereikia. Jei grafika yra tik papuošti antraštę, kodėl ji negali pridėti prie antraštės stilių?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; fonas: #fff url ("fancyheadline.jpg") pakartokite-x dugną; padding: 0.5em 0 90px 0; text-align: centras; marža: 0; border-bottom: solid # e7ce00 0.25em; spalva: # e7ce00; }Šios antraštės apgauti tai, kad aš žinau, kad mano vaizdas yra 90 pikselių aukščio. Taigi, aš pridėjo polsterį 90 px antraštės apačioje (padding: 0.5 0 90px 0p;). Galite žaisti su paraštėmis, eilutės aukščiu ir užpildu, kad gautumėte antraštės tekstą, rodantį, kur tiksliai norite.
Vienas dalykas, kurį reikia atsiminti naudojant vaizdus, yra tas, kad jei turite reaguojančią svetainę (kurią turėtumėte) su išdėstymu, kuris keičiasi atsižvelgiant į ekranų dydžius ir įrenginius, antraštė ne visada bus tokio paties dydžio. Jei jūsų antraštė turi būti tikslus dydis, tai gali sukelti problemų. Tai yra viena iš priežasčių, kodėl aš paprastai išvengti fono vaizdų antraštėje, taip pat kietas, kaip kartais gali atrodyti.
Vaizdų pakeitimas antraštėse
Tai dar viena populiari žiniatinklio dizainerių technologija, nes ji leidžia jums sukurti grafinę antraštę ir pakeisti antraštės etiketę su šiuo įvaizdžiu. Tai tiesa, interneto dizainerių praeityje naudojama praktika turėjo prieigą prie labai mažai šriftų ir norėjo naudoti savo egzotinių šriftų. Interneto šriftų pakilimas iš tiesų pasikeitė, kaip dizaineriai žiūri į svetaines. Antraštės dabar gali būti nustatytos įvairiuose šriftuose, o atvaizdai su šiais įterptais šriftais nebėra reikalingi. Tokiu atveju CSS vaizdai bus pakeisti tik antraštėms senesnėse svetainėse, kurios dar nėra atnaujintos, kad būtų galima taikyti šiuolaikines praktikas.
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 9/6/17