توزيع إستايل متمدد ذو أعمدة متصلة بالهيدر إلى الفوتر بتقنية







السلام عليكم ورحمة الله وبركاته
 نستمر معكم بدروس توزيع الإستايلات بتقنية الـCss الحديثة واليوم بنأخذ كيفية توزيع إستايل ذو أعمدة متصلة بالهيدر إلى الفوتر وكيف التعامل مع الكلاسات وكيفية التركيب وإلخ إلخ طرحت هذأ الدرس للأسئلة الشديدة عن عملية التوزيع لهذأ الإستايل صورة توضيحية لطريقة التقطيع في الفوتوشوب



نأتي ونوضع النقاط على الحروف ..

تقطيع الهيدر بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
========================================
تقطيع الفوتر بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
=========================================
تقطيع الأعمدة اليمنى واليسرى بيكون بالشكل التالي ..
1 / مثل ماهو موضح بصورة النموذج بالأعلى ..
=========================================

الكلاسات اللازمة لعملية التوزيع وهيا كالتالي ..

بدايتاً نبدأً بالكلاسات :
رمز PHP:
<div id="Heder_tmdd"><!-- كلاس تمدد الهيدر -->
<
div class="hedr_right"></div><!-- كلاس صورة اليمنى للـ الهيدر -->
<
div class="hedr_left"></div><!-- كلاس صورة اليسري للـ الهيدر -->
</
div>


<
div class="t1"><!-- كلاس تمدد العامود الأيمين -->
<
div class="t2"><!-- كلاس تمدد العامود الأيسر -->
<!-- 
ملاحظة مهمة لابد بأن تضع نهايات الداف </divأسفل العمل -->
</
div><!-- هذه -->
</
div><!-- هذه -->


<
div id="Foter_tmdd"><!-- كلاس تمدد الفوتر -->
<
div class="Foter_right"></div><!-- كلاس صورة اليمنى للـ الفوتر -->
<
div class="Foter_left"></div><!-- كلاس صورة اليسري للـ الفوتر -->
</
div
طبعاً للمعلومية تكتب الكلاسات بين الوسم ..
رمز PHP:
<body>
</
body
والأن ننتقل إلى كتابة خصائص الـCss ..
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :
رمز PHP:
#Heder_tmdd {
    
background-imageurl('Wrdh_alorcedh/t3ter/h-h-bg.jpg');
    
background-repeatrepeat-x;
    
height66px;
}
.
hedr_right{
    
background-imageurl('Wrdh_alorcedh/t3ter/h-h-l.gif');
    
background-repeatno-repeat;
    
height66px;
    
width203px;
    
float:right;
}
.
hedr_left {
    
background-imageurl('Wrdh_alorcedh/t3ter/h-h-r.jpg');
    
background-repeatno-repeat;
    
height66px;
    
width235px;
    
float:left;
}
.
t1 {
    
background-imageurl('Wrdh_alorcedh/t3ter/t1.jpg');
    
background-repeatrepeat-y;
    
background-position:right;
    
padding-left37px;
}
.
t2 {
    
background-imageurl('Wrdh_alorcedh/t3ter/t2.jpg');
    
background-repeatrepeat-y;
    
background-position:left;
    
padding-right34px;
}
#Foter_tmdd {
    
background-imageurl('Wrdh_alorcedh/t3ter/f-f-bg.jpg');
    
background-repeatrepeat-x;
    
height60px;
}
.
Foter_right {


    
background-imageurl('Wrdh_alorcedh/t3ter/f-f-r.gif');
    
background-repeatno-repeat;
    
height60px;
    
width235px;
    
floatright;
}
.
Foter_left {
    
background-imageurl('Wrdh_alorcedh/t3ter/f-f-l.gif');
    
background-repeatno-repeat;
    
height60px;
    
width203px;
    
floatleft;

=========================================

طريقة تركيبه في منتديات الـ Vb .

أولا نتوجه إلى التالي --
التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> header --> ثم نقوم بحذف الأكواد الموجودة بين التعلقات التالية ..
رمز PHP:
<!-- logo -->
<!-- /
logo --> 
ونتوجه إلى كلاسات الهيدر + كلاسات الأعمدة ( دون أخذ نهاياة الداف ) .. ونضعها بين التعليفات الموجوده أعلاه ليصبح الكود هكذأ ..
رمز PHP:
<div id="Heder_tmdd"><!-- كلاس تمدد الهيدر -->
<
div class="hedr_right"></div><!-- كلاس صورة اليمنى للـ الهيدر -->
<
div class="hedr_left"></div><!-- كلاس صورة اليسري للـ الهيدر -->
</
div>


<
div class="t1"><!-- كلاس تمدد العامود الأيمين -->
<
div class="t2"><!-- كلاس تمدد العامود الأيسر -->
<!-- 
ملاحظة مهمة لابد بأن تضع نهايات الداف </divأسفل العمل -->
<!-- /
logo --> 
ومن ثم حفظ ..

التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> footer -->
نبحث في هذأ القالب عن التالي :
رمز PHP:
</script> 
نضع بعده مباشرة الكلاسات التالية :
رمز PHP:
</div><!-- هذه -->
</
div><!-- هذه -->


<
div id="Foter_tmdd"><!-- كلاس تمدد الفوتر -->
<
div class="Foter_right"></div><!-- كلاس صورة اليمنى للـ الفوتر -->
<
div class="Foter_left"></div><!-- كلاس صورة اليسري للـ الفوتر -->
</
div
ومن ثم حفظ ..~

وإلى هنا والسلام عليكم ورحمة الله وبركاته

فإن أصبت فمن الله وإن أخطأت فمن الشيطان

بالتوفيق


المصدر :
http://forum.swalifcam.com/showthread.php?t=624


http://www.traidnt.net/vb/showthread.php?t=1740954