Použijte písma, ohraničení a obrázky pro zdobení titulků
Nadpisy jsou na většině webových stránek běžné. Ve skutečnosti má skoro každý textový dokument tendenci mít alespoň jeden nadpis, takže znáte název toho, co čtete. Titulky jsou kódovány pomocí elementů HTML - h1, h2, h3, h4, h5 a h6.
Na některých stránkách můžete zjistit, že titulky jsou kódovány bez použití těchto prvků. Místo toho mohou nadpisy používat odstavce s určitými atributy třídy přidanými k nim nebo rozdíly s prvky třídy. Důvodem, proč jsem často slyšel o této nesprávné praxi, je to, že návrhář "se nelíbí, jak vypadají hlavičky". Ve výchozím nastavení jsou nadpisy zobrazeny tučně a mají větší rozměr, zejména prvky h1 a h2, které se zobrazují v mnohem větší velikosti písma než text zbytku stránky. Mějte na paměti, že toto je pouze výchozí vzhled těchto prvků! S CSS můžete vyrazit tak, jak chcete! Můžete změnit velikost písma, odstranit tučné písmo a mnohem více. Nadpisy jsou správným způsobem, jak kódovat titulky stránky. Zde jsou některé důvody proč.
Proč používat označení nadpisů spíše než DIV a styling
Vyhledávače jako hlavičky
To je nejlepší důvod použití nadpisů a jejich použití ve správném pořadí (tj. H1, pak h2, pak h3 atd.). Vyhledávací stroje poskytují nejvyšší váhu textu obsaženému ve značkách nadpisů, protože k tomuto textu je sémantická hodnota. Jinými slovy, tím, že označíte název stránky H1, řeknete pavoukovi vyhledávače, že to je # 1 zaostření stránky. Hlavy H2 mají # 2 důraz, a tak dále.
Nebudete muset zapamatovat, jaké třídy jste použili k definování titulků
Když víte, že všechny vaše webové stránky budou mít H1, který je tučný, 2m a žlutý, pak můžete definovat, že jednou ve stylu a dokončit. O 6 měsíců později, když přidáváte další stránku, přidáte značku H1 v horní části stránky, nemusíte se vrátit na jiné stránky, abyste zjistili, jaký styl nebo třída stylu jste definovali hlavní headline a sub-heads.
Poskytují silnou stránku
Konstrukce usnadňují čtení textu. To je důvod, proč většina amerických škol vyučuje studenty, aby napsali schéma předtím, než napsali příspěvek. Když použijete značku nadpisu ve formátu osnovy, text má jasnou strukturu, která se projeví velmi rychle. Kromě toho existují nástroje, které dokážou zkontrolovat obrysy stránky a poskytnout synopse, a ty se spoléhají na značky nadpisů pro strukturu osnovy.
Vaše stránka bude mít smysl i se styly vypnuty
Ne každý může prohlížet nebo používat styly (a to se vrátí k # 1 - vyhledávače zobrazují obsah (text) vaší stránky, nikoliv listy stylů). Používáte-li značky titulků, zpřístupňujete své stránky, protože titulky poskytují informace, které by značka DIV neměla.
Je užitečné pro čtečky obrazovky a dostupnost webových stránek
Správné použití nadpisů vytváří logickou strukturu dokumentu. To je to, co čtenáři obrazovky budou používat k "čtení" stránky uživateli s poškozením zraku, takže váš web bude přístupný osobám se zdravotním postižením.
Stýlujte text a písmo svých titulků
Nejjednodušší způsob, jak se zbavit "velkého, odvážného a ošklivého problému značek záhlaví, je stylovat text tak, jak chcete vypadat. Ve skutečnosti, když pracuji na novém webu, nejčastěji píšu styly odstavce, h1, h2 a h3. Obvykle se držím pouze rodiny fontů a velikosti / hmotnosti. Může se jednat například o předběžný stylový štítek pro nové stránky (jsou to jen některé příklady stylů, které lze použít):
tělo, html {margin: 0; polstrování: 0; } p {písmo: 1em Arial, Ženeva, Helvetica, sans-serif; } h1 {písmo: bold 2 "Times New Roman", Times, serif; } h2 {font: bold 1.5 "Times New Roman", Times, serif; } h3 {font: bold 1.2a Arial, Ženeva, Helvetica, sans-serif; }}Můžete změnit písma titulku nebo změnit styl textu nebo dokonce barvu textu . Všechny tyto položky změní svůj "ošklivý" nadpis na něco živějšího a podle vašeho návrhu.
h1 {písmo: tučné italické 2em / 1em "Times New Roman", "MS Serif", "New York", serif; okraj: 0; polstrování: 0; barva: # e7ce00; }}Hranice mohou zdobit titulky
Hranice jsou skvělý způsob, jak zlepšit své titulky. A hranice lze snadno přidat. Ale nezapomeňte experimentovat s hranicemi - na obou stranách nadpisu nepotřebujete hranici. A můžete použít víc než pouhých nudných hranic.
h1 {písmo: tučné italické 2em / 1em "Times New Roman", "MS Serif", "New York", serif; okraj: 0; polstrování: 0; barva: # e7ce00; hranice: solidní médium # e7ce00; border-bottom: tečkovaný # e7ce00 tenký; šířka: 600px; }}Přidal jsem horní a dolní okraj k mému vzorovému nadpisu, abych představil některé zajímavé vizuální styly. Mohli byste přidat hranice jakýmkoli způsobem, který byste chtěli dosáhnout požadovaného stylu designu.
Přidejte obrázky na pozadí do svých titulků pro ještě více Pizazz
Mnoho webových stránek má v horní části stránky sekci záhlaví, která obsahuje nadpis - typicky název webu a grafiku. Většina návrhářů to považuje za dva samostatné prvky, ale nemusíte. Pokud je grafika pouze pro zdobení nadpisu, tak proč jej nepřidávejte do záhlaví stylů?
h1 {písmo: tučné italické 3em / 1em "Times New Roman", "MS Serif", "New York", serif; pozadí: #fff url ("fancyheadline.jpg") opakování-x dolů; polstrování: 0.5m 0 90px 0; text-align: center; okraj: 0; spodní hranice: pevná # e7ce00 0.25em; barva: # e7ce00; }}Trik k tomuto titulku spočívá v tom, že vím, že má obrázek vysoký 90 pixelů. Tak jsem přidal polstrování do spodní části nadpisu 90px (padding: 0.5 0 90px 0p;). Můžete si hrát s okraji, výškou čáry a polstrováním, abyste získali text nadpisu, aby se zobrazil přesně tam, kde ho chcete.
Jedna věc, kterou je třeba pamatovat při použití obrázků, je, že pokud máte odpověď na webové stránky (které byste měli) s rozvržením, které se mění podle velikosti a zařízení obrazovky, nebudete nadpis vždy mít stejnou velikost. Pokud potřebujete, aby nadpis byl přesný, může to mít za následek problémy. To je jeden z důvodů, proč se obecně vyhýbám obrazům pozadí v nadpisu, protože je to tak cool, jak někdy vypadají.
Výměna obrázku v titulcích
Jedná se o další populární techniku pro webových designérů, protože vám umožňuje vytvářet grafický nadpis a nahrazovat text záhlaví značky s tímto obrazem. To je pravdivě antiqued praxe od webových designérů měl přístup k velmi málo písem a chtěl používat více exotických písem v jejich práci. Vzestup webových písem skutečně změnil, jak se návrháři přibližují k místům. Titulky lze nyní nastavit v širokém spektru písem a obrázky, které jsou vložené, již nejsou potřeba. Jako takový najdete pouze obrázky CSS, které nahrazují nadpisy na starších stránkách, které dosud nebyly aktualizovány na moderní postupy.
Původní článek Jennifer Krynin. Upravil Jeremy Girard dne 9/6/17