جعل عناوين نزوة مع المغلق

استخدم الخطوط والحدود والصور لتزيين العناوين

العناوين الرئيسية شائعة في معظم صفحات الويب. في الواقع ، يميل أي نص إلى حد كبير إلى أن يحتوي على عنوان واحد على الأقل حتى تعرف عنوان ما تقرأه. يتم ترميز هذه العناوين باستخدام عناصر عنوان HTML - h1 و h2 و h3 و h4 و h5 و h6.

في بعض المواقع ، قد تجد أن العناوين يتم ترميزها دون استخدام هذه العناصر. بدلاً من ذلك ، قد تستخدم العناوين عناوين تحتوي على سمات معينة لفئة معينة ، أو أقسام بها عناصر فئة. السبب الذي غالبا ما أسمع عن هذه الممارسة غير الصحيحة هو أن المصمم "لا يحب الطريقة التي تبدو بها العناوين". بشكل افتراضي ، يتم عرض العناوين بالخط العريض وتكون أكبر في الحجم ، خاصةً عناصر h1 و h2 التي يتم عرضها بحجم خط أكبر بكثير من باقي نص الصفحة. ضع في اعتبارك أن هذا هو المظهر الافتراضي لهذه العناصر فقط! باستخدام CSS ، يمكنك جعل العنوان يبدو كما تريد! يمكنك تغيير حجم الخط وإزالة الخط العريض ، وأكثر من ذلك بكثير. العناوين هي الطريقة الصحيحة لترميز عناوين الصفحة. فيما يلي بعض الأسباب.

لماذا استخدام العلامات الرأسية بدلا من DIVs والتصميم

محركات البحث مثل العناوين

هذا هو أفضل سبب لاستخدام العناوين ، واستخدامها بالترتيب الصحيح (مثل h1 ، ثم h2 ، ثم h3 ، إلخ.). تعطي محركات البحث أعلى ترجيح للنص المضمن داخل علامات العنوان لأن هناك قيمة دلالية لهذا النص. بمعنى آخر ، عن طريق وضع علامة على عنوان الصفحة H1 ، فأنت تخبر عنكبوت محرك البحث بأن هذا هو التركيز رقم 1 في الصفحة. عناوين H2 ديك تركيز # 2 ، وهلم جرا.

لا يتعين عليك تذكر الفئات التي استخدمتها لتحديد العناوين الخاصة بك

عندما تعرف أن جميع صفحات الويب الخاصة بك سيكون لها H1 بخط غامق ، و 2 em ، وأصفر ، عندئذ يمكنك تعريف ذلك مرة واحدة في ورقة الأنماط الخاصة بك والقيام بها. بعد 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 medium؛ الحد السفلي: منقط # e7ce00 thin؛ العرض: 600 بكسل ؛ }

لقد أضفت حدًا أعلى وأسفل لعنوان العينة الخاص بي لتقديم بعض الأنماط المرئية المثيرة للاهتمام. يمكنك إضافة حدود بأي طريقة تريد تحقيق نمط التصميم الذي تريده.

إضافة صور الخلفية إلى العناوين الخاصة بك لمزيد من بزاز

تحتوي العديد من مواقع الويب على قسم رأس في أعلى الصفحة يتضمن عنوانًا - عادةً عنوان الموقع ورسم. معظم المصممين يفكرون في هذا كعنصران منفصلان ، لكن ليس عليك ذلك. إذا كان الرسم موجودًا فقط لتزيين العنوان ، فلماذا لا تضيفه إلى أنماط العناوين؟

h1 {font: bold italic 3em / 1em "Times New Roman"، "MS Serif"، "New York"، serif؛ الخلفية: #fff url ("fancyheadline.jpg") bottom-x bottom؛ الحشو: 0.5 م 0 90 بكسل × 0 محاذاة النص: مركز؛ الهامش: 0؛ border-bottom: solid # e7ce00 0.25em؛ اللون: # e7ce00. }

تكمن الحيلة في هذا العنوان في أنني أعرف أن طول الصورة 90 بكسل. لذلك أضفت ملء المساحة إلى أسفل عنوان 90px (padding: 0.5 0 90px 0p؛). يمكنك اللعب باستخدام الهوامش وارتفاع الخط والحشو للحصول على نص العنوان للعرض تمامًا في المكان الذي تريده.

شيء واحد يجب تذكره عند استخدام الصور هو أنه إذا كان لديك موقع ويب سريع الاستجابة (والذي يجب عليك) به تخطيط يتغير بناءً على أحجام الشاشة والأجهزة ، فلن يكون العنوان دائمًا بنفس الحجم. إذا كنت تريد أن يكون العنوان هو الحجم الدقيق ، فقد يتسبب ذلك في حدوث مشكلات. إنه أحد الأسباب التي تجعلني أتجنب عمومًا الصور الخلفية في العنوان الرئيسي ، حيث أنها تبدو رائعة في بعض الأحيان.

استبدال الصورة في العناوين

هذا هو أسلوب شائع آخر لمصممي الويب لأنه يسمح لك بإنشاء عنوان رسومي واستبدال نص علامة العنوان بتلك الصورة. هذا هو حقا ممارسة عتيقة من مصممي الويب كان الوصول إلى عدد قليل جدا من الخطوط وأراد استخدام الخطوط أكثر غرابة في عملهم. لقد أدى ارتفاع خطوط الويب إلى تغيير طريقة اقتراب المصممين من المواقع. يمكن الآن تعيين العناوين في مجموعة متنوعة من الخطوط والصور التي لم تعد هناك حاجة لهذه الخطوط المضمنة. على هذا النحو ، لن تجد سوى استبدال صور CSS لعناوين المواقع على المواقع القديمة التي لم يتم تحديثها بعد إلى ممارسات حديثة.

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 9/6/17