أهلاً @ بكم @ في @ موقع @ مكي  

 

     

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

إنشاء واستخدام الجداول

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

نصل الآن إلى واحد من أهم الدروس الأساسية في برنامج فرونت بيج , حيث أن تصميم الموقع يفضل أن يكون ضمن جداول حتى تضمن أن يظهر المظهر نفسه للموقع الذي صممته في كل أجهزة الكمبيوتر وعلى جميع دقات الشاشة إضافة إلى أهم أنواع مستكشفات الانترنت .

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

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

 انشاء الجداول :

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



( الشكل 4 - 1 )

الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين ،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout وكذلك خيار Specify width . انقر زر ok سيتم إنشاء الجدول ويظهر في الصفحة

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

يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض الجدول وفق النسبة المئوية لحجم الشاشة أو عدد البكسلات
 بكسلات Pixels عناصر الصورة أو البكسلات هي أصغر وحدات تستخدم معاً لعرض المعلومات على الشاشة ، ومن المرجح أنك سمعت المصطلح المستخدم لوصف درجة وضوح العرض على الشاشة . على سبيل المثال ، من درجات الوضوح الشائعة درجتا 640X 480 و 800X 600. هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً ) المعروضة على الشاشة التي تستخدمها .

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

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

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

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

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

3-     من قائمة Table ، حدد خيار خصائص الجدول Table Properties ثم  Table لتفتح مربع حوار Table Properties انظر  ( الشكل 4 - 2 ) .


( الشكل 4 - 2 )

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 لتطبيق ورؤية التغيير الذي أجريته على حجم الحد في الجدول انظر ( الشكل 4 - 3 ) .

 

   
   

( الشكل 4 - 3 )

حدود غير مرئية :

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

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

لتغيير حشو الخلايا :

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

2-     من قائمة Table ، حدد خيار Table Properties  ثم Table لتفتح مربع حوار Table Properties .

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

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

   
   

( الشكل 4 - 4)

cell spacing يمكنك أيضاً استخدام خاصية المسافة بين الخلايا   

لتغيير المسافة بين الخلايا :

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

2-     من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

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

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

   
   

( الشكل 4 - 5 )

 التعامل مع ألوان الجداول :

يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال الحدود الفاتحة  light border والحدود الداكنة dark border.

لتحديد لون حدود الجدول :

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

2-     من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3-     في جزء الحدود Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان   .

4-     حدد اللون الذي تريد.

5-     انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .

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

لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :

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

2-     من قائمة Table ، حدد خيار Table Properties  ثم  Table لتفتح مربع حوار Table Properties .

3-     في جزء الحدود Border ، انقر سهم القائمة المنسدلة الحد الفاتح light Border  لتفتح لوحة الألوان الخاصة بها   .

4-     حدد اللون الذي تريده ليظهر الحد الفاتح للجدول بهذا اللون  .

5-     ومن نفس الجزء انقر سهم القائمة المنسدلة الحد الداكن Dark Border لتفتح لوحة الألوان الخاصة بها .

6-     حدد اللون الذي تريد ليظهر الحد الداكن للجدول بهذا اللون . 

7-  حدد الحجم كما تريد وليكن 10

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

   
   

( الشكل 4 - 6 )

معالجة الخلايا في الجدول :

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

 إضافة الخلايا :

لإضافة صف جديد إلى الجدول :

1-     قم بإنشاء جدول بسيط يحوي صفين وعمودين مستخدماً في ذلك القيم الافتراضية .

2-     حدد إحدى خلايا الجدول بالنقر داخلها .

3-  من قائمة Table ، حدد خيار Insert ثم Rows or Columns لتفتح مربع حوار Rows or Columns Insert انظر ( الشكل 4 - 7 ) .


( الشكل 4 - 7 )

4-     حدد زر الخيار صفوف Rows لإدراج صف أو أكثر في الجدول .

5-     حدد عدد الصفوف التي تريد إضافتها إلى الجدول . يمكنك إضافة من 1 إلى 1000 صف .

6-  أسفل جزء الموقع Location ، حدد إذا ما كنت تريد إضافة الصفوف إلى أعلى أو أسفل الخلية التي يوجد بها مؤشر الكتابة حالياً .

7-     انقر زر ok لإنهاء عملية الإضافة وإغلاق مربع الحوار ، سيظهر الجدول كما في ( الشكل 4 - 8 ) .

   
   
   

( الشكل 4 - 8 )

إضافة جدول داخل جدول :

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

 تقسيم الخلايا :

قد ترغب أحياناً بتقسيم الخلية إلى عدة خلايا ويبين ( الشكل 4 - 9 ) مثالاً على ذلك .

   
     
     

( الشكل 4 - 9 )

لتقسيم الخلية الواحدة إلى خليتين أو أكثر :

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

2-     من قائمة  الجدول Table ، اختر أمر تقسيم خلايا Split Cells لتفتح مربع حوار Split Cells انظر (  الشكل 4 - 10 ) .

3-     حدد نوع التقسيم الذي تريده ، إلى أعمدة Columns أو صفوف Rows .

4-  حدد عدد الأعمدة أو الصفوف الذي تريد أن تنقسم إليه الخلية المحددة ، في الوضع الافتراضي ، يتم تحديد 2 ، وأقصى عدد يمكنك تحديده هو 100 .


 (  الشكل 4 - 10 ) 

5-     انقر زر ok لإغلاق مربع الحوار وبدء التقسيم انظر ( الشكل 4 - 11 ) .

   
     
     

( الشكل 4 - 11 )

 دمج الخلايا :

لدمج خليتين أو أكثر :

1-     حدد الخلية الأولى التي تريد أن تدمج فيها بقية الخلايا ثم ضع مؤشر الكتابة بداخلها .

2-  احتفظ بمفتاح Shift مضغوطاً ثم حدد الخلية المجاورة التي تريد أن تدمجها بالخلية السابقة المحددة ستظهر الخليتان بلون مميز انظر ( الشكل  4 - 12 ) .
( الشكل  4 - 12 )

3-  من قائمة جدول Table اختر أمر دمج خلايا Merge Cells وسيتم دمج الخلايا التي حددتها في خلية واحدة انظر ( الشكل 4 - 13 ) .


( الشكل 4 - 13 )

حذف الخلايا :

لحذف خلية أو أكثر من الجدول :

1-     قرر أولاً إذا ما كنت تريد حذف خلية أم عمود أم صف من الجدول .

2-     حدد الخلية أو العمود أو الصف الذي تريد حذفه من الجدول .

3-     من قائمة جدول Table ، حدد خيار تحديد Select ثم خلية Cell ( أو عمود Column أو صف Rows ، وذلك بحسب ما تريد حذفه ) .

4-  بتحديد الجزء الذي تريد حذفه من الجدول ، افتح مرة أخرى قائمة Table ثم اختر أمر حذف خلايا Delete Cells . سيتم حذف ما قمت بتحديده من الجدول .

 توزيع الصفوف والأعمدة بالتساوي :

إذا كان لديك جدول يشبه المعروض في ( شكل 4 - 14 ) فلك أن تعيد توزيع الخلايا الموجودة في الصف الثاني حتى تبدو جميعها في أحجام متساوية .

لإعادة توزيع أحد الصفوف غير المتساوية :

1-     حدد الجدول الذي يحوي الصفوف أو الأعمدة التي تريد إعادة توزيعها بالتساوي .

2-  من قائمة جدول Table ، حدد أمر توزيع الصفوف بشكل متساوي Distribute Rows Evenly مثلاً ، ستتم إعادة توزيع الأعمدة أو الصفوف لتبدو بشكل متساوي .

في حالة قيامك بإعادة توزيع الصفوف والأعمدة في جدولك لكن دون حدوث تلك العملية بالصورة الدقيقة التي تريدها ، فإنه يمكنك استخدام أمر التراجع undo من قائمة تحرير Edit للرجوع للحالة السابقة .

   
     
     

( شكل 4 - 14 )
 

   
     
     

الشكل بعد توزيع الصفوف بشكل متساوي

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

الدرس التالي

 الفهرس

الدرس السابق