Na ozdobenie titulkov používajte písma, hranice a obrázky
Nadpisy sú bežné na väčšine webových stránok. V skutočnosti má skoro každý textový dokument tendenciu mať aspoň jeden nadpis, aby ste vedeli, čo si čítate. Tieto nadpisy sú kódované pomocou prvkov hlavičky HTML - h1, h2, h3, h4, h5 a h6.
Na niektorých stránkach sa môže stať, že titulky sú kódované bez použitia týchto prvkov. Namiesto toho môžu titulky používať odseky s konkrétnymi atribútmi triedy, ktoré sa k nim pridávajú, alebo rozdelenia s prvkami triedy. Dôvod, prečo som často počul o tejto nesprávnej praxi, je, že dizajnér "nemá rád spôsob, akým titulky vyzerajú". V predvolenom nastavení sú hlavičky zobrazené tučným písmom a majú väčšiu veľkosť, najmä prvky h1 a h2, ktoré sa zobrazujú oveľa väčšou veľkosťou písma ako text zvyšku stránky. Majte na pamäti, že je to len predvolený vzhľad týchto prvkov! Pomocou služby CSS môžete vykreslovať vzhľad tak, ako chcete! Môžete zmeniť veľkosť písma, odstrániť tučné písmo a oveľa viac. Nadpisy sú správny spôsob, ako kódovať titulky stránky. Tu sú niektoré dôvody.
Prečo používať označenie nadpisov skôr než DIV a štýl
Vyhľadávače ako hlavičkové značky
To je najlepší dôvod na použitie nadpisov a ich použitie v správnom poradí (tj h1, potom h2, potom h3 atď.). Vyhľadávacie nástroje poskytujú najvyššiu váhu textu, ktorý je súčasťou značiek nadpisov, pretože v texte je sémantická hodnota. Inými slovami, označením vášho názvu stránky H1 povedzte pavúkovi vyhľadávača, že toto je zaostrenie stránky # 1. Hlavy H2 majú # 2 dôraz a tak ďalej.
Nemusíte si pamätať, aké triedy ste použili na definovanie svojich titulkov
Keď viete, že všetky vaše webové stránky budú mať H1, ktorý je tučný, 2m a žltý, potom môžete definovať, že raz v štýle a urobiť. O 6 mesiacov neskôr, keď pridávate ďalšiu stránku, stačí pridať značku H1 do hornej časti vašej stránky, nemusíte sa vrátiť na iné stránky a zistiť, aký štýl alebo trieda ste definovali hlavným headline a sub-heads.
Poskytujú silný prehľad strán
Obrysy uľahčujú čítanie textu. To je dôvod, prečo väčšina amerických škôl učil študentov, aby napísali schému predtým, ako napíšu príspevok. Keď použijete značku nadpisu vo forme osnovy, text má jasnú štruktúru, ktorá sa veľmi rýchlo prejaví. Okrem toho existujú nástroje, ktoré dokážu skontrolovať obrys stránky, aby poskytli synopsí a tieto sa spoliehajú na značky nadpisov pre štruktúru osnov.
Vaša stránka sa zmení aj vtedy, keď sú štýly vypnuté
Nie každý môže prezerať alebo používať šablóny so štýlmi (a toto sa vráti k # 1 - vyhľadávacie stroje zobrazujú obsah (text) vašej stránky, nie štýly). Ak používate značky nadpisu, sprístupňujete svoje stránky, pretože titulky poskytujú informácie, ktoré by značka DIV nemali.
Je to užitočné pre čítačky obrazovky a prístupnosť webových stránok
Správne používanie nadpisov vytvára logickú štruktúru dokumentu. To je to, čo čitatelia obrazovky použijú na "čítanie" stránky používateľovi s poškodením zraku, čím sa vaše stránky sprístupnia ľuďom so zdravotným postihnutím.
Štýl textu a písma vašich titulkov
Najjednoduchší spôsob, ako sa vyhnúť "veľkému, odvážnemu a škaredému problému značiek nadpisov, je štýl textu tak, ako chcete, aby vyzerali. V skutočnosti, keď pracujem na novom webe, najčastejšie píšem štýly odseku, h1, h2 a h3. Zvyčajne sa držím iba rodiny písiem a veľkosti / hmotnosti. Môže to byť napríklad predbežný štýl štýlu pre nové stránky (ide len o niektoré štýly, ktoré by mohli byť použité):
body, html {margin: 0; polstrovanie: 0; } p {font: 1em Arial, Ženeva, Helvetica, sans-serif; } h1 {font: bold 2m "Times New Roman", Times, serif; } h2 {font: bold 1.5 "Times New Roman", Times, serif; } h3 {font: bold 1.2m Arial, Ženeva, Helvetica, sans-serif; }Môžete upraviť písma svojho nadpisu alebo zmeniť štýl textu alebo dokonca aj farbu textu . To všetko zmení váš "škaredý" nadpis na niečo živšie a v súlade s vašim dizajnom.
h1 {písmo: tučný kurzívou 2m / 1em "Times New Roman", "MS Serif", "New York", serif; rozpätie: 0; polstrovanie: 0; farba: # e7ce00; }Hranice môžu obliecť titulky
Hranice sú skvelý spôsob, ako zlepšiť svoje titulky. A hranice sa ľahko pridávajú. Ale nezabudnite experimentovať s hranicami - nepotrebujete hranicu na každej strane vášho titulku. A môžete použiť viac ako jednoducho nudné hranice.
h1 {písmo: tučný kurzívou 2m / 1em "Times New Roman", "MS Serif", "New York", serif; rozpätie: 0; polstrovanie: 0; farba: # e7ce00; hraničný vrchol: masívne médium # e7ce00; border-bottom: bodkovaný # e7ce00 tenký; šírka: 600 pixlov; }Pridal som horný a spodný okraj do môjho vzorového nadpisu, aby som predstavil zaujímavé vizuálne štýly. Môžete pridať hranice akýmkoľvek spôsobom, ktorý chcete dosiahnuť štýlu dizajnu, ktorý chcete.
Pridajte pozadie obrázkov na svoje titulky pre ešte viac Pizazz
Mnoho webových stránok má sekciu hlavičky v hornej časti stránky, ktorá obsahuje nadpis - typicky názov stránky a grafiku. Väčšina dizajnérov si to myslí ako dva samostatné prvky, ale nemusíte. Ak je grafika tam len na vyzdobenie nadpisu, tak prečo ho nepridáte do štýlov nadpisov?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; pozadie: #fff url ("fancyheadline.jpg") opakovanie-x spodné; polstrovanie: 0.5m 0 90px 0; text-align: center; rozpätie: 0; spodná hranica: pevná # e7ce00 0.25em; farba: # e7ce00; }Trik k tomuto nadpisu je, že viem, že môj obrázok má výšku 90 pixelov. Tak som pridal padding na spodok titulku 90px (padding: 0.5 0 90px 0p ;). Môžete hrať s okrajmi, výškou či polstrovaním, aby ste získali text nadpisu tak, aby sa zobrazil presne tam, kde ho chcete.
Jedna vec, ktorú si musíte pamätať pri používaní obrázkov, je, že ak máte zodpovedajúcu webovú stránku (ktorá by ste mala) s rozložením, ktoré sa mení podľa veľkostí obrazovky a zariadení, nebudete mať nadpis vždy rovnakú veľkosť. Ak potrebujete, aby nadpis mal presnú veľkosť, môže to spôsobiť problémy. Je to jeden z dôvodov, prečo sa všeobecne vyhýbam pozadím obrázkov v nadpise, a to tak cool, ako môžu niekedy vyzerať.
Nahradenie obrázkov v titulkoch
Toto je ďalšia populárna technika pre webových dizajnérov, pretože vám umožňuje vytvoriť grafický nadpis a nahradiť text nadpisu nadpisu daným obrázkom. Je to pravda starožitné praxe od webových dizajnérov mal prístup k veľmi málo fontov a chcel používať viac exotických písiem v ich práci. Vzostup webových písiem naozaj zmenil spôsob, akým návrhári pristupujú k lokalitám. Nadpisy môžu byť teraz nastavené v širokej škále písiem a obrázky už nie sú potrebné. Ako taký, nájdete len obrázky CSS nahradzujúce titulky na starších stránkach, ktoré ešte neboli aktualizované na modernejšie postupy.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 9/6/17