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

[romaissa]

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




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

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

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

قم بتحميل برنامج الفرونت بيج 2003 من الرابط التالي :

اضغط هنا (http://www.allulu.org/vb/showpost.php?p=11376&postcount=1)

الآن نقوم بتجهيز صور الواجهة interface التي تم تقطيعها و هي كالتالي :

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


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


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


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


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


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


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


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


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


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


[1] نضغط بزر الماوس الأيمن على الشاشة و من ثم نضع مؤشر الفأرة على New
[2] نقوم باختيار Folder

و من ثم سيتم إنشاء مجلد جديد و نقوم بكتابة اسم المجلد و يفضل باللغة الإنجليزية مثلاً Allulu Web و نضغط على مفتاح Enter ... و من ثم من الأفضل أن نقوم بإنشاء مجلد آخر داخل مجلد الموقع باسم images لتخزين الصور فيه .. و أهم خطوة هي أن ننقل جميع الصور التي سيتم استخدامها في الواجهة interface إلى مجلد الصور الذي تم إنشاؤه images لنستخدمها من المجلد الخاص بالموقع و ليس من المسار المخزنة عليه في الأصل .. الآن نقوم بفتح برنامج الفرونت بيج :


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


و من ثم ستفتح لنا صفحة بيضاء جاهزة للعمل باسم new_page_1.htm كما في الصورة :




http://upload.dzbatna.net/upfiles/K3680881.gif
و إذا لم يتم فتح الصفحة البيضاء فنستطيع إنشاء صفحة جديدة بالضغط على أيقونة الملف الأبيض في الخيارات أسفل القوائم كما في الصورة :


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


و بعد ذلك سنجد صفحة بيضاء جاهزة للعمل و أول ما علينا فعله هو حذف الكود code التلقائي الذي يوجد في الصفحة في منطقة الأكواد Code .. طريقة حذفه هي اختيار منطقة الأكواد كما في الصورة و تظليل الكود code كاملاً و مسحه كما في الصورة :


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


بعد مسح الكود code بالكامل نقوم بالعودة و الدخول إلى منطقة العمل و التصميم Design الموجودة بجانب منطقة الأكواد ... و سنجد الصفحة بيضاء كما هي و ما علينا هو الضغط بزر الفأرة الأيمن على الصفحة و اختيار الأمر Page Properties أي خصائص الصفحة .. كما في الصورة :


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


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


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


و من ثم نقوم بالانتقال إلى الخيار Formatting و نتبع ما هو موضح على الصورة التالية :


http://upload.dzbatna.net/upfiles/7NH81185.gif


هنالك خطوة هامة و هي اختيار لون خلفية الصفحة و مطابقته للون الواجهة interface .. فهنالك ألوان أساسية كالأبيض و الأحمر و لكن إذا كان اللون بني فاتح (بيج مثلا) كيف يمكننا اختياره مطابقاً للون الخلفية ؟! .. الحل هو فتح ملف الواجهة interface بالفوتوشوب و من ثم نقوم باختيار أداة تحديد اللون كما في الصورة :


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


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


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


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


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


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


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


و من ثم ستظهر لنا نافذة اختيار الألوان و ما علينا سوى لصق الكود code الذي تم نسخه في خانة كود code اللون كما هو موضح :


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


الآن نقوم بالانتقال إلى الخيار Advanced في نافذة خصائص الصفحة و نتبع ما هو موضح في الصورة التالية :


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


إذا قمنا بتفعيل خيار تغيير شكل الرابط الذي تم توضيحه بالصورة السابقة .. نقوم بالضغط على زر Rollover style و من ثم ستظهر لنا نافذة تعديل خصائص الرابط عند وضع مؤشر الفأرة عليه كما هو موضح و مشروح بالصورة التالية :


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


و بعد ذلك نقوم بحفظ الخصائص بالضغط على زر OK .. الآن سنجد أن الصفحة تم تغييرها على حسب الخصائص ، الأبعاد ، لون الخلفية و غيرها ... الآن نقوم بإنشاء جدول بثلاثة أعمدة و ثلاثة صفوف عن طريق اختيار الخيار Table من الخيارات في الأعلى و من ثم اختيار Insert ثم Table كما هو موضح في الصورة التالية :


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


الآن ستظهر لنا نافذة خصائص الجدول نقوم باتباع ما هو موضح في الصورة التالية :


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





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


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


و من ثم نضغط عليه بزر الفأرة الأيمن و نقوم باختيار الخاصية Merge Cells كما في الصورة التالية :


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


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


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


و من ثم ستظهر لنا نافذة خصائص الخلية و فقط ما علينا هو تحديد العرض بالبكسل و هو عرض صورة العامود الأيمن التي تم تخزينها و الصورة في عملي تم تخزينها بعرض 14 بكسل كما هو موضح بالصورة التالية :


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


بعد ذلك نقوم بتكرار نفس العملية للعامود الأيسر و نضع عرض صورة العامود الأيسر لدينا و اختياره كخلفية و حفظ الخصائص ... و من ثم نقوم بالضغط بزر الفأرة الأيمن على منطقة العامود الوسط و اختيار الخاصية نفسها Cell Properties و من ثم نقوم فقط بتحديد العرض للعامود الأوسط و هو ناتج طرح مجموع عرض العامودين الأيمن و الأيسر من عرض الواجهة interface نفسها أي كالتالي ( أنا شايف احنا غيرنا رياضيات و مسائل و حسابات شو القصةhttp://www.dzbatna.com/images/smilies/nosweat.gif ) :

779 عرض الواجهة interface - (28 ناتج مجموع عرض العامودين الأيمن و الأيسر) = 751 بكسل عرض العامود الوسط ... نقوم بوضع الناتج النهائي 751 في خانة العرض و نحفظ الخصائص ...

الآن كل شيء جاهز و ما علينا إلا الذهاب إلى مجلد الصور images الذي قمنا بإنشائه في مجلد الموقع Allulu Web و نسخ الصورة العليا up و من ثم ننتقل للفرونت بيج و نلصقها داخل العامود العلوي في الصف الأول .. و نكرر العملية بنسخ الصورة السفلية down و لصقها في الفرونت بيج داخل العامود السفلي في الصف الثالث .. و تصبح الواجهة interface مكتلمة كما في الصورة التالية :


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


الآن ما علينا سوى تخزين الصفحة و هي الصفحة الرئيسية index.htm الرئيسية للموقع .. نقوم بالضغط على أيقونة الحفظ في الأعلى كما هو موضح في الصورة التالية :


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


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


http://upload.dzbatna.net/upfiles/URC82110.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/325378d1229084674-allulu-web.zip) (161.9 كيلوبايت, عدد مرات المشاهدة 1037 مرة)


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