Läs om hur du visar och formaterar en grupp med närliggande innehåll med hjälp av flik- eller dragspelspaneler 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.

Lägga till en flikpanelswidget

  1. Öppna panelen Widgetbibliotek (Fönster > Widgetbibliotek). Expandera Paneler och markera widgeten Flikpaneler. Dra widgeten från widgetbiblioteket till panelen Design.

    Flikpanelswidgeten visar standardformateringen när du drar den till en sida.
    Flikpanelswidgeten visar standardformateringen när du drar den till en sida.

  2. Klicka på den översta fliken på den högra sidan tre gånger. Det första klicket markerar hela flikpanelen, det andra klicket markerar flikbehållaren och det tredje klicket markerar fliken på den högra sidan.

    Kontrollera markeringsindikatorn för att se vilket underelement av widgeten som är markerat. Tryck på Delete (Mac) eller Backsteg (Windows) för att ta bort den tredje fliken. När du har gjort den här ändringen återstår bara två flikar. Klicka någon annanstans på sidan.

  3. Klicka på widgeten en gång till så att hela flikpanelen markeras. Dra i handtagen för att ändra storlek på hela widgeten till bredden 840 och höjden 645. När du drar i handtagen kan de se måtten som visas medan du drar.

    Du kan också kontrollera panelen Omforma där bredd och höjd för fälten visas.

    Granska fälten för bredd och höjd för att kontrollera de nya måtten på widgeten.
    Granska fälten för bredd och höjd för att kontrollera de nya måtten på widgeten.

  4. Använd markeringsverktyget och placera flikpanelswidgeten på sidan, nära toppen och centrerat vertikalt.

  5. Klicka på den övre mittpositionen i fästgränssnittet på kontrollpanelen för att fästa flikpanelswidgeten på plats. Om du vill ha mer information om hur du fäster objekt så att de inte rullar klickar du på den här länken.

  6. Medan flikpanelswidgeten är markerad klickar du på den vänstra fliken för att markera flikbehållaren (det element som rymmer båda toppflikarna). Använd markeringsverktyget och dra mitthandtaget nedåt, tills höger är cirka 98 pixlar.

    I panelen Mellanrum anger du följande värden enligt bilden nedan:

    • Vänster: 220
    • Höger: 220
    • Nederkant: 2
    • Masknätshöjd: 10
    Ange mellanrumsvärden för flikbehållaren i panelen Mellanrum.
    Ange mellanrumsvärden för flikbehållaren i panelen Mellanrum.

  7. När du har gjort de här ändringarna använder du markeringsverktyget och drar hela flikpanelswidgeten längst upp på sidan, så att dess överkant ligger kloss mot underdelen av sidhuvudsrektangeln.

    Om det behövs kan du zooma in och närmare se hur elementen är inpassade. Ställ tillbaka förstoringen på 100 % när du är klar.

Utforma flikpanelswidgeten

Nu när du lagt till flikpanelswidgeten handlar nästa steg om att uppdatera stilarna för att utforma de två flikarna.

  1. Klicka på den vänstra fliken tre gånger så att den markeras. Öppna panelen Lägen och välj läget Normal. Använd menyn Fyllning till att ange fyllningsfärgen. Ange streckbredden till 0.

  2. Välj läget Över i panelen Lägen. Ange fyllningsfärgen för läget Över på fliken till 571E00. När du anger fyllningsfärgen för läget Över uppdateras läget Musknapp nedtryckt automatiskt.

    Välj läget Aktiv och använd samma fyllningsfärg på fliken i läget Aktiv. Nu fylls läget Normal med den fyllningsfärg som du valde i det föregående steget och de andra tre lägena fylls med 571E00.

  3. Klicka på den vänstra fliken igen för att välja etiketten. Markeringsindikatorn visar ordet Etikett när den markeras. Välj läget Normal i panelen Lägen och använd sedan panelen Text till att ange följande attribut enligt bilden nedan:

    • Webbteckensnitt: Kaushan Script (eller ett annat skriptteckensnitt som du föredrar)
    • Teckenstorlek: 26, färg: #70909d (du kan ändra namn på den här färgen. Exempel: "blue-menu")
    • Radavstånd: 120 %
    • Justering: Centrerad
    Anpassa etikettexten genom att uppdatera inställningarna i panelen Text.
    Anpassa etikettexten genom att uppdatera inställningarna i panelen Text.

  4. När etiketten är markerad klickar du på knappen Ny stil längst ned i panelen Styckeformat. Om du vill återanvända den här formateringen med ett klick när du vill ändrar du namn på det här nya styckeformat. Exempel: huvudflikar.

  5. När du tittar på lägespanelen används den formatering du använde på etiketten medan läget Normal är valt även på lägena Över och Musknapp nedtryckt. Välj läget Aktiv och klicka sedan på styckestilen head-tabs igen för att använda formateringen på läget Aktiv. Nu har alla lägen på båda flikarna utformats.

    Välj läget Normal igen.

  6. Använd textverktyget till att markera etikettexten på alla flikarna och ange lämpliga namn för etiketterna.

  7. Om du markerar den vänstra fliken och visar panelen Läge visas den slutliga formateringen som har använts på varje flik och etikett. Klicka på den högra fliken och lägg märke till att lägena ser likadana ut, förutom textinnehållet på varje flik.

    Granska formateringen för varje flik i panelen Lägen i Adobe Muse.
    Granska formateringen för varje flik i lägespanelen.

Lägga till textramar i innehållsområdet i en flikpanelswidget

  1. Klicka fram och tillbaka mellan de två flikarna som har olika etiketter. Platshållartexten för de flikarna är inte densamma vilket innebär att du kan se vilken behållare som visas när den andra är dold.

  2. Klicka på den högra fliken i widgeten. När den högra fliken är markerad visas motsvarande innehållsområde under fliken. Detta är samma beteende som inträffar både i vyn Design vid redigering av sidan och på den fungerande webbplatsen. Detta är vad som gör flikpanelswidgetar väldigt användbara eftersom du kan visa mycket mer innehåll på en och samma sida.

  3. Välj innehållsområdet för dina flikar. Markeringsindikatorn visar ordet Innehållsområde när den markeras. Markera platshållarens bild och tryck på Delete (Mac) eller Backsteg (Windows) för att ta bort den.

  4. Använd textverktyget och markera hela platshållarens textrubrik. Markera den feta rubriktexten, Mauris sit amet, och ta bort den.

  5. Växla tillfälligt från Adobe Muse till datorn. Öppna mappen med exempelfiler och leta upp filen med namnet text-about-ourstory.txt. Dubbelklicka på filen för att öppna den i en textredigerare. Kopiera den första delen av sidan fram till raden: ... utvecklat genom många år av bakning för släkt och vänner.

  6. Gå tillbaka till Muse. Använd textverktyget och markera hela platshållarens text. Klistra in det textinnehåll som du kopierade i textramen. Lämna en extra rad och gå tillbaka längst upp i textramen.

  7. Markera textramen och använd textpanelen till att välja inställningar för att formatera texten. Du kan till exempel välja följande inställningar:

    • Teckensnitt: Droid Serif
    • Teckenstorlek: 14
    • Färg: #222222
    • Justering: Vänsterjustering
    • Radavstånd: 120 %
  8. Markera texten och klicka på Nytt format längst ned i panelen Styckeformat. Dubbelklicka på det nya styckeformatet och ändra namn på det. Exempel: brödtext. Detta gör det lättare att återanvända samma formatering på annat textinnehåll.

  9. I panelen Färgrutor dubbelklickar du på färgvärdet #222222 och ändrar namn på färgen. Exempel: "katieblack".

  10. I kontrollpanelen anger du linjefärgen för textfältet till #222222 ("katieblack") och anger sedan linjebredden till 5 pixlar.

  11. Använd menyn Fyllning och ställ in fyllningsfärgen för textfältet till en ljusbeige färg (#F8F3E2). Klicka på mappen intill Bild och bläddra till filen bg-texture.png i mappen med exempelfilerna. Ställ in menyn Passning på: Sida vid sida.

  12. I panelen Mellanrum anger du vänster och höger mellanrum. Du kan till exempel ange vänster mellanrum till 24 och höger mellanrum till 15.

    Ställ in avståndsvärdena för att skapa visuellt utrymme runt den inklistrade texten.
    Ställ in avståndsvärdena för att skapa visuellt utrymme runt den inklistrade texten.

  13. Därefter kommer du att lägga till innehåll i de olika innehållsområdesbehållarna som motsvarar varje flik.

    Använd markeringsverktyget och ändra storlek på textfältet. Dra det till den vänstra sidan av behållaren och använd sedan handtagen för att öka dess bredd till cirka hälften av det tillgängliga innehållsområdets utrymme (cirka 390 pixlar brett och 381 pixlar högt).

Kopiera textramar i en flikpanel

Därefter kopierar du den befintliga textramen för att skapa en andra textram som fyller den högra sidan av innehållsutrymmet.

  1. Markera textramen med markeringsverktyget. Håll ned Alt när du drar en kopia av textramen till den högra sidan av innehållsområdet (se bilden nedan).

    Använd justeringsstödlinjerna som visas för att säkerställa att den högra textramen är inpassad horisontellt med den vänstra textramen.

    Kopiera den befintliga textramen för att skapa en andra kolumn på den högra sidan.
    Kopiera den befintliga textramen för att skapa en andra kolumn på den högra sidan.

  2. Växla tillfälligt från Muse till textredigeringsprogrammet som innehåller innehållet för flikpanelen. Kopiera det innehåll som du vill klistra in i på den kopierade fliken.

  3. Växla tillbaka till Muse. Ta bort all befintlig text i den kopierade högra textrutan. Klistra in det nya textinnehållet som du kopierade från Urklipp.

  4. Om det behövs använder du markeringsverktyget och placerar båda textramarna så att de är inpassade och centrerade inom innehållsområdet på önskad plats.

  5. Medan textramen fortfarande är markerad trycker du en gång på Esc för att markera innehållsområdet på den kopierade fliken. Ange streckbredden till 0 och ange fyllningsfärgen till Ingen.

När är du nästan klar med att kopiera textramar. Den sista delen innefattar att lägga till en liten bild som bryts innanför texten i den vänstra textramen.

Arbeta med dragspelspaneler

Widgetar för dragspelspaneler är bra att använda när du vill få plats med mycket innehåll på en liten del av skärmen. Genom att de komprimeras och expanderas kan besökare klicka på en etikettpanel och visa motsvarande innehållsområde. Förutom användning på webbplatser för datorer används widgetar för dragspelspaneler även ofta till att visa innehåll i layouter för webbplatser för mobila enheter.

I detta avsnitt får du lära dig lägga till innehåll på enskilda sidor på webbplatsen. Du får arbeta med en annan typ av widget, en så kallade dragspelswidget. Panelwidgetar (både dragspelswidgetar och flikpanelswidgetar) är användbara eftersom de gör det möjligt att visa mer innehåll på en sida inom ett mindre område på skärmen.

  1. Öppna projektet i vyn Design och börja redigera det.

  2. Välj Arkiv > Montera. Navigera till mappen där du har dina resurser och välj den bildfil som du behöver i dialogrutan Importera. Klicka på Välj och sedan en gång högst upp på sidan för att montera bilden i dess ursprungliga storlek på sidan som rubriktext. Du lägger till dragspelswidgeten under rubriken.

Lägga till ett dragspel på en webbsida

  1. Öppna widgetbiblioteket. (Välj Fönster > Widgetprogrambibliotek. Om det redan är öppet klickar du på den översta fliken för att aktivera Widgetprogrambibliotek i uppsättningen med dockade paneler.)

  2. Klicka på Paneler och expandera listan med panelwidgetar. Välj dragsspelswidgeten. Dra dragsspelswidgeten till sidan och placera den i den övre vänstra delen av sidoinnehållsområdet.

    Dra dragspelswidgeten och montera den på Adobe Muse-sidan.
    Dra dragspelswidgeten och montera den på sidan.

  3. Välj de olika komponenterna i widgeten med markeringsverktyget. När du markerar hela widgeten visas ordet "Widget" i markeringsindikatorn i det övre, vänstra hörnet. Lägg märke till hur markeringsindikatorn uppdateras och visar att du har valt en behållare eller en textram när du klickar igen. Markeringsindikatorn visar vilken del av widgeten som är vald för närvarande.

    Om du vill avmarkera den delen av en widget klickar du på Esc-tangenten och backar ut en nivå ur nuvarande val, eller så klickar du upprepade gånger och backar ut ur de kapslade elementen. Du kan även välja att bara klicka bort från widgeten och gå till en annan del av sidan.

    Som standard har dragspelswidgeten två paneler. På den övre panelen visas platshållarfliknamnet Lorem 1, och på den nedre panelen visas platshållarfliknamnet Ipsum 2.

  4. Öppna dialogrutan Widgetalternativ genom att klicka på den runda, blå pilikonen. Se till att alternativet Redigera tillsammans är markerat. Med det här alternativet appliceras ändringar du gör på en flik i dragspelswidgeten till alla flikar.

    Se till att Redigera tillsammans är markerat i panelen Alternativ för dragspelswidgetar.
    Se till att Redigera tillsammans är markerat i panelen Alternativ för dragspelswidgetar.

  5. Klicka en gång på widgeten med markeringsverktyget för att markera den. Dra sedan det högra handtaget åt höger för att öka bredden på widgeten och göra den tillräckligt bred så att den täcker två kolumner enligt bilden nedan.

    Expandera widgeten till två kolumner genom att dra i handtaget.
    Medan widgeten är markerad drar du i det högra handtaget för att utvidga den så att två kolumner täcks.

  6. Klicka på plustecknet (+) längst ned i widgeten, under Ipsum 2, och lägg till en tredje panel. På den tredje panelen visas platshållarfliken med namnet Ipsum 3.

I nästa avsnitt får du lära dig att placera textinnehåll på en panel i dragspelswidgeten för att fylla i den. Men först ska du uppdatera det översta fliknamnet som visas ovanför den första panelen i dragspelswidgeten.

Lägga till text i dragspelspanelen

  1. Använd markeringsverktyget och välj textramen på den översta fliken, som nu heter Lorem 1. Klicka en gång på "Lorem 1" så att du väljer hela widgeten och visar behållaren som hör till den övre fliken. Därefter klickar du i texten till "Lorem 1" och väljer textramen. Texten "Textram" visas i markeringsindikatorn när textramen är markerad.

  2. Dubbelklicka på platshållartexten "Lorem 1" för att redigera den och skriv sedan önskad text.

  3. Välj den ljusgrå större behållaren under den första fliken. Använd textverktyget och dra textramen i den större behållaren så att den öppnas.

  4. Skriv rubriktexten i den nya textramen.

Fyll i de övre flikarna i dragspelet med bakgrundsbilder

  1. Välj den övre fliken i dragspelswidgeten med rubriken.

  2. Klicka på den runda blå pilknappen och öppna alternativmenyn. Avaktivera alternativet Redigera tillsammans. Klicka vid sidan om menyn Alternativ för att stänga den.

  3. Klicka på den övre fliken två gånger tills markeringsindikatorn visar texten "Textram". Med textramen på den övre fliken markerad klickar du på fyllningslänken i kontrollpanelen och öppnar fyllningsmenyn. Klicka på färgväljaren och ställ in fyllningsfärgen för bakgrunden på ingen, istället för den grå standardfärgen.

  4. Klicka på mappikonen i bildavsnittet och öppna dialogrutan Importera. Navigera till din resursmapp och välj bilden som du vill lägga till.

  5. Öppna panelen Mellanrum. Tryck på och håll ned Uppåtpil i avsnittet Utfyllnad: V (vänster) för att öka utrymmet före rubriken så att texten centreras på bakgrundsbilden för fliken.

    Konfigurera mellanrummet för dragspelswidgetar i Adobe Muse
    Använd panelen Mellanrum till att öka den vänstra utfyllnaden och centrera texten i dragspelet.

Den första fliken i dragspelswidgeten är nu klar.

Om du avmarkerade inställningen Redigera tillsammans när du redigerade den första fliken visas ändringarna inte för de andra flikarna. Du måste formatera de andra flikarna separat i dragspelspanelen.

Rotera dragspelswidgetar

Widgetar för dragspelspaneler har som standard konfigurerats för att visa etikettpanelerna högst upp och innehållsområdet nedanför, i vertikal riktning.

Som standard visas dragspelswidgetar vertikalt i Adobe Muse.
När du lägger till en widget för dragspelspanel på en sida så visas den vertikalt.

Om du vill skapa ett horisontellt orienterat skjutreglage med hjälp av dragspelswidgeten utför du följande steg:

  1. När du är i vyn Design öppnar du Widgetprogrambibliotek och expanderar avsnittet Paneler.

  2. Välj alternativet Dragspel från avsnittet Paneler och dra det till sidan.

  3. Använd markeringsverktyget och klicka en gång för att markera hela widgeten. Markeringsindikatorn i det övre västra hörnet av kontrollpanelen visar ordet: Dragspel.

  4. Om du håller skifttangenten intryckt samtidigt som du roterar begränsas proportionerna så att du kan flytta widgeten i steg om 45 grader. Ett verktygstips visar aktuellt rotationsvärde allteftersom du roterar widgeten.

    Rotera widgeten till -90° eller +90°, beroende på vad du vill.
    Rotera widgeten till -90° eller +90°, beroende på vad du vill.

  5. När du har roterat widgeten klickar du på länken för förhandsvisning eller förhandsvisar sidan i en webbläsare för att kontrollera att dragspelet fortfarande expanderar och komprimerar som det ska. Kontrollera om etikettbehållarna har utformats för att visa motsvarande innehållsområde när någon klickar på det.

    Allt som återstår nu är att ange etiketterna och behållarna för innehållsområdet med innehåll som är riktat uppåt istället för att visas åt sidan.

    Följ dessa steg för att visa textinnehållet inom innehållsområdena. Du använder samma teknik som den som beskrivs ovan för att rotera textfältet i en behållare för innehållsområde.

     

  6. Klicka två gånger på standardtexten i innehållsområdet. Första gången du klickar markeras hela dragspelswidgeten och andra gången väljs behållaren för innehållsområde. När innehållsområdet har valts använder du markeringsverktyget för att expandera storleken för innehållsområdet genom att klicka och dra i handtagen för storleksändring.

  7. Låt innehållsområdet vara markerat och klicka en gång till för att markera textramen inuti innehållsområdet. Håll pekaren nära ett av hörnen av textramarna tills rotationspekaren visas. Håll ned Skift samtidigt som du roterar textramen till samma 90-gradiga rotation som den yttre widgeten.

    Rotera textinnehållet i den befintliga platshållaren om du vill visa text i innehållsområdet.
    Rotera textinnehållet i den befintliga platshållaren om du vill visa text i innehållsområdet.

  8. När du har roterat textramen använder du markeringsverktyget för att flytta den inom innehållsområdet. Använd textverktyget för att ersätta platshållartexten med den text du vill visa och använd sedan alternativen för textformatering i kontrollpanelen och textpanelen för att redigera textformat (eller använd styckeformat för att uppdatera utseendet).

  9. Montera bilder, rita rektanglar eller bädda in HTML för att ange innehållsområdet. Du behöver inte rotera det här innehållet eftersom det placeras upprätt inom den roterade behållaren automatiskt.

Uppdatera text i etikettbehållarna

Det finns flera olika alternativ för att uppdatera texten i etikettbehållarna.

Om etiketterna är korta och du vill att texten ska ligga i sidled (som på böcker i en bokhylla) kan du använda textverktyget till att välja befintlig platshållartext och skriva etiketter (se bilden nedan).

Redigera etikettexten med hjälp av verktyget Text för dragspelswidgetar.
Redigera etikettexten med hjälp av verktyget Text för dragspelswidgetar.

Om du inte vill använda textetiketter kan du helt enkelt ta bort den befintliga platshållartexten i etikettbehållarna och sedan använda formateringsalternativen i kontrollpanelen eller fyllningspanelen (tillsammans med panelen Lägen) till att använda en annan färg på varje etikett (se bilden nedan). Om du vill uppdatera utseendet för varje etikettbehållare individuellt klickar du på den blå pilknappen för att få tillgång till menyn Alternativ och avaktivera alternativet Redigera tillsammans.

Använd fyllningsmenyn och alternativen för textformatering för att färgkoda etikettbehållarna och motsvarande textinnehåll.
Använd fyllningsmenyn och alternativen för textformatering för att färgkoda etikettbehållarna och motsvarande textinnehåll.

Ett annat alternativ är att använda ett bildredigeringsprogram för att skapa bilder som infogas i etikettpanelerna. Placera bilderna på sidan, klipp ut dem, välj etikettexten med textverktyget och klistra sedan in bilderna i etikettbehållarna. Bilderna kan innehålla vertikalt orienterad text (se bilden nedan).

Infoga bilder med vertikalt orienterad text i etikettbehållarna.
Infoga bilder med vertikalt orienterad text i etikettbehållarna.

Lägga till ankarlänkar i dragspelspaneler

Du kan länka sidelement till dragspelswidgetar genom att lägga till ankarlänkar i dragspelspanelerna. Så här lägger du till ankarlänkar i dragspelswidgetar:

  1. Välj den dragspelswidget där du vill lägga till ankarlänken. Klicka på den flik där du vill lägga till ankarlänken.

  2. Läs in en ankarlänk i placeringsverktyget genom att klicka på verktyget Ankare.

    Välj verktyget Ankare i panelen Verktyg.
    Välj verktyget Ankare i panelen Verktyg.

  3. Placera ankarlänken i dragspelswidgeten.

    En dialogruta för att ändra namn på ankarlänken visas. Ange ett namn för ankarlänken och klicka sedan på OK.

    Montera ankarlänken i dragspelswidgeten
    Montera ankarlänken i dragspelswidgeten

    Nu kan du länka den här ankarlänken till sidelement på sidor på webbplatsen.

  4. Om du vill länka ett sidelement till ankarlänken väljer du det sidelement du vill länka. Välj den ankarlänk du har skapat i listrutan Hyperlänkar längst upp.

    När du klickar på sidelementet på den publicerade webbplatsen visas den dragspelsflik där du har monterat ankarlänken.

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