Lynda.com تصميم الويب خلفية فيديو HTML

• قد 1, 2024

يُعد فيديو الخلفية طريقة رائعة لتسويق منتجك وفي هذه الدورة التدريبية بعنوان فيديو Lynda.com تصميم الويب: فيديو خلفية HTML باستخدام Chris Converse ، ستتعلم كيفية إضافة فيديو خلفية التشغيل التلقائي إلى صفحة الويب الخاصة بك. سوف تتعلم أيضًا كيفية استخدام CSS لوضع عناصر تصميم أخرى على فيديو الخلفية. وملفات التمرين مجانية حتى بالنسبة للعضوية القياسية.

يبدأ Converse بملف html bare bones ويقوم بإنشاء حاوية div الرئيسية لعناصر التصميم: سطر النص النصي وشعار svg والفيديو. يوضح كيفية استخدام التشغيل التلقائي في علامة الفيديو وكيفية إعداد أكثر أنواع الفيديو شيوعًا ، mp4 و .ogg.

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

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

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

في الدرس الأخير ، يوضح Converse كيفية ترميز الموضع والأنماط الأخرى للتخطيط بحيث يغطي الفيديو نافذة المستعرض بأكملها.

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

حصل كريس كونفيرس على شهادة في التصميم الجرافيكي من معهد روتشستر للتكنولوجيا وخبرة 22 عامًا في التصميم والتكنولوجيا.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

الإفصاح: لم أحصل على تعويض مالي لهذه المقالة. الآراء هي تماما بلدي بناء على تجربتي.

تعليمات الفيديو: كيفية الكتابة داخل الصورة text over image باستخدام css (قد 2024).