CSS: النماذج ومعارض الصور

Name: CSS: النماذج ومعارض الصور
Author: Cliff Brozo

كيفية تحسين اهتمام المستخدم وسهولة الاستخدام

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

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

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

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

وصف الدورة

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

ما ستتعلمه

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

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

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

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

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

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

ما الموضوعات التي يتناولها هذا الكورس؟

يتناول الكورس النماذج عبر درسين (النماذج الجزء الأول والنماذج الجزء الثاني) ومعارض الصور عبر درسين (معارض الصور الجزء الأول ومعارض الصور الجزء الثاني).

ما المهارات التي يساعدني هذا الكورس على بنائها؟

يُنمّي هذا الكورس مهارات في أكواد CSS وأطر عمل CSS وتصميم تنسيق الويب وتخطيط النماذج وCSS الموجه للكائنات وتصميم واجهة مستخدم الويب.

هل ستعمل معارض الصور على أجهزة مختلفة؟

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