السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
كما نعلم وشاهدنا ستايلات الجيل الرابع فقليل ماشاهدنا لها ستايل رباعي الاطراف
اي هيدر وفوتر واعمده جانبيه مرتبطه ببعضها
اليوم نشرح ان شاء الله تعالى تركيب ستايل رباعي الاطراف بخصائص css للجيل الرابع من المنتديات
وبسم الله
الدرس بسيط جدا ومحتاج تركيز بسيط
وعلى فكره طريقة التركيب هذي بامكانك استغلالها للجيل الثالث ايضا
توكلنا على الله
اولا بعد ماسوينا التصميم وانا سويت تصميم على عجل والذوق دمار لكن سويته علشان الدرس
نقطع الاستايل كالمعتاد
الهيدر
صوره يمين وصوره يسار وصورة وسط وصورة خلفيه تمدد
والفوتر نفس الهيدر
وعمود يمين وعمود يسار >ولا راح استطرد عاد بالطريقه كل واحد له طريقته بالتقطيع
الان بعد ماقطعنا نجي للتركيب
نفتح الدريم ويفر ونتجه لمنطقة body ونضيف اكوادنا الي هي اكواد الهتمل الي راح نضيفه بقالب الهيدر والفوتر
طبعا اول شي نبي نضيفه الهيدر
نبدا بخلفية الهيدر طبعا حتى نضع الصور التجميليه فوق الخلفيه
طريقة كتابة الكود
اولا نضيف اي دي ID والصور الي داخل الهيدر الي هي الصور التجميليه راح تكون كلاس class
وفي هالصوره راح اوضح اكثر بالالوان
نشوف اللون الاحمر هذا الاي دي للهيدر وانا اسميته up
اللون الازرق هذا الصور التجميليه للهيدر ونلاحظها كلاسات class
r يمين l يسار c وسط
اللون البرتقالي هذي الاعمده ونلاحظها ايضا كلاسات
وبعد مانخلص كاتبين كود الاعمده نغلق وسم div وطريقته
نضغط على الكيبورد شفت + حرف الدال يخرج علامة اكبر من > بعدين سلاش / وينغلق الوسم
نكرره مرتين وينغلق كامل الكود
اللون الاخضر كود الفوتر وطريقته نفس الهيدر بالضبط
وهذا شرح فلاشي لكتابة الكود وانا طبقت بالهيدر لاختصار المقطع
http://www.aboshdg.net/up/uploads/fi...1c9c4dc0df.swf
الحين خلصنا من كتابة كود الهيدر وبعده نكتب كود الاعمده وهو طبعا كلاسات مثل ماهو واضح بالصوره السابقه
والفوتر نفس الهيدر
وهذا الكود كامل لمن يريده
كود PHP:
<!--بداية الهيدر-->
<div id="up">
<div class="r"></div>
<div class="l"></div>
<div class="c"></div>
</div>
<!--نهاية الهيدر-->
<!--بداية الاعمده-->
<div class="bl">
<div class="br">
<!--نهاية الاعمده-->
<!--بداية الفوتر-->
</div>
</div>
</div>
<div id="do">
<div class="dr"></div>
<div class="dl"></div>
<div class="dc"></div>
</div>
<!--نهاية الفوتر-->
الان خلصنا الهتمل
باقي لنا خصائص css وهي بسيطه جدا
نضع المؤشر على الهيدر ونضغط على اضافة عنصر
وهذا شرح فلاشي لبداية خصائص css
http://www.aboshdg.net/up/uploads/fi...409ca5208e.swf
نلاحظ كيف وضعت المؤشر على الوسم حتى مانكتبه
ونلاحظ الخلفيه نعطيها اتجاه افقي repeat-x
ونلاحظ الصوره اليمنى نعطيها اتجاه لليمين واليسار لليسار والوسطى مانعطيها اتجاه وانما
نعطيها ميرجان يمين ويسار اوتو
كود PHP:
margin-right: auto;
margin-left: auto;
ونضيف بعدها الاعمده وباختلاف بسيط بالنسبه للاتجاه سوف يصبح رأسي بدل الافقي ونستخدم البيدينق
وهذا شرح فلاشي للاعمده
http://www.aboshdg.net/up/uploads/fi...3ab3786a72.swf
نلاحظ الاتجاه واستخدام البيدينق وانا اخترت العمود الايسر والايمن يطبق مثل الايسر باختلاف اتجاه البيدينق والبوستنينق
وهذا كود خصائص css لاستفاده منه
كود PHP:
<!-- شرح أبوشدقcssبداية كود الـ-->
<!--بداية الهيدر-->
#up {
background-image: url(rbaei/images/rb_02.gif);
background-repeat: repeat-x;
height: 135px;
}
#up .r {
background-image: url(rbaei/images/rb_04.gif);
float: right;
height: 135px;
width: 300px;
}
#up .l {
background-image: url(rbaei/images/rb_01.gif);
float: left;
height: 135px;
width: 203px;
}
#up .c {
background-image: url(rbaei/images/rb_03.gif);
height: 135px;
width: 184px;
margin-right: auto;
margin-left: auto;
}
<!--نهاية الهيدر-->
<!--بداية الاعمده-->
.bl {
background-image: url(rbaei/images/rb_06.gif);
background-repeat: repeat-y;
background-position: left;
padding-left: 19px;
}
.br {
background-image: url(rbaei/images/rb_08.gif);
background-repeat: repeat-y;
background-position: right;
padding-right: 19px;
}
<!--نهاية الاعمده-->
<!--بداية الفوتر-->
#do {
background-image: url(rbaei/images/rb_12.gif);
background-repeat: repeat-x;
height: 36px;
}
#do .dr {
background-image: url(rbaei/images/rb_14.gif);
float: right;
height: 36px;
width: 300px;
}
#do .dl {
background-image: url(rbaei/images/rb_11.gif);
float: left;
height: 36px;
width: 180px;
}
#do .dc {
background-image: url(rbaei/images/rb_13.gif);
height: 36px;
width: 193px;
margin-right: auto;
margin-left: auto;
}
<!--نهاية الفوتر-->
<!-- شرح ابوشدقcssنهاية كود الـ -->
الحين نجي للتركيب بالمنتدى ونكون انتهينا
اولا نقوم بوضع كود الـ css بقالبه المخصص
لوحة التحكم
التحكم بالاستايلات
البحث بالقوالب
نبحث عن القالب vbulletin.css ونختار الاستايل المطلوب ونضع باخره كود الـ css مع تغيير روابط الصور
كود PHP:
<!-- شرح أبوشدقcssبداية كود الـ-->
<!--بداية الهيدر-->
#up {
background-image: url(rbaei/images/rb_02.gif);
background-repeat: repeat-x;
height: 135px;
}
#up .r {
background-image: url(rbaei/images/rb_04.gif);
float: right;
height: 135px;
width: 300px;
}
#up .l {
background-image: url(rbaei/images/rb_01.gif);
float: left;
height: 135px;
width: 203px;
}
#up .c {
background-image: url(rbaei/images/rb_03.gif);
height: 135px;
width: 184px;
margin-right: auto;
margin-left: auto;
}
<!--نهاية الهيدر-->
<!--بداية الاعمده-->
.bl {
background-image: url(rbaei/images/rb_06.gif);
background-repeat: repeat-y;
background-position: left;
padding-left: 19px;
}
.br {
background-image: url(rbaei/images/rb_08.gif);
background-repeat: repeat-y;
background-position: right;
padding-right: 19px;
}
<!--نهاية الاعمده-->
<!--بداية الفوتر-->
#do {
background-image: url(rbaei/images/rb_12.gif);
background-repeat: repeat-x;
height: 36px;
}
#do .dr {
background-image: url(rbaei/images/rb_14.gif);
float: right;
height: 36px;
width: 300px;
}
#do .dl {
background-image: url(rbaei/images/rb_11.gif);
float: left;
height: 36px;
width: 180px;
}
#do .dc {
background-image: url(rbaei/images/rb_13.gif);
height: 36px;
width: 193px;
margin-right: auto;
margin-left: auto;
}
<!--نهاية الفوتر-->
<!-- شرح ابوشدقcssنهاية كود الـ -->
ثم نقوم بالبحث عن القالب الهيدر header
ونضع باوله الكود التالي
كود PHP:
<!--بداية الهيدر-->
<div id="up">
<div class="r"></div>
<div class="l"></div>
<div class="c"></div>
</div>
<!--نهاية الهيدر-->
<!--بداية الاعمده-->
<div class="bl">
<div class="br">
<!--نهاية الاعمده-->
وايضا اسفله نضع هذا الكود
كود PHP:
<br /
<div class="body_wrapper">
طيب يابوشدق تعطينا من هالاكواد ولا تعلمنا وش فايدته
هذا الكود يفصل بين الهيدر الذي قمت بتصميمه والهيدر الاصلي بالنسخه وهذا صوره توضح كلامي
الملون بالاخضر هذا فايدة الكود الاخير
نبحث عن الفوترfooter ونضيف باخره
كود PHP:
<!--بداية الفوتر-->
</div>
</div>
</div>
<div id="do">
<div class="dr"></div>
<div class="dl"></div>
<div class="dc"></div>
</div>
<!--نهاية الفوتر-->
ونشيك على عملنا نلقاه تمام وهذا تصوير فلاشي لشغلنا
http://www.aboshdg.net/up/uploads/fi...5c58866037.swf
الى هنا نكون انتهينا من تركيب الاستايل رباعي الاطراف بخصائص الـ css
وهذا عمل انساني لايخلوا من الخطأ والنسيان ومستعد لاستفساراتكم واسئلتكم بما يقدرني به الله تعالى
هذا الدرس حصري لمنتديات ابوشدق ومعهد ترايدنت
+--+منقول+--+
jv;df sjhdg vfhud hgh'vht ggksom 4>0 ,lht,r fh;,h] css