شررح الأفضل في تأطير الجداول - تأطير كلي_بالصور

[فارس الخليج]

السلام عليكم
كيف حالكم
انشالله بخير
اول درس لي بمنتدى وانشالله مايكون مكرر
راح اشرح الدرس
على هذا الاطار
http://www.farsal5leej.com/daroos/1.gif
راح نقطعه الي 8 قطع
وهاي شكل الاطار بعد التقطيع
http://www.farsal5leej.com/daroos/2.gif
وهاي ملف الصور المقطع ( اللي حاب ينزله وهو مقطع )
http://www.farsal5leej.com/daroos/box-farsal5leej.zip
الحين راح نعدل القوالب
القوالب اللي راح نعدلها قبل الشغل عليها
هي
FORUMHOME
forumhome_forumbit_level1_nopost
forumhome_forumbit_level2_post
================================================== ========
افتح قالب FORUMHOME
وابحث عن

<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<if condition="$show['guest']">
<!-- guest welcome message -->
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
<!-- / guest welcome message -->
</if>
<tr align="center">
<td class="thead">&nbsp;</td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a>
&nbsp; &nbsp;
<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>
</strong></div></td>
</tr>
</tbody>
</table>
<!-- /main -->
استبدله بهذا الكود

<!-- guest welcome message -->
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
</thead>
</table>
</if>
<!-- / guest welcome message -->
<!-- main -->
$forumbits
<!-- /main -->
احفظ العمل
================================================== ========
افتح قالب forumhome_forumbit_level1_nopost
استبدل كافة محتوياته بهذا الكود

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="35">&nbsp;</td>
<td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="200">$vbphrase[last_post]</td>
<td class="thead" width="65">$vbphrase[threads]</td>
<td class="thead" width="65">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="120">$vbphrase[moderator]</td>
</if>
</tr>
$childforumbits
</tbody>
</if>
</table>
================================================== ========
افتح قالب forumhome_forumbit_level2_post
استبدل كافة محتوياته بهذا الكود

<tr align="center">
<td class="alt2" width="35"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td class="alt1Active" align="$stylevar[left]" id="f$forum[forumid]">
<div>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
<td class="alt1" width="65">$forum[threadcount]</td>
<td class="alt2" width="65">$forum[replycount]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="alt1" width="120"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
</if>
</tr>
$childforumbits
================================================== ========
انتهينا من القوالب ولكن راح نرجع لها
الحين راح نفتح برنامج الفرونت بيج
وراح نمسح كل المعلومات الموجوده في التعليمات البرمجيه
وراح ندرج جداول 3 × 3 كما موضح في الصوره التاليه
http://www.farsal5leej.com/daroos/3.gif
الحين راح اضع الصور في الجدول
كما في الصوره الموضحه ( ملاحظة الصور الجانبيه راح تكون عكس حق يكون في منتدى بشكل صحيح )
http://www.farsal5leej.com/daroos/4.gif
الحين راح انسخ القالب forumhome_forumbit_level1_nopost واضعه في وسط الجدول كما موضح بالصوره
http://www.farsal5leej.com/daroos/5.gif
راح ننسخ الكود كله ونستبدله بالقالبforumhome_forumbit_level1_nopost واحفط العمل ( مبروك عليك الاطار الموجود على الاقسام )
الحين راح تفتح قالب FORUMHOME
http://www.farsal5leej.com/daroos/6.gif
اللي محدد بالصوره هاي راح نسوي له تأطير
وراح ندرج جداول 3 × 3 كما موضح في الصوره التاليه
http://www.farsal5leej.com/daroos/3.gif
الحين راح اضع الصور في الجدول
كما في الصوره الموضحه ( ملاحظة الصور الجانبيه راح تكون عكس حق يكون في منتدى بشكل صحيح )
http://www.farsal5leej.com/daroos/4.gif
اللي كان محدد بالصور راح انسخه واضعه في وسط الجدول
و الحين انسخ الكود كله و استبدله بقالب FORUMHOME
================================================== ========
الحين راح نفتح قالب navbar
http://www.farsal5leej.com/daroos/7.gif
اللي محدد بالصوره هاي راح نسوي له تأطير
وراح ندرج جداول 3 × 3 كما موضح في الصوره التاليه
http://www.farsal5leej.com/daroos/3.gif
الحين راح اضع الصور في الجدول
كما في الصوره الموضحه ( ملاحظة الصور الجانبيه راح تكون عكس حق يكون في منتدى بشكل صحيح )
http://www.farsal5leej.com/daroos/4.gif
اللي كان محدد بالصور راح انسخه واضعه في وسط الجدول
و الحين انسخ الكود كله و استبدله بقالب navbar
================================================== ==
مبروك عليك تأطير الجداول
الحين تقدر تروح وتشوف المنتدى كيف صار معاك
:icon30::icon30::icon30:
:in_love:

[Mohannad]

شرح جميل ووافي ما شاء الله
تسلم وبارك الله فيك

[بــــدر]

بارك الله فيك اخوي فارس

شرح رائع اجدااا ..

بدر