طريقة تركيب الاستايل بالفرونت بيج (صور)

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


ننسخ مجلد الصور واسمه مثلاً tsmim
ونضعه في مجلد المنتدى الرئيسي داخل مجلد الصور images على السيرفر المحلي الاباتشي وهنا المسار :
C:\AppServ\www\vb3\images\tsmim

هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 777x308 .

وهنا صور موضحة لتوزيع الصور


شغل برنامج الفرونت بيج وامسح كود الــ HTML


ارسم 3 جداول بالضغط على ايقونة رسم المربعات


وهذه النتيجه


وأضبط الاعدادت للجداول


والآن راح نركب البنر وراح نبدء بالصورة اليمنى




ثم مجلد tsmim

وراح نختار الصورة اليمنى للبنر

هذه الصورة تم تصغيرها تلقائيا . إضغط على هذا الشريط هنا لعرض الصورة بكامل حجمها . أبعاد الصورة الأصلية 666x414 .

وراح الآن نركب الصور اليسى للبنر


واجلب الصور واليسرى للبنر




والآن راح نركب صور التمدد للبنر الوسطى






والآن راح نركب العامود اليمين والايسر , بس فيه حركة قبل لازم نسويها وهي
دمج الجداول الثلاث مع بعض وراح ننشاً 3 جداول جديدة مكانها


والآن راح ننشاً 3 جداول بالداخل


والآن راح نركب العامود الايسر


واضبط الاعدادات التالية


والنتيجه

ونفس الحركة نطبقها مع العامود الايسر نضبط العرض ونجلب الصورة


والآن الفوتر نفس الحركة اللي عملناها مع العواميد نظلل الخلايا وندمجهم ثم ننشاً 3 جداول بداخل خلية الفوتر
وراح نركب الصورة اليمي للفوتر والصورة اليسرى


والآن سوف نجلب الصورة الوسط للفوتر ونجعلها تتمدد بنسبة 100%


وأضبط الاعدادات


والنتيجة


والآن أنسخ هذا الكود

كود:

$spacer_open $_phpinclude_output



وروح لمنتداك على السيرفر المحلي

واذهب الى الأنماط و القوالب >>>>> إدارة النمط




والآن اهذب الى الفرونت بيج وظلل الكود كما هو امامك


والصقة في منطقة الهيدر بالمنتدى عن طريق قص ولصق
وهنا الكود

كود:

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="rtl" id="table1">
<tr>
<td width="632">
<img border="0" src="images/tsmim/banner_r.gif" width="632" height="172"></td>
<td width="100%" background="images/tsmim/banner_m.gif"> </td>
<td width="134">
<img border="0" src="images/tsmim/banner_l.gif" width="134" height="172"></td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="rtl" id="table2">
<tr>
<td background="images/tsmim/amood_r.gif" width="32"> </td>
<td>
<p align="center">
<!-- /logo -->

<!-- ******* table -->
$spacer_open

$_phpinclude_output

وهنا كود الفوتر


كود:

</td>
<td background="images/tsmim/amood_l.gif" width="32"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="rtl" id="table3">
<tr>
<td width="438">
<img border="0" src="images/tsmim/footer_r.gif" width="46" height="42"></td>
<td background="images/tsmim/footer_m.gif" width="100%"> </td>
<td width="32">
<img border="0" src="images/tsmim/footer_l.gif" width="32" height="42"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<p> </p>

ونلصق كود الفوتر بعد هذه الكلمة


والنتيجه

شكرا

شرح رائع شكراً لك أخى

شكرا