Тақырыптарды безендіру үшін қаріптерді, жиектерді және суреттерді қолданыңыз
Тақырыптар веб-беттердің көбінде жиі кездеседі. Шын мәнінде, кез-келген мәтіндік құжатта кем дегенде бір тақырып бар, осылайша сіз оқып жатқан нәрсесінің атауын білесіз. Бұл тақырыптар HTML тақырып элементтері - h1, h2, h3, h4, h5 және h6 арқылы кодталған.
Кейбір сайттарда осы элементтерді қолданбай, бас тақырыптарының кодталуы мүмкін. Оның орнына, тақырыптар оларға қосылған қосалқы сынып атрибуттары немесе сынып элементтерімен бөлімдер бар абзацтарды пайдалана алады. Бұл дұрыс емес тәжірибе туралы жиі естігенімнің себебі, дизайнер «тақырыптардың көрінісін ұнатпайды». Әдепкі бойынша, тақырыптар қалыңда көрсетіледі және олар өлшемі үлкен, әсіресе, парақтың қалған мәтініне қарағанда әлдеқайда үлкен қаріп өлшемінде көрсетілетін h1 және h2 элементтері. Бұл элементтердің әдепкі көрінісі ғана екенін есте сақтаңыз! CSS-де, тақырыпты өзіңіз қалағандай жасай аласыз! Сіз қаріп өлшемін өзгерте аласыз, қалыңдығын және тағы басқаларын алып тастай аласыз. Тақырыптар - беттің тақырыптарын кодтаудың дұрыс жолы. Міне, кейбір себептер.
Неліктен DIVs мен сәндеуден гөрі тақырып тегтерін пайдалану керек
Тақырыптық тегтер секілді іздеу машиналары
Бұл тақырыптарды пайдаланудың ең жақсы себебі және оларды дұрыс тәртіпте пайдалану (яғни, h1, содан кейін h2, содан кейін h3 және т.б.). Іздеу механизмдері тақырып тегтеріне енгізілген мәтінге ең жоғары салмақ береді, себебі бұл мәтінге семантикалық мән бар. Басқаша айтқанда, бетіңіздің H1 атауын белгілеп, сіз іздеу жүйесіндегі паукқа беттің # 1 фокус екенін айтасыз. Н2 тақырыбы # 2 екпініне ие және т.б.
Тақырыптарыңызды анықтау үшін пайдаланатын қандай сыныптарды есте сақтау керек?
Барлық веб-беттеріңізде қалың, 2эм және сары болып табылатын H1-ге ие болатынын білсеңіз, стиль кестесінде бір рет анықтай аласыз. 6 ай өткеннен кейін, сіз басқа бетті қосқанда, сіз өзіңіздің бетіңіздің жоғарғы жағына H1 тегті қосасыз, сіз басты бетті анықтайтын стиль идентификаторы мен сыныпты білу үшін басқа беттерге қайтудың қажеті жоқ. тақырып және қосалқы басшылар.
Олар күшті бет құрылымын қамтамасыз етеді
Мәтінді оқуға ыңғайлы етеді. Сондықтан көптеген американдық мектептер оқушыларды қағазды жазар алдында жоспар жазуға үйретті. Кафедраның пішімінде тақырып тегтерін пайдаланған кезде, мәтініңізде өте айқын көрінетін айқын құрылым бар. Сонымен қатар, синопсис ұсыну үшін бет құрылымын қарап шығуға болатын құралдар бар және олар құрылым құрылымына арналған тақырып тегтеріне сүйенеді.
Сіздің стиліңіз стильдермен де өшірілсін
Әрбір стиль кестесін көре немесе қолдана алмайды (бұл # 1 -ге дейін жетеді - іздеу машиналары мәнер кестелерін емес, бетіңіздің мазмұнын (мәтінін) көреді). Егер сіз тақырыптық тегтерді қолдансаңыз, сіздің беттеріңізді қолжетімді ете аласыз, себебі тақырыптар DIV тегі болмайтын ақпарат береді.
Бұл экрандағы оқырмандарға және веб-сайтқа кіруге қолайлы
Тақырыптарды дұрыс пайдалану құжатқа логикалық құрылым жасайды. Бұл экранды оқырмандар торапты мүгедектікке ұшыраған пайдаланушыға «оқып», сайтты мүмкіндіктері шектеулі адамдарға қолжетімді ететін етіп қолданатын болады.
Тақырыптарыңыздың мәтінін және қарпін белгілеңіз
Тақырып тегтерінің «үлкен, батыл және ұнамсыз» проблемасынан алыстаудың ең қарапайым жолы - бұл мәтінді өзіңіздің көрінуіңізге қалай қарай аласыз. Іс жүзінде, мен жаңа веб-сайт жұмыс істеп жатқан кезде, әдетте, параграфты, h1, h2 және h3 стильдерін бірінші болып жазамын. Мен әдетте қаріптің отбасымен және өлшемімен / салмағымен ұстанамын. Мысалы, бұл жаңа сайт үшін алдын ала стиль кесте болуы мүмкін (бұл қолдануға болатын кейбір мысалдардың стилі ғана):
body, html {margin: 0; толтыру: 0; } p {font: 1em Arial, Женева, 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, Женева, Helvetica, sans-serif; }Тақырыптың қаріптерін өзгерте аласыз немесе мәтін мәнерін немесе мәтіннің түсін өзгертуіңізге болады. Осының бәрі сіздің «нашар» тақырыбыңызды жарқын және дизайныңызға сай айналдырады.
h1 {font: bold italic 2em / 1em «Times New Roman», «MS Serif», «New York», serif; маржа: 0; толтыру: 0; түсі: # e7ce00; }Шекаралар тақырыбын киюге болады
Шекаралар тақырыптарыңызды жақсартудың тамаша тәсілі. Және шекараларды оңай қосуға болады. Бірақ шекарамен эксперимент жүргізуді ұмытпаңыз - тақырыптың әр жағында шекара қажет емес. Және сіз қарапайым нәзік шекаралардан артық пайдалана аласыз.
h1 {font: bold italic 2em / 1em «Times New Roman», «MS Serif», «New York», serif; маржа: 0; толтыру: 0; түсі: # e7ce00; border-top: solid # e7ce00 medium; төменгі шекара: нүктелі # e7ce00 жұқа; ені: 600px; }Мен қызықты көрнекі стильдерді таныстыру үшін менің үлгі тақырыбымға үстіңгі және астыңғы шекарасын қостым. Сіз қалаған дизайн стиліне қол жеткізгіңіз келген кез-келген жолмен шекараларды қоса аласыз.
Тақырыптарыңызға фондық суреттер қосыңыз Әрі қарай Pizazz үшін
Көптеген веб-сайттарда тақырыптың, әдетте сайттың атауы және графикалық сипаттамалары бар беттің жоғарғы жағындағы тақырып бөлімі бар. Көптеген дизайнерлер бұл туралы екі бөлек нәрсе деп ойлайды, бірақ сізге қажет емес. Егер графика тек тақырыпты безендіру үшін болса, онда неге оны тақырып мәнерлеріне қоспайсыз?
h1 {font: батыл курсив 3м / 1м «Times New Roman», «MS Serif», «New York», serif; background: #fff url («fancyheadline.jpg») қайталау-x төменгі жағы; толтыру: 0.5em 0 90px 0; мәтінді туралау: орталық; маржа: 0; шекарасы төмен: қатты # e7ce00 0.25em; түсі: # e7ce00; }Бұл тақырыпқа арналған қиял - суретімнің 90 пиксельді екенін білемін. Сондықтан 90px (толтыру: 0,5 0 90px 0p;) тақырыбының төменгі жағына толтырдым. Сіз өзіңіз қалаған жеріңізде көрсету үшін тақырыптың мәтінін алу үшін шеттермен, жолдың биіктігімен және толтырумен ойнай аласыз.
Кескіндерді пайдалану кезінде еске түсірудің бір себебі - сіз экрандағы өлшемдер мен құрылғыларға негізделген орналасуымен жауап беретін веб-сайты бар болса, сіз әрқашан бірдей өлшемде болмайсыз. Егер сіздің тақырыбыңыз нақты мөлшерге ие болса, бұл проблема тудыруы мүмкін. Бұл, әдетте, әңгімедегі фондық суреттерден аулақ болудың себептерінің бірі.
Тақырыптардағы суретті ауыстыру
Бұл веб-дизайнерлер үшін тағы бір танымал әдіс болып табылады, себебі ол графикалық тақырыпты жасауға және тақырыптық мәтіннің мәтінін сол суретке ауыстыруға мүмкіндік береді. Бұл шын мәнінде веб-дизайнерлердің өте аз шрифттерге қол жеткізуі және олардың жұмысында көбірек экзотикалық қаріптерді қолданғысы келетін антигенді тәжірибе. Веб-қаріптердің өсуі дизайнерлердің сайттарға қалай жақындатқанын өзгертті. Енді ендірілген қаріптерді қажет етпейтін тақырыптар енді әр түрлі қаріптер мен кескіндерге орнатылуы мүмкін. Осылайша, сіз көне заманғы тәжірибелерге әлі жаңартылмаған ескі сайттардағы мақалалар үшін CSS суреттерін ғана табасыз.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard, 9/6/17 жылы өңдеген