Opi lisäämään koostewidgetejä Adobe Musessa. Luo interaktiivisia sivustoja määrittämällä koostewidgetejä.

Huomautus:

Adobe Museen ei enää lisätä uusia ominaisuuksia ja sen tuki päättyy 26. maaliskuuta 2020. Lisätietoja ja tukea on kohdassa Adobe Musen elinkaaren päättymissivu.

Adobe Musen koostewidgetien avulla voit lisätä sivulle monipuolisia vuorovaikutteisia toimintoja. Koostewidget on lähes korvaamaton ratkaisu sivustoon kuin sivustoon niiden aihealueista huolimatta, sillä sen avulla voidaan näyttää monenlaista sisältöä. Näillä widgeteillä voit luoda ainutlaatuisia selaus- ja siirtymiskokemuksia kirjoittamatta riviäkään koodia.

Adobe Muse sisältää useita erilaisia koostewidgetejä, joilla voi lisätä ja suunnitella monen tyyppisiä sisältöjä sivustoihin. Esimerkiksi valokuvaussivuston kehittäjä voi lisätä sivustoon valokuvagallerian Valolaatikkonäyttö-widgetin avulla. Tämä widget himmentää tilapäisesti sivun muut osat, jolloin katsojan huomio keskittyy näytön aktiiviseen alueeseen.

Koostewidgetin sisään voi myös lisätä muita widgetejä ja luoda näin mielenkiintoisia sivustoratkaisuja. Jos olet esimerkiksi suunnittelemassa tuoteluetteloa, voit luoda haitarivalikon tyhjän koostewidgetin avulla ja liittää tyhjän koostewidgetin kohdealueelle sisäkkäisen diaesityswidgetin. Kehittämällä erilaisia ratkaisuja voit tarjota sivuston kävijöille ainutlaatuisen käyttökokemuksen.

Lue lisää Adobe Musen erilaisista koostewidgeteistä.

Koostewidgetien tyypit

Koostewidgetissä on kaksi säilöä: Liipaisin ja Kohde. Liipaisinalue on se, jota sivuston käyttäjä napsauttaa, ja kohdealue on sitä vastaava alue, joka tulee näkyviin. Linkittämällä liipaisin- ja kohdealueita voit lisätä sivustoon monipuolisia ja vuorovaikutteisia toimintoja.

Adobe Muse tukee seuraavia koostewidgetien tyyppejä. Tarpeiden mukaan widgetejä voi käyttää joko yksinään tai sisäkkäisinä ryhminä.

Tyhjä

Tyhjä koostewidget Adobe Musessa
Tyhjä koostewidget Adobe Musessa

Widget, jossa on pienet miniatyyrit. Tämä widget on oletusarvoisesti tyhjä. Voit liittää tämän manuaalisesti kohdesäiliöön.

Uutiset

Uutiset-koostewidget Adobe Musessa
Uutiset-koostewidget Adobe Musessa

Widget, joka toimii haitariwidgetin tapaan. Tämän widgetin säiliöalueelle voi lisätä tekstiä ja kuvia.

Valolaatikkonäyttö

Valolaatikkonäyttö-koostewidget Adobe Musessa
Valolaatikkonäyttö-koostewidget Adobe Musessa

Widget, jonka kohdealueen sisältö muuttuu aktiiviseksi, kun liipaisinta napsautetaan. Sivun muut alueet himmenevät, kun kohde tulee näkyviin.

Esitys

Esitys-koostewidget Adobe Musessa
Esitys-koostewidget Adobe Musessa

Tämä widget sisältää miniatyyrejä, jotka on yhdistetty kohde-esitysalueeseen. Siinä diat siirtyvät oletuksena vaakasuuntaisesti.

Työkaluvihje

Työkaluvihje-koostewidget Adobe Musessa
Työkaluvihje-koostewidget Adobe Musessa

Tämä widget sisältää työkaluvihjeen tekstin. Kun sivuston käyttäjä vie hiiren liipaisinalueen päälle, työkaluvihje tulee näkyviin.

Koostewidgetien lisääminen ja määritys

Lisää ja käytä koostewidgetejä Adobe Musessa valitsemalla haluamasi koostewidgetin ja vetämällä sen Muoto-näkymään. Koska nämä widgetit ovat oletuksena responsiivisia, widget toimii joustavasti eri keskeytyskohtien välillä. Jos haluat muuttaa koostewidgetin sijaintia tai sisältöä, voit muokata tietyn keskeytyskohdan yksittäisiä widgetelementtejä, muuttaa niiden kokoa tai kiinnittää niitä.

Näin voit lisätä koostewidgetejä asetteluun.

  1. Käynnistä Adobe Muse. Valitse Tervetuloa-näytössä, haluatko luoda uuden sivuston vai avata aiemmin luodun Adobe Muse -sivuston, johon koostewidget lisätään.

  2. Avaa suunnittelunäkymässä kaksoisnapsauttamalla sivu, jolle haluat lisätä widgetin.

  3. Avaa Widgetkirjasto (Ikkuna > Widgetkirjasto) ja laajenna Koosteet-osio napsauttamalla sitä. Valitse sopiva koostewidget tarpeittesi mukaan.

    Valitse Widgetkirjastosta esimerkiksi Valolaatikkonäyttö.

    Huomautus:

    Poista widgetin kaikki oletussisältö napsauttamalla widgetiä hiiren kakkospainikkeella ja valitsemalla sitten Tyhjennä widgetin sisältö.

    Vedä koostewidget Adobe Musen Widgetkirjastosta.
    Vedä koostewidget Widgetkirjastosta.

    Valolaatikko-esityswidgetin oletusversiossa on kolme pienempää harmaata liipaisinlaatikkoa suuremman vaaleanharmaan kohdesäilön yläpuolella.

    Kun sivuston käyttäjät napsauttavat liipaisinsäiliötä, valolaatikkowidgetin kohdesäiliö tulee näkyviin. Kohteeksi voi upottaa kuvia, tekstiä ja videoita, kuten YouTube-videoita.

  4. Valitse säiliö tai liipaisin koostewidgetissä. Voit valita koko widgetin. Valintailmaisimessa sovelluksen vasemmassa yläkulmassa näkyy sana Kooste.

    Jos haluat valita liipaisimen, kaksoisnapsauta ja valitse widgetin sisällä olevia pienempiä laatikoita. Valintaosoittimessa näkyy sana Liipaisin. Pienet laatikot ovat widgetin liipaisimia. Ne toimivat painikkeina, jotka reagoivat käyttäjien toimintoihin.

    Katso Adobe Muse -sivun vasemman yläkulman valintaosoitinta
    Katso sivun vasemman yläkulman valintaosoitinta

    Muita elementtejä ei ole valittuna, kun vasemman yläkulman valintaosoittimessa näkyy sana Sivu.

  5. Avaa Tuo-valintaikkuna valitsemalla Tiedosto > Sijoita. Valitse selaamalla tiedosto, jonka haluat lisätä widgetiin. Valitse tiedosto ja sulje Tuo-valintaikkuna valitsemalla Avaa.

    Sijoita kuva täysikokoisena napsauttamalla kerran mitä tahansa sivun kohtaa.

  6. Kun kuva on edelleen valittuna, napsauta hiiren kakkospainiketta ja valitse pikavalikosta Leikkaa.

    Voit leikata kuvan myös pikanäppäinkomennolla. Kuva häviää sivulta ja kopioidaan leikepöydälle.

  7. Napsauta liipaisinpainiketta hiiren kakkospainikkeella ja valitse Liitä. Voit myös liittää kuvan liipaisimeen pikanäppäimillä. Huomaa, että liipaisinsäilö laajenee automaattisesti kuvan mittasuhteiden mukaan.

    Sisällön liittäminen säilöön voi olla vaikeaa. Joskus voit luulla liittäneesi sisällön säilöön, mutta se onkin liitetty itse sivulle.

    Jos sinun on tarkistettava, onko kuva varmasti liipaisinsäilön sisällä, paina kerran Esc-näppäintä ja katso valintaosoitinta. Jos siinä näkyy sana Liipaisin, kuva on liipaisimen sisällä. Jos valintaosoittimessa näkyy sana Sivu, leikkaa ja liitä kuva uudelleen liipaisinsäiliöön.

    Voit myös avata Tasot-paneelin (Ikkuna > Tasot) ja tarkistaa sen avulla, minne kuva on liitetty. Tasot-paneelissa näet sivun elementtien hierarkian.

  8. Jos haluat lisätä enemmän miniatyyrejä, napsauta liipaisinsäiliön vieressä olevaa +-merkkiä.

    Lisää miniatyyreja valolaatikkonäyttöön napsauttamalla +-merkkiä
    Lisää miniatyyreja napsauttamalla +-merkkiä
  9. Kun olet lisännyt widgetin Muoto-näkymään, voit määrittää sen asetukset. Määritä koostewidgetin asetukset valitsemalla widget ja napsauttamalla sinistä nuolta widgetin oikeassa yläkulmassa.

    Määritä koostewidget Asetusvalikossa
    Määritä koostewidget asetuspaneelissa

    Asetukset-paneelissa voi määrittää seuraavat asetukset:

    • Sijainti: Määrittää kohdealueen sijainnin sivulla. Sijoita kohteita päällekkäin valitsemalla Pinottu, tai sijoita kohteita sivun eri alueille valitsemalla Hajanainen. Himmennä sivun muut alueet valitsemalla Valolaatikko.
    • Näytä kohde: määrittää kohteen toiminnan, kun käyttäjä napsauttaa liipaisinta. 
    • Kätke kohde: Määrittää kohteen kätkemisasetukset. Kohdealuetta ei näy, ennen kuin käyttäjä napsauttaa liipaisinta  
    • Siirtymä: Määrittää, miten kohdealueen sisältö muuttuu, kun käyttäjä napsauttaa liipaisinta tai vie osoittimen sen päälle. Saat häivytettyä ja tuotua kohteet hitaasti näkyviin valitsemalla Häivytys. Kohde tulee vaakasuuntaisesti näkyviin valitsemalla Vaakasuora ja pystysuuntaisesti valitsemalla Pystysuora. 
    • Siirtymän nopeus: Määrittää koostewidgetin siirtymän nopeuden. Jos haluat välittömän siirtymisen, valitse Ei mitään.
    • Automaattinen toisto: Luo sivustoon diaesitys valitsemalla tämä asetus. Jos valitset automaattisen toiston, diat vaihtuvat automaattisesti eivätkä reagoi käyttäjän toimintoihin.
    • Sekoita: tällä asetuksella kohteet näkyvät satunnaisessa järjestyksessä.
    • Liipaisimet päällä: Valitse tämä asetus, jos haluat, että liipaisin on liipaisinsäilön päällä. Sama järjestys näkyy myös Tasot-paneelissa.
    • Ota pyyhkäisy käyttöön: tällä asetuksella kosketusnäyttöä käyttävissä laitteissa voi siirtyä seuraavaan kohteeseen pyyhkäisemällä.
    • Piilota kaikki alussa: Piilota kaikki kohteet, kun sivu ladataan. Kohteet tulevat näkyviin, kun käyttäjä napsauttaa vastaavaa liipaisinaluetta.
    • Automaattinen valolaatikko: jos valitset tämän asetuksen, valolaatikko näkyy automaattisesti, kun sivusto latautuu.
    • Osat: Lisää widgetiin vuorovaikutteisuutta valitsemalla Edellinen-, Seuraava- tai Sulje-painike. Käyttäjät voivat napsauttaa sivuston Edellinen-, Seuraava- ja Sulje-painikkeita.
    • Muokkaus: Valitse Näytä valolaatikko muokattaessa -asetus, jotta kohdealue näkyy Muoto-näkymässä, kun muokkaat widgetiä. Valitse Näytä kaikki suunnittelutilassa -asetus, jotta kaikki kohdesäiliöt näkyvät suunnittelutilassa samaan aikaan.
    Määritä koostewidgetin asetukset Adobe Musessa
    Määritä koostewidgetin asetukset

    Huomautus:

    Näytä valolaatikko muokattaessa -asetus ei ole käytössä, kun avattavasta Sijainti-valikosta on valittu Hajanainen tai Pinottu.

    Piilota kaikki alussa -valinta ei ole käytössä, jos Automaattinen valolaatikko -asetus on valittuna.

  10. Poista liipaisimia kaksoisnapsauttamalla liipaisinta, jonka haluat poistaa. Poista valittu liipaisin painamalla Delete-näppäintä (Mac) tai askelpalautinta (Windows).

  11. Aktivoi valolaatikkotehoste napsauttamalla pääkuvaa liipaisinsäilössä.

    Näytä valolaatikkonäyttö napsauttamalla kuvaa vasemmalla (liipaisin)
    Näytä valolaatikkonäyttö napsauttamalla kuvaa vasemmalla (liipaisin), kuten oikealla näkyy

    Sulje valolaatikkoikkuna painamalla Esc-näppäintä ja jatka Adobe Muse -sivun muokkaamista palaamalla Muoto-näkymään.

  12. Kun olet määrittänyt ja sijoittanut koostewidgetin suunnitelmaasi, kokeile widgetiä esikatselunäkymässä.

Jos käytät koostewidgetiä responsiivisessa asettelussa, tutustu seuraavaan osioon. Varmista, että testaat ja esikatselet widgetiä kaikissa keskeytyskohdissa.

Koostewidgetien käyttö responsiivisessa asettelussa

Koostewidgetit ovat oletusarvoisesti mukautuvia ja reagoivia. Voit lisätä ja käyttää koostewidgetejä responsiivisissa asetteluissa jollakin seuraavista tavoista:

  • Jos luot uuden responsiivisen sivuston Adobe Musen uusimmalla versiolla, vedä koostewidget Widgetkirjasto-paneelista Muoto-näkymään.
  • Jos käytössäsi on Adobe Muse 2017.0.3 tai sitä vanhempi versio, koostewidget ei ole responsiivinen. Avaa tällöin .muse-tiedosto Adobe Musen uusimmassa versiossa. Valitse widgetin sisällä olevat elementit ja valitse sitten koonmuutosasetukseksi Reagoiva leveys tai Reagoiva korkeus ja leveys (tarpeen mukaan).
Ei-responsiivisten koostewidgetien muuntaminen responsiivisiksi
Ei-responsiivisten koostewidgetien muuntaminen responsiivisiksi

Huomautus:

Et voi valita koko widgetiä ja muuttaa sen koonmuutosasetuksia. Valitse widgetin sisältä yksittäinen elementti tai useita elementtejä ja muuta ne responsiivisiksi.

Määritä widget kohdan Koostewidgetien lisääminen ja määritys ohjeiden mukaisesti. Kun olet määrittänyt widgetin asetukset ja ulkoasun, voit esikatsella sitä selaimessa tai käyttää pyyhintä ja muuttaa sen kokoa. Huomaat, että widgetin koko muuttuu automaattisesti näytön koon mukaisesti.

Responsiivinen koostewidget Adobe Musessa
Responsiivinen koostewidget Adobe Musessa

Huomautus:

Kun lisäät koostewidgetejä responsiiviseen asetteluun, asettelu kannattaa tehdä ensin suurimmassa keskeytyskohdassa. Kun olet viimeistellyt widgetin sijainnin ja määritykset suurimmassa keskeytyskohdassa, lisää muita keskeytyskohtia tarpeen mukaan.

Lisätietoja sivuston suunnittelusta responsiivista asettelua varten on kohdassa Objektien asettelu responsiivisessa suunnittelussa.

Koostewidgetin yhdistäminen muihin widgeteihin

Eräs koostewidgetin parhaista ominaisuuksista on mahdollisuus sijoittaa sen sisään muita widgetejä. Voit siis lisätä koostewidgetin sisään esimerkiksi lomakkeita, diaesityksiä tai valikoita.

Jos teet esimerkiksi ruokasivuston, voit lisätä Uutiset-widgetin kohdesäilön sisään diaesityswidgetin. Kun sivuston kävijä napsauttaa valikkokohtaa (Uutiset-widgetiä), kuvagallerian sisältävä kohdealue näytetään diaesityksenä.

Voit myös lisätä yhteydenottolomakkeen kohteeksi esimerkiksi niin, että yhteydenottolomake avautuu suoraan Yhteystiedot-valikkokohtaa napsauttamalla.

Käyttämällä erilaisia sisäkkäisiä widgetejä eri tavoin voit tehdä monenlaisia mielenkiintoisia suunnitteluratkaisuja. Ota kuitenkin seuraavat seikat huomioon, kun suunnittelet käyttäväsi sisäkkäisiä widgetejä responsiivisessa asettelussa:

  • Ei-responsiivisen säilön sisällä olevia responsiivisia elementtejä ei voi kiinnittää. 
  • Ei-responsiiviseen säilöön sijoitettavat objektit eivät myöskään ole responsiivisia.

Huomautus:

Kun sijoitat widgetejä koostewidgetin sisään, on suositeltavaa, että sisäkkäisiä tasoja on enintään kolme.

Seuraavassa osiossa kerrotaan, miten voit luoda alivalikon käyttämällä koostewidgetiä. Tämän esimerkin avulla opit luomaan piilotetun alivalikon sivustonavigointia varten.

Alivalikoiden luominen koostewidgetillä

Voit luoda sivuston navigoinnin alivalikkoja koostewidgetillä. Voit luoda valikkokohteen, joka avaa alivalikon, kun vierailija siirtää kohdistimen aktiiviselle alueelle. Kyseinen alivalikko piilotetaan, kun vierailija siirtää kohdistimen pois tältä aktiiviselta alueelta. Voit myös määrittää widgetiin alivalikon, joka piilotetaan, kun vierailija ei napsauta mitään alivalikon linkeistä, vaan siirtää kohdistimen pois alivalikosta. Tällaisten interaktiivisten alivalikoiden luonti on hyödyllistä, jos luot navigointipalkkia sivustolle, jolla on useita aliosioita.

Näytä kohde- ja Kätke kohde-asetuksista on hyötyä, jos haluat käyttää sivustossasi yleisiä asetuksia. Vierailija voi joko napsauttaa linkkejä tai piilottaa ikkunan siirtämällä kohdistimen ikkuna-alueen ulkopuolelle. Alivalikon piilottaminen Sulje-painikkeella ei ole välttämätöntä, kun tämä valinta on käytössä.

Tämä ominaisuus on käytettävissä seuraavien koostewidgetien kanssa:

  • Tyhjä
  • Uutiset
  • Työkaluvihje

Asetuspaneelissa on kaksi asetusta kohdesäilön näyttämiseen:

  • Napsautettaessa: näyttää kohteen, kun käyttäjä napsauttaa liipaisinta
  • Siirryttäessä päälle: näyttää kohteen, kun käyttäjä siirtää osoittimen liipaisimen päälle

Voit myös halutessasi piilottaa kohdesäilön koostewidgetissä. Käytettävissä ovat seuraavat kohdesäilön piilotusvalinnat:

  • Ei mitään
  • Napsautettaessa
  • Siirryttäessä pois
  • Pois liipaisimelta ja kohteelta

Seuraavassa osiossa opit, kuinka kohdesäilö tuodaan näkyviin, kun osoitin siirretään sen päälle, ja kuinka kohdesäilö piilotetaan, kun kohdistin siirretään pois sekä liipaisinsäilön että kohdesäilön päältä.

Seuraavia ohjeita noudattamalla voit ottaa käyttöön Piilota siirryttäessä pois -asetukset koostewidgeteille sekä luoda valikkopalkin, joka poistuu näkyvistä ja näyttää alivalikon linkit vierailijan toimien mukaisesti:

  1. Lisää suunnittelunäkymässä valolaatikko-koostewidget sivulle vetämällä widget Widgetkirjastosta.

  2. Valitse liipaisinsäiliöt. Siirrä valintatyökalulla kaikki kolme liipaisinsäilöä suuremman kohdesäilön yläpuolelle ja tasaa niiden välit.

    Liipaisinsäilöjen siirtäminen
    Siirrä liipaisinsäilöt suuremman pääkuvan yläpuolelle.

  3. Vedä valintatyökalulla kunkin liipaisinsäilön sivukahvoja. Levennä säilöä, jolloin yläosaan luodaan kolmen välilehden joukko Välilehtiin jaettu paneeli -widgetin tavoin.

    Vedä kahvoista valintatyökalun avulla
    Vedä reunuslaatikoita siten, että ne ulottuvat kolmen liipaisinpainikkeen leveydelle.

  4. Lisää tarvittava sisältö kaikille kolmelle liipaisinalueelle. Liipaisinsisältö voi olla esimerkiksi tekstiä, linkkejä, kuvia, suorakaiteita ja upotettua HTML-koodia. Voit esimerkiksi lisätä tekstiä tekstityökalulla jokaiseen liipaisimeen: Linkki yksi, Linkki kaksi ja Linkki kolme.

    Luo seuraavaksi linkki toisen kohdesisältöalueen sisälle.

  5. Napsauta liipaisinsäiliötä ja valitse seuraavaksi sitä vastaava, suurempi kohdesäiliö. Lisää linkki toisen kohdesisältöalueen sisälle. Napsauta sitten avattavaa valikkoa Hyperlinkit-otsikon vieressä hallintapaneelin oikealla puolella. Lisää verkko-osoitteen linkki, johon haluat liittää sivuston.

  6. Testaa koostewidgetin toiminta valitsemalla Tiedosto > Esikatsele sivu selaimessa.
    Käytä widgetiä napsauttamalla liipaisinsäilöjä nimeltä Linkki yksi, Linkki kaksi ja Linkki kolme.

    Huomaa, että oletuksena kohdesäilö on aina näkyvissä eikä sitä piiloteta lainkaan. Voit tuoda vastaavan kohdesäilön näkyviin napsauttamalla jotakin kolmesta liipaisinpainikkeesta, mutta joka tapauksessa yksi kolmesta kohdesäilöstä on aina näkyvissä.

  7. Määritä Piilota siirtyessä pois -asetusta valitsemalla koostewidget. Siirry asetusvalikkoon napsauttamalla sinistä nuolta ja muokkaa widgetin määrityksiä.

    Varmista, että seuraavat asetukset ovat käytössä:

    • Sijainti: Pinottu (oletus)
    • Näytä kohde: Siirryttäessä päälle
    • Kätke kohde: Pois liipaisimelta ja kohteelta
    • Siirtymä: Häivytys (oletus)
    • Siirtymän nopeus: 0,5 sekuntia (oletus)
    • Automaattinen toisto: Ei käytössä (oletus)
    • Sekoita: Ei käytössä (oletus)
    • Piilota kaikki alussa: Käytössä
    Koosteiden valintapaneeli
    Määritä widgetin toiminta muokkaamalla asetuspaneelin kohteita.

    Tärkeimmät asetukset, jotka hallitsevat kätkemistä ja näyttöä, ovat Näytä kohde -valikko, Kätke kohde -valikko sekä Piilota kaikki alussa -valinnan käyttöönotto.

  8. Testaa widgetin viimeisimmät muutokset valitsemalla Tiedosto > Esikatsele sivu selaimessa.

    Kun koostewidget latautuu nyt ensimmäisen kerran, kaikki kohdealueet ovat oletuksena piilotettuja.

    Käytä widgetiä uudelleen. Huomaa, että kun viet kohdistimen liipaisinalueen päälle, vastaava kohdealue tulee näkyviin. Kun osoitin on widgetin alueen sisäpuolella, pystyt käyttämään kohdealueiden sisältöä (esimerkiksi napsauttamaan keskimmäisen kohdesäilön linkkiä verkkosivustoon).

    Jos kuitenkin siirrät osoittimen pois liipaisin- tai kohdealueilta, kohdealueet piilotetaan, kunnes siirrät osoittimen toisen liipaisinalueen päälle.

    Tämän ominaisuuden avulla voit rakentaa paljon monipuolisemman sivustonavigoinnin, joka reagoi vierailijoiden hiirenliikkeisiin.

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö