Dra markøren til avbruddspunktlinjen, og plasser den der du vil legge til avbruddspunktet.
Les denne artikkelen for å vite mer om avbruddspunkter. Lær hvordan du kan feste og endre størrelse på objekter i en responsiv layout, og hvordan du kan formatere tekst i avbruddspunkter.
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 vanlige spørsmål om 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.
Dra markøren til avbruddspunktlinjen, og plasser den der du vil legge til avbruddspunktet.
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å.
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.
Når du bruker en annen malside på en enkeltside, blir avbruddspunktene fra den gamle malsiden erstattet med avbruddspunktene fra den nye malsiden.
På avbruddspunktlinjen drar og plasserer du markøren på den ønskede avbruddspunktverdien. Dette er din endrede avbruddspunktplassering.
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.
Klikk OK for å lagre endringene.
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:
Når du sletter et avbruddspunkt, blir de tilhørende layoutendringene og tekstinnstillingene for avbruddspunktet også slettet.
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:
Du kan bruke følgende alternativer for å sikre at layouten ser bra ut på alle avbruddspunkter:
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.
Slik viser eller skjuler du objekter i Adobe Muse-prosjektet:
Sett inn alle objektene du trenger, inkludert de du vil skjule i enkelte avbruddspunkter.
Dra markøren for å gå til visning av et bestemt avbruddspunkt.
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.
Nå kan du plassere synlige objekter i avbruddspunktvisningen.
Gå til avbruddspunktvisningen der du vil vise objektet du skjulte tidligere. Du kan dra markøren for å gjøre det.
Klikk Lag-panelet, og finn lagene til objektet som du vil vise. Du må kanskje drille ned i ulike lag for å lokalisere objektlaget.
Klikk den første kolonnen som tilsvarer objektlaget. En liten, svart prikk vises for å indikere at objektet nå er synlig i gjeldende avbruddspunktvisning.
Hvis du vil vise objektet på tvers av alle avbruddspunkter, høyreklikker du objektet og klikker Vis i andre 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.
Hvis du vil flytte objektene dine på tvers av avbruddspunkter, gjør du følgende:
Velg avbruddspunktet der du ønsker å plassere objektet ditt.
Dra og plasser objektet ditt på det ønskede stedet.
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.
Plassere objekter med avbruddspunkter
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:
Les videre for å lære hvordan du fester et objekt til en side i responsiv design.
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:
Velg objektet du vil feste.
I Fest-alternativet øverst velger du én av boksene for å feste objektet til siden.
Du kan feste objektet til en side på en av følgende måter:
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.
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.
Bruk markøren til å vise layouten i forskjellige sidebredder. Kontroller om festingen påvirker layouten når siden endrer størrelse.
Gå til avbruddspunktvisningen der du vil endre størrelsen på objektet.
Høyreklikk objektet, og velg Endre størrelse > <Alternativet Endre størrelse>.
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.
Forhåndsvis denne endringen i en webleser. Endre størrelsen på webleseren til leserbredden når avbruddspunktverdien. Legg merke til endringen i objektstørrelsen etter at leserbredden din har nådd avbruddspunktverdien.
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:
Høyreklikk objektet som du vil kopiere.
Gjør ett av følgende:
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.
Gå til ønsket avbruddspunktvisning.
Velg tekstboksen, og dra for å endre størrelsen på den. Teksten justeres mens du endrer størrelsen på tekstboksen.
Høyre grense for tekstboksen definerer i hvilken grad teksten vil flyte i bredden når du endrer størrelse på tekstboksen.
Hvis du vil formatere teksten, merker du teksten som du ønsker å formatere og klikker ett av følgende:
Begge disse alternativene er tilgjengelige i det venstre panelet der du velger tekst- eller beskjæringsverktøyet.
A. Formater tekst på tvers av avbruddspunkter B. Formater tekst på gjeldende avbruddspunkt
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:
Marker teksten du vil kopiere.
Gjør ett av følgende:
Forhåndsvis layouten ved hvert avbruddspunkt ved hjelp av markøren. Legg til avbruddspunkter der det er behov for å optimalisere layouten for ulike leserbredder.
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.
Åpne Adobe Muse-siden der du vil legge til rulleeffekten. Du vil kanskje legge til rulleeffekter for navigering og bakgrunnsbilde i overskriften.
Legg merke til avbruddspunktene på siden når du åpner den pulserende layouten. Disse avbruddspunktene er flytende, noe som angis av et ikon med piler begge veier.
Hvis du nå viser rulleeffektpanelet, kan du se at alternativet er deaktivert.
Du må legge til et fast avbruddspunkt for å aktivere rulleeffekter. Hvis du vil legge til et fast avbruddspunkt, klikker du på avbruddspunktlinjen og klikker Legg til avbruddspunkt.
Velg Fast bredde fra rullegardinmenyen og klikk OK.
Legg merke til at de faste avbruddspunktene på websiden angis av et kvadrat. Når du viser siden med en webleserbredde på 1225 piksler eller mer, forblir siden som vist med 1225 piksler. Layouten blir ikke flytende ved dette avbruddspunktet.
Marker objektet der du vil bruke rulleeffektene, og konfigurer innstillingene for rulleeffekter.
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.
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.
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.
Tekstboksene skaleres ikke, og de kan overlappe med hverandre hvis de ikke er flytende. Du gjør tekstboksene flytende ved å høyreklikke hver av tekstboksene og velge Endre størrelse > Responsiv bredde.
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.
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.
Alle kontrollprogrammene i Adobe Muse er ikke responsive. Se den responsive adferden til hvert kontrollprogram i denne tabellen.
Logg på kontoen din