Opettele lisäämään valikkoja Adobe Muse -sivustoon ja määrittämään niitä. Opettele luomaan mobiilivalikkoja ja päällesiirtymistiloja sekä muokkaamaan valikkotunnisteita.

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.

Navigointi on yksi tärkeimmistä seikoista, joka on otettava huomioon sivustoa muodostettaessa. Sivustoa suunniteltaessa sivustonavigoinnin tyypin ja sijainnin valitseminen on olennaista. Valikot ja sivustonavigointi voivat joko parantaa tai heikentää sivuston käyttökokemusta.

Adobe Musessa voit luoda nopeasti sivuston navigointijärjestelmän valikkowidgetien avulla. Vaikka voit yhdistää sivut luomalla linkit manuaalisesti, valikkowidgetit ovat helppo ja joustava tapa lisätä
navigointi sivustoon. Voit lisätä valikoita vetämällä valikkowidgetin sivulle samoin kuin muutkin widgetit. Kun teet niin, havaitset, että tiedot lisätään automaattisesti valikkotunnisteisiin, joilla on sama nimi kuin sivulla. Kun muutat sivun nimen Suunnittele-näkymässä, valikkotunnisteet päivitetään automaattisesti. 

Voit lisätä sekä pysty- että vaakasuuntaisia valikoita. Adobe Muse sallii myös ns. voileipävalikoiden ja päällesiirtymistilojen luonnin valikkotunnisteisiin. Seuraavien ohjeiden avulla osaat tehdä nämä toiminnot käyttämällä Adobe Musea.

 

Valikkowidgetin lisääminen

  1. Kun sivupohja on auki muokkausta varten Muoto-näkymässä, avaa Widgetkirjasto. Jos se ei vielä ole auki, valitse Ikkuna > Widgetkirjasto.

  2. Siirry Widgetkirjasto-paneeliin ja laajenna valikkowidgetien lista napsauttamalla Valikot. Valitse jokin seuraavista sivuston rakenteen ja valikon sijaintipaikan perusteella:

    • Vaakasuuntainen, jos haluat lisätä vaakasuuntaisen valikon.
    • Pystysuuntainen, jos haluat lisätä pystysuuntaisen valikon.
    Pysty- tai vaakasuuntaisen valikkowidgetin valitseminen Adobe Musessa
    Pysty- tai vaakasuuntaisen valikkowidgetin valitseminen
  3. Vedä widget valintatyökalulla ja aseta se haluamaasi paikkaan asettelussa. Voit asettaa esimerkiksi vaakasuuntaisen valikkowidgetin ylätunnistealueelle.

    Aseta valikkowidget ylätunnisteen taustakuvana olevan ruskean nauhan päälle.
    Aseta valikkowidget ylätunnisteen taustakuvana olevan ruskean nauhan päälle.

    Huomaa, että luomiesi sivujen nimet näkyvät valikossa automaattisesti siinä järjestyksessä, jossa ne näkyvät sivukartassa. Valikkotunnisteet linkitetään automaattisesti sivuille. Ne ovat myös dynaamisia. Tämä tarkoittaa sitä, että jos myöhemmin muutat sivun nimeä tai siirrät sivuja, valikko päivittyy automaattisesti. Linkit toimivat edelleen odotetulla tavalla.

  4. Napsauta värivalitsinta Hallinta-paneelissa ja määritä valikon väri. Määritä sitten valikkotekstin koko tekstikoon kentässä.

    Valitse tekstin koko ja väri
    Määritä vaakasuuntaisen valikkowidgetin tekstipainikkeiden kirjasimen väri ja pistekoko.

Valikkowidgetien määritys ja mukautus

Nyt kun olet lisännyt valikkowidgetin asetteluun, voit mukauttaa tämän widgetin omia tarpeitasi vastaavaksi. Voit määrittää valikkoja Asetukset-paneelissa.  Widgettyypin mukaan vaihtuvassa Asetukset-paneelissa voit muokata tiettyä widgetiä koskevia asetuksia. Voit hallita tässä paneelissa, miten widgetit käyttäytyvät ja miten niiden sisältö näytetään.

  1. Valitse valikkowidget ja napsauta widgetin oikeassa yläkulmassa olevaa sinistä nuolipainiketta. Järjestelmä näyttää Asetukset-paneelin.

    Valikkowidgetin määrittäminen Asetukset-paneelissa
    Valikkowidgetin määrittäminen Asetukset-paneelissa
  2. Määritä valikkowidget Asetukset-paneelissa. Voit määrittää seuraavat asetukset:

    • Valikon tyyppi: Määrittää, mitkä sivut sisällytetään sivustonavigointiin. Valitse ylimmät sivut, jos vain ensimmäisen tason sivut tai yläsivut sisällytetään. Valitse kaikki sivut, jos myös alisivut sisällytetään navigointiin. Alisivut näkyvät alivalikkoina. Valitse Manuaalinen, jos haluat valita valikkowidgetissä näkyvät sivut manuaalisesti.
    • Suunta: määritä, lisätäänkö valikko vaaka- vai pystysuuntaisena. 
    • Muokkaa yhdessä: Valitse tämä valintaruutu, jos haluat päivittää kaikki valikkokomennot yhdessä. Tämä valintaruutu on oletusarvoisesti valittu. Jos et valitse tätä valintaruutua, valitsemiasi määrityksiä käytetään vain valitussa valikkokomennossa.
    • Kohteen koko: määritä, jaetaanko valikkokomennot yhdenmukaisesti leveyden vai koon mukaan.
    • Näytä vasen kuvake: Tätä valintaruutua ei ole oletusarvoisesti valittu. Valitse tämä asetus, jos haluat lisätä kuvakkeen jokaisen valikkokomennon vasempaan kulmaan.
    • Näytä tunniste: Tämä valintaruutu on oletusarvoisesti valittu. Kun tämän valintaruudun valinta poistetaan, valikkotunnisteita ei enää näytetä.
    • Näytä oikea kuvake: Valitse Ei käytössä, jos haluat poistaa oikeat kuvakkeet käytöstä. Valitse Käytössä, jos haluat määrittää kuvakkeet valikkokomentojen oikeaan kulmaan. Oikea kuvake on kätevä asetus, jos haluat lisätä nuolet ilmaisemaan, että valikkokomennossa on alivalikoita. Voit valita myös Vain alivalikot -asetuksen, jos haluat määrittää vain alivalikkoja sisältävien valikkokomentojen oikean kuvakkeen.
    • Osien sijoittelu: määrittää kunkin välilehden sisäisten osien aloituskohdan.
    Valikkowidgetien määrittäminen Asetukset-paneelissa
    Valikkowidgetien määrittäminen Asetukset-paneelissa

Valikkotunnisteiden ja niiden tyylin muokkaaminen

Seuraavaksi määritetään, miten muokataan tekstitunnisteita, joilla sivujen nimet näytetään kussakin valikkokomennossa. Harkitse Vaakasuuntainen valikko -widgetiä, joka käyttää perusrakennetta ja yksinkertaisia tekstilinkkejä. Tässä esimerkissä oletetaan, että kaikissa tiloissa käytetään samaa kirjasinten muotoilua.

  1. Kaksoisnapsauta ja valitse valikkotunniste, jota haluat muokata.

  2. Muokkaa valikkokomennon sisäistä tekstiä avaamalla Teksti-paneeli valitsemalla Ikkuna > Teksti. Kun tunniste on valittu, muokkaa tekstiä Teksti-paneelissa valitsemalla tarvittavat asetukset:

    • Kirjasin: valitse tarvittava valikkotunnisteessa käytettävä kirjasin.
    • Kirjasintyyli: valitse tarvittaessa valikkotunnisteessa joko kursiivi tai lihavointi.
    • Koko: valitse valikkotunnisteen kirjasimen koko.
    • Väri: Anna avattavaan Väri-kenttään käytettävän värin heksadesimaalikoodi Vaihtoehtoisesti voit valita värin pipettityökalulla.
    Valikkowidgetin valikkotunnisteiden muokkaaminen
    Valikkowidgetin valikkotunnisteiden muokkaaminen
  3. Määritä valikkotunnisteen marginaalien arvot Teksti-paneelissa. Jos sinulla on hyperlinkkityyli, jota haluat käyttää valikkotunnisteessa, valitse tyyli avattavasta kentästä, joka on kohdan abc vieressä.

    Voit käyttää kappaletyyliä valitsemalla tyylin avattavassa Kappaletyyli-kentässä Teksti-paneelissa.

  4. Voit käyttää Täyttö- ja Viiva-asetuksia valikkotunnisteissa kaksoisnapsauttamalla ja valitsemalla valikkotunnisteen. Valitse sivun yläosan työkalurivillä Täyttöväri ja Viivan väri. 

    Voit muokata myös viivan paksuutta ja ottaa valikkotunnisteiden kulman säteen käyttöön työkalurivillä.

    Täytön ja viivan asetusten käyttäminen valikkotunnisteissa
    Täytön ja viivan asetusten käyttäminen valikkotunnisteissa

Päällesiirtymistilojen luominen valikkokomennoille

  1. Valitse valintatyökalulla valikkotunniste, jolle haluat luoda päällesiirtymistilan. Avaa Tilat-paneeli. Huomaa, että painikkeen oletustilat on jo määritetty. Muokkaa tilaa napsauttamalla Tilat-paneelin Rollover-miniatyyria

  2. Pidä valikkotunniste valittuna ja poista siitä täyttöväri (eli muuta se läpinäkyväksi) napsauttamalla täyttövärin valitsimella valkoista värimallia, jossa on punainen vinoviiva.

  3. Valitse tekstityökalu ja valitse hallintapaneelin värinvalitsimella Rollover-tilan väriksi luonnonvalkoinen.

  4. Valitse Tilat-paneelista Hiiren painikkeen painaminen -tila. Pidä tekstityökalu valittuna ja määritä Hiiren painikkeen painaminen -tekstille tummempi väri valitsemalla värimalli hallintapaneelin värinvalitsimesta.

  5. Valitse Tilat-paneelista Aktiivinen-tila. Avaa Täyttö-valikko napsauttamalla hallintapaneelissa Täyttö-linkkiä.

  6. Napsauta Täyttö-valikossa värinvalitsinta ja määritä täyttöväriksi ei mitään. Napsauta Kuva-kohdan viereistä kansiokuvaketta. Tuo-valintaikkuna avautuu. Etsi tietokoneesta taustakuvatiedosto nimeltä top-nav-over.png. Valitse se napsauttamalla Valitse-painiketta. Tuo-valintaikkuna sulkeutuu automaattisesti.

  7. Varmista Täyttö-valikossa, että Sovitus-asetuksena on Alkuperäinen koko. Napsauta sitten Sijainti-kohdassa yhdeksän pisteen kuvion keskikohtaa. Taustakuva näkyy nyt keskitettynä, ilman täyttöväriä ja alkuperäisen kokoisena. Sulje Täyttö-valikko napsauttamalla jotain muuta kohtaa sivulla.

    Painikkeiden tilojen määrittäminen
    Määritä valikkokohdan aktiivinen tila.

    Koska oletusasetus Muokkaa yhdessä on valittu Vaakasuuntainen valikko -widgetissä, kaikki valikkotunnisteeseen tekemäsi muutokset on automaattisesti päivitetty kaikkiin navigointipalkin painikkeisiin.

  8. Tallenna työsi valitsemalla Tiedosto > Tallenna. Sulje Muoto-näkymässä oleva A-sivupohja napsauttamalla välilehden X-kuvaketta ja palaa Suunnittele-näkymään. Huomaa, että kaikki sivujen miniatyyrit päivittyvät niin, että ne sisältävät sivupohjaan lisätyn sisällön.

    Huomautus:

    Ylä- ja alatunnistealueiden apuviivoja voi muokata vain sivuston sivupohjissa. Jos haluat muokata sivujen ylä- tai alatunnisteen kokoa, avaa sivupohja Muoto-näkymässä kaksoisnapsauttamalla sitä ja siirrä apuviivoja tässä näkymässä.

Mobiilivalikon luominen

Adobe Musessa on mahdollista luoda myös ns. voileipävalikko tai mobiilivalikko. Kun luot tällaisen valikon, avattava alivalikko tulee näkyviin, kun pidät hiiren osoitinta päävalikon päällä. Lisätietoja tällaisen valikkotyypin luomisesta on kohdassa Alivalikoiden luominen koostewidgetillä.

Sivujen jättäminen pois valikosta

Aina kun luot sivustoon uuden ylätason sivun Suunnittele-näkymässä, Adobe Muse lisää sivut automaattisesti valikkoon. Haluat kuitenkin ehkä joskus testata sivun, ennen kuin se on vierailijoiden käytettävissä, tai piilottaa tietyn sivun. Tällaisessa tilanteessa tietyt sivut on mahdollista jättää Adobe Musessa pois navigoinnista. Tällä tavoin voidaan varmistaa, että kyseiset sivut eivät sisälly valikkowidgetin valikkokomentoihin.

Voit jättää sivut pois valikkowidgetistä noudattamalla seuraavia ohjeita:

  1. Oletetaan, että olet jo luonut sivuston sivustokartan. Siirry sitten Adobe Musen Suunnittele-näkymään. Oletetaan, että sinulla on sivustokartta, jonka sivuja ovat esimerkiksi Aloitussivu, Portfolio, Oma tarina, Yhteystiedot ja Tuotteet.

    Sivustokartan näyttäminen Suunnittele-näkymässä
    Sivustokartan näyttäminen Suunnittele-näkymässä

    Jos siirryt pääsivulle ja vedät valikkowidgetiä, näet kaikki valikkoon sisällytetyt sivut.

  2. Voit jättää tietyn sivun pois napsauttamalla pois jätettävää sivua hiiren kakkospainikkeella Suunnittele-näkymässä. Valitse Valikkoasetukset > Jätä sivut pois valikoista.

    Jos esimerkiksi haluat suorittaa Tuotteet-sivun, valitse Tuotteet hiiren kakkospainikkeella. Valitse sitten Valikkoasetukset > Jätä sivut pois valikoista.

    Tiettyjen sivujen jättäminen pois valikkowidgetistä
    Tiettyjen sivujen jättäminen pois valikkowidgetistä

    Kun nyt palaat tarkastelemaan valikkoa pääsivulle, näet, että Tuotteet on poistettu valikkowidgetistä.

    Huomautus:

    Voit poistaa koko valikon siirtymällä sivulle, johon olet lisännyt valikkowidgetin. Valitse ensin widget ja sitten Poista.

    Napsauta tilanteissa, joissa haluat valikkokomennon näkyvän ilman linkkiä, hiiren kakkospainiketta tietyllä Suunnittelu-näkymän sivulla. Valitse valikkoasetukset > Sisällytä sivu ilman hyperlinkkiä.

    Tämä asetus sopii moniin eri tilanteisiin sivustoa luotaessa. Voit käyttää tätä asetusta, jos sinulla on esimerkiksi Tuotteet-päällesiirtymissivu, jossa haluat sivuston käyttäjien napsauttavan vain tuoteluokkia eikä Tuotteet-päätunnistetta.

Valikkowidgetien käsitteleminen

Valikkowidgetien käsitteleminen
Tässä Brian Woodin selostamassa videossa neuvotaan, miten valikkowidget lisätään sivulle.
Adobe Press - Peachpit

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ö