fbpx

8- التعامل مع الجداول فى الفرونت بيدج | اللى حصل

30 يوليو 2020
التصنيف :
مهاراتك

وسوم :


الدرس الثامن – التعامل مع الجداول


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

إنشاء جدول

سنبدأ الآن بالطريقة المباشرة بمعنى أنك تريد إنشاء جدول مكون من عدد معين من الصفوف والأعمدة ، وسنفترض مثلاً أننا نريد إنشاء جدول مكون من ثلاثة صفوف وأربعة أعمدة .

في البداية قم أولاً بإنشاء موقع جديد في Front Page  استناداً إلى القالب One Page Web ، بعد ذلك اتبع الخطوات التالية للتعرف على طريقتين من طرق إنشاء الجداول .

إنشاء جدول بإستخدام شريط الأدوات :

1. ضع مؤشر الفأرة في بداية السطر الذي تريده إدراج بداية الجدول فيه .

2. في شريط الأدوات ، أنقر فوق الزر   Insert Table مع الإبقاء عليه مضغوطاً .

3. قم بسحب مؤشر الفأرة إلى أسفل ثم إلى اليمين حتى تظهر المربعات التي تمثل عدد الصفحات والأعمدة التي تريدها .

4. أترك مؤشر الفأرة ، ليتم رسم الجدول داخل الصفحة.

الحد الأقصى للجدول الذي يمكنك إنشاؤه بهذه الطريقة مكون من 25 صف و 25 عمود

إنشاء جدول باستخدام قائمة Table :

1. ضع مؤشر الفأرة في بداية السطر الذي تريده إدراج بداية الجدول فيه .

2. من قائمة Table اختر البند ثم Insert ثم Table ، ليظهر لك مربع الحوار Insert Table .

3. في خانة Rows قم بتحديد عدد الصفوف وفي خانة Columns قم بتحديد عدد الأعمدة ، ثم انقر فوق الزر Ok .

تحرير الخلايا :

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

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

يمكنك أيضاً ضبط خصائص كل خلية من خلايا الجدول، ولأداء ذلك اتبع الخطوات التالية :

1. حدد الخلية ( أو الخلايا) التي تريد ضبط خصائصها.

2. انقر بزر الفأرة الأيمن ، ثم اختر البند Cell Properties ليظهر لك مربع الحوار Cell Properties .

3. قم بإجراء التعديلات المطلوبة .

4. انقر فوق الزر Ok .

والتعديلات التي يمكنك إجراءها من خلال مربع الحوار Cell Properties تتلخص في التالي :

* Horizontal alignment : لتحديد وضع المحاذاة الأفقية للنص الموجود داخل الخلية .

* Vertical alignment : لتحديد وضع المحاذاة الرأسية للنص الموجود داخل الخلية .

* Row Spanned : لتحديد عدد صفوف الجدول التي تمتد الخلية لتكافئها .

* Columns Spanned : لتحديد عدد أعمدة الجدول التي تمتد الخلية لتكافئها .

* Header cell : لتتميز الخلية باعتبارها إحدى رؤوس الصفوف أو الأعمدة ، وعادة ما يظهر النص الموجود داخل تلك الخلية من خلال مستعرض الويب بخط أسود عريض Bold .

* No Warp : لجعل الخلية تغير عرضها بحيث يكون النص الموجود داخلها على سطر واحد ، بدلاً من تقسيمه على عدة أسطر .

* Cell Direction : لتحديد اتجاه النص داخل الخلية من اليسار إلى اليمين Left-to-Right أو من اليمين إلى اليسار Right-to-Left ، وبالطبع إذا كانت الخلية تحتوي على نصوص عربية فستختار Right-to-Left .

* Specify Width : لتحديد عرض الخلية بوحدة البيكسل Pixel أو بنسبة مئوية من العرض الكلي للجدول .

* Specify Height : لتحديد ارتفاع الخلية بوحدة البيكسل Pixel أو بنسبة مئوية من العرض الكلي للجدول .

* Borders : لتغيير ألوان حدود الخلية لتمييزها عن باقي خلايا الجدول .

* Background : لتغيير ألوان خلفية الخلية ، أو تحديد صور لخلفيتها لتمييزها عن باقي خلايا الجدول، ولاختيار صورة أنقر فوق الزر Browse وحدد موقع ملف الصورة .

إضافة وحذف الصفوف والأعمدة :

إذا أردت تغيير مساحة الجدول أو إضافة أو حذف صفوف أو أعمدة ، اتبع الخطوات التالية :

لإضافة صف أو عمود :

1. ضع مؤشر الفأرة في أي خلية من الصف أو العمود الذي تريد إضافة صف أو عمود بجانبه .

2. من قائمة Table اختر البند Insert ثم Rows or Columns ليظهر لك مربع الحوار Insert Rows or Columns .

3. اختر Rows لإضافة صف ( أو صفوف ) ، أو اختر Columns لإضافة عمود ( أو أعمدة ) .

4. في خانة Number of Rows/Columns ، حدد عدد الصفوف أو الأعمدة التي تريد إضافتها.

5. في الجزء Location ، اختر موضع إضافة الصفوف Above Selection أي أعلى الصفوف المحددة أو Below selection أي أسفل الصفوف المحددة ، وفي حالة الأعمدة اختر Left of selection أي على يسار الأعمدة المحددة أو Right of selection أي على يمين الأعمدة المحددة .

6. انقر فوق الزر Ok .

لحذف صف أو عمود :

1. باستخدام الفأرة قم بتحديد الصف أو العمود الذي تريد حذفه ، ويكفي أن تضع مؤشر الفأرة على حافة العمود العلوية ، أو حافة الصف اليسرى ( أو اليمنى إذا كان يحتوي على نصوص عربية ) وستجد أن مؤشر الفأرة تحول إلى شكل سهم أسود اللون ، عندها أنقر لاختيار الصف أو العمود .

2. انقر بزر الفأرة الأيمن فوق الصف أو العمود المحدد، ثم اختر البند Delete Cells ، أو اختر البند Delete Cells من قائمة Table .

خصائص الجدول :

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

1. انقر بزر الفأرة الأيمن فوق أي مكان من الجدول ثم اختر البند Table Properties ليظهر لك مربع الحوار Table Properties .

2. قم بإجراء التعديلات المطلوبة .

3. انقر فوق الزر Ok .

والتعديلات التي يمكنك إجراءها من خلال مربع الحوار Table Properties تتلخص في التالي :

* Alignment : لتحديد محاذاة الجدول بالنسبة للصفحة.

* Float : لتحديد اتجاه دوران النص العادي في الصفحة حول الجدول جهة اليمين أو اليسار ، أو اختر Default لمنع النص من الدوران حول الجدول .

* Cell Padding : المسافة بوحدة البيكسل بين الحد الداخلي للخلية وبداية النص الموجود داخلها .

* Cell Spacing : المسافات البينية بوحدة البيكسل بين خلايا الجدول .

* Cell Direction : لتحديد اتجاه الجدول من اليسار إلى اليمين Left-to-Right أو من اليمين إلى اليسار Right-to-Left ، وبالطبع إذا كان الجدول داخل صفحة باللغة العربية فستختار Right-to-Left .

* Specify width : عرض الجدول بوحدة البيكسل Pixel أو بنسبة مئوية من عرض نافذة مستعرض الويب الذي سيتم عرض الصفحة من خلاله .

* Specify height : ارتفاع الجدول بوحدة البيكسل Pixel أو بنسبة مئوية من ارتفاع نافذة مستعرض الويب الذي سيتم عرض الصفحة من خلاله .

* Borders : من خلال هذا الجزء من مربع الحوار Table Properties يمكنك تحديد سُمك حدود الجدول (بوحدة البيكسل) من خلال البند Size وتحديد ألوان الحدود .

* Background : لتحديد ألوان خلفية الجدول أو تحديد صورة لتصبح خلفية للجدول .

لتغيير ألوان حدود الجدول واختيار لون خلفيته أو تحديد صورة لتصبح خلفية له اتبع الخطوات التالية :

1. انقر بزر الفأرة الأيمن فوق أي مكان من الجدول ثم اختر البند Table Properties ليظهر لك مربع الحوار Table Properties .

2. من قائمة Color المنسدلة في الجزء Borders ، اختر لون حدود الجدول.

3. حدد ألوان التأثيرات ثلاثية الأبعاد لحدود الجدول Light Border و Dark Border .

4. من قائمة Color المنسدلة في الجزء Background ، حدد لون خلفية الجدول . أو ..

5. انقر فوق الزر Browse وقم بتحديد موقع صورة لتصبح خلفية للجدول .

6. انقر فوق الزر Ok .

رسم الجداول :

يوفر Front Page   أداة مرنة للغاية لإنشاء الجداول أو بتعبير آخر لرسم الجداول ، حيث تقوم أولاً بإستخدام تلك الأداة برسم الحدود الخارجية للجدول ثم تقوم بتقسيمه إلى صفوف وأعمدة بالشكل الذي تريده ، وتفيد هذه الأداة في إنشاء جداول أكثر تعقيداً من الجداول التي يمكنك إنشاءها بالطريقة المباشرة التي تعتمد على تحديد عدد الصفوف والأعمدة ، ولإنشاء جدول باستخدام أداة رسم الجداول في Front Page  اتبع الخطوات التالية :

1. من قائمة Table اختر البند Draw Table ليتحول مؤشر الفأرة إلى شكل قلم بدلاً من السهم ، وفي نفس الوقت سيظهر لك شريط أدوات جديد هو شريط Tables .

2. انقر بالفأرة ثم اسحب لرسم الحدود الخارجية للجدول.

3. انقر بالفأرة واسحب داخل حدود الجدول لرسم الصفوف والأعمدة .

    اسحب من اليمين إلى اليسار أو بالعكس لرسم الصفوف ، واسحب من أعلى إلى أسفل أو بالعكس لرسم الأعمدة .

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

إذا أردت مسح هذا الخط فقم بإتباع الخطوات التالية :

1. انقر فوق الزر    Eraser في شريط الأدوات Tables .

2. انقر بالفأرة واسحب فوق الحد (أو الحدود) الذي تريد حذفها ، وستلاحظ أنها تحولت إلى اللون الأحمر.

3. اترك زر الفأرة لمسح الحدود التي قمت باختيارها.

4. لإيقاف استخدام أداة مسح الحدود ، انقر فوقها مرة أخرى في شريط الأدوات Tables .

5. لرسم حدود جديدة ، انقر فوق الزر    Draw Table في شريط الأدوات Table ثم قم برسم الحدود كالمعتاد .

دمج وتقسيم الخلايا :

هناك طريقة سهلة وسريعة يوفرها برنامج Front Page  لدمج الخلايا وتقسيمها ليصبح بإمكانك تشكيل جدولك بالشكل الذي تريده ، ولأداء ذلك اتبع الخطوات التالية :

لتقسيم خلية :

1. انقر بالفأرة داخل الخلية التي تريد تقسيمها .

2. انقر فوق الزر     Split Cells في شريط الأدوات Tables ، أو انقر بزر الفأرة الأيمن واختر البند Split Cells ليظهر لك مربع الحوار Split Cells .

3. من مربع الحوار Split Cells قم باختيار تقسيم الخلية إلى عدد من الأعمدة أو عدد من الصفوف . اختر البند Split into columns لتقسيم الخلية إلى أكثر من عمود ، أو البند Split into rows لتقسيم الخلية إلى أكثر من صف .

4. في خانة Number of columns/rows ، قم بتحديد عدد الأعمدة أو الصفوف التي تريد تقسيم الخلية إليها .

5. انقر فوق الزر Ok .

لدمج خلايا :

1. قم بتحديد الخلايا التي تريد دمجها .

2. انقر فوق الزر    Merge Cells في شريط الأدوات Tables ، أو انقر بزر الفأرة الأيمن واختر البند Merge Cells .

التنسيق التلقائي للجداول :

يوفر لك Front Page  إمكانية تنسيق الجدول الذي قمت بإعداده بأي من الطرق السابقة ، ولأداء ذلك اتبع الخطوات التالية :

1. انقر بالفأرة في أي خلية داخل الجدول .

2. اختر البند Table Auto Format من قائمة Table ، أو انقر فوق الزر   Table Auto Format في شريط الأدوات Table ليظهر لك مربع الحوار Table Auto Format .

3. من قائمة Formats قم بالنقر بالفأرة لاختيار التنسيق الذي تريده ، وستشاهد شكل توضيحي له في الجزء الأيمن من مربع الحوار .

4. انقر فوق الزر Ok لتطبيق التنسيق الجديد .

استيراد الجداول من تطبيقات أخرى :

يستطيع Front Page  استيراد الجداول من تطبيقات أخرى ولاسيما برنامج Microsoft Excel ، ولأداء ذلك اتبع الخطوات التالية :

1. انقر بالفأرة في المكان الذي تريد إدراج الجدول فيه.

2. من قائمة Insert اختر البند File ليظهر لك مربع الحوار Select File.

3. من قائمة Files of type المنسدلة اختر نوع الملف الذي تريد إدراجه .

4. حدد موقع الملف ، ثم انقر فوق الزر Open .

استخدام الجداول في تصميم الصفحات :

بجانب استخدام الجداول الاستخدام التقليدي المعتاد لتنظيم المعلومات يمكن استخدام الجداول في Front Page 2002 لتنظيم العناصر الموجودة داخل الصفحة ، وبالتالي تستطيع الحصول على تصميم لن يمكنك إعداده بالطرق العادية للتصميم ، اتبع الخطوات التالية لتوضيح هذه الطريقة :

1. قم بإنشاء جدول مكون من صفين وثلاثة أعمدة .

2. في الثلاث خلايا الموجودة في الصف الأول قم بإدراج ثلاث صور .

3. في الثلاث خلايا الموجودة في الصف الثاني قم بكتابة تعليق على الثلاث صور الموجودة في الصف الأول .

إعداد تصميمات أكثر تعقيداً :

إذا كان تصميم صفحتك أكثر تعقيداً من التصميم الذي ورد في المثال السابق فمن الأفضل إعداد رسم تخطيطي باليد لهذا التصميم قبل الشروع في تنفيذه من خلال Front Page  .

سنفترض مثلاً أننا نريد إنشاء صفحة بالشكل التالي :

الآن اتبع الخطوات التالية لإنشاء الجدول :

1. قم بإنشاء جدول مكون من أربعة صفوف وثلاثة أعمدة .

2. من مربع الحوار Table Properties تأكد من أن عرض الجدول هو 100% من عرض الصفحة .

3. تأكد أيضاً من إلغاء إظهار حدود الجدول ، وذلك بوضع الرقم صفر في خانة Size في الجزء Borders من مربع الحوار Table Properties .

4. قم أيضاً بجعل المسافة البينية لخلايا الجدول Cell Spacing تساوي 5 بيكسل .

5. قم بدمج خلايا الصف الثاني لتصبح خلية واحدة .

6. قم بدمج الخليتين الأولى والثانية من اليسار في الصفين الثالث والرابع .

7. قم بدمج الخليتين الثانية والثالثة من اليسار في الصف الرابع .

المفترض أن يظهر الجدول الآن بالشكل التالي :

أثناء العمل في إنشاء الجداول مع Front Page 2002 أحياناً تواجه مشكلات غير منطقية ، على سبيل المثال أثناء محاولتنا إنشاء الجدول المعقد في المثال السابق وبعد عمليات الدمج التي أجريناها على خلايا الجدول لعلك لاحظت أنه من الصعب تغيير حجم الخليتين الأولى والأخيرة في الصف الأول لتصبحا بحجم صغير كما نريد دون التأثير على باقي الخلايا في الجدول .

أحد الحلول الجيدة للتغلب على هذه المشكلة هو إنشاء جدول داخل جدول ، كما في الخطوات التالية :

1. في الجدول الذي قمنا بإعداده سابقاً ، قم بدمج خلايا الصف الأول لتصبح خلية واحدة .

2. انقر بالفأرة داخل الخلية التي نتجت عن عملية الدمج وقم بإنشاء جدول جديد داخلها مكون من صف واحد وثلاثة أعمدة .

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

المفترض أن يظهر الجدول الآن بالشكل التالي :

إنشاء جدول داخل جدول

أخيراً .. وبعد أن انتهينا من إعداد الجدول يمكننا الآن تعبئته بالنصوص والصور ليظهر على صورته النهائية ، لعلك واجهت مشكلة أخرى عند تعبئة الجدول بالنصوص ، وهي المحاذاة الرأسية Vertical alignment للنصوص الموجودة داخل الخلايا المحتوية على نصوص ، مثلاً الخلايا التي تحتوي على متن النص داخل الصفحة ( أي النصوص التي تظهر حول الصورة الكبيرة ) من المفترض أن يتم محاذاة النصوص داخلها رأسياً إلى أعلى لتظهر الأسطر الأولى فيها على مستوى واحد .

ويمكنك حل ذلك بطريقتين إما عن طريق مربع الحوار

 Cell Properties أو شريط الأدوات Tables ، اتبع الخطوات التالية :

1. قم بتحديد الخلايا التي تحتوي على متن النص .

2. انقر بزر الفأرة الأيمن واختر البند Cell Properties ليظهر لك مربع الحوار Cell Properties .

3. من قائمة Vertical alignment اختر البند Top .

4. أو قم بإظهار شريط الأدوات Tables ، وذلك باختيار البند Toolbars من قائمة View ، ثم اختر Tables .

5. أنقر فوق الزر ## Align Top في شريط الأدوات Tables .

المفترض أن يظهر الجدول الآن على الشكل التالي :


التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول التعامل مع الجدول

Comments are closed.

error: Content is protected !!