"العنوان" ، أو الجزء العلوي من صفحة الويب ، يجعل موقعك فريدًا ، ويسمح له بالاختلاف عن الآخرين ويعكس تفاصيل مشروع الإنترنت الخاص بك. بمساعدة رأس أصلي وجيد الصنع ، يمكنك تزيين أي صفحة ويب وتحسينها ، ومن أجل إنشاء الرأس بنفسك ، تحتاج إلى معرفة كيفية تخطيط عنصر الويب هذا.
تعليمات
الخطوة 1
إذا كنت تريد أن يكون لموقعك أبعاد ثابتة وثابتة ، فأنت بحاجة إلى إنشاء رأس ثابت لا يتغير اعتمادًا على التغيير في عرض الشاشة. حدد عرض الرأس وارتفاعه (على سبيل المثال ، 996 × 230) وأدخل صورة خلفية في الكتلة العلوية باستخدام كود CSS التالي ، حيث يمثل header-1.jpg
الخلفية: # a6b7d3 url (img / header-1.jpg) لا تكرار ؛
العرض: 996 بكسل ؛
الارتفاع: 230 بكسل ؛
} سيبدو كود HTML الخاص برأس من هذا النوع بالشكل التالي:
الخطوة 2
إذا تم إنشاء الموقع بطريقة يتم فيها ضبط أبعاده على عرض الشاشة ، فيجب إعداد الرأس مع مراعاة جميع درجات دقة الشاشة الرئيسية. يجب أن يكون الحد الأقصى لعرض هذا الرأس 1920 بكسل. لإدراج مثل هذا الرأس ، استخدم كود CSS: #header {background: # a6b7d3 url (img / header-2.jpg) no-repet center؛ height: 250px؛} كود HTML في هذه الحالة يشبه الرمز السابق. تم تغيير كود CSS في بعض المعلمات - الآن لديه سمة لتوسيط صورة الرأس ، مما يسمح لها بملاءمة الخلفية لأي عرض للشاشة.
الخطوه 3
يمكنك أيضًا إنشاء رأس أكثر تعقيدًا ، مقسمًا إلى عدة كتل خلفية ، والتي ستغير موضعها وفقًا لحجم منفذ العرض. يعتبر CSS لمثل هذا الرأس أكثر تعقيدًا واتساعًا ، ويتضمن تكرار العديد من عناصر الخلفية وفقًا للأبعاد العائمة لنافذة المتصفح التي يمكن عرض موقعك فيها.
