سلسلة دروس تعليم برنامج الفرونت بيج

اضافة عناصر فعاله لصفحة الانترنت

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


http://www.mwadah.com/images/imgcache/notfound.gif



سيظهر لنا المربع التالي الذي من خلاله سنتحكم بشكل الكبسه ولونها والكلام الذي بداخلها


http://www.mwadah.com/images/imgcache/notfound.gif



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

الان نود مثلا ان نضيف نص متحرك من اليمين نحو الشمال او بالعكس بالوان مختلفه .. في البدايه نتجه كما هو في الشكل التالي


http://www.mwadah.com/images/imgcache/notfound.gif



الان ستظهر لديك هذه الشاشه التي من خلالها بالامكان ان تضع الجمله التي تريدها وتتحكم بسرعة حركتها سواء من اليمين الى اليسار او بالعكس وكذلك التحكم بلون الخلفيه او لون الخط والاهم من ذلك عدد المرات التي يراد فيها الحركه ام تظل مستمره وذلك بأختيار اعدادت Repeat


http://www.mwadah.com/images/imgcache/notfound.gif

===================
اضافة ملفات فيديو

في هذا الدرس سنتعلم كيفية اضافة فيلم فيديو او مقطع من صور متحركة في صفحة الانترنت في البدايه يجب ان تضع المؤشر في المكان الذي تود ان يظهر فيه الفيلم ثم اتجه بالماوس كما هو موضح بالشكل التالي


http://www.mwadah.com/images/imgcache/notfound.gif



ستظهر لديك الشاشه التاليه لكي تحدد موقع الملف اوالفيلم المراد اضافته للصفحه مع ملاحظه انه يجب ان يكون احد الامتدادات المستخدمه في البرنامج حيث لايدعم برنامج الفرونت بيج غيرها من افلام فيديويه والامتدادات المستخدمه هي
avi , ra , ram


http://www.mwadah.com/images/imgcache/notfound.gif



والان وبعد ان قمت باختيار الموقع للملف سيظهر في الصفحه مستطيل اسود اللون الان مرر الماوس من فوقه واضغط على الكبسه اليمنى لتحدد خصائص عمل هذا الفيلم في صفحتك فتظهر لك قائمه بالشكل التالي


http://www.mwadah.com/images/imgcache/notfound.gif



الان قم بتحديد عدد المرات التي تود ان يظل الفيلم يعمل اي عند انتهاء الفيلم هل تود ان يظل اعاده العرض مرة اخرى اوتوماتيكيا لعدد محدد ام بدون عدد مرات محدده كذلك تحدد متى يبدأ هل عند بداية ضهور الصفحه او عند مرور الماوس فوق الفيلم


http://www.mwadah.com/images/imgcache/notfound.gif



الان وبعد الانتهاء ولكي ترى الفيلم يعرض على صفحتك كما تريد اذهب بالماوس نحو اليسار للاسفل وقم بأختيار
================

اضف عداد لصفحتك

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

http://www.mwadah.com/images/imgcache/notfound.gif


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

http://www.mwadah.com/images/imgcache/notfound.gif


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

http://www.mwadah.com/images/imgcache/notfound.gif


http://www.mwadah.com/images/imgcache/notfound.gif

استخدام خلفيات جاهزه

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


http://www.mwadah.com/images/imgcache/notfound.gif



ستظهر لديك الشاشه التاليه التي يتوفر فيها لديك العديد من الخلفيات الجاهزه


http://www.mwadah.com/images/imgcache/notfound.gif



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

===========


معالجة الصور

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


http://www.mwadah.com/images/imgcache/notfound.gif



بواسطة هذه الادوات نستطيع ان نقوم بالعديد من العمليات لمعالجه الصور مثل الكتابه عليها او اجراء دوران للصوره او جعل اطار لها في المثال التالي نوضح كيفيه اجراء صوره عاكسه للصورة الاصليه


http://www.mwadah.com/images/imgcache/notfound.gif




http://www.mwadah.com/images/imgcache/notfound.gif



كما لاحظنا انه في البرنامج يتوفر لدينا العديد من الادوات التي تغنينا عن استخدام برامج خاصه لمعالجة الصور اما حجم الصورة ودقتها فيحتاج الى برنامج خاص مثل فوتوشوب مثلا
=============

انشاء رابطه بين صفحتين

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

http://www.mwadah.com/images/imgcache/notfound.gif


الان نتجه كما هو موضح في الشكل التالي

http://www.mwadah.com/images/imgcache/notfound.gif


سوف تظهر لنا هذه الشاشه التي بواسطتها نحدد الصفحه أو الصوره المراد الانتقال اليها عند النقر بالماوس على عبارة الصفحه الاولى

http://www.mwadah.com/images/imgcache/notfound.gif


للتوضيح بشكل اكثر الرمز الايمن الذي يرمز للصفحة البيضاء يدل على انه سيتم الربط بصفحة جديده لم يتم انشائها اما الرمز الذي يليه الذي يحتوي على رسمه لظرف بريدي فيرمز للبريد اي انه يقوم بفتح برنامج اووت لوك لتحرير رسائل البريد والرمز الثالث يستخدم في حالة ربط الجمله بصفحه جاهزه وتم تخزينها في الجهاز سواء في الهارد دسيك او السي دي روم مثلا واخيرا الرمز الاخير في حالة الربط بصفحه موجوده على الانترنت والان وبعد ان قمنا بتحديد الصفحه المناسبه وقمنا بتحديد موقعها وانتهينا تظهر لدينا العباره كما هو موضح بالشكل التالي
http://www.mwadah.com/images/imgcache/notfound.gif

http://www.mwadah.com/images/imgcache/notfound.gif

خريطة الرسوم

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

في البدايه انقر بالماوس على الصوره واتجه نحو الاسفل حيث سيظهر الشريط التالي


http://www.mwadah.com/images/imgcache/notfound.gif



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

http://www.mwadah.com/images/imgcache/notfound.gif




http://www.mwadah.com/images/imgcache/notfound.gif



الان وبعد الانتهاء ستظهر لك الشاشة التاليه التي بواسطتها تحدد موقع الصفحه التي تود الانتقال اليها


http://www.mwadah.com/images/imgcache/notfound.gif



وكما ذكرنا سابقا يمكنك تحديد الصفحة التي سوف تظهر عند الكبس على الوصلة التي اصبحت المربع الاخضر وبذلك يمكنك ان تنشيء صورة لموقعك وتستخدمها كصفحة ويب وبها وصلات ومفاتيح تعمل عند مرور الماوس عليها

==============

استخدام الاطارات

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

http://www.mwadah.com/images/imgcache/notfound.gif


الان قم باختيار الاطارات الجاهزه المتوفره بسهوله مع البرنامج واختار احدها حيث يتوفر اكثر من شكل واكثر من اطار مثلا قد تحتاج الى استخدام اطارين فقط نحن الان وعلى سبيل المثال سنستخدم ثلاثة اطارات

http://www.mwadah.com/images/imgcache/notfound.gif


الان وبعد الاختيار ستظهر لنا الشاشه وقد قسمت الى ثلاثة اقسام وفي كل قسم ثلاثة كبسات الاولى للمساعده والثانيه لوضع مكان الاطار صفحة جاهزه تم تصميمها مسبقا والثالثه لانشاء صفحة بيضاء فارغه

http://www.mwadah.com/images/imgcache/notfound.gif


الان بامكانك ان تضيف ما تشاء في الصفحات الثلاثه ولاحظ اننا نسميها صفحات ثلاثة لانه يمكنك فعلا ربط ثلاث صفحات في هذا الاطار لتبدو لك كما في الشكل التالي مع ملاحظه هامه جدا وهي عند الانتهاء وعند عمليه حفظ الصفحه فانه يقوم فعليا بحفظ اربعه صفحات الاولى الاطار العام والملف الثاني للاطار الايمن والملف الثالث للاطار الايسر والملف الرابع للاطار العلوي
============
لتصفح الدرس بدون انترنت حمل المرفقات

========
التعرف على الجداول :

نصل الآن إلى واحد من أهم الدروس الأساسية في برنامج فرونت بيج

, حيث أن تصميم الموقع يفضل أن يكون ضمن جداول حتى تضمن أن يظهر

المظهر نفسه للموقع الذي صممته في كل أجهزة الكمبيوتر وعلى جميع

دقات الشاشة إضافة إلى أهم أنواع مستكشفات الانترنيت .

وبالتالي إذا أجدت استخدام الجداول في صفحات الويب

يتيح لك قدراً هائلاً من التحكم في وضع الصور

والنصوص داخل الصفحات . والجداول عبارة

عن هياكل شبكية مستطيلة ، تستطيع إنشاءها

لتحوي بداخلها صوراً أو نصوصاً .

تسمى مجموعة الخلايا الأفقية بـ " صف " ،

في حين تسمى مجموعة الخلايا الرأسية بـ " عمود " .
انشاء الجداول :

لإنشاء جدول :

1- قم بإنشاء صفحة جديدة فارغة .

2- من قائمة Table ، حدد أمر
Insert ثم Table لتفتح مربع حوار
Insert Table ( انظر الشكل 1 - 4 ) .

http://www.mwadah.com/images/imgcache/2006/05/34.gif


1 - 4
الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين

،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout

وكذلك خيار Specify width . انقر زر ok سيتم إنشاء

الجدول ويظهر في الصفحة .

التعرف على أحجام الجداول :

يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض

الجدول وفق النسبة المئوية لحجم الشاشة أو عدد البكسلات .

بكسلات Pixels عناصر الصورة أو البكسلات

هي أصغر وحدات تستخدم معاً لعرض المعلومات على الشاشة

، ومن المرجح أنك سمعت المصطلح المستخدم

لوصف درجة وضوح العرض على الشاشة . على سبيل المثال

، من درجات الوضوح الشائعة درجتا 640X 480 و 800X 600.

هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً )

المعروضة على الشاشة التي تستخدمها .

عندما تحدد عرض الجدول وفق نسبة مئوية معينة ،

فإن العرض سيكون نسبياً ، أي وفق نسبة عرض الشاشة .

أما إذا حددت الجدول وفق عدد معين من البكسلات فإنك تحدد عرضاً مطلقاً للجدول .

لتغيير عرض الجدول :

1- ضع مؤشر الكتابة داخل الجدول .

2- من قائمة Table ، حدد خيار Select ثم Table .

3- من قائمة Table ، حدد خيار Table Properties

ثم Table لتفتح مربع حوار Table Properties ( انظر الشكل 2-4 ) .


http://www.mwadah.com/images/imgcache/2006/05/35.gif



2 - 4
4- في جزء Specify width ، حدد خيار In Pixels ثم اضبط القيمة على 400 .

5- انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .

ارتفاع الجدول :
تستطيع أيضاً أن تعدل ارتفاع الجدول من خلال مربع حوار

Table Properties رغم أن معظم مصممي صفحات

الويب لا يهتمون بارتفاع الجدول قدر اهتمامهم بعرضه .

ويتم عادة ضبط ارتفاع الجدول تلقائياً بحسب المحتوى الموجود

داخل الجدول أو الخلايا الفردية ، وإذا قررت تغيير ارتفاع الجدول

، يمكنك فقط أن تجري تعديلات مطلقة وفق عدد معين من البكسلات .

حدد خيار Specify height ثم اكتب عدد البكسلات

الذي تريد أن تحدده لارتفاع الجدول .

التعامل مع تخطيط الجداول

حدد قيم تخطيط الجدول بأرقام أعلى من القيم العادية .

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

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties

ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Borders ، غير الحجم Size إلى 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته

على حجم الحد في الجدول ( انظر الشكل3 - 4 ) .

حدود غير مرئية :
توجد أيضاً طريقة تنفذها في تغيير حجم حد الجدول

، اضبط الحجم على صفر ، وسيصبح حد الجدول غير مرئي

عند عرضه في مستعرض الويب . تظهر فائدة هذه الخاصية

عندما تستعين بالجدول في ضبط مكان الصور والنصوص

داخل صفحات الويب بدقة وهو أمر بالغ الأهمية حيث ننصح

جميع المصممين أن يكون عملهم ضمن جداول ضماناً لعدم

تغيير شكل الموقع عند تغيير دقة الشاشة أو عند تغيير المتصفح .

http://www.mwadah.com/images/imgcache/2006/05/36.gif


3 - 4
أيضاً يكنك الاستعانة بحشو الخلايا cell padding .

لتغيير حشو الخلايا :
1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم

Table لتفتح مربع حوار Table Properties .

3- في جزء Layout ، اضبط خانة Cell padding على 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا ( انظر الشكل 4 - 4) .


http://www.mwadah.com/images/imgcache/2006/05/37.gif
4 - 4

يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .
لتغيير المسافة بين الخلايا :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Table Properties ثم Table
لتفتح مربع حوار Table Properties .
3- في جزء Layout ، اضبط خانة Cell spacing على 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته

على المسافة بين الخلايا ( انظر الشكل 5 - 4 ) .

http://www.mwadah.com/images/imgcache/2006/05/38.gif



5 - 4
التعامل مع ألوان الجداول :
يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال الحدود الفاتحة light border والحدود الداكنة dark border.
لتحديد لون حدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان .
4- حدد خيار Red لتظهر حدود الجدول باللون الأحمر .
5- انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .
يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول
لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Table Properties ثم
Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة
light Border لتفتح لوحة الألوان الخاصة بها .
4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .
5- ومن نفس الجزء انقر سهم القائمة المنسدلة
Dark Border لتفتح لوحة الألوان الخاصة بها .
6- حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .
7- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون
الحدود الفاتحة والداكنة للجدول ( انظر الشكل 6 - 4 ) .

http://www.mwadah.com/images/imgcache/2006/05/39.gif

========
التعرف على الجداول :

نصل الآن إلى واحد من أهم الدروس الأساسية في برنامج فرونت بيج

, حيث أن تصميم الموقع يفضل أن يكون ضمن جداول حتى تضمن أن يظهر

المظهر نفسه للموقع الذي صممته في كل أجهزة الكمبيوتر وعلى جميع

دقات الشاشة إضافة إلى أهم أنواع مستكشفات الانترنيت .

وبالتالي إذا أجدت استخدام الجداول في صفحات الويب

يتيح لك قدراً هائلاً من التحكم في وضع الصور

والنصوص داخل الصفحات . والجداول عبارة

عن هياكل شبكية مستطيلة ، تستطيع إنشاءها

لتحوي بداخلها صوراً أو نصوصاً .

تسمى مجموعة الخلايا الأفقية بـ " صف " ،

في حين تسمى مجموعة الخلايا الرأسية بـ " عمود " .
انشاء الجداول :

لإنشاء جدول :

1- قم بإنشاء صفحة جديدة فارغة .

2- من قائمة Table ، حدد أمر
Insert ثم Table لتفتح مربع حوار
Insert Table ( انظر الشكل 1 - 4 ) .

http://www.mwadah.com/images/imgcache/2006/05/34.gif


1 - 4
الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين

،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout

وكذلك خيار Specify width . انقر زر ok سيتم إنشاء

الجدول ويظهر في الصفحة .

التعرف على أحجام الجداول :

يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض

الجدول وفق النسبة المئوية لحجم الشاشة أو عدد البكسلات .

بكسلات Pixels عناصر الصورة أو البكسلات

هي أصغر وحدات تستخدم معاً لعرض المعلومات على الشاشة

، ومن المرجح أنك سمعت المصطلح المستخدم

لوصف درجة وضوح العرض على الشاشة . على سبيل المثال

، من درجات الوضوح الشائعة درجتا 640X 480 و 800X 600.

هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً )

المعروضة على الشاشة التي تستخدمها .

عندما تحدد عرض الجدول وفق نسبة مئوية معينة ،

فإن العرض سيكون نسبياً ، أي وفق نسبة عرض الشاشة .

أما إذا حددت الجدول وفق عدد معين من البكسلات فإنك تحدد عرضاً مطلقاً للجدول .

لتغيير عرض الجدول :

1- ضع مؤشر الكتابة داخل الجدول .

2- من قائمة Table ، حدد خيار Select ثم Table .

3- من قائمة Table ، حدد خيار Table Properties

ثم Table لتفتح مربع حوار Table Properties ( انظر الشكل 2-4 ) .


http://www.mwadah.com/images/imgcache/2006/05/35.gif



2 - 4
4- في جزء Specify width ، حدد خيار In Pixels ثم اضبط القيمة على 400 .

5- انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .

ارتفاع الجدول :
تستطيع أيضاً أن تعدل ارتفاع الجدول من خلال مربع حوار

Table Properties رغم أن معظم مصممي صفحات

الويب لا يهتمون بارتفاع الجدول قدر اهتمامهم بعرضه .

ويتم عادة ضبط ارتفاع الجدول تلقائياً بحسب المحتوى الموجود

داخل الجدول أو الخلايا الفردية ، وإذا قررت تغيير ارتفاع الجدول

، يمكنك فقط أن تجري تعديلات مطلقة وفق عدد معين من البكسلات .

حدد خيار Specify height ثم اكتب عدد البكسلات

الذي تريد أن تحدده لارتفاع الجدول .

التعامل مع تخطيط الجداول

حدد قيم تخطيط الجدول بأرقام أعلى من القيم العادية .

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

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties

ثم Table لتفتح مربع حوار Table Properties .

3- في جزء Borders ، غير الحجم Size إلى 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته

على حجم الحد في الجدول ( انظر الشكل3 - 4 ) .

حدود غير مرئية :
توجد أيضاً طريقة تنفذها في تغيير حجم حد الجدول

، اضبط الحجم على صفر ، وسيصبح حد الجدول غير مرئي

عند عرضه في مستعرض الويب . تظهر فائدة هذه الخاصية

عندما تستعين بالجدول في ضبط مكان الصور والنصوص

داخل صفحات الويب بدقة وهو أمر بالغ الأهمية حيث ننصح

جميع المصممين أن يكون عملهم ضمن جداول ضماناً لعدم

تغيير شكل الموقع عند تغيير دقة الشاشة أو عند تغيير المتصفح .

http://www.mwadah.com/images/imgcache/2006/05/36.gif


3 - 4
أيضاً يكنك الاستعانة بحشو الخلايا cell padding .

لتغيير حشو الخلايا :
1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم

Table لتفتح مربع حوار Table Properties .

3- في جزء Layout ، اضبط خانة Cell padding على 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا ( انظر الشكل 4 - 4) .


http://www.mwadah.com/images/imgcache/2006/05/37.gif
4 - 4

يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .
لتغيير المسافة بين الخلايا :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Table Properties ثم Table
لتفتح مربع حوار Table Properties .
3- في جزء Layout ، اضبط خانة Cell spacing على 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته

على المسافة بين الخلايا ( انظر الشكل 5 - 4 ) .

http://www.mwadah.com/images/imgcache/2006/05/38.gif



5 - 4
التعامل مع ألوان الجداول :
يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال الحدود الفاتحة light border والحدود الداكنة dark border.
لتحديد لون حدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان .
4- حدد خيار Red لتظهر حدود الجدول باللون الأحمر .
5- انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .
يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول
لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Table Properties ثم
Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة
light Border لتفتح لوحة الألوان الخاصة بها .
4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .
5- ومن نفس الجزء انقر سهم القائمة المنسدلة
Dark Border لتفتح لوحة الألوان الخاصة بها .
6- حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .
7- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون
الحدود الفاتحة والداكنة للجدول ( انظر الشكل 6 - 4 ) .

http://www.mwadah.com/images/imgcache/2006/05/39.gif