Lynda.com Izstrādājiet tīmekļa HTML fona video

• Maijs 17, 2024

Fona video ir lielisks veids, kā tirgot savu produktu, un šajā Lynda.com video apmācības kursā ar nosaukumu Noformējiet Web: HTML fona video ar Chris Converse jūs uzzināsit, kā savai vietnei pievienot automātiskās atskaņošanas fona video. Jūs arī uzzināsit, kā izmantot CSS citu dizaina elementu izvietošanai virs fona video. Un vingrinājumu faili ir bez maksas pat standarta dalībai.

Converse sākas ar tukšu kaulu html failu un izveido galveno div konteineru dizaina elementiem: teksta tagu līniju, logotipu svg un video. Viņš demonstrē, kā video tagā izmantot automātisko atskaņošanu un kā iestatīt divus visizplatītākos video veidus: .mp4 un .ogg.

Pēc tam Converse pāriet uz CSS failiem un CSS, lai veidotu un pozicionētu video un centrālo logotipa attēlu. Viņš turpina rīkoties tāpat kā tagu līnijas teksts. Īpaši man patika viņa tehnika darbam ar robežām.

Pēc tam Converse apspriež, kā padarīt šo izkārtojumu atsaucīgu, izmantojot multivides vaicājumus vidējiem un maziem ekrāniem un CSS. Viņš atkal nosaka stilus video, logotipam un tagu līnijai. Viņš arī demonstrē, kā maziem ekrāniem, kas nevar atskaņot video, iestatīt rezerves attēlu un paslēpt to.

Pārejot pie sarežģītākiem jautājumiem, Converse parāda, kā izmantot JavaScript, lai mobilajām ierīcēm pievienotu sarežģītāku displeja vadību, piemēram, skārienjutīgus pasākumus. Viņš iepazīstina ar trešās puses vietni Modernizr, kas ģenerēs CSS klases, kuras var pievienot lapai, izmantojot JavaScript, pamatojoties uz pašreizējās ierīces funkcijām. Viņš parāda, kā ģenerēt kodu, lejupielādēt un pievienot to jūsu vietnes lapai.

Pēdējā nodarbībā Converse demonstrē, kā kodēt izvietojuma pozīciju un citus stilus, lai video aptvertu visu pārlūka logu.

Šis kurss bija par HTML un CSS, ko izmanto, lai veidotu un pozicionētu fona video tīmekļa un mobilajām ierīcēm. Tomēr es cerēju, ka autore apspriedīs video faila mitināšanas un optimizācijas iespējas ātrai lejupielādei. Būtu arī jauki zināt, kā fona video vietā pievienot tikai interaktīvus dizaina elementus, nevis tikai statiskus elementus.

Kriss Konverss ir ieguvis grādu grafiskajā dizainā Ročesteras Tehnoloģiju institūtā un 22 gadu pieredzi dizainā un tehnoloģijās.

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

Informācijas atklāšana: Man par šo rakstu netika piešķirta finansiāla kompensācija. Balstoties uz manu pieredzi, šie atzinumi ir pilnīgi mani.