Upotrijebite Krstionica, granice i slike da biste ukrasili naslovnice
Naslovi su česti u većini web stranica. U stvari, gotovo svaki tekstni dokument ima tendenciju da ima barem jedan naslov tako da znate naslov onoga što čitate. Ovi naslovi su kodirani pomoću HTML elemenata - h1, h2, h3, h4, h5 i h6.
Na nekim web mjestima možda ćete primijetiti da su naslovi označeni bez korištenja tih elemenata. Umjesto toga, naslovi mogu koristiti odlomke s posebnim atributima klase koji su dodani u njih ili dijeljenjem s elementima klase. Razlog zašto često čujem ovu netočnu praksu jest da dizajner "ne sviđa način na koji izgledaju naslovi". Prema zadanim postavkama, zaglavlja su podebljana i veća su, a posebno elementi h1 i h2 koji se prikazuju u većoj veličini fonta od ostatka teksta stranice. Imajte na umu da je to samo zadani izgled ovih elemenata! S CSS-om možete stvoriti naslov koji želite! Možete promijeniti veličinu fonta, ukloniti podebljano i još mnogo toga. Naslovi su pravi način kodiranja naslova stranice. Evo nekoliko razloga zašto.
Zašto koristiti naslovne oznake umjesto DIV-a i oblikovanja
Tražilice poput naslova oznaka
Ovo je najbolji razlog za korištenje naslova i upotrebljavajte ih u ispravnom redoslijedu (npr. H1, zatim h2, zatim h3 itd.). Tražilice daju najveću težinu za tekst uključen u tarifne oznake jer postoji semantička vrijednost za taj tekst. Drugim riječima, označavanjem naslova stranice H1, kažete pauku tražilice da je to # 1 fokus stranice. H2 naslovi imaju # 2 naglasak i tako dalje.
Ne morate zapamtiti koji su vam razredi za definiranje naslova
Kada znate da će sve vaše web stranice imati H1 koji je podebljano, 2em i žuto, tada možete to definirati jednom u svojem stilskom listu i izvršite. 6 mjeseci kasnije, kada dodajete drugu stranicu, dodate oznaku H1 na vrh stranice, ne morate se vratiti na druge stranice kako biste saznali koji stil ID ili klasa koju ste koristili za definiranje glavne naslov i podređene glave.
Oni pružaju snažnu stranicu Outline
Obrasci olakšavaju čitanje teksta. Zato je većina američkih škola podučavala učenike da napišu nacrt prije pisanja papira. Kada upotrebljavate oznake naslova u obrisom, vaš tekst ima jasnu strukturu koja se vrlo brzo pojavljuje. Osim toga, postoje alati koji mogu pregledati shemu stranice kako bi pružili sinopsis, a oni se oslanjaju na oznake naslova za strukturu obrisa.
Vaša stranica će osjetiti čak i kad su stilovi isključeni
Nije svatko može pregledavati ili koristiti stilske listove (i to se vraća na # 1 - tražilice prikazuju sadržaj (tekst) vaše stranice, a ne stilski listovi). Ako upotrebljavate oznake naslova, web stranice postajete dostupni jer naslovi sadrže informacije koje DIV oznaka ne bi.
Korisno je za čitače zaslona i dostupnost web stranica
Pravilna upotreba naslova stvara logičku strukturu dokumentu. To će čitatelji zaslona upotrebljavati za "čitanje" web-lokacije korisnicima s oštećenjem vida, čime je vaša web-lokacija dostupna osobama s invaliditetom.
Stil tekst i slovo naslova
Najlakši način da se maknete s "velikim, podebljanim i ružnim" problemom oznaka naslova jest stilizirati tekst na način na koji želite da izgledaju. Zapravo, kada radim na novoj web stranici, obično pišem paragraf, h1, h2 i h3 stil. Ja se obično držim samo s obitelji fontova i veličinom / težinom. Na primjer, to može biti preliminarni stilski obrazac za novu web lokaciju (to su samo neki primjeri stilova koji se mogu upotrijebiti):
tijelo, 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 mijenjati fontove naslova ili promijeniti stil teksta ili čak boju teksta . Sve to će pretvoriti tvoj "ružni" naslov u nešto življa i skladu s vašim dizajnom.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margina: 0; padding: 0; boja: # e7ce00; }Granice mogu prerušiti se naslova
Granice su sjajan način za poboljšanje naslova. Granice se lako dodaju. Ali ne zaboravite eksperimentirati s granicama - ne morate imati granicu na svakoj strani naslova. I možete koristiti više od običnih dosadnih granica.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margina: 0; padding: 0; boja: # e7ce00; granični vrh: kruti # e7ce00 medij; granični dno: isprepleteno # e7ce00 tanak; širina: 600px; }Dodala sam gornju i donju granicu na moj naslov uzorka za uvođenje nekih zanimljivih vizualnih stilova. Možete dodati granice na bilo koji način da želite postići stil dizajna koji želite.
Dodajte pozadinske slike u svoje naslovnice za još Pizazz
Mnoge web stranice imaju zaglavlje na vrhu stranice koja uključuje naslov - obično naslov web mjesta i grafički prikaz. Većina dizajnera ovo razmišlja kao dva odvojena elementa, ali ne morate. Ako je grafička tamo samo za ukrašavanje naslova, zašto ga ne dodati u stilove naslova?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; pozadina: #fff url ("fancyheadline.jpg") ponavljanje x dna; padding: 0.5em 0 90px 0; tekst uskladiti: centar; margina: 0; granični dno: čvrsta # e7ce00 0.25em; boja: # e7ce00; }Izigrati ovaj naslov je da znam da je moja slika visoka 90 piksela. Zato sam dodao padding na dno naslova 90px (padding: 0.5 0 90px 0p;). Možete igrati uz margine, visinu linije i padding da biste dobili tekst naslova da biste prikazali točno mjesto na kojem želite.
Jedna stvar koju trebate zapamtiti kada koristite slike jest da, ako imate odgovarajuću web stranicu (koju trebate) s izgledom koji se mijenja na temelju veličina zaslona i uređaja, naslov neće uvijek biti iste veličine. Ako trebate da vaš naslov bude točna veličina, to može uzrokovati probleme. To je jedan od razloga zašto općenito izbjegavam pozadinsku sliku u naslovu, kao što je to hladno kao što ponekad mogu izgledati.
Zamjena slike u naslovima
Ovo je još jedna popularna tehnika za web dizajnere jer vam omogućuje stvaranje grafičkog naslova i zamjenu teksta oznake naslova s tom slikom. To je istinski antiqued praksu od web dizajnera imao pristup vrlo malo fontova i htio koristiti više egzotičnih fontova u svom radu. Uspon web fontova doista je promijenio kako dizajneri pristupaju web stranicama. Naslovi se sada mogu postaviti u širokom rasponu fontova, a slike s onim ugrađenim fontovima više nisu potrebne. Kao takav, pronaći ćete samo zamjenske CSS slike za naslove na starijim web stranicama koje još nisu ažurirane na više modernih postupaka.
Izvorni članak Jennifer Krynin. Uredio je Jeremy Girard na 9/6/17