Користете фонтови, граници и слики за да ги декорирате наслови
Насловите се чести на повеќето веб-страници. Всушност, речиси секој текст документ има тенденција да има барем еден наслов, така што ќе го знаеш насловот на она што го читаш. Овие наслови се кодирани со користење на елементите за наслов 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 {маргина: 0; Соочи: 0; } p {фонт: 1em Arial, Женева, Helvetica, sans-serif; } h1 {фонт: задебелен 2em "Times New Roman", тајмс, сериф; } h2 {фонт: задебелен 1.5em "Times New Roman", тајмс, сериф; } h3 {фонт: задебелен 1.2ем Arial, Женева, Хелветика, без шанс; }Можете да ги менувате фонтовите на вашиот наслов или да го промените стилот на текст или дури и бојата на текстот . Сите овие ќе го претворат вашиот "грда" насловот во нешто повеќе живо и во согласност со вашиот дизајн.
h1 {фонт: задебелен курзив 2em / 1em "Times New Roman", "MS Serif", "New York", serif; маргина: 0; Соочи: 0; боја: # e7ce00; }Границите можат да се облекуваат наслови
Границите се одличен начин за подобрување на вашите наслови. И границите се лесни за додавање. Но, не заборавајте да експериментирате со границите - не ви треба граница на секоја страна од вашиот наслов. И можете да користите повеќе од обични здодевни граници.
h1 {фонт: задебелен курзив 2em / 1em "Times New Roman", "MS Serif", "New York", serif; маргина: 0; Соочи: 0; боја: # e7ce00; граница-врв: солидна # e7ce00 средина; граница-дното: точки # e7ce00 тенки; Ширина: 600px; }Јас додадов врвна и долна граница на насловот на мојот примерок за да воведам некои интересни визуелни стилови. Можете да додадете граници на кој било начин што сакавте да го достигнете стилот на дизајн што го сакате.
Додајте слики од позадина на вашите наслови за уште повеќе Pizazz
Многу веб-страници имаат дел за заглавје на врвот на страницата која вклучува наслов - типично насловот на страницата и графиката. Повеќето дизајнери сметаат дека ова е два одделни елементи, но вие не морате. Ако графиката е таму само за да го красат насловот, тогаш зошто да не го додадете во стилот на насловот?
h1 {фонт: задебелен курзив 3em / 1em "Times New Roman", "MS Serif", "New York", serif; позадина: #fff url ("fancyheadline.jpg") повторување-x дното; Соочувајќи се: 0.5em 0 90px 0; текст-порамнување: центар; маргина: 0; граничното дно: солидна # e7ce00 0.25em; боја: # e7ce00; }Трикот на овој наслов е дека знам дека мојата слика е висока од 90 пиксели. Па јас додадов додаток на дното на насловот на 90px (патент: 0.5 0 90px 0p;). Можете да репродуцирате со маргините, висината на линијата и дополнувањето за да го добиете текстот на насловот за да се прикаже точно онаму каде што сакате.
Едно нешто што треба да се запамети кога користите слики е тоа што, ако имате соодветна веб-страница (што треба да ја) со изглед кој се менува врз основа на големини и уреди на екранот, насловниот наслов нема секогаш да биде со иста големина. Ако ви треба насловот да биде точна големина, ова може да предизвика проблеми. Тоа е една од причините зошто генерално ги избегнувам позадинските слики во насловот, како што се излади како што понекогаш може да изгледаат.
Замена на слики во наслови
Ова е уште една популарна техника за веб-дизајнери бидејќи ви овозможува да креирате графички наслов и да го замените текстот на насловот со таа слика. Ова е вистина антикварната пракса од веб-дизајнерите имаше пристап до многу малку фонтови и сакаше да користи повеќе егзотични фонтови во нивната работа. Подемот на веб-фонтови навистина се промени како дизајнерите им пристапуваат на сајтовите. Насловите сега можат да бидат поставени во широк спектар на фонтови и сликите со оние вметнати фонтови веќе не се потребни. Како таква, ќе ги најдете само CSS-сликите за замена за насловите на постарите сајтови кои сè уште не се ажурирани во повеќе модерни практики.
Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар на 9/6/17