منتديات الجنة

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

منتديات الجنة منتدى عراقي يهتم بالطلبة العراقيين والشباب العراقي ... منوع اجتماعي خدمي


2 مشترك

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

    AlJna
    AlJna
    نائب المدير العام
    نائب المدير العام


    الجنس : ذكر
    الانتساب الانتساب : 19/06/2009
    العمر العمر : 29
    المساهمات المساهمات : 14331
    نقاط التميز نقاط التميز : 31718
    تقيم المستوى تقيم المستوى : 99

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

    مُساهمة من طرف AlJna 2010-07-14, 9:17 pm

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

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

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


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


    اضغط هنا

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

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

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

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

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

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

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

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

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

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

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

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

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

    .. الآن نقوم بفتح برنامج الفرونت بيج :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    دورة تصميم الواجهات .. الحلقة السابعة .. تركيب الواجهة على الفرونت بيج Zip Allulu
    Web.zip (161.9 كيلوبايت, عدد مرات المشاهدة 703 مرة)
    allkany
    allkany
    .::عضو متألق::.
    .::عضو متألق::.


    الجنس : ذكر
    الانتساب الانتساب : 13/07/2010
    العمر العمر : 33
    المساهمات المساهمات : 1559
    نقاط التميز نقاط التميز : 1595
    تقيم المستوى تقيم المستوى : 5

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

    مُساهمة من طرف allkany 2010-08-06, 6:06 am

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

      الوقت/التاريخ الآن هو 2024-03-28, 10:35 pm