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

[مصطفى عدوية]

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



انتهينا في السابق من عمل شعار الموقع وتخصيص مساحة البنر الإعلاني لموقعنا في الصفين الأول والثاني ويبقى من خلايا الجدول الرئيسي ثلاثة صفوف أخرى !!

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

1- قسم البرامج Software
2- قسم العتاد Hardware
3- قسم الدعم الفني
4- الأسئلة المتكررة AFQs
5- المساعدة

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

==الصف الثالث==
في البداية سنقوم بتحديد جدول جديد داخل هذا الصف (الخلية) يتكون من 6 أعمدة و صف واحد -6X1- حسب الأقسام الرئيسية الستة التي سنقوم بعملها:

http://lessons.roro44.com/upload/0015.gif

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

http://lessons.roro44.com/upload/0016.gif

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

http://lessons.roro44.com/upload/0016.gif

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

http://lessons.roro44.com/upload/0018.gif

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

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

http://lessons.roro44.com/upload/0019.gif

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

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

http://lessons.roro44.com/upload/0020.gif

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://lessons.roro44.com/upload/0021.gif

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

http://lessons.roro44.com/upload/0022.gif

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

http://lessons.roro44.com/upload/0023.gif

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

http://lessons.roro44.com/upload/0024.gif

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

http://lessons.roro44.com/upload/0025.gif

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

http://lessons.roro44.com/upload/0026.gif

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

http://lessons.roro44.com/upload/0027.gif

[nana hacker]

thxxxxxxxxxxxxxxxxxxxx