درس تقطيع استايل بهيدر سباعي الاعمدة في الهيدر وخماسيها في الفوتر

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

قام بتصميم واجهه رائعة جدا ولكن وقف عند تقطيع التصميم وانتقاء نقطة التمدد للاستايل

اليكم الطريقة وكيفية معالجه تصميم يحتوي على سبع خلايا في الهيدر

وثلاث او خمس في الفوتر او سبعه او كما تحب ليس هناك اشكال

اولا اهم نقطه في الموضوع

اعمل حساب لنقطة التمدد في الاستايل اثناء التصميم

اليكم المثال التالى من تصميم اخوكم السيكا ميكا صاحب شبكة رسوم http://www.rsoom.com
والدرس منقول لكم من أستاذى الغالى bluestar



لو اردنا تقطيعه بالصورة الصحيحة سوف تكون نقطة التمدد بالاستايل
نقطتين نظرا لتساوي الاستايل من الجه اليمنا واليسرى وهذي من الاستايلات التى
لا بد من وضع نقطتين للتمدد تحمل الاولى 50% والثانيه 50%
نقوم بتعلم طريقة التقطيع
اولا سوف تستخدم الادة الخاصة بالتقطيع ويكون التقطيع بهذه الصورة

اما طريقة بناء الجداول فسيكون على الشكل التالى
اعمل جدول من ثلاثة صفوف وثلاثة اعمدة ثم اضعد في الخليه العلويه
الوسطى ( الهيدر ) وضع فيها جدول جديد من خمسة اعمدة وصف واحد
واضغط في الخليه السفليه الوسطى ( الفوتر ) وضع فيها جدول جديد
من ثلاثة اعمدة وصف واحد
تماما كما في الشكل التالى


الان يمكنك بناء تصميمك بالشكل الذي تريد
لكن اعمل حساب نقطة مهمه جدا
اجعل خلية التمدد الاولى 50% وخلية التمدد الثانية 50%وخلية تمدد الفوتر 100% ليكون تصميمك غايه بالروعة عند عرضه على دقة شاشة اخرى


كود الجدول
انسخ هذا الكود وضعه في الفرونت بيج

كود PHP:

<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
    <tr>
        <td>&nbsp;</td>
        <td>
        <table border="0" width="100%" id="table2" cellspacing="0" cellpadding="0">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        </td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>
        <table border="0" width="100%" id="table3" cellspacing="0" cellpadding="0">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        </td>
        <td>&nbsp;</td>
    </tr>
</table> 


انشاء الله يكون درس اليوم خفيف وسهل
تحياتي واي خدمه انا حاضر
تحياتي
أخوكم فى الله
منقول

يعطيك الف عافية اخوي الحب الباقي

ماقصرت على الموضوع

تحياتي

يعطيك الف عافية اخوي الحب الباقي

ماقصرت على الموضوع

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

بارك الله فيك على الموضوع المفيد

وبارك الله فيك على المجهود الكبير

بيض الله وجهك

اتمنالك التوفيق إن شاء الله

أخيك ابوروان

الاخ الحب الباقي

مشكور

يعطيك العافيه يالغالي

ماقصرت بيض الله وجهك

تقبل تحياتي

شكرا لكم اخواني
على المشاركه بالموضوع
دمتم بخير

الاخ الحب الباقي

مشكور

يعطيك الف عافيه اخي الحب الباقي

مشكور وماقصرت

تحياتي وتقديري
عاشق بريده

تسسسسسسسسسسسسسلم بيض الله وجهك






مجهووووووووووووود راااااااااااااااائع

الله يـعـطـيـكم الـعـافيـــــــــــة عـــلى الـــمــــرور


اخـوكم الـحـب الـبـاقـي


دمتم بخير