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.

Responsiivista suunnittelua tuetaan Adobe Musen helmikuun 2016 versiosta lähtien. Jos olet luonut verkkosivustoja helmikuun 2016 versiota edeltävissä versioissa, voit muuntaa sivustosi responsiivisiksi.

Miksi siirtyisin responsiiviseen asetteluun?

Jos sinulla on jo vaihtoehtoista asettelua käyttävä Adobe Muse -projekti, voit siirtää projektisi responsiiviseen asetteluun. Jos kuitenkin haluat jatkaa vaihtoehtoisten asettelujen käyttöä, voit tehdä niin.  

Responsiiviset sivustot sisältävät tavallisesti runsaasti koodia ja monimutkaisia malleja. Adobe Muse tarjoaa nyt ensimmäisen kerran mahdollisuuden luoda responsiivisia sivustoja ilman koodausta, ruudukkoja ja malleja. Lisäksi yhdessä tiedostossa voit suunnitella täysin responsiivisen sivuston, jonka asettelu näyttää hyvältä kaikissa laitteissa näytön koosta riippumatta. Erillisiä asetteluja ei enää tarvita.

Lisäksi tekstin ja kuvien päivitys sujuu vaivattomasti käytettäessä responsiivista Adobe Muse -asettelua. Aikaa ei enää kulu hukkaan, kun jokaista muutosta ei enää tarvitse tehdä joka asetteluun erikseen. Responsiivista asettelua tukee myös In-Browser Editing -sovellus, jolla voi muokata sivuston sisältöä selaimessa.

Lisäksi Adobe Muse lisää joustavuutta sivuston suunnitteluun. Voit näyttää tai piilottaa tietyt objektit tietyissä keskeytyskohdissa. Voit esimerkiksi näyttää kosketusta tukevat valikkokohdat, kun sivustoa käytetään mobiililaitteilla. Lisäksi voit kiinnittää objekteja sijainteihin tai sijoittaa objekteja uudelleen tiettyihin keskeytyskohtiin.

Lue lisää siitä, miten voit muuntaa nykyiset Adobe Muse -sivustosi käyttämään responsiivista asettelua. Muuntamalla sivustot käyttämään responsiivista asettelua voit varmistaa, että ne toimivat jatkossakin.

Miten voin muuntaa vaihtoehtoisia asetteluja responsiivisiksi?

Ennen kuin siirrät verkkosivustosi responsiiviseen asetteluun, tutustu Adobe Musen responsiivisten sivusuunnittelujen yleiskatsaukseen.

Aloita sivustosi siirtäminen responsiiviseen asetteluun seuraavalla tavalla:

  1. Avaa olemassa oleva verkkosivustosi.

  2. Avaa verkkosivustosi kukin sivu ja valitse Sivu > Sivun ominaisuudet.

    Sivun ominaisuuksien valitseminen
  3. Vaihda Asettelu-välilehdessä Kiinteä leveys -asetus Joustava leveys -asetukseksi. Tässä ikkunassa voit myös määrittää sivun minimi- ja maksimileveyden sekä marginaalit ja täytteet.

    Valitse OK.

    Kiinteän leveyden vaihtaminen joustavaksi leveydeksi
    Valitse Sivun ominaisuudet -ikkunassa Kiinteä leveys -asetuksen sijasta Joustava leveys.

  4. Varmista valitsemalla Tiedosto > Sivuston ominaisuudet, että lisäämäsi uudetkin sivut määritetään joustaviksi. Vaihda Kiinteä leveys -asetus Joustava leveys -asetukseksi tässä ikkunassa.

  5. Valitse sivun enimmäiskorkeus ja -leveys sekä asettelun vähimmäiskorkeus.

  6. Valitse OK.

  7. Avaa sivut joustavalla leveydellä siirtymällä sivupohjaan ja yksittäisille sivuille.

    Poista vieritystehosteet käytöstä, jotta responsiivinen asettelu toimii tehokkaasti. Jos haluat jättää vieritystehosteet haluamillesi sivuille, jatka kiinteän leveyden käyttöä näillä sivuilla.

    Kun avaat sivut joustavalla leveydellä, sivun objektien asetukset on määritetty oletusarvoisesti kiinteälle leveydelle. Lisäksi objektit on kiinnitetty vasemmalle.

  8. Määritä objektit joustaviksi, jotta niiden koko muuttuu selainleveyden mukaan. Napsauta kutakin joustavaksi määritettävää objektia hiiren kakkospainikkeella ja valitse Responsiivinen.

    Poista kiinnitys, jos haluat objektien olevan joustavia. Poista kiinnitys napsauttamalla objektia hiiren kakkospainikkeella ja valitsemalla Kiinnitä sivulle > Joustava.

  9. Pyyhkimen avulla voit katsella sivun asettelua eri selainleveyksillä.

    Huomaat, että kaikki widgetit eivät ole joustavia. Jos suunnittelu ei toimi jossain kohdassa näiden widgetien vuoksi, lisää keskeytyskohtia kyseisiin sivun leveyksiin. Sen jälkeen voit joko muuttaa widgetin koon tai piilottaa widgetin kyseisessä keskeytyskohdassa.

    Oletuksena keskeytyskohtapalkki ei ole näkyvissä, kun käsittelet aiemmassa versiossa luotua verkkosivustoa. Näytä keskeytyskohdat valitsemalla Näytä > Näytä keskeytyskohdat.

    Keskeytyskohtien näyttäminen Näytä-valikosta
    Valitse Näytä > Näytä keskeytyskohdat.

    Huomautus:

    Kun suunnittelet responsiivista asettelua, asettele leveimmät sivut ensin. Katsele sitten sivuja eri selainleveyksillä pyyhkimen avulla. Jos suunnittelu ei toimi, lisää keskeytyskohtia näille leveyksille. Muokkaa sitten asetteluasi näiden keskeytyskohtien osalta.

    Keskeytyskohtia kannattaa yleisesti ottaen lisätä sivuston asettelun eikä käyttäjien laitteiden näyttökokojen perusteella.

  10. Muokkaa objektien kokoa ja sijaintia ja muotoile teksti siten, että se näkyy hyvin aseteltuna kaikilla selainleveyksillä. Tietoja objektien asettelusta responsiivisissa asetteluissa on artikkelissa Objektien asettelu responsiivisessa sivusuunnittelussa.

    Huomautus:

    Kun asettelet objekteja, tarkista etäisyys objektien välillä sekä objektien ja selaimen reunan välillä. Sinun on ehkä säädettävä objektien sijainteja tai lisättävä ylimääräisiä keskeytyskohtia, jotta voit korjata keskeytyskohtien välillä ilmenevät suunnitteluongelmat.

  11. Tarkista tekstin kohdistus ja luettavuus kaikissa keskeytyskohdissa. Jos haluat kohdistaa tekstilaatikon uudelleen tai muotoilla tekstin tietyille sivuleveyksille, katso artikkeli Tekstin muotoilu responsiivisessa asettelussa.

  12. Esikatsele muutokset vetämällä pyyhintä tiettyihin keskeytyskohtiin, tai esikatsele muutokset verkkoselaimessa.

  13. Poista sivustostasi mahdolliset vaihtoehtoiset asettelut, jotka olet voinut luoda muille laitteille. Responsiivinen sivusuunnittelu mahdollistaa sen, että voit siirtää sivustosi ja ylläpitää kaikkien laitteiden versioita yhdellä piirtoalueella.

Responsiivinen verkkosivustosi on nyt valmis julkaistavaksi!

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ö