انشاء هيدر وفوتر بأكواد جاهزة html&css

انشاء هيدر وفوتر بأكواد جاهزة html&css, الكثير يود ان يقوم بالتعلم على الاكواد واستخدامها ومنا من يكون في باله افكار يريد تنفيذها ولكنه لا يتسطيع التكويد والمميز في شركة انكور التطويرية.

اننا نقدم لكم اكواد جاهزة لتقوم بتركيب وتشكيل ما تريدون دون شروحات او غيرها وفي هذا الموضوع أقدم لكم اكواد html و css لهيدر وفوتر جاهزين كل ما عليك فقط التصميم وتقطيع التصميم ليتناسب معها.

ملاحظة : يجب ان يكون لديك فكرة لمكان وضع الاكواد حتى تقوم بتركيبه بالطريقة الصحيحة

قالب الهيدر

في البداية سأضع لكم اكواد الـ css لان الكود يعتمد عليها بشكل اساسي ومنها يمكنكم التحكم بحجم صور الهيدر وسيكون مكان رابط الصورة شرح لمكان وضع الصور للتسهيل عليكم.

والهيدر عبارة عن 3 صور (يمين – يسار – تمدد)

التمدد هو الذي سيظهر على طول الصفحة ويشبك الصورة اليمين واليسار مع بعضها لذا يفضل ان يكون شكل او لون واحد يمكن ان يتكرر ليكون المظهر جيد ضع التالي في مكان الـ css في موقعك.

#header {
   height: 213px;
   background-image:url('التمدد');
   background-repeat: repeat-x;
}
#header .right{
   height: 213px;
   width: 333px;
   background-image:url('هيدر يمين');
   float: right;
   background-repeat: no-repeat;
   
}
#header .left {
   height: 213px;
   width: 434px;
   float: left;
   background-image:url('هيدر شمال');
}

ومن ثم ضع الكود التالي في المكان الذي تريد ظهور الهيدر فيه

<div id="header"> 
<div class="right"></div> 
<div class="left"></div> 
</div> 

والان كل اللي عليك تستبدل الفراغات الظاهرة بالصور الخاصة بالهيدر حسب ما هو موضح

قالب الفوتر

سأعرضه كما الهيدر مع اضافة صورة بالوسط في حال اردت وضع الشعار بالوسط يعني الفوتر 4 صور (يمين – يسار تمدد – وسط)

ويمكنك الاستغناء عن صورة منهم الا التمدد طبعا ضع هذا الكود في منطقة اكواد الـ css

#do {
   height: 79px;
   background-image:url('تمدد الفوتر');
   background-repeat: repeat-x;
}
#do .right{
   float: right;
   height: 79px;
   width: 126px;
   background-image:url('فوتر يمين');
   background-repeat: no-repeat;
}
#do .left{
   float: left;
   height: 79px;
   width: 143px;
   background-image:url('الفوتر شمال');
   background-repeat: no-repeat;
}
#do .middle {
   background-image:url('فوتر الوسط ليس من الضروري وضعه');
   height:79px;
   width: 257px;
   margin-right: auto;
   margin-left: auto;
}

وهذا الكود في المكان المخصص للفوتر

<div id="do">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>