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

[loulou ange]

http://www.dzbatna.com/images/icons/smile.gif ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ظˆط§ط¬ظ‡ط§طھ .. ط§ظ„ط*ظ„ظ‚ط© ط§ظ„ط±ط§ط¨ط¹ط© .. ط¥ظ†ط´ط§ط، ط§ظ„ط¬ط¯ط§ظˆظ„ ظˆ طھط±ظƒظٹط¨ ط§ظ„ظˆط§ط¬ظ‡ط© (http://www.dzbatna.com/t1052491/)




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


كيف حالكم يالغاليين ... كيف المعنويات ... أهم شي كاسة قهوة جنبك أو أقلكم عصير (راني) اللي يحبه قلبك http://www.dzbatna.com/images/smilies/shiny01.gif ... المهم اشرب شربتين ... و ابدأ ... بسم الله نبدأ :


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



http://upload.dzbatna.net/upfiles/pDB74148.gif



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



http://upload.dzbatna.net/upfiles/VRV74198.gif



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



http://upload.dzbatna.net/upfiles/w7174228.gif



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



http://upload.dzbatna.net/upfiles/eGj74281.gif



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



http://upload.dzbatna.net/upfiles/Uoj74326.gif



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



http://upload.dzbatna.net/upfiles/WbO74373.gif



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



http://upload.dzbatna.net/upfiles/IZz74422.gif



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



http://upload.dzbatna.net/upfiles/y7X74479.gif




http://upload.dzbatna.net/upfiles/3HD74508.gif



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



http://upload.dzbatna.net/upfiles/gKr74558.gif



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



http://upload.dzbatna.net/upfiles/RtT74599.gif



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



http://upload.dzbatna.net/upfiles/sJd74648.gif



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



http://upload.dzbatna.net/upfiles/sbb74707.gif



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



http://upload.dzbatna.net/upfiles/4gN74750.gif



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



http://upload.dzbatna.net/upfiles/VOv74810.gif



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



http://upload.dzbatna.net/upfiles/sSh74863.gif



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



http://upload.dzbatna.net/upfiles/FFa74919.gif



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



http://upload.dzbatna.net/upfiles/MlL74978.gif



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






http://upload.dzbatna.net/upfiles/A8d75028.gif



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



http://upload.dzbatna.net/upfiles/VD575091.gif



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



http://upload.dzbatna.net/upfiles/3Zm75144.gif



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



http://upload.dzbatna.net/upfiles/9Eq75210.gif



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



http://upload.dzbatna.net/upfiles/hZm75269.gif



و من ثم نقوم باختيار مجلد images و من ثم نحفظ العمل و سيحفظ كاملاً بإذن الله


أتمنى لكم جميعاً التوفيق و أتمنى أن أكون قد وفقت في طرح هذه الحلقة و أتمنى أن أرى تطبيقات من الأعضاء الكرام ... إلى اللقاء في الحلقة الخامسة ... أخوكم اللولو http://www.dzbatna.com/images/smilies/icon31.gif







ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif صور الشرح.zip (http://www.traidnt.net/vb/attachments/561312d1300675847-صور-الشرح.zip) (795.2 كيلوبايت, عدد مرات المشاهدة 66 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©