Koristite fontove, granice i slike za ukrašavanje naslova
Naslovi su uobičajeni na većini web stranica. U stvari, prilično bilo koji tekstualni dokument ima tendenciju da ima najmanje jedan naslov tako da znate naslov onoga što čitate. Ovi naslovi su kodirani korišćenjem HTML naslova - h1, h2, h3, h4, h5 i h6.
Na nekim lokacijama, možda ćete pronaći naslove kodirane bez korišćenja ovih elemenata. Umjesto toga, naslovnici mogu koristiti stavke sa posebnim atributima klasa dodanih njima, ili podjele sa elementima klase. Razlog zbog kojeg često čujem za ovu netačnu praksu jeste da dizajner "ne voli način na koji se zaglavlje gleda". Titlovanje je podrazumevano prikazano masnim slovima, a one su veće veličine, posebno h1 i h2 elementi koji se prikazuju u znatno većoj veličini slova od ostatka teksta stranice. Imajte na umu da je ovo samo podrazumevani izgled ovih elemenata! Sa CSS-om možete izgledati kako treba! Možete promeniti veličinu fonta, ukloniti masnim slovima i još mnogo toga. Naslovi su odgovarajući način kodiranja naslova stranice. Evo nekih razloga zašto.
Zašto koristiti oznake za naslove umesto DIV i Styling
Pretraživači poput oznaka naslova
Ovo je najbolji razlog za korištenje zaglavlja i koristiti ih u ispravnom redosledu (npr. H1, zatim h2, zatim h3, itd.). Pretraživači daju najviše težine tekstu koji se nalazi unutar oznaka naslova jer postoji semantična vrijednost tog teksta. Drugim rečima, označavanjem naslova vaše stranice H1, reći ste pau pretraživača da je to # 1 fokus stranice. Naslovi H2 imaju naglasak broj 2 i tako dalje.
Ne morate da zapamtite koje ste razrede koristili za definisanje vaših naslova
Kada znate da će sve vaše Web stranice imati H1 koji je bold, 2em i žut, onda možete to definisati jednom u svojoj listi stilova i učiniti. 6 meseci kasnije, kada dodate drugu stranicu, samo dodate H1 oznaku na vrh vaše stranice, ne morate se vratiti na druge stranice da biste saznali koji stil ID ili klasu ste koristili za definisanje glavnog naslov i pod-glave.
Oni pružaju jaku stranicu
Izvode olakšavaju čitanje teksta. Zbog toga je većina američkih škola učila učenike da napišu ploču pre pisanja novina. Kada koristite oznake naslova u obliku skica, vaš tekst ima jasnu strukturu koja postaje očigledna vrlo brzo. Pored toga, postoje alati koji mogu pregledati prikaz stranice kako bi dobili sinopsis, a oni se oslanjaju na oznake naslova za okvirnu strukturu.
Vaša stranica će se osećati čak i kada se stilovi isključe
Ne svi mogu da pregledaju ili koriste stilske listove (i to se vraća na # 1 - pretraživači prikazuju sadržaj (tekst) vaše stranice, a ne tabele stilova). Ako koristite oznake naslova, učinite vaše stranice pristupačnijim, jer naslovnice pružaju informacije koje DIV oznaka ne bi mogla.
Korisno je za čitače ekrana i dostupnost veb stranica
Pravilna upotreba naslova stvara logičku strukturu dokumenta. Ovo će čitaoci ekrana koristiti za "čitanje" web stranice korisniku sa oštećenjem vida, čime će vaš sajt biti dostupan osobama sa invaliditetom.
Stil Tekst i Font vaših naslova
Najlakši način da se pomerite od "velikog, smelog i ružanog" problema oznaka naslova je da tekst stišete na način koji želite da izgledaju. Zapravo, kada radim na novoj web lokaciji, obično sam napisao paragraf, h1, h2 i h3 stilove. Obično se držim samo porodice fontova i veličine / težine. Na primjer, ovo bi mogao biti preliminarni stilski list za novo mjesto (to su samo neki primjeri stilova koji se mogu koristiti):
telo, html {margin: 0; padding: 0; } p {font: 1em Arial, Ženeva, 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, Ženeva, Helvetica, sans-serif; }Možete promeniti fontove naslova ili promeniti stil teksta ili čak i boju teksta . Sve ovo će pretvoriti vaš "ružan" naslov u nešto više živahnije i u skladu sa vašim dizajnom.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marža: 0; padding: 0; boja: # e7ce00; }Granice mogu da oblače naslove
Granice su odličan način da poboljšate naslove. I granice se lako dodaju. Ali ne zaboravite da eksperimentišete sa granicama - ne treba vam granica sa svake strane vašeg naslova. I možete koristiti više od jednostavnih dosadnih granica.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marža: 0; padding: 0; boja: # e7ce00; border-top: solid # e7ce00 srednji; granična dužina: tačkasta # e7ce00 tanka; širina: 600px; }Dodao sam gornjoj i donjoj granici na moj naslov uzorka kako bih predstavio neke zanimljive vizuelne stilove. Možete dodati granice na bilo koji način da biste želeli da postignete stil dizajna koji želite.
Dodajte pozadinske slike u svoje naslove za još više Pizazz
Mnoge veb lokacije imaju naslov za glavu na vrhu stranice koja sadrži naslov - obično naslov sajta i grafiku. Većina dizajnera misli o tome kao dva odvojena elementa, ali ne morate. Ako je grafika samo da ukrasite naslov, zašto ga onda ne dodajte u stilove naslova?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; pozadina: #fff url ("fancyheadline.jpg") ponavljanje-x dno; padding: 0.5em 0 90px 0; tekstualno poravnanje: centar; marža: 0; granična dna: čvrsta # e7ce00 0.25em; boja: # e7ce00; }Ovaj trik za ovaj naslov je da znam da je moja slika visoka 90 piksela. Tako sam dodao padding na dno naslova od 90px (padding: 0.5 0 90px 0p;). Možete igrati sa marginama, linijskom visinom i oblaganjem da biste dobili naslov teksta da biste prikazali tačno gde želite.
Jedna stvar koju treba zapamtiti kada koristite slike je da ako imate odgovarajuću web lokaciju (koja vam treba) sa rasporedom koji se menja na osnovu veličine ekrana i uređaja, naslov neće uvek biti iste veličine. Ako vam treba naslov da budete tačne veličine, to može prouzrokovati probleme. To je jedan od razloga zašto uglavnom izbegavam pozadinske slike u naslovu, što je cool kao što mogu ponekad izgledati.
Zamjena slike u Headlines-u
Ovo je još jedna popularna tehnika za web dizajnere jer vam omogućava kreiranje grafičkog naslova i zamjenu teksta naslova s tom slikom. Ovo je istinito antika praksa od strane web dizajnera imala pristup vrlo malo fontova i htela je koristiti više egzotičnih fontova u svom radu. Porast web fontova zaista je promenio način na koji dizajneri pristupaju sajtovima. Naslovi se sada mogu postaviti u velikom broju fontova, a slike sa onima koji su ugrađeni ne više nisu potrebni. Kao takav, naći ćete samo CSS slike koje se zamenjuju za naslove na starijim sajtovima koji još nisu ažurirani na savremene prakse.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 9/6/17