Defnyddiwch Fonts, Borders, a Delweddau i Addurno Penawdau
Mae penawdau yn gyffredin ar y rhan fwyaf o dudalennau gwe. Mewn gwirionedd, mae'n eithaf unrhyw ddogfen destun sy'n tueddu i gael o leiaf un pennawd fel eich bod chi'n gwybod teitl yr hyn rydych chi'n ei ddarllen. Mae'r penawdau hyn wedi'u codio gan ddefnyddio'r elfennau pennawd HTML - h1, h2, h3, h4, h5, a h6.
Ar rai safleoedd, efallai y bydd y penawdau yn cael eu codau heb ddefnyddio'r elfennau hyn. Yn hytrach, gall penawdau ddefnyddio paragraffau â phriodoleddau dosbarth penodol sydd wedi'u hychwanegu atynt, neu adrannau ag elfennau dosbarth. Y rheswm pam yr wyf yn aml yn ei glywed am yr arfer anghywir hwn yw nad yw'r dylunydd "yn hoffi'r ffordd y mae penawdau'n edrych". Yn ddiffygiol, mae penawdau yn cael eu harddangos mewn print trwm ac maent yn fwy o faint, yn enwedig yr elfennau h1 a h2 sy'n arddangos mewn maint ffont llawer mwy na gweddill testun y dudalen. Cadwch mewn cof mai dim ond edrych rhagosodedig yr elfennau hyn yw hwn. Gyda CSS, gallwch chi edrych ar bennawd ond rydych chi eisiau! Gallwch newid maint y ffont, tynnwch y drwm, a chymaint mwy. Penawdau yw'r ffordd gywir o bennu penawdau tudalen. Dyma rai rhesymau pam.
Pam Defnyddio Tagiau Pennawd Yn hytrach na DIVs a Styling
Peiriannau Chwilio fel Pennawd Tags
Dyma'r rheswm gorau i ddefnyddio penawdau, a'u defnyddio yn y drefn gywir (hy h1, yna h2, yna h3, ac ati). Mae peiriannau chwilio yn rhoi'r pwysau uchaf i destun sydd wedi'i gynnwys y tu mewn i'r tagiau pennawd oherwydd bod gwerth semantig i'r testun hwnnw. Mewn geiriau eraill, trwy labelu eich teitl tudalen H1, dywedwch wrth y chwilod peiriant chwilio mai dyna yw ffocws # 1 y dudalen. Mae gan benawdau H2 bwyslais # 2, ac yn y blaen.
Nid oes rhaid ichi gofio pa ddosbarthiadau a ddefnyddiwyd i ddiffinio'ch penawdau
Pan wyt ti'n gwybod bod gan bob un o'ch tudalennau Gwe H1 sydd yn feiddgar, 2em, a melyn, yna gallwch chi ddiffinio hynny unwaith yn eich taflen arddull a chael ei wneud. 6 mis yn ddiweddarach, pan fyddwch chi'n ychwanegu tudalen arall, yr ydych yn ychwanegu tag H1 i ben eich tudalen, does dim rhaid i chi fynd yn ôl i dudalennau eraill i ddarganfod pa fath o ddull adnabod neu ddosbarth rydych chi'n ei ddefnyddio i ddiffinio'r prif pennawd ac is-benaethiaid.
Maent yn Darparu Amlinelliad Tudalen Gref
Mae amlinelliadau yn gwneud testun yn haws i'w ddarllen. Dyna pam roedd y rhan fwyaf o ysgolion yr Unol Daleithiau yn dysgu myfyrwyr i ysgrifennu amlinelliad cyn iddynt ysgrifennu'r papur. Pan fyddwch yn defnyddio tagiau pennawd mewn fformat amlinellol, mae gan eich testun strwythur clir sy'n dod yn amlwg yn gyflym iawn. Hefyd, mae yna offer a all adolygu amlinelliad y dudalen i roi crynodeb, ac mae'r rhain yn dibynnu ar blychau pennawd ar gyfer y strwythur amlinellol.
Bydd eich tudalen yn gwneud synnwyr hyd yn oed gyda'r ffyrdd wedi eu diffodd
Ni all pawb weld neu ddefnyddio taflenni arddull (a dyma'n ôl i # 1 - mae peiriannau chwilio yn gweld cynnwys (testun) eich tudalen, nid y taflenni arddull). Os ydych chi'n defnyddio tagiau pennawd, rydych chi'n gwneud eich tudalennau yn fwy hygyrch oherwydd bod y penawdau yn darparu gwybodaeth na fyddai tag DIV yn digwydd.
Mae'n Yn Hwyluso Darllenwyr Sgrin A Hygyrchedd Gwefan
Mae defnydd pwrpasol o benawdau yn creu strwythur rhesymegol i ddogfen. Dyma'r hyn y bydd darllenwyr sgrin yn ei ddefnyddio i "ddarllen" safle i ddefnyddiwr â nam ar y golwg, gan sicrhau bod eich safle yn hygyrch i bobl ag anableddau.
Arddull Testun a Ffont eich Penawdau
Y ffordd hawsaf i symud i ffwrdd o'r broblem "mawr, braidd a hyll" o dagiau pennawd yw arddull y testun y ffordd yr ydych am iddyn nhw ei edrych. Mewn gwirionedd, pan fyddaf yn gweithio ar wefan newydd, rwy'n ysgrifennu fel rheol y paragraff, h1, h2, ac arddulliau h3. Fel arfer, rwy'n cadw gyda theulu ffont yn unig a maint / pwysau. Er enghraifft, gallai hwn fod yn ddalen arddull rhagarweiniol ar gyfer safle newydd (dim ond rhai arddulliau enghreifftiol y gellir eu defnyddio yw'r rhain):
corff, html {ymyl: 0; padio: 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; }Gallwch addasu ffontiau'ch pennawd neu newid arddull y testun neu hyd yn oed y lliw testun . Bydd pob un o'r rhain yn troi eich pennawd "hyll" yn rhywbeth mwy bywiog ac yn cyd-fynd â'ch dyluniad.
h1 {font: italic bold 2em / 1em "Times New Roman", "MS Serif", "New York", serif; ymyl: 0; padio: 0; lliw: # e7ce00; }Gall Borders Dillad Gwisgo i fyny
Mae Borders yn ffordd wych o wella'ch penawdau. Ac mae ffiniau'n hawdd eu hychwanegu. Ond peidiwch ag anghofio arbrofi gyda'r ffiniau - nid oes angen ffin ar bob ochr i'ch pennawd. A gallwch ddefnyddio mwy na ffiniau diflas plaen.
h1 {font: italic bold 2em / 1em "Times New Roman", "MS Serif", "New York", serif; ymyl: 0; padio: 0; lliw: # e7ce00; border-top: solid # e7ce00 cyfrwng; gwaelod y ffin: dotted # e7ce00 tenau; lled: 600px; }Ychwanegais ffin uchaf a gwaelod i'm pennawd sampl i gyflwyno rhai arddulliau gweledol diddorol. Gallech ychwanegu ffiniau mewn unrhyw ffordd yr oeddech am gyflawni'r arddull ddylunio rydych chi ei eisiau.
Ychwanegu Lluniau Cefndir i'ch Penawdau Am Hyd yn oed mwy o Pizazz
Mae gan lawer o wefannau adran pennawd ar frig y dudalen sy'n cynnwys pennawd - fel arfer teitl y safle a graffig. Mae'r mwyafrif o ddylunwyr yn meddwl am hyn fel dwy elfen ar wahân, ond nid oes rhaid ichi. Os yw'r graffeg yno i addurno'r pennawd, yna beth am ei ychwanegu at yr arddulliau pennawd?
h1 {font: italic bold 3em / 1em "Times New Roman", "MS Serif", "New York", serif; cefndir: #fff url ("fancyheadline.jpg") ailadrodd-x gwaelod; padio: 0.5em 0 90px 0; testun-alinio: canolfan; ymyl: 0; gwaelod y ffin: solet # e7ce00 0.25em; lliw: # e7ce00; }Y rheswm i'r pennawd hwn yw fy mod yn gwybod bod fy nhelwedd yn 90 picsel o uchder. Felly, yr wyf yn ychwanegu padl i waelod y pennawd 90px (padio: 0.5 0 90px 0p;). Gallwch chwarae gyda'r ymylon, uchder y llinell, a gosod padiau i gael testun y pennawd i ddangos yn union ble rydych chi am ei gael.
Un peth i'w gofio wrth ddefnyddio delweddau yw, os oes gennych wefan ymatebol (y dylech chi) gyda chynllun sy'n newid yn seiliedig ar faint a dyfeisiau sgrin, ni fydd eich pennawd bob amser yr un maint. Os bydd angen i'ch pennawd fod yn union faint, gall hyn achosi problemau. Dyma un o'r rhesymau pam yr wyf yn gyffredinol yn osgoi delweddau cefndir mewn pennawd, mor oer ag y gallant weithiau edrych.
Newid Delwedd mewn Penawdau
Mae hwn yn dechneg boblogaidd arall ar gyfer dylunwyr Gwe gan ei fod yn caniatáu ichi greu pennawd graffigol a disodli testun y tag pennawd gyda'r ddelwedd honno. Yn wirioneddol, mae hyn yn arfer hynafol gan ddylunwyr gwe wedi cael mynediad at ychydig iawn o ffontiau ac roedd eisiau defnyddio ffontiau mwy egsotig yn eu gwaith. Mae'r cynnydd o ffontiau gwe wedi newid mewn gwirionedd sut mae dylunwyr yn cysylltu â safleoedd. Bellach, gellir pennu penawdau mewn amrywiaeth eang o ffontiau a delweddau heb y ffontiau hynny sydd wedi'u hymgorffori bellach eu hangen. Fel y cyfryw, byddwch ond yn dod o hyd i ddelweddau CSS yn eu lle ar gyfer penawdau ar safleoedd hŷn nad ydynt eto wedi'u diweddaru i arferion mwy modern.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 9/6/17