Pealkirjad on levinud enamikul veebilehtedel. Tegelikult kipub suvalisel tekstidokumendil olema vähemalt üks pealkiri, et teaksite loetu pealkirja. Need pealkirjad on kodeeritud, kasutades HTML pealkirja elemendid - h1, h2, h3, h4, h5 ja h6.
Mõnel saidil võite leida, et pealkirjad on kodeeritud neid elemente kasutamata. Selle asemel võivad pealkirjad kasutada lõike, millele on lisatud konkreetsed klassi atribuudid, või klassi elementidega jaotusi. Selle vale tava kohta kuuleme sageli seda, et disainerile "ei meeldi pealkirjade välimus". Vaikimisi kuvatakse pealkirjad rasvases kirjas ja need on suuremad, eriti h1 ja h2 elemendid, mis kuvatakse palju suurema fondi suurusega kui ülejäänud lehe tekst. Pidage meeles, et see on ainult nende elementide vaikimisi välimus! Koos CSS, saate teha suuna väljanägemise nii, nagu soovite! Saate muuta fondi suurust, rasvase osa eemaldada ja palju muud. Pealkirjad on õige viis lehe pealkirjade kodeerimiseks. Siin on mõned põhjused.
Miks kasutada pealkirja silte kui jaotusi
See on parim põhjus kasutada pealkirju ja kasutada neid õiges järjekorras (st. (siis h1, siis h2, siis h3 jne). Otsingumootorid andke pealkirja siltidesse lisatud tekstile suurim kaal, kuna sellel tekstil on semantiline väärtus. Teisisõnu, sildistades oma lehe pealkirja H1, ütlete otsingumootori ämblikule, et see on lehe esikohal. H2 pealkirjad on rõhutatud # 2 jne.
Te ei pea meeles pidama, milliseid klasse kasutasite oma pealkirjade määratlemiseks
Kui teate, et kõigil teie veebilehtedel on H1, mis on paks, 2em ja kollane, saate selle üks kord oma stiililehes määratleda ja valmis. 6 kuud hiljem lisate uue lehe lisamisel oma lehe ülaossa lihtsalt H1-märgendi, mida teil pole naasmiseks teistele lehtedele, et teada saada, millist stiili ID-d või klassi kasutasite peamise pealkirja ja alapealkirjade määratlemiseks.
Andke tugev lehe ülevaade
Piirjooned muudavad teksti hõlpsamini loetavaks. Sellepärast õpetas enamik USA koole õpilasi enne töö kirjutamist konspekti kirjutama. Kui kasutate pealkirja silte kontuurvormingus, on teie tekstil selge struktuur, mis ilmneb väga kiiresti. Lisaks on olemas tööriistad, millega saab ülevaade lehe kontuurist üle vaadata, ja need tuginevad kontuuristruktuuri pealkirja siltidele.
Teie leht muudab mõistlikuks ka siis, kui stiilid on välja lülitatud
Kõik ei saa stiililehti vaadata ega kasutada (ja see tuleb tagasi 1. kohta - otsingumootorid vaatavad teie lehe sisu (teksti), mitte stiililehti). Kui kasutate pealkirja silte, muudate oma lehed paremini kättesaadavaks, kuna pealkirjad pakuvad teavet, mida a DIV-silt ei teeks.
See on kasulik ekraanilugejaile ja veebisaidi juurdepääsetavusele
Pealkirjade õige kasutamine loob dokumendile loogilise struktuuri. Seda kasutavad ekraanilugejad saidi "nägemiseks" nägemispuudega kasutajale, muutes teie saidi puuetega inimestele kättesaadavaks.
Stiilige pealkirjade tekst ja font
Lihtsaim viis pealkirjade siltide "suurest, julgest ja koledast" probleemist eemaldumiseks on teksti kujundamine nii, nagu soovite. Tegelikult on uuel veebisaidil töötades kõige parem kirjutada tavaliselt lõigu, h1, h2 ja h3 stiilid. Pange tähele ainult fontide perekonda ja suurust / kaalu. Näiteks võib see olla uue saidi esialgne stiilileht (need on vaid mõned näited, mida võiks kasutada):
Saate modifikatsiooni muuta fondid pealkirja või muutke teksti stiili või isegi värvi. Kõik need muudavad teie "koleda" pealkirja milleks elujõulisemaks ja kooskõlas teie kujundusega.
Piirid võivad riietuda pealkirju
Äärised on suurepärane võimalus oma pealkirjade parandamiseks ja neid on lihtne lisada. Kuid ärge unustage piiridega katsetamist - te ei vaja oma pealkirja mõlemal küljel piiri. Ja võite kasutada rohkem kui lihtsalt igavaid piire.
Lisasime oma proovipealkirjale ülemise ja alumise piiri, et tutvustada huvitavaid visuaalseid stiile. Ääriseid võite lisada mis tahes viisil, kui soovite soovitud kujundusstiili saavutada.
Lisage oma pealkirjadesse taustapilte, et veelgi rohkem Pizazzit saada
Paljudel veebisaitidel on lehe ülaosas päiseosa, mis sisaldab pealkirja - tavaliselt saidi pealkirja ja graafikat. Enamik disainereid peab seda kaheks eraldi elemendiks, kuid te ei pea seda tegema. Kui graafika on mõeldud ainult pealkirja kaunistamiseks, siis miks mitte lisada see pealkirja stiilidesse?
Selle pealkirja nipp on see, et me teame, et meie pilt on 90 pikslit pikk. Niisiis lisasime pealkirja 90px alla (polster: 0,5 0 90px 0p;). Saate mängida veeriste, joone kõrguse ja täidisega, et pealkirja tekst kuvataks täpselt seal, kus soovite.
Piltide kasutamisel tuleb meeles pidada, et kui teil on tundlik veebisait (mida peaksite tegema) paigutusega, mis muutub vastavalt ekraani suurusele ja seadmetele, ei ole teie pealkiri alati sama suur. Kui vajate, et teie pealkiri oleks täpne, võib see probleeme tekitada. See on üks põhjusi, miks me üldiselt väldime pealkirjas olevaid taustapilte, nii lahedaid kui need mõnikord tunduda võivad.
Piltide asendamine pealkirjades
See on veebidisainerite jaoks veel üks populaarne tehnika, kuna see võimaldab teil luua graafilise pealkirja ja asendada pealkirja sildi tekst selle pildiga. See on tõepoolest vananenud praktika veebidisaineritelt, kellel oli juurdepääs väga vähestele fontidele ja kes soovisid oma töös kasutada eksootilisemaid fonte. Veebifondide kasv on tõesti muutnud seda, kuidas disainerid saitidele lähenevad. Pealkirju saab nüüd seada mitmesuguste fontidega ja pilte, millele pole manustatud fonte, pole enam vaja. Sellisena leiate CSS-piltide asendamise ainult vanemate saitide pealkirjade jaoks, mida pole veel kaasaegsemate tavadega värskendatud.
Toimetanud Jeremy Girard