Tämän artikkelin ohjeiden avulla voit luoda sivustoja mobiililaitteille ja älypuhelimille.

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.

Voit luoda ja suunnitella verkkosivuja mobiililaitteille Adobe Musen responsiivisella web-suunnittelulla. Responsiivisessa suunnittelussa voit luoda verkkosivustoja kaikille laitteille, myös mobiililaitteille, käyttämällä yksittäistä Muse-tiedostoa.

Sinun on ensin määritettävä, mille selainleveydelle haluat suunnitella sivuston. Sen jälkeen voit jatkaa sivuston suunnittelua. Lisätietoja mobiilisivustojen luomisesta responsiivisella asettelulla on artikkelissa Responsiivisten sivustojen luominen.

Jos haluat suunnitella vaihtoehtoisen asettelun vain mobiilikäyttöön tarkoitetuille sivustoille, tutustu seuraavaan artikkeliin.

Vain mobiililaitteille tarkoitettujen verkkosivustojen suunnittelu

Adobe Musella voit luoda web-sisällön esittämiseen eri sivuasetteluja tietokoneille, älypuhelimille ja tableteille. Mobiilisuunnittelutoiminnoilla voit luoda vaihtoehtoisia sivuasetteluja puhelimille ja tableteille sekä tietokoneiden näytöille.

Voit määrittää Adobe Musessa erilaisia asetuksia, kuten 100 % leveyden sekä Alareunassa pysyvä alatunniste -asetuksen. Niiden ansiosta suunnittelemasi sivusto näyttää hyvältä monenlaisissa laitteissa. Adobe Musen avulla voit luoda näyttäviä suunnitteluja kaikenkokoisille näytöille käyttämällä tuttuja työnkulkuja.

Luo vaihtoehtoinen asettelu mobiililaitteille seuraavasti:

  1. Avaa Adobe Muse ja valitse Tiedosto > Uusi sivusto.

    Luo sivustoja tietyille laitteille valitsemalla Kiinteä leveys.
    Luo mobiilisivustoja valitsemalla Kiinteä leveys.

  2. Valitse Kiinteä leveys ja valitse sitten samasta valintaikkunasta Lisäasetukset.

    Uuden sivuston lisäasetukset
    Lisäasetukset uutta sivustoa luotaessa.

  3. Määritä sivun enimmäisleveys.

    Määritä asianmukainen selainleveys matkapuhelimille ja syötä haluamasi arvo.

  4. Syötä mobiilisivustosi marginaali- ja täytearvot. Anna seuraavat tiedot:

    • Sivun leveys ja korkeus: voit määrittää sivun aloitusmitat. Muse kasvattaa sivun korkeutta automaattisesti, kun lisäät sisältöä, ja siksi sivun korkeudelle ei määritetä enimmäisarvoa.
    • Sarakkeet ja sarakkeen leveys: sarakkeet jakavat Muse-verkkosivun yhtä suurin osiin, minkä ansiosta pystyt kohdistamaan elementit tarkasti. Muse määrittää automaattisesti sarakkeen leveyden sarakemäärän ja sarakevälin perusteella.
    • Marginaalit ja täyte: marginaalit tarkoittavat tyhjää aluetta verkkosivun ympärillä, suunnittelualueen ulkopuolella. Täytteen avulla voit lisätä tyhjää tilaa suunnittelualueen ulkorajan sisäpuolelle.

    Valitse OK.

    Voit aloittaa mobiilisivuasettelujen suunnittelun.

Puhelimen sivuasettelun lisääminen olemassa olevaan Adobe Muse -sivustoon

Kun luot uuden projektin, voit suunnitella minkä tahansa asettelun ensin ja luoda sitten lisäasetteluja samaan .Muse-tiedostoon.  Kun julkaiset tai viet sivuston, Adobe Muse luo automaattisesti tiedoston nimeltä sitemap.xml, joka sisältää luettelon kaikkien sivuasettelujen kaikista sivuista. Tiedosto sitemap.xml ladataan palvelimeen muiden sivustokohteiden kanssa. Se parantaa sivuston hakukoneoptimointia (SEO) auttamalla hakukoneita indeksoimaan sivuston, minkä ansiosta kaikki sivut otetaan oikealla tavalla huomioon hakutuloksissa.

Jos haluat luoda uuden sivuasettelun puhelimia varten, sinun on ensin arvioitava olemassa olevan sivuston sisältöä ja päätettävä, mitkä elementit ovat välttämättömiä älypuhelinten käyttäjille. Koska älypuhelinten käyttäjät ovat usein liikkeessä ja käyttävät sisältöä pienessä näytössä, suunnittelua on syytä yksinkertaistaa. Puhelinasettelussa kannattaa näyttää vain ehdottomasti hyödyllistä sisältöä, jota on helppo käyttää kosketusnäytössä.

  1. Avaa olemassa oleva .Muse-tiedosto, johon haluat lisätä vaihtoehtoisen puhelinasettelun.

  2. Avaa projektisi jokainen sivu ja valitse Sivu > Lisää vaihtoehtoinen sivuasettelu > Puhelin.

    Lisää puhelinasettelu -valinnat
    Luo mobiilisivusto lisäämällä puhelinasettelu.

  3. Voit valita valikosta aiemmin luodun sivuasettelun ja kopioida sen. Valitse näitä ohjeita varten Työpöytä. Tällöin työpöytäsivuasettelu kopioidaan puhelinsivuasettelun pohjaksi.

    Voit kopioida Sivuston suunnittelu-, Sivun määritteet- sekä Selaimen täyttö -ominaisuudet. Jätä voimaan oletusasetukset, joiden mukaisesti aiemmin luodun työpöytäsivuston tiedot kopioidaan puhelinsivuasetteluun.

  4. Sulje valintaikkuna valitsemalla OK ja lisää puhelinsivuasettelu.

    Muse luo sivuston suunnittelun puhelinsivuasettelua varten. Sivujen nimet, sivuston rakenne ja sivupohjan määritteet kopioidaan. Puhelin-sivuasettelupainikkeen nimen kohdalla ei enää näy plusmerkkiä (+), koska puhelinsivuasettelu on lisätty Muse-projektiin.

    Sivun varsinaista sisältöä ei lisätä puhelinsivuasettelun sivuminiatyyriin. Tämän ansiosta voit kopioida vain haluamasi sisällön mobiilisivuasettelun kullekin sivulle. Kun tuot haluamasi sisällön kullekin uudelle sivulle, voit muuttaa sen kokoa siten, että se sopii mobiilinäytön pienempiin mittoihin.

    Voit lisätä uusia sivuja napsauttamalla kotisivun oikealla puolella olevaa plusmerkkiä. Kun olet määrittänyt sivukartan, voit aloittaa mobiilikäyttökokemuksen suunnittelun.

    Seuraavasta osiosta saat tietoa siitä, kuinka voit määrittää puhelinasettelun sivupohjia.

    Luo sivukartta mobiilisivuasettelulle lisäämällä uusia sivuja
    Luo sivukartta mobiilisivuasettelulle lisäämällä uusia sivuja.

Sivupohjan määrittäminen ja yleisten sivuelementtien lisääminen

  1. Kaksoisnapsauta Suunnittele-näkymässä A-sivupohjaa, jotta se avautuu Muoto-näkymässä.

  2. Määritä taustakuva Selaimen täyttö -toiminnolla.

  3. Valitse Kuva-osiossa Lisää kuva. Selaa sen tiedoston kohdalle, jota haluat käyttää taustakuvana, ja valitse se.

    Lisää kuva -asetukset
    Lisää taustakuva puhelimen sivupohjaan.

  4. Valitse Sovitus-valikossa Sovita täyttöön ja napsauta keskisijaintia.

  5. Sulje Selaimen täyttö -valintaikkuna napsauttamalla harmaata aluetta sivun ulkopuolella tai mitä tahansa kohtaa hallintapaneelista.

Hyperlinkkien lisääminen navigointiin sivustossa

Adobe Musella voit helposti linkittää ulkoisia sivuja, ladattavia tiedostoja, verkkosivujen sisällä olevia osioita ja muuta sisältöä käyttämällä Linkit-luetteloa. Sujuvan navigoinnin määrittäminen sivustoosi on tärkeää, jotta kävijät pystyvät helposti liikkumaan sivulta toiselle. Hyvin muodostettu sivustonavigointi auttaa myös optimoimaan verkkosivuasi hakukoneita varten. Lisätietoja on artikkelissa Hyperlinkkien luominen.

Avattavassa Linkit-luettelossa näkyvät sivustokarttaasi lisätyt sivut ja ankkurilinkit. Voit etsiä oikeita linkkejä syöttämällä ensimmäiset kirjaimet sivun tai ankkurin nimestä. Sinun tarvitsee syöttää vain ensimmäiset kirjaimet. Linkit-valikko suodattaa tulokset ja esittää ne avattavassa luettelossa. Tämän toiminnon ansiosta on helppoa löytää nopeasti linkit, joita haluat muokata.

Hyperlinkit-asetukset
Suodata linkkien lista kirjoittamalla ensimmäiset kirjaimet Hyperlinkki-valikkokenttään.

Sisällön lisääminen puhelimen sivuasettelun sivuille

Aloitat viimeistelemällä etusivun.

  1. Napsauta Interior (Puhelin) -välilehteä. Kopioi koko neljästä numeroidusta painikkeesta koostuva ryhmä.
  2. Siirry Home (puhelin) -sivulle Siirry sivulle -toiminnon avulla ja liitä ryhmä. Edellisessä osiossa lisäämäsi linkit säilyvät ennallaan, joten nyt navigointi on sama sekä Home-sivulla että Interior-sivupohjassa.
  3. Siirrä ryhmä valintatyökalulla Home-sivun keskiosaan, lähelle alatunnisteen alareunaa.
  4. Palaa luonnossivulle napsauttamalla scratch (Työpöytä) -välilehteä. Kopioi vasemmanpuoleisessa kehyksessä oleva tekstikenttä, jossa lukee: There's more than one way to solve a problem.
  5. Napsauta Home (Puhelin) -välilehteä ja liitä tekstikehys. Sijoita tekstikehys paikalleen valintatyökalulla siten, että se on keskitetty painikeryhmän yläpuolelle.
Etusivun suunnittelu on nyt valmis
Etusivun suunnittelu on nyt valmis.

Seuraavaksi lisäät sisältöä Section 01 -sivulle.

  1. Palaa Scratch-sivulle napsauttamalla Scratch (Työpöytä) -välilehteä. Valitse valkoinen pyöristetty taustasuorakulmio ja kolme tekstikehystä toisesta kehyksestä vasemmalla. Kolmeen tekstikehykseen sisältyvät 01-ympyrä, osion 01 paikkamerkkinä käytetty teksti sekä oranssi Phone-painike. Kopioi valitut kohteet.
  2. Paina näppäinyhdistelmää komento+J (Mac) tai Ctrl+J (Windows) ja kirjoita ensimmäiset kirjaimet nimestä Section 01. Valitse Section 01 -puhelinsivu painamalla alanuolta ja avaa se sitten Muoto-näkymässä painamalla Return-/Enter-näppäintä.
  3. Liitä elementit puhelimen sivuasettelun Section 01 -sivulle. Keskitä ne sivulle valintatyökalulla. Käytä apuna hetkellisesti näkyviin tulevia apuviivoja.

Section 01 -sivun tarkoitus on tarjota lyhyt esittely yrityksestä ja helpottaa mobiilikäyttäjien puhelinsoittoja yritykseen. Kun suunnittelet mobiilisivustoja, voit lisätä uudentyyppisen linkin, jota koskettamalla vierailija voi avata älypuhelimen soittotoiminnon. Tämä ominaisuus sopii loistavasti mobiilisivustoille, koska se tarjoaa potentiaalisille asiakkaille hyvin helpon tavan soittaa yritykseen.

Lisää mobiilisivuasetteluun soittolinkki puhelinnumeroon seuraavasti:

  1. Valitse Phone-painike valintatyökalulla.
  2. Syötä Linkit-valikkokenttään tel:+1 ja sitten puhelinnumero tähän tapaan:
    tel:+14155551234

Kun puhelinnumeron linkki on tässä muodossa, mobiiliselaimet tunnistavat sen.

  1. Tallenna linkki Return-/Enter-näppäimellä.

Huomautus: jos haluat luoda sähköpostilinkin, voit kirjoittaa Hyperlinkki-valikkokenttään tämäntapaisen linkin:
mailto:designers@design-is-fun.com

Kun olet lisännyt linkin Phone-painikkeeseen, Section 01 -sivun suunnittelu on valmis.

  1. Palaa Scratch-sivulle napsauttamalla Scratch (Työpöytä) -välilehteä. Valitse valkoinen pyöristetty taustasuorakulmio, vihreä 02-ympyrä, Section 02 -tekstikehys, upotettu kartta ja vihreä Map-painike. Kopioi valitut kohteet.
  2. Paina näppäinyhdistelmää komento+J (Mac) tai Ctrl+J (Windows) ja kirjoita ensimmäiset kirjaimet nimestä Section 02. Valitse Section 02 -puhelinsivu painamalla alanuolta ja avaa se sitten Muoto-näkymässä painamalla Return-/Enter-näppäintä.
  3. Liitä vaiheessa 1 kopioidut elementit puhelimen sivuasettelun Section 02 -sivulle. Keskitä ne sivulle valintatyökalulla tasausapuviivojen avulla.

Section 02 -sivu sisältää upotettua HTML-koodia, joka on luotu Google Maps -sivustossa vuorovaikutteista karttaa varten.

Jos olet jo käynyt läpi Musen käytön aloittamista esittelevän opastusohjelman, saatat muistaa, että kopioit Google Maps -lähdekoodin Googlen verkkosivustosta ja liitit sen sivulle Musen HTML-koodin upotustoiminnolla.

Google Maps -koodi sisältää valmiiksi tuen kosketusnäyttöjen sormieleille, jotta mobiililaitteita käyttävät vierailijat voivat helposti käyttää karttaa. Tässä esimerkkiprojektissa kartan mittoja on jo muutettu.

Jos sinun tarvitsee jossakin projektissasi muuttaa upotetun HTML-sisällön mittoja, voit napsauttaa sisältöä hiiren kakkospainikkeella ja tarkastella koodia HTML-ikkunassa valitsemalla HTML. Voit sovittaa kartan pienempään näyttöön muuttamalla koodin korkeus- ja leveysarvoja.

Upotettujen HTML-elementtien mittojen muuttaminen koodissa
Jos haluat muuttaa upotettujen HTML-elementtien kokoa, voit muokata koodissa olevia mittoja.

Jos avasit Muokkaa HTML-koodia -ikkunan, sulje se muutoksia tekemättä valitsemalla OK.

  1. Valitse Map-painike.

Tällä kertaa lisäät linkin ulkoiseen verkkosivustoon (Google Mapsiin), minkä ansiosta mobiilikäyttäjien on helppo avata kartan täysikokoinen versio uudessa selainikkunassa.

  1. Kopioi alla oleva linkki ja liitä se Linkit-valikon kenttään:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Napsauta Linkit-valikon vasemmalla puolella olevaa sanaa Linkit. Valitse esiin tulevassa valintaikkunassa valintaruutu Avaa linkki uuteen ikkunaan tai välilehteen. Kirjoita lisäksi Työkaluvihje-kenttään seuraava teksti: Map to Adobe Fremont.
Hyperlinkkiasetukset
Määritä linkki avautumaan uudessa selainikkunassa ja lisää työkaluvihje.

  1. Sulje Linkit-valintaikkuna napsauttamalla sen ulkopuolella.

Seuraavaksi lisäät sisältöä Section 03 -sivulle.

  1. Palaa Scratch-sivulle napsauttamalla Scratch (Työpöytä) -välilehteä. Valitse valkoinen pyöristetty taustasuorakulmio, violetti 03-ympyrä, Section 03 -tekstikehys, yhteydenottolomake ja Submit-painike. Kopioi valitut kohteet.
  2. Paina näppäinyhdistelmää komento+J (Mac) tai Ctrl+J (Windows) ja kirjoita ensimmäiset kirjaimet nimestä Section 03. Valitse Section 03 -puhelinsivu painamalla alanuolta ja avaa se sitten Muoto-näkymässä painamalla Return-/Enter-näppäintä.
  3. Liitä vaiheessa 1 kopioidut elementit puhelimen sivuasettelun Section 03 -sivulle. Keskitä ne sivulle valintatyökalulla tasausapuviivojen avulla. Yhteydenottolomake-widgetin tietokoneversiolle määritetty muotoilu säilyy, kun se kopioidaan puhelimen sivuasetteluun. Ainoa mobiilisivuasettelua varten tehtävä muutos on se, että lomake ja lomakkeen elementit sovitetaan pienemmälle näytölle.

Section 03 -sivu sisältää Yhteydenottolomake-widgetin, joka käyttää Business Catalyst -palvelun palvelinpuolen komentosarjoja ja tietokantaa lähetettyjen lomaketietojen käsittelyyn. Kun napsautat Julkaise-painiketta ja lataat sivuston tiedostot Musesta, lomake toimii automaattisesti.

Huomautus: vaikka voitkin käyttää muita palveluntarjoajia valmiin Muse-verkkosivustosi ylläpitopalveluina, huomaa, että jos yhteydenottolomakkeita ei käytetä Business Catalyst -palvelimissa, niiden toiminta edellyttää palveluntarjoajilta ylimääräistä koodia.

Tässä esimerkkiprojektissa ei käytetä yhteydenottolomakkeen CAPTCHA-toimintoa. CAPTCHA on Asetukset-valikosta löytyvä Yhteydenottolomake-widgetien toiminto, jonka voit ottaa käyttöön, jos haluat varmistaa, että lomakkeen on lähettänyt ihminen eikä komentosarja tai niin sanottu roskapostirobotti. CAPTCHA tuo näkyviin merkkisarjan, joka vierailijan on kirjoitettava oikein, jotta viestin lähettäminen lomakkeen avulla onnistuu. Vaikka roskapostirobottien lähettämät viestit voivat ärsyttää, on tärkeää myös ottaa huomioon sivuston käytettävyys mobiililaitteilla. Jos lomakkeen täyttäminen on liian vaikeaa, vierailijat eivät ehkä halua lähettää viestiään.

Section 03 -sivu on nyt valmis. Linkkiä ei tarvitse lisätä Submit-painikkeeseen, koska painike on jo määritetty osana Yhteydenottolomake-widgetiä.

Puhelimen sivuasettelun viimeinen sivu, Section 04, sisältää Diaesitys-widgetin. Musen widgetit on suunniteltu ja testattu siten, että ne toimivat kaikilla nykyaikaisilla tietokone- ja mobiiliselaimilla. Näin ollen diaesitys toimii kosketusnäytössä ilman, että sinun täytyisi tehdä muutoksia.

Kopioi sisältö näiden vaiheiden mukaisesti tietokoneille suunnitellun sivuasettelun luonnossivulta puhelinsivuasettelun Section 04 -sivulle.

  1. Palaa Scratch-sivulle napsauttamalla Scratch (Työpöytä) -välilehteä. Valitse pitkä valkoinen taustasuorakulmio, punainen 04-ympyrä, Diaesitys-widget ja Section 04 -tekstikehys. Valintatyökalulla voit valita kaikki elementit kerralla napsauttamalla ja vetämällä niiden päältä. Kopioi valitut kohteet.
  2. Paina näppäinyhdistelmää komento+J (Mac) tai Ctrl+J (Windows) ja kirjoita ensimmäiset kirjaimet nimestä Section 04. Valitse Section 04 -puhelinsivu painamalla alanuolta ja avaa se sitten Muoto-näkymässä painamalla Return-/Enter-näppäintä.
  3. Liitä vaiheessa 1 kopioidut elementit puhelimen sivuasettelun Section 03 -sivulle. Keskitä ne sivulle valintatyökalulla tasausapuviivojen avulla. Yhteydenottolomake-widgetin tietokoneversiolle määritetty muotoilu säilyy, kun se kopioidaan puhelimen sivuasetteluun. Ainoa mobiilisivuasettelua varten tehtävä muutos on se, että lomake ja lomakkeen elementit sovitetaan pienemmälle näytölle. Kun lisäät vuorovaikutteisia ominaisuuksia sisältäviä widgetejä (kuten Diaesitys-widgetejä) Musessa luomiisi mobiilisivuasetteluihin, Asetukset-paneelissa näkyy valinta Ota pyyhkäisy käyttöön. Tämä asetus on oletuksena käytössä, joten kaikki mobiilisuunnitteluihin lisäämäsi widgetit on automaattisesti määritetty siten, että vierailijat voivat koskettaa niitä ja käyttää eleitä kosketusnäytöillä. Section 04 -sivu sisältää Diaesitys-widgetin, joka miniatyyria kosketettaessa esittää vastaavan kuvan. Diaesitys on määritetty käyttämään vaakasuuntaista siirtymää gallerian kuvien välillä. Tämä esimerkki edellyttää kuvien esittämiseen käyttäjän vuorovaikutusta. Halutessasi voit kuitenkin määrittää Diaesitys-widgetin toistamaan kuvia automaattisesti. Tällöin kuvat näytetään sarjassa sivun latauduttua.

Huomautus: jos määrität diaesityswidgetit käyttämään Häivytys-, Vaakasuuntainen- tai Pystysuuntainen-siirtymää, Musen koodi ottaa automaattisesti käyttöön pyyhkäisyeleen, jotta vierailijat voivat selata diaesityksen kuvia kosketusnäyttöään pyyhkäisemällä.

Seuraavassa osiossa, Mobiililaitteiden sivuasettelujen luominen Musessa, opit muokkaamaan kohteita helposti kaikilla mobiilialustoilla ja perehdyt Muse-sivuston jokaisen mobiilisivuasettelun julkaisuun.

Mobiilisivuston resurssien päivittäminen ja optimointi

Tietokoneisiin verrattuna tablettien ja älypuhelinten suoritin on rajoittuneempi, yhteysnopeudet ovat hitaampia ja tallennustilaa on vähemmän. Tämän seurauksena vaaditaan erityistä harkintaa, kun sivustosuunnitteluja luodaan ja välitetään mobiililaitteille.

Museen sisältyy toimintoja, jotka auttavat optimoimaan mobiilisivuasettelujen grafiikkaa. Tämä varmistaa, että sivusto latautuu nopeasti ja toimii riittävän hyvin.

  1. Tuo tietokoneille suunniteltu sivuasettelu näkyviin näppäinyhdistelmällä komento/Ctrl+7 ja avaa sitten tietokoneasettelun A-sivupohja Muoto-näkymässä kaksoisnapsauttamalla sitä.
  2. Avaa ja aktivoi Kohteet-paneeli napsauttamalla sen välilehteä paneelijoukossa. Jos se on suljettuna, valitse Ikkuna > Kohteet.
  3. Valitse suuri taustakuva, jossa on vihreitä kukkuloita. Kohde näkyy korostettuna Kohteet-paneelissa.
  4. Laajenna sivustossa käytettyjen esiintymien lista napsauttamalla kohteen nimeä background.jpg. Taustakuvatiedosto näkyy luettelossa kolmesti kahdella eri kuvakkeella, mikä ilmaisee, että sitä käytetään sekä puhelimen että tietokoneen sivuasetteluissa.
Kohteet-paneeli
Tarkista tiedoston background.jpg esiintymät Kohteet-paneelissa. Tällä tavoin saat tiedon siitä, missä sivuston osissa kohdetta on käytetty.

Tämän pienen esimerkkisivuston tapauksessa kohteiden luettelo on melko helposti hallittavissa, mutta laajojen sivustojen luettelot voivat olla pitkiä ja vaikealukuisia.

Voit helpottaa kohteiden luettelon selaamista valitsemalla kunkin kohteen ensimmäisen nimikkeen ja kutistamalla joukon napsauttamalla vasemmalla olevaa nuolta. Napsauta sitä uudelleen, kun haluat laajentaa ja tuoda näkyviin esiintymien koko luettelon tässä sivustoprojektissa.

Jos haluat paikallistaa tietyssä sivuasettelussa käytetyt kohteet, napsauta oikeassa reunassa olevan sarakkeen yläosaa, jossa näkyvät kuvakkeet Työpöytä, Tablet tai Puhelin. Tällöin kohteiden luettelo lajitellaan siten, että kunkin sivuasettelun kohteet näkyy yhtenäisenä joukkona.

Kohteet-paneeli
Lajittele tietyntyyppiset kohteet napsauttamalla haluamaasi Kohteet-paneelin otsikkoa.

Jos haluat tehdä grafiikkaan muutoksen, joka päivittyy automaattisesti kaikkiin esiintymiin (kaikissa sivuasetteluissa), voit napsauttaa kohteen nimeä hiiren kakkospainikkeella ja valita avautuvasta valikosta Muokkaa alkuperäistä.

Päivitä kohde koko sivustoon valitsemalla Muokkaa alkuperäistä
Päivitä kohde koko sivustoon valitsemalla Muokkaa alkuperäistä.

Alkuperäinen sijoittamasi tiedosto avautuu Photoshopissa, Fireworksissa tai muussa kuvankäsittelyohjelmassa, jolla olet luonut sen. Näin voit tehdä muutoksia nopeasti.

Kun tallennat muokatun alkuperäisen tiedoston ja palaat Museen, Kohteet-paneelin kohteen kohdalla näkyy Ei synkronoitu -kuvake, joka ilmaisee, ettei sivustossa käytetyn grafiikan versio enää vastaa lähdetiedostoa. Napsauta tiedostoa uudelleen hiiren kakkospainikkeella ja valitse Päivitä. Tämä päivittää grafiikan kaikki esiintymät uuden version mukaisiksi.

Käytä Päivitä-toimintoa, kun haluat päivittää kaikki sivustossa käytetyt kohteen esiintymät
Käytä Päivitä-toimintoa, kun haluat päivittää kaikki sivustossa käytetyt kohteen esiintymät.

Mobiilisivuasettelujen esikatselu

Voit esikatsella luomiasi sivustosuunnitteluja eri tavoin:

Kun olet pöytäkoneille suunnitellun version Muoto-näkymässä, napsauta Esikatsele-painiketta. Tällöin Musen Webkit-pohjainen emulaattori tulkitsee HTML:n, CSS:n ja JavaScriptin. Esikatselun avulla voit tarkistaa, miltä sivuasettelut näyttävät selaimessa, ennen kuin julkaiset sivuston ja tarkistat verkkoversion toiminnan jollakin laitteella.

Tuo näkyviin puhelinsivuasettelun esikatselu Puhelin-version Muoto-näkymässä valitsemalla Esikatsele. Kun valitset Esikatselukoko-valikossa iPhone 4, iPhone 5, Samsung Galaxy S III tai Nokia Lumia 920, näet, miltä sivuasettelu näyttää eri kokoisissa näytöissä.

Mobiilisivuasettelun esikatselu
Esikatselukoko-valikko tulee näkyviin, kun sivuja esikatsellaan puhelin- tai tablet-sivuasettelulla.

Vaihda sivuasettelun vaaka- ja pystysuuntaista tilaa napsauttamalla Esikatselukoko-ikkunan oikealla puolella olevaa kuvaketta.

Esikatselukokoon on määritetty valmiiksi korkeuden ja leveyden suhde, joka vastaa yleisimpiä mobiilipuhelinten näyttökokoja.

Joidenkin älypuhelinten, kuten Motorola Droidin, näytöt ovat leveitä. Jos vierailijalla on keskimääräistä leveämpi näyttö, Musen Viewport-toiminto mukauttaa puhelimen sivuasettelun leveyden automaattisesti siten, että se täyttää käytettävissä olevan näyttöpinta-alan.

Esikatselutilassa voit napsauttaa linkkejä ja navigoida sivustossa. Voit myös vierittää sivuja, mikä vastaa pyyhkäisyeleitä. Varsinainen testaus on kuitenkin syytä tehdä mobiililaitteella.

Jos napsautat Esikatselukoko-valikon vieressä olevaa i-painiketta esikatselutilassa, näet linkin sisältävän huomautuksen, joka kertoo Adoben Edge Inspect -työkalusta. Edge Inspectin avulla voit yhdistää mobiililaitteita tietokoneeseesi Chrome-selainlaajennuksella ja synkronoida laitteet tietokoneesi Chrome-selaimella katsotun sisällön kanssa.

Edge Inspectin ansiosta voit käyttää Chromea ja Adobe Musen Esikatsele selaimessa -toimintoa tietokoneellasi ja sama sivu näytetään yhdistetyissä laitteissa automaattisesti. (Varmista, että Chrome on määritetty oletusselaimeksi.)

Halutessasi voit myös ostaa kolmannen osapuolen työkalun nimeltä Reflection, jonka avulla näet samaan verkkoon yhdistetyn laitteen emulaation tietokoneesi näytöllä. Kun käytät sivustoa älypuhelimella tai tabletilla, emulaattori peilaa laitteesi kosketusnäyttöä.

Mobiilisivuasettelujen lisätoiminnot

Alareunassa pysyvät alatunnisteet

Kuten Musen aiemmissa versiossa, voit apuviivoja vetämällä määrittää sivun alle jäävän osuuden ja alatunnistealueen. Voit myös määrittää minkä tahansa sisältöelementin alatunnistekohteeksi. Tämä saa sen näkymään Sivuston asetukset -valikossa määritetyn sivun vähimmäiskorkeuden tai olemassa olevan sivusisällön alapuolella riippuen siitä, kumpi edellä mainituista on pitempi.

Alatunnistesisällön määrityksestä on paljon hyötyä, jos sivustossa on eri mittaisia sivuja. Tällöin alatunnisteen paikka mukautetaan pystysuunnassa aina sivujen alareunaan, eikä se peitä sivun sisältöä.

Oletuksena Alareunassa pysyvät alatunnisteet -asetus on käytössä. Tämä toiminto on suunniteltu erityisesti suuria näyttöjä käyttäviä vierailijoita varten. Useimmissa tapauksissa kannattaa pitää alareunassa pysyvien alatunnisteiden asetus käytössä sivustoja luotaessa, koska silloin alatunniste pysyy halutussa sijainnissa, vaikka selainikkuna on huomattavasti verkkosivua suurempi, kuten Apple Cinema Display -näytössä.

Näet, kuinka tämä toimii, kun esikatselet Muse-sivustoa selaimessa ja loitonnat näkymää. Jos sivun sisältö on liian pieni suhteessa selainikkunaan, alatunnisteen alapuolella olevalla alueella näkyy selainikkuna sen sijaan, että alatunniste olisi aivan näytön alareunassa.

Kun luot uusia sivustoja Musella, saatat huomata, että Alareunassa pysyvät alatunnisteet -asetus on käytössä Uusi sivusto -valintaikkunassa.

Uusi sivusto -asetukset
Alareunassa pysyvät alatunnisteet -valintaruutu on automaattisesti valittuna, kun luot uusia sivustoja.

Yleisesti ottaen Alareunassa pysyvät alatunnisteet -toimintoa kannattaa käyttää, kun suunnittelet sivustoja. Jos kuitenkin huomaat, että sivut näyttävät paljon haluttua pidemmiltä (koska sivustossa on vain vähän sisältöä ja sivut ovat melko lyhyitä), voit aina poistaa tämän toiminnon käytöstä poistamalla sen valinnan Sivuston asetukset -valintaikkunassa.

Poista Alareunassa pysyvät alatunnisteet -asetus käytöstä.
Kun olet luonut sivuston, muokkaa sivun ominaisuuksia ja poista käytöstä Alareunassa pysyvät alatunnisteet -asetus.

Kiinnitetyt elementit

Musen luoma koodi on testattu siten, että se näkyy ja käyttäytyy odotetulla tavalla kaikilla nykyaikaisilla selaimilla ja alustoilla.

Eräs tietokone- ja mobiiliselainten välisten web-standardien eroista on tuki kiinnitetyille sivuelementeille. Kun suunnittelet sivustoja tietokoneselaimille, voit valita elementin ja kiinnittää sen selainikkunaan hallintapaneelin toiminnolla. Kiinnittämisestä on hyötyä yhdenmukaisen navigoinnin kannalta. Siitä on myös apua silloin, kun haluat elementin pysyvän samassa paikassa pitkällä sivulla riippumatta siitä, vierittääkö vierailija sivua alaspäin.

Tätä kirjoitettaessa mobiiliselaimet eivät tue kiinnitettyjä elementtejä yhdenmukaisesti. Tästä syystä tarvitaan vaihtoehtoisia strategioita kiinnitettyjen elementtien käyttöön puhelin- ja tablettisivuasettelujen suunnittelussa.

Kun suunnittelet Puhelin- tai Tablet-sivuasettelua, huomaat, että Kiinnitä-valinnat näkyvät harmaina ja niitä ei voi käyttää.

Kiinnitetyt elementit -asetukset
Hallintapaneelin Kiinnitä-toiminto ei ole käytettävissä mobiilisivuasettelujen suunnittelussa.

Mobiilisivuasetteluja sisältävän sivuston julkaisu

Voit julkaista useita sivuasetteluja sisältäviä sivustoja Musessa samalla tavoin kuin pöytäkoneille suunniteltuja sivustoja. On hyödyllistä julkaista sivustosta kokeiluversioita ja testata näitä verkkoversioita mobiililaitteiden pienemmillä näytöillä.

Lataa sivuston tiedostot ylläpitopalvelimeen napsauttamalla Julkaise-painiketta tai valitsemalla Tiedosto > Lataa FTP-isäntäkoneeseen.

Kun julkaiset useita sivuasetteluja sisältävän Muse-sivuston, se lähetetään verkkoon yksittäisellä URL-osoitteella. Näin ollen sinun on rekisteröitävä vain yksi verkkotunnus tähän tapaan:

http://www.minun-sivustoni.com/

Kun julkaiset kaksi tai kolme erilaista sivuasettelua sisältävän sivuston, Muse luo sivustolle koodin, joka sisältää tunnistuskomentosarjoja. Ne määrittävät, minkälaista tietokonetta tai laitetta ja minkätyyppistä selainta vierailija käyttää sivun katseluun.

Tunnistuskoodi määrittää alustan ja selainversion ja näyttää sitten automaattisesti oikean sivuasettelun. Sinun ei tarvitse tehdä mitään sen varmistamiseksi, että tabletia käyttävät vierailijat näkevät tablet-sivuasettelun ja älypuhelinta käyttävät vierailijat näkevät puhelinsivuasettelun. Kaikki tapahtuu kulissien takana.

Musen uudet mobiilisivuasettelutoiminnot mahdollistavat mobiilisivuasettelujen optimoinnin siten, että näiden laitteiden käyttäjien ei tarvitse ladata tarpeettoman suuria tiedostoja. Vaihtoehtoinen sivuasettelutoiminto lähettää vain pienennettyjä kuvatiedostoja. Tämän ansiosta sivuston käyttö on sujuvaa kaikilla alustoilla ja selaimilla.

Lisätietoja Musen käytöstä saat artikkeleista ja opastusohjelmista, jotka on julkaistu Adobe Musen ohjesivulla.

Sivuston sisällön kopioiminen sivuasettelujen välillä Siirry sivulle -toiminnolla

Avaa tietokoneille suunnitellun sivuasettelun sivupohja Muoto-näkymässä napsauttamalla Sivupohja (Työpöytä) -välilehteä.

Musessa on helppo siirtyä sivupohjien välillä käyttämällä Siirry sivulle -navigointitoimintoa. Tämä painike näkyy Muoto-näkymässä kaikissa projekteissa, joihin sisältyy useita sivuasetteluja.

  1. Napsauta Siirry sivulle -painiketta.
Siirry sivulle -painike
Siirry sivulle -painike näyttää nuolelta, joka osoittaa sivua.

Jos sinulla on työn alla useita sivuasetteluja, nopeasta siirtymisestä kahden tai useamman sivun välillä on hyötyä, kun haluat helposti kopioida ja liittää sisältöä.

Huomautus: Siirry sivulle -painikkeen ohella voit käyttää näppäinkomentoa komento+J (Mac) tai Ctrl+J (Windows).

Siirry sivulle -valintaikkuna tulee näkyviin. Se sisältää tekstikentän, johon voit syöttää haluamasi sivunimen ensimmäiset kirjaimet. Tällä tavoin voit helposti siirtyä kyseiselle sivulle palaamatta toistuvasti Suunnittele-näkymään.

  1. Kirjoita kolme ensimmäistä kirjainta sen sivun nimestä, jonka haluat löytää. Kirjoita tätä esimerkkiä varten kolme ensimmäistä kirjainta sanasta Master: mas.

Sivustosta etsitään kentän arvoa vastaavia sivunimiä, jotka esitetään hakukentän alla olevassa listassa.

  1. Valitse A-sivupohja (puhelin) painamalla alanuolta kahdesti ja avaa se painamalla sitten Return-/Enter-näppäintä.

Sivupohja (puhelin) -sivu avautuu muokattavaksi Muoto-näkymässä.

Toinen kätevä tapa siirtyä eri sivupohjien välillä on käyttää uusia näppäimistöpikavalintoja:

  • Komento/Ctrl+7 tuo näkyviin tietokoneille suunnitellun sivuasettelun.
  • Komento/Ctrl+8 tuo näkyviin tablet-sivuasettelun.
  • Komento/Ctrl+9 tuo näkyviin puhelimille suunnitellun sivuasettelun.

Nämä pikavalinnat ovat käytettävissä vain silloin, kun muokattavaan sivustoon sisältyy vastaava sivuasettelu. Kokeile näiden uusien pikavalintojen käyttöä ja valitse sivuasettelujen ja tiettyjen sivujen välillä siirtymiseen työnkulku, joka sopii sinulle parhaiten.

Seuraavaksi luot toisen sivupohjan ja lisäät suunnitteluelementit.

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ö