Les denne artikkelen for å lære hvordan du kan lage webområder for mobile enheter eller smarttelefoner.

Merk:

Adobe Muse legger ikke lenger til nye funksjoner, og kundestøtte opphører 26. mars 2020. Hvis du vil ha detaljert informasjon og hjelp, kan du se siden for tjenesteopphør for Adobe Muse.

Du kan opprette og designe webområder for mobiler ved hjelp av responsiv webdesign i Adobe Muse. Med responsiv layout kan du bruke en enkelt Muse-fil til å lage webområder for alle enheter, inkludert mobiler.

Du må først bestemme leserbredden som du ønsker å bruke når du utformer webområdet. Deretter kan du fortsette å designe webområdet. Hvis du vil ha mer informasjon om hvordan du oppretter mobile webområder ved hjelp av responsiv layout, kan du se Opprette responsive webområder.

Hvis du ønsker å designe en alternativ layout bare for webområder for mobil, bør du lese følgende artikkel.

Designe webområder for kun mobil

Med Adobe Muse kan du opprette områdelayouter for webinnhold som kan vises på skrivebordet, smarttelefoner og nettbrett. Ved hjelp av mobile designfunksjoner kan du opprette alternative layouter for telefoner og nettbrett samt for stasjonære datamaskiner.

Adobe Muse omfatter innstillinger som for eksempel veksling av 100 % bredde og Påklistret bunntekst-funksjonalitet, for å sikre at designen din gjengis godt på alle de forskjellige enhetsskjermene som er tilgjengelig på markedet i dag. Adobe Muse gjør det mulig å bruke kjente arbeidsflyter for å lage engasjerende design for alle mulige skjermdimensjoner.

Slik oppretter du en alternativ layout for mobiler:

  1. Åpne Adobe Muse, og klikk Fil > Nytt område.

    Velg Fast bredde for å opprette webområder for bestemte enheter.
    Velg Fast bredde for å opprette mobilwebområder.

  2. Velg Fast bredde, og klikk deretter Avanserte innstillinger i samme dialogboks.

    Avanserte innstillinger for nytt webområde
    Avanserte innstillinger for oppretting av et nytt webområde.

  3. Angi Maks. sidebredde eller den maksimale sidebredden.

    Finn riktig leserbredde for mobiltelefoner, og angi verdien.

  4. Angi verdier for Marg og Utfylling for mobilwebområdet. Skriv inn følgende opplysninger:

    • Sidebredde og Høyde: Her kan du angi startdimensjonene på siden. Muse øker høyden på siden automatisk når du legger til innhold, noe som betyr at en maksimal verdi ikke blir angitt for sidens høyde.
    • Spalter og Spaltebredde: Spalter deler et Muse-webområde visuelt inn i like store deler, slik at du kan justere designelementene nøyaktig. Muse angir Spaltebredde automatisk for et angitt antall spalter og spaltemellomrom.
    • Marger og Utfylling: Marger er et tomt område rundt webområdet utenfor designområdet. Utfylling kan brukes til å tømme området innenfor designperimeteret på websiden.

    Velg OK.

    Du kan begynne å designe oppsettet ditt for mobilwebområdet.

Legge til en Telefon-layout for et eksisterende Adobe Muse-webområde

Når du oppretter et nytt prosjekt, kan du designe hvilken som helst av layoutene først og deretter opprette ekstra layouter, som alle blir liggende i den samme *.muse-filen.  Når du publiserer eller eksporterer et webområde, genererer Adobe Muse en fil kalt sitemap.xml som inneholder en liste over alle sidene, for alle layouter. Filen Sitemap.xml lastes opp sammen med de andre innholdselementene for området. Den forbedrer et områdes søkemotoroptimalisering (SEO) ved å gjøre det lettere for søkemotorer å indeksere området, slik at sidene blir riktig rangert i søkeresultatene.

Hvis du vil lage en ny layout for mobiltelefoner basert på et eksisterende område, er en av de første tingene du må gjøre, å gå gjennom innholdet og finne ut hva du trenger å ha med i smarttelefonversjonen. Ettersom smarttelefonbrukere ofte er på farten og ser innholdet på en mindre skjerm, er det viktig å forenkle designen og bare vise det innholdet som er nyttig og lett å jobbe med på en berøringsskjerm.

  1. Åpne den eksisterende *.muse-filen som du vil legge til en alternativ Telefon-layout i.

  2. Åpne hver side i prosjektet, og klikk Side > Legg til alternativ layout > Telefon.

    Legge til alternativer for Telefon-layout
    Legge til Telefon-layout for å opprette mobilwebområde.

  3. Du kan bruke menyene til å velge en eksisterende layout som du vil kopiere. I anledningen denne artikkelen velger du Skrivebord for å kopiere Skrivebord-layouten til Telefon-layouten.

    Merk at du har mulighet til å kopiere områdeplanen, sideattributtene og webleserfyllet. Bruk standardinnstillingene for å kopiere informasjonen for det eksisterende området for datamaskiner (Skrivebord-layout) til Telefon-layouten.

  4. Klikk OK for å lukke dialogboksen og legge til Telefon-layouten.

    Muse oppretter en områdeplan for Telefon-layouten. Sidenavnene, områdets struktur og malsidens attributter blir kopiert. Telefon-layoutknappen har ikke lenger et plusstegn (+) ved siden av seg, fordi Telefon-layouten nå er lagt til i Muse-prosjektet.

    Du vil se at det faktiske sideinnholdet ikke blir lagt til på miniatyrsiden for Telefon-layouten. Dette er gjort med hensikt, slik at du kan kopiere akkurat det innholdet du vil ha med på hver av sidene i en mobillayout. Når du legger inn innholdet du vil ha med på hver ny side, kan du endre størrelsen på det slik at det passer inn på den mindre mobilskjermen.

    Du kan legge til nye sider ved å klikke plusstegnet til høyre for Hjem-siden. Når du konfigurerer områdekartet, kan du begynne å designe mobilopplevelsen.

    Les neste del for å få vite hvordan du konfigurerer malsider for Telefon-layout.

    Lag områdekartet for mobillayouten ved å legge til nye sider
    Lag områdekartet for mobillayouten ved å legge til nye sider.

Konfigurere malsiden og legge til vanlige elementer for webområder

  1. I Planlegg-visningen dobbeltklikker du telefonsiden i A-malen for å åpne den i Design-visningen.

  2. Åpne grensesnittet Webleserfyll for å angi et bakgrunnsbilde.

  3. Klikk Legg til bilde i Bilde-delen. Bla gjennom og velg filen du vil angi som bakgrunnsbilde.

    Alternativer for å legge til bilde
    Legge inn et bakgrunnsbilde på telefonmalsiden.

  4. Sett alternativet Tilpassing til Skaler for å fylle, og klikk den midterste posisjonen.

  5. Klikk det grå området utenfor siden eller et vilkårlig sted i Kontroll-panelet for å lukke Webleserfyll-grensesnittet.

Legge til hyperkoblinger for områdenavigering

Adobe Muse gjør at du enkelt kan koble til eksterne sider, nedlastbare filer, deler i websider, og mer ved hjelp av Hyperkoblinger. Det er viktig å sette opp riktig navigering på webområdet ditt for å sikre at en besøkende enkelt kan navigere gjennom sider på webområdet ditt. Godt utformet områdenavigering bidrar også til å optimalisere webområdet for søkemotorer. Hvis du vil ha mer informasjon, kan du se Opprette hyperkoblinger.

Rullegardinlisten Hyperkoblinger viser sider eller ankerkoblinger som er lagt til områdekartet ditt. Begynn å skrive navnet på siden eller ankeret for å søke etter de riktige koblingene. Du trenger bare å skrive inn de første bokstavene, og menyen Hyperkoblinger filtrerer resultatene og viser dem i en rullegardinliste. Dette gjør det enkelt å få tilgang til koblingene du vil bruke for å oppdatere raskt.

Hyperkobling-alternativer
Filtrer listen over koblinger ved å skrive inn de første bokstavene i menyfeltet Hyperkobling.

Legge til innhold på sidene i Telefon-layouten

Du begynner med å ferdigstille Hjem-siden.

  1. Klikk Innvendig (Telefon)-fanen. Kopier hele gruppen med fire nummererte knapper.
  2. Bruk funksjonen Gå til side til å gå til Hjem (Telefon)-siden og lime inn gruppen. Koblingene du la til i forrige del, beholdes, og dermed bruker både Hjem-siden og Innvendig-malsiden samme navigering.
  3. Bruk markeringsverktøyet til å plassere gruppen midt på Hjem-siden nær bunnen av bunnteksten.
  4. Klikk Scratch (Skrivebord)-fanen for å gå tilbake til Scratch-siden. Kopier tekstrammen til venstre, som sier at det finnes mer enn én måte å løse et problem på.
  5. Klikk Hjem (Telefon)-fanen for å lime inn tekstrammen. Bruk markeringsverktøyet til å plassere tekstrammen slik at den er sentrert over gruppen med knapper.
Hjem-sidedesignen er fullført
Hjem-sidedesignen er fullført.

Deretter legger du til sideinnholdet for Section 01-siden.

  1. Klikk Scratch (Skrivebord)-fanen for å gå tilbake til Scratch-siden. Merk det hvite, avrundede bakgrunnsrektangelet og de tre tekstrammene i den andre kapselen fra venstre. De tre tekstrammene inkluderer 01-sirkelen, plassholdertekst for section 01 og den oransje Phone-knappen. Kopier de valgte elementene.
  2. Trykk Kommando + J (Mac) eller Ctrl + J (Windows) og skriv inn de første bokstavene i Section 01. Klikk nedoverpilen for å merke telefonsiden Section 01, og trykk deretter Retur/Enter for å åpne den i Design-visning.
  3. Lim inn elementene på Section 01-siden i Telefon-layouten. Bruk markeringsverktøyet til å midtstille dem på siden ved hjelp av hjelpelinjer som vises midlertidig.

Formålet med Section 01-siden er å gi en kort innføring i virksomheten og gjøre det enkelt for mobilbrukere å ringe virksomheten. Når du designer mobilwebområder, kan du legge til en ny type kobling som gjør at besøkende kan trykke på skjermen og bruke smarttelefonens oppringingsfunksjon til å ringe et nummer. Dette er en enestående mobilområdefunksjon, fordi den gir potensielle kunder muligheten til å ringe en virksomhet på en svært enkel måte.

Hvis du vil legge til en kobling i en mobillayout for å ringe et telefonnummer, gjør du følgende:

  1. Bruk markeringsverktøyet til å velge Telefon-knappen.
  2. I menyfeltet Koblinger skriver du inn tel:+1 og deretter et telefonnummer, på denne måten
    tel:+14155551234

Dette er formatet som mobilweblesere gjenkjenner for telefonnummerkoblinger.

  1. Trykk Retur eller Enter for å lagre koblingen.

Merk: Hvis du foretrekker å opprette en e-postkobling, kan du skrive inn følgende format i menyfeltet Hyperkobling:
mailto:designers@design-is-fun.com

Etter at du har lagt til koblingen på Phone-knappen, er sidedesignen Section 01 fullført.

  1. Klikk Scratch (Skrivebord)-fanen for å gå tilbake til Scratch-siden. Merk det hvite, avrundede bakgrunnsrektangelet, den grønne 02-sirkelen, tekstrammen Section 02, det innebygde kartet og den grønne Map-knappen. Kopier de valgte elementene.
  2. Trykk Kommando + J (Mac) eller Ctrl + J (Windows) og skriv inn de første bokstavene i Section 02. Klikk nedoverpilen for å merke telefonsiden Section 02, og trykk deretter Retur/Enter for å åpne den i Design-visning.
  3. Lim inn elementene du kopierte i trinn 1, på Section 02 -siden i Telefon-layouten. Bruk markeringsverktøyet til å midtstille dem på siden ved hjelp av justeringshjelpelinjer.

Section 02-siden inneholder innebygd HTML-kode som ble generert på webområdet for Google Maps for å opprette et interaktivt kart.

Hvis du fulgte fremgangsmåten i opplæringen Komme i gang med Muse, vil du huske at du kopierte Google Map-kildekoden fra Google-webområdet og brukte den innebygde HTML-funksjonen i Muse til å lime den inn på siden.

Heldigvis inneholder Google Maps-koden allerede støtte for fingerbevegelser på berøringsskjermer, og dermed kan besøkende med enheter enkelt samhandle med kartet. I dette eksempelprosjektet er størrelsen på kartdimensjonene allerede endret.

Hvis du imidlertid må endre størrelse på dimensjonene for innebygd HTML-innhold i prosjektene dine, kan du høyreklikke innholdet og velge HTML for å vise koden i HTML-vinduet. Du kan endre høyde- og breddeverdiene i koden for å endre størrelsen på kartet slik at det passer på en mindre skjerm.

Endre størrelse på dimensjonene for innebygde HTML-objekter i koden
Hvis du må endre størrelse på innebygde HTML-objekter, kan du oppdatere dimensjonene i koden.

Hvis du åpnet Rediger HTML-vinduet, klikker du OK for å lukke det uten å gjøre endringer.

  1. Velg Kart-knappen.

Denne gangen skal du legge til en kobling til et eksternt webområde (Google Maps) for å gjøre det enkelt for mobilbrukere å gå til fullversjonen av kartet i et nytt webleservindu.

  1. Kopier koblingen nedenfor og lim den inn i feltet i Koblinger-menyen:

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. Klikk Koblinger-ordet til venstre for Koblinger-menyen. I dialogboksen som vises, merker du av for Åpne koblingen i et nytt vindu eller en ny fane. I feltet Verktøytips skriver du inn følgende tekst: Map to Adobe Fremont (Kart til Adobe Fremont).
Hyperkobling-alternativer
Angi at koblingen skal åpnes i et nytt webleservindu, og legg til et verktøytips.

  1. Klikk utenfor dialogboksen Koblinger for å lukke den.

Deretter legger du til sideinnholdet for Section 03-siden.

  1. Klikk Scratch (Skrivebord)-fanen for å gå tilbake til Scratch-siden. Merk det hvite, avrundede bakgrunnsrektangelet, den lilla 03-sirkelen, tekstrammen Section 03, kontaktskjemaet og Submit-knappen (Send). Kopier de valgte elementene.
  2. Trykk Kommando + J (Mac) eller Ctrl + J (Windows), og skriv inn de første bokstavene i Section 03. Klikk nedoverpilen for å merke telefonsiden Section 03, og trykk deretter Retur/Enter for å åpne den i Design-visning.
  3. Lim inn objektene du kopierte i trinn 1, på Section 03-siden i Telefon-layouten. Bruk markeringsverktøyet til å midtstille dem på siden ved hjelp av justeringshjelpelinjene. Stilene som brukes på kontrollprogrammet for Kontaktskjema på skrivebordet, beholdes når de kopieres til Telefon-layouten. Den eneste endringen som ble gjort for å klargjøre skjemaet for en mobillayout, var å endre størrelse på skjemaet og skjemaelementene slik at de passer på en mindre skjerm.

Section 03-siden inneholder et kontrollprogram for Kontaktskjema som bruker Business Catalyst-skript på serversiden og en database til å behandle de innsendte skjemadataene. Når du klikker Publiser og laster opp områdefilene fra Muse, fungerer skjemafunksjonaliteten automatisk.

Merk: Du kan bruke andre tjenesteleverandører som vert for det endelige Muse-webområdet, men vær oppmerksom på at du må bruke ekstra koding for å få kontaktskjemaer til å fungere hvis ikke Business Catalyst-serverne fungerer som vert.

I dette eksempelprosjektet har ikke kontaktskjemaet CAPTCHA aktivert. CAPTCHA er en innstilling på Valg-menyen for kontrollprogrammer for Kontaktskjema som du kan legge til når du vil bekrefte at skjemaet ble sendt inn av en person og ikke et skript eller en "spam-robot". CAPTCHA-grensesnittet viser et bilde med en rekke tegn som krever at besøkende skriver inn den tilsvarende strengen for å kunne sende meldingen via skjemaet. Innsending av skjemaer med hindring for spam-roboter kan være plagsomt, men det er også viktig å vurdere områdets brukervennlighet på en mobiltelefon. Hvis du gjør skjemaet for vanskelig å fylle ut, kan det hende at besøkende lar være å sende inn meldingen.

Section 03-siden er nå fullført. Du behøver ikke å legge til en kobling til Send-knappen, fordi knappen allerede er konfigurert som en del av kontrollprogrammet for Kontaktskjema.

Den siste siden i Telefon-layouten, Section 04, inneholder et kontrollprogram for Lysbildefremvisning. Kontrollprogrammer i Muse er designet og testet for å fungere med alle moderne datamaskin- og mobilweblesere. Dermed trenger du ikke å endre noe for at lysbildefremvisningen skal fungere på en berøringsskjerm.

Gjør følgende for å kopiere innholdet fra Scratch-siden i Skrivebord-layouten til Section 04-siden i Telefon-layouten:

  1. Klikk Scratch (Skrivebord)-fanen for å gå tilbake til Scratch-siden. Merk det hvite, lange bakgrunnsrektangelet, den røde 04-sirkelen, kontrollprogrammet Lysbildefremvisning og tekstrammen Section 04. Du kan bruke markeringsverktøyet til å klikke og dra over alle objekter for å merke dem samtidig. Kopier de valgte elementene.
  2. Trykk Kommando + J (Mac) eller Ctrl + J (Windows), og skriv inn de første bokstavene av Section 04. Klikk nedoverpilen for å merke telefonsiden Section 04, og trykk deretter Retur/Enter for å åpne den i Design-visning.
  3. Lim inn objektene du kopierte i trinn 1, på Section 03-siden i Telefon-layouten. Bruk markeringsverktøyet til å midtstille dem på siden ved hjelp av justeringshjelpelinjene. Stilene som brukes i kontrollprogrammet for Kontaktskjema på skrivebordet, beholdes når de kopieres til Telefon-layouten. Den eneste endringen som ble gjort for å klargjøre skjemaet for en mobillayout var å endre størrelse på skjemaet og skjemaelementene slik at de passer på en mindre skjerm. Når du legger til kontrollprogrammer med interaktive funksjoner (for eksempel kontrollprogrammer for Lysbildefremvisning) i mobillayouter du oppretter i Muse, vil du legge merke til at Valg-panelet inneholder alternativet Aktiver sveip. Denne innstillingen er aktivert som standard slik at eventuelle kontrollprogrammer du legger til i mobildesignene, automatisk konfigureres slik at besøkende kan trykke og bruke bevegelser på berøringsskjermer. Section 04-siden inneholder et kontrollprogram for Lysbildefremvisning som viser det tilsvarende bildet når det trykkes på en miniatyr. Lysbildefremvisningen er konfigurert til å bruke en horisontal overgang til å veksle mellom bilder i galleriet. Dette eksempelet krever brukermedvirkning for å vise bildene, men hvis du vil, kan du angi at kontrollprogrammet for Lysbildefremvisning automatisk skal startes. Dermed vises bildene automatisk når siden lastes.

Merk: Hvis du konfigurerer kontrollprogrammer for lysbildefremvisning for å bruke overgangene Uttoning, Horisontal eller Vertikal, aktiverer koden i Muse automatisk fingersveipebevegelsen slik at besøkende kan sveipe over skjermen for å bla gjennom bildene.

I den neste delen, Opprette mobillayoutdesigner i Muse, lærer du hvordan du enkelt oppdaterer innholdselementer på tvers av alle mobilplattformer, og hvordan du publiserer Muse-området for hver mobillayout.

Oppdatere og optimalisere innholdselementer for det mobile webområdet

Sammenlignet med stasjonære datamaskiner (Skrivebord-layout) har nettbrett og smarttelefoner en mye mer begrenset prosessor, lavere tilkoblingshastigheter og mindre lagringskapasitet. Det fører til at du må være ekstra nøye når du utvikler og sender områdedesign til mobilenheter.

Muse inneholder funksjoner som kan hjelpe deg med å optimalisere grafikken som vises i mobillayoutene, for å sørge for at området lastes raskt og fungerer optimalt.

  1. Trykk Kommando/Kontroll + 7 for å vise Skrivebord-layouten, og dobbeltklikk deretter siden A-mal (for Skrivebord) for å åpne den i Design-visningen.
  2. Åpne Innholdselementer-panelet ved å klikke panelets fane i panelsettet for å gjøre den aktiv. Eller velg Vindu > Innholdselementer hvis panelet er lukket.
  3. Merk det store bakgrunnsbildet av de grønne bakkene. Innholdselementet er uthevet i Innholdselementer-panelet.
  4. Klikk navnet på innholdselementet, background.jpg, for å utvide listen over forekomster som brukes på området. Vær oppmerksom på at bakgrunnsbildefilen er oppført tre ganger, med to forskjellige ikoner, noe som angir at den brukes både på Telefon-layouten og Skrivebord-layouten.
Innholdselementer-panelet
Sjekk forekomstene av filen background.jpg i Innholdselementer-panelet for å få informasjon om hvor innholdselementet finnes på området.

På dette lille eksempelområdet går det ganske greit å administrere listen over innholdselementer, men når du bygger større områder, kan listen over innholdselementer bli svært stor og vanskeligere å skanne.

Hvis du vil gjøre det enklere å navigere i listen over innholdselementer, kan du merke det første elementet for hvert innholdselement og deretter klikke pilen til venstre for å skjule settet. Klikk valget på nytt når du vil utvide for å vise hele listen over forekomster der innholdselementet brukes i områdeprosjektet.

Hvis du vil finne innholdselementene som ble brukt i en bestemt layout, klikker du toppen av spalten helt til høyre for Innholdselementer-panelet som viser ikonene Skrivebord, Nettbrett eller Telefon. Dette fører til at listen over innholdselementer blir sortert slik at innholdselementene for hver layout vises i et konsolidert sett.

Innholdselementer-panelet
Klikk toppteksttitlene i en hvilken som helst spalte i Innholdselementer-panelet for å sortere listen over innholdselementer etter den typen.

Hvis du vil gjøre endringer i en grafikk som oppdaterer alle forekomster av grafikken (i alle layouter), kan du høyreklikke et navn på et innholdselement og velge Rediger original i menyen som vises.

Velge Rediger original for å oppdatere innholdselementet for hele området
Velg Rediger original for å oppdatere innholdselementet for hele området.

Den opprinnelige filen du plasserte, kan åpnes i Photoshop, Fireworks eller bilderedigeringsprogrammet du brukte til å opprette filen. Dermed kan du raskt gjøre endringer.

Når du lagrer den reviderte opprinnelige filen og går tilbake til Muse, viser elementet i Innholdselementer-panelet ikonet Ikke synkronisert for å angi at grafikkversjonen på området ikke samsvarer med kildefilen lenger. Høyreklikk filen på nytt, og velg Oppdater for å oppdatere alle iterasjoner av grafikken som skal bruke den nye versjonen.

Bruk oppdateringsfunksjonen til å revidere alle forekomster av innholdselementet som brukes på området
Bruk oppdateringsfunksjonen til å revidere alle forekomster av innholdselementet som brukes på området.

Forhåndsvise mobillayouter

Du kan bruke flere valg til å forhåndsvise områdedesignene du oppretter:

Når du er i Design-visningen i Skrivebord-layouten, kan du klikke Forhåndsvis for å se at den innebygde Webkit-baserte emulatoren gjengir HTML, CSS og JavaScript. Ved hjelp av Forhåndsvisning kan du se hvordan layouten vises i en webleser, før du publiserer et område og sjekker det på Internett med en tilkoblet enhet.

Når du er i Design-visningen for Telefon-layouten, kan du klikke Forhåndsvisning for å vise Telefon-layouten. Bruk menyen Forhåndsvisningsstørrelse til å velge mellom iPhone 4, iPhone 5, Samsung Galaxy S III og Nokia Lumia 920 for å vise layouten på forskjellige skjermstørrelser.

Forhåndsvise mobillayouter
Menyen Forhåndsvisningsstørrelse vises når du forhåndsviser sider i Telefon- eller Nettbrett-layouten.

Klikk ikonet til høyre for vinduet Forhåndsvisningsstørrelse for å veksle mellom å vise layouten i stående eller liggende modus.

Forhåndsvisningsstørrelsen inkluderer forhåndsdefinerte høyde- og breddeforhold som omfatter de fleste vanlige skjermstørrelser for mobiltelefoner.

Noen av smarttelefonskjermene er bredere, for eksempel Motorola Droid. Hvis en besøkende har en bredere skjerm, skalerer Viewport-funksjonen i Muse automatisk Telefon-layoutbredden slik at den tilpasses til den tilgjengelige skjermstørrelsen.

Når du er i forhåndsvisningsmodus, kan du klikke koblinger og navigere på området. Du kan rulle, noe som simulerer et sveip med fingeren, men hvis du vil teste det ordentlig, må du teste det på selve enheten.

Hvis du klikker i-knappen ved siden av menyen Forhåndsvisningsstørrelse i forhåndsvisningsmodus, vises det en merknad med en kobling som beskriver et Adobe-verktøy kalt Edge Inspect. Ved hjelp av Edge Inspect kan du bruke en Chrome-webleser til å koble mobilenheter til datamaskinen, og deretter synkronisere dem med innholdet som vises på datamaskinen (Skrivebord-layout) i Chrome-webleseren.

Ved hjelp av Edge Inspect kan du bruke Chrome og alternativet Forhåndsvisning i webleser i Adobe Muse til å vise et område på skrivebordet, og den samme siden vises også automatisk på de tilkoblede enhetene. (Sørg for at du angir Chrome som standardnettleser).

Hvis du vil, kan du også kjøpe et tredjepartsverktøy kalt Reflection, som du kan bruke til å vise en emulering av enheten (som er tilkoblet ved hjelp av den samme nettverkstilkoblingen) på skjermen på den stasjonære datamaskinen. Når du bruker smarttelefonen eller nettbrettet til å navigere på et område, gjenspeiler emulatoren enhetens berøringsskjerm.

Tilleggsfunksjoner relatert til mobillayout

Påklistrede bunntekster

Som i tidligere versjoner av Muse kan du dra hjelpelinjer for å definere området under siden og angi bunntekstområdet. Du kan også angi ethvert innholdselement som et bunntekstelement, noe som fører til at elementet vises under minimumssidehøyden som er angitt i områdeegenskapene, eller under det eksisterende sideinnholdet, avhengig av hvilken av de to som er lengst.

Definisjon av bunntekstinnhold er svært nyttig når et område har sider med ulik lengde, fordi bunntekstplasseringen justeres vertikalt for å vises konsekvent langs bunnen av sidene uten å overlappe sideinnholdet.

Alternativet Påklistret bunntekst er merket av som standard. Dette er en funksjon som er spesielt designet for besøkende med store datamaskinskjermer (Skrivebord-layout). Som oftest vil du beholde alternativet Påklistret bunntekst aktivert for webområdene dine, fordi det gjør at bunnteksten forblir på ønsket plassering selv om webleservinduet er betydelig større enn websidedesignen, på samme måte som det er på en enhet med Apple Cinema Display.

Hvis du vil se hvordan dette fungerer, kan du forhåndsvise et Muse-område i en webleser og zoome ut på siden. Vær oppmerksom på at hvis du gjør sideinnholdet for lite i forhold til webleservinduet, vil området under bunnteksten vise webleservinduet i stedet for å beholde bunnteksten i ett med siden nederst.

Når du oppretter nye områder i Muse, vil du se at alternativet Påklistret bunntekst er aktivert i dialogboksen Nytt område.

Alternativer for Nytt område
Det er automatisk merket av for Påklistret bunntekst når du oppretter nye områder.

Generelt sett er det best å bruke funksjonen Påklistret bunntekst når du designer områder. Hvis du imidlertid legger merke til at lengden på sider vises mye lengre enn ønsket (fordi et område har minimalt sideinnhold og sidene er relativt korte), kan du alltids deaktivere funksjonen ved å fjerne merket i avmerkingsboksen i dialogboksen Egenskaper for side.

Deaktiver Påklistret bunntekst fra sideegenskapene.
Når du har opprettet et webområde, oppdaterer du sideegenskapene og deaktiverer alternativet Påklistret bunntekst.

Festede elementer

Koden som genereres av Muse, er testet for å sikre at den vises og fungerer som forventet på tvers av alle moderne weblesere og plattformer.

Én av webstandardene som er forskjellig mellom weblesere på datamaskiner og mobile weblesere, er støtte for festede sideelementer. Når du designer områder for weblesere på en PC, kan du merke et element og bruke valget i Kontroll-panelet til å feste det i webleservinduet. Festing er nyttig for konsekvent navigering. Ofte er det også nyttig når du vil beholde et element på samme del av en lengre side, uavhengig av hvor langt ned besøkende på siden ruller.

Da dette ble skrevet, støttet ikke mobile weblesere festede objekter. Det fører til at du må finne på alternative strategier for festede objekter når du designer layouter for telefon og nettbrett.

Når du designer Telefon- eller Nettbrett-layoutene, vil du legge merke til at festevalgene er nedtonet og inaktive.

Alternativer for festede elementer
Festegrensesnittet i Kontroll-panelet er ikke tilgjengelig når du designer mobillayouter.

Publisere et område med mobillayouter

Du kan publisere områder med flere layouter i Muse ved hjelp av den samme metoden du vanligvis bruker til å publisere Skrivebord-områder. Det er nyttig å publisere testområder og deretter bruke mobilenheter til å vise den aktive versjonen av designene på mindre skjermer.

Klikk Publiser eller velg Fil > Last opp til FTP-vert for å laste opp områdefilene til vertsserveren.

Når du publiserer et Muse-område med flere layouter, blir det publisert med én URL-adresse. Dermed trenger du bare å registrere ett domenenavn i følgende format:

http://www.mitt-område.com

Når du publiserer et område med to eller tre forskjellige layouter, genererer Muse koden for området, som inkluderer registreringsskript som identifiserer hvilken type datamaskin eller enhet, samt weblesertype, som den besøkende bruker til å få tilgang til siden.

Registreringskoden fastslår plattform- og webleserversjonen, og viser deretter den riktige layouten automatisk. Du trenger ikke å gjøre noe for at besøkende som bruker et nettbrett, skal se nettbrettdesignen, og at besøkende som bruker smarttelefoner, skal se telefondesignen. Alt dette skjer i bakgrunnen.

Du kan bruke de nye mobillayoutfunksjonene i Muse til å optimalisere mobillayoutene slik at enhetsbrukere ikke laster ned store filer unødig. Den alternative layoutfunksjonaliteten egner seg bare for de mindre bildefilene som har fått endret størrelse, og dermed fungerer layouten bra på tvers av alle plattformer og weblesere.

Hvis du vil finne ut mer om hvordan du arbeider med Muse, kan du lese artiklene og opplæringsmaterialet på Hjelp for Adobe Muse.

Bruke Gå til side til å kopiere områdeinnhold mellom layouter

Klikk Mal (Skrivebord)-fanen for å gjøre malsiden for Skrivebord-layouten aktiv i Design-visning.

Muse gjør det enkelt å veksle mellom layouter ved hjelp av det inkluderte navigeringsverktøyet Gå til side. Denne knappen vises i Design-visning i alle prosjekter som har flere layouter.

  1. Klikk knappen Gå til side.
Knappen Gå til side
Knappen Gå til side ser ut som en pil som peker til en side.

Når du arbeider med flere layouter, er det nyttig å kunne gå raskt frem og tilbake mellom to eller flere sider. Dermed blir det enkelt å kopiere og lime inn innhold.

Merk: I tillegg til å klikke knappen Gå til side kan du også bruke hurtigtaster: Kommando + J (Mac) eller Ctrl + J (Windows).

Dialogboksen Gå til side vises. Den inneholder et tekstfelt du kan bruke til å skrive inn de første bokstavene i et sidenavn på området, slik at du enkelt kan gå til den siden uten å måtte gå tilbake til Planlegg-visningen hver gang.

  1. Skriv inn de tre første bokstavene av sidenavnet du vil finne. I dette eksempelet skriver du inn de tre første bokstavene i ordet Mal: mal.

Feltet skanner området for eventuelle samsvarende sidenavn og viser dem i listen nedenfor.

  1. Klikk nedoverpilen to ganger for å merke A-mal (Telefon)-siden, og trykk deretter Retur/Enter for å åpne den.

Mal (Telefon)-siden åpnes i Design-visning og er klar til å redigeres.

En annen metode for å veksle mellom de ulike layoutene på et område er å bruke de nye hurtigtastene:

  • Kommando/Ctrl + 7 viser Skrivebord-layouten
  • Kommando/Ctrl + 8 viser Nettbrett-layouten
  • Kommando/Ctrl + 9 viser Telefon-layouten

Disse snarveiene er bare aktive når du redigerer et område som har en tilsvarende layout. Eksperimenter med å bruke disse nye snarveiene til å utvikle en arbeidsflyt du foretrekker når du veksler mellom layouter og bestemte sider.

Deretter oppretter du en sekundær maltelefonside og legger til designelementene.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet