Lynda.com Suunnittele Web-HTML-taustavideo

• Saattaa 5, 2024

Taustavideo on hieno tapa markkinoida tuotteitasi ja tällä Lynda.com-videokoulutuksella, jonka otsikko on Suunnittele verkko: HTML-taustavideo Chris Converse -sovelluksen avulla opit lisäämään automaattisen toiston taustavideon verkkosivullesi. Opit myös, kuinka CSS: n avulla sijoitetaan muut sisustuselementit taustavideoon. Ja harjoitustiedostot ovat ilmaisia ​​edes tavalliselle jäsenyydelle.

Converse alkaa paljaiden luiden html-tiedostolla ja rakentaa tärkeimmän div-säilön suunnitteluselementeille: tekstitunnisteelle, logolle svg ja videolle. Hän osoittaa, kuinka automaattista toistoa käytetään videotunnisteessa ja kuinka asettaa kaksi yleisintä videotyyppiä, .mp4 ja .ogg.

Seuraavaksi Converse siirtyy CSS-tiedostoihin ja CSS: ään videon ja keskitetyn logokuvan tyyliä varten ja sijoittamiseksi. Hän jatkaa tekemään samoin tarratekstiin. Pidin erityisesti hänen tekniikastaan ​​rajojen kanssa työskentelemiseen.

Sitten Converse keskustelee siitä, kuinka saada tämä asettelu reagoivaksi käyttämällä mediakyselyjä keskikokoisille ja pienille näytöille ja CSS: lle. Jälleen hän asettaa tyylit videolle, logolle ja tagi-riville. Hän osoittaa myös, kuinka asettaa korvaavan kuvan pienille näytöille, jotka eivät voi toistaa videota, ja piilottaa videon.

Siirtyessään monimutkaisempiin aiheisiin, Converse osoittaa, kuinka JavaScriptin avulla voidaan lisätä näyttölaitteen monimutkaisempaa hallintaa mobiililaitteiden ominaisuuksiin, kuten kosketustapahtumiin. Hän esittelee kolmannen osapuolen verkkosivuston nimeltä Modernizr, joka tuottaa CSS-luokkia, jotka voidaan lisätä sivulle JavaScriptin kautta nykyisen laitteen ominaisuuksien perusteella. Hän osoittaa kuinka luoda koodi, ladata ja lisätä se verkkosivustosi koodiin.

Viimeisessä oppitunnissa Converse osoittaa, kuinka koodataan asettelun sijainti ja muut tyylit siten, että video peittää koko selainikkunan.

Kurssi koski HTML- ja CSS-tiedostoja, joita käytettiin taustavideon muotoiluun ja sijoittamiseen verkko- ja mobiililaitteille. Toivoin kuitenkin, että kirjoittaja keskustelee videotiedoston isännöinnin ja optimoinnin vaihtoehdoista nopeaa lataamista varten. Olisi myös hienoa tietää, kuinka lisätä interaktiivisia suunnitteluelementtejä taustavideoon pelkän staattisen elementin sijasta.

Chris Converse on suorittanut graafisen suunnittelun tutkinnon Rochester Institute of Technologyltä ja 22 vuoden kokemus suunnittelusta ja tekniikasta.

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

Ilmoittaminen: Minulle ei ole maksettu rahallista korvausta tästä artikkelista. Lausunnot ovat täysin omat kokemukseni perusteella.

Video-Ohjeita: How to make a simple calculator using Visual basic .NET (Saattaa 2024).