xpredo script

العودة   منتدى نيو حب > منتديات الحاسب والاتصالات > تحميل برامج - برامج كامله - برامج مجانية > شرح البرامج - برامج مشروحه

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

شرح البرامج - برامج مشروحه

03-05-2006, 09:44 PM
sweety byby
 
Thumbs up تعلم طريقة تصميم الجداول مع FrontPage -الدرس الرابع

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



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

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

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

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

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

[IMG]http://lessons.***********/upload/0015.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0016.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0016.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0018.gif[/IMG]

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

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

[IMG]http://lessons.***********/upload/0019.gif[/IMG]

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

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

[IMG]http://lessons.***********/upload/0020.gif[/IMG]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[IMG]http://lessons.***********/upload/0021.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0022.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0023.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0024.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0025.gif[/IMG]

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

[IMG]http://lessons.***********/upload/0026.gif[/IMG]

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


[IMG]http://lessons.***********/upload/0027.gif[/IMG]
من مواضيع : sweety byby التجارة الالكترونية( طرق الدفع عن طريق الانتر نت)
الدرس الثالث من احتراف الشبكات
تعلم طريقة تصميم الجداول مع FrontPage -الدرس الثالث-
كاملاً مع شرح بالصور++شرح الجدار الناري القوي الرئع Armor2net3.12
شرح كامل لبرنامج winamp5.08pro
 

الكلمات الدلالية (Tags)
مع, الجداول, الجرس, الرابع, تصميم, تعلم, frontpage, طريقة

أدوات الموضوع

الانتقال السريع

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

الساعة الآن 02:29 AM.