Използвайте шрифтове, очертания и изображения, за да украсите заглавията
Заглавията са често срещани в повечето уеб страници. Всъщност, почти всеки текстов документ има тенденция да има поне едно заглавие, така че да знаете заглавието на това, което четете. Тези заглавия се кодират с помощта на елементите на HTML заглавието - h1, h2, h3, h4, h5 и h6.
На някои сайтове може да откриете, че заглавията са кодирани без тези елементи. Вместо това заглавията могат да използват параграфи със специфични атрибути на класа, добавени към тях, или разделяния с елементи от класа. Причината, поради която често слушам за тази неправилна практика, е, че дизайнерът "не харесва начина, по който изглежда заглавията". По подразбиране заглавията са показани с удебелен шрифт и са по-големи по размер, особено елементите h1 и h2, които се показват с много по-голям шрифт от текста на останалата част от страницата. Имайте предвид, че това е само по подразбиране вид на тези елементи! С CSS, можете да направите заглавие изглежда каквото искате! Можете да промените размера на шрифта, да премахнете удебеления шрифт и още много други. Заглавията са правилният начин за кодиране на заглавията на страниците. Ето няколко причини.
Защо да използвате заглавията на етикети, а не DIV и стилинг
Търсачките като маркери за заглавията
Това е най-добрата причина да използвате заглавията и да ги използвате в правилния ред (т.е. h1, след това h2, след това h3 и т.н.). Търсачките дават най-висока тежест на текста, включен в етикетите на заглавията, защото има семантична стойност за този текст. С други думи, като маркирате заглавието на страницата си H1, кажете на паяка на търсачката, че това е фокусът # 1 на страницата. H2 заглавията имат # 2 акцент, и така нататък.
Не трябва да помните какви класове сте използвали, за да дефинирате заглавията си
Когато знаете, че всичките ви уеб страници ще имат H1, което е смело, 2мено и жълто, тогава можете да определите, че веднъж в стиловата ви таблица и да бъде направено. 6 месеца по-късно, когато добавяте друга страница, просто добавяте маркер H1 в горната част на страницата си, не е нужно да се връщате към други страници, за да разберете какъв идентификационен или класов стил, който сте използвали, за да определите основната заглавие и под-глави.
Те осигуряват силна страница
Очертанията правят текста по-лесен за четене. Ето защо повечето училища в САЩ учеха учениците да напишат схема, преди да напишат статията. Когато използвате заглавните етикети в очертан формат, вашият текст има ясна структура, която става очевидна много бързо. Освен това има инструменти, които могат да преглеждат контурите на страницата, за да предоставят обобщение и те разчитат на етикетите на заглавията на структурата на очертанията.
Вашата страница ще се почувства дори и със стилът изключен
Не всеки може да разглежда или използва стилови листа (и това се връща в # 1 - търсачките разглеждат съдържанието (текста) на вашата страница, а не стиловите листове). Ако използвате маркери за заглавие, вие правите страниците си по-достъпни, защото заглавията съдържат информация, която DIV маркерът не би направил.
Това е полезно за екранни четци и достъпност на уебсайтове
Правилното използване на заглавията създава логическа структура на документ. Това е, което екранните четци ще използват, за да "прочетат" сайт на потребител с увредено зрение, което прави сайта ви достъпен за хора с увреждания.
Стилирайте текста и шрифта на заглавията си
Най-лесният начин да се отдалечите от "големия, удебелен и грозен" проблем на заглавията на етикетите е да оформят текста по начина, по който искате да изглежда. Всъщност, когато работя върху нов уеб сайт, обикновено пиша първите неща за стила на параграф, h1, h2 и h3. Обикновено се придържам само към семейство шрифтове и размер / тегло. Например, това може да бъде предварителен лист за стилове за нов сайт (това са само някои примерни стилове, които могат да бъдат използвани):
тяло, html {margin: 0; подложка: 0; } p {шрифт: 1ем Arial, Женева, Helvetica, sans-serif; } h1 {шрифт: bold 2em "Times New Roman", Times, serif; } h2 {шрифт: bold 1.5 "Times New Roman", Times, serif; } h3 {шрифт: удебелен 1.2м Arial, Женева, Helvetica, sans-serif; }Можете да промените шрифтовете на заглавието си или да промените стила на текста или дори цвета на текста . Всички те ще превърнат "грозното" заглавие в нещо по-жизнено и в съответствие с вашия дизайн.
h1 {шрифт: получерен италиански 2м / 1ем "Times New Roman", "MS Serif", "Ню Йорк", сериф; марж: 0; подложка: 0; цвят: # e7ce00; }Границите могат да обличат заглавия
Границите са чудесен начин да подобрите заглавията си. И границите са лесни за добавяне. Но не забравяйте да експериментирате с границите - нямате нужда от граници от всяка страна на заглавието. И можете да използвате повече от просто пронизителни граници.
h1 {шрифт: получерен италиански 2м / 1ем "Times New Roman", "MS Serif", "Ню Йорк", сериф; марж: 0; подложка: 0; цвят: # e7ce00; горна граница: твърда # e7ce00 среда; край на дъното: пунктиран # e7ce00 тънък; ширина: 600px; }Добавих горна и долна граница към пробната ми заглавие, за да представя някои интересни визуални стилове. Можете да добавите граници по какъвто и да е начин, който искате да постигнете стила на дизайна, който искате.
Добавете изображения на заден план към заглавията си за още повече Pizazz
Много уеб сайтове имат заглавна част в горната част на страницата, която съдържа заглавие - обикновено заглавието на сайта и графика. Повечето дизайнери мислят за това като два отделни елемента, но не е нужно. Ако графиката е там само за да украсите заглавието, тогава защо да не го добавите към заглавните стилове?
h1 {шрифт: получер италиански 3м / 1ем "Times New Roman", "MS Serif", "Ню Йорк", сериф; фон: #fff url ("fancyheadline.jpg") повторение-х дъно; подложка: 0.5мм 0 90px 0; текст-подравняване: център; марж: 0; гранично дъно: твърдо # e7ce00 0.25em; цвят: # e7ce00; }Номерът на тази заглавка е, че знам, че моето изображение е с височина 90 пиксела. Така че добавих подложка към долната част на заглавието на 90px (подложка: 0.5 0 90px 0p;). Можете да играете с периферията, височината на линията и подложката, за да получите текста на заглавието, за да се покаже точно къде искате.
Едно нещо, което трябва да запомните при използването на изображения, е, че ако имате подходящ уебсайт (който би трябвало) с оформление, което се променя въз основа на размерите и устройствата на екрана, заглавието ви няма винаги да е със същия размер. Ако имате нужда от заглавие, за да бъде точен размер, това може да доведе до проблеми. Това е една от причините, поради които обикновено избягвам фоновите изображения в заглавие, толкова готино, колкото понякога изглеждат.
Заместване на изображението в заглавията
Това е друга популярна техника за уеб дизайнери, защото ви позволява да създавате графична заглавие и да замените текста на заглавния етикет с това изображение. Това е истинска антикварна практика от уеб дизайнерите, които имат достъп до много малко шрифтове и искат да използват по-екзотични шрифтове в своята работа. Нарастването на уеб шрифтовете наистина промени начина, по който дизайнерите подход към сайтовете. Заглавията вече могат да се задават в голямо разнообразие от шрифтове и изображенията с вградени шрифтове вече не са необходими. По този начин ще намерите само CSS изображения за замяна на заглавия на по-стари сайтове, които все още не са актуализирани до по-съвременни практики.
Оригинална статия на Дженифър Кринин. Редактиран от Джереми Жиар на 9/6/17