..~ السلام عليكم ورحمة الله وبركاته ~ ..
نستمر معكم بدروس توزيع الإستايلات بتقنية الـCss الحديثة ..
واليوم بنأخذ كيفية توزيع إستايل ذو أعمدة متصلة بالهيدر إلى الفوتر ..
وكيف التعامل مع الكلاسات وكيفية التركيب وإلخ إلخ ..
طرحت هذأ الدرس للأسئلة الشديدة عن عملية التوزيع لهذأ الإستايل ..~
صورة توضيحية لطريقة التقطيع في الفوتوشوب ..
نأتي ونوضع النقاط على الحروف ..
تقطيع الهيدر بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
========================================
تقطيع الفوتر بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
=========================================
تقطيع الأعمدة اليمنى واليسرى بيكون بالشكل التالي ..
1 / مثل ماهو موضح بصورة النموذج بالأعلى ..
=========================================
الكلاسات اللازمة لعملية التوزيع وهيا كالتالي ..
بدايتاً نبدأً بالكلاسات :
طبعاً للمعلومية تكتب الكلاسات بين الوسم ..
والأن ننتقل إلى كتابة خصائص الـCss ..
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :
=========================================
طريقة تركيبه في منتديات الـ Vb .
أولا نتوجه إلى التالي --
التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> header --> ثم نقوم بحذف الأكواد الموجودة بين التعلقات التالية ..
ونتوجه إلى كلاسات الهيدر + كلاسات الأعمدة ( دون أخذ نهاياة الداف ) .. ونضعها بين التعليفات الموجوده أعلاه ليصبح الكود هكذأ ..
ومن ثم حفظ ..
التحكم بالإستايلات --> البحث في القوالب --> إختار الإستايل المراد التعديل عليه --> إكتب إسم القالب التالي --> footer -->
نبحث في هذأ القالب عن التالي :
نضع بعده مباشرة الكلاسات التالية :
ومن ثم حفظ ..~
وإلى هنا والسلام عليكم ورحمة الله وبركاته
فإن أصبت فمن الله وإن أخطأت فمن الشيطان
بالتوفيق
نستمر معكم بدروس توزيع الإستايلات بتقنية الـ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>
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :
كود 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:
<!-- 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>
ومن ثم حفظ ..~
وإلى هنا والسلام عليكم ورحمة الله وبركاته
فإن أصبت فمن الله وإن أخطأت فمن الشيطان
بالتوفيق
ليست هناك تعليقات:
إرسال تعليق