دورة تصميم الواجهات .. الحلقة الرابعة .. إنشاء الجداول و تركيب الواجهة

[فارس قطر]

<div><div align="right">السلام عليكم و رحمة الله و بركاته

كيف حالكم يالغاليين ... كيف المعنويات ... أهم شي كاسة قهوة جنبك أو أقلكم عصير (راني) اللي يحبه قلبك :shiny01: ... المهم اشرب شربتين ... و ابدأ ... بسم الله نبدأ :

أنشئ مجلد جديد في أي مكان في جهازك و من ثم افتح برنامج الفرونت بيج و من ثم أنشئ مجلد ويب خاص بموقعك كما في الصورة التالية :

http://www.allulu.org/dros/wajeha/04/01.gif

و من ثم ستظهر لك نافذة اختر منها Empty Web Site ويب فارغ و على اليمين في خانة استعراض مجلد الويب اختر المجلد الذي أنشأناه في البداية بالضغط على زر Browse استعراض لاختيار المجلد :

http://www.allulu.org/dros/wajeha/04/02.gif

و من ثم اضغط Ok ليصبح المجلد مجلد ويب خاص بك ... الآن أنشئ صفحة بيضاء جديدة بالضغط على الصفحة البيضاء في الأعلى كما في الصورة :

http://www.allulu.org/dros/wajeha/04/03.gif

في الأسفل اذهب إلى منطقة الأكواد و احذف الكود الموجود كاملاً و ارجع إلى منطقة التحرير مرة أخرى كما في الصورة :

http://www.allulu.org/dros/wajeha/04/04.gif

الآن في منطقة التحرير نضغط كلك يمين بالماوس و نقوم باختيار خصائص الصفحة Page Properties كما في الصورة :

http://www.allulu.org/dros/wajeha/04/05.gif

الآن نجعل اتجاه الصفحة من اليمين إلى اليسار كما في الصورة :

http://www.allulu.org/dros/wajeha/04/06.gif

مع العلم أنك تستطيع اختيار الخيار الآخر من اليسار إلى اليمين و هذا يعود لك أهم شي يكون هالشيء في أول عملك ... و من ثم في نفس المكان Advanced في الأعلى و نصفر جميع الخانات كما في الشكل :

http://www.allulu.org/dros/wajeha/04/07.gif

الآن نقوم بإنشاء جدول مكون من 3 أعمدة و 3 صفوف كما في الصورة :

http://www.allulu.org/dros/wajeha/04/08.gif

http://www.allulu.org/dros/wajeha/04/09.gif

في خانة الحجم بالبكسل وضعت 779 لأنه تم تصميم الواجهة التي نعمل عليها حالياً في الفوتوشوب بحجم (عرض) 779 بكسل في أول حلقة ... الآن اضغط Ok و بتلاقي جدول مكون من 3 أعمدة و 3 صفوف ... الآن في خلايا الهيدر (أول ثلاث أعمدة في الصف الأول) الثلاث و الفوتر أيضا نقوم بتظليل الخلايا الثلاث كما في الشكل بالسحب عن طريق الماوس من العامود الأيمن أو الأيسر للجهة المقابة لآخر عامود و من ثم نضغط عليهم كلك يمين و نقوم باختيار Merge Cells :

http://www.allulu.org/dros/wajeha/04/010.gif

و نقوم بتطبيق نفس الطريقة مع الفوتر (أي آخر ثلاث أعمدة في الصف الثالث) و يصبح لدينا هذا الشكل :

http://www.allulu.org/dros/wajeha/04/011.gif

الآن اذهب إلى الصور الأربعة المقطعة و الجاهزة للأكل (تفكيره كله بالأكل