Notaðu leturgerðir, landamæri og myndir til að skreyta fyrirsagnir
Fyrirsagnir eru algengar á flestum vefsíðum. Reyndar er nokkuð hvaða textaskil sem hefur tilhneigingu til að hafa að minnsta kosti eina fyrirsögn svo að þú þekkir titilinn af því sem þú ert að lesa. Þessar fyrirsagnir eru merktar með því að nota HTML fyrirsagnirnar - h1, h2, h3, h4, h5 og h6.
Á sumum vefsvæðum getur þú fundið að fyrirsagnir eru merktar án þess að nota þessa þætti. Í staðinn geta fyrirsagnir notað málsgreinar með sérstökum flokks eiginleikum bætt við þá eða deildir með kennslustundum. Ástæðan sem ég heyri oft um þetta ranga starf er að hönnuðurinn "líkist ekki hvernig fyrirsögnin lítur út". Sjálfgefin birtist fyrirsagnir feitletraðar og þær eru stærri í stærð, sérstaklega h1 og h2 þættirnir sem sýna í mun stærri leturstærð en restin á texta síðu. Hafðu í huga að þetta er aðeins sjálfgefið útlit þessara þátta! Með CSS, getur þú gert fyrirsögn útlit en þú vilt! Þú getur breytt leturstærðinni, fjarlægðu djörf og svo margt fleira. Fyrirsagnir eru rétta leiðin til að kóða fyrirsagnir síðunnar. Hér eru nokkrar ástæður fyrir því.
Af hverju notaðu Fyrirsagnir en ekki DIV og Styling
Leitarvélar eins og merkingartákn
Þetta er besta ástæðan fyrir því að nota fyrirsagnir og nota þau í réttri röð (þ.e. h1, þá h2, þá h3, osfrv). Leitarvélar gefa hæsta vægi á texta sem fylgir inni fyrirsögnarkóða vegna þess að það er merkingartækni við þessi texta. Með öðrum orðum, með því að merkja síðu titilinn þinn H1, þá segir þú leitarvélasnúðurinn að það sé fókus # 1 á síðunni. H2 fyrirsagnir hafa # 2 áherslu, og svo framvegis.
Þú þarft ekki að muna hvaða flokkar þú notaðir til að skilgreina fyrirsagnir þínar
Þegar þú veist að allar vefsíður þínar eru að fara með H1 sem er feitletrað, 2em og gult þá getur þú skilgreint það einu sinni í stílblaðinu og verið gert. 6 mánuðum síðar, þegar þú ert að bæta við annarri síðu, bætirðu bara við H1 tag efst á síðunni, þú þarft ekki að fara aftur á aðrar síður til að finna út hvaða stíll auðkenni eða tegund sem þú notaðir til að skilgreina helstu fyrirsögn og undir-höfuð.
Þeir veita sterka síðuyfirlit
Útlínur gera texta auðveldara að lesa. Þess vegna kenndi flestum Bandaríkjaskólum nemendum að skrifa útlínur áður en þeir skrifa blaðið. Þegar þú notar fyrirsögnarkóða í yfirlitsformi, hefur textinn þinn skýra uppbyggingu sem virðist mjög fljótt. Auk þess eru verkfæri sem geta endurskoðað síðuyfirlitið til að fá samantekt, og þessir treysta á fyrirsögnarkóða fyrir útlínuna.
Þinn síða mun gera skyn, jafnvel þó að stíllin verði slökkt
Ekki allir geta skoðað eða notað stílblöð (og þetta kemur aftur til # 1 - leitarvélar sjáðu innihaldið (texta) á síðunni þinni, ekki stílblöðin). Ef þú notar fyrirsögnarkóða ertu að gera síðurnar þínar aðgengilegar vegna þess að fyrirsagnirnar veita upplýsingar sem DIV tagi myndi ekki.
Það er gagnlegt fyrir lesendur lesa og aðgengi að vefsvæðum
Rétt notkun á fyrirsögnum skapar rökrétt uppbyggingu í skjali. Þetta er það sem lesendur vilja nota til að "lesa" síðu til notanda með sjónskerðingu, sem gerir vefsvæðið þitt aðgengilegt fólki með fötlun.
Stíll texta og letur á fyrirsögnunum þínum
Auðveldasta leiðin til að flytja frá "stóru, djörfri og ljótu" vandamálinu á fyrirsögnarkóðum er að stilla textann eins og þú vilt að þau líta út. Þegar ég er að vinna á nýjan vef skrifar ég venjulega málsgreinina, h1, h2 og h3 stíl fyrst. Ég haldi venjulega bara leturgerð og stærð / þyngd. Til dæmis gæti þetta verið bráðabirgðasnið fyrir nýjan vef (þetta eru bara nokkrar dæmi sem hægt er að nota):
líkami, html {framlegð: 0; padding: 0; } p {letur: 1em Arial, Genf, Helvetica, sans-serif; } h1 {letur: feitletrað 2em "Times New Roman", Times, serif; } h2 {letur: feitletrað 1.5em "Times New Roman", Times, serif; } h3 {letur: feitletrað 1.2em Arial, Genf, Helvetica, sans-serif; }Þú getur breytt leturum fyrirsagnarinnar eða breytt textastílnum eða jafnvel litarefnum . Öll þessi mun snúa "ljótu" fyrirsögninni þinni inn í eitthvað meira lifandi og í samræmi við hönnunina.
h1 {letur: feit italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; framlegð: 0; padding: 0; litur: # e7ce00; }Borders geta klæða sig upp fyrirsagnir
Borders eru frábær leið til að bæta fyrirsagnir þínar. Og landamæri eru auðvelt að bæta við. En ekki gleyma að gera tilraunir við landamærin - þú þarft ekki landamæri á hvorri hlið fyrirsagnarinnar. Og þú getur notað meira en einfaldlega leiðinlegt landamæri.
h1 {letur: feit italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; framlegð: 0; padding: 0; litur: # e7ce00; Landamærin efst: solid # e7ce00 miðill; Border-bottom: dotted # e7ce00 þunnt; breidd: 600px; }Ég bætti efri og neðri ramma við sýnishornið mitt til að kynna nokkrar áhugaverðar sjónrænar stíll. Þú gætir bætt við landamæri á nokkurn hátt sem þú vildir ná hönnunarstílnum sem þú vilt.
Bættu bakgrunnsmyndum við fyrirsagnirnar þínar fyrir ennþá meira Pizazz
Margar vefsíður hafa haus kafla efst á síðunni sem inniheldur fyrirsögn - oftast síða titill og grafík. Flestir hönnuðir hugsa um þetta sem tvær aðskildar þættir, en þú þarft ekki að. Ef grafíkin er til staðar til að skreyta fyrirsögnina, þá af hverju ekki bæta því við fyrirsögninni?
h1 {letur: djörf skáletrað 3em / 1em "Times New Roman", "MS Serif", "New York", serif; bakgrunnur: #fff url ("fancyheadline.jpg") endurtaka-x botn; padding: 0.5em 0 90px 0; text-align: miðstöð; framlegð: 0; landamærisbotn: solid # e7ce00 0.25em; litur: # e7ce00; }The bragð til þessa fyrirsögn er að ég veit að myndin mín er 90 pixlar á hæð. Þannig að ég bætti púði til the botn af the fyrirsögn af 90px (padding: 0,5 0 90px 0p ;). Þú getur spilað með jaðri, línuhæð og púði til að fá texta fyrirsögnarinnar til að sýna nákvæmlega hvar þú vilt.
Eitt sem þarf að hafa í huga þegar myndir eru notaðar er að ef þú ert með móttækilegan vef (sem þú ættir) með skipulagi sem breytist miðað við skjástærð og tæki, verður fyrirsögn þín ekki alltaf sú sama. Ef þú þarft fyrirsögn þína að vera nákvæm stærð getur þetta valdið vandamálum. Það er ein af ástæðum þess að ég forðast yfirleitt bakgrunnsmynd í fyrirsögn, eins flott og þeir geta stundum litið.
Mynd skipti í fyrirsögnum
Þetta er annar vinsæll tækni fyrir vefhönnuðir vegna þess að það gerir þér kleift að búa til grafíska fyrirsögn og skipta um texta fyrirsögnarmerkisins með þessari mynd. Þetta er sannarlega andstæðingur æfa frá vefhönnuðum hafði aðgang að mjög fáum leturgerð og vildi nota fleiri framandi leturgerðir í starfi sínu. Hækkun leturrita á vefnum hefur í raun breyst því hvernig hönnuðir nálgast síður. Fyrirsagnir geta nú verið settar í fjölbreyttum leturgerð og myndir með þeim leturum sem eru embed eru ekki lengur þörf. Sem slíkur finnurðu aðeins CSS myndir í stað fyrirsagnar á eldri síðum sem hafa ekki enn verið uppfærð í nútímalegri starfsemi.
Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 9/6/17