Mitä tietää
- Siirry Etusivulla Suunnitelma-näkymässä Window >Library > [MR] Koko näytön taustavideo- kansioon ja vedä widget sivulle.
- Lisää video siirtymällä kohtaan Tiedosto > Lisää ladattavia tiedostoja > videokansio > Avaa.
Adobe Musen avulla voit luoda web-sivuja käyttämällä samanlaista työnkulkua kuin julkaisut. sinun ei tarvitse ymmärtää syvällistä koodia, jolla sivusto tai sivu rakennetaan, vaikka HTML5:n, CSS:n ja JavaScriptin tuntemus ei ole haitaksi. Vaikka perinteinen verkkovideo lisätään yleensä HTML5 Video API:n kautta, Adobe Muse suorittaa saman asian widgeteillä, jotka luovat tiettyihin tehtäviin vaaditun HTML 5:n, mutta käyttävät Musen selkeäkielistä käyttöliittymää koodin kirjoittamiseen, kun sivu julkaistaan.
Kuinka valmistelet sivun taustavideota varten Adobe Muse CC:ssä
Kun widget on asennettu, voit nyt luoda sivun, joka käyttää videota.
- Luo kansio Muse-sivustollesi ennen kuin aloitat. Luo kansioon toinen kansio – käytämme "mediaa" - ja siirrä videon mp4- ja webm-versiot kyseiseen kansioon.
- Kun käynnistät Musen, valitse Tiedosto > Uusi sivusto.
- Kun Asettelu-valintaikkuna avautuu, valitse Desktop Alkuperäisasetteluksi ja muuta Sivun leveyttäja Sivun korkeus arvot ovat 1200 ja 900 . Napsauta OK.
- Kaksoisnapsauta Pääsivu suunnitelmanäkymässä avataksesi perussivun. Kun pääsivu avautuu, siirrä ylä- ja alatunnisteohjaimet sivun ylä- ja alaosaan. Et todellakaan tarvitse ylä- ja alatunnistetta tähän esimerkkiin.
Adobe Muse CC:n koko näytön taustavideowidgetin käyttäminen
Vidgetin käyttö on yksinkertaista.
- Ensimmäinen asia, joka sinun on tehtävä, on palata suunnitelmanäkymään valitsemalla View > Plan Mode.
- Kun suunnitelmanäkymä avautuu, avaa se kaksoisnapsauttamalla Kotisivua.
- Avaa Kirjasto-paneeli – jos se ei ole auki käyttöliittymän oikealla puolella, valitse Window > Library – ja käännä alas [MR] koko näytön taustavideo-kansiota.
- Vedä kansio-widget sivulle.
-
Huomaat, että Options pyytää sinua syöttämään videoiden mp4- ja webm-versioiden nimet. Kirjoita nimet täsmälleen sellaisina kuin ne on kirjoitettu kansioon, johon ne asetit. Yksi pieni temppu varmistaaksesi, ettet tee virhettä, on kopioida mp4-videon nimi ja liittää se alueille MP4 ja WEBM. Asetukset-valikosta
Yksi muu temppu: Tämä widget tekee vain HTML 5 -koodin kirjoittamisen puolestasi. Voit kertoa tämän, koska näet widgetissä. Tässä tapauksessa voit sijoittaa widgetin verkkosivulta pahvitaululle, ja se toimii edelleen. Tällä tavalla se ei häiritse sivulle sijoittamaasi sisältöä.
Videon lisääminen ja sivun testaaminen Adobe Muse CC:ssä
Vaikka olet lisännyt koodin, jolla videot toistetaan, Muse ei silti tiedä, missä kyseiset videot sijaitsevat.
- Korjaa tämä valitsemalla Tiedosto > Lisää ladattavia tiedostoja.
- Kun Lataa-valintaikkuna avautuu, siirry kansioon, joka sisältää videosi, valitse ne ja napsauta Avaa.
- Varmista, että ne on ladattu, avaa Assets-paneelija sinun pitäisi nähdä kaksi videotasi. Jätä ne vain paneeliin. Niitä ei tarvitse sijoittaa sivulle.
- Testaa projekti valitsemalla Tiedosto > Esikatselusivu selaimessa tai, koska tämä on yksi sivu, Tiedosto > Esikatsele sivusto selaimessa. Oletusselaimesi avautuu ja video toistetaan.
-
Tässä vaiheessa voit käsitellä Muse-tiedostoa tavallisena verkkosivuna ja lisätä sisältöä kotisivulle, jolloin video toistetaan sen alla.
Videojulistekehyksen lisääminen Adobe Muse CC:ssä
Tämä on verkko, josta tässä puhumme, ja yhteyden nopeudesta riippuen käyttäjäsi saattaa avata sivun ja tuijottaa tyhjää näyttöä videon latautuessa. Tämä ei ole hyvä asia. Näin voit käsitellä tätä ilkeyttä.
On "Paras käytäntö" sisällyttää videoon julistekehys, joka tulee näkyviin videon latautuessa. Tämä on yleensä täysikokoinen kuvakaappaus videon kehyksestä.
- Lisää julistekehys napsauttamalla kerran Browser Fill sivun yläosassa.
- Napsauta Kuvalinkkiä ja siirry käytettävän kuvan kohdalle.
- Valitse Fitting-alueella Scale to Fill ja napsauta Keskipistettä kohdassa Sijainti-alue. Tämä varmistaa, että kuva skaalautuu aina kuvan keskeltä, kun selaimen näkymän koko muuttuu. Näet myös kuvan täyttävän sivun.
-
Toinen pieni temppu on saada tasainen täyteväri siltä var alta, että julistekehyksen ilmestyminen kestää hetken. Voit tehdä tämän napsauttamalla Color-sirua avataksesi Muse-värinvalitsin. Valitse työkalu pipetti ja napsauta kuvan hallitsevaa väriä. Kun olet valmis, napsauta sivua sulkeaksesi selaimen täyttö -valintaikkunan.
-
Tässä vaiheessa voit tallentaa projektin tai julkaista sen.
Tämän sarjan viimeinen osa näyttää, kuinka kirjoitetaan HTML5-koodi, joka liukuu videon verkkosivun taustalle.