أساسيات تخطيط المحتوى - الدورة 3900 روبل روسي. من هيكسلت مدة التدريب 18 ساعة التاريخ: 1 ديسمبر 2023.

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

نظرية

2. نموذج الصندوق و CSS
ما هي خصائص CSS التي تؤثر على حجم العناصر عند عرضها على الصفحة؟ دعونا نتذكر مفهوم نموذج الصندوق وندرس كيفية عمل خصائص الهامش والحشو والحدود لتعيين الحشو الخارجي/الداخلي والحدود المرئية للعنصر. دعونا نتعرف على خاصية تغيير حجم الصندوق، والتي تغير السلوك القياسي لنموذج الصندوق

نظرية

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

نظرية
الاختبارات
يمارس

4. الخطوط والعمل بها
هل سمعت عبارة "التلاعب بالخطوط"؟ حان الوقت للقيام بذلك. نتعلم ربط الخطوط باستخدام CSS، والتحكم في حجم النص، والتصميم، وضبط تباعد الأسطر. وفي نهاية الدرس سندرس خاصية الخط المعمم والتي يمكنك من خلالها ضبط 6 أنماط نصية مختلفة في وقت واحد

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات
يمارس

13. العناصر الزائفة
العناصر المفقودة في الصفحة؟ تأتي العناصر الزائفة للإنقاذ - العناصر التي تم إنشاؤها باستخدام CSS. في هذا الدرس سوف نلقي نظرة على كيفية إنشاء العناصر الزائفة، وسبب الحاجة إليها، وما هي الميزات التي تتمتع بها. دعونا نرى كيف يتم تصميم علامات القائمة في CSS

نظرية
الاختبارات

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

نظرية
الاختبارات
يمارس

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

نظرية
الاختبارات

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

نظرية
الاختبارات

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

نظرية
يمارس

18. عمل مستقل
المهام الإضافية التي تسمح لك بتوحيد النظرية المكتسبة

19. مواد إضافية
المقالات ومقاطع الفيديو برعاية فريق Hexlet. سوف تساعدك على التعمق في موضوع الدورة