التواصل المباشر مع الادارة والاعضاء القدامى من خلال قناة التلغرام



العودة   :: vBspiders Professional Network :: > [ ::. الـحـمـايـة ~ Security .:: ] > حمـــاية السيــرفرات والمواقـــع > قســم تطويــر المــــواقع

إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 09-08-2011, 05:39 PM   رقم المشاركة : 1 (permalink)
معلومات العضو
 
الصورة الرمزية Gx1Sniper
 

 

 
إحصائية العضو








Gx1Sniper غير متواجد حالياً

 

 

إحصائية الترشيح

عدد النقاط : 10
Gx1Sniper is on a distinguished road

افتراضي تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css


السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
كما نعلم وشاهدنا ستايلات الجيل الرابع فقليل ماشاهدنا لها ستايل رباعي الاطراف
اي هيدر وفوتر واعمده جانبيه مرتبطه ببعضها
اليوم نشرح ان شاء الله تعالى تركيب ستايل رباعي الاطراف بخصائص 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-rightauto
    
margin-leftauto

ونضيف بعدها الاعمده وباختلاف بسيط بالنسبه للاتجاه سوف يصبح رأسي بدل الافقي ونستخدم البيدينق
وهذا شرح فلاشي للاعمده

http://www.aboshdg.net/up/uploads/fi...3ab3786a72.swf


نلاحظ الاتجاه واستخدام البيدينق وانا اخترت العمود الايسر والايمن يطبق مثل الايسر باختلاف اتجاه البيدينق والبوستنينق


وهذا كود خصائص css لاستفاده منه

كود PHP:
<!-- شرح أبوشدقcssبداية كود الـ--> 
<!--
بداية الهيدر--> 
#up { 
    
background-imageurl(rbaei/images/rb_02.gif); 
    
background-repeatrepeat-x
    
height135px

#up .r { 
    
background-imageurl(rbaei/images/rb_04.gif); 
    
floatright
    
height135px
    
width300px

#up .l { 
    
background-imageurl(rbaei/images/rb_01.gif); 
    
floatleft
    
height135px
    
width203px

#up .c { 
    
background-imageurl(rbaei/images/rb_03.gif); 
    
height135px
    
width184px
    
margin-rightauto
    
margin-leftauto

<!--
نهاية الهيدر--> 
<!--
بداية الاعمده--> 
.
bl 
    
background-imageurl(rbaei/images/rb_06.gif); 
    
background-repeatrepeat-y
    
background-positionleft
    
padding-left19px

.
br 
    
background-imageurl(rbaei/images/rb_08.gif); 
    
background-repeatrepeat-y
    
background-positionright
    
padding-right19px

<!--
نهاية الاعمده--> 
<!--
بداية الفوتر--> 
#do { 
    
background-imageurl(rbaei/images/rb_12.gif); 
    
background-repeatrepeat-x
    
height36px

#do .dr { 
    
background-imageurl(rbaei/images/rb_14.gif); 
    
floatright
    
height36px
    
width300px

#do .dl { 
    
background-imageurl(rbaei/images/rb_11.gif); 
    
floatleft
    
height36px
    
width180px

#do .dc { 
    
background-imageurl(rbaei/images/rb_13.gif); 
    
height36px
    
width193px
    
margin-rightauto
    
margin-leftauto

<!--
نهاية الفوتر--> 
<!-- 
شرح ابوشدقcssنهاية كود الـ --> 

الحين نجي للتركيب بالمنتدى ونكون انتهينا
اولا نقوم بوضع كود الـ css بقالبه المخصص
لوحة التحكم
التحكم بالاستايلات
البحث بالقوالب
نبحث عن القالب vbulletin.css ونختار الاستايل المطلوب ونضع باخره كود الـ css مع تغيير روابط الصور
كود PHP:
<!-- شرح أبوشدقcssبداية كود الـ--> 
<!--
بداية الهيدر--> 
#up { 
    
background-imageurl(rbaei/images/rb_02.gif); 
    
background-repeatrepeat-x
    
height135px

#up .r { 
    
background-imageurl(rbaei/images/rb_04.gif); 
    
floatright
    
height135px
    
width300px

#up .l { 
    
background-imageurl(rbaei/images/rb_01.gif); 
    
floatleft
    
height135px
    
width203px

#up .c { 
    
background-imageurl(rbaei/images/rb_03.gif); 
    
height135px
    
width184px
    
margin-rightauto
    
margin-leftauto

<!--
نهاية الهيدر--> 
<!--
بداية الاعمده--> 
.
bl 
    
background-imageurl(rbaei/images/rb_06.gif); 
    
background-repeatrepeat-y
    
background-positionleft
    
padding-left19px

.
br 
    
background-imageurl(rbaei/images/rb_08.gif); 
    
background-repeatrepeat-y
    
background-positionright
    
padding-right19px

<!--
نهاية الاعمده--> 
<!--
بداية الفوتر--> 
#do { 
    
background-imageurl(rbaei/images/rb_12.gif); 
    
background-repeatrepeat-x
    
height36px

#do .dr { 
    
background-imageurl(rbaei/images/rb_14.gif); 
    
floatright
    
height36px
    
width300px

#do .dl { 
    
background-imageurl(rbaei/images/rb_11.gif); 
    
floatleft
    
height36px
    
width180px

#do .dc { 
    
background-imageurl(rbaei/images/rb_13.gif); 
    
height36px
    
width193px
    
margin-rightauto
    
margin-leftauto

<!--
نهاية الفوتر--> 
<!-- 
شرح ابوشدق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

التوقيع

تم تغيير الاسم من الليث الاسود الى Gx1Sniper

للمراسلة والتواصل

Gx1@hotmail.com

 

   

رد مع اقتباس
قديم 09-08-2011, 07:53 PM   رقم المشاركة : 2 (permalink)
معلومات العضو
 
الصورة الرمزية JetLi
 

 

 
إحصائية العضو






JetLi غير متواجد حالياً

 

 

إحصائية الترشيح

عدد النقاط : 10
JetLi is on a distinguished road

افتراضي رد: تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css


احبك عديييل ، مشكور مشكور على الموضوع ، واتمنى تنزل موضوع عن الجيل الثالث 3.8.x لان الطلب عليه كثير معقد شوي

التوقيع

http://www.pollsb.com/photos/o/33924...tony_stark.jpg
التهكير يجعلك تنظر للحياة بعمق وترو

 

   

رد مع اقتباس
قديم 09-09-2011, 08:26 AM   رقم المشاركة : 3 (permalink)
معلومات العضو
 
الصورة الرمزية Gx1Sniper
 

 

 
إحصائية العضو








Gx1Sniper غير متواجد حالياً

 

 

إحصائية الترشيح

عدد النقاط : 10
Gx1Sniper is on a distinguished road

افتراضي رد: تركيب ستايل رباعي الاطراف للنسخة 4.0 ومافوق باكواد css


مشكور اخوي على المرور الطيب

وباذن الله انزل شرح لنسخ 3.8

تقبل مروري

التوقيع

تم تغيير الاسم من الليث الاسود الى Gx1Sniper

للمراسلة والتواصل

Gx1@hotmail.com

 

   

رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)


تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

الانتقال السريع


الساعة الآن 04:16 PM


[ vBspiders.Com Network ]

SEO by vBSEO 3.6.0