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

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

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

و من ثم ستخرج لك نافذة اختر منها 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 و من ثم نحفظ العمل و سيحفظ كاملاً بإذن الله

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

يعطيك العافية امجد على الشرح

ومشكور عـ الموضوع

وفقت في النقل

,,
,
يعطيك الف عافيه اخوي
ماقصرت يالغالي

تسلملي اخوي سلطان مرورك وردك

شكرا لكن وين شرح طريقة عمل الواجهة؟

يعطيك العااااااااااااااااااااااااااااااااااااافية

بارك الله فيك اخوي امجد
شرح ولا احلى منه تستحق التقييم

اخي وين رابط الموضوع الساااابق

بارك الله فيك اخوي الكريم

ماتقصر يا امجد