Læs denne artikel for at få at vide, hvordan du kan oprette websites til mobile enheder eller smartphones.

Bemærk:

Adobe Muse tilføjer ikke længere nye funktioner og slutter med at tilbyde support 26. marts 2020. Find flere oplysninger og hjælp på Adobe Muses side om ophør af tjeneste.

Du kan oprette og designe websites til mobile enheder ved hjælp af responsivt webdesign i Adobe Muse. Med et responsivt layout kan du bruge en enkelt Muse-fil til at oprette websites til alle enheder, herunder mobile enheder.

Du skal først bestemme, hvilken browserbredde du ønsker at designe dit website til. Du kan derefter fortsætte med at designe dit website. Du kan finde yderligere oplysninger om oprettelse af mobile websites med responsivt layout i Oprettelse af responsive websites.

Hvis du ønsker at designe alternative layout til mobilwebsites, skal du læse følgende artikel.

Design af websites, som udelukkende vises på mobile enheder

Med Adobe Muse kan du oprette websitelayout til webindhold, som skal vises på computere, smartphones og tablets. Ved hjælp af funktionerne til mobildesign kan du oprette alternative layout til telefoner, tablets samt stationære computere.

Adobe Muse indeholder indstillinger som f.eks. 100 % bredde, som du kan slå til og fra, og funktionen Klæbrig sidefod, som sikrer, at dit design tager sig godt ud på den lange række af enhedsskærme på markedet. I Adobe Muse kan du bruge velkendte arbejdsforløb til at oprette indtagende design til enhver skærmdimension.

For at oprette et alternativt layout til mobiltelefoner skal du gøre følgende:

  1. Åbn Adobe Muse, og klik på Filer > Nyt website.

    Vælg Fast bredde for at oprette websites til bestemte enheder.
    Vælg Fast bredde for at oprette websites til mobile enheder.

  2. Vælg Fast bredde, og klik derefter på Avancerede indstillinger i samme dialogboks.

    Avancerede indstillinger for nyt website
    Avancerede indstillinger for oprettelse af nyt website.

  3. Angiv Maksimal Sidebredde eller sidens maksimale bredde.

    Bestem, hvilken browserbredde der er passende til mobiltelefoner, og angiv værdien.

  4. Indtast værdier for Margen og Indre margen for dit mobile website. Indtast følgende oplysninger:

    • Sidebredde og Sidehøjde: Gør det muligt at indstille de første dimensioner for siden. Muse øger automatisk højden af siden, når du tilføjer mere indhold, så der angives ingen maksimumværdi for sidehøjden.
    • Kolonner og Kolonnebredde: Kolonner inddeler visuelt en Muse-webside i lige store dele, så du kan justere designelementerne præcist. Muse indstiller automatisk kolonnebredden for et angivet antal kolonner og en spalteafstand.
    • Margener og Indre margener: Margener rydder et område omkring websiden, uden for designområdet. Indermargen giver dig mulighed for at rydde et område inden for websidens designperimeter.

    Klik på OK.

    Du kan nu gå i gang med at designe layoutet til dit website til mobile enheder.

Føj et telefonlayout til et eksisterende Muse-website

Når du opretter et nyt projekt, kan du designe et af layoutene først og derefter oprette flere layout, alle i den samme .Muse-fil.  Når du udgiver eller eksporterer et website, opretter Adobe Muse automatisk en fil med navnet sitemap.xml, som indeholder en liste over alle sider til alle layout. Filen sitemap.xml overføres sammen med de øvrige websiteaktiver. Den forbedrer et websites SEO (Search Engine Optimization) ved at hjælpe søgemaskiner med at indeksere websitet, så sider rangeres korrekt i søgeresultater.

Når du vil oprette et nyt mobilbaseret layout til en telefon, skal du som noget af det første for et eksisterende website gennemse indholdet for at finde frem til, hvilke elementer der skal bruges til den smartphone-baserede brugeroplevelse. Eftersom smartphone-brugere ofte er på farten og ser indholdet på en mindre skærm, er det vigtigt at forenkle designet og kun vise det indhold, der er nyttigt og let at bruge på en berøringsskærm.

  1. Åbn den eksisterende .Muse-fil, som du vil tilføje et alternativt telefonbaseret layout til.

  2. Åbn hver side i projektet, og klik på Side > Tilføj alternativt layout > Telefon.

    Indstillinger for Tilføj telefonlayout
    Tilføj telefonlayout for at oprette et mobilt website.

  3. Du kan bruge menuen til at vælge et eksisterende layout, du vil kopiere. Til eksemplet i denne artikel skal du vælge Computer for at kopiere det computerbaserede layout til det telefonbaserede layout.

    Bemærk, at du kan kopiere websiteplan, sideattributter og browserfyld. Brug standardindstillingerne til at kopiere de eksisterende oplysninger for det computerbaserede website til det telefonbaserede layout.

  4. Klik på OK for at lukke dialogboksen og tilføje det telefonbaserede layout.

    Muse opretter en websiteplan for det telefonbaserede layout. Sidenavne, websitets struktur og attributter for mastersiden kopieres over. Der vises ikke længere et plustegn (+) ud for navnet på knappen til Telefon-layoutet, fordi det telefonbaserede layout nu er føjet til Muse-projektet.

    Bemærk, at det faktiske sideindhold ikke er tilføjet i miniaturebilledet af siden med det telefonbaserede layout. Det er for at give dig mulighed for kun at kopiere det indhold, du vil have, til hver side i et layout til mobiltelefoner. Efterhånden som du får indsat det indhold, du vil tilføje på hver ny side, kan du tilpasse størrelsen, så den passer til de mindre dimensioner af den mobile skærm.

    Du kan tilføje nye sider ved at klikke på plustegnet til højre for siden Hjem. Når du har oprettet kortet over websitet, kan du gå i gang med at designe den mobile oplevelse.

    Læs næste afsnit for at finde ud af, hvordan du opretter mastersiderne til det telefonbaserede layout.

    Opret kortet over websitet for det mobilbaserede layout ved at tilføje nye sider.
    Opret kortet over websitet for det mobilbaserede layout ved at tilføje nye sider.

Opsæt mastersiden, og tilføj almindelige websiteelementer

  1. Dobbeltklik på siden A-Master-telefonsiden i visningen Plan for at åbne den i visningen Design.

  2. Åbn grænsefladen Browserfyld for at vælge et baggrundsbillede.

  3. Klik på Tilføj billede i afsnittet Billede. Gennemse, og vælg den fil, du vil bruge som baggrundsbillede.

    Indstillinger for Tilføj billede
    Føj et baggrundsbillede til Telefon-mastersiden.

  4. Indstil valgmuligheden Tilpasning til Skaler til udfyldning, og klik på midterpositionen.

  5. Klik på det grå område uden for siden eller et vilkårligt sted i kontrolpanelet for at lukke grænsefladen Browserfyld.

Tilføj hyperlinks til navigation på websitet

Adobe Muse gør det nemt at linke til eksterne sider, donwloadbare filer, afsnit på websites og meget mere ved brug af Hyperlinks. Opsætning af passende navigation på dit website er vigtig for at sikre, at de besøgende nemt kan navigere gennem siderne på dit website. En godt udformet navigation på websitet hjælper også til at optimere din hjemmeside til søgemaskinerne. Få mere at vide i Oprettelse af hyperlinks.

Sider med rullelister med Hyperlinks eller ankerlinks er tilføjet til din websiteoversigt. For at søge efter de rigtige links skal du starte med at skrive navnet på siden eller ankeret. Du skal bare skrive de første par bogstaver, så filtreres resultaterne i menuen Hyperlinks, og de vises på en rulleliste. Det giver nem adgang til de links, du vil opdatere hurtigt.

Indstillinger for Hyperlinks
Filtrer listen over links ved at skrive de første par bogstaver i menufeltet Hyperlink.

Føj indhold til siderne med telefonlayout

Du skal starte med at færdiggøre siden Hjem.

  1. Klik på fanen Indvendig (telefon). Kopier hele gruppen af fire nummererede knapper.
  2. Brug funktionen Gå til side til at springe til siden Hjem (telefon), og indsæt gruppen. De links, du har tilføjet i ovenstående afsnit, er bevaret, så nu har både siden Hjem og mastersiden Indvendig samme navigation.
  3. Brug markeringsværktøjet til at placere gruppen i midten af siden Hjem nær bunden af sidefoden.
  4. Klik på fanen Arbejdspalet (computer) for at returnere til arbejdssiden. Kopier tekstrammen i den yderste venstre plade, hvor der står: Et problem kan løses på mere end én måde.
  5. Klik på fanen Hjem (telefon), og indsæt tekstrammen. Brug markeringsværktøjet til at placere tekstrammen, så den er centreret over gruppen af knapper.
Designet af siden Hjem er fuldført
Designet af siden Hjem er fuldført.

Nu skal du tilføje sideindholdet for siden Afsnit 01.

  1. Klik på fanen Arbejdspalet (computer) for at returnere til siden Arbejdspalet. Marker det hvide afrundede baggrundsrektangel og tre tekstrammer i den anden plade fra venstre. De tre tekstrammer indeholder cirklen 01, pladsholderteksten til afsnit 01 og den orange Telefon-knap. Kopier de markerede elementer.
  2. Tryk på Kommando+J (Mac) eller Ctrl+J (Windows), og indtast derefter de første par bogstaver i Afsnit 01. Klik på den nedadgående pil for at vælge telefonsiden Afsnit 01, og tryk derefter på Retur/Enter for at åbne den i visningen Design.
  3. Indsæt elementerne på siden Afsnit 01 i det telefonbaserede layout. Brug markeringsværktøjet til at centrere dem på siden ved hjælp af de hjælpelinjer, der vises midlertidigt.

Formålet med siden Afsnit 01 er at give en kort introduktion til firmaet og gøre det nemt for brugere af mobiltelefoner at ringe til det. Når du designer mobilwebsites, kan du tilføje en ny type af link, som besøgende kan trykke på for at aktivere telefonopkald på smartphonen. Det er en glimrende mobilfunktion, fordi den gør det let for potentielle kunder at ringe til et firma.

Hvis du vil tilføje et link i et mobillayout, der ringer til et telefonnummer, skal du følge disse trin:

  1. Brug markeringsværktøjet til at markere knappen Telefon.
  2. Skriv tel:+1 i menufeltet Links efterfulgt af et telefonnummer som f.eks.:
    tel:+14155551234

Det er det format, som mobilbrowsere genkender som telefonnummerlinks.

  1. Tryk på Retur eller Enter for at gemme linket.

Bemærk: Hvis du foretrækker at oprette et e-maillink, kan du indtaste følgende format i menufeltet Hyperlink:
mailto:designers@design-is-fun.com

Når du har føjet linket til knappen Telefon, er designet af siden Afsnit 01 fuldført.

  1. Klik på fanen Arbejdspalet (computer) for at returnere til siden Arbejdspalet. Marker det hvide afrundede baggrundsrektangel, den grønne 02-cirkel, tekstrammen Afsnit 02, det integrerede kort og den grønne Kort-knap. Kopier de markerede elementer.
  2. Tryk på Kommando+J (Mac) eller Ctrl+J (Windows), og skriv derefter de første par bogstaver i Afsnit 02. Klik på den nedadgående pil for at vælge telefonsiden Afsnit 02, og tryk derefter på Retur/Enter for at åbne den i visningen Design.
  3. Indsæt de elementer, du har kopieret i trin 1, på siden Afsnit 02 i det telefonbaserede layout. Brug markeringsværktøjet til at centrere dem på siden ved hjælp af hjælpelinjerne til justering.

Siden Afsnit 02 indeholder integreret HTML-kode, der er genereret på Google Maps-websitet for at oprette et interaktivt kort.

Hvis du har fulgt selvstudiet med titlen Kom godt i gang med Muse, har du kopieret Google Maps-kildekode fra Google-websitet og brugt den integrerede HTML-funktion i Muse til at indsætte den på siden.

Heldigvis indeholder Google Maps-kode i forvejen understøttelse af fingerbevægelser på berøringsskærme, så besøgende nemt kan bruge kortet. Til dette eksempelprojekt er kortdimensionerne allerede blevet tilpasset.

Hvis du skal tilpasse dimensionerne af det integrerede HTML-indhold på dine projekter, kan du højreklikke på indholdet og vælge HTML for at få vist koden i HTML-vinduet. Du kan redigere højde- og breddeværdierne i koden for at tilpasse størrelsen af kortet, så det kan være på en mindre skærm.

Ændre størrelse på integrerede HTML-elementers dimensioner i koden
Hvis du skal tilpasse størrelsen af integrerede HTML-elementer, kan du opdatere dimensionerne i koden.

Hvis du har åbnet vinduet Rediger HTML, kan du lukke det uden at foretage nogen ændringer.

  1. Vælg knappen Kort.

Denne gang skal du tilføje et link til et eksternt website (Google Maps) for at gøre det nemt for mobilbesøgende at se den fulde version af kortet i et nyt browservindue.

  1. Kopier nedenstående link, og indsæt det i feltet i menuen Links:

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. Klik på ordet Links til venstre for menuen Links. Marker afkrydsningsfeltet Åbn linket i et nyt vindue eller en ny fane i den viste dialogboks. Brug også feltet Værktøjstip til at indtaste følgende tekst: Kort til Adobe Fremont.
Indstillinger for Hyperlink
Indstil linket til åbning i et nyt browservindue, og tilføj et værktøjstip.

  1. Klik uden for dialogboksen Links for at lukke den.

Nu skal du tilføje sideindholdet for siden Afsnit 03.

  1. Klik på fanen Arbejdspalet (computer) for at returnere til siden Arbejdspalet. Marker det hvide afrundede baggrundsrektangel, den lilla 03-cirkel, tekstrammen Afsnit 03, kontaktformularen og knappen Indsend. Kopier de markerede elementer.
  2. Tryk på Kommando+J (Mac) eller Ctrl+J (Windows), og indtast derefter de første par bogstaver i Afsnit 03. Klik på den nedadgående pil for at vælge telefonsiden Afsnit 03, og tryk derefter på Retur/Enter for at åbne den i visningen Design.
  3. Indsæt de elementer, du har kopieret i trin 1, på siden Afsnit 03 i det telefonbaserede layout. Brug markeringsværktøjet til at centrere dem på siden ved hjælp af hjælpelinjerne til justering. De typer, der er anvendt på computerens Kontaktformular-widget, bevares under kopiering til det telefonbaserede layout. Den eneste ændring, der foretages under klargøring af formularen til et mobilbaseret layout, involverer ændring af størrelsen på formularen og formularelementerne, så de passer til en mindre skærm.

Siden Afsnit 03 indeholder en Kontaktformular-widget, der bruger Business Catalyst-serverscripts og -database til at behandle de indsendte formulardata. Når du klikker på Udgiv og overfører websitefilerne fra Muse, virker formularfunktionaliteten automatisk.

Bemærk: Du kan ganske vist bruge andre tjenesteudbydere som vært for dit færdige Muse-website, men du skal foretage ekstra kodning for at få kontaktformularer til at virke, hvis de ikke har Business Catalyst-værtsservere.

I dette eksempelprojekt er CAPTCHA ikke aktiveret i kontaktformularen. CAPTCHA er en indstilling i menuen Indstillinger for Kontaktformularwidgets, som du kan tilføje, når du vil bekræfte, at formularen er indsendt af en person, og ikke et script eller "spambot" - CAPTCHA-grænsefladen viser et billede af en række tegn, som den besøgende skal skrive i den matchende streng for at kunne indsende sin meddelelse via formularen. Selvom spambot-formularindsendelser kan være en plage, er det vigtigt at tænke på websitets anvendelighed på en mobiltelefon. Hvis du gør det for vanskeligt at udfylde formularen, vil besøgende måske vælge ikke at sende deres meddelelse.

Siden Afsnit 03 er nu færdig. Der er ingen grund til at tilføje et link til knappen Indsend, da knappen allerede er konfigureret som en del af Kontaktformular-widgeten.

Den sidste side i det telefonbaserede layout, Afsnit 04, indeholder en Diasshow-widget. Widgets i Muse er designet og testet til at virke sammen med alle moderne computer- og mobilbrowsere, så du behøver ikke at gøre noget for at få diasshowet til at fungere på en berøringsskærm.

Følg disse trin for at kopiere indholdet fra arbejdssiden i computerlayoutet til siden Afsnit 04 i det telefonbaserede layout:

  1. Klik på fanen Arbejdspalet (computer) for at returnere til siden Arbejdspalet. Marker det lange hvide baggrundsrektangel, den røde 04-cirkel, Diasshow-widget og tekstrammen Afsnit 04. Du kan bruge markeringsværktøjet til at klikke på og trække hen over alle elementerne for at markere dem på én gang. Kopier de markerede elementer.
  2. Tryk på Kommando+J (Mac) eller Ctrl+J (Windows), og indtast derefter de første par bogstaver i Afsnit 04. Klik på den nedadgående pil for at vælge telefonsiden Afsnit 04, og tryk derefter på Retur/Enter for at åbne den i visningen Design.
  3. Indsæt de elementer, du har kopieret i trin 1, på siden Afsnit 03 i det telefonbaserede layout. Brug markeringsværktøjet til at centrere dem på siden ved hjælp af hjælpelinjerne til justering. De typer, der er anvendt på computerens Kontaktformular-widget, bevares under kopiering til det telefonbaserede layout. Den eneste ændring, der foretages under klargøring af formularen til et mobilbaseret layout, involverer ændring af størrelsen på formularen og formularelementerne, så de passer til en mindre skærm. Når du tilføjer widgets med interaktive funktioner (såsom Diasshowwidgets) i mobillayout, du opretter i Muse, kan du se, at panelet Indstillinger indeholder Aktiver svip. Denne indstilling er som standard aktiveret, så eventuelle widgets, du tilføjer i dit mobildesign, automatisk indstilles til at give besøgende mulighed for at trykke og bruge bevægelser på berøringsskærme. Siden Afsnit 04 indeholder en Diasshow-widget, der viser det tilsvarende billede, når der trykkes på et miniaturebillede. Diasshowet er konfigureret til at bruge en vandret overgang til at skifte mellem billeder i galleriet. Dette eksempel kræver brugerhandling for at kunne vise fotos, men du kan vælge at indstille din Diasshow-widget til automatisk afspilning, så der automatisk cirkuleres gennem billederne, når siden indlæses.

Bemærk: Hvis du konfigurerer diasshowwidgets til at bruge overgangen Udton, Vandret eller Lodret, aktiverer koden i Muse automatisk fingerbevægelsen Svip, så besøgende kan svippe på deres berøringsskærm for at gennemse billederne i diasshowet.

I næste afsnit, Oprettelse af mobilbaserede layoutdesign i Muse, vil du lære, hvordan du nemt kan opdatere aktiver på tværs af alle mobilplatforme, og hvordan du kan udgive dit Muse-website for hvert mobilbaseret layout.

Opdater og optimer aktiver til dit mobile website

Sammenlignet med stationære computere har tablets og smartphones en mere begrænset processor, langsommere forbindelseshastigheder og mindre lagerkapacitet. Derfor kræver det særlige overvejelser, når du skal designe og levere webdesign på mobilenheder.

Muse indeholder funktioner, som du kan bruge til at optimere den grafik, der vises i mobilbaserede layout, for at sikre, at websitet indlæses hurtigt og kører acceptabelt.

  1. Tryk på Command/Ctrl+7 for at vise det computerbaserede layout, og dobbeltklik derefter på computerfilen A-Master for at åbne den i visningen Design.
  2. Åbn panelet Aktiver ved at klikke på dets fane i panelsættet for at gøre det aktivt. Eller vælg Vindue > Aktiver, hvis det er lukket.
  3. Vælg det store baggrundsbillede af de grønne bakker. Aktivet fremhæves i panelet Aktiver.
  4. Klik på aktivets navn, background.jpg, for at udvide listen over forekomster, der bruges på websitet. Bemærk, at baggrundsbilledfilen er anført tre gange med to forskellige ikoner, fordi den både bruges i det telefonbaserede og det computerbaserede layout.
Panelet Aktiver
Se forekomsterne af background.jpg i panelet Aktiver for at få oplysninger om, hvor aktivet findes på websitet.

I dette lille eksempelwebsite er listen over aktiver ret nem at holde styr på, men når du opbygger større websites, kan listen over aktiver blive længere og sværere at overskue.

Du kan gøre det lettere at navigere på listen over aktiver ved at vælge det første element for hvert aktiv og derefter klikke på pilen til venstre for at skjule sættet. Klik på det igen, når du vil udvide visningen til hele listen over forekomster, hvor aktivet er brugt på websiteprojektet.

Hvis du vil finde de aktiver, der er brugt til et bestemt layout, skal du klikke på toppen af kolonnen yderst til højre i panelet Aktiver, der viser ikonerne Computer, Tablet eller Telefon. Derved sorteres listen over aktiver, så aktiverne for hvert layout vises i et samlet sæt.

Panelet Aktiver
Klik på sidehovedtitlerne i en kolonne i panelet Aktiver for at sortere listen over aktiver efter den pågældende type.

Hvis du vil foretage en ændring af en grafik, der opdaterer alle forekomster af den (på alle layout), kan du højreklikke på et aktivnavn og vælge Rediger original i den viste menu.

Vælg Rediger original for at opdatere aktivet for hele websitet
Vælg Rediger original for at opdatere aktivet for hele websitet.

Den originalfil, du har placeret, åbnes i Photoshop, Fireworks eller det billedbehandlingsprogram, du har brugt til at oprette den, så du hurtigt kan foretage ændringer.

Når du gemmer den ændrede originalfil og vender tilbage til Muse, vises elementet i panelet Aktiver sammen med ikonet Ikke synkroniseret, fordi grafikversionen på websitet ikke længere matcher kildefilen. Højreklik på filen igen, og vælg Opdater for at opdatere alle gentagelser af grafikken til den nye version.

Brug funktionen Opdater til at ændre alle forekomster af aktivet, der bruges på websitet
Brug funktionen Opdater til at ændre alle forekomster af aktivet, der bruges på websitet.

Forhåndsvisning af mobillayouts

Du har forskellige muligheder for at se en forhåndsvisning af de websitedesign, du opretter:

Klik på Vis i visningen Design for det computerbaserede layout for at se den indbyggede Webkit-baserede emulator gengive HTML, CSS og JavaScript. I forhåndsvisningen kan du se, hvordan dine layout vil se ud i en browser, før du udgiver et website og kontrollerer det online med en enhed.

Klik på Vis i visningen Design for telefonvisningen for at se det telefonbaserede layout. Brug menuen Størrelse af forhåndsvisning til at vælge mellem iPhone 4, iPhone 5, Samsung Galaxy S III og Nokia Lumia 920 for at se layoutet på forskellige skærmstørrelser.

Forhåndsvisning af mobilbaserede layout
Menuen Størrelse af forhåndsvisning vises under forhåndsvisning af sider i det telefonbaserede eller det tabletbaserede layout.

Klik på ikonet til højre for vinduet Størrelse af forhåndsvisning for at skifte mellem visning af layoutet i stående eller liggende format.

Størrelse af forhåndsvisning indeholder foruddefinerede højde-bredde-forhold, der dækker de mest almindelige skærmstørrelser på mobiltelefoner.

Nogle smartphoneskærme er bredere, f.eks. Motorola Droid. Hvis en besøgende har et bredere display, skalerer funktionen Viewport i Muse automatisk bredden af telefonlayoutet, så det passer til den faktiske skærmstørrelse.

I forhåndsvisning kan du klikke på links og navigere gennem websitet. Du kan rulle, hvilket efterligner fingerbevægelsen svip, men det anbefales at teste det på selve enheden.

Hvis du klikker på i-knappen ud for menuen Størrelse af forhåndsvisning i forhåndsvisningstilstand, kan du se en note med et link, der beskriver et Adobe-værktøj med navnet Edge Inspect. Med Edge Inspect kan du bruge en Chrome-browserudvidelse til at tilslutte mobilenheder på din computer og derefter synkronisere dem med indhold, der vises i din computers Chrome-browser.

Med Edge Inspect kan du bruge Chrome og indstillingen Forhåndsvisning i browser i Adobe Muse til at se et website på din computer, så den samme side automatisk vises på de tilsluttede enheder. (Sørg for at angive Chrome som din standardbrowser).

Du kan også købe et tredjepartsværktøj med navnet Reflection, som du kan bruge til at se en emulering af din enhed (som er tilsluttet via samme netværksforbindelse) på din stationære computerskærm. Når du bruger din smartphone eller tablet til at navigere på et website, afspejler emulatoren berøringsskærmen på din enhed.

Andre funktioner vedrørende mobilbaserede layout

Klæbrige sidefødder

Som i tidligere versioner af Muse kan du trække hjælpelinjer for at definere arealet under siden og indstille området for sidefod. Du kan også angive ethvert indholdselement som et sidefodelement, så det vises under den minimumshøjde for siden, der er angivet i Egenskaber for website, eller under det eksisterende sideindhold alt efter, hvad der er længst.

Definition af indhold af sidefod er meget nyttigt, hvis et website har sider af varierende længde, fordi placeringen af sidefoden justeres lodret, så den vises ensartet i bunden af siderne uden at overlappe sideindholdet.

Indstillingen Klæbrig sidefod er som standard aktiveret. Det er en funktion, der især er designet til besøgende med større computerskærme. I de fleste tilfælde kan du med fordel lade indstillingen Klæbrig sidefod være aktiveret for dine websites, fordi det bevarer sidefoden i den ønskede position, selvom browservinduet er markant større end websidens design, som det er på et Apple Cinema Display.

Du kan se, hvordan dette fungerer, ved at åbne en forhåndsvisning af et Muse-website i en browser og zoome ud på siden. Bemærk, at hvis du gør sideindholdet for lille i forhold til browservinduet, viser arealet under sidefoden browservinduet i stedet for at bevare sidefoden samme sted forneden.

Når du opretter nye websites i Muse, kan du se, at indstillingen Klæbrig sidefod er aktiveret i dialogboksen Nyt website.

Indstillinger for nyt website
Afkrydsningsfeltet Klæbrig sidefod markeres automatisk, når du opretter nye websites.

Generelt er det bedst at bruge funktionen Klæbrig sidefod, når du designer websites. Men hvis du opdager, at siderne er meget længere end forventet (fordi et website har minimalt sideindhold, og siderne er ret korte), kan du altid deaktivere den ved at fjerne markeringen i afkrydsningsfeltet i dialogboksen Sideegenskaber.

Deaktiver Klæbrig sidefod under Sideegenskaber.
Når du har oprettet et website, skal du opdatere sideegenskaberne og deaktivere indstillingen Klæbrig sidefod.

Fastgjorte elementer

Den kode, der genereres af Muse, testes for at sikre, at den vises og fungerer som forventet på tværs af alle moderne webbrowsere og platforme.

En af de webstandarder, der er forskellig på computer- og mobilbrowsere, er understøttelse af fastgjorte sideelementer. Når du designer websites til computerbrowsere, kan du vælge et element og bruge indstillingen i kontrolpanelet til at fastgøre det til browservinduet. Fastgørelse er velegnet til at oprette ensartet navigation. Det er også nyttigt i tilfælde, hvor du vil bevare et element i samme område af en længere side, uanset hvor langt sidens besøgende ruller ned.

I skrivende stund understøtter mobilbrowsere ikke fastgjorte objekter på samme måde. Derfor er det nødvendigt at bruge alternative strategier for fastgjorte objekter under design af telefonbaserede og tabletbaserede layout.

Når du designer telefonbaserede eller tabletbaserede layout, kan du se, at indstillingerne for fastgørelse er nedtonede og inaktive.

Indstillinger for Fastgjorte elementer
Grænsefladen for fastgørelse er ikke tilgængelig i kontrolpanelet, når du designer mobilbaserede layout.

Udgiv et website med mobillayouts

Du kan udgive websites med flere layout i Muse ved at bruge den samme metode, som du normalt bruger til at udgive computerbaserede websites. Det er praktisk at udgive prøvewebsites og derefter bruge mobilenheder til at se liveversionen for at teste designet på mindre skærme.

Klik på Udgiv, eller vælg Fil > Overfør til FTP-vært for at overføre websitefilerne til hostingserveren.

Når du udgiver et Muse-website med flere layout, går det live med en enkelt URL. Så du skal kun registrere ét domænenavn som f.eks.:

http://www.mit-website.com

Når du udgiver et website med to eller tre forskellige layout, genererer Muse koden for det website, der indeholder registreringsscripts, som identificerer den type computer eller enhed og den type browser, som den besøgende bruger til at få adgang til siden.

Registreringskoden bestemmer platformen og browserversionen og viser derefter automatisk det korrekte layout. Du behøver ikke at gøre noget for at sikre, at besøgende med en tablet kan se tabletdesignet, og besøgende med en smartphone kan se telefondesignet. Det hele ordnes i baggrunden.

Med de nye funktioner til mobilbaseret layout i Muse kan du optimere dine mobilbaserede layout, så enhedsbrugere ikke henter større filer end nødvendigt. Den alternative layoutfunktionalitet bruges kun til de mindre filer med tilpassede billedstørrelser, så websitet fungerer godt på tværs af alle platforme og browsere.

Du kan få flere oplysninger om at arbejde med Muse i artiklerne og selvstudierne på Adobe Muse-siden med selvstudier.

Brug af Gå til side til at kopiere webindhold mellem layout

Klik på fanen Master (computer) for at aktivere computersiden for master i visningen Design.

I Muse er det nemt at skifte mellem layout ved hjælp af det indbyggede navigeringsværktøj: Gå til side. Denne knap findes i visningen Design i ethvert projekt, der har flere layout.

  1. Klik på knappen Gå til side.
Knappen Gå til side
Knappen Gå til side ligner en pil, der peger på en side.

Når du arbejder med flere layout, er det nyttigt at kunne springe hurtigt frem og tilbage mellem to eller flere sider, så du nemt kan kopiere og indsætte indhold.

Bemærk: Foruden at klikke på knappen Gå til side kan du også bruge tastaturgenvejen: Kommando+J (Mac) eller Ctrl+J (Windows).

Dialogboksen Gå til side vises. Den indeholder et tekstfelt, du kan bruge til at skrive de første par bogstaver i et sidenavn på websitet, så du nemt kan springe til siden uden at skulle gå tilbage til visningen Plan gentagne gange.

  1. Indtast de tre første bogstaver i det sidenavn, du vil finde. I dette eksempel skal du skrive de tre første bogstaver i ordet Master: mas.

Feltet scanner websitet for matchende sidenavne og viser dem på nedenstående liste.

  1. Tryk to gange på den nedadgående pil for at vælge siden A-Master (telefon), og tryk derefter på Retur/Enter for at åbne den.

Siden Master (telefon) åbnes i visningen Design og er klar til redigering.

Det er også praktisk at bruge de nye tastaturgenveje til at springe mellem forskellige layout på et website:

  • Kommando/Ctrl+7 viser det computerbaserede layout
  • Kommando/Ctrl+8 viser det tabletbaserede layout
  • Kommando/Ctrl+9 viser det telefonbaserede layout

Disse genveje er kun aktive under redigering af et website, der har det tilsvarende layout. Eksperimenter med at bruge disse nye genveje til at udvikle det arbejdsforløb, du foretrækker, når du skal skifte mellem layout og bestemte sider.

Derefter skal du oprette endnu en masterside for telefon og tilføje designelementerne.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online