منتديات الجلفة لكل الجزائريين و العرب - عرض مشاركة واحدة - نقلة نوعية في تطوير المنتديات ( درس القوالب المنسدلة )
عرض مشاركة واحدة
قديم 2008-10-20, 19:03   رقم المشاركة : 5
معلومات العضو
Fethi.dz
عضو مشارك
 
الصورة الرمزية Fethi.dz
 

 

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










افتراضي الجزء الاول

السلام عليكم و رحمة الله و بركاته

ابدأ الدرس على بركة الله

و هو مقسم الى جزئين



الجزء الاول


طريقة انشاء جدول و برواز حول الصورة الشخصية للعضو


أولا نفتح قالب postbit او قالب الـ postbit lagacy

و نبحث عن الجملة الشرط التالي و الخاصة بإضهار الصورة الرمزية للعضو

كود:
 <if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>


حسنا بعد ذلك نفتح الفرونت بيج او ي اي برنامج يدعم php

الان نريد ان نظع الجملة السابقة داخل مربع و برواز جميل مع خلفية مصورة

كيف ؟؟

أولا نقوم بوضع جدول مع صورة خلفية للجملة السابقة

و جملة بداية الجدول تبدأ بــ <table> و تنتهي بي <table/>

حسنا هناك خيرات مصحوبة مع الجدول توضع كالتالي

كود:
<table bgcolor="#E7E7E7" class="tborder" width="20" style="border-collapse: collapse; background-position:   center top; background-image:url('Fethi.dz-style/misc/icon/avat-bg.gif'); background-repeat:repeat-x" id="table3" cellpadding="6" align="center">

بحيث
bgcolor="#E7E7E7" هي خلفية الجدول وانا اخترت لون رمادي فاتح...

width="20" هو عرض الجدول ( هنا نترك القيمة 20 بحيث ان الجدول اقل حد له عشرون و سيتمدد كل ما تكون الصورة و حسب اعدادات المنتدى )...

background-image:url('Fethi.dz-style/misc/icon/avat-bg.gif') هنا هو امر الذي يستدعي الصورة التي ستوضع خلفية للجدول...

***ملاحظة: الصورة حجمها يجب ان يكون 1 للعرض و 170 للارتفاع


حيث ستصبح جملة الامر هكذا


كود:
<if condition="$show['avatar']"><td class="alt2">
كود:
 
<table bgcolor="#E7E7E7" class="tborder" width="20" style="border-collapse: collapse; background-position: center top; background-image:url('Fethi.dz-style/misc/icon/avat-bg.gif'); background-repeat:repeat-x" id="table3" cellpadding="6" align="center"> <a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
</table> </td> </if>

هذه المرحلة الاولى نأتي الى المرحلة الثانية


انشاء برواز للجدول الذي انشاناه ( حدود بلون معين)
ناتي بعد امر <table>



نظع امر <td>



و هذا هو الامر الخاص بإنشاء البرواز للجدول و التي باللون الرمادي الغامق



كود:
<td style="border-style: solid; border-width: 1px; padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 4px" bordercolor="#bababa">




و ينتهي هذا الامر دوما بــ <tb/>



الامر border-style: solid لتحديد نوع الخط



solid خط مستقيم
dashesd خط متقطع



الامر bordercolor="#bababa لتحديد لون الخط




سيصبح في النهاية الكود كامل متكامل للصورة الرمزية للعضو مع خلفية عبارة عن صورة و بوردر باللون الذي تريده





الكود النهائي سيكون بهذا الشكل




كود:
<if condition="$show['avatar']">
<td class="alt2"> <table bgcolor="#E7E7E7" class="tborder" width="20" style="border-collapse: collapse; background-position: center top; background-image:url('Fethi.dz-style/misc/icon/avat-bg.gif'); background-repeat:repeat-x" id="table3" cellpadding="6" align="center"> <tr> <td style="border-style: solid; border-width: 1px; padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 4px" bordercolor="#bababa"> <div align="center"> <a href="member.php?$session[sessionurl]u=$post[userid]"> <img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a> </div> </td> </tr> </table> </td> </if>

هذا شكل توضيحي لما سيبدو عليه العمل الذي قمنا به






ان شاء الله الدرس يكون سهل

و ان شاء الله يكون هناكــ تجاوب لاكمل الجزء التاني من الدرس

القوالب المنسدلة


مع التحية








الصور المرفقة
نوع الملف: gif po-1.gif‏ (1.6 كيلوبايت, المشاهدات 81)
نوع الملف: gif po-2.gif‏ (3.5 كيلوبايت, المشاهدات 76)