Lynda.com Navrhnite webové video na pozadí HTML

• Smieť 6, 2024

Pozadie videa je skvelý spôsob, ako uviesť na trh váš produkt. V tomto školiacom kurze s videom Lynda.com s názvom Navrhnite web: HTML na pozadí s Chrisom Converse sa dozviete, ako pridať na svoju webovú stránku automatické prehrávanie videa na pozadí. Dozviete sa tiež, ako používať CSS na umiestňovanie ďalších prvkov návrhu na video na pozadí. A cvičebné súbory sú zadarmo aj pre štandardné členstvo.

Konverzia začína súborom html holých kostí a vytvára hlavný kontajner div pre návrhové prvky: textový slogan, logo svg a video. Ukazuje, ako používať autoplay v značke videa a ako nastaviť dva najbežnejšie typy videa .mp4 a .ogg.

Ďalej sa aplikácia Converse presunie do súborov CSS a CSS, aby sa video a stredový obrázok loga upravili a umiestnili na iné miesto. Pokračuje, aby urobil to isté pre text s nadpisom. Obzvlášť sa mi páčila jeho technika pre prácu s hranicami.

Aplikácia Converse potom diskutuje o tom, ako zabezpečiť, aby toto rozloženie reagovalo pomocou dopytov na médiá pre stredné a malé obrazovky a CSS. Znovu nastavuje štýly pre video, logo a slogan. Ukazuje tiež, ako nastaviť náhradný obrázok pre malé obrazovky, ktoré nedokážu prehrať video, a skryť ho.

Po prechode na zložitejšie problémy program Converse ukazuje, ako pomocou jazyka JavaScript pridať komplexnejšiu kontrolu nad displejom pre funkcie mobilných zariadení, ako sú dotykové udalosti. Predstavuje webovú stránku tretej strany s názvom Modernizr, ktorá bude generovať triedy CSS, ktoré sa môžu pridať na stránku pomocou JavaScriptu na základe vlastností súčasného zariadenia. Ukazuje, ako vygenerovať kód, stiahnuť a pridať ho do kódu svojej webovej stránky.

V poslednej lekcii program Converse ukazuje, ako kódovať polohu a ďalšie štýly rozloženia tak, aby video pokrývalo celé okno prehľadávača.

Tento kurz bol zameraný na HTML a CSS používané na úpravu a umiestnenie videa na pozadí pre webové a mobilné zariadenia. Dúfal som však, že autor bude diskutovať o možnostiach hostenia a optimalizácie video súboru na rýchle stiahnutie. Tiež by bolo pekné vedieť, ako pridať interaktívne prvky dizajnu na video na pozadí namiesto iba statických prvkov.

Chris Converse je absolventom grafického dizajnu na Rochester Institute of Technology a 22 rokov skúseností v oblasti dizajnu a technológie.

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

Zverejnenie: Tento článok mi nebol finančne kompenzovaný. Názory sú úplne moje vlastné na základe mojich skúseností.

Video Návody: Kilim dokuma kolye -Full- (Weaving with needle necklace technique full version) (Smieť 2024).