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







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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://www.traidnt.net/vb/showthread.php?p=9975806#post9975806


الحلقة الاولي __ الحلقة الثانية __ الحلقة الثالثة __ الحلقة الرابعة _ الحلقة الخامسة _ الحلقة السادسة_ الحلقة السابعة__ الحلقة الثامنة