آخر تحديث: 18.04.2022

كيفية العمل مع الأعمدة

يستخدم في Navimake نظام 12 عمودًا. سنحاول هنا أن نفهم ماهيته وكيفية التعامل معه.


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


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


هكذا تبدو صفحة Navimake الرئيسية عند تصوّرها بالشبكة (تم تلوين الأعمدة من أجل إدراك أفضل):



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




1

الأعمدة


في الكتلة CL118 توجد صورة في جزء واحد وعناصر نصية في جزء آخر. وفي نفس الوقت تكون الصورة وعناصر النص أيضًا في كتلة منفصلة ويبلغ عرضُها 6 أعمدة.




ماذا يمكننا أن نعمل مع ذلك الآن؟ الأمر بسيط يمكننا تغيير عدد الأعمدة لكل عنصر من هذه العناصر عن طريق تحديدِ القيمة التي نحتاجها من القائمة المنسدلة. من خلال هذا الإجراء نقوم بتعديلِ عرض عنصرٍ أو مجموعةٍ من العناصر.


على سبيل المثال ، دعنا نعيّن للصورة عرضًا بـ 4 أعمدة ، ونعيّن لعناصرِ النص بـ 8 أعمدة.




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


وها هو مثال آخر لنفس الكتلة (CL101) مع وجود فاصل بينهما مع تغيير الأعمدة:

  • في الأول 4 و 8 أعمدة
  • في الثاني 8 و 4 أعمدة





2

المسافة البادئة


باختصار ، المسافة البادئة تحرّك عنصرَ الكتلة (من الجانب الأيمن افتراضيًا) بعدد الأعمدة التي نحددها في الإعدادات.


في الكتلة AB125 يمكننا أن نرى أن عرض الكتلة (مجموعة من العناصر على خلفية بيضاء) هو 8 أعمدة ، والمسافة البادئة هي عمودان. وبالتالي ، يتم وضع هذه الكتلة في الوسط بالنسبة إلى كل المحتوى.




إذا حذفنا هذه المسافة البادئة فستعود الكتلة إلى الموضع الأول ، أي على الجانب الأيمن من الشبكة.




من المهم أيضًا أن تتذكر من أي جانب تظهر المسافة البادئة:

  • افتراضيًا ، في إعدادات الموقع لغة الاستخدام تكون اللغة العربية ، وفي هذه الحالة يتم ترتيب الأعمدة من اليمين إلى اليسار (RTL, right to left) ، وبناءً عليه ستظهر المسافة البادئة أيضًا من الجانب الأيمن؛
  • إذا قمت بتغيير لغة الموقع إلى اللغة الإنجليزية فالاتجاه سيتغيّر ويتحول من اليسار إلى اليمين (LTR, left to right).


وتذكّر دائمًا أن المساحة البادئة تظهر قبل العنصر الذي نعينها إياه ، وليس بعده.




3

العناصر المتكررة


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


دعنا نلقي نظرة على كتلة TM101.




تم تحديد عرض الكتلة بـ 3 أعمدة ، فلذلك نرى 4 عناصر متكررة على التوالي. ولكن ماذا يجب علينا لو احتجنا إلى وضع 3 عناصر متتالية؟ للقيام بذلك يجب علينا تحديد العرض بـ 4 أعمدة فقط.




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




4

الإضافات


نظرًا لأن النظام الشبكي يتكون من 12 عمودًا فمن الممكن ترتيب العناصر في صف بإجمالي عرض 12 عمودًا ، بما في ذلك المسافات البادئة. على سبيل المثال ، العنصر الذي حددنا له عرضًا 4 أعمدة ومسافة بادئة بـ 2 سيكون بعرض إجمالي 6 أعمدة.


العنصر الذي لا يمكن احتواؤه في صف سينتقل إلى الصف التالي ، أي سيتم وضع العناصر واحدًا تحت الآخر.


وفي نفس الوقت يمكن تعيين عنصر واحد في إجمالي 12 عمودًا فقط. على سبيل المثال ، دعنا نحاول ضبط عرض العنصر بـ 10 أعمدة والمسافة البادئة بـ 4 ، ليصبح بعرض إجمالي 14 عمودًا. سيحسب النظام الشبكي تلقائيًا الفرق وسيطرح القيمة الإضافية من عرض العنصر. ستكون نتيجة أن الكتلة ستكون على عرض 8 أعمدة ، وستبقى المسافة البادئة مساوية لـ 4. وبالتالي ، فإن قيمة المسافة البادئة لها الأسبقية على عرض العنصر.


♦ ♦ ♦


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


على سبيل المثال ، انظر إلى الكتل ST103 و ST109 ، بخلاف الأمثلة التي رأيناها أعلاه هنا يعتمد عرض المحتوى تمامًا على نافذة المتصفح.




وإذا كنت بحاجة إلى شبكة قياسية عادية ، فإن هذه الكتل لها نظائر: ST102 و ST106.


♦ ♦ ♦


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


أما بالنسبة للشاشات الصغيرة مثل الأجهزة اللوحية والجوالات ، فلا يوجد لها مثل هذه الإعدادات.


جميع الكتل قد تم تحديدُ أفضل عرضٍ ممكنٍ للأعمدة فيها بدايةً. فلذلك لا داعي للقلق من أن هناك شيء ما لن يبدو جيدًا على الأجهزة المحمولة.


♦ ♦ ♦


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



في هذا المثال ، نرى إعدادات لـ 3 أعمدة ، بينما هنا لا يظهر أحدُ العناصر (الزر) ، لأن محتواه فارغ.


أن تتعرف على كل شيء هنا سهل جدًا. ترتيب العناصر التي نراها في الكتلة يوافق الترتيب في الإعدادات.



  1. مجموعة من عناصر النص
  2. عناصر النص المتكررة والفاصل
  3. الرابط على شكل الزر



مع كثرة التجارب ستحصل على فهم أفضل لكيفية التعامل مع كل هذا.