Lynda.com Design web-HTML-baggrundsvideo

• Kan 5, 2024

Baggrundsvideo er en fantastisk måde at markedsføre dit produkt på, og i dette Lynda.com-videouddannelseskursus med titlen Design nettet: HTML baggrundsvideo med Chris Converse lærer du, hvordan du tilføjer en automatisk afspilning af baggrundsvideo til din webside. Du lærer også, hvordan du bruger CSS til at placere andre designelementer over baggrundsvideoen. Og øvelsesfilerne er gratis til endda Standard-medlemskab.

Converse starter med html-filen med bare knogler og bygger den vigtigste div-container til designelementerne: tekstmærket, logoet svg og videoen. Han demonstrerer, hvordan man bruger autoplay i videotaggen, og hvordan man indstiller de to mest almindelige typer videoklip, .mp4 og .ogg.

Dernæst flytter Converse til CSS-filer og CSS for at style og placere videoen og det centrerede logobillede. Han fortsætter med at gøre det samme for tagline-teksten. Jeg kunne især godt lide hans teknik til at arbejde med grænser.

Converse diskuterer derefter, hvordan man gør dette layout responsivt ved hjælp af medieforespørgsler til mellemstore og små skærme og CSS. Igen sætter han stilarter til video, logo og tagline. Han demonstrerer også, hvordan man indstiller et erstatningsbillede til små skærme, der ikke kan afspille en video og skjule videoen.

For at komme videre til mere komplekse problemer viser Converse, hvordan man bruger JavaScript til at tilføje mere kompleks kontrol over skærmen til funktioner på mobile enheder, såsom touch-begivenheder. Han introducerer et tredjepartswebsted kaldet Modernizr, som vil generere CSS-klasser, der kan føjes til siden via JavaScript baseret på funktionerne på den aktuelle enhed. Han demonstrerer, hvordan man genererer koden, downloader og tilføjer den til din webside-kode.

I den sidste lektion demonstrerer Converse, hvordan man koder positionen og andre stilarter for layoutet, så videoen dækker hele browservinduet.

Dette kursus handlede om HTML og CSS brugt til at style og placere en baggrundsvideo til web- og mobilenheder. Dog håbede jeg, at forfatteren ville diskutere mulighederne for hosting og optimering af videofilen til hurtig download. Det ville også være rart at vide, hvordan man tilføjer interaktive designelementer over baggrundsvideoen i stedet for kun statiske elementer.

Chris Converse har en grad i grafisk design fra Rochester Institute of Technology og 22 års erfaring inden for design og teknologi.

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

Offentliggørelse: Jeg blev ikke økonomisk kompenseret for denne artikel. Synspunkterne er helt mine egne baseret på min oplevelse.

Video Instruktioner: Design tutorial: The power of empty space | lynda.com (Kan 2024).