CSS: تصميم الشبكة (Grid)

Name: CSS: تصميم الشبكة (Grid)
Author: Cliff Brozo

كيفية فهم واستخدام تصميم الشبكة

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ4.

دورة تدريبية: عند الطلب

تصميم الشبكة الجزء الأول أهلاً بكم من جديد في دورة نوليدج سيتي على أوراق الأنماط الانسيابية أنا كليف بروزو، أنا أستاذك واليوم سنتحدث عن التصميم باستخدام الشبكة Grid سنكتشف كيفية استخدام الحاويات containers سنكتشف التخطيط layout وسنكتشف أي من العناصر توضع في أي منطقة من الشبكة التي نقوم بإنشائها سنقوم أيضًا بإلقاء نظرة على بعض التنسيقات لإنشاء صفحات تحتوي على أعمدة متعددة سنتعامل مع بعض القوائم الطعام الفاخرة وسننشئ مقالات Aside ونصممهم دعونا نلقي نظرة على الشكل الذي سيبدو عليه سننشئ صفحة بها ثلاثة أعمدة غير متساوية ستكون بعض الأعمدة أصغر والأخر أكبر لكننا سنجعلها مختلفة سنستخدم حاوية وداخلها سنضع بعض النصوص وبعض الصور سنقوم بتغيير حجم الحاويات وإنشاء مقالات وجوانب وسنعمل تخطيط من ثلاثة أعمدة ونستخدم حاوية شبكية ونضع الكثير من الصور في الشبكة هل أنتم جاهزين؟ أنا جاهز لنبدأ مرة أخرى نحن نستخدم atom كبرنامج التصميم الخاص بنا وهنا، سنلقي نظرة على صفحتنا الأولى التعامل مع حاوية container هذا الخط الأزرق الذي ترونه هو الحاوية الفعلية وأي شيء أضعه بالداخل هنا يمكن تنسيقه بشكل مختلف عن خارج الحاوية الآن يمكنكم اختيار وضع هذا الخط الأزرق أو أي لون أو ليس لديكم خط على الإطلاق لذلك لا أحد يعرف أنكم تتعاملون داخل الحاوية كل ما تحتاجوه حقًا هو إعداد منطقة محتوى في CSS ثم استدعوها في HTML الخاص بكم في هذه الصورة، على الجانب الأيمن من شاشتكم لدي منطقة تسمى "المحتوى" وعرض المحتوى 80٪ وتم تعيين الهوامش اليمنى واليسرى تلقائيًا لذا، الحاوية هي 80٪ من الصفحة مع 10٪ على اليسار و10٪ على اليمين أستخدم تلك الحاوية من خلال استدعائها في قسم ينص على أن الفئة هي المحتوى أنا قادر على تغيير حجم هذا ومازلت أحتفظ بنافذة المحتوى بنسبة 80٪ وإذا أصبحت كبيرة أو صغيرة يتم تغيير حجم النص تلقائيًا بشكل صحيح دعونا نلقي نظرة على CSS الذي يتيح لنا القيام بذلك container.css في علامة النص الأساسي لها خلفية lemon chiffon وبعض الهوامش وحجم الخط وقد اخترت خطًا يسمى MV Boli تحدد فئة المحتوى الخاصة بي العرض بنسبة 80٪ وما ترونه هنا هو نفس الشيء الذي ترونه في الصورة المتضمنة في صفحة الويب الحدود هي خط Dodger blue هذا وما أفعله هو إخراج هذا حتى تتمكنوا من رؤية شكل الحاوية بالضبط مع الحدود الموجودة حيث هي الآن وبدون تلك الحدود لذا سأحذف هذا السطر وسأحفظ CSS وقد حصلت على الصفحة مرة أخرى بدون الحدود الآن، لا توجد إجابة صحيحة أو إجابة خاطئة حول ما إذا كان يجب عليكم إظهار الحدود أم لا بعض الناس يحبونها بعض الناس لا، دعونا نعيدها ولدينا خط أزرق حول الحاوية لقد استخدمت حدود نصف قطرها 25 بكسل لتعطيني زاوية منحنية ولقد وضعت حشو فقط لنقل النص بعيدًا من حافة الزاوية لقد قمنا بتطوير موقع على شبكة الإنترنت والتعامل مع الحاويات سيوضح لكم كيفية إنشاء ثلاثة أعمدة سنلقي نظرة على بلدة New Hampshire في نيو هامبشاير وبلدة أخرى في نيو هامبشاير وطريق السيارات في نيو هامبشاير وبعد ذلك سنناقش بعض تعليقات CSS سننتقل إلى تخطيط الثلاثة أعمدة وقبل أن نضغط على هذا الزر أود أن أشير إلى أن الأزرار منسقة بترميز CSS دعونا نلقي نظرة على هذا الترميز في أسفل صفحتنا قسم التنقل لـ CSS لقد قمت بإنشاء لون للخلفية لشريط التنقل الخاص بي باللون Dodger blue هذا هو اللون الأزرق الذي ترونه هنا لقد قمت بإخفاء أي فائض لتجنب التداخل مع الصور وقمت بتدوير الزوايا مرة أخرى روابطي تطفو على اليسار هم في لون lemon chiffon الذي يطابق الخلفية وهذه خدعة رائعة مهما كان لون المربع للتنقل استخدموا اللون المتباين هذه هي صفحة الخلفية أقوم بمحاذاة النص في المنتصف تزيين النص بلا شيء تزيل التسطير وتذكروا، هذا ارتباط نص تشعبي لذلك يزيل التسطير وأضع الحشو على اليسار واليمين لكل كلمة ها هو الجزء الرائع عندما أحوم فوق الرابط أنا أقلب اللون ولون الخلفية التغيير من Dodger blue إلى lemon chiffon حيث كان لدي Dodger blue كخلفية الآن Dodger blue هو اللون كان لون lemon chiffon الآن lemon chiffon هو الخلفية ولجعل الزر يبدو أنه يحتوي على زوايا مستديرة أيضًا سأضع حد نصف قطري وعندما أحوم فوق كل رابط يتغير النص إلى لون الخلفية وذلك يعطي إيحاء بوجود زر

متوسط مقدِّم الخدمة : Cliff Brozo 4 الدروس · 23m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

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

ما ستتعلمه

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

النقاط الرئيسية

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

الأسئلة الشائعة

ما الذي سأتعلمه في هذه الدورة؟

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

كيف هو هيكل الدورة؟

تُنظَّم الدورة في أربعة دروس: تصميم الشبكة الجزء الأول والجزء الثاني والجزء الثالث والجزء الرابع.

ما المهارات التي تتناولها هذه الدورة؟

تتناول الدورة أكواد CSS وأطر CSS وشبكة CSS ونظام الشبكة وتخطيط الشبكة وCSS الموجه بالكائنات.

لماذا يُعدّ تعلم تخطيط الشبكة مهماً؟

تخطيط الشبكة جزء مهم من CSS وأداة أساسية لإحياء مواقعك الإلكترونية.