Läs om hur du skapar webbplatser för mobila enheter och smarta mobiltelefoner.

Obs!

Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns på sidan med information om när Adobe Muse inte längre kommer att vara tillgängligt.

Du kan skapa och utforma webbplatser för mobila enheter med hjälp av responsiv webbdesign i Adobe Muse. Med responsiv layout kan du använda en enda Muse-fil för att skapa webbplatser för alla enheter, inklusive mobiltelefoner.

Du måste först bestämma för vilken webbläsarbredd du vill utforma din webbplats. Därefter kan du fortsätta med att utforma din webbplats. Mer information om hur du skapar webbplatser med responsiva layouter för mobila enheter finns i Skapa responsiva webbplatser.

Om du vill utforma en alternativ layout för en webbplats som endast ska användas för mobila enheter läser du i följande artikel.

Utforma webbplatser för mobila enheter

Med hjälp av Adobe Muse kan du skapa webbplatslayouter för webbinnehåll som ska visas på stationära datorer, smarta mobiltelefoner och surfplattor. Med hjälp av funktioner för att utforma för mobila enheter kan du skapa alternativa layouter för telefoner, surfplattor och datorer.

Adobe Muse innehåller inställningar, som objekt med 100 % breddväxling och funktionen Sidfot som alltid visas, som gör att din design återges på rätt sätt på de många olika enhetsskärmar som finns. Med Adobe Muse kan du använda välbekanta arbetsflöden och skapa attraktiva designer för alla tänkbara skärmstorlekar.

Så här skapar du en alternativ layout för mobiltelefoner:

  1. Öppna Adobe Muse och välj Arkiv > Ny webbplats.

    Välj Fast bredd för att skapa webbplatser för särskilda enheter.
    Välj Fast bredd för att skapa webbplatser för mobiltelefoner.

  2. Välj Fast bredd och klicka sedan på Avancerade inställningar i samma dialogruta.

    Avancerade inställningar för ny webbplats
    Avancerade inställningar när du skapar en ny webbplats.

  3. Ange ett värde för Max. sidbredd, vilket är sidans maximala bredd.

    Välj en lämplig webbläsarbredd för mobiltelefoner och ange det värdet.

  4. Ange marginal och utfyllnadsvärden för din webbplats för mobiltelefoner. Ange följande information:

    • Sidbredd och sidhöjd: Ange de ursprungliga måtten på sidan. Sidhöjden ökas automatiskt när du lägger till innehåll. Därför finns inget största värde för sidhöjd.
    • Kolumner och kolumnbredd: Muse-webbsidan delas visuellt upp i lika stora kolumner så att du kan justera designelementen rätt. Kolumnbredden anges automatiskt för ett visst antal kolumner och spaltmellanrummet.
    • Marginaler och utfyllnad: Marginaler är ett tomt område på webbsidan, utanför designområdet. Utfyllnad gör att du kan ha ett tomt område inom webbsidans designområde.

    Klicka på OK.

    Du kan börja skapa layouter för webbplatsen för mobila enheter.

Lägga till en telefonlayout för en befintlig Adobe Muse-webbplats

När du skapar ett nytt projekt kan du utforma någon av layouterna först och sedan skapa fler layouter i samma .Muse-fil.  När du publicerar eller exporterar en webbplats genereras automatiskt en fil med namnet sitemap.xml som innehåller en lista över alla sidor, för alla layouter. sitemap.xml-filen laddas upp tillsammans med de andra webbplatsresurserna. Det förbättrar sökmotoroptimeringen genom att hjälpa sökmotorer att indexera webbplatsen, så att sidorna får en korrekt ranking i sökresultaten.

När du skapar en ny mobil layout för en telefon är en av de första sakerna du behöver göra med en existerande webbplats att granska innehållet och avgöra vilka objekt som behövs för användarupplevelsen med en smarttelefon. Eftersom besökare med smarta mobiltelefoner ofta är på språng och ser innehållet på en mindre skärm är det viktigt att förenkla designen och endast visa det innehåll som är användbart och enkelt att interagera med på en pekskärm.

  1. Öppna den befintliga .Muse-fil du vill lägga till en alternativ layout för mobiltelefoner i.

  2. Öppna alla sidor i projektet och klicka på Sida > Lägg till alternativ layout > Telefon.

    Lägga till alternativ för Telefonlayout
    Lägga till en telefonlayout för att skapa en webbplats för mobila enheter.

  3. Du kan använda den här menyn för att välja en befintlig layout som ska kopieras. I det här exemplet ska du välja Skrivbord, så att skrivbordslayouten kopieras till telefonlayouten.

    Observera att du kan välja att kopiera webbplatskarta, sidattribut och webbläsarfyllning. Använd standardinställningarna för att kopiera den befintliga informationen för skrivbordsplatsen till telefonlayouten.

  4. Klicka på OK för att stänga dialogrutan och lägga till telefonlayouten.

    Muse skapar en webbplatskarta för telefonlayouten. Sidnamn, webbplatsstruktur och attribut för mallsidan kopieras över. Layoutknappen Telefon visar inte längre ett plustecken (+) bredvid sitt namn eftersom telefonlayouten har lagts till i Muse-projektet.

    Du kommer att märka att det faktiska sidinnehållet inte läggs till i sidminiatyrbilden för telefonlayouten. Detta är avsiktligt och gör att du kan kopiera endast det innehåll du vill ha på varje sida i en layout för mobila enheter. När du hämtar det innehåll du vill lägga till på varje ny sida kan du ändra dess storlek så att det passar för mobilskärmens mindre format.

    Du kan lägga till nya sidor genom att klicka på plustecknet till höger om sidan Hem. När du ställt in webbplatskartan kan du börja designa gränssnittet för mobilanvändare.

    Läs nästa avsnitt för att ta reda på hur du ställer in mallsidorna för telefonlayouten.

    Skapa webbplatskartan för layouten för mobila enheter genom att lägga till nya sidor
    Skapa webbplatskartan för layouten för mobila enheter genom att lägga till nya sidor.

Konfigurera mallsidan och lägga till gemensamma webbsideelement

  1. Dubbelklicka på A-mallstelefonsidan i planvyn för att öppna den i designvyn.

  2. Öppna gränssnittet Webbläsarfyllning för att ställa in en bakgrundsbild.

  3. Klicka på Lägg till bild i bilddelen. Bläddra och markera den fil du vill ange som bakgrundsbild.

    Alternativ för att lägga till en bild
    Lägg till en bakgrundsbild till telefonmallsidan.

  4. Ange alternativet Passning till Anpassa till fyllning och klicka i den mittre positionen.

  5. Klicka i det gråa området utanför sidan, eller var som helst i Kontrollpanelen för att stänga gränssnittet Webbläsarfyllning.

Lägga till hyperlänkar för webbplatsnavigering

Med Adobe Muse kan du enkelt länka till externa sidor, hämtningsbara filer, avsnitt i webbsidor och mer med hyperlänkar. Det är viktigt att skapa lämplig navigering på webbplatsen så att besökaren enkelt kan ta sig mellan sidor på din webbplats. En välgjord webbplatsnavigering hjälper dig också att optimera din webbplats för sökmotorer. Mer information finns i Skapa hyperlänkar.

Listrutan Hyperlänkar lista sidor eller ankarlänkarna som läggs till i din webbplatskarta. Börja skriva namnet på sidan eller ankarpunkten för att söka efter rätt länkar. Du behöver bara skriva de första bokstäverna så filtreras resultaten och visas i en listruta i menyn Hyperlänkar. På så sätt kan du lätt och snabbt få åtkomst till länkarna som du vill uppdatera.

Alternativ för hyperlänkar
Filtrera listan med länkar genom att skriva de första bokstäverna i fältet i menyn Hyperlänkar.

Lägga till sidinnehåll på telefonlayoutsidor

Du börjar med att färdigställa sidan Hem.

  1. Klicka på fliken Integrerad (Telefon). Kopiera hela gruppen med fyra numrerade knappar.
  2. Använd funktionen Gå till sida för att växla till sidan Hem (Telefon) och klistra in gruppen. Länkarna som du lade till i förra avsnittet bevaras, så nu har både sidan Hem och mallsidan Integrerad samma navigering.
  3. Använd markeringsverktyget för att placera gruppen i mitten av sidan Hem, nära sidfotens nederkant.
  4. Klicka på fliken Klippbok (Skrivbord) för att återgå till sidan Klippbok. Kopiera textramen i den vänstra rutan med texten "There's more than one way to solve a problem".
  5. Klicka på fliken Hem (Telefon) och klistra in textramen. Placera ramen centrerat ovanför gruppen med knapparna med hjälp av markeringsverktyget.
Designen för sidan Hem är färdig
Designen för sidan Hem är färdig.

Nästa steg är att lägga till sidinnehållet för sidan Avsnitt 01.

  1. Klicka på fliken Klippbok (Skrivbord) för att återgå till sidan Klippbok. Markera den vita rundade bakgrundsrektangeln och de tre textramarna i den andra rutan från vänster. De tre textramarna innehåller cirkeln 01, platshållartexten för avsnitt 01 samt den orangefärgade knappen Telefon. Kopiera de markerade objekten.
  2. Tryck på Kommando+J (OS X) eller Ctrl+J (Windows) och skriv de första bokstäverna i namnet Avsnitt 01. Klicka på Nedåtpil för att välja telefonsidan Avsnitt 01 och tryck sedan på Enter så att den öppnas i vyn Design.
  3. Klistra in elementen på sidan Avsnitt 01 i telefonlayouten. Centrera dem på sidan med hjälp av de tillfälliga stödlinjerna som visas när du flyttar dem med markeringsverktyget.

Syftet med sidan Avsnitt 01 är att ge en snabb introduktion till företaget och göra det enkelt för besökare som använder mobiltelefon att ringa upp företaget. När du designar webbplatser för mobiltelefoner kan du lägga till en ny typ av länk som besökaren kan peka på för att få smarttelefonen att ringa upp ett visst nummer. Det här är en bra funktion för webbplatser för mobiltelefoner eftersom den gör det enkelt för potentiella kunder att ringa upp företaget.

Lägg till en länk för att ringa ett telefonnummer i en mobiltelefonlayout genom att utföra följande steg:

  1. Markera knappen Telefon med markeringsverktyget.
  2. Skriv tel:+1 och sedan ett telefonnummer i menyfältet Länkar, så här:
    tel:+14155551234

Det här är formatet som webbläsare i mobiltelefoner känner igen som telefonnummerlänkar.

  1. Spara länken genom att trycka på Enter.

Obs! Om du hellre vill skapa en e-postlänk kan du ange följande format i menyfältet Hyperlänkar:
mailto:designers@design-is-fun.com

När du lagt till länken till knappen Telefon är designen för sidan Avsnitt 01 färdig.

  1. Klicka på fliken Klippbok (Skrivbord) för att återgå till sidan Klippbok. Markera den vita rundade bakgrundsrektangeln, den gröna cirkeln 02, textramen Avsnitt 02, den inbäddade kartan och den gröna knappen Karta. Kopiera de markerade objekten.
  2. Tryck på Kommando+J (OS X) eller Ctrl+J (Windows) och skriv de första bokstäverna i namnet Avsnitt 02. Klicka på Nedåtpil för att välja telefonsidan Avsnitt 02 och tryck sedan på Enter så att den öppnas i vyn Design.
  3. Klistra in elementen som du kopierade i steg 1 på sidan Avsnitt 02 i telefonlayouten. Centrera dem på sidan med hjälp av justeringsstödlinjerna som visas när du använder markeringsverktyget.

Sidan Avsnitt 02 innehåller inbäddad HTML-kod som genererats på webbplatsen Google Maps för att skapa en interaktiv karta.

Om du genomfört självstudiekursen Komma igång med Muse så kanske du minns att du kopierade källkod för Google Maps från Googles webbplats och använde funktionerna för inbäddad HTML i Muse för att klistra in den på sidan.

Lyckligtvis har Google Maps-koden redan funktioner för fingergester på pekskärmar, så besökare med enheter med pekskärm kan enkelt interagera med kartan. I det här exempelprojektet har kartans mått redan anpassats.

Om du skulle behöva ändra måtten för inbäddat HTML-innehåll i dina egna projekt kan du högerklicka på innehållet och välja HTML för att visa koden i HTML-fönstret. Du kan redigera värdena för höjd och bredd i koden om du vill ändra kartans storlek så att den får plats på en mindre skärm.

Ändra storlek på mått på inbäddade HTML-element i koden
Om du behöver ändra storleken på inbäddade HTML-element kan du uppdatera måtten i koden.

Om du öppnade fönstret Redigera HTML klickar du på OK för att stänga det utan att göra några ändringar.

  1. Klicka på Karta.

Den här gången ska du lägga till en länk till en extern webbplats (Google Maps) så att det blir enkelt för besökare med mobila enheter att visa kartan i fullständig version i ett nytt webbläsarfönster.

  1. Kopiera länken nedan och klistra in den i fältet på menyn Hyperlänkar:

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. Klicka på ordet Hyperlänkar till vänster om menyn Hyperlänkar. Markera kryssrutan Öppna länken i ett nytt fönster eller på en ny flik i dialogrutan som visas. I fältet Verktygstips skriver du följande text: Map to Adobe Fremont.
Alternativ för hyperlänk
Ange att länken ska öppnas i ett nytt webbläsarfönster och lägg till ett verktygstips.

  1. Stäng dialogrutan Hyperlänkar genom att klicka utanför den.

Nästa steg är att lägga till sidinnehållet för sidan Avsnitt 03.

  1. Klicka på fliken Klippbok (Skrivbord) för att återgå till sidan Klippbok. Markera den vita rundade bakgrundsrektangeln, den lila cirkeln 03, textramen Avsnitt 03, kontaktformuläret och skicka-knappen. Kopiera de markerade objekten.
  2. Tryck på Kommando+J (OS X) eller Ctrl+J (Windows) och skriv de första bokstäverna i namnet Avsnitt 03. Klicka på Nedåtpil för att välja telefonsidan Avsnitt 03 och tryck sedan på Enter så att den öppnas i vyn Design.
  3. Klistra in elementen som du kopierade i steg 1 på sidan Avsnitt 03 i telefonlayouten. Centrera dem på sidan med hjälp av justeringsstödlinjerna som visas när du använder markeringsverktyget. Formaten som använts på formulärwidgeten Kontakt på skrivbordslayouten bevaras vid kopiering till telefonlayouten. De enda förändringarna som görs för att förbereda formuläret för en mobiltelefonlayout är att ändra storleken på formuläret och formulärelementen så att de får plats på en mindre skärm.

På sidan Avsnitt 03 finns formulärwidgeten Kontakt, som använder Business Catalyst-skript och -databaser på serversidan för behandling av skickade formulärdata. När du klickar på Publicera och överför webbplatsfilerna från Muse fungerar formuläret automatiskt.

Obs! Även om du kan använda andra tjänsteleverantörer som värdar för din färdiga Muse-webbplats, bör du vara medveten om att du kommer behöva skriva en del extra kod för att få kontaktformulären att fungera om de inte har Business Catalyst-servrar som värdar.

I det här exempelprojektet är inte CAPTCHA aktiverat för kontaktformuläret. CAPTCHA är en inställning på menyn Alternativ för formulärwidgeten Kontakt som du kan lägga till när du vill bekräfta att formuläret fylls i av en människa, och inte ett skript eller en "skräppostrobot". Gränssnittet för CAPTCHA visar en bild med en serie tecken och besökaren ska skriva samma teckensekvens i rätt följd för att få skicka sitt meddelande via formuläret. Även om inlämnade formulär från skräppostrobotar kan vara störande, så är det också viktigt att tänka på att webbplatsen ska gå att använda på en mobiltelefon. Om du gör formuläret för krångligt att fylla i kan besökarna eventuellt bestämma sig för att inte skicka sitt meddelande.

Sidan Avsnitt 03 är färdig. Du behöver inte lägga till någon länk för skicka-knappen eftersom dess konfiguration ingår i formulärwidgeten Kontakt.

Den sista sidan i telefonlayouten, Avsnitt 04, innehåller en bildspelswidget. Widgetarna i Muse har designats och testats för att fungera med alla moderna webbläsare för stationära datorer och mobila enheter, så du behöver inte ändra någonting för att bildspelet ska fungera med en pekskärm.

Följ de här stegen för att kopiera innehållet från sidan scratch i skrivbordslayouten till sidan Avsnitt 04 i telefonlayouten:

  1. Klicka på fliken Klippbok (Skrivbord) för att återgå till sidan Klippbok. Markera den vita långa bakgrundsrektangeln, den röda cirkeln 04, widgeten Bildspel och textramen Avsnitt 04. Du kan markera alla element genom att klicka och dra över dem alla med markeringsverktyget. Kopiera de markerade objekten.
  2. Tryck på Kommando+J (OS X) eller Ctrl+J (Windows) och skriv de första bokstäverna i namnet Avsnitt 04. Klicka på Nedåtpil för att välja telefonsidan Avsnitt 04 och tryck sedan på Enter så att den öppnas i vyn Design.
  3. Klistra in elementen som du kopierade i steg 1 på sidan Avsnitt 03 i telefonlayouten. Centrera dem på sidan med hjälp av justeringsstödlinjerna som visas när du använder markeringsverktyget. Formaten som använts på formulärwidgeten Kontakt på skrivbordslayouten bevaras vid kopiering till telefonlayouten. De enda förändringarna som görs för att förbereda formuläret för en mobiltelefonlayout är att ändra storleken på formuläret och formulärelementen så att de får plats på en mindre skärm. När du lägger till widgetar med interaktiva funktioner (t.ex. Bildspel) i mobila layouter som du skapar i Muse så kommer du att märka att panelen Alternativ visar alternativet Aktivera svepning. Den här inställningen är aktiverad som standard, vilket innebär att eventuella widgetar som läggs till i dina mobila designer automatiskt konfigureras för att användaren ska kunna peka och använda fingergester på pekskärmar. Sidan Avsnitt 04 innehåller widgeten Bildspel som visar motsvarande bild när man pekar på en miniatyrbild. Bildspelet är konfigurerat för att använda horisontell övergång för att växla mellan bilder i galleriet. Det här exemplet kräver användarinteraktion för att bilderna ska visas, men du kan om du vill ange att widgeten Bildspel ska spelas upp automatiskt, så att den växlar mellan bilder automatiskt medan sidan läses in.

Obs! Om du konfigurerar bildspelswidgetar för att använda övergångarna Tona, Horisontellt eller Vertikalt så aktiverar koden i Muse automatiskt alternativet Aktivera svepning så att besökare kan svepa med fingret på sin pekskärm för att bläddra mellan bilderna i bildspelet.

I nästa avsnitt, Skapa mobila layoutdesigner i Muse, del , får du lära dig hur du enkelt kan uppdatera resurser för alla plattformar för mobila enheter samt hur du kan publicera din Muse-webbplats för alla layouter för mobila enheter.

Uppdatera och optimera resurser för en webbplats för mobila enheter

Jämfört med stationära datorer har surfplattor och mobiltelefoner mycket mer begränsad processorkraft, långsammare anslutningshastigheter och mindre lagringskapacitet. De här faktorerna kräver särskild hänsyn när du designar och levererar webbplatsdesign för mobila enheter.

Muse innehåller funktioner som kan hjälpa dig att optimera grafikvisningen i mobila layouter så att du kan se till att webbplatsen går snabbt att läsa in och levererar godkända prestanda.

  1. Tryck på Kommando+7/Ctrl+7 för att visa skrivbordslayouten, och dubbelklicka sedan på skrivbordsfilen för A-mallsidan så att den öppnas i vyn Design.
  2. Öppna panelen Resurser genom att klicka på fliken för den så att den aktiveras. Om den är stängd väljer du istället Fönster > Resurser.
  3. Markera den stora bakgrundsbilden med de gröna kullarna. Resursen markeras i panelen Resurser.
  4. Klicka på resursens namn, background.jpg, för att utöka listan över förekomster av den på webbplatsen. Observera att filen för bakgrundsbilden finns med i listan tre gånger, med två olika ikoner som anger att den används i både telefon- och skrivbordslayouterna.
Panelen Resurser
Granska förekomsterna av background.jpg i panelen Resurser för att få information om var resursen förekommer på webbplatsen.

I den här lilla exempelwebbplatsen är listan över resurser ganska hanterlig, men när du skapar större webbplatser kan listan över resurser vara längre och svår att överblicka.

Du kan göra det lättare att hitta i listan över resurser genom att markera den första posten för varje resurs och klicka på pilen till vänster för att komprimera förekomsterna. Klicka på den igen om du vill expandera och visa hela listan med förekomster av resursen där den används i webbplatsprojektet.

Om du vill hitta resurserna som används i en viss layout kan du klicka längst upp i den högra kolumnen i panelen Resurser, där ikonerna för Skrivbord, Surfplatta och Telefon visas. Med hjälp av den kan du sortera listan med resurser så att resurserna för varje layout visas tillsammans.

Panelen Resurser
Klicka på rubriken för valfri kolumn i panelen Resurser för att sortera listan över resurser efter den typen.

Om du vill ändra en grafikfil och samtidigt ändra alla förekomster av den (i alla layouter) kan du högerklicka på resursens namn och välja Redigera original på den meny som visas.

Välj Redigera original för att uppdatera resursen för hela webbplatsen
Välj Redigera original för att uppdatera resursen för hela webbplatsen.

Originalfilen som du monterade öppnas i Photoshop, Fireworks eller det bildredigeringsprogram som du skapade den i, så att du kan göra dina ändringar snabbt.

När du sparar den ändrade originalfilen och återvänder till Muse, så kommer objektet i panelen Resurser att visa ikonen Ur synk för att ange att versionen av grafikfilen som används i webbplatsen inte längre stämmer överens med källfilen. Högerklicka på filen igen och välj Uppdatera, så uppdateras alla förekomster av grafikfilen till den nya versionen.

Använd funktionen Uppdatera till att uppdatera alla förekomster av resursen som används på webbplatsen
Använd funktionen Uppdatera för att uppdatera alla förekomster av resursen som används på webbplatsen.

Förhandsvisa layouter för mobila enheter

Det finns flera olika alternativ du kan välja mellan när du ska förhandsvisa webbplatsdesignerna som du skapar:

Klicka på Förhandsvisa från vyn Design i skrivbordslayouten, så renderas HTML, CSS och JavaScript av den inbyggda Webkit-baserade emulatorn. Med Förhandsvisa får du se hur dina layouter skulle visas i en webbläsare innan du publicerar en webbplats och kontrollerar den online med en enhet.

Klicka på Förhandsvisa från vyn Design för telefonlayouten för att visa hur telefonlayouten ser ut på skärmen. Använd menyn Förhandsvisningsstorlek till att växla mellan iPhone 4, iPhone 5, Samsung Galaxy S III och Nokia Lumia 920 och visa layouten på olika skärmstorlekar.

Förhandsvisa mobil layout
Menyn Förhandsvisningsstorlek visas när du förhandsvisar sidor i en telefon- eller surfplattelayout.

Klicka på ikonen till höger om fönstret Förhandsvisningsstorlek för att växla mellan att visa layouten i stående eller liggande orientering.

I Förhandsvisningsstorlek ingår förhandsdefinierade höjd- och breddförhållanden som täcker de vanligaste skärmstorlekarna för mobiltelefoner.

Vissa smarttelefoner har bredare skärm, t.ex. Motorola Droid. Om en besökare har en bredare skärm, så kommer Viewport-funktionen i Muse automatiskt att anpassa telefonlayoutens bredd så att den passar skärmen.

I förhandsvisningsläge kan du klicka på länkar och navigera runt på webbplatsen. Du kan bläddra, vilket simulerar en fingersvepningsgest, men för att testa den ordentligt kommer du behöva testa gesten på enheten.

Om du klickar på i-knappen bredvid menyn Förhandsvisning i förhandsvisningsläget, så ser du en kommentar med en länk som beskriver ett Adobe-verktyg som heter Edge Inspect. Med hjälp av Edge Inspect kan du använda ett tillägg till webbläsaren Chrome för att ansluta mobila enheter till datorn, och sedan synka dem med innehållet som visas i webbläsaren Chrome på den stationära datorn.

Med Edge Inspect kan du använda Chrome och alternativet Förhandsvisa webbplatsen i webbläsare i Adobe Muse till att visa en webbplats på datorn och samtidigt visa samma webbplatssida automatiskt på alla anslutna enheter. (Du måste ange Chrome som standardwebbläsare.)

Om du önskar kan du även köpa ett tredjepartsverktyg som heter Reflection, och som gör att du kan visa en emulering av enheten (som ansluts via samma nätverksanslutning) på datorskärmen. När du visar en webbplats med en smarttelefon eller surfplatta återspeglar emulatorn enhetens pekskärm.

Ytterligare funktioner för mobila layouter

Sidfot som alltid visas

Liksom i tidigare versioner av Muse kan du dra stödlinjer för att definiera området nedanför sidan och ange sidfotsområdet. Du kan även ange valfritt innehållselement som ett Sidfotsobjekt, vilket innebär att det visas nedanför den minsta sidhöjden som angetts i webbplatsegenskaperna eller nedanför det befintliga sidinnehållet, vilket som nu är längst.

Att definiera sidfotsinnehåll är väldigt praktiskt när en webbplats har flera sidor som är olika långa, eftersom sidfotens placering anpassas i höjdled så att den alltid visas längst ned på sidan utan att överlappa sidans innehåll.

Alternativet Sidfot som alltid visas är aktiverat som standard. Det här är en funktion som är särskilt utformad för besökare med större datorbildskärmar. Du vill normalt sett ha alternativet Sidfot som alltid visas aktiverat för dina webbplatser, eftersom det gör att sidfoten alltid visas i önskat läge, även om webbläsarfönstret är mycket större än webbsidans design, som på en Apple Cinema Display-skärm.

Om du vill se hur det här fungerar kan du förhandsvisa en Muse-webbplats i en webbläsare och zooma ut från sidan. Observera att om du gör sidans innehåll för litet i förhållande till webbläsarfönstret, så visas webbläsarfönstret i området nedanför sidfoten, istället för att sidfoten hålls kvar längst ned.

När du skapar nya webbplatser i Muse kommer du att se att alternativet Sidfot som alltid visas är aktiverat i dialogrutan Ny webbplats.

Alternativ för ny webbplats
Kryssrutan Sidfot som alltid visas är markerad automatiskt när du skapar nya webbplatser.

Allmänt sett är det bäst att använda funktionen Sidfot som alltid visas när du designar webbplatser. Men om du upptäcker att längden på sidan som visas är mycket längre än önskat (eftersom webbplatsen har minimalt med sidinnehåll och sidorna är ganska korta) så kan du alltid avaktivera det genom att avmarkera kryssrutan i dialogrutan Sidegenskaper.

Avaktivera Sidfot som alltid visas i Sidegenskaper.
När du har skapat en webbplats uppdaterar du sidegenskaperna och avaktiverar alternativet Sidfot som alltid visas.

Fästa element

Koden som genereras av Muse testas för att säkerställa att den visas och fungerar som väntat på alla moderna webbläsare och plattformar.

En av webbläsarstandarderna som skiljer sig mellan webbläsare för datorer och mobila enheter är hanteringen av fästa sidelement. När du designar webbplatser för datorwebbläsare kan du välja ett element och använda alternativet i Kontrollpanelen för att fästa det i webbläsarfönstret. Att fästa element kan bidra till en konsekvent navigering. Det kan också vara praktiskt i sammanhang där du vill hålla kvar ett element i samma del av skärmen oavsett hur långt ner på sidan besökaren bläddrar.

När den här texten skrivs finns inte motsvarande funktioner för webbläsare för mobila enheter. Det innebär att du måste hitta andra strategier för att fästa objekt när du designar layouter för telefoner och surfplattor.

När du designar layouterna för telefoner eller surfplattor kommer du att märka att alternativen under Fäst är gråmarkerade och otillgängliga.

Alternativ för fästa element
Gränssnittet Fäst i Kontrollpanelen är inte tillgängligt när du designar mobila layouter.

Publicera en webbplats med layouter för mobila enheter

Du kan publicera webbplatser med flera layouter i Muse med samma metod som du använder i vanliga fall för att enbart publicera skrivbordswebbplatser. Det kan vara bra att publicera testwebbplatser och granska dem med mobila enheter så att du får testa din design på en liten skärm.

Klicka på Publicera eller välj Arkiv > Överför till FTP-värd för att överföra webbplatsfilerna till värdservern.

När du publicerar en Muse-webbplats med flera layouter så går webbplatsen upp med en gemensam URL-adress. Därför behöver du bara registrera ett domännamn, som följande:

http://www.my-site.com

När du publicerar en webbplats med två eller tre olika layouter genereras kod för webbplatsen i Muse, där bl.a. igenkänningsskripten som upptäcker vilken typ av dator eller enhet, och vilken typ av webbläsare som användaren använder för att visa sidan.

Igenkänningskoden avgör plattformen och webbläsarversionen, och visar sedan den rätta layouten. Du behöver inte göra någonting själv för att se till att besökare som använder en surfplatta får se surfplattedesignen och att besökare som använder smarttelefoner får se smarttelefondesignen. Allt sköts bakom kulisserna.

Med de nya funktionerna för mobila layouter i Muse kan du optimera dina mobila layouter så att användare av mobila enheter inte behöver hämta större filer än nödvändigt. Funktionerna för alternativa layouter visar endast de storleksanpassade bilderna så att webbplatsen ger goda prestanda över alla plattformar och webbläsare.

Om du vill ha mer information om hur du arbetar med Muse läser du i artiklarna och självstudiekurserna på hjälpsidan för Adobe Muse.

Använda Gå till sida för att kopiera webbplatsinnehåll mellan layouter

Klicka på fliken Mall (Skrivbord) för att aktivera mallsidan för skrivbord i vyn Design.

Muse underlättar växling mellan layouter med navigeringsverktyget Gå till sida. Den här knappen visas i vyn Design för alla projekt som har flera layouter.

  1. Klicka på knappen Gå till sida.
Knappen Gå till sida
Knappen Gå till sida ser ut som en pil som pekar mot en sida.

När du arbetar med flera layouter kan det vara praktiskt att snabbt kunna växla mellan två eller fler sidor, så att du enkelt kan kopiera och klistra in innehåll.

Obs! Förutom att klicka på knappen Gå till sida kan du även använda kortkommandot Kommando+J (OS X) eller Ctrl+J (Windows).

Dialogrutan Gå till sida visas. Den innehåller ett textfält där du kan skriva de första bokstäverna i namnet på en sida på webbplatsen och sedan snabbt växla till den sidan utan att behöva visa vyn Planera varje gång.

  1. Skriv de tre första bokstäverna i namnet på sidan som du vill hitta. I det här exemplet ska du skriva de tre första bokstäverna i ordet Mallsida, dvs. "mal".

Fältet söker efter matchande namn på sidor, och de som hittas visas i listan nedanför.

  1. Tryck två gånger på Nedåtpil så att sidan A-mallsida (Telefon) markeras, och tryck sedan på Enter för att öppna den.

Sidan Mallsida (Telefon) visas i vyn Design och kan redigeras.

Ett annat bra sätt att växla mellan de olika layouterna inom en webbplats är att använda de nya kortkommandona:

  • Skrivbordslayouten visas med Kommando+7/Ctrl+7
  • Surfplattelayouten visas med Kommando+8/Ctrl+8
  • Telefonlayouten visas med Kommando+9/Ctrl+9

De här kortkommandona är endast aktiva när du redigerar en webbplats som faktiskt innehåller motsvarande layout. Experimentera med att använda de nya kortkommandona tills du hittar ett arbetsflöde för att växla mellan layouter och enskilda sidor som passar dina behov.

I nästa avsnitt ska du skapa en andra mallsida och lägga till designelementen.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy