الدرس الرابع : تصميم الترويسه والمحتوى الذيل (Header , content , footer)

السلام عليكم

في هذا الدرس سنقوم بتوضيح معالم الموقع أكثر .. الترويسه (header) متمثله لدينا في طبقتين متداخلتين وهما الأم (wrapper_header) والإبنه الصغيره (header)

تداخل الطبقات وانشاء المزيد منها له أهميه في إعطاء مرونه لإمكانيه التصميم فمن خلال هاتين الطبقتين (divs) يمكننا عمل مزيج من الصور لإنشاء تصميم جميل قابل للتغير ولا ننسى استخدام صور لها قورمات png لأن هذا النوع من الصور له درجه وضوح عاليه ويمكن أن يكون شفاف مثل gif ولكن gif ليس له درجه وضوح وكان يستخدم لوجود سرعات إنترنت متدنيه أما الآن فالسرعات تتحمل صور png بكل سهوله

لن نحتاج إلى شرح ماذا سنستخدم لإظهار وتنسيق الهيدر وباقي أجزاء الموقع فلن نحتاج إلا إلى تحديد الإرتفاع (height) ليصبح التنسيق كما يلي :

 /*header*/
  .wrapper_header{
    height: 200px;
    background: #999;
  }

  /*Content*/
  .wrapper_content{
    min-height: 400px;
    background: #777;
  }

/*Footer*/
.wrapper_footer{
    height: 200px;
    background: #444;
}

صور توضيحيه لشكل الموقع الآن

الآن سنقوم بتعديل أماكن نموذج البحث من خلال خصائص فوق ويمين (top,right, left, bottom)

.search_area{
    position: relative;
    background-image: url(images/search.png);
    height: 44px;
    width: 233px;
    top:1px; /*<<<*/
    left:700px;  /*<<<*/
    }

كذلك الحال بالنسبه للقائمة الرئيسيه , ونلاحظ أن الموقع من الأعلى يوجد فراغ وهو محاذاه إفتراضيه لذلك نقوم بجعل المحاذاه صفر (padding, margin) لجسم الموقع (body)

body{
  background: #333;
  padding: 0;
  margin: 0;
}

أيضا نلاحظ أن النص داخل المحتوى والذيل ملتصق مع حدود تصميم الموقع ويمكن أستخدام الطبقه الداخليه وتغيير المحاذاه الداخليه لها (padding) كما يلي

  .main_content{
    padding: 10px;
  }
#footer{
  padding: 10px;
}

التصميم الأن أصبح كالتالي :

الدرس مرفق

l4.rar

العودة إلى قائمة الدروس