Rounded corner Table
جدول ذو زوايا غير حادة
درس مهم لمصممي المواقع لعمل الحداول بشكل جديد ذو زوايا غير حادة

  • إن شاء الله هذا الدرس سهل وبسيط جداً ولكنه في نفس الوقت مهم وضروري لمصممي الموافع
  • قبل كل شئ عليك عزيزي أن تعمل زوايا الجدول ببرنامج الفوتوشوب أو أي برنامج للرسم
  • إفتح الآن برنامج الدريم ويفر أو الفرونت بايج وأختر ملف جديد
  • أختر جدول جديد وضع الخيارات التالية، كما في الشكل:

  • اضغط في داخل الجزء العلوي من يسار الجدول كما في الشكل التالي
  • قم بوضع الخيارات التالية:
    Horz > Left
    Vert > Top
  • لاحظ الشكل التالي:

  • قم الآن بوضع الصورة في داخل هذا المربع
  • طبعاً الصورة هذه تم تصميمها مسبقاً بواسطة الفوتوشوب
    بالمجوع صممنا 4 صور، عبارة عن زوايا المربع

  • الآن نضغط في داخل المربع الموجود في الجزء العلوي من يمين الجدول كما في الشكل وقم بإختيار:
    Horz > Right
    Vert > Top

  • طبق الآن نفس الخطوات السابقة للجزء السفل من الجدول، ولكن بدلا من ان نختار
    Vert > Top
    نختار
    Vert > Bottom
    لاحظ الشكلين التاليين:

الجزء الأسفل من يسار الجدول

الجزء الأسفل من يمين الجدول

  • اضغط الآن في المربع الوسط من الجزء العلوي من الجدول كما في الشكل التالي واختر
    100%
  • هذه العملية ستجعل مركز الجدول يمتد على إمتداد الحدول الأفقي

  • سنقوم الآن باختيار لون الزوايا حتى نضيفع للجدول وذلك بواسطة خيار الـ BG لاحظ الشكل التالي:
  • هذه العملية ستغير خلفية الجدول إلى اللون المطلوب

  • نستخدم الآن نفس العملية في تلوين بقية أجزاء الجدول وسنحصل على النتيجة التالية:

اضغط على F12

هذه النتيجة النهائية للجدول .. تستطيع الآن أن تضيف ما تريده من مواد في المربع الوسط من الحدول

من geekorg

اترك تعليقاً