Fontsen, Ränder, an Biller fir Headlines ze dekoréieren
Headlines sinn allgemeng op de Websäiten. Tatsächlech ass zimlech all Textdokum sou e Minimum fir eng Schlëssel ze hunn, fir datt Dir den Titel vun deem wat Dir liest. Dës Schlësselen sinn codéiert duerch d'HTML Rubriken - h1, h2, h3, h4, h5 a h6.
Op verschiddene Siten fannt Dir dës Schlësselen ouni Kéieren dës Elementer ze kodéieren. Amplaz vu Schlësselen kënnen d'Paragraphen mat spezifesche Klass Attributen matenee addéieren oder Divisiounen mat Klassenelementer. De Grond hu ech héieren oft iwwer dës falsch Praxis, datt de Konstruktor "net gär d'Art a Weis kucken". Par défaut sinn Headlines sinn fett an si gi méi grouss, besonnesch h1 an h2 Elementer, déi an enger méi grousser Schrëftgréisst weisen wéi d'Rescht vun der Säit vum Text. Denkt drun dat ass nëmmen den Default Look vun dësen Elementer! Mat CSS kënnt Dir ufänken Header kucken awer Dir wëllt! Dir kënnt d'Schrëftgréisst änneren, a fett d'Fett an sou vill méi. Rubriken sinn d'korrekt Manéier fir d'Headlines vun der Säit ze codéieren. Hei sinn e puer Grënn firwat.
Firwat benotzt Benotzung Tags Prioritéit als DIVs a Styling
Suchmaschinen wéi Heading Tags
Dëst ass de beschten Grondsätz fir d'Rubriken ze benotzen an se an der korrekter Reihenfolge ze benotzen (dh h1, dann h2, dann h3, asw.). Eng Suchmaschinn ass déi héchste Gewiichtung fir Texter déi an Rubriken gedréckt ginn, well et e semantesche Wäert op dee Text ass. Anescht ausgedréckt, andeems Dir Äert Säit H1 gemaach hutt, erzielt Dir de Sichmachere Spann, datt dat sinn den # 1 Schockel vun der Säit. D'H2-Header hunn 2 Schëffer, a sou weider.
Dir musst Iech drun erënneren wat d'Klassen Dir benotzt fir Är Headlines ze definéieren
Wann Dir wësst datt all Är Websäiten eng H1 hunn, déi fett, 2em a giel ass, da kënnt Dir dës Kéier am Stylissem ze definéieren a gemaach ginn. 6 Méint méi spéit, wann Dir eng aner Säit benotzt, addéiere mer just eng H1 Tag um Top vun der Säit, Dir musst net op aner Säiten zréck goen fir erauszefannen wat Stil Id oder Klass, déi Dir benotzt fir déi Haaptart ze definéieren Headliner an Ënnerkäppercher.
Si hunn e gudde Page-Outline
Outlines liesen Text méi einfach ze liesen. Duerfir hunn déi meeschte US-Schoulen d'Schüler geléiert, e Plang ze schreiwen, ier se de Pabeier schreiwen. Wann Dir Schlësseldeeg an engem Skriptform benotze wëllt, hutt Äre Text eng kloer Struktur, déi ganz séier kloer ass. Plus, et ginn Tools, déi d'Säit-Skizzen iwwersetzen kënnen, fir eng Synopsis ze bidden, an déi se op Stéierbicher fir d'Outline Struktur setzen.
Är Säit wäert Sense souguer mat The Styles ausgeschalt hunn
Net jiddferee kann Är Stilblieder gesinn a benotzen (an dat geet zeréck op # 1 - Sichmaschinne kuckt den Inhalt (Text) vun Ärer Säit, net d'Stilblieder). Wann Dir Schlagzäiten benotzen, bidd Dir Är Säiten méi zougänglech, well d'Rubriken d'Informatioun zielen datt e DIV-Tag net.
Et ass nëtzlech fir Schreiwe Lieser an Accessibilitéit vun der Websäit
Déi korrekt Notzung vun Header kreéiert eng logesch Struktur fir e Dokument. Dëst ass wat Screenreader benotze fir "Site" op engem Site mat Visioun Behënnerung ze liesen, sou datt Är Site fir Leit mat Behënnerungen zougitt.
Stil den Text an den Schrëft vun den Headlines
Deen einfachste Wee fir aus dem "grouss, fett a héischend" Problem vun Header Tags ze verschwannen ass den Text ze stiléieren wéi Dir wëllt dass se kucken. Tatsächlech wann ech eng nei Websäit schafft, schreift ech normalerweis den Paragraphe h1, h2, an h3 Stiler éischter Erënnerung. Ech hunn normalerweis mat just Schrëftfamill a Gréisst / Gewiicht. Zum Beispill kann dëst e Virausblat fir eng nei Websäit (dat sinn e puer Beispiller, déi benotzt kënne ginn):
Kierper, HTML {margin: 0; Ufëllen: 0; } p {font: 1em Arial, Genf, Helvetica, sans-serif; } h1 {font: fett 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: fett 1.2em Arial, Genf, Helvetica, sans-serif; }}Dir kënnt d'Schrëften vun der Iwwerschrëft änneren oder den Textstil ännere oder souguer d' Textfär . All dës wärt Är "éierlech" Headliner an eppes méi léifer an nohalend mat Ärem Design.
H1 {Schrëft: Fett Kursiv 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; Spillraum: 0; Ufëllen: 0; Faarf: # e7ce00; }}Borders Can Dress Up Headlines
Grenze sinn eng gutt Method fir Äre Schlësselen ze verbesseren. A Grenzen sinn einfach ze addéieren. Mee vergiesst net ze experimentéieren mat de Grenzen - Dir braucht keng Grenz op all Säit vun Ärer Iwwerschrëft. An Dir kënnt méi wéi einfache kloere Grenzen benotzen.
H1 {Schrëft: Fett Kursiv 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; Spillraum: 0; Ufëllen: 0; Faarf: # e7ce00; Grenz top: solid # e7ce00 medium; Grenzgänger: Punkt # e7ce00 dënn; Breet: 600px; }}Ech hunn eng Top- a Gréisst ugebuede ginn fir meng Proufe headline fir verschidde interessant visuelle Stile ze féieren. Dir kënnt Grenzen ufroen fir datt Dir de Designstil Dir wëllt erreechen.
Fëllt Backgroundsbilder fir Är Headlines Fir méi Pizazz
Vill Websäiten hu en Header-Sektioun am Top vun der Säit, déi eng Header - typesch de Sitetitel a graphesch ass. Déi meeschten Designers mengen dëst als zwee separate Elementer, awer Dir musst net. Wann d'Grafik do ass just fir d'Iwwerschrëft ze dekoréieren, firwat et net an d'Rubriken ze ginn?
h1 {font: fett italic 3em / 1em "Times New Roman", "MS Serif", "New York", Serif; Hannergrond: #fff url ("fancyheadline.jpg") repete-x ënnen; Padding: 0.5em 0 90px 0; text-align: center; Spillraum: 0; Grenzgrenz: solid # e7ce00 0.25em; Faarf: # e7ce00; }}Den Trick op dës Iwwerschrëft ass datt ech weess, datt mäi Bild 90 Pixelen grouss ass. Also ech hunn d'padding bis zum Enn vun der Schlëssel vun 90px (padding: 0.5 0 90px 0p;) addéieren. Dir kënnt mat den Margen, Line-Héicht a Padding spille fir den Text vun der Überschrift ze kréien fir genau duerzestellen wou Dir et wëllt.
Eppes wat se ze vergiessen wann Dir Biller benotzt, ass datt wann Dir eng reaktiouns Websäit (déi Dir sollt) mat engem Layout, deen op Basis vun den Ausgabegrößen a Vorrichtungen verännert, sinn, sinn Dir net ëmmer déiselwecht Gréisst. Wann Dir Är Schlëssel ze benotzen ass eng genee Gréisst ze ginn, kann dat zu Problemer schwätzen. Et ass ee vun de Grënn, firwat meeschtens d'Backgroundsbilder an enger Iwwerschrëft ze vermeiden, esou cool wéi se se heiansdo kucken.
Eropsetzung a Schlësselen
Dëst ass eng aner populär Technik fir Webdesigner, well et erlaabt Iech eng grafesch Schlëssel ze kreéieren an den Text vum Header mam Bild ze ersetzen. Dëst ass eng wier eng antiqued Praxis vun Webdesigner hunn Zougrëff op ganz wéineg Schrëften a wollte méi exotesch Schrëften an hirer Aarbecht benotzen. De Stempel vu Web fonts huet verännert wéi d'Designers Site ugeet. Headlines kënnen elo an enger grousser Variatioun vu Schrëften festgeluegt ginn an d'Biller mat dëse Schrëften, déi agebaut sinn, net méi gebraucht. Als Suchziel fënnt een nëmmen CSS Biller Ersatz fir Schlësselen op aler Siten déi nach net méi moderner Praxis geännert hunn.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard am 9/6/17