Uporabite pisave, meje in slike, da okrasite naslovnice
Naslovi so pogosti na večini spletnih strani. Pravzaprav skorajda vsak dokument z besedilom ima vsaj en naslov, tako da poznate naslov tega, kar berete. Ti naslovi so kodirani z elementi naslova HTML - h1, h2, h3, h4, h5 in h6.
Na nekaterih mestih lahko ugotovite, da so naslovnice kodirane brez uporabe teh elementov. Namesto tega naslovi lahko uporabijo odstavke s posebnimi atributi razreda, ki so jim dodani, ali delitve z elementi razreda. Razlog, zaradi katerega pogosto slišim o tej napačni praksi, je, da oblikovalec "ne maram, kako izgledajo postavke". Naslovnice so privzeto prikazane s krepko in so večje po velikosti, še posebej elementi h1 in h2, ki se prikažejo v veliko večji velikosti pisave kot ostalo besedilo strani. Imejte v mislih, da je to privzeti videz teh elementov! S CSS lahko postavite naslov, vendar hočeš! Velikost pisave lahko spremenite, odstranite krepko in še veliko več. Naslovi so ustrezen način za kodiranje naslovov strani. Tukaj je nekaj razlogov, zakaj.
Zakaj uporabite oznake naslovov namesto DIV in styling
Iskalniki kot oznake naslovov
To je najboljši razlog za uporabo naslovov in jih uporabite v pravilnem vrstnem redu (tj. H1, nato h2, nato h3 itd.). Iskalniki dajejo najvišjo težo besedilu, ki je vključeno v oznake naslovov, ker ima to besedilo pomensko vrednost. Z drugimi besedami, z označevanjem naslova svojega naslova H1 poveste iskalnemu pahu, da je to osrednji del strani # 1. Naslovi H2 imajo poudarek # 2 in tako naprej.
Ne smete pozabiti, katere razrede ste uporabili za določitev naslovov
Ko veste, da bodo vse vaše spletne strani imele H1, ki je krepko, 2em in rumeno, potem lahko to določite enkrat v slogovnem listu in se naredite. Šest mesecev kasneje, ko dodate še eno stran, na vrhu strani dodate oznako H1, vam ni treba iti nazaj na druge strani, če želite izvedeti, kakšen ID ali razred sloga, s katerim ste določili glavno naslov in podnaslovi.
Zagotavljajo močno stranico
Izrisi lažje branje besedila. Zato je večina ameriških šol učila dijake, da napišejo pregled, preden napišeta papir. Ko uporabljate oznake naslovov v obliki obrisa, ima vaše besedilo jasno strukturo, ki postane očitna zelo hitro. Poleg tega obstajajo orodja, ki lahko pregledajo obris strani, da zagotovijo povzetek, in ti se sklicujejo na oznake naslovov za okvirno strukturo.
Vaša stran bo naredila občutek tudi s slogom
Vsi ne morejo videti ali uporabljati slogovnih listov (in to se vrne na # 1 - iskalniki pregledajo vsebino (besedilo) vaše strani in ne slogovne tabele). Če uporabljate oznake naslovov, naredite svoje strani bolj dostopne, saj naslovi vsebujejo informacije, ki jih oznaka DIV ne bi omogočala.
Je uporabno za bralnike zaslona in dostopnost spletnih mest
Pravilna uporaba naslovov ustvarja logično strukturo dokumenta. To bo tisto, kar bralci zaslona uporabljajo za »branje« spletnega mesta uporabniku z motnjami vida, zaradi česar je vaše spletno mesto dostopno osebam s posebnimi potrebami.
Stil besedilo in pisavo vaših naslovov
Najlažji način, da se premaknete stran od težkih naslovov, velikih, drznih in grdih, je, da besedilo prilagajate tako, kot želite, da izgledajo. Pravzaprav, ko delam na novi spletni strani, najpogosteje napišem sloge odstavka, h1, h2 in h3. Običajno držim samo družino pisave in velikost / težo. To je na primer lahko predhodni slogovni list za novo spletno mesto (to so samo nekateri slogi primerov, ki bi jih lahko uporabili):
telo, html {margin: 0; oblazinjenje: 0; } p {font: 1em Arial, Ženeva, Helvetica, sans-serif; } h1 {pisava: krepki 2em "Times New Roman", Times, serif; } h2 {pisava: krepki 1.5em "Times New Roman", Times, serif; } h3 {pisava: krepki 1.2em Arial, Ženeva, Helvetica, sans-serif; }Spremenite lahko pisave svojega naslova ali spremenite slog besedila ali celo barvo besedila . Vse to bo spremenilo vaš "grd" naslov v nekaj bolj živahnega in v skladu z vašo zasnovo.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marža: 0; oblazinjenje: 0; barva: # e7ce00; }Borders lahko obleko gor naslovnice
Borders so odličen način za izboljšanje naslovov. In meje je enostavno dodati. Toda ne pozabite poskusiti z mejami - na vsaki strani vašega naslova ne potrebujete meje. In lahko uporabite več kot samo navadne dolgočasne meje.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marža: 0; oblazinjenje: 0; barva: # e7ce00; border-top: solid # e7ce00 srednja; mejno spodaj: pikčasto # e7ce00 tanko; širina: 600px; }Dodal sem zgornjo in spodnjo mejo na moj naslovni naslov, da predstavim nekaj zanimivih slikovnih stilov. Lahko bi dodali meje na kakršenkoli način, s katerim si želel doseči slog dizajna, ki ga želite.
Dodajte ozadje v svoje naslove za še več pizza
Na vrhu strani ima veliko spletnih mest, ki vsebujejo naslov - običajno naslov strani in grafiko. Večina oblikovalcev misli o tem kot dveh ločenih elementih, vendar vam ni treba. Če grafika obstaja samo za okrasitev naslova, zakaj je ne dodajajte v sloge naslova?
h1 {pisava: krepki ležeči 3em / 1em "Times New Roman", "MS Serif", "New York", serif; ozadje: #fff url ("fancyheadline.jpg") ponovitev-x spodaj; padding: 0.5em 0 90px 0; poravnava besedila: center; marža: 0; mejno spodaj: trdno # e7ce00 0.25em; barva: # e7ce00; }Trik na tem naslovu je, da vem, da je moja slika 90 slikovnih pik. Tako sem dodal oblogo na dno naslova 90px (padding: 0.5 0 90px 0p;). Lahko se predvajate z robovi, višino vrstice in oblazinjenjem, da besedilo besedila natisnete natanko tam, kjer ga želite.
Ena stvar, ki jo je treba zapomniti pri uporabi slik, je, da če imate odzivno spletno stran (ki jo potrebujete) s postavitvijo, ki se spreminja glede na velikost zaslona in naprave, vam naslov ne bo vedno enako velik. Če potrebujete naslov, ki je natančna velikost, lahko to povzroči težave. To je eden od razlogov, zakaj se v ozadju običajno izognemo slikam v ozadju, kar je všeč, saj lahko včasih izgledajo.
Zamenjava slike v naslovnicah
To je še ena priljubljena tehnika za spletne oblikovalce, ker vam omogoča, da ustvarite grafični naslov in nadomestite besedilo oznake naslova s to sliko. To je resnično starinsko praksa spletnih oblikovalcev, ki je imela dostop do zelo malo pisav in si želela uporabiti bolj eksotične pisave pri svojem delu. Vzpon spletnih fontov se je resnično spremenil, kako se oblikovalci obračajo na spletna mesta. Naslovi so zdaj lahko nastavljeni v široko paleto pisav in slike z vdelanimi pisavami niso več potrebne. Kot take, boste našli samo nadomestne CSS slike za naslove na starejših spletnih mestih, ki še niso bila posodobljena v bolj sodobne prakse.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 9/6/17