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

[Admin]

بسم الله الرحمن الرحيم



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

الكثير يود ان يقوم بالتعلم على الاكواد واستخدامها ومنا من يكون في باله افكار يريد تنفيذها ولكنه لا يتسطيع التكويد والمميز في شركة انكور التطويرية

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

كل ما عليك فقط التصميم وتقطيع التصميم ليتناسب معها



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

قالب الـ Header

في البداية سأضع لكم اكواد الـ 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> 

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

قالب الـ Footer

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

يعني الفوتر 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>

انتهى الشرح وان شاء الله أكون أفدتكم

الشرح من شركة انكور التطويرية والاكواد من منتدى الابداع العربي

بالتوفيق للجميع

والسلام ختام​

 

[zoolraqey]

جزاك الله خيرا على المواضيع الحصرية 

نتمنى ان تستمر في ذلك 

 

[مهدي حميد]

مبدع دائماً

 

[العراقي الطائي]

الشكر الجزيل لكل افكاركم