..~ السلام عليكم ورحمة الله وبركاته ~ ..
نستمر معكم بدروس توزيع الإستايلات بتقنية الـ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 id="Foter_tmdd">
<div class="Foter_right">div>
<div class="Foter_left">div>
div>
طبعاً للمعلومية تكتب الكلاسات بين الوسم ..
رمز PHP:
<body>
body>
والأن ننتقل إلى كتابة خصائص الـCss ..
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :
رمز PHP:
#Heder_tmdd {
background-image: url('Wrdh_alorcedh/t3ter/h-h-bg.jpg');
background-repeat: repeat-x;
height: 66px;
}
.hedr_right{
background-image: url('Wrdh_alorcedh/t3ter/h-h-l.gif');
background-repeat: no-repeat;
height: 66px;
width: 203px;
float:right;
}
.hedr_left {
background-image: url('Wrdh_alorcedh/t3ter/h-h-r.jpg');
background-repeat: no-repeat;
height: 66px;
width: 235px;
float:left;
}
.t1 {
background-image: url('Wrdh_alorcedh/t3ter/t1.jpg');
background-repeat: repeat-y;
background-position:right;
padding-right: 37px;
}
.t2 {
background-image: url('Wrdh_alorcedh/t3ter/t2.jpg');
background-repeat: repeat-y;
background-position:left;
padding-left: 34px;
}
#Foter_tmdd {
background-image: url('Wrdh_alorcedh/t3ter/f-f-bg.jpg');
background-repeat: repeat-x;
height: 60px;
}
.Foter_right {
background-image: url('Wrdh_alorcedh/t3ter/f-f-r.gif');
background-repeat: no-repeat;
height: 60px;
width: 235px;
float: right;
}
.Foter_left {
background-image: url('Wrdh_alorcedh/t3ter/f-f-l.gif');
background-repeat: no-repeat;
height: 60px;
width: 203px;
float: left;
}
=========================================
طريقة تركيبه في منتديات الـ Vb .
أولا نتوجه إلى التالي --
التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> header --> ثم نقوم بحذف الأكواد الموجودة بين التعلقات التالية ..
رمز PHP:
ونتوجه إلى كلاسات الهيدر + كلاسات الأعمدة ( دون أخذ نهاياة الداف ) .. ونضعها بين التعليفات الموجوده أعلاه ليصبح الكود هكذأ ..
رمز PHP:
<div id="Heder_tmdd">
<div class="hedr_right">div>
<div class="hedr_left">div>
div>
<div class="t1">
<div class="t2">
ومن ثم حفظ ..
التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> footer -->
نبحث في هذأ القالب عن التالي :
رمز PHP:
نضع بعده مباشرة الكلاسات التالية :
رمز PHP:
div>
div>
<div id="Foter_tmdd">
<div class="Foter_right">div>
<div class="Foter_left">div>
div>
ومن ثم حفظ ..~
وإلى هنا والسلام عليكم ورحمة الله وبركاته
فإن أصبت فمن الله وإن أخطأت فمن الشيطان
بالتوفيق 
