Gebruik lettertipes, grense en prente om hoofde te versier
Opskrifte is algemeen op die meeste webbladsye. Trouens, byna elke teksdokument is geneig om ten minste een kop te hê sodat jy die titel van wat jy lees, ken. Hierdie opskrifte word gekodeer deur die HTML-opskrifelemente te gebruik - h1, h2, h3, h4, h5 en h6.
Op sommige webwerwe kan jy vind dat opskrifte gekodeer word sonder om hierdie elemente te gebruik. In plaas daarvan kan opskrifte paragrawe gebruik met spesifieke klaskenmerke wat by hulle gevoeg word, of afdelings met klaselemente. Die rede waarom ek gereeld oor hierdie verkeerde praktyk hoor, is dat die ontwerper nie soos die opskrifte lyk nie. Standaard word die opskrifte vetdruk vertoon en hulle is groter in grootte, veral die h1 en h2 elemente wat in veel groter lettergrootte vertoon word as die res van 'n bladsy se teks. Hou in gedagte dit is slegs die verstekkyk van hierdie elemente! Met CSS kan jy opskrif maak, maar jy wil! U kan die lettergrootte verander, die vetdruk verwyder, en soveel meer. Opskrifte is die regte manier om 'n bladsy se opskrifte te kodeer. Hier is 'n paar redes waarom.
Hoekom gebruik opskriftekens eerder as DIV's en Styling
Search Engines Like Heading Tags
Dit is die beste rede om opskrifte te gebruik, en gebruik dit in die korrekte volgorde (bv. H1, dan h2, dan h3, ens.). Soekenjins gee die hoogste gewig aan teks wat ingesluit word in opskriftekens omdat daar 'n semantiese waarde vir daardie teks is. Met ander woorde, deur u bladsy titel H1 te merk, vertel u die soekenjinspin dat dit die fokus van die bladsy is. H2 opskrifte het # 2 klem, en so aan.
Jy moet nie onthou watter klasse jy gebruik het om jou hoofde te definieer nie
As jy weet dat al jou webblaaie 'n H1 wat vet, 2em en geel is, sal kry, dan kan jy dit een keer in jou style heet definieer en gedoen word. 6 maande later, wanneer jy 'n ander bladsy byvoeg, voeg jy net 'n H1-tag bo-aan jou bladsy, jy hoef nie terug te gaan na ander bladsye om uit te vind watter styl-ID of klas jy die hoof het gedefinieer nie kop en subkoppe.
Hulle bied 'n sterk bladsy-uiteensetting
Outlines maak teks makliker om te lees. Daarom het die meeste Amerikaanse skole skole geleer om 'n oorsig te skryf voordat hulle die vraestel skryf. Wanneer u opskriftekens in 'n buitelynformaat gebruik, het u teks 'n duidelike struktuur wat baie gou duidelik word. Daarbenewens is daar gereedskap wat die oorsig van die bladsy kan hersien om 'n opsomming te gee, en dit maak staat op opskrifte vir die omtrekstruktuur.
Jou bladsy sal sin maak selfs met die style af
Nie almal kan stylbladsye bekyk of gebruik nie (en dit kom terug na # 1 - soekenjins sien die inhoud (teks) van jou bladsy, nie die stylbladsye nie. As jy opskriftekens gebruik, maak jy jou bladsye meer toeganklik omdat die opskrifte inligting verskaf wat 'n DIV-tag nie sal hê nie.
Dit is nuttig vir skermlesers en toegang tot die webtuiste
Behoorlike gebruik van opskrifte skep 'n logiese struktuur vir 'n dokument. Dit is wat skermlesers sal gebruik om 'n webwerf te "lees" na 'n gebruiker met sigbare waardedaling, wat jou webwerf toeganklik maak vir mense met gestremdhede.
Stil die teks en lettertipe van u opskrifte
Die maklikste manier om weg te beweeg van die "groot, vet en lelike" probleem van opskrifte, is om die teks te styl soos jy wil hê hulle moet kyk. Trouens, as ek aan 'n nuwe webwerf werk, skryf ek gewoonlik die paragraaf, h1, h2 en h3 style eerste ding. Ek hou gewoonlik van net lettertipe en grootte / gewig. Dit kan byvoorbeeld 'n voorlopige stylblad vir 'n nuwe webwerf wees (dit is net 'n paar voorbeeldstyle wat gebruik kan word):
liggaam, html {marge: 0; vulling: 0; } p (font: 1em Arial, Genève, 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, Genève, Helvetica, sans-serif; }U kan die lettertipes van u kop verander of die teksstyl of selfs die tekskleur verander . Al hierdie dinge sal jou "lelike" opskrif in iets meer lewenskragtig maak en in ooreenstemming met jou ontwerp.
h1 (font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marge: 0; vulling: 0; kleur: # e7ce00; }Grense kan aantrek opskrifte
Grense is 'n goeie manier om jou nuus te verbeter. En grense is maklik om by te voeg. Maar moenie vergeet om met die grense te eksperimenteer nie - jy het nie 'n grens aan elke kant van jou kop nodig nie. En jy kan meer as net net saaie grense gebruik.
h1 (font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marge: 0; vulling: 0; kleur: # e7ce00; grens-top: soliede # e7ce00 medium; grens-onderkant: stippelend # e7ce00 dun; breedte: 600px; }Ek het 'n boonste en onderste grens aan my voorbeeldopskrif bygevoeg om interessante visuele style voor te stel. U kan grense op enige manier byvoeg dat u die ontwerpstyl wil bereik wat u wil hê.
Voeg agtergrondprente by jou nuus vir nog meer Pizazz
Baie webwerwe het 'n koptekst aan die bokant van die bladsy wat 'n kop bevat - tipies die werf titel en 'n grafiese. Die meeste ontwerpers dink hieraan as twee afsonderlike elemente, maar dit hoef jy nie. As die prentjie net daar is om die kop te versier, waarom nie, voeg dit by die opskrif style nie?
h1 (font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; agtergrond: #fff url ("fancyheadline.jpg") herhaal-x onder; vulling: 0.5em 0 90px 0; teks-belyning: sentrum; marge: 0; grens-bodem: soliede # e7ce00 0.25em; kleur: # e7ce00; }Die truuk vir hierdie kop is dat ek weet my beeld is 90 pixels lank. So het ek bygevoeg tot die onderkant van die kop van 90px (opvulling: 0.5 0 90px 0p;). Jy kan speel met die kantlyne, lynhoogte en vulling om die teks van die kop te kry om presies te vertoon waar jy dit wil hê.
Een ding wat jy moet onthou wanneer jy beelde gebruik, is dat as jy 'n reageerbare webwerf het (wat jy moet) met 'n uitleg wat verander op grond van skermgroottes en toestelle, sal jou opskrif nie altyd dieselfde grootte wees nie. As jy jou kop nodig het om 'n presiese grootte te wees, kan dit probleme veroorsaak. Dit is een van die redes waarom ek die agtergrond beelde in die kop vermy, so koel soos wat hulle soms kan kyk.
Beeldvervanging in opskrifte
Dit is nog 'n gewilde tegniek vir webontwerpers omdat dit jou toelaat om 'n grafiese kop te skep en die teks van die opskrif-tag met die prent te vervang. Dit is waarheid dat 'n antieke praktyk van webontwerpers toegang gehad het tot baie min lettertipes en meer eksotiese lettertipes in hul werk wou gebruik. Die opkoms van webletters het regtig verander hoe ontwerpers naderende webwerwe het. Opskrifte kan nou in 'n wye verskeidenheid lettertipes gestel word en beelde met daardie lettertipes wat ingebed is, is nie meer nodig nie. As sodanig sal jy slegs CSS-beelde vervang vir opskrifte op ouer werwe wat nog nie opgedateer is na meer moderne praktyke nie.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 9/6/17