دورة تصميم الواجهات .. الحلقة الثامنة .. تركيب install أقسام الواجهة interface

[romaissa]

http://www.dzbatna.com/images/icons/smile.gif ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ظ„ظˆط§ط¬ظ‡ط§طھ .. ط§ظ„ط*ظ„ظ‚ط© ط§ظ„ط«ط§ظ…ظ†ط© .. طھط±ظƒظٹط¨ ط£ظ‚ط³ط§ظ… ط§ظ„ظˆط§ط¬ظ‡ط© (http://www.dzbatna.com/t1073965/)




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


أعتذر من الجميع أشد الاعتذار على التأخير من إدراج الحلقة الثامنة فأتمنى من الجميع قبول اعتذاري ...


بعد أن انتهينا من تركيب install الواجهة interface على الفرونت بيج سنقوم في هذه الحلقة بتركيب install الأقسام في الواجهة interface ... باسم الله نبدأ :


نقوم بتجهيز صور الأقسام التي تم تقطيعها و هي كالتالي :


up الصورة العلوية :



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



down الصورة السفلية :



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



right العامود الأيمن :



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






left العامود الأيسر :



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



الآن نقوم بنقل الأربع صور الخاصة بالأقسام إلى مجلد الموقع الذي قمنا بإنشائه في الحلقة السابقة بعنوان Allulu Web عن طريق إنشاء مجلد آخر بداخله بأي عنوان مثل menu و نضع الصور بداخله ... و من ثم نقوم بفتح برنامج الفرونت بيج و عن طريق البرنامج نقوم بفتح صفحة الموقع الرئيسية index.htm كما في الصورة :



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



:و من ثم ستظهر لنا نافذة لاختيار الصفحة المراد فتحها و نحن بدورنا نقوم بالذهاب إلى مسار صفحة الموقع index.htm و نقوم باختيارها ... الآن بعد فتح صفحة الموقع index.htm و في منطقة التصميم Design نقوم بوضع مؤشر الفأرة في نصف الصفحة في الواجهة interface و نقوم بإدراج جدول متكون من صف أو عدة صفوف و ثلاثة أعمدة ليصبح كما في الصورة التالية



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



و قد قمنا بشرح طريقة كيفية إدراج جدول مع خصائص كما في الصورة التالية :



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



و بالتالي نقوم بتطبيق نفس الخصائص على الجدول الذي تم إدراجه ... و من ثم إذا قمنا بإنشاء أكثر من صف واحد كما قمت أنا بإنشاء صفين فيجب علينا ترك الصف الأول بثلاثة أعمدة كما هو و نقوم بدمج الصف الثاني عن طريق تظليل خلاياه و استخدام خاصية Merge Cells كما تم شرح طريقةها في السابق كما في الصورة التالية :



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



و يصبح لدينا الشكل التالي :



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



الآن نضع مؤشر الفأرة على الخلية اليمنى في الصف الأول و نقوم بإنشاء جدول جديد مكون من ثلاثة صفوف و ثلاثة أعمدة و نقوم بإعطاءه نفس خصائص الجدول الأساسي كما في الصورة التالية :



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



مع ملاحظة مهمة كما هو مبين في الصورة أن يكون العرض بالبكسل و يساوي عرض التصميم عندما قمنا بتصميم صور الأقسام ... و لدي أنا العرض 175 بكسل ... و بعد ذلك نقوم بدمج أعمدة الصف الأول و من ثم أعمدة الصف الأخير و يصبح لدينا الشكل كما في الصورة التالية :



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



الآن في الصف الثاني نقوم بتعديل عرض الخلية اليسرى على حسب عرض العامود الأيسر لدينا في صور الأقسام حيث أنه لدي عرض العامود 11 بكسل و طريقة التعديل هي الضغط بزر الفأرة الأيمن بداخل الخلية اليسرى و اختيار Cell Properties خصائص الخلية كما في الصورة التالية :



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



و من ثم نقوم بتعديل العرض بالبكسل كما في الصورة التالية :



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



و بعد ذلك نذهب للخلية اليمنى و نقوم بتعديل العرض بنفس الطريقة على حسب عرض صورة العامود الأيمن ... و من ثم نذهب للخلية الوسطى و نقوم بتعديل العرض لها على حسب الفرق بين العرض بالكامل و مجموع عرض العامودين الأيمن و الأيسر أي نقوم بجمع عرض العامودين 11+11=22 بكسل و بعد ذلك نقوم بطرحها من العرض الكامل لصورة الأقسام ... 175-22=153 بكسل عرض الخلية الوسطى في الجدول ... و من ثم نذهب للصف الأول و نقوم بتعديل طول الخلية على حسب طول الصورة العلوية كما في الصورة التالية :



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



و بعد ذلك يصبح لدينا الشكل التالي للجدول :



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



الآن نقوم بوضع الصورة العلوية خلفية للصف العلوي عن طريق الضغط بزر الفأرة الأيمن في الخلية العلوية و اختيار Cell Properties و من ثم في خانة الخلفية Background نقوم باختيار الصورة العلوية من مجلد الصور menu كما في الصورة التالية :



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



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



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



الآن نقوم بتظليل الجدول الخاص بالأقسام بالكامل و نسخه و لصقه في الخلية اليسرى للجدول الأساسي ... و بعد ذلك نقوم بتعديل عرض الخلية الوسطى للجدول الأساسي بنسبة 100% كما في الصورة التالية :



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



و بالنهاية يصبح لدينا الشكل النهائي :



http://upload.dzbatna.net/upfiles/98s35475.gif



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



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



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


ملاحظة : تم إرفاق ملف مضغوط بمحتوى الواجهة interface الذي تم شرح طريقةه للفائدة فقط







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

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Allulu Web.zip (http://www.traidnt.net/vb/attachments/328611d1230056270-allulu-web.zip) (171.3 كيلوبايت, عدد مرات المشاهدة 893 مرة)


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