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







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

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

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

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

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

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

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

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

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

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

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

الآن اذهب إلى الصور الأربعة المقطعة و الجاهزة للأكل (تفكيره كله بالأكل << دب) قصدي الجاهزة للتركيب اللي قطعناها في الحلقة السابقة و من ثم اختر صورة الهيدر (الأعلى) و انسخها Ctrl + C و من ثم اذهب إلى الجدول في الفرونت بيج في الأول أي الصف الأول اللي دمجنا فيه الثلاث أعمدة للهيدر و نلصق الصورة ... أو يمكننا فعل ذلك بوضع مؤشر الماوس (الفأرة) في الخلية الأولى في الأعلى (الهيدر) و نقوم بعمل توسيط و من ثم ندرج صورة من قائمة Insert نقوم باختيار Picture ثم From File كما في الشكل :

الآن نقوم بوضع صورة الفوتر (الأسفل) في الأسفل مع التوسيط أيضاً و كالخطوات السابقة ... و يصبح الشكل كالتالي :

الآن يجب علينا التركيز قليلاً (يالله خلص كاسة العصير و كمل) .... في الخلية اليمنى في الوسط (العامود الأيمن في الصف الثاني) نضغط كلك يمين بداخله و نقوم باختيار Cell Properties أي خصائص الخلية كما في الشكل :

و من ثم في النافذة التي تظهر لنا نقوم بوضع علامة (صح) على Use background picture أي اختيار صورة خلفية و من ثم نضغط على زر Browse استعراض لاختيار صورة العامود الأيمن المقطعة التي أنشأناها في الحلقة السابقة و من ثم نضغط Ok كما في الشكل :

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

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

و كما رأينا نقوم بنفس العمل مع العامود الأيسر بالسحب إلى اليسار إلى أن تتطابق الواجهة من جميع الجوانب مع الأعمدة .... الآن في الخلية الوسطى التي تبقت اضغط كلك يمين أو اضغط في أي مكان في الصفحة كلك يمين و من ثم اختر Page Properties كما فعلنا سابقاً و من ثم في النافذة التي تظهر لنا نقوم باختيار الأمر Formatting من الأعلى و من ثم في خانة Background نقوم باختيار نفس لون خلفية الواجهة اللي سويناه بالفوتوشوب كما في الشكل :

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

و من ثم نضغط على لون الخلفية من إحدى صور الواجهة و من ثم سنجد أن اللون أصبح عندنا جاهزاً ... الآن اضغط Ok في النوافذ ... و سيصبح لدينا الشكل النهائي التالي :

الآن نقوم بحفظ عملنا عن طريق الضغط على صورة الحفظ كما في الشكل في الجهة اليسرى العلوية :

ستظهر لنا نافذة الحفظ ... بالطبع سيكون اسم الصفحة index و لا نغيرها و هو اسم الصفحة الرئيسية و إذا أحببنا أن نضع عنوان الصفحة الذي يظهر في الأعلى في المتصفح نضغط على زر Change Title أي تغيير العنوان كما في الصورة :

و من ثم نكتب في النافذة التي تظهر لنا العنوان الذي نريده و نحفظ الصفحة و ستظهر لنا نافذة حفظ الصور نقوم بالضغط على زر Change Folder كما في الصورة :

و من ثم نقوم باختيار مجلد images و من ثم نحفظ العمل و سيحفظ كاملاً بإذن الله أتمنى لكم جميعاً التوفيق و أتمنى أن أكون قد وفقت في طرح هذه الحلقة و أتمنى أن أرى تطبيقات من الأعضاء الكرام ... إلى اللقاء في الحلقة الخامسة ... أخوكم اللولو


http://www.traidnt.net/vb/showthread.php?p=9782561#post9782561


الحلقة الاولي __ الحلقة الثانية __ الحلقة الثالثة __ الحلقة الرابعة _ الحلقة الخامسة _ الحلقة السادسة_ الحلقة السابعة__ الحلقة الثامنة