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.
I et flytende design kan det hende at en enkel layout av objekter og tekst ikke passer til alle skjermstørrelser. Det kan hende at bilder, tekst, kontrollprogrammer og skjemaer blir omplassert ved ulike avbruddspunkter. Rammene kan havne utenfor sidebredden, objekter kan overlappe med hverandre eller klarheten til teksten kan bli redusert. Bilder, tekst, kontrollprogrammer og skjemaer må omplasseres på ulike avbruddspunkter. Derfor er det viktig å tenke nøye gjennom hvordan du plasserer objekter og formaterer tekst, slik at layouten vises godt i forskjellige skjermstørrelser.
Når du har designet siden din, kan du bruke markøren til å forhåndsvise layouten i forskjellige skjermstørrelser. Hvis du ser behovet for å legge ut objektene annerledes på bestemte leserbredder, kan du legge til avbruddspunkter her.
Les videre for å finne ut mer om avbruddspunkter og hvordan du kan utforme layouten effektivt med responsiv layout i Adobe Muse.
Avbruddspunkt i en responsiv layout representerer de ulike leserbreddene i bildepunkter. Med avbruddspunkter kan du visualisere designen i ulike leserbredder og teste hvordan objektene på en side responderer når du endrer leserbredden.
Et nytt område i Adobe Muse inneholder som standard et avbruddspunkt for datamaskiner (960 bildepunkters bredde). Du kan begynne med å designe layouten din for denne bredden. Når du fullfører designen, kan du forhåndsvise layouten i ulike bredder ved hjelp av markøren. Når du gjør dette, kan du se og notere deg hvilken bredde designen bryter på. Dette kan du for eksempel se ved at en tekstlinje deles i to, eller ved at bilder som var plassert i en rad, blir stablet vertikalt. I slike tilfeller trenger bredden flere avbruddspunkter. Når du har lagt til de påkrevde avbruddspunktene, kan du finjustere designen slik at objektene vises på en måte du er fornøyd med.
På slutten legger Adobe Muse til en tilsvarende mediespørring-erklæring for webområdet ditt for hvert avbruddspunkt. Mediespørringer er en CSS3-modul som lar innhold gjengis for å tilpasses ulike skjermstørrelser. De fleste moderne nettlesere kan tolke mediespørringene som hører til disse avbruddspunktene. Når brukere viser webområdet ditt på ulike enheter, velger nettleseren den mest passende mediespørringen og den tilhørende designlayouten.
-
Klikk
avbruddspunktlinjen. Vær oppmerksom på at et nytt avbruddspunkt er lagt til på avbruddspunktlinjen. Du kan også se leserbredden til avbruddspunktet.På samme måte kan du legge til avbruddspunkter hvor som helst på avbruddspunktlinjen for å angi bestemte leserbredder.
Når du klikker et avbruddspunkt, fylles det aktive avbruddspunktet med farge. De andre avbruddspunktene blir grå.
Merk:
Du kan også legge til avbruddspunkter ved å plassere bibliotekselementer med avbruddspunkter i Design-visningen din. Åpne bibliotekspanelet, marker objektet du vil sette inn, klikk på + -symbolet ved siden av objektet, og dra objektet over i Design-visningen.
Du kan legge til avbruddspunkter ti både malsider og individuelle sider. Når du legger til avbruddspunkter for en individuell side, brukes avbruddspunktverdiene bare for den bestemte siden.
Når du legger til avbruddspunkter på en malside, kan du velge å bruke ethvert avbruddspunkt du trenger på de enkelte sidene. Avbruddspunktene fra malsider vises som små trekanter på de enkelte sidene. Du trenger bare å klikke plusstegnet (+) for å aktivere disse avbruddspunktene på de individuelle sidene.
Se for deg dette scenariet. Når du lager layout for webområdet, kan det hende du vil legge til bestemte avbruddspunkter for telefoner. Du kan legge til passende avbruddspunkter på malsiden, slik at de er tilgjengelige på de enkelte sidene. Når du designer de enkelte sidene videre, kan du plassere avbruddspunktene på disse sidene med et enkelt klikk.
Merk:
Når du bruker en annen malside på en enkeltside, blir avbruddspunktene fra den gamle malsiden erstattet med avbruddspunktene fra den nye malsiden.
-
Hvis du vil vise eller redigere avbruddspunktfargen, høyreklikker du avbruddspunktet og velger Egenskaper for avbruddspunkt, eller dobbeltklikk avbruddspunktet.
Du kan også endre verdiene for avbruddspunktfarge, sidebredde, høyde og marg i dette vinduet.
Endre farge og verdier for avbruddspunkter ved hjelp dialogboksen Egenskaper for avbruddspunkt.
Merk:
Du kan ikke redigere avbruddspunktene på malsiden fra de enkelte sidene.
-
Hvis du vil slette et avbruddspunkt, utfører du ett av følgende trinn:
- Klikk X-en på venstre side av det aktive avbruddspunktet.
- Høyreklikk avbruddspunktlinjen, og velg Slett avbruddspunkt.
Når du sletter et avbruddspunkt, blir de tilhørende layoutendringene og tekstinnstillingene for avbruddspunktet også slettet.
Klikk X-symbolet for å slette avbruddspunktene.
Høyreklikk og slett avbruddspunkt.
Merk:
Du kan ikke slette et avbruddspunkt på malsiden fra de enkelte sidene.
Fra gjeldende avbruddspunkt kan du skifte til neste eller forrige avbruddspunkt. Slik går du til forrige eller neste avbruddspunkt:
- Windows-brukere:
- Forrige avbruddspunkt – trykk Ctrl + Skift + 5
- Neste avbruddspunkt – trykk Ctrl + Skift + 6
- Forrige avbruddspunkt – trykk Ctrl + Skift + 5
- MAC-brukere:
- Forrige avbruddspunkt – trykk Cmnd + Skift + 5
- Neste avbruddspunkt – trykk Cmnd + Skift + 6
- Forrige avbruddspunkt – trykk Cmnd + Skift + 5
Du kan bruke følgende alternativer for å sikre at layouten ser bra ut på alle avbruddspunkter:
- Vise/skjule objekter: Du kan også skjule et objekt i et avbruddspunkt mens du velger å vise det i et annet. Hvis du vil ha mer informasjon, kan du se Vise eller skjule objekter.
- Plassere objekter forskjellig i ulike avbruddspunkter: Du kan plassere ett enkelt objekt forskjellig i ulike avbruddspunkter. Hvis du vil ha mer informasjon, kan du se Plassere objekter i responsive webdesign.
- Bruke responsiv festing: Du kan bestemme hvilke av objektene som skal være statiske, og hvilke som skal være flytende. Du kan feste de statiske objektene slik at de forblir i samme posisjon i alle avbruddspunkter. Hvis du vil ha mer informasjon, kan du se Responsiv festing.
- Endre størrelse på objekter: Du kan gi et objekt ulik størrelse i hvert enkelt avbruddspunkt. Du kan også angi at størrelsen på et objekt automatisk justeres etter bredden på siden. Hvis du vil ha mer informasjon om å endre størrelsen på objekter, kan du se Endre størrelse på objekter.
- Formatere tekst for ulike avbruddspunkter: Du kan formatere tekst på forskjellig måte i forskjellige avbruddspunkter for å øke klarheten og lesbarheten til teksten i forskjellige leserbredder. Hvis du vil ha mer informasjon, kan du se Formatere tekst i responsiv layout.
Forestill deg følgende: Du har satt inn en tradisjonell meny for datamaskiner. Denne menyen opptar imidlertid altfor mye plass på skjermene til nettbrett. En lagdelt meny eller et trekkspill fungerer bedre for nettbrett.
Det er enkelt å håndtere slike tilfeller under design av responsive webområder i Adobe Muse. Du kan velge å vise en tradisjonell meny for skrivebordsvisningen og en lagdelt meny for nettbrett, som vist i følgende bilder.
-
Høyreklikk objektet du ønsker å skjule, og klikk Skjul i avbruddspunkter.
Objektet er skjult i den gjeldende avbruddspunktvisningen, men er synlig i andre avbruddspunkter. Hvis du i stedet vil skjule objektet i alle de andre avbruddspunktene, klikker du Skjul i andre avbruddspunkter. Senere kan du vise objektet i bestemte avbruddspunkter ved hjelp av Lag-panelet.
Skjule objekter i avbruddspunkter
Du kan plassere objekter på forskjellige måter i forskjellige avbruddspunktvisninger. Du kan for eksempel plassere bilder horisontalt i skrivebordsvisningen, mens du kan plassere bilder vertikalt i mobilvisningen.
Adobe Muse husker posisjonen til objektene og viser det tilsvarende når skjermstørrelsen endres.
-
Merk:
Når du ordner objekter, må du huske å kontrollere avstanden mellom objekter og avstanden mellom objektet og kanten av webleseren. Det kan hende du må justere objektplasseringer eller legge til ytterligere avbruddspunkt for å løse designproblemer som oppstår mellom avbruddspunkt.
Du kan flytte en gruppe av objekter sammen i en responsiv layout. Når du vil flytte en gruppe vertikalt justerte objekter, trenger du kun å markere det øverste objektet. Du vil se at det vertikale håndtaket vises i venstre marg i Adobe Muse.
Når du klikker håndtaket og flytter det opp eller ned, vil du legge merke til at det markerte objektet og alle objektene under det flytter seg som en gruppe.
Du kan legge til et sett med avbruddspunkter ved å plassere et bibliotekelement med avbruddspunkter i designvisningen. Åpne Bibliotek-panelet (Vinduer > Bibliotek). Velg elementet som du vil legge til på siden. Klikk plusstegnet ved siden av elementet, og dra elementet til designvisningen.
Legg merke til at det automatisk legges til et sett med avbruddspunkter på siden. Hvis du allerede har lagt til avbruddspunkter på siden, og hvis du legger til et bibliotekelement med avbruddspunkter, blir alle avbruddspunktene på siden aktivert.
Du kan bruke bibliotekelementer med avbruddspunkter til raskt å kopiere avbruddspunkter mellom ulike sider og til og med mellom ulike .muse-filer.
Hvis du ønsker å gjøre visse objekter i Adobe Muse statiske, kan du bruke festing. Du kan feste et objektet til enten en side eller en webleser:
- Feste objekter til en webleser: Du kan feste et objekt til webleseren hvis du ønsker at objektet skal være fast selv når du bruker rullelinjen i webleseren. For eksempel en menylinje som er fast selv om du ruller opp eller ned. Hvis du vil vite mer om å feste objekter til webleseren, kan du se denne koblingen.
- Feste objekter til side: Du kan feste et objekt til en side hvis du ønsker at objektet skal forbli fast på webområdet. For eksempel en firmalogo som alltid vises i øvre høyre hjørne på webområdet.
Les videre for å lære hvordan du fester et objekt til en side i responsiv design.
Merk:
For å avgjøre om du vil feste et objekt, kan du bruke markøren og vise siden i ulike leserbredder. Hvis du fortsatt vil feste et objekt på siden, kan du gjøre følgende:
-
Du kan feste objektet til en side på en av følgende måter:
- Fest til venstre
: Velg denne boksen hvis du vil feste et objekt til venstre på webområdet. Avstanden mellom kanten av webleseren og venstre side av objektet forblir konstant. - Fest til midten
: Velg denne boksen hvis du vil feste et objekt midt på webområdet. Avstanden mellom venstre og øvre kant av objektet og kanten av nettleseren forblir konstant. - Fest til høyre
: Velg denne boksen hvis du vil feste et objekt til høyre på webområdet. Avstanden mellom kanten av webleseren og høyre side av objektet forblir konstant.
Hvis du for eksempel har en knapp som Forhåndsbestill nå som må vises i høyre hjørne av siden på tvers av alle avbruddspunktene, må du velge knappen og feste den til høyre som vist på bildet.
Klikk boksen til høyre for å feste objektet til høyre.
Når du fester et objekt til en side, viser Adobe Muse stiplede linjer fra objektet for å indikere hvor det er festet på siden. I bildet nedenfor kan du se den stiplede linjen som strekker seg til høyre kant av siden. Dette betyr at objektet er festet til høyre side av siden.
Stiplede linjer indikerer hvor objektet er festet til siden.
- Fest til venstre
-
Merk:
Alternativene for å endre størrelse er forskjellig for ulike objekter. Du kan for eksempel endre bredde- og høydestørrelsen på et bilde i en responsiv layout, mens du bare kan endre breddestørrelsen på en tekstboks.
Objekter som ikke er flytende har ikke alternativet Endre størrelse.
-
Dra og endre størrelsen på objektet for det gjeldende avbruddspunktet.
I det første bildet kan du for eksempel se at bildet går utenfor siden ved et avbruddspunkt på 768 bildepunkt. Du kan dra og endre størrelsen på bildet slik at det passer sidebredden, som vist på det andre bildet.
Bildet går utenfor siden.
Dra og endre størrelse på objekter for ulike avbruddspunkt.
Merk:
Hvis elementene i en Tilstand-knapp eller andre kontrollprogrammer er angitt som flytende, vil de bli omplassert og/eller gitt ny størrelse når beholderen deres får ny størrelse.
Hvis du vil kopiere størrelsen og plasseringen til et objekt på tvers av forskjellige avbruddspunkter, følger du følgende trinn:
-
Gjør ett av følgende:
- Velg Kopier størrelsen og posisjonen til > <bestemt avbruddspunktverdi> for å bruke den gjeldende objektstørrelsen og plasseringen for det bestemte avbruddspunktet.
- Velg Kopier størrelsen og posisjonen til > Alle avbruddspunkter for å bruke den gjeldende objektstørrelsen og plasseringen på tvers av alle avbruddspunkter.
I responsiv design er det viktig å håndtere tekst for ulike leserbredder slik at den er klar og lesbar. Tekst som er plassert i en i avbruddspunktvisning vil kanskje brytes brått i en annen avbruddspunktvisning. Uønskede linjeskift vil kanskje også vises når du bytter avbruddspunkt.
Adobe Muse lar deg formatere tekst forskjellig for ulike avbruddspunkt. Du kan for eksempel velge å bruke skriftstørrelse 20 punkter for nettbrett og 15 punkter for mobile enheter.
Hvis du vil formatere tekst i responsiv design, tilbyr Adobe Muse et Tekstformatering-ikon i panelet der du også finner beskjærings- og markeringsverktøy. Det finnes to alternativer i dette ikonet, og du kan velge ett av dem for å formatere teksten din.
Du kan velge alternativet Formater tekst på tvers av avbruddspunktene for å formatere tekst på tvers av alle avbruddspunktene på en side. Når du velger dette alternativet, trenger du bare å formatere teksten i en avbruddspunktvisning. Teksten blir automatisk formatert på tvers av de andre avbruddspunktene.
Hvis du derimot trenger å formatere tekst for et bestemt avbruddspunkt, kan du velge alternativet Formater tekst på det gjeldende avbruddspunktet. Du kan for eksempel velge å øke tekststørrelsen til 24 når du skal plassere tekst for mobiler.
Tekstformateringen blir husket og brukt når webområdet vises i forskjellige leserbredder.
-
Hvis du vil formatere teksten, merker du teksten som du ønsker å formatere og klikker ett av følgende:
- Formater tekst på tvers av avbruddspunktene for å formatere teksten på tvers av alle avbruddspunkter.
- Formater tekst på det gjeldende avbruddspunktet for å bare formatere teksten for gjeldende avbruddspunkt.
Begge disse alternativene er tilgjengelige i det venstre panelet der du velger tekst- eller beskjæringsverktøyet.
Formatere tekst i responsiv design
A. Formater tekst på tvers av avbruddspunkter B. Formater tekst på gjeldende avbruddspunktMerk:
Alternativet for tekstformatering i responsiv layout endrer bare formateringen av teksten. Du kan ikke endre ord eller innhold i avbruddspunktene.
Hvis du vil kopiere størrelsen og plasseringen til teksten på tvers av forskjellige avbruddspunkter eller leserbredder, følger du følgende trinn:
-
Gjør ett av følgende:
- Høyreklikk og velg Kopier tekstformatering til > <bestemt avbruddspunktverdi> for å bruke gjeldende tekstattributter for det bestemte avbruddspunktet.
- Høyreklikk og velg Kopier tekstformatering til > Alle avbruddspunkter for å bruke gjeldende tekstattributter på tvers av alle de andre avbruddspunktene.
Du kan legge til rulleeffekter i en responsiv layout. Rulleeffekter støttes kun med faste avbruddspunkter. Faste avbruddspunkter angir at layouten er låst til den aktuelle sidebredden. Legg til et fast avbruddspunkt, marker objektet du vil bruke rulleeffekter på, og konfigurer deretter innstillingene for rulleeffekter.
-
Legge til et avbruddspunkt med fast bredde
Legg merke til de faste avbruddspunktene med et kvadratisk ikon
-
Bruke rulleeffekter for markerte objekter
Merk:
Du kan bruke rulleeffekter kun når du er ved det faste avbruddspunktet, ikke ved andre (flytende) avbruddspunkter.
Hvis du vil vite hvordan man legger til og bruker rulleeffekter i Adobe Muse, slår du opp på Bruke rulleeffekter i Adobe Muse.
Hva er de ideelle avbruddspunktene når man utformer et område for datamaskiner, nettbrett og mobiler?
Hvis du har en bestemt enhet du ønsker å utforme området for, kan du legge til det passende avbruddspunktet. Brukere kan vise området på alle enheter med skjermer i alle størrelser. Det anbefales derfor bare å legge til avbruddspunkter der utformingen brytes. Dette sikrer at området ditt har en god layout på alle enheter.
Hvorfor fungerer ikke avbruddspunkter i malsider på enkelte områder?
Avbruddspunkter på malsider vises som hvite trekanter på enkelte sider. Hvis du vil aktivere disse avbruddspunktene på enkeltområder, kan du klikke den hvite trekanten på avbruddspunktlinjen og deretter klikke plusstegnet (+).
En annen enkel måte å overføre avbruddspunkter fra en malside til en bestemt side på er å kopiere et element fra en malside, bytte til siden du vil ta i bruk avbruddspunktene på, velge Rediger > Lim inn med avbruddspunkter og deretter slette det innlimte elementet fra lerretet. Selv om elementet blir slettet, blir avbruddspunktene fra malsiden værende.
Hvordan kan jeg unngå at tekstbokser overlapper i en responsiv layout?
Hvordan kan jeg bli kvitt ekstra plass eller tomrom i responsive områder?
Det finnes flere årsaker til at ekstra plass eller tomrom kan oppstå. Det kan for eksempel være en påklistret bunntekst eller et skjult objekt. Hvis du vil ha mer informasjon om hvordan du løser dette problemet, kan du se denne artikkelen.
Hvordan kan jeg fjerne det grå området som vises når jeg forhåndsviser området mitt?
Når du ser et grått område i forhåndsvisningen, kan du se etter et eksternt objekt eller et skjult objekt som er plassert utenfor siden. Du kan velge alle objekter ved å klikke Vis > Vis rammekanter. Du kan også zoome ut og vise plasseringen til alle objektene. Se etter et skjult eller eksternt objekt, og plasser objektet i layouten for å løse dette problemet.
Hvordan kan jeg gjøre alle kontrollprogrammene flytende eller responsive?
Alle kontrollprogrammene i Adobe Muse er ikke responsive. Se den responsive adferden til hvert kontrollprogram i denne tabellen.
Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.