الرئيسية
المنتديات
الانتساب : 
العمر : 
المساهمات : 
نقاط التميز
السلام عليكم و رحمة الله و بركاته
بعد أن انتهينا إخواني الكرام من تصميم و تقطيع الواجهة و أقسامها ... نأتي
الآن لمعرفة كيفية تركيب الواجهة على برنامج الفرونت بيج ... باسم الله
نبدأ :
ملاحظة هامة : الحلقة شبيهة
بالحلقة الرابعة و لكنها بتفصيل أكثير و إعادة للتركيز بكيفية التركيب و
التعامل مع الجداول و الفرونت بيج بشكل عام لنتمكن من تركيب الأقسام بشكل
ملائم و بدقة أكثر
قم بتحميل برنامج الفرونت بيج 2003
من الرابط التالي :
اضغط هنا
الآن نقوم بتجهيز صور الواجهة التي تم تقطيعها و هي كالتالي :
up صورة البانر العلوي :
down صورة الفوتر السفلي :
right العامود الأيمن :
left العامود الأيسر :
و من ثم نقوم بإنشاء مجلد جديد خاص بملفات و صور و صفحات الموقع على سطح
المكتب مثلاً كما في الصورة التالية :
[1] نضغط بزر الماوس الأيمن على الشاشة و من ثم
نضع مؤشر الفأرة على New
[2] نقوم باختيار Folder
و من ثم سيتم إنشاء مجلد جديد و نقوم بكتابة اسم المجلد و يفضل باللغة
الإنجليزية مثلاً Allulu Web و نضغط على مفتاح Enter ... و من ثم من الأفضل أن نقوم بإنشاء مجلد آخر
داخل مجلد الموقع باسم images لتخزين الصور فيه
.. و أهم خطوة هي أن ننقل جميع الصور التي سيتم
استخدامها في الواجهة إلى مجلد الصور الذي تم إنشاؤه images
لنستخدمها من المجلد الخاص بالموقع و ليس من المسار المخزنة عليه في الأصل
.. الآن نقوم بفتح برنامج الفرونت بيج :
و من ثم ستفتح لنا صفحة بيضاء جاهزة للعمل باسم new_page_1.htm
كما في الصورة :
و إذا لم يتم فتح الصفحة البيضاء فنستطيع إنشاء صفحة جديدة بالضغط على
أيقونة الملف الأبيض في الخيارات أسفل القوائم كما في الصورة :
و بعد ذلك سنجد صفحة بيضاء جاهزة للعمل و أول ما علينا فعله هو حذف الكود
التلقائي الذي يوجد في الصفحة في منطقة الأكواد Code
.. طريقة حذفه هي اختيار منطقة الأكواد كما في الصورة و تظليل الكود
كاملاً و مسحه كما في الصورة :
بعد مسح الكود بالكامل نقوم بالعودة و الدخول إلى منطقة العمل و التصميم Design الموجودة بجانب منطقة الأكواد ... و سنجد
الصفحة بيضاء كما هي و ما علينا هو الضغط بزر الفأرة الأيمن على الصفحة و
اختيار الأمر Page Properties أي خصائص الصفحة ..
كما في الصورة :
و من ثم ستفتح لنا نافذة التعديل على خصائص الصفحة و في أول خيار و هو General نقوم باتباع الخطوات كما في الصورة :
و من ثم نقوم بالانتقال إلى الخيار Formatting و
نتبع ما هو موضح على الصورة التالية :
هنالك خطوة هامة و هي اختيار لون خلفية الصفحة و مطابقته للون الواجهة ..
فهنالك ألوان أساسية كالأبيض و الأحمر و لكن إذا كان اللون بني فاتح (بيج
مثلا) كيف يمكننا اختياره مطابقاً للون الخلفية ؟! .. الحل هو فتح ملف
الواجهة بالفوتوشوب و من ثم نقوم باختيار أداة تحديد اللون كما في الصورة :
و من ثم نضغط على لون الخلفية و سيتغير اللون إلى لون الخلفية في منطقة
الألوان .. بعد ذلك نضغط على منطقة الألوان على مربع اللون الأمامي كما هو
موضح :
و من ثم نقوم بنسخ كود اللون الظاهر لنا في نافذة اختيار الألوان كما هو
موضح في الصورة التالية :
بعد ذلك نقوم بالانتقال إلى الفرونت بيج مرة أخرى و عند القيام باختيار لون
الخلفية سنجد الأمر More Colors نقوم باختياره
كما في الصورة :
و من ثم ستظهر لنا نافذة اختيار الألوان و ما علينا سوى لصق الكود الذي تم
نسخه في خانة كود اللون كما هو موضح :
الآن نقوم بالانتقال إلى الخيار Advanced في
نافذة خصائص الصفحة و نتبع ما هو موضح في الصورة التالية :
إذا قمنا بتفعيل خيار تغيير شكل الرابط الذي تم توضيحه بالصورة السابقة ..
نقوم بالضغط على زر Rollover style و من ثم ستظهر
لنا نافذة تعديل خصائص الرابط عند وضع مؤشر الفأرة عليه كما هو موضح و
مشروح بالصورة التالية :
و بعد ذلك نقوم بحفظ الخصائص بالضغط على زر OK ..
الآن سنجد أن الصفحة تم تغييرها على حسب الخصائص ، الأبعاد
، لون الخلفية و غيرها ... الآن نقوم بإنشاء جدول بثلاثة أعمدة و
ثلاثة صفوف عن طريق اختيار الخيار Table من
الخيارات في الأعلى و من ثم اختيار Insert ثم Table كما هو موضح في الصورة التالية :
الآن ستظهر لنا نافذة خصائص الجدول نقوم باتباع ما هو موضح في الصورة
التالية :
الآن سيظهر لنا جدول بثلاثة أعمدة و ثلاثة صفوف ... نقوم بتظليل الصف الأول
بالكامل كما هو موضح :
و من ثم نضغط عليه بزر الفأرة الأيمن و نقوم باختيار الخاصية Merge Cells كما في الصورة التالية :
و سنجد أن الصف الأول أصبح مكون من عامود واحد فقط ... نكرر العملية بتظليل
الصف الثالث و دمجه بنفس الخاصية أيضاً ... الآن أصبح لدينا عامود واحد في
الصف الأول و الثالث و ثلاثة أعمدة في الصف الثاني ... بعد ذلك نقوم
بالضغط بزر الفأرة الأيمن على العامود الأيمن في الصف الثاني و نقوم
باختيار Cell Properties كما هو موضح :
و من ثم ستظهر لنا نافذة خصائص الخلية و فقط ما علينا هو تحديد العرض بالبكسل و هو عرض صورة العامود الأيمن التي تم تخزينها
و الصورة في عملي تم تخزينها بعرض 14 بكسل كما هو موضح بالصورة التالية :
بعد ذلك نقوم بتكرار نفس العملية للعامود الأيسر و نضع عرض صورة العامود
الأيسر لدينا و اختياره كخلفية و حفظ الخصائص ... و من ثم نقوم بالضغط بزر
الفأرة الأيمن على منطقة العامود الوسط و اختيار الخاصية نفسها Cell Properties و من ثم نقوم فقط بتحديد العرض للعامود
الأوسط و هو ناتج طرح مجموع عرض العامودين الأيمن و الأيسر من عرض الواجهة
نفسها أي كالتالي ( أنا شايف احنا غيرنا رياضيات و
مسائل و حسابات شو القصة
) :
779 عرض الواجهة - (28
ناتج مجموع عرض العامودين الأيمن و الأيسر) = 751
بكسل عرض العامود الوسط ... نقوم بوضع الناتج النهائي 751
في خانة العرض و نحفظ الخصائص ...
الآن كل شيء جاهز و ما علينا إلا الذهاب إلى مجلد الصور images
الذي قمنا بإنشائه في مجلد الموقع Allulu Web و
نسخ الصورة العليا up و من ثم ننتقل للفرونت
بيج و نلصقها داخل العامود العلوي في الصف الأول .. و نكرر العملية بنسخ
الصورة السفلية down و لصقها في الفرونت بيج
داخل العامود السفلي في الصف الثالث .. و تصبح الواجهة مكتلمة كما في
الصورة التالية :
الآن ما علينا سوى تخزين الصفحة و هي الصفحة الرئيسية index.htm
الرئيسية للموقع .. نقوم بالضغط على أيقونة الحفظ في الأعلى كما هو موضح
في الصورة التالية :
و من ثم ستظهر نافذة لاختيار مسار تخزين الصفحة و نقوم بتخزينها في مجلد Allulu Web الخاص بالموقع الذي تم إنشاؤه في أول عملنا
... و سيكون اسم الصفحة بالتأكيد index.htm كما
هو موضح في الصورة التالية :
أتمنى أن تكون هذه الحلقة واضحة و الحلقة بالتأكيد تحتاج للتركيز ... فإن
كان هناك خطأ بكلمة أو شرح خطوة فالعذر من الله إخواني ثم منكم ... و أتمنى
لكم التوفيق .. انتظرونا بالحلقة القادمة ... و شكراً لكم و السلام عليكم و
رحمة الله و بركاته
ملاحظة : تم إرفاق ملف مضغوط بمحتوى الواجهة الذي تم
شرحه للفائدة فقط
لملفات المرفقة
بعد أن انتهينا إخواني الكرام من تصميم و تقطيع الواجهة و أقسامها ... نأتي
الآن لمعرفة كيفية تركيب الواجهة على برنامج الفرونت بيج ... باسم الله
نبدأ :
ملاحظة هامة : الحلقة شبيهة
بالحلقة الرابعة و لكنها بتفصيل أكثير و إعادة للتركيز بكيفية التركيب و
التعامل مع الجداول و الفرونت بيج بشكل عام لنتمكن من تركيب الأقسام بشكل
ملائم و بدقة أكثر
قم بتحميل برنامج الفرونت بيج 2003
من الرابط التالي :
اضغط هنا
الآن نقوم بتجهيز صور الواجهة التي تم تقطيعها و هي كالتالي :
up صورة البانر العلوي :
down صورة الفوتر السفلي :
right العامود الأيمن :
left العامود الأيسر :
و من ثم نقوم بإنشاء مجلد جديد خاص بملفات و صور و صفحات الموقع على سطح
المكتب مثلاً كما في الصورة التالية :
[1] نضغط بزر الماوس الأيمن على الشاشة و من ثم
نضع مؤشر الفأرة على New
[2] نقوم باختيار Folder
و من ثم سيتم إنشاء مجلد جديد و نقوم بكتابة اسم المجلد و يفضل باللغة
الإنجليزية مثلاً Allulu Web و نضغط على مفتاح Enter ... و من ثم من الأفضل أن نقوم بإنشاء مجلد آخر
داخل مجلد الموقع باسم images لتخزين الصور فيه
.. و أهم خطوة هي أن ننقل جميع الصور التي سيتم
استخدامها في الواجهة إلى مجلد الصور الذي تم إنشاؤه images
لنستخدمها من المجلد الخاص بالموقع و ليس من المسار المخزنة عليه في الأصل
.. الآن نقوم بفتح برنامج الفرونت بيج :
و من ثم ستفتح لنا صفحة بيضاء جاهزة للعمل باسم new_page_1.htm
كما في الصورة :
و إذا لم يتم فتح الصفحة البيضاء فنستطيع إنشاء صفحة جديدة بالضغط على
أيقونة الملف الأبيض في الخيارات أسفل القوائم كما في الصورة :
و بعد ذلك سنجد صفحة بيضاء جاهزة للعمل و أول ما علينا فعله هو حذف الكود
التلقائي الذي يوجد في الصفحة في منطقة الأكواد Code
.. طريقة حذفه هي اختيار منطقة الأكواد كما في الصورة و تظليل الكود
كاملاً و مسحه كما في الصورة :
بعد مسح الكود بالكامل نقوم بالعودة و الدخول إلى منطقة العمل و التصميم Design الموجودة بجانب منطقة الأكواد ... و سنجد
الصفحة بيضاء كما هي و ما علينا هو الضغط بزر الفأرة الأيمن على الصفحة و
اختيار الأمر Page Properties أي خصائص الصفحة ..
كما في الصورة :
و من ثم ستفتح لنا نافذة التعديل على خصائص الصفحة و في أول خيار و هو General نقوم باتباع الخطوات كما في الصورة :
و من ثم نقوم بالانتقال إلى الخيار Formatting و
نتبع ما هو موضح على الصورة التالية :
هنالك خطوة هامة و هي اختيار لون خلفية الصفحة و مطابقته للون الواجهة ..
فهنالك ألوان أساسية كالأبيض و الأحمر و لكن إذا كان اللون بني فاتح (بيج
مثلا) كيف يمكننا اختياره مطابقاً للون الخلفية ؟! .. الحل هو فتح ملف
الواجهة بالفوتوشوب و من ثم نقوم باختيار أداة تحديد اللون كما في الصورة :
و من ثم نضغط على لون الخلفية و سيتغير اللون إلى لون الخلفية في منطقة
الألوان .. بعد ذلك نضغط على منطقة الألوان على مربع اللون الأمامي كما هو
موضح :
و من ثم نقوم بنسخ كود اللون الظاهر لنا في نافذة اختيار الألوان كما هو
موضح في الصورة التالية :
بعد ذلك نقوم بالانتقال إلى الفرونت بيج مرة أخرى و عند القيام باختيار لون
الخلفية سنجد الأمر More Colors نقوم باختياره
كما في الصورة :
و من ثم ستظهر لنا نافذة اختيار الألوان و ما علينا سوى لصق الكود الذي تم
نسخه في خانة كود اللون كما هو موضح :
الآن نقوم بالانتقال إلى الخيار Advanced في
نافذة خصائص الصفحة و نتبع ما هو موضح في الصورة التالية :
إذا قمنا بتفعيل خيار تغيير شكل الرابط الذي تم توضيحه بالصورة السابقة ..
نقوم بالضغط على زر Rollover style و من ثم ستظهر
لنا نافذة تعديل خصائص الرابط عند وضع مؤشر الفأرة عليه كما هو موضح و
مشروح بالصورة التالية :
و بعد ذلك نقوم بحفظ الخصائص بالضغط على زر OK ..
الآن سنجد أن الصفحة تم تغييرها على حسب الخصائص ، الأبعاد
، لون الخلفية و غيرها ... الآن نقوم بإنشاء جدول بثلاثة أعمدة و
ثلاثة صفوف عن طريق اختيار الخيار Table من
الخيارات في الأعلى و من ثم اختيار Insert ثم Table كما هو موضح في الصورة التالية :
الآن ستظهر لنا نافذة خصائص الجدول نقوم باتباع ما هو موضح في الصورة
التالية :
الآن سيظهر لنا جدول بثلاثة أعمدة و ثلاثة صفوف ... نقوم بتظليل الصف الأول
بالكامل كما هو موضح :
و من ثم نضغط عليه بزر الفأرة الأيمن و نقوم باختيار الخاصية Merge Cells كما في الصورة التالية :
و سنجد أن الصف الأول أصبح مكون من عامود واحد فقط ... نكرر العملية بتظليل
الصف الثالث و دمجه بنفس الخاصية أيضاً ... الآن أصبح لدينا عامود واحد في
الصف الأول و الثالث و ثلاثة أعمدة في الصف الثاني ... بعد ذلك نقوم
بالضغط بزر الفأرة الأيمن على العامود الأيمن في الصف الثاني و نقوم
باختيار Cell Properties كما هو موضح :
و من ثم ستظهر لنا نافذة خصائص الخلية و فقط ما علينا هو تحديد العرض بالبكسل و هو عرض صورة العامود الأيمن التي تم تخزينها
و الصورة في عملي تم تخزينها بعرض 14 بكسل كما هو موضح بالصورة التالية :
بعد ذلك نقوم بتكرار نفس العملية للعامود الأيسر و نضع عرض صورة العامود
الأيسر لدينا و اختياره كخلفية و حفظ الخصائص ... و من ثم نقوم بالضغط بزر
الفأرة الأيمن على منطقة العامود الوسط و اختيار الخاصية نفسها Cell Properties و من ثم نقوم فقط بتحديد العرض للعامود
الأوسط و هو ناتج طرح مجموع عرض العامودين الأيمن و الأيسر من عرض الواجهة
نفسها أي كالتالي ( أنا شايف احنا غيرنا رياضيات و
مسائل و حسابات شو القصة
) :779 عرض الواجهة - (28
ناتج مجموع عرض العامودين الأيمن و الأيسر) = 751
بكسل عرض العامود الوسط ... نقوم بوضع الناتج النهائي 751
في خانة العرض و نحفظ الخصائص ...
الآن كل شيء جاهز و ما علينا إلا الذهاب إلى مجلد الصور images
الذي قمنا بإنشائه في مجلد الموقع Allulu Web و
نسخ الصورة العليا up و من ثم ننتقل للفرونت
بيج و نلصقها داخل العامود العلوي في الصف الأول .. و نكرر العملية بنسخ
الصورة السفلية down و لصقها في الفرونت بيج
داخل العامود السفلي في الصف الثالث .. و تصبح الواجهة مكتلمة كما في
الصورة التالية :
الآن ما علينا سوى تخزين الصفحة و هي الصفحة الرئيسية index.htm
الرئيسية للموقع .. نقوم بالضغط على أيقونة الحفظ في الأعلى كما هو موضح
في الصورة التالية :
و من ثم ستظهر نافذة لاختيار مسار تخزين الصفحة و نقوم بتخزينها في مجلد Allulu Web الخاص بالموقع الذي تم إنشاؤه في أول عملنا
... و سيكون اسم الصفحة بالتأكيد index.htm كما
هو موضح في الصورة التالية :
أتمنى أن تكون هذه الحلقة واضحة و الحلقة بالتأكيد تحتاج للتركيز ... فإن
كان هناك خطأ بكلمة أو شرح خطوة فالعذر من الله إخواني ثم منكم ... و أتمنى
لكم التوفيق .. انتظرونا بالحلقة القادمة ... و شكراً لكم و السلام عليكم و
رحمة الله و بركاته
ملاحظة : تم إرفاق ملف مضغوط بمحتوى الواجهة الذي تم
شرحه للفائدة فقط
لملفات المرفقة
 | Allulu Web.zip (161.9 كيلوبايت, عدد مرات المشاهدة 703 مرة) |
