برای تزئین سرصفحه از قلمها، مرزها و تصاویر استفاده کنید
سرشماری در اغلب صفحات وب رایج است. در حقیقت، تقریبا هر سند متنی، دارای حداقل یک عنوان است تا شما بتوانید عنوان آنچه را که میخواهید، بدانید. این عناوین با استفاده از عناصر عنوان HTML - h1، h2، h3، h4، h5، و h6 کد گذاری می شوند.
در بعضی از سایت ها ممکن است که عناوین بدون استفاده از این عناصر کد گذاری شوند. در عوض، سرفصل ها ممکن است از پاراگراف ها با ویژگی های کلاس خاص اضافه شده به آنها یا تقسیم با عناصر کلاس استفاده کنند. دلیل این که من اغلب در مورد این عمل نادرست می شنوم این است که طراح "سر و صدا را دوست ندارد" را دوست دارد. به طور پیش فرض، عنوان ها به شکل پررنگ نمایش داده می شوند و در اندازه های بزرگتر هستند، به خصوص عناصر h1 و h2 که در اندازه بزرگتر فونت نسبت به بقیه متن صفحه نمایش داده می شود. به یاد داشته باشید این تنها ظاهر پیش فرض این عناصر است! با استفاده از CSS، شما می توانید نگاه به عنوان اما شما می خواهید! شما می توانید اندازه فونت را تغییر دهید، bold bold را حذف کنید و خیلی بیشتر. عنوان ها راه مناسب برای کد کردن یک عنوان صفحه هستند. این ها چند پاسخ برای چرا هستند.
چرا استفاده از برچسب های عنوان به جای DIVs و یک ظاهر طراحی شده
موتورهای جستجو مانند برچسب های سربرگ
این بهترین دلیل برای استفاده از عنوان ها است و از آنها در جهت درست استفاده کنید (یعنی h1، h2، then h3، و غیره). موتورهای جستجو حداکثر وزن متن را در داخل تگ های عنوان می کنند چون ارزش معنایی آن متن است. به عبارت دیگر، با برچسب صفحه عنوان H1 شما به عنکبوت موتور جستجو می گوید که این تمرکز صفحه 1 است. عنوان های H2 تاکید شماره 2 و غیره دارند.
شما به یاد نمی آورید که چه کلاس هایی را برای تعریف سرفصل ها استفاده می کنید
وقتی می دانید که تمام صفحات وب شما دارای H1 است که bold، 2em و yellow است، پس می توانید یک بار در قالب خود تعریف کنید و انجام شود. 6 ماه بعد، هنگامی که شما یک صفحه دیگر اضافه می کنید، شما فقط یک تگ H1 را به بالای صفحه خود اضافه می کنید، لازم نیست که به صفحات دیگر بازگردید تا مشخص کنید که چه نوع شناسه یا کلاس مورد استفاده برای تعریف اصلی سربرگ و زیر سر.
آنها یک طرح صفحه قوی ارائه می دهند
خطوط را آسانتر می کند تا متن را بخوانند. به همین دلیل اکثر مدارس ایالات متحده به دانشجویان آموزش می دهند تا قبل از نوشتن مقاله، یک طرح کلی بنویسند. هنگامی که از تگ های عنوان در فرمت رئوس مطالب استفاده می کنید، متن شما دارای ساختار واضح است که بسیار سریع ظاهر می شود. به علاوه، ابزارهایی وجود دارد که می توانند طرح خلاصه ای را ارائه دهند تا یک خلاصه را تهیه کنند، و این به تگ های عنوان برای ساختار خطی متکی است.
صفحه شما حتی با وجود اینکه سبک ها خاموش می شوند، حس می کنند
هر کس نمی تواند صفحات سبک را مشاهده یا استفاده کند (و این به # 1 می رسد - موتورهای جستجو، محتوای (متن) صفحه خود را مشاهده می کنند، نه صفحات سبک). اگر از تگ های عنوان استفاده می کنید، صفحات شما را در دسترس تر می کنید زیرا سرفصل ها اطلاعاتی را ارائه می دهند که یک برچسب DIV نیست.
این برای خوانندگان صفحه و دسترسی به وب سایت مفید است
استفاده مناسب از عنوانها یک ساختار منطقی برای یک سند ایجاد می کند. این چیزی است که خوانندگان روی صفحه برای خواندن یک سایت برای کاربر با نقص دید، استفاده می کنند و سایت شما را برای افراد معلول در دسترس قرار می دهد.
سبک متن و فونت سرفصل های خود را
ساده ترین راه برای دور شدن از مشکل "بزرگ، جسور و زشت" تگ های عنوان این است که سبک متن را به طوری که می خواهید آنها را نگاه کنید. در حقیقت وقتی که من در یک وب سایت جدید کار می کنم، معمولا ابتدا قصد پاراگراف، h1، h2 و h3 را می نویسم. من معمولا فقط با خانواده فونت و اندازه / وزن است. به عنوان مثال، این ممکن است یک ورق سبک اولیه برای یک سایت جدید باشد (اینها فقط برخی از نمونه هایی است که می توان استفاده کرد):
بدن، html {margin: 0؛ padding: 0؛ } p {font: 1em Arial، Geneva، Helvetica، sans-serif؛ } h1 {font: bold 2em "Times New Roman"، بار، serif؛ } h2 {font: bold 1.5em "Times New Roman"، بار، serif؛ } h3 {font: bold 1.2em Arial، Geneva، Helvetica، sans-serif؛ }شما می توانید فونت های عنوان خود را تغییر دهید یا سبک متن یا حتی رنگ متن را تغییر دهید . همه این ها، عنوان "زشت" خود را به چیزی پر جنب و جوش و متناسب با طراحی شما تبدیل می کنند.
h1 {font: bold italic 2em / 1em "Times New Roman"، "MS Serif"، "نیویورک"، serif؛ حاشیه: 0؛ padding: 0؛ رنگ: # e7ce00؛ }مرزها می توانند سرصفحه را پوشانند
مرزها یک راه عالی برای بهبود سرفصل های شما هستند. و مرزها آسان است برای اضافه کردن. اما فراموش نکنید که با مرزها آزمایش کنید - شما به هر طرف از تیتر شما نیاز به یک مرز ندارد. و شما می توانید بیش از مرزهای خسته کننده ساده استفاده کنید.
h1 {font: bold italic 2em / 1em "Times New Roman"، "MS Serif"، "نیویورک"، serif؛ حاشیه: 0؛ padding: 0؛ رنگ: # e7ce00؛ border-top: solid # e7ce00 medium؛ border-bottom: dotted # e7ce00 نازک؛ عرض: 600px؛ }من یک مرز بالا و پایین را به عنوان نمونه اضافه کردم تا برخی از سبکهای بصری جالب را معرفی کنم. شما می توانید مرزهایی را به هر نحوی که میخواهید به سبک طراحیی که می خواهید برسانید اضافه کنید.
اضافه کردن تصاویر پس زمینه به عنوان های خود را برای Pizazz حتی بیشتر
بسیاری از وب سایت ها دارای بخش هدر در بالای صفحه است که شامل یک عنوان می شود - معمولا عنوان سایت و یک گرافیک. اکثر طراحان از این به عنوان دو عنصر جداگانه فکر می کنند، اما شما مجبور نیستید. اگر گرافیک وجود دارد فقط برای تزئین عنوان، پس چرا آن را به سبک عنوان اضافه نمی کند؟
h1 {فونت: bold italic 3em / 1em "Times New Roman"، "MS Serif"، "نیویورک"، serif؛ پس زمینه: #fff url ("fancyheadline.jpg") تکرار-x پایین؛ padding: 0.5em 0 90px 0؛ متن تراز: مرکز؛ حاشیه: 0؛ border-bottom: solid # e7ce00 0.25em؛ رنگ: # e7ce00؛ }ترفند به این موضوع این است که من می دانم تصویر من 90 پیکسل بلند است. بنابراین من به سطوح 90px (padding: 0.5 0 90px 0p؛) اضافه کردم. شما می توانید با حاشیه، خط ارتفاع و بالشتک بازی کنید تا متن عنوان را برای نشان دادن دقیقا همان جایی که می خواهید آن را داشته باشید.
یکی از چیزهایی که باید هنگام استفاده از تصاویر یادآوری کرد، این است که اگر یک وبسایت پاسخگو (که باید آن را داشته باشید) با یک طرح که براساس اندازه صفحه نمایش و دستگاه تغییر می کند، عنوان شما همیشه یکسان نیست. اگر شما به عناوین دقیق خود نیاز دارید، می توانید مشکلات ایجاد کنید. این یکی از دلایلی است که من به طور کلی از تصاویر پس زمینه در یک عنوان جلوگیری می کنم، همانطور که گاهی اوقات به نظر می رسد.
جایگزینی تصویر در سرفصلها
این یک تکنیک محبوب دیگر برای طراحان وب است؛ زیرا به شما اجازه می دهد یک عنوان گرافیکی ایجاد کنید و متن تگ عنوان را با آن تصویر جایگزین کنید. این درست است که یک تمرین قدیمی از طراحان وب به چندین فونت دسترسی پیدا کرده بود و می خواست از قلم های عجیب و غریب بیشتری در کار خود استفاده کنند. ظهور فونت های وب واقعا تغییر کرده است که چگونه طراحان به سایت ها نزدیک می شوند. سرفصل ها اکنون می توانند در طیف وسیعی از فونت ها تنظیم شوند و تصاویر با آن فونت های تعبیه شده دیگر مورد نیاز نیست. به همین ترتیب، شما فقط جایگزین تصاویر CSS را برای سرفصل های در سایت های قدیمی تر پیدا خواهید کرد که هنوز به شیوه های مدرن تر به روز نشده اند.
مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 9/6/17