تعلم طريقة تصميم الجداول مع FrontPage -الدرس الرابع-

بسم الله الرحمن الرحيم

الجدول الجديد لن نقوم بتغير أي شيء من حجمه وسنتركه كما هو كل ما سنقوم به هنا هو تضليل كل الخلايا لهذا الجدول واختيار (خصائص الخلية) بالنقر بالزر اليمين للماوس على المساحات المضللة واختيار لون الخلفية بلون يتناسب مع اللون الذي اخترناه للبنر .. سأختار لون قريب من درجة اللون وهو (Hex=00,66,99) على FrontPage وتكوين الرقم الست عشري #006699)) ونختار موافق:

قم الآن بإلغاء الحدود لهذا الجدول أو يمكننا إضافة لمسة جمالية هنا بتغير لون الحدود للجدول باللون الأبيض كخلفية الموقع (خصائص الجدول > حدود اللون) أصبح الجدول الآن جاهز للعمل:

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

لمزيد من الإضافات الجميلة على النصوص حاول دائماً استخدام الخطوط التي تعتمدها المتصفحات كخطوط افتراضية مع مراعاة أن الخط قد ليكون بالضرورة موجود على جميع أجهزة الزوار .. وأيضاً حجم الخط المستخدم للصفحة المفعّلة (التي يتصفحها الزائر) يجب أن يختلف عن الحجم لبقية الروابط الأخرى من شريط التصفح الرئيسي.

لنفرض أن الخط الذي سنستخدمه هنا هو Tahoma و فارق الحجم بين الرابط المفعّل والروابط الأخرى هو +1 أي أن الرابط المفعّل يكون حجمه (2 (10 pt)) والروابط الأخرى (1 ( 8 pt)) حسب وحدات الحجم التي يعتمدها FrontPage سيصبح شكل الجدول بعد التنسيق كما يلي:

سنلاحظ أن ارتفاع الجدول قد تناقص بعد تعديل حجم الخط دون تدخل منا وهذا سيساعدنا في عملية تنسيق الموقع بسبب استخدامنا طبعاً للجداول ..

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

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

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

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

1- عن الموقع
2- خدماتنا
3- أسعار التوصيل
4- حسابات العملاء
5- إدارة الموقع

نحتاج لجدول مكون من عامود و احد وخمسة صفوف لتنسيق الخمس روابط السابقة ولكن سيكون من السابق لأوانه تحديد هذا الجدول الآن والسبب أن المساحة المتبقية من الخلية اليمنى التي سنعمل عليها ستصبح عديمة النفع في المستقبل !! ما الحل ؟

الحل سهل جداً وهو التفكير بما سنحتاج هذه المساحة المهمة ؟ وماذا سنوفر من خدمات لزوارنا في صفحتنا الرئيسية؟ ..

بعض الحلول التي من الممكن أن تساعدنا في تجاوز هذه المشكلة هي:

1-خدمة تسجيل اسم المستخدم وكلمة السر لأعضاء الموقع.
2-خدمة التصويت وقوائم الاستفتاء .
3-خدمة محرك بحث للموقع.
4-خدمة القوائم البريدية .

والعديد من الحلول المنطقية لاستغلال المساحات الفارغة والتي تصب في مصلحة الموقع وتجذب العديد من الزوار الجدد والمحافظة على الزوار الدائمين للموقع ..

لنتفق على أن الخلية اليمنى من الجدول ستكون لعمل الآتي:

1-الروابط الفرعية للصفحة الرئيسية.
2-خدمة دخول أعضاء الموقع.
3-خدمة محرك البحث للموقع.
4-خدمة قائمة الاستفتاء.
5-خدمة القائمة البريدية للموقع.

==الصف الرابع==

سنستخدم مصطلح "مساحة العرض" لهذا الصف

قبل البدأ بعمل أي إضافات لهذا الصف الفارغ سنقوم بعمل الآتي:
زيادة ارتفاع الخلية ونجعل الارتفاع 50 بكسل وجعل المحاذاة العمودية للخلية لناحية الوسط (كلك يمين > خصائص الخلية ):

الآن سنقوم برسم جدول وحيد الأعمدة والصفوف (1X1) لتنسيق عملنا على هذا الصف:

بعد إخفاء الحدود لهذا الجدول سنجعل لون الخلفية له بنفس اللون الذي اخترناه لتبويب "الصفحة الرئيسية" بنفس الطريقة السابقة التي غيرنا لون الخلفية للخلايا السابقة (يمكن هنا استخدام خصائص الجدول أو خصائص الخلية للقيام بنفس العمل .. النتيجة واحده):

سنقوم الآن بتحديد جدول آخر داخل هذا الجدول مكون من عامودين وصف واحد (2X1) لمواصلة عملنا بإعداد سليم لمساحة العرض لصفحتنا الرئيسية:

الخلية اليمنى سنجعل العرض لها بـ 20% والمحاذاة الأفقية لليمين بينما المحاذاة العمودية للأعلى (خصائص الخلية) كما يلي:

الخلية الأخرى سنغير فقط العرض لـ80% بنفس الطريقة السابقة:

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

انتهينا الآن من نصف الطريق ويبقى علينا النصف الآخر..

درس تعلم طريقة تصميم الجداول مع FrontPage --