Läs om hur du skapar prototyper eller trådramar för webbplatser i Adobe Muse.

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.

Adobe Muse är mycket användarvänligt och du kan använda det till att snabbt skapa prototyper för webbprojekt som du kan visa online. Möjligheten att skapa testwebbplatser innebär att du kan dela länkar med potentiella kunder så att de kan förhandsvisa prototyperna online med samma webbläsare som den slutliga versionen ska visas med. Detta underlättar för kunderna att förstå hur den färdiga webbplatsen kommer att se ut.

fig01.wireframe.b720
Trådramar innehåller platshållare för som anger platsen för sidelementen.

Läs om hur du skapar trådramar, skapar en strukturerad planvyn och skapar platshållarelement för webbplatsen. Du kan ersätta platshållarelementen med faktiska sidelement när du är klar med innehållet.

Arbeta med trådramar

Trådramar visar sidlayouten för webbplatsen och låter dig klicka på länkarna så att du ser flödet på webbplatsen. När du har tittat på och använt trådramarna ska du besöka den publicerade webbplatsen och jämföra trådramarna med den färdiga versionen. Observera hur platshållarelementen i trådramarna har ersatts med grafik i den slutliga versionen av webbplatsen.

Om du vill se hur trådramarna har skapats ska du hämta exempelfilerna (ZIP-fil på 4,5 MB). Packa upp ZIP-filen, öppna mappen och leta reda på filen KevinsKoffeeKartWire.muse. Dubbelklicka för att öppna trådramarna i Adobe Muse. Använd planvyn så att du lär dig hur sidorna ordnas i olika lager för att bygga ut platskartan. Dubbelklicka på de olika sidorna för att öppna dem i vyn Design och för att utforska hur de är uppbyggda.

Adobe Muse innehåller många funktioner som hjälper dig med att skapa trådramar:

  • Vyn Design innehåller ett valfritt kolumnstödraster som underlättar justeringen av layoutelementen.
  • Flexibla ritverktyg gör det enkelt att skapa platshållarformer för grafik.
  • Panelen Resurser innehåller funktioner som hjälper dig att uppdatera platshållarbilder.
  • I Adobe Muse optimeras, segmenteras och exporteras alla bildfiler när du publicerar eller exporterar en webbplats.
  • Texthuvuden och styckeformat hjälper dig att enkelt skapa strukturerade sidor och ändra textformatering.
  • Du kan använda kommandot Montera till att spara en kundlogotyp direkt i webbläsaren och montera den i Adobe Muse-filen.
fig02.wireframe.b720
Välj Arkiv > Montera för att snabbt lägga till varumärkselement i trådramar.

Skapa trådramar för kundgodkännande

Efter ett inledande möte med kunden kan du skapa en trådramsmodell av webbplatsen och markera positioner och funktioner för sidelementen för att markera den slutliga webbplatsens grafik och textformatering. Syftet med en trådram är att återge strukturen för varje sida genom att skapa en simulering av webbpresentationen utan att störas av färger eller visuellt innehåll. Rektanglar används som platshållare för att markera platsen för bilder och handskrivna eller generella teckensnitt för att visa områden på sidan med textinnehåll.

Trådramar har följande fördelar:

  • De ger kunden möjlighet att fokusera på webbplatsens struktur och förstå sidlayouten.
  • De ger en interaktiv direktupplevelse vilket hjälper kunden att granska och godkänna webbplatsen.
  • De tjänar som ett kommunikationsverktyg som förtydligar webbplatsens design och funktioner.

Förutom att vara ett webbdesignverktyg kan du använda Adobe Muse till att skapa modeller av projekt. Du kan omedelbart skapa en fungerande provwebbadress och skicka den till dina kunder i ett e-postmeddelande, vilket förenklar godkännandeprocessen. Men det är inte den enda fördelen med att skapa trådramsmodeller i Adobe Muse.

Genom att använda trådramar i Adobe Muse kan du förbättra produktiviteten jämfört med andra designverktyg eftersom funktionerna för att redigera bilder i andra program och de redigerbara styckeformaten gör det enkelt för webbutvecklare att uppdatera .muse-filen och konvertera de godkända trådramarna till den slutliga publicerade versionen. När du fått kundens godkännande behöver du inte kasta bort trådramarna och börja om från början med att skapa projektet. Du kan nu omedelbart börja uppdatera de godkända trådramarna genom att lägga till det faktiska webbinnehållet och bygga upp den slutliga versionen. Medan du håller på kan du publicera ett antal testwebbplatser för att dokumentera framstegen och dela länkarna med dina kunder allt medan webbplatsens design utvecklas.

Du använder följande grundläggande arbetsflöde när du skapar webbplatser med trådramar:

  • Du konstruerar trådramarna och publicerar en kostnadsfri testversion.
  • Kunden granskar den upplagda webbplatsen genom att klicka på sidorna.
  • Kunden begär ändringar eller ber om förklaringar om designen.
  • När eventuella nödvändiga ändringar är gjorda godkänner kunden trådramarna.
  • Du uppdaterar webbplatsen med trådramar och lägger till grafiska element och färg.
  • Du uppdaterar styckeformaten för att formatera det befintliga textinnehållet.
  • Kunden granskar den uppdaterade versionen av webbplatsen och begär fler ändringar.
  • Du gör de begärda ändringarna.
  • Kunden godkänner den färdiga versionen.
  • Du uppgraderar webbplatsen, konfigurerar domänen och publicerar den slutliga webbplatsen.

Undersöka webbplatsstrukturen med hjälp av vyn Plan i Adobe Muse

Om du vill se hur webbplatssidorna är placerade i en hierarki som definierar över- och undernivåer för navigeringslänkarna öppnar du .muse-filen med trådramarna i Adobe Muse och tittar på den. När du öppnar projektet ser du planvyn med alla sidor för webbplatsen.

fig03.wireframe.b720
Sidorna för trådramarna visas i planvyn.

Observera att det finns två lager, en övernivå och en undernivå, som representerar platskartans hierarki. Du kan när som helst medan du utvecklar webbplatsen eller när du administrerar den, klicka och dra dessa sidor för att flytta dem inom webbplatsens struktur.

Så här skapar du nya sidor:

  1. Klicka på + (plus) till höger om eller under en befintlig sida och ange sedan namnet genom att klicka i namnfältet för sidan.

    Var så beskrivande som möjligt när du namnger sidorna.

  2. Högerklicka på en sidminiatyrbild och använd menyalternativen som visas för att duplicera, ta bort eller ändra namn på den.

    Du kan även föra musen över en sida och klicka på ikonen X, som visas i det övre högra hörnet, för att ta bort den.

  3. Om du följer med i framställningen ska du försöka lägga till, flytta och ta bort sidor för att ändra platskartan. Välj Redigera > Ångra om du vill återställa trådramen för webbplatsen till det tidigare läget.

    Gränssnittet i vyn Plan är enkelt att använda. Information om alla sidnamn och alla länkar som visas i menywidgetar sparas. Alla ändringar du gör uppdateras automatiskt för att säkerställa att länkarna inte bryts.

Använda grafikformat för att skapa platshållarelement som delar attribut

På samma sätt som i programmet Adobe Illustrator och Adobe Photoshop får du hjälp i Adobe Muse med att skapa bildformat som du kan använda på ett antal element för att skapa ett enhetligt utseende. Detta är användbart för trådinramning (samt för att utforma sidor) eftersom du kan ändra ett befintligt grafikformat och snabbt uppdatera alla andra sidelement där samma format används. Du kan också kopiera befintliga format för att skapa variationer av dem.

Så här använder du grafikformat till att använda attribut på former och skapa platshållare för bildfiler på en trådramswebbplats:

  1. Använd rektangelverktyget för att rita tre rektanglar på en sida i vyn Design.

  2. Markera en av rektanglarna och redigera den genom att ställa in linjefärg, fyllningsfärg och textens opacitet. Lägg dessutom till grafikeffekter som skuggor.

  3. Medan rektangeln fortfarande är markerad klickar du på Nytt grafikformat längst ned på grafikformatspanelen. Formaten baseras på formateringen av den valda rektangeln. Dubbelklicka på det nya grafikformatet för att ge det ett beskrivande namn.

  4. Markera en av de andra rektangulära formerna och använd samma grafikformat på den genom att klicka på formatets namn. Upprepa detta för att använda formatet på den tredje rektangeln så att samma format används för alla tre rektanglarna.

  5. Markera en rektangel och redigera den för att ändra formatet något. Observera att ett plustecken (+) visas på grafikformatspanelen intill det redigerade formatets namn.

  6. Högerklicka på formatnamnet på grafikformatspanelen och välj Definiera om format. De andra två rektanglarna uppdateras nu så att de matchar det nya formatet och plustecknet (+) tas bort.

  7. Använd grafikformat för att snabbt formatera former för att skapa enhetliga trådramsnivåer och uppdatera en uppsättning webbplatsresurser snabbt när en kund begär ändringar.

Skapa strukturerade webbsidor och formatera text med styckeformat

När du bygger upp en trådramswebbplats kan du använda textverktyget för att skapa och lägga till platshållartext (eller lorem ipsum) som du senare byter ut. Om emellertid din kund redan har en befintlig webbplats kan du kopiera text direkt från webbläsaren och klistra in den i textramarna. När du kopierat textelementen kan du använda textpanelen till att använda ett format på texten.

Med styckeformat kan du definiera rubriktext och stycketaggar för att strukturera textinnehållet på sidan:

  1. Använd textverktyget i vyn Design till att dra en textram till sidan. Antingen skriv eller klistra in text i en textram för att fylla i den.

  2. Använd textpanelen eller alternativen på kontrollpanelen högst upp på arbetsytan i vyn Design för att ange in formateringsalternativ som teckensnitt, teckenstorlek, teckenfärg och andra egenskaper.

  3. Klicka på Skapa nytt styckeformat längst ned på styckeformatspanelen för att skapa ett nytt styckeformat. Dubbelklicka på namnet på det nya formatet och ge det ett beskrivande namn.

  4. Högerklicka på formatet och välj sedan Formatalternativ. Använd menyn Stycketagg till att ange styckeformatet för en viss HTML-tagg, till exempel P, H1, H2 eller H3.

    fig04.wireframe.b720
    Högerklicka på ett formatnamn på styckeformatspanelen och använd sedan dialogrutan Alternativ för format för att definiera formatet för en viss rubrik eller stycketagg.

  5. Skapa ytterligare några textramar med text. Observera att om du klickar på styckeformatsnamnet medan en textram är markerad, kommer du att använda formateringen för styckeformatet på den markerade textramen. Om du senare markerar en av textramarna med ett använt styckeformat och ändrar det kommer plustecknet (+) att visas på styckeformatspanelen intill formatets namn. Detta indikerar att formatet har ändrats och att samma beteende som för grafikformat används.

  6. Om du automatiskt vill uppdatera alla textramar med samma format högerklickar du på formatnamnet på styckeformatspanelen och väljer sedan Definiera om format.

    Som framgår av detta korta exempel kan du skapa olika textbehållare och ange att specifika format ska användas för att skapa en enhetlig innehållsdesign. När du sedan uppdaterar trådramarna för att utforma den slutliga versionen av webbplatsen är det enkelt att uppdatera formaten enligt kundens önskemål. Att skapa strukturerade webbsidor med textbehållare är det bästa sättet att optimera rangordningen för sökmotorer.

Obs!

När du skapar sidor med enfärgad bakgrundsfärg ska du välja fyllningsfärgen för bakgrunden så att den matchar textramarna. Genom att göra det går att publicera textinnehåll på ett mer effektivt sätt i Adobe Muse. Om du inte känner till bakgrundsfyllningen kommer kantutjämningen av texten att bli mindre skarp eftersom bakgrundsfärgen för textramen blir genomskinlig i Adobe Muse. Om emellertid bakgrunden visas med övertoningar eller bilder ska du låta textramarnas fyllningsfärg vara Ingen.

Uppdatera platshållarbilderna med slutliga webbgrafik

När kunden har godkänt trådramarna kan du snabbt uppdatera webbplatsen och använda de faktiska bildfilerna.

  1. Markera en bildplatshållare på sidan.

  2. Öppna resurspanelen för att hitta det valda sidelementet.

  3. Högerklicka på sidelementet. På den meny som visas finns två alternativ som du kan använda till att bildfilen beroende på hur du har satt ihop trådramswebbplatsen.

    Om du har skapat en fil i Adobe Photoshop eller Adobe Fireworks och monterat den på sidan kan du välja Redigera original för att redigera den ursprungliga filen i den produkt som användes till att skapa den. När du sparar mallfilen och återgår till Adobe Muse uppdateras automatiskt den monterade förekomsten av filen på webbplatsen.

    Om du i stället skapade platshållare för bildfiler i Adobe Muse med hjälp av verktyget Rektangel byter du en platshållarfil mot den slutliga bilden genom att välja Länka om alla förekomster och bläddra efter en fil på datorn.

    fig05.wireframe.b720
    Högerklicka på resursnamnet och välj Redigera original för att öppna mallsidan för en platshållarfil i bildredigeringsprogrammet som du använde för att skapa den.

  4. Upprepa dessa steg för att ersätta alla platshållarbilder på sidan med faktiska bildfiler.

    Obs!

    När du högerklickar på ett resursnamn på resurspanelen kan du även välja Gå till resurs. När du väljer det här alternativet öppnas den sida som innehåller den markerade resursen så att du snabbt kan uppdatera den.

Tillgång till optimerade bildfiler som genereras i Adobe Muse

Förutom att publicera Adobe Muse-webbplatser till värdservern kan du även få tillgång till hela mappen med uppdelade och exporterade bildfiler genom att exportera hela webbplatsen:

  1. Välj Arkiv > Exportera som HTML.

    Dialogrutan Exportera till HTML öppnas.

  2. Välj den plats på datorn dit du vill exportera webbplatsfilerna och klicka sedan på OK.

Filerna exporteras och sparas i den lokala mapp du har angett. Navigera till mappen och öppna bildmappen för att få åtkomst till de optimerade bildfilerna. Du kan ändra syfte för dessa bildfiler och skapa nyhetsbrev, mobilprogram, sidor för sociala nätverk och andra närliggande projekt.

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