Lynda.com Rancang Video Latar Belakang Web HTML

• April 25, 2024

Video latar belakang adalah cara yang bagus untuk memasarkan produk Anda dan dalam kursus pelatihan video Lynda.com ini berjudul Desain Web: Video Latar Belakang HTML dengan Chris Converse Anda akan belajar cara menambahkan video latar belakang putar otomatis ke halaman web Anda. Anda juga akan belajar cara menggunakan CSS untuk menempatkan elemen desain lain di atas video latar belakang. Dan file latihan gratis bahkan untuk keanggotaan Standar.

Converse dimulai dengan file html tulang kosong dan membangun wadah div utama untuk elemen desain: tagline teks, logo svg dan video. Dia menunjukkan cara menggunakan putar otomatis dalam tag video dan cara mengatur dua jenis video yang paling umum, .mp4 dan .ogg.

Selanjutnya, Converse bergerak ke file CSS dan CSS untuk menata dan memposisikan video dan gambar logo terpusat. Dia bergerak untuk melakukan hal yang sama untuk teks tagline. Saya terutama menyukai tekniknya untuk bekerja dengan perbatasan.

Converse kemudian membahas bagaimana membuat tata letak ini responsif menggunakan kueri media untuk layar menengah dan kecil dan CSS. Sekali lagi, ia menetapkan gaya untuk video, logo, dan tagline. Dia juga menunjukkan cara mengatur gambar pengganti untuk layar kecil yang tidak dapat memutar video dan menyembunyikan video.

Beralih ke masalah yang lebih kompleks, Converse menunjukkan cara menggunakan JavaScript untuk menambahkan kontrol yang lebih kompleks atas tampilan untuk fitur perangkat seluler, seperti acara sentuh. Dia memperkenalkan situs web pihak ketiga yang disebut Modernizr yang akan menghasilkan kelas CSS yang dapat ditambahkan ke halaman melalui JavaScript berdasarkan fitur-fitur perangkat saat ini. Dia menunjukkan cara membuat kode, mengunduh dan menambahkannya ke kode halaman web Anda.

Dalam pelajaran terakhir, Converse menunjukkan cara kode posisi dan gaya lain untuk tata letak sehingga video menutupi seluruh jendela browser.

Kursus ini membahas tentang HTML dan CSS yang digunakan untuk mendesain dan memposisikan video latar belakang untuk web dan perangkat seluler. Namun, saya berharap bahwa penulis akan membahas opsi untuk hosting dan mengoptimalkan file video untuk mengunduh cepat. Selain itu, alangkah baiknya mengetahui cara menambahkan elemen desain interaktif di atas video latar belakang alih-alih hanya elemen statis.

Chris Converse memiliki gelar dalam desain grafis dari Rochester Institute of Technology dan 22 tahun pengalaman dalam desain dan teknologi.

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

Pengungkapan: Saya tidak dikompensasi secara finansial untuk artikel ini. Pendapat itu sepenuhnya saya miliki berdasarkan pengalaman saya.

Petunjuk Video: Ruby on Rails by Leila Hofer (April 2024).