Користите фонтове, границе и слике за украшавање наслова
Наслови су уобичајени на већини веб страница. У ствари, прилично било који текстуални документ има тенденцију да има најмање један наслов тако да знате наслов онога што читате. Ови наслови су кодирани коришћењем ХТМЛ наслова - х1, х2, х3, х4, х5 и х6.
На неким локацијама може се видети да су насловници кодирани без коришћења ових елемената. Умјесто тога, насловници могу користити ставке са посебним атрибутима класа доданим њима или подјелама с елементима класе. Разлог због којег често чујем за ову нетачну праксу јесте да дизајнери "не воле начин на који изгледају заглавља". Подразумевано, заглавља су приказане подебљано и оне су веће величине, нарочито х1 и х2 елемента који се приказују у знатно већој величини слова од остатка текста странице. Имајте на уму да је ово само подразумевани изглед ових елемената! Са ЦСС-ом можете изгледати како изгледа! Можете променити величину слова, уклонити подебљано и још много тога. Наслови су одговарајући начин кодирања наслова странице. Ево неких разлога зашто.
Зашто користити ознаке за наслове уместо ДИВ и Стилинг
Претраге попут ознака наслова
Ово је најбољи разлог за кориштење заглавља и користити их у исправном редоследу (нпр. Х1, затим х2, затим х3, итд.). Претраживачи дају највише тежине тексту који се налази унутар ознака наслова јер постоји семантична вриједност тог текста. Другим речима, означавањем наслова ваше странице Х1, рећи сте пау претраживача да је то # 1 фокус странице. Наслови Х2 имају нагласак број 2 и тако даље.
Не морате да запамтите које сте разреде користили да бисте дефинирали своје наслове
Када знате да ће све ваше Веб странице имати Х1 који је болд, 2ем и жути, онда можете то дефинисати једном у својој таблици и урадити. 6 месеци касније, када додате другу страницу, само додате ознаку Х1 на врх ваше странице, не морате се вратити на друге странице да бисте сазнали који стил или ИД класу сте користили за дефинисање главног наслов и под-главе.
Они пружају јаку страницу
Оутлинес олакшава читање текста. Због тога је већина америчких школа учила ученике да напишу план прије него што напишу рад. Када користите ознаке наслова у облику скрипте, ваш текст има јасну структуру која постаје очигледна врло брзо. Поред тога, постоје алати који могу прегледати приказ странице да би се обезбедио синопсис, а они се ослањају на ознаке наслова за структуру структуре.
Ваша страница ће се осећати чак и када се стилизује
Не сви могу да гледају или користе стилске листове (и то се враћа на # 1 - претраживачи приказују садржај (текст) ваше странице, а не табеле стилова). Ако користите ознаке наслова, учините ваше странице приступачнијим зато што насловници пружају информације које ДИВ ознака не би могла.
Корисно је за читаче екрана и доступност веб-страница
Правилна употреба наслова ствара логичку структуру документа. То је оно што ће читачи екрана користити за "читање" веб странице кориснику са оштећењем вида, чиме ће ваш сајт бити доступан особама са инвалидитетом.
Стилирање текста и фонта ваших наслова
Најлакши начин да се померите од "великог, смелог и ружаног" проблема ознака наслова је да текст стишете на начин који желите да изгледају. У ствари, када радим на новој веб страници, обично сам написао параграф, х1, х2 и х3 стилове. Обично се држим само породице фонтова и величине / тежине. На пример, ово би могло бити прелиминарни стилски стил за нову локацију (то су само неки примери стилова који се могу користити):
тело, хтмл {маргин: 0; паддинг: 0; } п {фонт: 1ем Ариал, Женева, Хелветица, санс-сериф; } х1 {фонт: болд 2ем "Тимес Нев Роман", Тимес, сериф; } х2 {фонт: болд 1.5ем "Тимес Нев Роман", Тимес, сериф; } х3 {фонт: болд 1.2ем Ариал, Женева, Хелветица, санс-сериф; }Можете променити фонтове наслова или променити стил текста или чак и боју текста . Све ово ће претворити ваш "ружан" наслов у нешто више живахније и у складу са вашим дизајном.
х1 {фонт: болд италиц 2ем / 1ем "Тимес Нев Роман", "МС Сериф", "Нев Иорк", сериф; маржа: 0; паддинг: 0; боја: # е7це00; }Границе могу да облаче наслове
Границе су одличан начин да побољшате наслове. И границе се лако додају. Али не заборавите експериментисати са границама - не треба вам граница са сваке стране вашег наслова. И можете користити више од једноставних досадних граница.
х1 {фонт: болд италиц 2ем / 1ем "Тимес Нев Роман", "МС Сериф", "Нев Иорк", сериф; маржа: 0; паддинг: 0; боја: # е7це00; бордер-топ: солид # е7це00 медиум; бордер-боттом: доттед # е7це00 танак; ширина: 600пк; }Додао сам горњу и доњу границу у наслов узорка како бих представио неке занимљиве визуелне стилове. Можете додати границе на било који начин да бисте желели да постигнете стил дизајна који желите.
Додајте позадинске слике у своје наслове за још више Пизазз
Многе веб локације имају наслов за главу на врху странице која садржи наслов - обично наслов сајта и графику. Већина дизајнера мисли о томе као два одвојена елемента, али не морате. Ако је графика ту само да украсите наслов, зашто га онда не додајте у стилове наслова?
х1 {фонт: болд италиц 3ем / 1ем "Тимес Нев Роман", "МС Сериф", "Нев Иорк", сериф; позадина: #ффф урл ("фанцихеадлине.јпг") понављање-к дно; паддинг: 0.5ем 0 90пк 0; текстуално поравнање: центар; маржа: 0; бордер-боттом: солид # е7це00 0.25ем; боја: # е7це00; }Трик са овим насловом је да знам да је моја слика висока 90 пиксела. Тако сам додао паддинг на дно наслова од 90пк (паддинг: 0.5 0 90пк 0п;). Можете играти са маргинама, висином линије и паддинг-ом да бисте добили текст наслова да бисте приказали тачно где желите.
Једна ствар коју треба запамтити када користите слике је да ако имате одговарајућу веб локацију (која вам треба) са распоредом који се мења на основу величине екрана и уређаја, наслов неће увек бити исте величине. Ако вам треба наслов да будете тачне величине, то може проузроковати проблеме. То је један од разлога зашто углавном избегавам позадинске слике у наслову, што је цоол као што могу понекад изгледати.
Замена слике у Хеадлинес-у
Ово је још једна популарна техника за веб дизајнере јер вам омогућава креирање графичког наслова и замјену текста наслова са том фотографијом. Ово је истинито антика пракса од стране веб дизајнера имала приступ врло мало фонтова и хтела је користити више егзотичних фонтова у свом раду. Подизање веб фонтова заиста је променило начин на који дизајнери приступају сајтовима. Наслови се сада могу поставити у великом броју фонтова, а слике са онима који су уграђени не више нису потребни. Као такав, наћи ћете само ЦСС слике које се замењују за наслове на старијим сајтовима који још увек нису ажурирани на савремене праксе.
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 9/6/17