השתמש בגופנים, גבולות ותמונות כדי לקשט כותרות
כותרות נפוצות ברוב דפי האינטרנט. למעשה, כמעט כל מסמך טקסט נוטה להיות לפחות כותרת אחת, כך שאתה יודע את הכותרת של מה שאתה קורא. כותרות אלה מקודדות באמצעות אלמנטים כותרת HTML - h1, h2, h3, h4, h5 ו- h6.
באתרים מסוימים, ייתכן שתגלה כי כותרות מקודדות ללא שימוש באלמנטים אלה. במקום זאת, כותרות עשויות להשתמש בפסקאות בעלות תכונות מחלקה ספציפיות שנוספו להן, או לחלוקות עם אלמנטים בכיתה. הסיבה לעתים קרובות אני שומע על זה בפועל לא נכון היא כי המעצב "לא אוהב את כותרות הדרך נראה". כברירת מחדל, הכותרות מוצגות בגופן מודגש והן גדולות יותר, במיוחד אלמנטים h1 ו- h2 אשר מוצגים בגודל גופן גדול בהרבה משאר הטקסט. זכור כי זה רק את המראה ברירת המחדל של אלמנטים אלה! עם CSS, אתה יכול להפוך את הכותרת נראה כמו שאתה רוצה! אתה יכול לשנות את גודל הגופן, להסיר את מודגש, ועוד הרבה יותר. הכותרות הן הדרך הנכונה לקידוד כותרות של דף. הנה כמה סיבות מדוע.
למה להשתמש בכותרת תגיות במקום DIVs ו סטיילינג
מנועי חיפוש כמו כותרת תגיות
זוהי הסיבה הטובה ביותר להשתמש כותרות, ולהשתמש בהם בסדר הנכון (כלומר h1, אז h2, אז h3, וכו '). מנועי החיפוש נותנים את הניקוד הגבוה ביותר לטקסט הכלול בתוך תגי הכותרת כי יש ערך סמנטי לטקסט זה. במילים אחרות, על ידי תיוג כותרת הדף שלך H1, אתה אומר את מנוע החיפוש עכביש כי הוא המוקד # 1 של הדף. כותרות H2 יש דגש #, וכן הלאה.
אתה לא צריך לזכור איזה כיתות אתה משמש כדי להגדיר את הכותרות
כאשר אתה יודע כי כל דפי האינטרנט שלך יהיו H1 כי הוא מודגש, 2em, וצהוב, אז אתה יכול להגדיר את זה פעם אחת בגיליון שלך ולהעשות. 6 חודשים לאחר מכן, כאשר אתה מוסיף דף נוסף, אתה רק להוסיף תג H1 בראש הדף שלך, אתה לא צריך לחזור לדפים אחרים כדי לגלות איזה מזהה סגנון או בכיתה השתמשת כדי להגדיר את הראשי כותרת וראשי משנה.
הם מספקים מתאר עמוד חזק
קווי המתאר מאפשרים קריאה קלה יותר של הטקסט. זו הסיבה שרוב בתי הספר בארה"ב לימדו סטודנטים לכתוב מתאר לפני שהם כותבים את המאמר. כאשר אתה משתמש בתגי כותרת בפורמט מתאר, לטקסט שלך יש מבנה ברור שמתגלה במהירות רבה. בנוסף, ישנם כלים שיכולים לסקור את קווי המתאר של הדף כדי לספק תקציר, ואלה מסתמכים על תגי הכותרת עבור מבנה המתאר.
דף שלך ירגיש אפילו עם סגנונות כבוי
לא כל אחד יכול להציג או להשתמש גיליונות סגנון (וזה חוזר # 1 - מנועי החיפוש להציג את התוכן (טקסט) של הדף שלך, לא את הסגנון גיליונות). אם אתה משתמש בתגי כותרת, אתה הופך את הדפים שלך לנגישים יותר, מפני שהכותרות מספקות מידע שתג DIV לא.
זה מועיל עבור קוראי מסך נגישות לאתר
שימוש נכון בכותרות יוצר מבנה לוגי למסמך. זה מה הקוראים מסך ישתמשו כדי "לקרוא" אתר למשתמש עם ליקוי ראייה, מה שהופך את האתר שלך נגיש לאנשים עם מוגבלויות.
סגנון הטקסט וגופן של הכותרות שלך
הדרך הקלה ביותר להתרחק מהבעיה "גדולה, נועזת ומכוערת" של תגי כותרת היא לסגנון את הטקסט כפי שאתה רוצה שהם ייראו. למעשה, כאשר אני עובד על אתר אינטרנט חדש, אני בדרך כלל לכתוב את הסעיף, h1, h2, ו h3 סגנונות הדבר הראשון. אני בדרך כלל מקל עם משפחת גופן רק גודל / משקל. לדוגמה, דף זה עשוי להיות גליון סגנונות ראשוני עבור אתר חדש (אלה הם רק כמה סגנונות לדוגמה שניתן להשתמש בהם):
body, html {margin: 0; ריפוד: 0; } p {font: 1em Arial, Geneva, 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, Geneva, 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 בינוני; הגבול התחתון: מנוקד # e7ce00 רזה; רוחב: 600px; }הוספתי הגבול העליון והתחתון לכותרת המדגם שלי כדי להציג כמה סגנונות חזותיים מעניינים. אתה יכול להוסיף גבולות בכל דרך שאתה רוצה להשיג את סגנון העיצוב הרצוי.
הוסף תמונות רקע לכותרות שלך עוד יותר Pizazz
באתרי אינטרנט רבים יש קטע כותרת בחלק העליון של הדף הכולל כותרת - בדרך כלל כותרת האתר וגרפיקה. רוב המעצבים חושבים על זה כעל שני אלמנטים נפרדים, אבל אתה לא צריך. אם הגרפיקה היא רק כדי לקשט את הכותרת, אז למה לא להוסיף את זה לסגנונות הכותרת?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; רקע: #fff url ("fancyheadline.jpg") חזרה x-bottom; ריפוד: 0.5em 0 90px 0; text-align: center; שוליים: 0; הגבול התחתון: מוצק # e7ce00 0.25em; צבע: # e7ce00; }הטריק לכותרת זו הוא שאני יודע את התמונה שלי היא 90 פיקסלים גבוה. אז הוספתי ריפוד לתחתית הכותרת של 90px (ריפוד: 0.5 0 90px 0p;). אתה יכול לשחק עם השוליים, קו גובה, וריפוד כדי לקבל את הטקסט של הכותרת כדי להציג בדיוק איפה שאתה רוצה את זה.
דבר אחד שיש לזכור בעת שימוש בתמונות הוא שאם יש לך אתר אינטרנט בעל יכולת תגובה (עם מה שאתה צריך) עם פריסה שמשתנה בהתאם לגדלים ומכשירים, הכותרת לא תמיד תהיה באותו גודל. אם אתה צריך את הכותרת להיות בגודל מדויק, זה יכול לגרום לבעיות. זוהי אחת הסיבות מדוע אני בדרך כלל להימנע תמונות רקע בכותרת, מגניב כפי שהם יכולים לפעמים להיראות.
החלפת תמונות בכותרות
זוהי טכניקה פופולארית נוספת עבור מעצבי אתרים משום שהיא מאפשרת לך ליצור כותרת גרפית ולהחליף את הטקסט של תג הכותרת עם התמונה. זה באמת תרגול antiqued מעצבי אינטרנט היה גישה גופנים מעטים מאוד רצה להשתמש גופנים אקזוטיים יותר בעבודתם. העלייה של גופני האינטרנט השתנה באמת איך מעצבים גישה אתרים. כותרות כעת ניתן להגדיר במגוון רחב של גופנים ותמונות עם גופנים אלה מוטבע כבר לא נחוץ. ככזה, תוכלו למצוא רק החלפת תמונות CSS לכותרות באתרים ישנים שעדיין לא עודכנו לשיטות מודרניות יותר.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב- 9/6/17