البحث في الموقع

إن تطبيق جداول بيانات جوجل هو عبارة عن تطبيق ويب وأحد مجموعة تطبيقات جوجل درايف المكتبية التي تضم تطبيقت مستندات جوجل وتطبيق العروض التقديمية وغيرها، ويعتبر هذا التطبيق شبيه لبرنامج مايكروسوفت إكسل وبرنامج ليبر أوفيس كالك. وعلى الرغم من أنه لا يقدم جميع ميزات إكسل وكالك المتقدمة، إلا أنه من السهل إنشاء جداول بيانات وتعديلها سواء كانت بسيطة أم معقدّة. إن استخدام تطبيقات جداول بيانات جوجل ليس مقتصرًا على المحاسبين ومستخدمي جداول البيانات المعقدة والمطورين، بل يمكن استخدامها لإنشاء جداول بيانات بسيطة لأمور حياتية يومية كجدول مهام عمل يومية أو حسابات البقالة أو أي شيء آخر يمكنك التفكير فيه، تعد جداول البيانات طريقة رائعة لتنظيم المعلومات. ولإنشاء مستند جدول بيانات جوجل جديد توجه إلى صفحة جوجل درايف الخاصة بك ثم انقر على زر (جديد) أعلى يمين الصفحة ومن القائمة المنبثقة اختر (جدول بيانات Google). وسيتم الآن فتح التطبيق على كامل الصفحة حيث سيظهر بمظهر مشابه إلى حد كبير برامج الإكسل والكالك، حيث شريط القوائم في الأعلى يليه شريط الأدوات الرئيسي ثم حقل جدول بيانات فارغ مع شريط ورقات العمل أسفله. بداية سيكون اتجاه العمل في التطبيق من اليسار لليمين بشكل افتراضي، يمكنك تعديله ليصبح من اليمين إلى اليسار عبر زر في شريط الأدوات أو من القائمة تنسيق > الاتجاه > ورقة من اليمين إلى اليسار ويمكن إعادة اتجاه العمل بذات الطريقة. تم ترميز الأعمدة بالأحرف اللاتينية A, B, C,…. الخ فيما تم ترميز الصفوف بالأرقام 1, 2, 3, …. الخ. ويسمى المستطيل الواحد ضمن هذا الجدول بالخلية، ولكل خلية عنوان وعنوانها هو تقاطع حرف العمود مع رقم الصف التي تتوضع فيه الخلية فعلى سبيل المثال (كما في الصورة التالية) عنوان الخلية التي في الصورة هو B5 وذلك لوجودها ضمن العمود B والصف 5. وكما تعلمنا في درس مستندات جوجل فإن تسمية المستند في جداول بيانات جوجل يتم بنفس الطريقة حيث يكفي النقر على العنوان أعلى صفحة التطبيق ليسمح لنا بتعديل الإسم ومن ثم نكتب الاسم الذي نريده ونضغط Enter أو ننقر بالفأرة في أي مكان آخر ليتم تطبيق التسمية الجديدة على الملف. وكبقية تطبيقات جوجل المكتبية فلا حاجة لحفظ المستند ولا يوجد في الأصل خيار لحفظ المستند إذ أن مستندات جوجل في مختلف التطبيقات تقوم بحفظ التغييرات مباشرة وبشكل تلقائي، ويتم حفظ المستندات المختلفة الناتجة عن تطبيقات جوجل هذه ضمن سحابة جوجل درايف الخاصة بك ولتغيير موضع حفظ المستند ضمن المجلدات التي أنشأتها سابقًا أو قد تود إنشاءها مباشرة في جوجل درايف عليك النقر على أيقونة المجلد الرمادي بجانب عنوان المستند لتحدد الموقع الذي تريد نقل المستند إليه. بالإمكان فتح ملفات برنامج مايكروسوفت إكسل وليبر أوفيس كالك عبر هذا التطبيق عبر القائمة ملف > فتح ومن ثم ستفتح لنا نافذة تسمح لنا باختيار أحد الملفات الموجودة ضمن سحابة جوجل درايف الخاصة بنا وكذلك يمكننا تحميل الملف من حاسوبنا عبر سحبه إلى مساحة التحميل أو البحث عنه يدويًا ليتم حفظ الملف تلقائيًا في سحابة جوجل درايف الخاصة بنا ومن ثم فتحه ضمن التطبيق. وللتعرف أكثر على واجهة التطبيق سنقوم بتسمية عناصر هذه الواجهة: اسم المستند أيقونة جداول بيانات جوجل وتذهب بك عند النقر عليها إلى صفحة البداية للتطبيق والتي تحوي جميع المستندات التي تم إنشاؤها باستخدام التطبيق شريط القوائم التنبيه إلى حفظ المستند بشكل تلقائي باستمرار (لن يتم حفظ المستند تلقائيًا في حال العمل بدون اتصال بالإنترنت) أزرار المشاركة والتعليقات شريط الأدوات والتنسيقات شريط الصيغ والدوال الأعمدة الصفوف الخلية شريط أوراق العمل هذه نظرة أولية على تطبيق جداول بيانات جوجل وسنتابع في الدروس القادمة تفاصيل أكثر حول كيفية استخدام المزايا المختلفة لهذا التطبيق.

تعرّفنا في الدرس السابق على Calc، معالج البيانات والجداول الحسابية منLibreOffice، وتطرقنا إلى أهم الوظائف والخصائص التي يوفرها، كتخزين البيانات، تحليلها، وإجراء العمليات الحسابية البسيطة والمعقدة عليها. كما تعرفنا على أقسام واجهة البرنامج وكيفية إنشاء، فتح، وحفظ جداول البيانات عليه. سنتعلم في هذا الدرس كيف نتعامل مع جدول البيانات وما يتكون منه من أوراق، صفوف، أعمدة، وخلايا. التنقل ضمن جدول البيانات يوفر كالك مجموعة طرق للتنقل ضمن جدول البيانات، من خلية إلى خلية، ومن ورقة إلى ورقة، ويمكنك اختيار الطريقة التي تناسبك. التنقل بين الخلايا لإجراء أي تغيير داخل جدول البيانات، كإدخال البيانات أو كتابة الصيغ، النسخ واللصق، أو حتى التنقل بين الخلايا، يجب أولًا أن نحدد خلية معينة. ويمكننا أن نستدل على الخلية المحددة من خلال حدودها، فإذا كان الحد عريضًا وباللون الأسود فهذا يعني أنها محددة ومفعلة، والشيء نفسه ينطبق على نطاق الخلايا، إذ ستُظلّل الخلايا المحددة ضمن النطاق باللون الأزرق. نتنقل بعد تحديد الخلية بين الخلايا بإحدى الطرق التالية: باستخدام الفأرة: للانتقال إلى خلية معينة وتحديدها، ببساطة انقر مرة واحدة بزر الفأرة الأيسر على تلك الخلية. باستخدام مرجع الخلية: قم أولًا بمسح اسم/مرجع الخلية من مربع الاسم في شريط الصيغة، ثم اكتب اسم الخلية التي تريد تحديدها في المربع واضغط على مفتاح Enter من لوحة المفاتيح. هذه الطريقة مفيدة على وجه الخصوص عندما ترغب في تحديد خلية بعيدة ليست ضمن نطاق شاشتك (كالخلية Z150 مثلًا)، وفي هذه الحالة لن تضطر إلى التمرير نزولًا وإلى اليسار للوصول على الخلية. باستخدام لوحة المفاتيح: لوحة المفاتيح هي أسهل وأسرع طريقة للتنقل بين الخلايا. يمكنك استخدام المفتاح Enter للانتقال إلى الأسفل إلى الصف التالي في العمود، والمفتاحين Enter + Shift للعودة إلى الأعلى إلى الصف السابق في العمود. اضغط على المفتاح Tab للانتقال إلى الخلية التالية إلى اليمين من الخلية المحددة، وللانتقال إلى اليسار من الخلية المحددة اضغط على المفتاحين Tab + Shift. كما يمكنك استخدام مفاتيح الأسهم للانتقال إلى اليمين، اليسار، الأعلى، أو الأسفل. باستخدام مربع الحوار Navigator: انقر على أيقونة المتصفح من الشريط الجانبي أو اضغط على مفتاح F5 لفتح مربع الحوار _ المتصفّح Navigator_، ثم اكتب عنوان العمود ورقم الصف للخلية التي تريد الانتقال إليها في حقلي العمود Column والصّف Raw__ على التوالي، وأخيرًا اضغط على Enter للانتقال إلى تلك الخلية. التنقل بين أوراق العمل تكون كل ورقة في جدول البيانات مستقلة عن الأوراق الأخرى، بالرغم من ذلك يمكن ربط مراجع الخلايا بين ورقة وأخرى عند كتابة الصيغ. لذا توجد أكثر من طريقة للتنقل بين الأوراق لاختصار الوقت عند كتابة الصيغ: باستخدام مربع الحوار المتصفّح Navigator: افتح مربع الحوار _ المتصفّح Navigator_ بنفس الطريقة المذكورة أعلاه، ثم انقر نقرا مزدوجًا على أي ورقة من تلك المدرجة تحت مجموعة أوراق. باستخدام لوحة المفاتيح: عند الضغط على مفتاحي الاختصار Ctrl + Page Down سيتم الانتقال إلى الورقة التالية، وعند الضغط على مفتاحي الاختصار Ctrl + Page Up سيتم الرجوع إلى الورقة السابقة. ملحوظة: يوجد الزران Page Down وPage Up عادة إلى جانب الأسهم في لوحة المفاتيح ويُستخدمان لتمرير المعروض على الشاشة بمسافة صفحة كاملة، بدلا من سطر كما تفعل الأسهم التي تشير إلى الأعلى أو الأسفل. باستخدام الفأرة: ببساطة، انقر على لسان تبويب الورقة في الجزء السفلي من جدول البيانات لتحديد الورقة المرغوبة. ملاحظة: إذا كان عدد الأوراق كبيرًا جدًا، ولا يمكن أن تظهر تبويبات الأوراق كلّها في الشريط السفلي من جدول البيانات، فيمكنك استخدام الأسهم على الشريط نفسه للتنقل بين الأوراق. تحديد العناصر ضمن جدول البيانات تحديد الخلايا كما أسلفنا الذكر، لا يمكن إجراء أي تغيير على الخلية ما لم نقم بتحديدها أولًا، ويمكن أن نحدد خلية مفردة، أو نطاق خلايا متجاورة أو متفرقة. لتحديد خلية واحدة ضمن الورقة، انقر على الخلية مرة واحدة بزر الفأرة الأيسر، وللتحقق من أنّك حددت الخلية المرغوبة، انظر إلى مربع الاسم الذي سيعرض لك مرجع الخلية المحددة. ولتحديد نطاق الخلايا باستخدام الفأرة، انقر بزر الفأرة الأيسر على الخلية التي ترغب في أن تكون بداية النطاق، ثم اسحب الفأرة وافلتها عند الخلية التي ترغب في أن تكون نهاية النطاق. أما إذا كنت تريد استخدام لوحة المفاتيح، فانقر أولًا على الخلية التي ستكون إحدى زوايا النطاق، اضغط على مفتاح Shift، ومع الاستمرار بالضغط انقر على الخلية التي ستكون الزاوية الأخرى المقابلة في النطاق. هذه الطريقة هي لتحديد نطاق من الخلايا المتجاورة، أمّا لتحديد نطاق من الخلايا غير المتجاورة، فعليك أولًا تحديد خلية أو نطاق خلايا بإحدى الطرق المذكورة أعلاه، اضغط على مفتاح Ctrl، ومع الاستمرار بالضغط حدد الخلية أو نطاق الخلايا التي تريد إضافتها إلى التحديد الأول. وبإمكانك تكرار التحديد بهذه الطريقة أكثر من مرة. تحديد الأعمدة والصفوف لتحديد صف أو عمود مفرد، انقر بزر الفأرة الأيسر على عنوان ذلك الصف أو العمود. لتحديد مجموعة متجاورة من الصفوف أو الأعمدة، حدد العمود/الصف الأول في المجموعة، اضغط على مفتاح Shift، ومع الاستمرار بالضغط حدد العمود/الصف الأخير في المجموعة. أمّا إذا كانت مجموعة الأعمدة أو الصفوف غير متجاورة، ففي هذه الحالة انقر على العمود/الصف الأول في المجموعة، اضغط على مفتاح Ctrl، ومع الاستمرار بالضغط حدد الأعمدة أو الصفوف الأخرى، علمًا أنّه يمكن تحديد أعمدة وصفوف غير متجاورة معًا وفي نفس الوقت. وأخيرًا، لتحديد الورقة برّمتها، بما فيها من صفوف وأعمدة وخلايا، انقر على المربع الصغير الذي يقع عند تقاطع عناوين الأعمدة والصفوف. تحديد الأوراق لتحديد ورقة مفردة، انقر على لسان تبويب تلك الورقة في الجزء السفلي من مساحة العمل، ويمكن أن نستدل على الورقة المحددة من لون لسان التبويب الذي يتحول إلى الأبيض عند تحديدها. ولتحديد مجموعة أوراق متجاورة، انقر على لسان تبويب الورقة الأولى، اضغط على مفتاح Shift، ومع الاستمرار بالضغط انقر على لسان تبويب الورقة الأخيرة. وهذا الخيار مفيد عندما ترغب في تطبيق تغييرات معينة على عدد من الأوراق دفعة واحدة. أمّا لتحديد مجموعة من الأوراق غير المتجاورة، انقر على لسان تبويب الورقة الأولى، اضغط على مفتاح Ctrl، ومع الاستمرار بالضغط، انقر على ألسنة تبويب الأوراق الأخرى. وأخيرًا، لتحديد كل الأوراق في جدول البيانات، انقر بزر الفأرة الأيمن على لسان تبويب إحدى الأوراق واختر تحديد كافة الأوراق Select All Sheets. إدراج وحذف الأعمدة/الصفوف إذا احتجت عند العمل على جداول كالك إلى إدراج صف بين صفين من البيانات، حدد الصف الذي ترغب في إدراج الصف الجديد عنده، ثم انقر بزر الفأرة الأيمن على عنوانه واختر أدرج صفوف لأعلى أو أدرج صفوف لأسفل. طبّق نفس الخطوات لإدراج عمود جديد، بتحديد العمود والنقر على عنوانه بزر الفأرة الأيمن ثم اختيار أدرج أعمدة لليسار أو أدرج أعمدة لليمين. وبالمثل، يمكنك حذف الصف/العمود بتحديده ثم النقر على عنوانه بزر الفأرة الأيمن واختيار حذف صفوف/حذف أعمدة. ملاحظة: بإمكانك حذف مجموعة صفوف/أعمدة متفرقة بالضغط على المفتاح Ctrl أثناء تحديدها ومن ثم حذفها بالطريقة المذكورة أعلاه. إدراج، نقل/نسخ، وحذف الأوراق لإدراج ورقة جديدة، انقر على لسان تبويب إحدى أوراق جدول البيانات، أو على أيّ جزء فارغ في منطقة تبويبات الأوراق، ثم اختر إدراج ورقة. سيُفتح مربع الحوار إدراج ورقة، ومنه يمكنك تحديد موضع الورقة التي تريد إدراجها (قبل أو بعد الورقة الحالية)، تحديد عدد الأوراق التي تريد إدراجها، وتسميتها. عدّل الخيارات ثم انقر على حسنًا. إذا رغبت في نقل الورقة أو نسخها من جدول بيانات إلى آخر، انقر على لسان تبويب الورقة بزر الفأرة الأيمن واختر انقل الورقة أو انسخها. حدّد من مربع الحوار نقل/نسخ الورقة الإجراء الذي تريد القيام به، نقل Move، أو نسخ Copy. حدّد من قائمة المكان Location جدول البيانات الذي تريد نقل الورقة إليه. يمكنك نقلها إلى جدول بيانات مفتوح حاليًا، أو إلى جدول بيانات جديد. بعد ذلك حدد موضع الورقة من قسم إدراج قبل Insert before ثم أدخل اسم الورقة في حقل _ اسم جديد New name_ وانقر على حسنًا. لحذف ورقة ما من جدول البيانات، انقر على لسان التبويب الخاص بها بزر الفأرة الأيمن واختر احذف الورقة، علمًا أنّه بإمكانك حذف أكثر من ورقة بالضغط على مفتاح Ctrl أثناء التحديد، ومن ثم حذفها بنفس الطريقة سالفة الذكر. بهذا نكون قد وصلنا إلى نهاية الدرس. في الدرس القادم سنتعرف على كيفية إدخال البيانات على جداول كالك. ترجمة- بتصرّف - لدليل المستخدم الخاص بالحزمة المكتبية LibreOffice.

في هذا الدرس من سلسلة تعلّم CSS، سنشرح استخدام المُحدّدات المُتقدّمة، وبعض طرق تنسيق الجداول؛ وسنتدرّب على ذلك بإنشاء مستند جديد يحوي جدولًا، ثمّ نُرفقه بورقة أنماط. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. (هذا الدرس) التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. الجداول الجدول هو طريقة لتنظيم المعلومات في شبكة مستطيلة، قد تكون بعض الجداول مُعقّدة، وعندها قد تختلف النّتيجة المعروضة باختلاف المتصفّحات. عندما تصمّم مستنداتك، استخدم الجداول للتّعبير عن العلاقة بين مجموعة من المعلومات، وعندها لن يؤثّر كثيرًا الاختلاف البسيط بين المتصفّحات في عرض هذه المعلومات، لأنّ معناها ما يزال واضحًا. لا تستخدم الجداول بطرقٍ غير اعتياديّة للوصول إلى تخطيط مرئيّ للمستند، فهذا الهدف يمكن تحقيقه بصورة أفضل بالوسائل الّتي شرحناها في درس رصف العناصر. هيكل الجداول تُعرض كل معلومة في الجدول ضمن خليّة (cell). نُسمّي مجموعة الخلايا الواقعة على خطّ أفقيّ واحد في الصّفحة صفًّا (row). يمكن تجميع بعض الصّفوف في الجداول. نُسمّي المجموعة الأولى المُميّزة من الصّفوف بترويسة الجدول (table header)، وبالمثل تُسمّى المجموعة الأخيرة المُميّزة من الصّفوف تذييل الجدول (table footer). تُسمّى بقيّة الصّفوف متن الجدول (body)، ويمكن تجميعها هي الأخرى في مجموعات. نُسمّي مجموعة الخلايا الواقعة على خطّ شاقوليّ واحد في الصّفحة عمودًا (column)، ولكنّ التّعامل مع الأعمدة في CSS غير شائع. مثال ألقِ نظرة على الجدول المُدرج تحت عنوان التّحديد تبعًا للعلاقات بين العناصر في درس المُحدّدات، والمؤلّف من 10 خلايا موزّعة في 5 صفوف وعمودين، وفيه ترويسة، ومتن، ولكنّه بلا تذييل. يُغطّي هذا الدّرس الجداول البسيطة، والّتي يكون عرضها متماثلًا بين المتصفّحات. نعني بالجداول البسيطة تلك الّتي تحتلّ فيها كلّ خليّة صفًّا واحدًا وعمودًا واحدًا، على أنّه يمكن للخليّة أن تمتدّ (span) على أكثر من صفّ وعمود؛ وهذا ليس موضوع درسنا. حدود الجداول ليس للخلايا حوافّ (margins)، ولكنّ لها حدودًا (borders) وحشوات (paddings)، تكون الحدود مفصولة عن بعضها بشكل مبدئيّ بالقيمة المُعيّنة في خاصّة border-spacing على الجدول. يمكن أيضًا إزالة المسافة بالكامل بتعيين القيمة collapse للخاصّة border-collapse. مثال فيما يلي 3 جداول، للجدول على اليسار مسافة بين الحدود تساوي 0.5em، وللجدول في المنتصف مسافة تساوي صفر، وفي الأيمن عُينت القيمة collapse على الخاصّة border-collapse: التسميات التوضيحية (Captions) العنصر <caption> هو تسمية تُطبّق على كامل الجدول، وتُعرض في الحالة المبدئيّة فوق الجدول. يمكن نقل التسمية التّوضيحيّة إلى أسفل الجدول بتعيين القيمة bottom على الخاصّة caption-side، وهذه القيمة يرثها الأبناء، ويمكن لتجنّب ذلك تعيينها على الجدول نفسه أو على عنصر حاوٍ آخر. لتنسيق نصّ التّسمية، استخدم الخواصّ العاديّة لتنسيق النّصوص الّتي تعلّمناها في الدّروس السّابقة. مثال لهذا الجدول عنوان في أسفله: #demo-table > caption { caption-side: bottom; font-style: italic; text-align: right; } الخلايا الفارغة يمكن عرض الخلايا الفارغة (أي عرض حدودها وخلفيّتها) باستخدام الخاصّة empty-cells على الجدول وإسناد القيمة show إليها. يمكن أيضًا إخفاؤها تمامًا باستخدام ‎empty-cells: hide;‎، وعند ذلك فإن الخليّة تشفّ عمّا يقع تحتها من خلفيّة العنصر الأب. مثال هذه الجداول لها خلفيّة خضراء شاحبة، ولخلاياها خلفيّة رماديّة فاتحة وحدود رماديّة غامقة. في الجدول على اليسار تظهر الخليّة الفارغة، أمّا على اليمين فهي مخفيّة: تمرين: تنسيق جدول أنشئ مستندًا جديدًا سمّه doc3.html، انسخ والصق المحتوى التّالي (تأكّد من نسخه بالكامل): <!DOCTYPE html> <html> <head> <title>Sample document 3</title> <link rel="stylesheet" href="style3.css"> </head> <body> <table id="demo-table"> <caption>Oceans</caption> <thead> <tr> <th></th> <th>Area</th> <th>Mean depth</th> </tr> <tr> <th></th> <th>million km²</th> <th>m</th> </tr> </thead> <tbody> <tr> <th>Arctic</th> <td>13,000</td> <td>1,200</td> </tr> <tr> <th>Atlantic</th> <td>87,000</td> <td>3,900</td> </tr> <tr> <th>Pacific</th> <td>180,000</td> <td>4,000</td> </tr> <tr> <th>Indian</th> <td>75,000</td> <td>3,900</td> </tr> <tr> <th>Southern</th> <td>20,000</td> <td>4,500</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>361,000</td> <td></td> </tr> <tr> <th>Mean</th> <td>72,000</td> <td>3,800</td> </tr> </tfoot> </table> </body> </html> أنشئ ورقة أنماط جديدة style3.css، وانسخ المحتوى التّالي والصقه (تأكّد من نسخه بالكامل): /*** Style for doc3.html (Tables) ***/ #demo-table { font: 100% sans-serif; background-color: #efe; border-collapse: collapse; empty-cells: show; border: 1px solid #7a7; } #demo-table > caption { text-align: left; font-weight: bold; font-size: 200%; border-bottom: .2em solid #4ca; margin-bottom: .5em; } /* basic shared rules */ #demo-table th, #demo-table td { text-align: right; padding-right: .5em; } #demo-table th { font-weight: bold; padding-left: .5em; } /* header */ #demo-table > thead > tr:first-child > th { text-align: center; color: blue; } #demo-table > thead > tr + tr > th { font-style: italic; color: gray; } /* fix size of superscript */ #demo-table sup { font-size: 75%; } /* body */ #demo-table td { background-color: #cef; padding:.5em .5em .5em 3em; } #demo-table tbody th:after { content: ":"; } /* footer */ #demo-table tfoot { font-weight: bold; } #demo-table tfoot th { color: blue; } #demo-table tfoot th:after { content: ":"; } #demo-table > tfoot td { background-color: #cee; } #demo-table > tfoot > tr:first-child td { border-top: .2em solid #7a7; } افتح المستند في المتصفّح، من المفترض أن تشاهد نتيجة كهذه: قارن القواعد في ورقة الأنماط بالجدول الّذي تُشاهده، للتأكدّ من فهمك لتأثير كلّ قاعدة. إن وجدت قاعدة لم تفهمها، احجبها (بجعلها تعليقًا) وحدّث المتصفّح لتشاهد الاختلاف. فيما يلي بعض الملاحظات الّتي تُعينك على الفهم: تقع التّسميّة التّوضيحيّة خارج الجدول. إن كنت قد ضبطت حدًا أدنى لحجم الخطوط في متصفّحك، فقد يؤثّر ذلك على الرّقم 2 في واحدة‎km2 ‎. هناك ثلاث خلايا فارغة، اثنتان منهما تشفّان عن خلفيّة الجدول، والثّالثة لها لون خلفيّة غير شافٍّ وحدّ علويّ. النقطتان بعد كل اسم محيط ":" تُضيفهما ورقة الأنماط. تمرين غيّر ورقة الأنماط ليبدو الجدول هكذا: شاهد الحل القاعدة التّالية تضيف حدودًا فقط حول عناصر <td> المحتواة ضمن <tbody> ضمن الجدول ذي المُعرّف demo_table: #demo-table tbody td { border:1px solid #7a7; } ما التالي؟ سنُراجع في الدّرس القادم والأخير كيفية التعامل مع الأجهزة المختلفة والمطبوعات في CSS. ترجمة بتصرّف للدرس Tables من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

الجداول هي عبارة عن شبكة من الصفوف والأعمدة التي تُستخدم لتمثيل بيانات نصية أو رقمية، وهي من العناصر الشائعة لتنظيم البيانات وتنسيقها في المستندات. تُتاح في ميكروسوفت وود إمكانية إنشاء جداول فارغة، أو تحويل النصوص إلى جداول. وكذلك إمكانية تطبيق مختلف الأنماط والتنسيقات على الجدول. كل ذلك بخطوات سهلة جدا. إنشاء جدول جديد فارغ هناك عدة طرق لإنشاء جدول فارغ، وجميعها يمكن الوصول إليها عبر أمر Table في تبويب إدراج Insert: الطريقة الأولى، وهي الطريقة السريعة والمختصرة، بتمرير مؤشر الفأرة فوق الجدول المصغّر لتحديد حجم الجدول (عدد الصفوف وعدد الأعمدة)، وسيتم تمييز الحقول باللون البرتقالي، وفي نفس الوقت تُعرض معاينة مباشرة للجدول على الصفحة. عندما تحدد حجم الجدول المطلوب انقر بزر الفأرة الأيسر لإدراجه. أقصى عدد للأعمدة × الصفوف التي يمكن إنشاءها بهذه الطريقة هو 10 × 8. إذا زاد عدد الأعمدة عن 10، أو عدد الصفوف عن 8، استخدم الطريقة الثانية، وهي بواسطة خيار إدراج جدول Insert Table: في مربع الحوار Insert Table قم بإدخال عدد الصفوف وعدد الأعمدة المرغوب. يمكنك أيضًا التحكم في أسلوب احتواء بيانات الجدول. قم بتأشير الخيار Fixed Column Width إذا رغبت في أن يكون عرض جميع الأعمدة ثابتًا، أو الخيار AutoFit to contents إذا كانت محتويات الجدول بأحجام مختلفة وترغب في مطابقة عرض كل عمود مع حجم محتواه. أو الخيار AutoFit to window لجعل عرض الجدول ككل مطابقًا لعرض الصفحة (أي من الهامش إلى الهامش). وإذا رغبت في أن يقوم البرنامج بتذكر الأبعاد التي قمت بإدخالها في كل مرة تنشئ فيها جدولًا جديدًا، قم بتأشير الخيار Remember dimensions for new tables: الطريقة الثالثة هي باستخدام خيار رسم جدول Draw Table: بواسطة هذا الخيار يمكنك تصميم جدولك الخاص برسم حدود الصفوف والأعمدة يدويًا. سيتحول شكل المؤشر إلى قلم، انقر على الموضع الذي تريد بدء رسم الجدول منه، ثم اسحب الفأرة إلى الموضع المقابل. بعد ذلك ابدأ بتقسم المربع إلى أعمدة وصفوف وبالتخطيط المرغوب: من تبويب تصميم Design السياقي، وبالتحديد من مجموعة حدود Borders، يمكنك اختيار لون الحدود التي ترسمها من قائمة لون القلم Pen Color: تستطيع رسم حدود جديدة باللون المخصص، أو تمرير القلم مجددًا فوق الحدود المرسومة لتغيير لونها إلى اللون الذي اخترته: وكذلك يمكنك تغيير سمك الحدود ونمطها من قائمتي Line Style و Line Weight. وبنفس الطريقة ارسم حدودًا جديدة أو مرر القلم فوق الحدود المرسومة مسبقًا لتغيير سمكها أو نمطها: لإلغاء تفعيل أداة الرسم اضغط على مفتاح ESC من لوحة المفاتيح، أو انقر على أمر Draw Table من تبويب تخطيط السياقي Layout: و لِمَسح حد (أو مجموعة حدود) من الجدول، انقر على أداة الممحاة Eraser من تبويب Layout لتفعيلها، ثم انقر على الحد الذي تريد مسحه: لإدخال نصوص أو محتوى آخر، كالصور أو الأشكال، في خلايا الجدول، ضع مؤشر الكتابة داخل الخلية وابدأ بالكتابة (أو الإدراج). للتنقّل بين الخلايا استخدم مفاتيح الأسهم من لوحة المفاتيح. كما يمكنك استخدام المفتاح Tab للانتقال إلى الخلية التالية. يجب أن تأخذ في الاعتبار أنّه لا يمكن استخدام المفتاح Enter لإضافة صف جديد، إذ أنّه سيقوم بإضافة سطر جديد داخل الصف. بدلًا من ذلك ضع مؤشر الكتابة في آخر خلية في آخر صف ثم اضغط على المفتاح Tab لإضافة صف جديد تحت آخر صف في الجدول (سنفصل الشرح أكثر حول إضافة صفوف وأعمدة جديدة في درس آخر -إن شاء الله-. إدراج جدول بيانات اكسل داخل مستند وورد إذا كنت ترغب في استخدام وورد في العمل على جدول بخصائص جداول اكسل، قم بإدراج Excel Spreadsheet من قائمة Table: بإمكانك تغيير حجم الجدول بعد إدراجه باستخدام المقابض handles عند حدوده. وستلاحظ تغيّر شكل نافذة البرنامج لتحتوي التبويبات الإضافية (تبويب صيغ Formulas وتبويب بيانات Data) الخاصة ببرنامج اكسل، بالإضافة إلى العناصر الأخرى المكونة لمصنفات اكسل مثل شريط الصيغة وحقل الاسم: بإمكانك استخدام خصائص وأوامر أكسل كإدراج الصيغ، التنسيق الشرطي للخلايا، التعبئة التلقائية...إلخ. للخروج من هذه النافذة انقر على أية منطقة فارغة ضمن الصفحة. ولفتح نافذة اكسل داخل نافذة وورد مجددًا، حدد الجدول ثم انقر عليه بشكل مزدوج بزر الفأرة الأيسر. إدراج الجداول السريعة الجداول السريعة Quick Tables هي مجموعة من الجداول المنسقة والمجهّزة مسبقًا على هيئة قوالب قابلة للتحرير. لإدراج جدول سريع اذهب إلى تبويب: Insert > Table > Quick Tables اختر الجدول المرغوب من المعرض ثم انقر عليه لإدراجه: بعد ذلك يمكنك تحرير محتوياته أو تغيير تنسيقه وتخطيطه من تبويبي Design وLayout السياقيين. تحويل النصوص إلى جدول (أو بالعكس) لتحويل قائمة من النصوص إلى جدول، يجب أن يفصل بين محتويات القائمة فاصل، كالفارزة المنقوطة (؛)، الفقرة paragraph، علامة الجدولة tab، إلخ. لتحويل النص إلى جدول، قم بتحديده أولًا، ثم اذهب إلى تبويب: Insert > Table > Convert Text to Table كما تلاحظ في الصورة أعلاه، قمنا بالفصل بين النصوص باستخدام مفتاح tab. من مربع الحوار Convert Text to Table. حدّد أسلوب احتواء النصوص، سواءً كنت تريد استخدام عرض ثابت لجميع الأعمدة، مطابقة عرض الأعمدة مع حجم المحتوى، أو جعل عرض الجدول مساويًا لعرض الورقة. وكذلك قم بتحديد طريقة فصل النص، سواءً كان عند الفقرات paragraphs، عند الفاصلة المنقوطة semicolons، عند علامات الجدولة tab، أو عند علامة مخصصة تقوم بإدخالها في حقل Other. كما لديك خيار إضافة أعمدة إضافية إلى الجدول بإدخال عدد الأعمدة في حقل Number of Columns: بعد تحديد الخيارات انقر على OK. بما أننا قمنا باختيار AutoFit to contents، تم إنشاء الأعمدة بعرض ملائم لحجم النصوص. إذا أردت القيام بعملية معكوسة، أي تحويل جدول ما إلى نصوص، ضع المؤشر داخل أحد خلايا الجدول ثم اذهب إلى تبويب تخطيط Layout وانقر على أمر Convert Table to Text في مجموعة Data: في مربع الحوار الذي سيظهر حدد طريقة فصل النصوص، ثم انقر على OK: سيتم تحويل الجدول إلى نص عادي. وفي حال أنّك اخترت الفصل بين النصوص بعلامات الجدولة tab، ستلاحظ وجود مواضعها على المسطرة والتي بواسطتها يمكنك التحكم في المسافات بين النصوص:

نلجأ غالبًا بعد الانتهاء من إعداد الجداول وإضافة البيانات إلى طباعتها واستعمالها ورقيًّا. يوفر تطبيق جداول بيانات جوجل مرحلتين لإعداد الجداول وطباعتها؛ المرحلة الأولى هي إعداد الجداول مثل حجوم الجداول وحجم الصفحة وملاءمة الجدول ضمن الصفحة، والمرحلة الثانيَّة هي الإعدادات العامَّة للطباعة مثل اختيار الطابعة وتحديد الصفحات المراد طباعتها وعدد النُسخ اللازمة. سنتعرَّف في هذا المقال على كيفيَّة تهيئة الجداول لطباعتها في تطبيق جداول بيانات جوجل. المرحلة الأولى: إعداد الجداول ننتقل إلى هذه الإعدادات الأوليَّة والمخصَّصة لجداول البيانات عبر قائمة ملف ← طباعة أو استعمال الاختصار Ctrl ‏+ P وذلك لتحضير الجداول للطباعة قبل الانتقال إلى الإعدادات العامة للطباعة؛ تَظهر نافذة تشبه النافذة الموضحة بالصورة التالية، وسنشرح جميع الخيارات الموجودة فيها. نسأل أنفسنا هل نريد طباعة كامل المستند أي جميع الأوراق الموجودة فيه أم نريد طباعة جداول محدَّدة؟ نتحكم في هذا الخيار عبر قائمة “طباعة” إذ يوجد ثلاثة خيارات؛ الخيار الأول هو “الورقة الحالية” نختاره لطباعة جميع محتوى الورقة الحاليَّة التي كنَّا فيها، والخيار الثاني هو “المصنف” نحدِّده لطباعة كامل محتوى الأوراق الموجودة في الملف، والثالث هو “الخلايا المحدَّدة” نستعمله لطباعة جدول ضمن نطاق محدَّد وعدم الرغبة في طباعة كامل الملف أو الورقة إذ نحدِّد الجدول ثمَّ ننتقل إلى هذه الإعدادات. الخيارات الثلاث التالية تتعلَّق بالورق الذي سنستخدمه للطباعة؛ نحدِّد حجم الورق المستعمل من خيار “حجم الورق” إذ الحجم المستخدم بكثرة هو حجم A4، وتُكتب أبعاد الورقة بالسنتيمتر في حال استعمال حجوم أخرى غير مشهورة. نحدِّد اتجاه الورق إن كان أفقيًّا أم عموديًّا من خيار “اتجاه الورقة” ويتعلَّق ذلك بحجم الجدول المراد طباعته إذ من الضروري مراعاة حجم الأعمدة أثناء إنشاء الجدول ليتسع في الورقة. نحدِّد في حالتنا الاتجاه الأفقي إذ إن عرض الجدول كبير وفي حال تحديد الاتجاه العمودي فلن يتَّسع الجدول إلا إذا غيَّرنا حجمه. إن أصررت على الاتجاه العمودي فسيساعدك خيار “تغيير الحجم” في تحديد الحجم المناسب للجدول بحيث يلاءم حجم الورق المستعمل مع حجم الجدول، وهذا الخيار مفيد جدًا وقد لا يتواجد في التطبيقات المشابهة لهذا التطبيق وسنضطر آنذاك لتعديل حجم الجدول يدويًّا. الخيارات المتاحة هي: “عادي 100%” وهو الحجم الأصلي للجدول. “ملاءمة مع العرض” أي عرض الصفحة. “ملاءمة مع الارتفاع” أي ارتفاع الصفحة. “احتواء ضمن الصفحة” أي اختيار الحجم المناسب لجميع الجداول في المستند ليتسع ضمن صفحة واحدة. “مخصص” وهو تغيير حجم الجدول يدويًّا بكتابة النسبة المئوية المناسبة. نحدِّد خيار “ملاءمة مع العرض” بعد اختيار الاتجاه العمودي ليتسع الجدول في الصفحة لكنَّه سيصبح صغيرًا وقد لا تُقرأ الأرقام ضمنه لصغرها لذا يجب الانتباه إلى هذا الأمر. الخيار التالي هو “الهوامش” إذ نتحكم بعرض الهوامش في الورقة بوساطته، ويفضل اختيار الهوامش العريضة أو العاديَّة في حال الرغبة بإضافة بعض المعلومات فيها. يُستعمل خيار “التنسيق” التالي لإظهار خطوط الشبكة والملاحظات عند الطباعة، وتحديد طريقة ترتيب الصفحات في الورقة، ومحاذاة الجدول أفقيًّا وعموديًّا في الورقة. بقي خيار “الرؤوس والتذييلات” إذ نستطيع عبره إضافة بعض المعلومات إلى الجدول في الهوامش مثل أرقام الصفحات وعنوان المصنف والورقة والتاريخ والوقت. يمكن تخصيص تلك المعلومات ووضعها في أماكن معيَّنة عبر خيار “تعديل الحقول المخصصة“. نلاحظ أنَّ خياري تكرار الصفوف أو الأعمدة المجمَّدة غير مفعلان وذلك لأنَّنا لم نجمد أي صف أو عمود. يُستعمل التجميد لتثبيت رأس الجدول الذي يقع في الصف الأول غالبًا والعمود الأول لإظهارهما دومًا في جميع الصفحات المطبوعة أو في أعلى الشاشة أثناء التنقل في الجدول. نجمِّد الصف أو العمود عبر قائمة عرض ← تجميد ← 2 صف أي تجميد السطريين الأوليين وبذلك يتكرر هذين السطرين في رأس كل ورقة عند طباعتها بتفعيل خيار تكرار الصفوف أو الأعمدة المجمَّدة. المرحلة الثانية: الإعدادات العامَّة للطباعة ننتقل إلى هذه المرحلة بعد الانتهاء من تهيئة الإعدادات السابقة بالضغط على زر “التالي” الموجود في الزاوية العلوية اليسرى وهي الإعدادات الاعتياديَّة من Google لطباعة المستند فتظهر نافذة تشبه النافذة الموضحة بالصورة التالية. نحدِّد الطابعة المستخدمة لطباعة المستند عبر الضغط على “Change” فتظهر نافذة لاختيار الطابعة. إن لم تظهر طابعتك الموصولة مع حاسوبك فعليك إعدادها لاستخدامها في خدمة الطباعة من السحابة من Google؛ اقرأ مقال “تحضير المخرجات: الطباعة والنشر” في مستندات جوجل لمعرفة خطوات إعداد الطابعة للاستفادة من خدمة الطباعة من السحابة. الطابعة الافتراضيَّة هي حفظ الملف بصيغة PDF لتنزيله إلى الحاسوب وطباعته لاحقًا. يمكن تنزيل الملف أيضًا بصيغ عدَّة عبر قائمة ملف ← تنزيل بتنسيق واختيار الصيغة المناسبة لتنزيل الملف إلى الحاسوب. نحدِّد بعد ذلك الصفحات التي نريد طباعتها ثمَّ نضغط على “Save” ليرسل التطبيق الملف إلى الطابعة المحدَّدة سواءً إلى طابعة حقيقيَّة ليُطبع الملف مباشرةً أو إلى طابعة افتراضيَّة ليُحفظ الملف بصيغة معيَّنة على الحاسوب ويُطبع لاحقًا.

تعرفنا في المقال السابق على كيفيَّة إدراج الشرائح وتنسيقها وكيفيَّة التعديل على الشريحة الرئيسيَّة في تطبيق عروض جوجل التقديميَّة؛ سنتعلم في هذا المقال كيفيَّة إدراج الصور والفيديوهات والمخطَّطات والجداول ومختلف وسائل الشرح والإيضاح مثل الأشكال والأسهم، ثمَّ سنتطرَّق إلى ترتيب تلك العناصر ضمن الشريحة. إدراج مربع نص لا نحتاج غالبًا إلى إدراج مربع نص لأنَّ تخطيط الشريحة يتكفَّل بهذا الأمر إذ نحرص دومًا على اختيار التخطيط الملائم لما نريد كتابته ضمن الشريحة. ندرج مربع نص بالضغط على “مربع نص” من شريط الأدوات أو من قائمة إدراج ← مربع نص ثمَّ نضغط باستمرار على زر الفأرة الأيسر ونسحبه حتى يتشكل مربع بالحجم الذي نريد ثمَّ نُفلت زر الفأرة؛ نُدخل بعد ذلك النص المطلوب في المربع ثمَّ نُنسقه بالشكل الملائم. إدراج صورة تُستخدم الصور بكثرة في العروض التقديميَّة إذ أنَّها تغني عن كلام كثير وتجذب الجمهور وتعزِّز نمط التعلم البصري؛ أغلب النصوص المكتوبة في الشريحة هي عناوين للفقرات فقط وما تبقى هو صور ومخطَّطات تشرح تلك الفقرة. يوفِّر تطبيق عروض جوجل التقديمية خيارات عدَّة لإدراج الصورة هي: البحث عن الصورة في محتوى الويب وإدراجها مباشرةً. تحميلها من حاسوبك. إدراجها من حسابك في Drive. إدراجها من هاتفك بسهولة إن كانت موجودة فيه وكنت تستعمل صور Google. سنبحث عن صورة مناسبة لموضوع العرض التقديمي الذي يدور حول الوجبات السريعة لإدراجها في الشريحة الأولى؛ نختار من قائمة إدراج ← صورة ← البحث في الويب أو نضغط على “صورة” في شريط الأدوات ونختار “البحث في الويب” فتظهر نافذة في القسم الأيسر تشبه صفحة بحث Google الرئيسيَّة؛ نكتب فيها عبارة البحث ثمَّ نحدَّد الصور المناسبة من النتائج ونضغط على “إدراج“. يمكن اقتصاص بعض أجزاء الصورة بالضغط عليها مرتين متتاليتين؛ نُدوِّر الصورة قليلًا ونضعها بالمكان المناسب كما موضح. يمكن التعديل على الصورة بتغيير الشفافيَّة أو التباين أو السطوع لها أو تغيير ألوانها أو إضافة ظل أو انعكاس لها؛ نجد كل تلك الخيارات في “خيارات التنسيق” من شريط الأدوات أو بالضغط على الصورة بزر الفأرة الأيمن واختيار “خيارات التنسيق“؛ تظهر نافذة خيارات التنسيق في الطرف الأيسر؛ نعدِّل من تلك القائمة على الصورة بالشكل الذي نريد. يمكن إضافة صورة إلى الشريحة الرئيسيَّة لتظهر في جميع الشرائح أو إضافتها إلى تخطيط معيَّن وذلك بالضغط عليها بزر الفأرة الأيمن ثمَّ اختيار من “إضافة إلى المظهر” خيار “الرئيسيَّة” لإدراج الصورة ضمن جميع الشرائح أو خيار “Title Slide” -وهو اسم التخطيط- لإدراجها ضمن الشرائح ذات التخطيط نفسه. لن تتمكن من التعديل على الصورة آنذاك سوى بالدخول إلى وضع الشريحة الرئيسيَّة عبر قائمة الشريحة ← تعديل الشريحة الرئيسيَّة. يمكن إضافة إطار أو قناع للصورة بتحديدها ثمَّ اختيار “إضافة تأثير قناع على الصورة” من قائمة الأدوات؛ نحدِّد شكلًا مناسبًا لاختياره قناعًا أو إطارًا للصورة. إدراج مخطَّط يوضح المخطَّط البياني الإحصائيَّات أو البيانات بشكل رسومي مبسَّط ليتمكن أي شخص من فهمها وتحليلها. يوفِّر تطبيق عروض جوجل التقديمية خيارات رائعة لإدراج المخطَّطات وربطها مع تطبيق جداول البيانات، إذ هنالك تناغم جميل بين تطبيقات Google. سنُدرج مخطَّطًا عموديًّا من قائمة إدراج ← مخطَّط ← عمودي؛ يُدرج مخطَّط نموذجي ويُدرج معه جدول يحمل اسم العرض التقديمي نفسه في تطبيق جداول بيانات جوجل. نفتح الجدول الموجود في تطبيق جداول البيانات بالضغط على “مصدر مفتوح” من خيارات المخطَّط ثمَّ نضيف البيانات التي نريد عرضها على المخطَّط وننسِّقه أيضًا. نعود إلى تطبيق العروض التقديميَّة ثمَّ نضغط على خيار “تحديث” في المخطَّط لمزامنة التعديلات التي أجريناها. يمكن إلغاء ربط المخطَّط مع تطبيق جدول البيانات باختيار “إلغاء الربط” من خياراته فيتحول المخطَّط إلى صورة. نستطيع إدراج مخطَّط موجود مسبقًا في تطبيق جداول بيانات جوجل عبر إدراج ← مخطَّط ← من جداول البيانات؛ تظهر نافذة نحدِّد منها الجدول المطلوب ثمَّ تظهر نافذة أخرى تعرض جميع المخطَّطات الموجودة في ذلك الجدول؛ نحدِّد منها مخطَّطًا ونضغط على “استيراد“، ويمكن ترك خيار “رابط إلى جداول البيانات” مفعلًا لربط المخطَّط مع الجدول أو إلغاء تفعليه لاستيراد المخطَّط بوصفه صورةً. إدراج فيديو يوفر التطبيق إمكانيَّة البحث عن فيديو في موقع YouTube وإدراجه دون الخروج منه. سنبحث عن فيديو حول موضع تأثير التسمم بوساطة الوجبات السريعة لإدراجه وذلك من قائمة إدراج ← فيديو؛ نكتب العنوان المطلوب في مربع البحث ونختار فيديو من النتائج التي نحصل عليها كما يمكن تشغيل الفيديو ومعاينته قبل إدراجه. نستطيع أيضًا إدراج فيديو بنسخ رابطه ولصقه ضمن خيار “باستخدام عنوان URL” من النافذة السابقة أو إدراج فيديو موجود في حسابك في drive. ملاحظة: يجب أن يتوفر اتصال بالإنترنت أثناء العرض لتشغيل الفيديو المدرج من موقع YouTube، ويجب أيضًا مراعاة حقوق النشر والتأكُّد من ترخيص استخدام الفيديو أو الصورة التي ندرجها من الويب. إدراج جدول يُنظم الجدول طريقة عرض البيانات ويُسهِّل قراءتها وموازنتها؛ ندرج جدولًا عبر قائمة إدراج ← جدول أو من قائمة جدول ← إدراج جدول ثمَّ نحدِّد عدد أسطر الجدول وأعمدته. نضيف بعد ذلك البيانات إلى الجدول وننسقها من حيث حجم الخط ونوعه ولونه وتوضعه ضمن الخلايا. نَدمج بعض الخلايا بتحديدها ثمَّ اختيار جدول ← دمج الخلايا، وننسِّق ألوان خلايا الجدول من خلال خيار “لون التعبئة” الموجود في شريط الأدوات؛ نختار لونًا محدَّدًا للسطر والعمود الأول بما يتناسب مع المظهر ثمَّ ننسق بقية الأسطر بلون آخر بالتناوب للتمكن من قراءة البيانات بسهولة، ونضيف حدودًا ذات لون أبيض وسماكة صغيرة (1 بكسل) لكامل الجدول من شريط الأدوات؛ يظهر الجدول بحلته النهائيَّة كما موضح بالصورة التالية. إدراج الأشكال والخطوط تندرج الأشكال والخطوط ضمن وسائل الشرح والإيضاح وتُستخدم بكثرة في العروض التقديميَّة. يوفر التطبيق أشكالًا وخطوطًا عديدة نجدها في قائمة إدراج ← الخط لإدراج خط وقائمة إدراج ← شكل لإدراج شكل؛ يمكن إدراج الخطوط والأشكال من شريط الأدوات أيضًا. سندرج بعض الأشكال والخطوط لشرح فقرة “أضرار أخرى للوجبات السريعة”؛ ندرج أشكالًا ونضيف فيها النصوص بالضغط عليها مرتين متتاليتين؛ نربط بين تلك الأشكال بخطوط وأسهم ونغيِّر تنسيقها من شريط الأدوات حيث تظهر عدَّة خيارات فيه للتحكم بشكل بداية الخط ونهايته بالإضافة إلى سماكته ولونه. توضح الصورة التالية كيفيَّة تنظيم الشريحة باستعمال الأشكال والخطوط. نضيف دومًا انتقالات لجميع العناصر للتحكم بظهورها وفق التسلسل الذي نريده لتجنب تشتت الجمهور بقراءة الأجزاء اللاحقة من العرض التي لم تصل إليها بعد. ترتيب العناصر تتوضع العناصر فوق بعضها بعضًا بالترتيب الذي أُدرجت فيه أي يتوضع العنصر المدرج أولًا في الخلف والعنصر المدرج آخرًا في الأمام ليحجب جميع العناصر التي خلفه. لاحظ كيف حجبت الصورة التي أدرجناها الأشكال خلفها. يمكن التحكم بترتيب توضع العناصر في الشريحة من خلال قائمة ترتيب ← ترتيب حيث توجد أربعة خيارات هي: إحضار إلى المقدمة: هو إحضار العنصر أمام كافة العناصر فيظهر كاملًا ولا يختفي أي جزء منه خلف أي عنصر آخر. نحدِّد الشكل المتوضع في الخلف ونحضره إلى المقدمة باستعمال هذا الخيار. إحضار إلى الأمام: هو إحضار العنصر بمقدار مستوى واحد للأمام. نطبق هذا الخيار على العنصر الموجود خلف الصورة لإحضاره للأمام مستوى واحدًا. إرسال إلى الخلف: هو عكس الخيار السابق أي إرسال العنصر إلى الخلف بمقدار مستوى واحد. حجب في الخلف: هو إرسال العنصر خلف كافة العناصر. الخياران التاليان في قائمة ترتيب (المحاذاة أفقيًّا والمحاذاة عموديًّا) هما للتحكم بتوضع عدَّة عناصر نسبة إليهم. نحدِّد مثلًا العناصر الثلاث السابقة ونختار “يسار” من “المحاذاة أفقيًّا” ونختار “أعلى” من “المحاذاة عموديًّا” ونلاحظ كيف توضعت ضمن الشريحة. خيار “توسيط في الصفحة” من القائمة نفسها هو محاذاة العناصر نسبةً إلى حدود الشريحة إمَّا أفقيًّا أو عموديًّا.

بعد أن تعرَّفنا في المقالين السابقين على تطبيق جداول بيانات جوجل وألقينا نظرةً سريعةً عليه، سنكمل في هذا الدرس والدروس القادمة رحلتنا في استكشاف هذا التطبيق ومعرفة بعض مزاياه وكيفيَّة استعماله. سنتعلم في هذا الدرس كيفية إنشاء جدول وتنسيقه واستعمال الصيغ الحسابيَّة وبعض التوابع (functions). سننشئ جدولًا يحوي علاماتِ طلابٍ في مدرسة ما يحسب معدَّلاتهم الفصليَّة ويحدِّد إن كان الطالب ناجحًا أو راسبًا ثمَّ يحسب التقدير الذي يستحقه اعتمادًا على علاماته. إنشاء الجدول وتنسيقه نفتح تطبيق Google Drive ونضغط على "جديد" ثمَّ "جداول بيانات Google" أو نفتح تطبيق جداول بيانات Google مباشرةً وننشئ جدولًا جديدًا ونسميه "علامات الطلاب"؛ نغيِّر اتجاه الصفحة ليكون من اليمين إلى اليسار عبر قائمة تنسيق ← الاتجاه ← ورقة من اليمين إلى اليسار أو من شريط الأدوات مباشرةً. قد يلزمنا عدَّة أوراق عمل بحسب عدد المراحل الموجودة في المدرسة لذا سنغير اسم الورقة الحالية إلى "الصف السادس" بالضغط على السهم الصغير بجانب اسم الورقة واختيار "إعادة تسمية" أو الضغط على اسم الورقة مرتين. سنكتب في السطر الأول وصف البيانات التي سندخلها في الجدول التي تمثِّل أعمدته وهي اسم ورقم الطالب وأسماء المواد التي درسها في مرحلة معيَّنة خلال الفصل الأول والثاني والمعدَّل والنتيجة والتقدير. نلاحظ أنَّ اسم الفصل وأسماء المواد متوضعة في سطرين بينما الرقم واسم الطالب في سطر لذا سندمج خليَّة الرقم واسم الطالب مع الخليَّة أسفلها وندمج خليَّة الفصل الأول مع الخلايا التي بجانبها وكذلك بالنسبة لخليَّة الفصل الثاني وذلك عبر قائمة التنسيق ← دمج الخلايا ← دمج رأسيًّا أو دمج أفقيًّا بعد تحديد الخلايا المراد دمجها أو من شريط الأدوات مباشرةً بالضغط على دمج الخلايا. نوسِّط النص داخل الخلايا بمحاذاته أفقيًّا ورأسيًّا عبر قائمة التنسيق ← توسيط ووسط أو من شريط الأدوات بالضغط على محاذاة أفقيَّة أو رأسيَّة واختيار توسيط بعد تحديد خلايا رأس الجدول؛ يفضَّل تحديد كل خلايا الصفحة بالضغط على الخليَّة في الزاوية العلويَّة اليمينيَّة فوق خليَّة رقم الصف وجانب خليَّة اسم العمود وتحديد المحاذاة الوسطيَّة أفقيًّا ورأسيًّا. ندوِّر أسماء المواد بزاوية قدرها 90 درجة لكي لا تأخذ حيزًا من حجم الجدول عبر التنسيق ← تدوير النص ← تدوير للأسفل أو من قائمة الأدوات بالضغط على أيقونة تدوير النص واختيار وضع التدوير المناسب بالزاوية المطلوبة. نصغِّر حجم العمود المرافق لاسم المواد لتصغير حجم الجدول؛ هذا الأمر مفيد جدًا خصوصًا إذا كانت حقول الجدول كثيرة ونريد طباعته على ورقٍ بحجم صغير. نعدِّل تنسيق الخلايا لتظهر على أنَّها رأس الجدول وتتميز عن الخلايا الأخرى؛ نحدِّد الخلايا الرأسيَّة كلها ونكبِّر حجم الخط إلى 11 مثلًا ونختار التنسيق الغامق وذلك من شريط الأدوات. نغيِّر لون الخليَّة من "لون التعبئة" في شريط الأدوات ونغيِّر لون الخط بشكل متناسق. نضع حدودًا للخلايا بحيث تنقسم إلى مجموعات بحسب نوع البيانات التي تحتويها ونتحكم بنمط الحد ولونه وسماكته؛ نختار أصغر سماكة للحد ونحدِّد كل مجموعة متشابهة من الخلايا ونضع لها حدودًا داخليَّة فقط ثمَّ نغير نوع الحد إلى نوع الخط المزدوج أو أي نوع تختاره بحيث يختلف عن نوع الحد الداخلي ونضع للخلايا نفسها حدودًا خارجيَّة ثمَّ نحدِّد أعمدة الجدول (من A إلى Q) ونضع له حدودًا خارجية بالطريقة ذاتها. بقي لدينا تنسيق أسطر الجدول التي ستُملأ بالبيانات وذلك لتسهيل قراءتها؛ لدينا خيارين أولهما هو استعمال الألوان والثاني هو استعمال الحدود. نحدِّد أسطر الجدول لتمييزها بالألوان ونضغط على لون التعبئة في شريط الأدوات ونختار "الألوان البديلة" فتُفتح نافذة في القسم الأيسر. نختار من نمط التنسيق الألوان المناسبة كما يمكننا تحديد ألواننا المفضلة من أسفل القائمة؛ نُزِيلُ الإشارة بجانب خيار "الرأس" لأنَّنا نسَّقنا خلايا الرأس مسبقًا ولو لم ننسق خلايا الرأس نتركه ليضيف لونًا مختلفًا لرأس الجدول ثمَّ نضغط على "تم". إن رغبت في وضع تذييل للجدول فضع إشارة على "تذييل" لتمييزه. الطريقة الثانية لتنسيق أسطر الجدول هي وضع حدود لها. نحدِّد أسطر الجدول ونختار نوع الحدود المنقَّطة ثمَّ نضغط على خيار حد السطر فقط. ننهي بذلك تنسيق الجدول ليصبح جاهزًا لاستقبال البيانات. استعمال التوابع الرياضيَّة نستطيع عبر تطبيق جداول بيانات Google والتطبيقات المشابهة له إجراء العمليات الحسابيَّة الأساسيَّة بين خليتين أو أكثر بكتابة الرمز يساوي (=) وتحديد خليَّة ما وكتابة إشارة العمليَّة مثل الجمع أو الطرح أو القسمة أو الضرب ثمَّ تحديد الخليَّة الثانية أو كتابة أرقام مباشرةً. ماذا لو تعقَّدت العمليَّة الحسابيَّة مثل إيجاد متوسط قيم أو حساب الانحراف المعياري لمجموعة قيم؟ هنا يأتي دور التوابع التي تسهِّل العمليات الحسابيَّة والمنطقيَّة وتوسِّع عمل التطبيق إذ كلما دعم التطبيق عددًا أكبر من التوابع زادت قوته واتسع نطاق استخدامه. يدعم تطبيق جداول بيانات Google الكثير من التوابع والتي سنتعرف على جزء صغير منها. سنستعمل أولًا تابع التوسُّط (average) لحساب متوسِّط علامات الطلاب في الفصل الأول والفصل الثاني وكلا الفصلين في حقل المعدَّل؛ ندرج التابع average بالضغط على الخليَّة المحدَّدة ونكتب الرمز يساوي (=) ثمَّ نكتب اسمه، وعند كتابة الحروف الأولى منه تظهر اقتراحات عن التوابع مع شرح بسيط عنها. نختار التابع average بالضغط عليه فيظهر شرح عن كيفيَّة استعماله وهذا الشرح رائع جدًا إذ يشرح طريقة استعمال التابع بشكل صحيح ومُفصَّل وتوجد أمثلة كثيرة إذا فتحت الرابط الموجود أسفل الشرح؛ نحدِّد خلايا مواد الفصل الدراسي الأول وهي الخلايا من C3 وحتى G3 ثمَّ نضغط enter. سيظهر الخطأ ‎#DIV/0!‎ وهو قسمة عدد على صفر وهذا طبيعي لعدم وجود قيم، ويزول الخطأ بإدخال أرقام في الخلايا. ندرج التابع نفسه لحساب معدَّل الفصل الثاني ومعدَّل الفصلين مع تحديد الخلايا المناسبة. هنالك تابع مشابه للتابع average وهو التابع averagea والذي يُدخِل الخلايا التي تحوي نصًّا في حساب المتوسط مع اعتبار قيمتها صفرًا بينما يهملها التابع الأول بالكامل إن وُجدت بين القيم. حقل النتيجة هو تحديد إن كان الطالب ناجحًا أم راسبًا اعتمادًا على علاماته أو معدَّله. نستعمل التابع IF الذي يقارن صحة شرط منطقي ثمَّ يضع القيمة الأولى المُدخلة إن تحقق الشرط أو القيمة الثانية إن لم يتحقق، وتوضح الصورة التالية كيفيَّة استعماله. حدَّدنا الخليَّة O3 وهي معدَّل الفصلين شرطًا لنجاح الطالب بحيث إن كانت قيمتها أكبر أو تساوي 50 يُكتب في الخليَّة "ناجح" وإن كانت أقل يُكتب "راسب". ماذا لو أردنا اعتبار الطالب راسبًا إن رسب في إحدى مواده؟ يمكن في هذه الحالة استعمال التابع IFS لتحقيق عدَّة شروط واحدًا تلو الآخر. يتحقَّق هذا التابع من الشرط المنطقي الأول فإن تحقق يضع في الخليَّة العبارة المكتوبة بعده أي بعد الفاصلة وإن لم يتحقق ينتقل إلى تحقيق الشرط التالي ويتحقق منه ويستمر بالطريقة نفسها. نكتب التابع IFS في الخلية P3 ثمَّ نحدِّد في مدخلاته الخليَّة C3 التي تمثِّل المادة الأولى ويكون الشرط هو أصغر من 50 –العلامة الدنيا للنجاح- ونضع بعد الشرط عبارة "راسب" ثمَّ نضيف الخليَّة التي بجانبها مع شرط النجاح؛ نستمر بذلك حتى نصل إلى الخليَّة الأخيرة والتي نكررها مرتين الأولى إن كانت أصغر من 50 مع العبارة "راسب" والثانية أكبر أو يساوي 50 مع العبارة "ناجح" أي إن لم يتحقق شرط الرسوب في إحدى المواد يكون الطالب ناجحًا، وتوضح الصورة ذلك. لاحظ العلامات التي كتبناها في حقول المواد للتأكد من عمل التابع بشكل صحيح. نحدِّد التقدير الذي يحصل عليه الطالب بناءً على معدَّل الفصلين؛ يكون التقدير ممتاز إن كان معدَّله أكبر أو يساوي 90 وجيد جدًا إن كان معدَّله أكبر أو يساوي 80 وهكذا؛ نستعمل في هذه الحالة التابع IFS أيضًا كما موضح في الصورة. نحدِّد الخلايا من M3 وحتى Q3 التي استعملنا فيها التوابع ثمَّ نسحبها من الزاوية السفليِّة اليسرى حتى أسفل الجدول لنسخها للخلايا السفليِّة وبذلك ننتهي من إعداد جدول علامات الطلاب وكل ما علينا فعله الآن هو ملء الجدول بالعلامات وسيُحسب المعدَّل والنتيجة والتقدير مباشرةً. توجد توابع أخرى منها: SUM: يجمع الأعداد ضمن نطاق الخلايا المحدَّدة. MAX: يعطي أكبر قيمة من بين القيم المحدَّدة في نطاق الخلايا. MIN: عكس التابع السابق أي يعطي أصغر قيمة في نطاق الخلايا المحدَّدة. COUNT: يَعُدُّ الخلايا التي تحوي أرقامًا فقط والموجودة ضمن النطاق المحدَّد. COUNTA: يَعُدُّ الخلايا التي تحوي أرقامًا أو نصوصًا والموجودة ضمن النطاق المحدَّد. SUMIF: يجمع القيم العدديَّة التي تحقِّق شرطًا معيَّنًا. SUMIFA: تشبه سابقتها إلا أنَّه يمكن إضافة شروط متعدِّدة لجمع القيم. لا تقتصر التوابع على الأنواع السابقة ويمكنك زيارة هذه الصفحة لتصفح جميع التوابع التي يدعمها التطبيق.

سنتعرّف في هذا الدرس على الجداول في تطبيق مستندات جوجل ولنتعّرف عليها بشكل أفضل سنقوم بتطبيق عملي عبر إنشاء سيرة ذاتية باستخدام الجداول. لإدراج جدول في المستند إذهب إلى القائمة إدراج > جدول أو من القائمة جدول > إدراج جدول وبذات الطريقة المتبعة في برامج الوورد والرايتر يمكنك سحب مؤشر الفأرة فوق شكل الجدول المُصغّر ضمن القائمة لاختيار عدد الصفوف والأعمدة المراد إدراجها ضمن الجدول. في تطبيقنا العملي هذا سنقوم مبدئيًّا بإدراج جدول مؤلف من أربعة أعمدة وعشرة صفوف. سيظهر لنا الجدول بعرض صفوف يصل كامل عرض المستند وارتفاع أعمدة افتراضي يعادل سطرًا كتابيًا واحدًا. وللجدول حدود داخلية وخارجية متماثلة بحجم 1 نقطة. سنكتب الآن اسم صاحب السيرة الذاتية في الخلية الأولى وسيكون على سبيل المثال محمد محمد. يمكننا تطبيق تنسيقات النص المختلفة على الإسم وبما أنه محور هذا المستند فيجب أن يكون عريضًا (غامق) وبحجم أكبر قليلًا. وفي الخلية التي تحتها سندرج صورة صاحب السيرة الذاتية عبر القائمة إدراج > صورة ثم حمّل الصورة التي في حاسوبك أو الموجودة ضمن سحابة جوجل الخاصة بك أو من أي من الطرق المتوفرة لإدراج الصور. في مثالنا هذا سنقوم لاحقًا بتعديل لون خلفية الخلية لذلك من الأفضل استخدام صورة بتنسيق PNG ذات الخلفية الشفافة. يمكننا تعديل حجم الصورة في حال كانت أكبر من اللازم عبر تحديدها واستخدام أدوات تعديل الحجم في إطار الصورة. سننتقل إلى فقرة تحديد المعلومات الشخصية، وسنترك الصف الأول فارغًا وننتقل إلى الصف الثاني من العمود الثاني. سنكتب جملة المعلومات الشخصية. كما نشاهد في الصورة السابقة فإن ارتفاع الصف الثاني كبير وذلك لوجود الصورة الشخصية في الخلية الأولى من هذا الصف ولحل هذه المسألة سنقوم بدمج مجموعة خلايا لتتسع لمساحة الصورة وتُبقي على ارتفاع خلية المعلومات الشخصية طبيعيًا. حدّد خلية الصورة مع ثلاث خلايا تحتها ثم انقر بالزر الأيمن للفأرة عليها واختر دمج الخلايا ليتم دمج هذه الخلايا الأربعة في خلية واحدة، وهكذا تتم عملية دمج الخلايا حيث يتوجب علينا أولًا تحديد الخلايا الواجب دمجها ثم النقر عليها بالزر الأيمن للفأرة ومن ثم اختيار الخيار دمج الخلايا. أصبح ارتفاع خلية المعلومات الشخصية طبيعيًا وسنتابع الآن. سنضع المعلومات الشخصية في الخلية التي تحت خلية عنوان الفقرة. بعد أن كتبنا المعلومات الشخصية في الخلية نلاحظ أن ارتفاع الخلية يزداد بازدياد عدد الأسطر ولكن عرض الخلية ثابت وهو ليس كافيًا لهذه المعلومات لذلك سنقوم بدمج هذه الخلية مع الخلية التي بجوارها إلى الجهة اليسرى من ذات الصف. سنضيف باقي المعلومات بذات الطريقة في الخلايا التالية بحيث نضع عنوان الفقرة في خلية منفصلة والتفاصيل في الخلية التي تحتها مباشرة. في حال أردنا إضافة معلومات أخرى فيمكننا إضافة صفوف إضافية أو حتى أعمدة إضافية عبر النقر على الجدول بالزر الأيمن للفأرة واختيار الخيارات الخاصة بالإضافة. في درسنا هذا سنكتفي بهذه المعلومات وسنقوم بحذف الصفوف الأخيرة مع ترك صف واحد فقط في الأسفل. حدّد الصفوف المراد حذفها وانقر بالزر الأيمن واختر حذف صفين . سنقوم بتنسيق الخلايا لإنهاء تصميم السيرة الذاتية. حدّد العمود الأول كاملًا ثم انقر على أيقونة لون الخلفية في شريط الأدوات واختر لونًا لخلفية هذه الخلايا. الآن حدّد خلايا عناوين الفقرات مع الخلايا المجاورة لها من جهة اليسار ثم امنحها نفس لون الخلفية. حدّد الآن النصوص ضمن الخلايا التي عدلنا لون خلفيتها واحدًا تلو الآخر، وطبّق عليه تنسيق ألوان بحيث يكون لون التمييز مطابقًا للون خلفية الخلية، وبما أننا اخترنا لونًا داكنًا للخلفية سيتوجب علينا اختيار لون فاتح للنص. قم بتنسيق النصوص كما يجب، بحيث تكون عناوين الفقرات غامقة وأكبر حجمًا وكذلك عناوين المسمّيات ضمن التفاصيل. سنقوم الآن بإلقاء نظرة على خصائص الجدول حيث سنقوم بإزالة الحدود والأطر للجدول. انقر بالزر الأيمن على الجدول واختر خصائص الجدول. أول خيار في الخصائص هو إطار الجدول حيث نستطيع تغيير لونه وحجمه، وفي تصميمنا لا نحتاج لهذا الإطار، لذلك سننقر على أيقونة الحجم ونختار القيمة صفر. وباقي الخيارات هي للون خلفية الخلية حيث يمكنك تحديده من هنا ايضًا و تحديد المحاذاة الرأسية للخلية إن كانت للأعلى أو الوسط أو الأسفل وترتيب العمود من اليمين لليسار أو العكس وأبعاد الصف أو العمود بوحدة القياس الافتراضية أو يمكنك تركها بدون تفعيل لتحصل على أبعاد افتراضية بحسب حجم البيانات بداخل الخلايا كما نستطيع تحديد محاذاة الجدول وتحديد المسافة البادئة.بعد إلغاء (الإطار) سنحصل على الصفحة التالية. يبدو تصميم السيرة الذاتية جيدًا. طبعًا ستحتاج في الحالة الواقعية إلى إضافة معلومات أكثر، كوسائل الاتصال المتوفرة ومستوى القدرات والإمكانات واللغات وغيرها، ويمكنكم القيام بذلك واختبار قدراتكم في إنشاء وتخصيص وتعديل الجداول في تطبيق مستندات جوجل. وبما أن هذه سيرة ذاتية سيتم طباعتها أو إرسالها إلى جهة معينة فمن الأفضل حفظها بهيئة PDF من خلال القائمة ملف > تنزيل بتنسيق > مستند PDF (بتنسيق .pdf) وبذلك سيتم تحميل ملف PDF جاهز إلى حاسوبك لطباعته أو إرساله إلى الجهة المعنية. الصورة الشخصية للسيرة الذاتية (الأفتار) محفوظة الحقوق لـ Freepik

تعرفنا في الدرس السابق على واجهة تطبيق جداول بيانات جوجل وسنتابع في هذا الدرس مبادئ العمل عىل التطبيق. يمكننا تحديد الخلية التي سندخل ضمنها البيانات باستخدام الفأرة أو مفاتيح الأسهم ثم أدخل البيانات بداخلها، سنقوم على سبيل المثال بإنشاء جدول عناوين وهواتف. بعد إدخال بيانات عناوين الأعمدة لما سيتم إدخاله ضمن الجدول سنقوم بإدخال الأرقام المتسلسلة تحت عمود (مسلسل). في حال أدخلنا الرقم 1 في الخلية الأولى ثم حدّدنا هذه الخلية بالفأرة ثم نقرنا على المربع الأزرق الصغير في الركن السفلي الأيسر من الخلية وسحبنا للأسفل عدة خلايا فإن النتيجة ستكون نسخ بيانات هذه الخلية ذاتها على جميع الخلايا المحددة كما في الصورة. وفي حال إدخال القيمة 1 في الخلية الأولى و2 في الخلية التالية فسيكون من السهل الحصول على تعبئة تسلسلية حيث يقوم التطبيق بملء الخلايا التالية بتسلسل الأرقام المتتالي كما في الصورة. ثم نقوم بإدخال الأسماء وأرقام الهواتف والعناوين قدتكون أرقام الهواتف عادة تبدأ بالصفر كرمز نداء خارجي ولكن التنسيق التلقائي للتطبيق سيقوم بحذف الصفر الذي في بداية الرقم باعتبار أن لا قيمة له في العمليات الحسابية وستظهر الأرقام كما في الشكل السابق بدون أصفار في البداية. لتغيير هذا التنسيق حدّد الخلايا التي سنقوم بتغيير تنسيقها ثم اذهب إلى القائمة التنسيق > رقم > نص عادي ثم أعد كتابة الأرقام لتحصل على النتيجة المثالية. بما أن العنوان في الأعلى هو عنوان الجدول كله فسنقوم بجعل جميع الخلايا في الصف الأول خلية واحدة لنضع العنوان في الوسط بسهولة بعدها. حدد جميع خلايا الصف الأول من الجدول ثم انقر على الأداة من لدمج الخلايا من شريط الأدوات ثم قم بتوسيط النص في الخلية الجديدة الكبيرة. وسنجد هذه الأدوات في شريط الأدوات لنستخدمها في تنسيق الخلايا. حدد الخلية الكبيرة في الأعلى (العنوان) واجعل لون الخلفية أحمر داكن ولون الخط أبيض. عدّل أيضًا لون خلفية الصف الثاني بالكامل ليكون باللون البرتقالي والنص باللون الأبيض. اجعل لون خلفية الصف الرابع باللون الرمادي الفاتح جدًّا وأبقِ على اللون الأسود للنص. الفكرة هنا هي جعل تمييز الصفوف أسهل عبر جعل الصفوف بلونين أبيض ورمادي فاتح بشكل متتالي وهناك طريقتين لفعل ذلك. الطريقة الأولى هي بتحديد الصفوف التي نريدها باللون الرمادي الفاتح صفًا صفًا ثم نقوم بتغيير لون الخلفية إلى اللون الرمادي الفاتح. ويتم تحديد الصفوف المختلفة والمتباعدة عبر تحديد الصف الأول ثم نستمر بالضغط على مفتاح Ctrl ثم نحدد الصف الثالث والخامس وهكذا مع الاستمرار بالضغط على مفتاح Ctrl أثناء التحديد حتى الانتهاء. والطريقة الثانية هي بتطبيق هذا التنسيق على صف واحد ومن ثم استخدام أداة نسق التنسيق الموجودة في شريط الأدوات وتحديد الصف الذي سيتم لصق التنسيق ضمنه ولكن الطريقة الأولى أسرع وأفضل. وسيظهر الجدول حتى هذه اللحظة بهذا الشكل. قم بتنسيق النصوص بجعل العناوين بالخط العريض (الغامق) وبحجم أكبر وفي الوسط ونسّق أيضًا نصوص البيانات المدخلة. قد نحتاج إلى إدراج صف إضافي وسط صفوف الجدول. يمكن القيام بذلك عبر تحديد الصف بالكامل (انقر على رقم الصف) ثم انقر عليه بالزر الأيمن واختر من القائمة إمّا إدراج 1 صف من الصفوف أعلاه أو إدراج 1 صف من الصفوف أدناه لإدراج صف جديد أعلى الصف المحدد أو أسفله. وبذلك سيتم إدراج صف جديد كما في الشكل. الأمر ذاته ينطبق عند الرغبة بإضافة عمود إضافي حيث نحدد العمود عبر النقر على حرف العمود من شريط حروف الأعمدة وننقر عليه بالزر الأيمن ونختار من القائمة إمّا إدراج 1 من الأعمدة لليمين أو إدراج 1 من الأعمدة لليسار . يمكن القيام بإضافة صفوف أو أعمدة عبر تحديد الصف أو العمود والذهاب إلى قائمة إدراج ومن ثم نختار أحد خيارات الإضافة المتوفرة أعلى هذه القائمة ولحذف صف كامل نقوم بتحديد هذا الصف عبر النقر على رقم الصف من شريط أرقام الصفوف والضغط بالزر الأيمن عليه ثم اختيار أحد الخيارات التالية: حذف الصف: وسيقوم هذا الخيار بحذف الصف بالكامل وسحب بقية الصفوف الموجودة أسفل ذلك الصف لتحل مكانه. محو الصف: وسيقوم هذا الخيار بمسح جميع البيانات بداخل الصف مع الإبقاء عليه وعدم حذفه. إخفاء الصف: وسيقوم هذا الخيار بإخفاء الصف ولكن بدون محوه أو حذفه وسيظهر مكانه أسهم صغيرة تدل على وجود صف مخفي يمكن إظهارها عبر النقر على تلك الأسهم الصغيرة. والأمر ذاته ينطبق على حذف ومحو وإخفاء الأعمدة. تعلمنا كيفية إنشاء جدول هواتف وعناوين وتنسيقه وتعديله بشكل بسيط وسهل. يوجد العديد من المزايا والأدوات الإضافية التي يمكن تطبيقها على الجدول وتعديله وسنتطرق لها في الدروس المتقدمة من هذا التطبيق.

تعلمنا في الدرس الماضي بعض تقنيات التحكم في الجداول على Adobe InDesign وتوزيع أجزائها مع بعض الخصائص الأخرى والآن سنتعلم بشكل عملي كيفية إنشاء جدول متكامل الخصائص في برنامج إن ديزاين. سنقوم بإنشاء جدول يتضمن مجموعة من أجهزة الهاتف المحمول مع بيان أهم مزايا ومواصفات هذه الهواتف للمقارنة بينها ومعرفة التفاصيل الخاصة بها بسهولة وسرعة ومن هنا سنقوم بإنشاء هذا الجدول كي نقدم المعلومات بطريقة منهجية واضحة وسهلة الوصول عبر جدول أنيق واضح المعالم مع الألوان من خلال برنامج إن ديزاين. يجب علينا أولًا التخطيط لرسم الجدول وذلك يكون عبر تحضير المعلومات اللازمة للجدول ومعرفة عدد الأعمدة والصفوف التي يجب وضعها في هذا الجدول وقد قمتُ بعملية البحث المطلوبة في مواقع الإنترنت المعنية بمواصفات أجهزة الهواتف المحمولة بأنواعها وحصلتُ على المعلومات المطلوبة. طبعًا المواصفات الكاملة لكل هاتف كثيرة جدًا لذلك سنختار المواصفات الأهم من بينها حتى يكون الجدول موضوعيًّا وواضحًا ومن هذه المواصفات امكانية تشغيل الشبكات ونوعية نظام التشغيل وإصداره وحجم الشاشة وسرعة المعالج وغيرها من التفاصيل وقد اخترتُ مجموعة من الهواتف الجديدة نسبيًّا والتي تتميز بإمكاناتها المتميزة للمقارنة فيما بينها. افتح برنامج إن ديزاين وأنشئ مستندًا جديدًا بحجم ورقة A4 واجعل العمل أفقيًّا وليس عموديًّا وذلك لأننا سنكتب المواصفات بشكل أعمدة وأنواع الهواتف بشكل أفقي وبما أن عدد المواصفات أكبر فإنني اخترت أن يكون تخطيط العمل أفقيًّا. وبما أن كمّ المعلومات كبير فسوف نخفّف من الهوامش لذلك اجعلها 5mm على كل جانب. أنشئ جدولًا جديدًا من القائمة: Table > Create Table أو من الاختصار Ctrl+Alt+Shift+T ومن صندوق حوار إنشاء الجدول سنقوم بتحديد عدد الأعمدة والصفوف. هنا يجب علينا أن نحدد عدد المواصفات التي ننوي إدراجها في الجدول وكذلك عدد الهواتف وبنفس الطريقة المستخدمة في برامج Word أو Writer يجب أن نضيف عمودًا إضافيًّا إلى عدد أعمدة المواصفات لنضع فيه أسماء الهواتف في البداية ويجب أن نضيف صفًّا أو اثنين في بداية الجدول لوضع أسماء المواصفات بحسب طريقتنا في تصميم الجدول. ولكن إذا اكتشفتَ فيما بعد بأنكَ أخطأتَ في عدد الأعمدة أو الصفوف فلا تقلق، يمكننا بسهولة زيادة أو حذف أي عمود أو صف فيما بعد. اخترتُ خمسة عشر هاتفًا لوضعها في الجدول وبما أنني أنوي وضع تصنيفين من المواصفات ورموز لهذه المواصفات فقد أضفتُ ثلاثة صفوف إضافية ليكون العدد الكلي للصفوف ثمانية عشر وأمّا الأعمدة فقد اخترت أربعًا وعشرين من المواصفات وبما أنني يجب أن أضيف صفًّا لوضع أسماء الهواتف فيصبح بذلك عدد الأعمدة خمسة وعشرين عمودًا. الآن سيتغير شكل المؤشر ليأخذ شكلًا شبيهًا بالجدول. ارسم الجدول من أقصى زاوية الهوامش في الصفحة إلى الزاوية الأخرى ليغطي الجدول كامل مساحة الصفحة ضمن الهوامش. يمكننا تعديل مقاسات الأعمدة والصفوف يدويًّا أو من خلال خصائص الأعمدة والصفوف التي نحصل عليها من القوائم التي تظهر عند الضغط بالزر الأيمن فوق الخلايا. وكما تعلّمنا في الدرس السابق فإنّ حجم الجدول ليس ثابتًا بل سيتغير بمجرد تغيير حجم أي عنصر من عناصر الجدول على عكس الجداول في البرامج المكتبية الأخرى التي يبقى فيها حجم الجدول ثابتًا بغض النظر عن التعديلات التي تطرأ على عناصره الداخلية. سنقوم بعمليات دمج الخلايا وفصلها من خلال تحديد الخلايا المطلوب دمجها ومن ثم نضغط بالزر الأيمن عليها ونختار Merge Cells ويمكننا أن نختار تقسيم هذه الخلايا عموديًّا أو أفقيًّا من الخيارين التاليين في القائمة. دمجنا هنا ثلاث صفوف من الخلية العمودية الأولى وذلك لأنني خططتُ لإدراج تصنيفين من المواصفات وصفًّا لرموز المواصفات. وفي الخطوة التالية سنقوم بدمج الخلايا الأفقية الثلاثة الموجودة ضمن الأعمدة التالية للعمود الأول وذلك لأنني سأضع فيها تصنيفًا رئيسيًا وهو الشبكات وتتألف من ثلاثة تصنيفات فرعية وهي GSM ،GPRS و EDGE. سنكتب الآن أسماء التصنيفات الفرعية الثلاثة وبما أن عدد المواصفات كبير وبالتالي فإن عدد الأعمدة كبير أيضًا فسوف نحتاج لتوفير المساحة الكافية لجميع العناصر العمودية. فإذا كتبنا بالطريقة التقليدية الأفقية عندها لن تتوفر لدينا المساحة الكافية لجميع العناصر في الجدول، لهذا سنجعل الكلمات عموديّة من خلال اختيار الزر T المائل عموديًّا ضمن شريط أدوات خلايا الجدول في الأعلى. وبعد الانتهاء من كتابة أسماء المواصفات وتوزيعها بحسب التصنيفات المناسبة وتوجيه النص عموديًّا أو أفقيًّا بحسب المساحة المتوفرة فإن شكل الجدول حتى هذه المرحلة سيبدو هكذا. من ضمن هذه المواصفات سيكون هناك نوعين البعض سيكون أرقامًا كحجم الشاشة مثلًا والبعض الآخر سيكون فقط عن توفّر هذه الميزة أو عدم توفرها لذلك سنضع في حال توفرها إشارة وفي حال عدم توفرها سنترك الخلية فارغة. ولأن بعض الخانات ستحوي أرقامًا فهي تحتاج إلى حجم أكبر لتتسع لتلك الأرقام بينما الخانات التي ستتضمن الرمز فقط ليست بحاجة سوى لمساحة قليلة بحجم ذلك الرمز. لذلك سنقوم بضبط عرض الأعمدة التي ستحوي الرمز فقط بجعلها أصغر وترك باقي الأعمدة حرّة لتوسيع عرض كلٍّ منها بحسب حجم النص المطلوب. وحتى لا نقوم بتحديد عرض كل عمود بشكل افرادي يمكننا تحديد مجموعة أعمدة متجاورة ومتشابهة في هذه الميزة ثم نضغط بالزر الأيمن ونختار: Cell Options > Rows & Columns وفي نافذة خيارات الخلية التي ستظهر فيما بعد سنجد العديد من التبويبات أعلى النافذة تمثل كل منها أحد الخيارات التي يمكن التحكم بالخلية من خلالها كخيارات النص والرسومات والحدود والتعبئة وغيرها. كنا قد اخترنا سابقًا خيار الصفوف والأعمدة وفي هذا الخيار سنجد أننا نستطيع التحكم بارتفاع الصف ضمن خيارين إما بالقيمة الموضوعة على الأقل أو بالقيمة الموضوعة بالتحديد، كما يمكننا تحديد عرض العمود، وهنا سنقوم بوضع القيمة التي سيكون عليها عرض كل عمود من الأعمدة التي حدّدناها مسبقًا ولتكن بقيمة 8mm. كرّر العملية لباقي الأعمدة التي ستحوي الرمز فقط. قد نواجه مشكلة في الأرقام ضمن سياق النص لتظهر الأرقام الهندية بدل العربية مع أن النص هو اسم ونوع الهاتف باللغة الإنجليزية لذلك سنحل هذه المشكلة عبر تحديد ذلك النص واختيار اللغة الإنجليزية من خيارات اللغة في شريط الأدوات العلوي. وبعد تعديل عرض الأعمدة كما يجب وإصلاح مشكلة الأرقام سيكون المخطط الأولي للجدول جاهزًا لتعديلات التنسيق وتعبئته بالبيانات المطلوبة. ومن أولى خطوات التنسيق ستكون تنسيق الجدول والنص ويمكننا الحصول على نافذة أدوات الجدول من قائمة Windows أو من سنجدها تلقائيًّا في شريط الأدوات العلوي بمجرد العمل على الجدول أو على النصوص داخل الجدول. عدد الصفوف. عدد الأعمدة. ارتفاع الصف. عرض العمود. اتجاه الجدول إما من اليسار لليمين أو بالعكس. محاذاة النص أفقيًّا داخل الخلية أو الصف. اتجاه النص أفقي أو عمودي أو بالمقلوب. المسافة الداخلية الفاصلة بين حدود الخلية والنص. ومع تعديل النص من أدواته في شريط الأدوات العلوي كتوسيطه وتعديل حجم الخط ونوعيته بالإضافة إلى التعديلات التي قمنا بها في الخطوة السابقة فإن الشكل الجديد للجدول سيكون كما يلي. والآن سننتقل إلى تنسيق ألوان الخلايا. حدّد الخلايا المطلوب تعديل ألوانها، وهنا حدّدنا العمود الأول لكي نعدّل لون النص فيها، ثم افتح نافذة الحوامل Swatches، وستجد في الأعلى حرف T وبجانبه مربع صغير، فإذا أردنا تعديل ألوان الخلية اخترنا المربع الصغير، وبما أننا نريد تعديل لون النص فسنختار حرف T. ولاختيار ألوان جديدة من غير الموجودة في لوحة الحوامل الحالية، اضغط على زر القائمة الصغير الموجود في زاوية لوحة الحوامل، ثم اختر New Color Swatch لكي نختار اللون الجديد. في نافذة اختيار اللون الجديد سنضغط على الخيار Color Mode لاختيار نمط الألوان. اخترتُ هنا أحد أنماط PANTONE المعروفة. وبالتحديد PANTONE 306 C ثم اضغط OK وسيصبح هذا اللون أحد ألوان ضمن لوحة الحوامل. طبعًا يوجد العديد من أنماط الألوان مثل RGB و CMYK المعروفة لدى الجميع ولكن ما هو PANTONE؟ هو نظام عالمي لمضاهاة الألوان، وهو أحد أكثر تلك الأنظمة انتشارًا ويستخدم لمضاهاة واختيار الألوان أثناء عمليات الطباعة والطلاء واختيار الألوان في تطبيقات أخرى، وهو نظام عالمي موحد للألوان، أي أنه إذا اخترت لونًا من هذا النظام فسيكون له رقم خاص، عندها يكفي أن تخبر مركز الطباعة أو الديكور أو أيًّا كان من تتعامل معه بأنك اخترت لون بانتون 103 مثلًا، وعندها سيوضع ذلك اللون بالتحديد وبدقة، وهذا ما تقوم به الشركات العالمية التي تضع شعارها ولونها الخاص على منتجات مختلفة ومتنوعة، وعلى الرغم من تنوع المنتجات من حيث الأشكال والأحجام والمواد فإن لون الشعار واللون الخاص بالمنتجات يبقى متطابقًا تمامًا، وهذا الأمر يتم بالاعتماد على نظام مطابقة الألوان مثل بانتون، وعلى الرغم من تنوع ألوان هذه الأنظمة وإصدارها لألوان جديدة كل عام إلا أنها تبقى محدودة بالمقارنة مع RGB وCMYK. ويمكننا تعديل تنسيق الخلايا أو الصفوف أو الأعمدة بكاملها من خلال شريط الأدوات العلوي أو من خلال خصائص حدود وتعبئة الخلايا أما شريط الأدوات العلوي فيحوي على: لون تعبئة الخلية. لون حدود الخلية. حجم حدود الخلية. تنسيق حدود الخلية. تحديد الحدود الداخلية والخارجية التي سينطبق عليها التنسيق. وبعد القيام بتنسيق الخلايا من خلال تغيير ألوان الحدود وتعبئة خلايا الصفوف الأولى سيبدو الجدول على الشكل التالي: لوّن الصف الثالث باللون البرتقالي PANTONE Orange 021 C. سنضع لاحقًا رموز المواصفات في هذا الصف وستكون باللون الأبيض. قمتُ بتجهيز هذه الرموز مسبقًا حيث حمّلتُ رموز المواصفات ثم عدّلتُ حجمها لتكون مناسبة لوضعها ضمن هذا الجدول وبما أننا جعلنا حجم خلايا الرموز سابقًا 8mm فهذا يعادل 33 بيكسل بحسب الدقة التي اخترنا العمل عليها منذ البداية، كما جعلت لونها اللون الأبيض. ضع هذه الرموز كل واحدة في مكانها الصحيح من خلال الأمر Place من قائمة File أو من خلال الاختصار Ctrl+D ثم اختيار الملف المطلوب. قد يتطلب الأمر في تصاميم أخرى تعديل حجم الصورة التي تم إدراجها بالأمر Place، وقد ذكرتُ ذلك في الدرس الماضي حيث سيتوجب عليكم الانتباه في تحديد الجزء الذي سيتم التحكم بحجمه أو موقعه، إنّ لون الإطار الذي يتضمن الصورة أزرق بينما لون حدود الصورة نفسها برتقالي وسيتغير لون هذه الحدود بالنقر المتكرر على الصورة. وبعد وضع جميع الرموز في مكانها سيبدو الجدول على الشكل التالي: وبعد إدخال كافة البيانات المتعلقة بمواصفات الهواتف ووضع علامات في مواضعها الصحيحة للدلالة على توفّر الميزة وتنسيق الخطوط والأرقام سيكون شكل الجدول كما يلي: سنقوم بوضع شعار لشركة افتراضية خيالية تبيع الهواتف المحمولة في الخلية الأولى من الجدول والتي كُتِبَ في داخلها كلمة "المواصفات" وللقيام بذلك قمتُ بتصميم الشعار للشركة الافتراضية بواسطة برنامج الإليستريتور بحيث ستكون خلفية الشعار شفافة لذلك سنقوم بتعبئة خلفية هذه الخلية من برنامج إن ديزاين وسيكون اللون البرتقالي المستخدم في التصميم ذاته ثم سنستخدم الاختصار Ctrl+D لإدخال صورة الشعار بعد أن ننقر نقرًا مزدوجًا داخل الخلية المطلوبة ثم سنعدّل حجم الشعار بما يتناسب وظهوره داخل الخلية عبر النقر عليه مرتين لتصبح حدود الصورة برتقالية بدل الحدود الزرقاء وبذلك سنتحكم بالصورة وليس بالإطار الذي يحوي الصورة (الاطار هنا في هذه الحالة سيكون حدود الخلية) ثم نصغّر أو نكبّر حجم الشعار مع الاستمرار في الضغط على مفتاحي Shift وAlt للمحافظة على نِسَب الصورة ومركزيّتها. ملاحظة: صورة الشعار بتنسيق ai حيث أن برنامج InDesign يقبل معظم أنواع ملفات الصور. أخيرًا سنقوم بتنسيق الصفوف بحيث نستطيع بسهولة التمييز بين الهواتف على طول كل صف وذلك عبر تلوين خلفية كل صف بلون مختلف، وحتى نحافظ على التصميم بسيطًا وأنيقًا سنقوم بتعبئة خلفية الصفوف الفردية بلون أزرق ونخفف Tint إلى 13% ونترك الصفوف الزوجية بدون تعديل. الشكل النهائي للجدول كما هو ظاهر في الصورة في الأسفل. إن تصميم الجداول في برنامج InDesign جميل وممتع وسهل أيضًا ستحتاجون فقط بعض الوقت في التعامل معها وبعدها ستكون الأمور أكثر سلاسة، وإن ظننتم أنها صعبة فتذكّروا أننا جميعًا عانينا قليلًا مع الجداول للمرة الأولى في برنامج Word و Writer فالبداية لن تكون سلسلة طبعًا وسنحتاج إلى الصبر والمثابرة. والآن سأشرح بعض المزايا الخاصة في هذا الدرس: حدود وتعبئة الخلايا يمكنكم القيام بأي تعديلات على تنسيق الخلايا بشكل إفرادي أو صفوف أو أعمدة كاملة بعد تحديدها ثم الذهاب إلى القائمة: Table > Cell Options > Strokes and Fills وعندها ستفتح نافذة الحدود والتعبئة حيث نستطيع اختيار الحدود التي نريدها أن تظهر والحدود التي لا نريدها عبر الضغط عليها في المخطط الواضح في أعلى وسط النافذة بحيث ستكون الخطوط الزرقاء في المخطط حدودًا ظاهرةً في التصميم والخطوط السوداء في التصميم حدودًا غير ظاهرة في التصميم وسيحدّد الخيار Weight حجم وسماكة الحدود والخيار Type نمط هذه الحدود كأن تكون متقطعة بطريقة ما ومن الخيار Color يمكننا اختيار لون هذه الحدود من خلال حامل الألوان المُستخدَم في التصميم وسيحدّد الخيار Tint مستوى ظهور الحدود وشفافيتها وفي حال اخترنا نمط خط متقطّع فسيكون هناك فجوات في الخط ويمكننا اختيار أن تكون هذه الفجوات شفافة بلون الورقة أو بلون آخر من خلال الخيار Gap Color ونستطيع تحديد مستوى شفافيتها من الخيار Gap Tint، أمّا بالنسبة لقسم Cell Fill من هذه النافذة فيمكننا تحديد لون تعبئة خلفية الخلية من الخيار Color ومستوى الشفافية من خلال الخيار Tint. تنسيقات النص الجاهزة إذا كان حجم العمل كبيرًا ويتضمن نصوصًا كثيرة وكان فيها عيب من حيث تنسيق لغة النص أو الأرقام فعندها يمكننا تجهيز تنسيق جاهز للنص بحسب ما نريد عبر الضغط على حرف A في شريط الأدوات العلوي ثم اختيار New Character Style فتُفتَح نافذة تجهيز أنماط تنسيقات النصوص والتي تحوي الكثير من الإعدادات لذلك يمكنكم تجهيز تنسيق النمط الخاص بكم مسبقًا وعليكم منحه اسمًا خاصًا به لتتمكنوا من استخدامه فيما بعد عبر تحديد الخلايا أو النص المُراد تطبيق النمط عليه ثم نضغط Shift+F11 ثم نختار النمط الجاهز من القائمة التي ستُفتَح بعد ذلك. الخلاصة كثيرًا ما قرأت كتبًا عربية متنوعة في مختلف المجالات وكانت تحتوي على الجداول، وعلى الأقل تحتوي جدول الفهرس، وغالبًا ما كانت هذه الجداول سيئة في التصميم وحتى مزعجة في بعض الأحيان، ويرجع ذلك في الغالب إلى استخدام الكُتّاب لبرامج بسيطة كالبرامج المكتبية المعروفة بدون العمل الجاد عليها (يمكن لهذه البرامج تقديم جداول مميزة) أو لجهل هؤلاء الكُتّاب بأساليب التصميم الصحيحة، لسنا مضطرين إلى اللجوء إلى دور النشر ومراكز الطباعة الكبرى وندفع تكاليف إضافية لقاء اهتمام هؤلاء بتنسيق الجداول وتنسيق الكتاب بشكل عام قبل الطباعة أو أن نبيع الكتاب على الإنترنت لنجد بعدها عددًا من الشكاوي حول رداءة تصميم الكتاب ما قد يسئ إلى سمعة الكاتب ويحد قليلًا من المبيعات المستقبلية، لذلك وبقليل من الجهد يمكننا القيام بتصميم جداول مميزة باستخدام هذا البرنامج الرائع وتحقيق التوفير والتميّز والنجاح. ملاحظات الدرس جميع المعلومات والمواصفات للهواتف المحمولة الموجودة في الجدول في هذا الدرس صحيحة ومأخوذة من مواقع الهواتف المحمولة على الإنترنت. صورة حوامل بانتون من موقع Wikimedia تحت الترخيص CC BY-SA 3.0. صورة الشعار من تأليفي وهي مرخصة لصالح أكاديمية حسوب تحت الترخيص CC BY-NC-SA 4.0 ويمكن تحميلها بغية الاستفادة منها لأغراض تدريبية وتعليمية من هنا.

سنتابع في سلسلة دروس مبادئ برنامج إن ديزاين Abode InDesign الرائع لتصميم المطبوعات والكتب وغيرها. قمنا في الدرس السابق بأخذ فكرة عامة عن البرنامج وفهم آلية عمل هذا البرنامج من خلال ورشة عمل مجلة لعبة سيارات، وذلك مهم جدًّا قبل البدء بتعلّم أساسيات البرنامج بحيث يكون لدينا فكرة عمّا سنتعلّمه لاحقًا. قمنا بالتطرّق إلى موضوع الجداول في الدرس السابق من خلال إنشاء جداول صغيرة تتضمن مواصفات كل سيارة مع تغيير في الحدود الداخلية والخارجية للجدول وتعديل ألوان النص ضمن الخلايا، ولكننا في هذا الدرس سنتوسّع أكثر في الجداول بحيث سنحاول تغطية معظم ما يتعلّق بها في هذا البرنامج. العديد من الكتّاب في العالم العربي يقومون بتصميم كتب إلكترونية، بعضها مجاني وغالبيتها للبيع بمقابل مادي، ولكن للأسف معظم المؤلفين ليست لديهم خبرة في التصميم لإنشاء ملفات PDF لائقة ومميزة، القليل فقط من يتقن استخدام برامج التصميم وهو ما يجعل الكِتاب يبدو رديئًا، ما يدفع بالبعض إلى اللجوء إلى مصمّمين محترفين لتصميم كتبهم وهذا يكلف الكثير من المال مما يُضعِفُ من الجدوى الاقتصادية لعملية تأليف الكتاب وبيعه بسعر معقول، لذلك لا ضيرَ في تعلّم هذا البرنامج الرائع الاحترافي والسهل لتصميم الكتب الإلكترونية وحتى المطبوعة. في البداية لن أضيّع الكثير من الوقت على موضوع كيفية إنشاء جدول فهذه العملية سهلة وهي تشبه إلى حدٍّ كبير إنشاء جدول في برنامج Microsoft Word أو برنامج Writer من حزمة ليبر أوفيس فكل ما عليك القيام به هو اختيار Insert Table من قائمة Table ويمكن القيام بذلك من الاختصار Ctrl+Alt+Shift+T لتظهر لك نافذة إنشاء الجدول وتختار منها عدد الأعمدة والصفوف بالإضافة لتحديد عدد صفوف رأس الجدول وحاشيته وتحديد نمط جاهز للجدول وهذه الأمور سنتعرّف عليها فيما بعد حيث أن الأهم الآن هو عدد الصفوف والأعمدة وستكون النافذة بهذا الشكل. سنجد أن هذه النافذة مقسّمة إلى حقول، ففي حقل Table Dimensions (أبعاد الجدول) يمكننا تحديد عدد الصفوف من الخيار الأول ثم عدد الأعمدة ثم عدد صفوف رأس الجدول وأخيرًا عدد صفوف تذييل الجدول. وفي حقل Table Direction (جهة الجدول) يمكننا تحديد اتجاه الجدول إما من اليمين إلى اليسار أو بالعكس. ملاحظة: تحوي فقرات هذه السلسلة من دروس الجداول على معلومات متنوعة قد لا تكون مذكورة في عناوين الفقرات لذلك من المهم الانتباه جيدًا للتفاصيل في الشرح. تحويل النصوص إلى جدول سنتطرّق إلى ميزة جديدة في البرنامج وهي تحويل النص إلى جدول. أولًا أكتب نصًّا يتضمن بيانات تتناسب مع نمط جدول عبر الفصل بين العناصر بمسافات أو بفواصل وقم بكتابة عدّة أسطر حيث ستكون الأسطر صفوفًا وستُشكّل المسافات أو الفواصل بين العناصر الأعمدة ولتجربة هذا الأمر سنقوم بكتابة بيانات بطولة كرة قدم وهمية على برنامج Microsoft Word كما في الصورة. يمكنك تحميل ملف المثال النصّي من هنا. كما تشاهد في المثال قمتُ بوضع بيانات تتعلق ببطولة رياضيّة وهميّة تتضمن صفًّا أول كعناوين للبيانات التالية في الصفوف، كما أن العمود الأوّل يتضمن اسم الفرق المشاركة بالبطولة، وقمت بالفصل بين البيانات بفواصل (الفاصلة) وهذا مهم للغاية حتى تتكوّن الأعمدة بشكل صحيح، قم بحفظ الملف بصيغة DOCX أو DOC ثم افتح برنامج InDesign وابدأ ملفًّا جديدًا كورقة A4 ثم استخدم أداة كتابة النص لتشكيل إطار لكتابة النص، انقر بالفأرة على زاوية الورقة واسحب إلى الطرف الآخر كما في الصورة. ثم اذهب إلى القائمة: File > Place أو من خلال الاختصار Ctrl+D وذلك لإدراج ملف Word الذي أنشأناه داخل برنامج InDesign ثم اختر الملف كما في الصورة. ملاحظة: يجب إنشاء إطار النص قبل الذهاب إلى القائمة وذلك على عكس إنشاء جدول عادي حيث لا يتطلّب هذه الخطوة. وسيظهر شكل النص كما كتبناه على ملف Word الأصلي ضمن إطار النص كما في الصورة: ولتحويل هذا النص إلى جدول حدّد كامل النص ثم اذهب إلى القائمة: Table > Covert Text to Table ثم ستفتح نافذة خيارات التحويل. في الحقل الأول Column Separator سيكون عليك أن تختار بين ما سيقوم بتشكيل الأعمدة وهي الفواصل داخل السطر الواحد فإمّا أن تكون الفاصلة أو بحسب الفقرات أو الفراغات، في هذه الحالة وضعنا فواصل بين العناصر التي من المفترض أن تصبح أعمدة، الأمر ذاته ينطبق على حالة الصفوف. في حالتنا هنا ستكون الفواصل Comma هي من تحدد الأعمدة والفقرات Paragraph هي من ستحدد الصفوف. يمكنك تعديل الجدول بطرق عدّة، ولعلّ من أهم التعديلات التي قد تحتاجها تغيير موضع أو ترتيب أحد الأعمدة ويمكنك ذلك بوضع المؤشر فوق العمود مباشرة ليتغير شكله إلى شكل سهم متّجه نحو العمود ثم ننقر بالفأرة فيتم تحديد كامل العمود وبعدها نسحب باستخدام الفأرة هذا العمود إلى الموقع الجديد الذي نريده. الأمر ذاته ينطبق على تحريك الصفوف بحيث نضع المؤشر بالقرب من يمين الصف مباشرة ليتغير شكل المؤشر إلى سهم أفقي يدل على الصف ثم نتابع بنفس الطريقة المُتّبعة مع تحريك الأعمدة. صفوف رأس وتذييل الجدول عادةً ما يمكننا وضع رأس وتذييل للصفحات المكتوبة ببرنامج Word حيث سيبقى هذا الرأس والتذييل موحدًا في جميع الصفحات، لكن هذه الميزة موجودة في الجداول في برنامج إن ديزاين حيث يمكننا تحديد صف أو أكثر ليكون رأس الجدول ويبقى ثابتًا في جميع أجزاء الجدول والأمر ذاته ينطبق على تذييل الجدول. وحتى نستطيع فهم ما يجري سنقوم بتجربة. حمّل ملف Word من هنا ثم افتحه بحسب ما شرحنا سابقًا بتحويله من نص إلى جدول. هذا الجدول عبارة عن جرد لمحتويات أحد متاجر الأدوات المنزلية. ستلاحظ عدم التناسق بين حجم النصوص وعرض الأعمدة حيث أن جميع الأعمدة الآن متساوية في قياس العرض، لذلك حاول تعديل عرض كل عمود بحسب البيانات التي يحتويها وستلاحظ الفرق هنا بين تعديل عرض الأعمدة يدويًّا باستخدام الفأرة في برنامج مايكروسوفت وورد وبين إن ديزاين حيث أننا إذا عدّلنا عرض أحد الأعمدة في برنامج Word فإن العرض العام للجدول سيبقى كما هو فيما سيتم تعديل باقي الأعمدة تلقائيًّا للحفاظ على عرض الجدول ككل بينما الأمر مختلف في إن ديزاين حيث سوف تتعرض جميع الأعمدة التالية للعمود الذي نقوم بتعديله إلى الإزاحة مما يؤدي إلى تغيير عرض الجدول العام بحسب التعديل الذي يطرأ على العمود. وبعد القيام بتعديل عرض جميع الأعمدة بشكل ملائم سيصبح الجدول على الشكل التالي: يمكننا القيام بالتعديلات على خلايا مفردة أو على صف بأكمله أو على عمود بأكمله تمامًا بنفس الطريقة المُتّبعة في برنامج مايكروسوفت وورد. هنا سنقوم بتعديل الصف الأول عبر تحديد هذا الصف بكامله كما موضح بالرقم 1 في الصورة التالية، وبمجرد تحديد هذا الصف ستلاحظ تغييرًا كاملًا على شريط الأدوات العلوي حيث يمنحنا خيارات تعديل هائلة ومذهلة ولكننا هنا سنستعين بلوحة الألوان Color لتغيير لون أرضية الصف ولون النص وتستطيع القيام بتحديد أي جزء ترغب بتعديل لونه من الرقم 2 في الصورة، وسنقوم هنا بتلوين أرضية الصف باللون الأسود والنص باللون الأبيض. يمكننا إنشاء نسخة عن صف أو عمود عبر تحديده وسحبه مع الضغط على مفتاح ALT من لوحة المفاتيح وفي هذه الحالة سنقوم بتحديد الصف الأول ثم نسحبه مع الضغط على ALT إلى أسفل الجدول لإنشاء نسخة عن هذا الصف في أسفل الجدول. قد نضطر في بعض الأحيان إلى تجزئة الجدول إلى أجزاء بحسب التصميم، كأن نرغب في وضع صورة في وسط الجدول أو فقرة أو قد يكون الجدول أكبر من حجم صفحة واحدة ما يضطرنا إلى توزيعه على أكثر من صفحة، ولتجربة هذا الأمر سنقوم بتصغير الإطار الذي يحوي الجدول يدويًّا عبر النقر على نقطة الارتكاز السفلية للإطار ثم اسحبها للأعلى حتى يزول نصف الجدول السفلي تقريبًا. كما ترى اختفى نصف الجدول السفلي لكنه لم يحذف حيث أن البيانات ما زالت موجودة وإشارة الزائد الحمراء على الجانب من الأسفل للجدول دلالة على وجود بقية مخفية للجدول، ويمكننا باستخدامها إنشاءَ جزءٍ آخر من الجدول يتضمن بقية بيانات الجدول، انقر على إشارة الزائد الحمراء وسيتغير شكل المؤشر ثم ارسم الإطار الذي تريد وضع بقية الجدول فيه. سنقوم الآن بتحويل الصف الأول إلى صف رأس للجدول عبر تحديد كامل الصف ثم النقر بالزر الأيمن عليه واختيار Conert to Header Rows. وبذلك يصبح هذا الصف هو رأس الجدول وهذا يعني أنه سيظهر في أعلى كل جزء من أجزاء الجدول تمامًا كمبدأ رأس الصفحة في برنامج Word حيث سيظهر رأس الصفحة المُصمّم هناك فوق جميع الصفحات في الملف. سنحوّل الآن الصف الأخير في الجدول والموجود في الجزء الأخير من الجدول إلى صف تذييل للجدول عبر تحديد الصف والنقر بالزر الأيمن فوقه ثم اختيار Convert to Footer Rows. وسينطبق الأمر ذاته على هذا الصف حيث سيظهر في أسفل جميع أجزاء الجدول شأنه شأن تذييل الصفحة في برنامج Word. وبما أننا حدّدنا حجم إطار الجزء الأول من الجدول فسيبقى حجم هذا الإطار ثابتًا وهذا يعني بأن عدد الصفوف التي ستظهر في هذا الإطار سيبقى ذاته وبما أننا وضعنا صف تذييل للجدول وظهر في هذا الجزء من الجدول فإن عددًا من الصفوف لم يعد يتّسع للظهور في هذا الإطار لذلك انتَقَلَتْ إلى الإطار التالي، ولإعادة إظهارها في هذا الإطار علينا زيادة ارتفاع الإطار. ستلاحظ أنه لن تضيع أية بيانات من الجدول وإنما ستنتقل بحسب ظروف معينة كتغيير حجم الإطارات أو حجم النص أو تنسيق ارتفاع الصفوف ... الخ. ملاحظة: ليس من الضروري أن يكون رأس الجدول وتذييله عبارة عن صف واحد بل من الممكن تحديد أكثر من صف وتعيينها كصفوف رأس أو صفوف تذييل. وبهذا نختم الجزء الأول من سلسلة الجداول في برنامج إن ديزاين، أرجو أن أكون قد قدمت لكم المعلومة المفيدة التي ستساعدكم على تصميم مطبوعات احترافية متميزة.

يمكننا تصميم تقويم مكتبي صغير يوضع على المكتب وخصوصًا مع اقتراب عام 2016 حيث سيفكّر معظمنا في شراء واحدة جديدة للعام الجديد، إن بحثنا في الإنترنت سنجد الكثير من ملفات PDF عالية الدقة التي نستطيع تحميلها وبلغات مختلفة. ولعل تصميم تقويم (رزنامة) بواسطة برنامج Inkscape يبدو مُستبعدًا من قبل كثيرين ولن تجد الكثير من ملفات SVG الجاهزة للتحميل والتعديل على الإنترنت بينما سيفضّل الغالبية العظمى من المصممين برامج أخرى لتصميم أعمالهم (التقويم) ومن أهم هذه البرامج Photoshop، البرنامج المجاني الرائع GIMP، Illustrator، Corel Draw، البرنامج المذهل Scribus، Microsoft Word، Libre Office، ...الخ وبذلك سنجد العديد من هذه البرامج التي يمكنها تولي المهمة، بعضها مجاني والآخر غير مجاني ولكن سيبقى خياري الأول هو إنكسكيب للعمل على الرغم من أن تقنياته ومزاياه أقل من معظم البرامج المذكورة ولكنه يبقى قادرًا على تنفيذ المهمة بنجاح وفي هذا الدرس سنتعلم كيفية استخدام إمكانات هذا البرنامج لتصميم التقويم. طبعًا برنامج إنكسكيب ليس البرنامج المثالي لتصميم التقويم فهو على سبيل المثال لا يستطيع التعامل مع التصاميم المتعددة ما يعني أننا مضطرون لتصميم 12 ملف على حدة (12 ملف كل ملف لشهر من الشهور وأضف إليهم صفحة الغلاف) ولكننا سنصمم ملف قالب ليصبح من السهل التعديل عليه وتسهيل العملية، وأيضًا هذا البرنامج لا يقوم بقص آلي أو قياس هوامش الطباعة آليًا (سنضطر للقيام بذلك يدويًا) كما أن النتائج لن تكون بألوان CMYK. جدول التقويمبصورة أو بدون صورة لا يمكن للتقويم أن يكون بدون جدول الأيام، يمكن أن يكون لديك تقويم بدون صور، ولكن لا يمكن أن يكون لديك تقويم بدون الأيام. لذلك سنبدأ بالجزء الأكثر أهمية وهو إنشاء جدول الأيام. سنبدأ برسم مستطيل بواسطة أداة المستطيلات Rectangle ويمكنك طبعًا أن تختار مربعًا مثلًا بحسب التصميم ولتسهيل العمل حاليًا قمتُ بتلوينه. والآن اكتب حرفًا أو رقمًا بواسطة أداة النص Text tool داخل المستطيل ويجب أن يكون الأساس لجدول الأيام لذلك اختر نوعية الخط بعناية وكذلك اللون والحجم بما يتناسب مع المستطيل، أنا اخترت خط Adobe Arabic العريض بحجم 36 مع التوسيط (يمكن أن تختار خطًا آخر إن اخترت التصميم بلغة مختلفة وكذلك من الجميل جعل المحاذاة لليمين على سبيل المثال وهذا يتعلق بتصميمك الخاص). وعندما تختار موضع النص انتبه لمسألة اختلاف عرض النص ما بين 1 و 30 حتى تستمر في العمل بسلاسة وبدون مشاكل لاحقًا. يمكننا الآن أن نجعل المستطيل أبيض (إلا إذا كان لديك رؤية أخرى لتصميم مختلف فعندها يمكنك تلوينه كما تشاء) أو يمكنك جعل شفافًا حيث لن نحتاج لرؤيته بعد الآن ولكننا سنحتاج إلى المساحة التي يشغلُها لتصميم الجدول. حدد المستطيل والنص واجمعهما Group معًا. حدد هذه المجموعة وقم بنسخها عبر القائمة Edit > Clone > Create Tiled Clones إلى كم نسخةً سنحتاج؟ هذا سهل فلدينا 7 أيام في الأسبوع لذا سنحتاج إلى 7 أعمدة ويوجد في الشهر عادة 4 أسابيع مع بعض الأيام الإضافية لذا سنحتاج إلى 5 صفوف مع إضافة صف آخر لأسماء الأيام وبذلك نحتاج إلى 6 صفوف. من لوحة Tiled Clones قم بوضع عدد الأعمدة والصفوف واترك باقي القيم عند الصفر. أصبح لدينا جدول أساسي، نحتاج فقط لتعديل القيم. وبما أن Clones أدّت الغرض منها فلم نعد بحاجة إليها لذلك اذهب إلى القائمة: Edit > Clone > Unlink Clone استخدم أداة النص لتعديل القيم. الصف الأول هو لأسماء الأيام، يمكنك أن تختار مثلًا أن تكون بلغات أجنبية أو الأحرف الأولى لأسماء الأيام بالإنجليزية فإن اخترت ذلك لربما كان عليك أن تصمم المستطيل الأساسي الذي عملنا عليه في أول خطوة على شكل مربع، لكان ذلك أفضل. قد تختلف طريقة ترتيب الأيام من بلد إلى آخر فبعض الدول يكون الإثنين هو أول أيام الأسبوع ودول أخرى تبدأ الأحد وغير ذلك (أنا وضعت السبت أول الأيام كتصميم أولي ويمكنك أن ترتّب على طريقتك). أضف الألوان على الأعمدة التي تمثل عطلًا أسبوعية وذلك يختلف من بلد لآخر (معظم البلدان العربية تتخذ الجمعة والسبت عطلة أسبوعية) وضعها باللون الذي يناسب تصميمك، أنا جعلتها بالأحمر الداكن. كما يمكننا وضع الأيام المفردة بلون مختلف كدلالة على المناسبات الخاصة كاليوم الوطني أو أعياد الفطر والأضحى أو حتى لون مختلف لعيد ميلاد ابنك مثلًا. ضع كل شيء في مجموعة واحدة Group. استخدم أداة النص واكتب اسم الشهر فوق الجدول، باستطاعتك البقاء على ذات الخط أو تمييز الشهر بنوعية مختلفة من الخطوط وكذلك مسألة الألوان تتعلق بتصميمك الخاص. وتختلف أسماء الشهور بحسب اللغة والدولة وحتى في بلداننا العربية تختلف أسماء الشهور فلذلك وضعت اسمين مختلفين للشهر لعلها تشمل كل الدول العربية (باستطاعتك وضع أحدهما فقط بحسب البلد الذي تعيش فيه). حدد اسم الشهر وجدول الأيام معًا ثم اذهب إلى لوحة المحاذاة Align and Distribute وقم بمحاذاته إلى الوسط أفقيًّا مع التأكد من وضع النسبة إلى العنصر الأكبر Biggest object. لستَ مضطرًا للتقيد بهذه المحاذاة حيث يمكنك جعلها لليسار أو اليمين بحسب أسلوبك في التصميم. الآن احفظ هذا الملف حيث سيكون القالب الذي سنعتمده لإنشاء جميع الشهور 12 فيما بعد مع حفظ كل شهر في ملف منفرد. التعديل سهل فكل ما عليك القيام به هو تبديل اسم الشهر مع وضع رقم السنة (ميلادية أو هجرية مع مراعاة الأشهر الميلادية والهجرية) ومن ثم تعديل الأيام لن يكون صعبًا (يمكنك إيجاد الترتيب الصحيح من تقويم الحاسوب الموجود بجانب الساعة عادة). يوجد أيام غير مطلوبة في تقويم كل شهر في الصف الأول والأخير عادة حيث من الممكن أن يبدأ الشهر في منتصف الأسبوع وبذلك تصبح الأيام قبل تلك البداية غير مطلوبة والأمر ذاته ينطبق على نهاية الشهر والأرقام التي تليه لذلك سنقوم بحذفها أو تلوينها بالأبيض (إن لم يؤثر ذلك على تصميمك بحسب الخلفية التي قد تضعها) أو نجعلها شفافة. تصميم الصفحةسنصمم تقويم للطباعة لذلك يجب أن تأخذ مقاسات الصفحة أهمية كبيرة حيث يمكنك أن تراجع المطبعة أو مركز الطباعة وتستشيره عن أحجام الطباعة التي سينفذها لك، في حالتنا هذه اخترنا الحجم 220 × 100 مم. اذهب إلى خصائص المستند من القائمة File > Document Properties عدّل وحدة القياس إلى mm ثم أدخل القيم. يمكنك أن تتخذ وحدة القياس px (بكسل) في حال كان تصميمك رقميًّا فقط أي أنه ليس للطباعة. نعلم أن الطابعة لا يمكنها طباعة الحواف الرقيقة للصفحة لذلك سنحتاج إلى هوامش القطع الخاصة بالطباعة. برنامج إنكسكيب ليس مخصصًّا للطباعة لذلك لا تتوفر هذه الميزة فيه، سنقوم بهذه العملية يدويًّا، اذهب إلى القائمة Edit > Guides Around Page ارسم مستطيلًا بحجم الصفحة التي نصممها مع زيادة 2 مم لكل طرف من أطراف الصفحة وبذلك يصبح حجم المستطيل 224 × 104 (لا تنسَ أن تضع وحدة القياس على mm) ثم حاذِهِ إلى مركز الصفحة (استخدم لوحة المحاذاة لتوسيطه أفقيًّا وعموديًّا إلى الصفحة). ثم عد إلى خصائص المستند Document properties وانقر على Resize page to drawing وبذلك ستتحرك الأدلة 2 مم إلى داخل العمل. يمكنك حذف المستطيل الأخضر الآن (إلا إذا كنت تريد للتصميم خلفية ملونة أو حتى بصورة خلفية). إذًا أصبح لدينا التصميم الأولي الأساسي للتقويم. يمكنك أن تُظهر فَنَّك وإبداعاتك الآن بوضع خلفية ملونة بلون واحد أو بتدرج لوني أو حتى بوضع صورة جميلة ويمكنك أن تضيف صورة بداخل التصميم بغض النظر عن الخلفية التي اخترتها، كل هذا يعود إلى أسلوبك الخاص بالتصميم، أنا اخترت الأسلوب البسيط بدون أية خلفيات مع وضع صورة صغيرة داخل الصفحة إلى جانب جدول التقويم طبعًا. قم بإدراج الصورة وبما أننا نصمم صفحات كاملة ستكون جاهزة للطباعة فعلينا أن نجعل هذه الصورة embed مُتَضَمّنَة داخل الملف وليس link وصلة إليها حيث أن حجم الملف سيزيد بالتأكيد. اختر صورة بدقة عالية ويجب أن تكون أكبر من حجم الصفحة لتقوم بتصغيرها بما يتناسب مع التصميم العام وذلك حتى تظهر الصورة بدقة جيدة في الطباعة ولا تنسَ أن تضغط على Ctrl أثناء تصغير الصورة للمحافظة على النسبة بين الطول والعرض ونتجنب تشويه معالم الصورة أو بإمكانك النقر على زر القفل بين الطول والعرض في شريط الأدوات العلوي. سنضيف مجموعة من الأدلة الآن (الأفقية والعمودية) حيث ستسهل علينا توزيع العناصر بشكل منتظم ومتراصف وكذلك ستسهل عملية محاذاة العناصر. فلا يجب أن يكون جدول التقويم أعلى أو خارج مستوى الصورة مثلًا. وللقيام بذلك قم بالنقر على المسطرة والسحب لتسحب دليلًا وأفلته في المكان المناسب، ينطبق هذا الأمر على المسطرتين الأفقية والعمودية (العملية ذاتها موجودة في الفوتوشوب). ويجب علينا أن نراعي المسافات العلوية والسفلية ويمكننا الاستعانة بلوحة المحاذاة لتطبيق محاذاة أفضل مع الانتباه إلى وضع الأدلة والاستعانة بها لتسهيل تغيير حجم العناصر ووضعها في أماكنها. أدرج الآن ملف الشهر الذي صممته سابقًا مع الأخذ بالحسبان مسألة المحاذاة والأدلة، يمكنك تغيير حجم التقويم ليتناسب مع الموقع المطلوب، قد تضطر إلى استخدام المهارة اليدوية لوضع العناصر في أماكنها بشكل أجمل. رؤيتك الفنية هي ما ستعطي التصميم نمطًا معينًا خاصًا بك. يمكننا أن نصغّر حجم جدول التقويم ونضيف شهرين (الشهر السابق واللاحق) بشكل أصغر تحت الشهر الأساسي كنوع من التغيير والإضافة إلى التصميم. التصميم أصبح جاهزًا، قم بحفظ هذا الملف باسم الشهر الذي عملنا عليه ثم أبقِ على الأدلة واحذف العناصر فقط واستبدلها بالعناصر الجديدة لإنشاء ملف الشهر التالي وهكذا حتى يصبح لديك 12 ملف من أجل 12 شهر. لا يمكنك أخذ الملف بصيغة SVG إلى مركز الطباعة أو المطبعة ببساطة فهم غالبًا لن يقبلوا به ولعل بعضهم سيحاول تحويله أو فتحه بأحد البرامج مثل Illustrator أو Corel Draw ولكن الملف على الأغلب سيفقد شيئًا من عناصره أو تأثيراته لذلك سيتوجب علينا تصدير الملف بصيغة مختلفة. برنامج إنكسكيب يصدّر الملفات بصيغة PNG من قائمة File حيث ستفتح لوحة خاصة بذلك وعليك اختيار تصدير الصفحة كاملة والمهم أن تكون الدقة 300 DPI أو أكثر لتكون الطباعة جيدة. يمكن تحويل هذا الملف PNG إلى صيغ أخرى يتعامل معها العاملون في الطباعة بشكل أفضل مثل TIFF أو JPEG. أو يمكن أن تحفظ الملف بصيغة PDF من قائمة File > Save As وعند اختيار هذه الصيغة تأكد من تفعيل خيّار Convert text to paths حتى لا تختلف أشكال النصوص عند الطباعة. وبهذا ننتهي من تصميم التقويم وهذا مثال عن التقويم الذي قمنا بتصميمه. ترجمة -وبتصرّف- للمقال: Inkscape calendar layout لصاحبه Nicu Buculei.

رؤوس الجداول الثابتة ليست بالأمر الجديد في مواقع الويب. على عكس الورق، حيث يستطيع القارئ نقل نظره بسرعة إلى أعلى الشاشة ليعرف في أي عمود هو، لكن أبعاد الشاشة تجعل من قراءة الجداول الطويلة أمر صعبا. رؤوس الجداول الثابتة، كما يشير اسمها، تبقى ثابتة في أعلى الجدول حتى وإن نزلنا أكثر في الجدول. يساعد الأمر في إبقاء أسماء الأعمدة دوما في متناول اليد، حتى لا يجبر المستخدم على الرجوع إلى أعلى الجدول كل مرة من أجل النظرة ثم الرجوع مجددا. يوجد العديد من سكربتات وإضافات jQuery التي تعمل بطريقة فعالة وخالية من الأخطاء، فهم ليسوا الحل المثالي لجميع المشاكل الممكنة، ففي بعض الحالات، على الجداول أن تتبع قواعد هيكلة لم تحسب لها الإضافات حساب، كالجداول التي تسمح بإظهار مؤشر التحرك (scroll bar) عندما لا تكفي المساحة لإظاهر الجدول. هذا المقال لن يكون الحل المثالي لجميع المواقف، ولكنه سيكون حلا لأغلب المشاكل الشائعة. حل باستخدام CSS فحسب عبر position: sticky؟تملك CSS حلا مناسبا لهذه المشكلة وهو عبر استخدام postion: sticky. لكن للأسف، الحل غير مدعوم في chrome رغم أنه كان مدعوما سابقا، إلا أنّ فريق التطوير قام بإلغاء الخاصية تماما منه إلى أجل غير معلوم. ولأننا لا نستطيع التضحية بكل مستخدمي متصفح chrome فعلينا إيجاد حل بديل للمشكلة. حل عبر استخدام jQueryحل jQuery هو بسيط جدا، لكن قبل أن نبدأ باستخدام، علينا أن نلقي نظرة على كيف يكون جدول ما صحيحا من حيث الهيكلة: <table> <thead> <tr> <th></th> <!-- more columns are possible --> </tr> </thead> <tbody> <tr> <td></td> <!-- more columns are possible --> </tr> <!-- more rows are possible --> </tbody> <tfoot><!-- هذا الجزء اختياري --> <tr> <td></td> </tr> </tfoot> </table>ما الذي نحاول تحقيقه؟سنحاول جعل السكربت يدعم أغلب المشاكل الشائعة والتي هي: الاستخدام الأساسي: رأس الجدول يكون ثابتا.رؤوس الجداول الأفقية والعمودية.الجداول العريضة:العمود الأفقي: إذا كان هنالك العديد من الأعمدة التي لا يمكن إظهارها في عرض الصفحة، فسنستخدم عمودا جانبيا ثابتا.الصف العمودي: وهو الاستخدام الأساسي، أن يكون الرأس العلوي ثابتا عند النزول بالجدول.كلا العمودين: حيث نثبت كل من العمود والصف.CSS من أجل البدءرغم أننا سنستخدم حلاّ عبر جافاسكربت، فإن CSS ضرورية من أجل تنفيذ الأمر: .sticky-wrap { overflow-x: auto; position: relative; margin-bottom: 1.5em; width: 100%; } .sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect { opacity: 0; position: absolute; top: 0; left: 0; transition: all .125s ease-in-out; z-index: 50; width: auto; /* Prevent table from stretching to full size */ } .sticky-wrap .sticky-thead { box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125); z-index: 100; width: 100%; /* Force stretch */ } .sticky-wrap .sticky-intersect { opacity: 1; z-index: 150; } .sticky-wrap .sticky-intersect th { background-color: #666; color: #eee; } .sticky-wrap td, .sticky-wrap th { box-sizing: border-box; }ملاحظة: من المهم جدا نقل كل CSS الخاصة بوسم <table> إلى sticky-wrap. هذا حتى يتاح لنا التحكم بها مباشرة عبر jQuery. لنقل أنك تملك CSS التالي: table { margin: 0 auto 1.5em; width: 75%; }كل ما عليك فعله ببساطة هو نقلها إلى sticky-wrap. : .sticky-wrap { overflow-x: auto; /* Allows wide tables to overflow its containing parent */ position: relative; margin: 0 auto 1.5em; width: 75%; }استخدام جافاسكربتسوف نقوم بتنفيذ دالتنا على كل جدول موجود في الصفحة، الأهم من هذا سنتفقد إن كان الجدول يملك <thead> وإن كان هذا الأخير يحتوي على الأقل على <th> واحد. إن لم تتحق الشروط، فستتجاهل دالتنا هذا الجدول. $(function () { // هنا نقوم باختيار جميع الجداول في الصفحة // لكنك حر بتحديد الجداول التي تريدها $('table').each(function () { if($(this).find('thead').length > 0 && $(this).find('th').length > 0) { // بقية السكربت تكون هنا } }); });الخطوة 1: نسخ عنصر <thead>// تحديد المتغيرات وبعض الاختصارات var $t = $(this), $w = $(window), $thead = $(this).find('thead').clone(), $col = $(this).find('thead, tbody').clone();الخطوة 2: تغليف الجدول ونسخهمن أجل دعم الحالات التي يكون فيها الجدول أعرض من ماهو مسموح (أي عندما يكون عندما عدد كبير من الأعمدة، أو أعمدة طويلة، فنحوي الجدول في <div> حتى نسمح لك بأن يكون scrollable على المحور الأفقي: // احتواء الجدول $t .addClass('sticky-enabled') .css({ margin: 0, width: '100%'; }) .wrap('<div class="sticky-wrap" />'); // تفقد إن كنا قد حددنا بأن يكون الجدول قابلا للتمرير (scroll) على المحور الأفقي if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y'); // صنع رأس جدول جديد بصنف .stiky-head $t.after('<table class="sticky-head" />') // إذا كان <tbody> يحتوي على <th> فنقوم بصنع عمود جديدة ليكون الخانة أعلى الجدول if($t.find('tbody th').length > 0) { $t.after('<table class="sticky-col" /><table class="sticky-intersect" />'); } // اختصارات var $stickyHead = $(this).siblings('.sticky-thead'), $stickyCol = $(this).siblings('.sticky-col'), $stickyInsct = $(this).siblings('.sticky-intersect'), $stickyWrap = $(this).parent('.sticky-wrap');الخطوة 3: وضع محتوى الجداول المنسوخةما سنقوم به الآن هو أخذ المحتوى المنسوخ من الجدول الأصلي ووضعه في الجداول الجديدة التي ستكون ملتصقة: رأس الجدول الجديد سيستلم كامل المحتوى من عنصر <thead> المنسوخ.الأعمدة الملتصقة ستستلم المحتوى من أول عنصر <th> من <thead> وكل عناصر <th> المتبقية من <tbody>.اندماج العمود مع الصف (أيّ الخانة المشتركة بين العمود والصف) ستأخذ محتوى من خلال أعلى خانة على يمين الجدول (بافتراض أننا نتعامل مع الصفحة على أساس RTL).// StickyHead يحصل على المحتوى من <thead> $stickyHead.append($thead); $stickyCol .append($col) .find('thead th:gt(0)').remove() .end() .find('tbody td').remove(); // StickyIntersect يحصل على المحتوى من <th> في <thead> $stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');الخطوة 4: الدوالهنا يأتي أهم جزء من السكربت الخاص بنا، سنحدد أيّ دوال يجب أن تنفذ من أجل أن يعمل السكربت بشكل صحيح: دالة من أجل تحديد عرض عناصر <th> في رأس الجدول المنسوخ، بما أننا نسخنا عنصر <thead> فحسب، فعرض رأس الصفحة المنسوخ الكلي لن يكون عرض رأس الصفحة الفعلي، لأن عرض <tbody> لم يتم إضافته حيث لا نعلم هل سيؤثر على رأس الصفحة أو لا.دالة من أجل تحديد مكان رأس الصفحة الثابت حتى نقوم بتحديث بُعد رأس الصفحة المنسوخ الأفقي، الذي قمنا بتحديد position: absolute عندما نبدأ بتمرير شريط التقدم داخل الجدول.دالة من أجل تحديد مكان العمود الجانبي الثابت ولها نفس حالة تثبيت رأس الصفحة.دالة من أجل حساب المساحة المتبقية وسنقوم بشرح هذه الدالة لاحقا بشكل أعمق. // Function 1: setWidths() // Purpose: To set width of individually cloned element var setWidths = function () { $t .find('thead th').each(function (i) { $stickyHead.find('th').eq(i).width($(this).width()); }) .end() .find('tr').each(function (i) { $stickyCol.find('tr').eq(i).height($(this).height()); }); // Set width of sticky table head $stickyHead.width($t.width()); // Set width of sticky table col $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width()) }, // Function 2: repositionStickyHead() // Purpose: To position the cloned sticky header (always present) appropriately repositionStickyHead = function () { // Return value of calculated allowance var allowance = calcAllowance(); // Check if wrapper parent is overflowing along the y-axis if($t.height() > $stickyWrap.height()) { // If it is overflowing // Position sticky header based on wrapper's scrollTop() if($stickyWrap.scrollTop() > 0) { // When top of wrapping parent is out of view $stickyHead.add($stickyInsct).css({ opacity: 1, top: $stickyWrap.scrollTop() }); } else { // When top of wrapping parent is in view $stickyHead.add($stickyInsct).css({ opacity: 0, top: 0 }); } } else { // If it is not overflowing (basic layout) // Position sticky header based on viewport scrollTop() if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) { // When top of viewport is within the table, and we set an allowance later // Action: Show sticky header and intersect, and set top to the right value $stickyHead.add($sticktInsct).css({ opacity: 1, top: $w.scrollTop() - $t.offset().top }); } else { // When top of viewport is above or below table // Action: Hide sticky header and intersect $sticky.add($stickInsct).css({ opacity: 0, top: 0 }); } } }, // Function 3: repositionStickyCol() // Purpose: To position the cloned sticky column (if present) appropriately repositionStickyCol = function () { if($stickyWrap.scrollLeft() > 0) { // When left of wrapping parent is out of view // Show sticky column and intersect $stickyCol.add($stickyInsct).css({ opacity: 1, left: $stickyWrap.scrollLeft() }); } else { // When left of wrapping parent is in view // Hide sticky column but not the intersect // Reset left position $stickyCol .css({ opacity: 0 }) .add($stickyInsct).css({ left: 0 }); } }, // Function 4: calcAllowance() // Purpose: Return value of calculated allowance calcAllowance = function () { var a = 0; // Get sum of height of last three rows $t.find('tbody tr:lt(3)').each(function () { a += $(this).height(); }); // Set fail safe limit (last three row might be too tall) // Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value if(a > $w.height()*0.25) { a = $w.height()*0.25; } // Add height of sticky header itself a += $sticky.height(); return a; }; }والآن سنقوم بشرح ما قمنا به في الدالة الرابعة، نحن لا نريد من رأس الجدول أن يلحقنا إلى أسفل الجدول، فالأمر غير ضروري وقد يغطي لنا آخر سطر من الجدول، لذا من الضروري إبقاء مساحة فارغة في الأسفل. حسب ما جربت، فقد اكتشفت أننا لا نحتاج لرأس الجدول عندما نصل لأخر 3 سطور من الجدول لأن تركيزنا انتقل على المحتوى الآن. $t.find('tbody tr:lt(4)').each(function () { allowance += $(this).height(); });الخطوة 5: ربط كل شيءوالآن قد انتهينا من تعريف كل الدوال اللازمة، كل ما تبقى هو ربط المتفقدات أو (Event handlers) مع عنصر(window)$. عندما يجهز الـDOM نقوم بالحسابات الأولية للعرض.عندما تحمل كامل المعلومات نقوم بحساب الأبعاد مرة أخرى، هذه الخطوة مهمة لأن جدولك قد يحتوي على أشياء تحمل بعد الـ DOM مثل الصور وخطوط الويب.عندما يتم التمرير في الحاوي الرئيسي ولكن هذا سيحدث في حالة كان المحتوى أكبر من عرض الحاوي، حينها نريد إعادة تغيير مكان العمود الرئيسي.عندما يتم تصغير نافذة المتصفح نريد إعادة حساب العرض.عندم يتم النزول في المتصفح نريد أن نغير مكان رأس الجدول.يمكن تلخيص ما قلناه للتو في الكود التالي. يجدر الذكر أن أحداث التصغير والتمرير يتم التحكم بهما باستخدام إضافة throttle+debounce. // #1: DOMعندما يجهز الـ setWidths(); // #2: نراقب الحاوي في حال حدوث تمرير فيه $t.parent('.sticky-wrap').scroll($.throttle(250, function() { repositionStickyHead(); repositionStickyCol(); })); // الآن نربط ما قمنا بعنصر $(window) $w // #3: عندما يتم تحميل كامل المحتويات .load(setWidths) // #4: عندما يتم تصغير النافذة // قمنا باستخدام throttle هنا حتى لا يتم إطلاق الحدث أكثر من مرة (في الوضع الافتراضي يتم إطلاق الحدث من أجل كل جزء يتم تصغيره، هنا ننتظر حتى ينتهي التصغير كاملا ثم نطلق) .resize($.throttle(250, function () { setWidths(); repositionStickyHead(); repositionStickyCol(); }) // #5: عندما يتم النزول في النافذة // استخدمنا throttle حتى لا يتم إطلاق الدالة كثيرا .scroll($.throttle(250, repositionStickyHead);وانتيهنا، كان هذا كل شيء! النقاشنحن نعرف أن لاشيء كامل، لذا سنناقش الطرق الأخرى التي تملك محاسن على هذه الطريقة ومساوئها ولم استخدمنا هذه الطريقة. استخدام position: fixedاستخدام هذه الطريقة قد يبدو مغريا لسبيين: لا يوجد حاجة لحسابات من أجل رأس الجدول، لأن العنصر المثبت (fixed) يقع خارج الصفحة الفعلية وسيبقى ثابتا في مكانه.نتجنب البطء في الحسابات هذا لأن العناصر الثابتة تلاحق الجدول ولا تثبت معه، لأننا نقوم بالحساب في فترات ثابتة (عبر throttle) وبالتالي سيظهر أن العنصر الثابت غير متجاوب وبالتالي غير طبيعي.لكن المشكلة في هذه الطريقة هي أننا نزيل العنصر من رونق الصفحة، ففي حالة تجاوز عرض الجدول العرض المسموح وأصبح من الضروري إضافة scroll فإن رأس لن يلحق المحتوى على المحور الأفقي لأنه ثابت في الصفحة. وهذا سبب كبير لا يسمح لنا باستخدام أغلب إضافات jQuery التي تقدم هذه الخواص. وكتبت هذه الدورة من أجل إصلاح هذا الأمر بالتحديد. استخدام position: stickyالخاصية الجديدة مناسبة للأمر، في الواقع لقد بنيت من أجل هذا الأمر في الحسبان، المشكلة فيها أنها غير مدعومة من متصفح chrome (سبق وكانت مدعومة ولكن أزيل الدعم كليا) وبذلك تفقد كل الزوار من هذا المتصفح. مثال حي:See the Pen avovoo by Hsoub Academy (@HsoubAcademy) on CodePen. ترجمة -وبتصرف- للمقال: Sticky Table Headers & Columns لصاحبه Terry Mun.