admin
10-30-2013, بتوقيت غرينيتش 08:49 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط¯ط±ط³ : طھظˆط²ظٹط¹ ط¥ط³طھط§ظٹظ„ ظ…طھظ…ط¯ط¯ ط°ظˆ ط£ط¹ظ…ط¯ط© ظ…طھطµظ„ط© ط¨ط§ظ„ظ‡ظٹط¯ط± ط¥ظ„ظ‰ ط§ظ„ظپظˆطھط± ط¨طھظ‚ظ†ظٹط© Css.. (http://www.dzbatna.com/t1740954/)
..~ السلام عليكم ورحمة الله وبركاته ~ ..
نستمر معكم بدروس توزيع الإستايل styleات بتقنية الـCss الحديثة ..
واليوم بنأخذ كيفية توزيع إستايل style ذو أعمدة متصلة بالهيدر header إلى الفوتر ..
وكيف التعامل مع الكلاسات وكيفية التركيب install وإلخ إلخ ..
طرحت هذأ الدرس مفصل للأسئلة الشديدة عن عملية التوزيع لهذأ الإستايل style ..~
صورة توضيحية لطريقة التقطيع في الفوتوشوب ..
http://upload.dzbatna.net/upfiles/hEg54872.jpg
نأتي ونوضع النقاط على الحروف ..
تقطيع الهيدر header بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
========================================
تقطيع الفوتر بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
=========================================
تقطيع الأعمدة اليمنى واليسرى بيكون بالشكل التالي ..
1 / مثل ماهو موضح بصورة النموذج بالأعلى ..
=========================================
الكلاسات اللازمة لعملية التوزيع وهيا كالتالي ..
بدايتاً نبدأً بالكلاسات :
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="Heder_tmdd"><!-- كلاس تمدد الهيدر header -->
<div class="hedr_right"></div><!-- كلاس صورة اليمنى للـ الهيدر header -->
<div class="hedr_left"></div><!-- كلاس صورة اليسري للـ الهيدر header -->
</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>
</code> </code>
طبعاً للمعلومية تكتب الكلاسات بين الوسم ..
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
</body>
</code> </code>
والأن ننتقل إلى كتابة خصائص الـCss ..
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :
رمز PHP:
<code style="white-space:nowrap"> <code> #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;
}
</code> </code>
=========================================
طريقة تركيب installه في منتديات الـ Vb .
أولا نتوجه إلى التالي --
التحكم بالإستايل styleات --> البحث في القوالب --> إختار الإستايل style المراد التعديل عليه --> إكتب إسم القالب template التالي --> header --> ثم نقوم بحذف الأكواد الموجودة بين التعلقات التالية ..
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- logo -->
<!-- /logo -->
</code> </code>
ونتوجه إلى كلاسات الهيدر header + كلاسات الأعمدة ( دون أخذ نهاياة الداف ) .. ونضعها بين التعليفات الموجوده أعلاه ليصبح الكود code هكذأ ..
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="Heder_tmdd"><!-- كلاس تمدد الهيدر header -->
<div class="hedr_right"></div><!-- كلاس صورة اليمنى للـ الهيدر header -->
<div class="hedr_left"></div><!-- كلاس صورة اليسري للـ الهيدر header -->
</div>
<div class="t1"><!-- كلاس تمدد العامود الأيمين -->
<div class="t2"><!-- كلاس تمدد العامود الأيسر -->
<!-- ملاحظة مهمة : لابد بأن تضع نهايات الداف </div> أسفل العمل -->
<!-- /logo -->
</code> </code>
ومن ثم حفظ ..
التحكم بالإستايل styleات --> البحث في القوالب --> إختار الإستايل style المراد التعديل عليه --> إكتب إسم القالب template التالي --> footer -->
نبحث في هذأ القالب template عن التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> </script>
</code> </code>
نضع بعده مباشرة الكلاسات التالية :
رمز PHP:
<code style="white-space:nowrap"> <code> </div><!-- هذه -->
</div><!-- هذه -->
<div id="Foter_tmdd"><!-- كلاس تمدد الفوتر -->
<div class="Foter_right"></div><!-- كلاس صورة اليمنى للـ الفوتر -->
<div class="Foter_left"></div><!-- كلاس صورة اليسري للـ الفوتر -->
</div>
</code> </code>
ومن ثم حفظ ..~
وإلى هنا والسلام عليكم ورحمة الله وبركاته
فإن أصبت فمن الله وإن أخطأت فمن الشيطان
بالتوفيق
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
..~ السلام عليكم ورحمة الله وبركاته ~ ..
نستمر معكم بدروس توزيع الإستايل styleات بتقنية الـCss الحديثة ..
واليوم بنأخذ كيفية توزيع إستايل style ذو أعمدة متصلة بالهيدر header إلى الفوتر ..
وكيف التعامل مع الكلاسات وكيفية التركيب install وإلخ إلخ ..
طرحت هذأ الدرس مفصل للأسئلة الشديدة عن عملية التوزيع لهذأ الإستايل style ..~
صورة توضيحية لطريقة التقطيع في الفوتوشوب ..
http://upload.dzbatna.net/upfiles/hEg54872.jpg
نأتي ونوضع النقاط على الحروف ..
تقطيع الهيدر header بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
========================================
تقطيع الفوتر بيكون بالشكل التالي ..
1 / صورة تجميلية يمنى ..
2 / صورة تجميلية يسرى ..
3 / صورة وسطى نأخذها لكي تتم عملية التمدد ..
=========================================
تقطيع الأعمدة اليمنى واليسرى بيكون بالشكل التالي ..
1 / مثل ماهو موضح بصورة النموذج بالأعلى ..
=========================================
الكلاسات اللازمة لعملية التوزيع وهيا كالتالي ..
بدايتاً نبدأً بالكلاسات :
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="Heder_tmdd"><!-- كلاس تمدد الهيدر header -->
<div class="hedr_right"></div><!-- كلاس صورة اليمنى للـ الهيدر header -->
<div class="hedr_left"></div><!-- كلاس صورة اليسري للـ الهيدر header -->
</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>
</code> </code>
طبعاً للمعلومية تكتب الكلاسات بين الوسم ..
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
</body>
</code> </code>
والأن ننتقل إلى كتابة خصائص الـCss ..
وهيا كالتالي مع مراعاة تغير مسارات الصور + الطول + العرض :
رمز PHP:
<code style="white-space:nowrap"> <code> #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;
}
</code> </code>
=========================================
طريقة تركيب installه في منتديات الـ Vb .
أولا نتوجه إلى التالي --
التحكم بالإستايل styleات --> البحث في القوالب --> إختار الإستايل style المراد التعديل عليه --> إكتب إسم القالب template التالي --> header --> ثم نقوم بحذف الأكواد الموجودة بين التعلقات التالية ..
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- logo -->
<!-- /logo -->
</code> </code>
ونتوجه إلى كلاسات الهيدر header + كلاسات الأعمدة ( دون أخذ نهاياة الداف ) .. ونضعها بين التعليفات الموجوده أعلاه ليصبح الكود code هكذأ ..
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="Heder_tmdd"><!-- كلاس تمدد الهيدر header -->
<div class="hedr_right"></div><!-- كلاس صورة اليمنى للـ الهيدر header -->
<div class="hedr_left"></div><!-- كلاس صورة اليسري للـ الهيدر header -->
</div>
<div class="t1"><!-- كلاس تمدد العامود الأيمين -->
<div class="t2"><!-- كلاس تمدد العامود الأيسر -->
<!-- ملاحظة مهمة : لابد بأن تضع نهايات الداف </div> أسفل العمل -->
<!-- /logo -->
</code> </code>
ومن ثم حفظ ..
التحكم بالإستايل styleات --> البحث في القوالب --> إختار الإستايل style المراد التعديل عليه --> إكتب إسم القالب template التالي --> footer -->
نبحث في هذأ القالب template عن التالي :
رمز PHP:
<code style="white-space:nowrap"> <code> </script>
</code> </code>
نضع بعده مباشرة الكلاسات التالية :
رمز PHP:
<code style="white-space:nowrap"> <code> </div><!-- هذه -->
</div><!-- هذه -->
<div id="Foter_tmdd"><!-- كلاس تمدد الفوتر -->
<div class="Foter_right"></div><!-- كلاس صورة اليمنى للـ الفوتر -->
<div class="Foter_left"></div><!-- كلاس صورة اليسري للـ الفوتر -->
</div>
</code> </code>
ومن ثم حفظ ..~
وإلى هنا والسلام عليكم ورحمة الله وبركاته
فإن أصبت فمن الله وإن أخطأت فمن الشيطان
بالتوفيق
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
