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






لمشاهدة الروابط يلزمك التسجيل
الكثير يود ان يقوم بالتعلم على الاكواد واستخدامها ومنا من يكون في باله افكار يريد تنفيذها ولكنه لا يتسطيع التكويد والمميز في شركة انكور التطويرية
اننا نقدم لكم اكواد جاهزة لتقوم بتركيب وتشكيل ما تريدون دون شروحات او غيرها وفي هذا الموضوع أقدم لكم اكواد 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>

انتهى الشرح وان شاء الله أكون أفدتكم
الشرح من شركة انكور التطويرية والاكواد من منتدى الابداع العربي
بالتوفيق للجميع
والسلام ختام