Lynda.com Navrhněte webové HTML pozadí

• Smět 2, 2024

Video na pozadí je skvělý způsob, jak uvádět na trh svůj produkt a v tomto školicím kurzu s videem Lynda.com Navrhněte web: Video na pozadí HTML s Chrisem Converse se naučíte, jak na svou webovou stránku přidat automatické přehrávání videa na pozadí. Naučíte se také používat CSS k umístění dalších prvků návrhu přes video na pozadí. A cvičební soubory jsou zdarma i pro standardní členství.

Konverze začíná souborem html holých kostí a sestavuje hlavní kontejner div pro návrhové prvky: textový tagline, logo svg a video. Ukazuje, jak používat autoplay ve značce videa a jak nastavit dva nejběžnější typy videa, .mp4 a .ogg.

Dále se funkce Converse přesune do souborů CSS a CSS a styluje a umísťuje video a centrovaný obrázek loga. Pokračuje v tom, aby udělal totéž pro text s nadpisem. Obzvláště se mi líbil jeho postup při práci s hranicemi.

Aplikace Converse poté diskutuje, jak zajistit, aby toto rozložení reagovalo pomocí dotazů na média pro střední a malé obrazovky a CSS. Znovu stanoví styly pro video, logo a tagline. Ukazuje také, jak nastavit náhradní obraz pro malé obrazovky, které nemohou přehrát video, a skrýt video.

Při přechodu ke složitějším problémům aplikace Converse ukazuje, jak pomocí JavaScriptu přidávat komplexnější kontrolu nad displejem pro funkce mobilních zařízení, jako jsou dotykové události. Představuje web třetí strany s názvem Modernizr, který vygeneruje třídy CSS, které lze přidat na stránku pomocí JavaScriptu na základě funkcí aktuálního zařízení. Ukazuje, jak kód vygenerovat, stáhnout a přidat do kódu webové stránky.

V poslední lekci program Converse ukazuje, jak kódovat polohu a další styly rozložení tak, aby video pokrývalo celé okno prohlížeče.

Tento kurz se zabýval HTML a CSS používanými ke stylování a umístění videa na pozadí pro web a mobilní zařízení. Doufal jsem však, že autor bude diskutovat o možnostech hostování a optimalizaci video souboru pro rychlé stahování. Také by bylo hezké vědět, jak přidat interaktivní prvky návrhu přes video na pozadí, nikoli pouze statické prvky.

Chris Converse vystudoval grafický design na Rochester Institute of Technology a 22 let zkušeností v designu a technologii.

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

Zveřejňování: Tento článek mi nebyl finančně kompenzován. Názory jsou podle mých zkušeností zcela moje vlastní.

Video Návody: HTML tutorial: Flowing text around an image | lynda.com (Smět 2024).