Lær, hvordan du får vist og formaterer en klynge af relateret indhold med faneopdelte paneler eller harmonikapaneler i Adobe Muse.

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.

Tilføj en fanedelt panelwidget

  1. Åbn panelet Widgets-biblioteket (Vindue > Widgets-bibliotek). Udvid paneler, og vælg widgeten Faneopdelte paneler. Træk en widget fra widgetsbiblioteket til dit designpanel.

    Den faneopdelte panelwidget viser standardformateringen, når du trækker den over på en side.
    Den faneopdelte panelwidget viser standardformateringen, når du trækker den over på en side.

  2. Klik tre gange på den øverste fane på højre side. Det første klik vælger hele det faneopdelte panel, det andet klik vælger fanebeholderen, og det tredje klik vælger fanen på højre side.

    Tjek markeringsindikatoren for at se, hvilket af widgetens underelementer, der er valgt i øjeblikket. Tryk på Delete (Mac) eller Backspace (Windows) for at slette den tredje fane. Efter at have foretaget denne ændring er der kun to faner tilbage. Klik på et vilkårligt andet sted på siden.

  3. Klik på widgeten igen én gang for at vælge hele det faneopdelte panel. Træk håndtagene for at ændre hele widgeten til en bredde på 840 og en højde på 645. Mens du trækker i håndtagene, kan du holde øje med de viste dimensioner.

    Du kan også tjekke panelet Transformer for at se værdierne i felterne B (bredde) og H (højde).

    Gennemgå felterne for bredde og højde for at kontrollere den skalerede widgets dimensioner.
    Gennemgå felterne for bredde og højde for at kontrollere den skalerede widgets dimensioner.

  4. Brug markeringsværktøjet til at placere den faneopdelte panelwidget på siden, nær toppen og centreret lodret.

  5. Klik på den øverste midterposition i grænsefladen for fastgørelse i kontrolpanelet for at skubbe den faneopdelte panel-widget på samme sted. Få mere at vide om at fastgøre objekter, så de ikke kan rulle, i dette link.

  6. Mens den faneopdelte panel-widget stadig er markeret, skal du klikke på den venstre fane for at vælge fanebeholderen (det element, der indeholder begge topfaner). Brug markeringsværktøjet til at trække det midterste håndtag ned, indtil højden er cirka 98 pixels.

    Indstil følgende værdier, der vises i billedet nedenfor, i panelet Mellemrum:

    • Venstre: 220
    • Højre: 220
    • Bund: 2
    • Margenhøjde: 10
    Indstil mellemrumsværdierne for fanebeholderen i panelet Mellemrum.
    Indstil mellemrumsværdierne for fanebeholderen i panelet Mellemrum.

  7. Efter disse ændringer skal du bruge markeringsværktøjet til at trække hele den faneopdelte panel-widget op til toppen af siden, så at den øverste del af det faneopdelte panel støder op mod bunden af sidehovedrektanglet uden lodret plads mellem dem.

    Hvis det er nødvendigt, kan du zoome ind for at se nærmere på, hvordan elementerne flugter. Stil forstørrelsen tilbage til 100 %, når du er færdig.

Formatér den faneopdelte panelwidget

Nu, hvor du har tilføjet den faneopdelte panel-widget, består næste del i at designe de to faner ved at opdatere formaterne.

  1. Klik tre gange på den venstre fane for at vælge den venstre fane. Åbn panelet Tilstande, og vælg tilstanden Normal. Brug menuen Fyld til at angive fyldfarven. Indstil stregbredden til 0.

  2. Vælg tilstanden Overgang i panelet Tilstande. Angiv fyldfarven på tilstanden Overgang på fanen til 571E00. Bemærk, at når du indstiller fyldfarven for tilstanden Overgang, opdateres tilstanden Mus ned også automatisk.

    Vælg tilstanden Aktiv, og anvend også den samme fyldfarve på fanen i tilstanden Aktiv. Nu fyldes tilstanden Normal med den fyldfarve, du valgte i forrige trin, og de andre tre tilstande fyldes med 571E00.

  3. Klik igen én gang på den venstre fane for at vælge mærket. Markeringsindikatoren viser ordet Mærke, når den er valgt. Vælg tilstanden Normal i panelet Tilstande, og brug derefter panelet Tekst til at indstille følgende attributter, som vist på billedet nedenfor:

    • Webskrifttype: Kaushan Script (eller en anden script-skrifttype, som du ønsker)
    • Skriftstørrelse: 26Color: #70909D (du kan omdøbe denne farve. F.eks. til blå-menu)
    • Skydning: 120%
    • Justering: Centreret
    Formater mærketeksten ved at opdatere indstillingerne i panelet Tekst.
    Formater mærketeksten ved at opdatere indstillingerne i panelet Tekst.

  4. Klik på knappen Nyt format nederst i panelet Afsnitsformater, mens mærket stadig er valgt. Omdøb det nye afsnitsformat for at genanvende formateringen, når du vil, med et enkelt klik. F.eks. til hoved-faner.

  5. Når du ser i panelet Tilstande, anvendes den formatering, du anvendte på mærket i tilstanden Normal, også på tilstandene Overgang og Mus ned. Vælg aktiv tilstand, og klik derefter på afsnitsformatet hoved-tabs igen for at anvende formateringen på tilstanden Aktiv. Nu er alle tilstande i begge faner blevet formateret.

    Vælg tilstanden Normal igen.

  6. Brug tekstværktøjet til at vælge mærketeksten i alle fanerne, og angiv de relevante navne til dine mærker.

  7. Hvis du vælger venstre fane og ser i panelet Tilstande, vil du se den endelige formatering, som anvendes på hver fane og hvert mærke. Klik på den højre fane, og bemærk, at tilstandene ser ens ud, bortset fra tekstindholdet af hver fane.

    Gennemgå formateringen af hver fane i panelet Tilstande i Adobe Muse.
    Gennemgå formateringen af hver fane i panelet Tilstande.

Føj tekstrammer til indholdsområdet i en faneopdelt panelwidget

  1. Brug et øjeblik på at klikke frem og tilbage mellem de to forskellige faner, der har forskellige mærker. Pladsholderteksten for begge faner er forskellig, så du kan se, at en container vises, mens den anden er skjult.

  2. Klik på højre fane i din widget. Mens den højre fane er valgt, vises det tilsvarende indholdsområde under fanen. Visningen Design har samme funktionsmåde, når du redigerer siden, og når den er i produktion på websitet. Derfor er faneopdelte panel-widgets meget nyttige, fordi du kan vise meget mere indhold på en enkelt side.

  3. Vælg indholdsområdet for dine faner. Markeringsindikatoren viser ordet Indholdsområde, når den er valgt. Vælg pladsholder-billedfilen, og tryk på Delete (Mac) eller Backspace (Windows) for at slette den.

  4. Brug tekstværktøjet til at markere den eksisterende pladsholder-tekstoverskrift. Vælg den fede overskriftstekst, Mauris sit amet, og slet den.

  5. Skift midlertidigt fra Adobe Muse til skrivebordet. Åbn mappen med eksempelfiler, og find filen text-about-ourstory.txt. Dobbeltklik på filen for at åbne den i en teksteditor. Kopier den første del af siden, ned til linjen med teksten: ... crafted through years of baking for friends and family.

  6. Gå tilbage til Muse. Brug tekstværktøjet til at markere den eksisterende pladsholdertekst. Indsæt det tekstindhold, som du kopierede i tekstrammen. Efterlad et ekstra linjeskift, og gå tilbage øverst i tekstrammen.

  7. Brug panelet Tekst til at vælge indstillinger til at formatere din tekst, mens tekstrammen er markeret. Du kan f.eks. vælge følgende indstillinger:

    • Skrifttype: Droid Serif
    • Skriftstørrelse: 14
    • Farve: #222222
    • Justering: Venstre
    • Skydning: 120%
  8. Klik på knappen Nyt format nederst i panelet Afsnitsformater, mens teksten stadig er valgt. Dobbeltklik på det nye afsnitsformat, og omdøb det. F.eks. til brødtekst. Det vil gøre det lettere at genbruge formateringen til andet tekstindhold.

  9. Dobbeltklik i panelet Farveprøver på farveværdien #222222, og omdøb denne farve. F.eks. til katiesort.

  10. Brug kontrolpanelet til at indstille stregfarven for tekstfeltet til #222222 (katiesort), og indstil stregbredden til 5 pixels.

  11. Brug menuen Fyld til at indstille fyldfarven for tekstfeltet til en lys beige farve (#F8F3E2). Klik på mappen ved siden af afsnittet Billede, og gennemse for at vælge filen bg-texture.png i mappen med eksempelfiler. Indstil menuen Tilpasning til: Flise.

  12. I panelet mellemrum skal du indstille venstre og højre afstand. Du kan f.eks. indstille venstre afstand til 24 og højre afstand til 15.

    Indstil mellemrumsværdierne for at skabe visuelt rum omkring den indsatte tekstkopi.
    Indstil mellemrumsværdierne for at skabe visuelt rum omkring den indsatte tekstkopi.

  13. Derefter vil du tilføje indhold til hver indholdsområde-beholder, som svarer til den enkelte fane.

    Juster tekstfeltets størrelse med markeringsværktøjet. Træk det til venstre side af beholderen, og brug derefter håndtagene til at udvide dens bredde til cirka halvdelen af den tilgængelige plads til indholdsområdet (ca. 390 pixels i bredt og 381 pixels højt).

Dubler tekstrammer i et faneopdelt panel

Derefter dublerer du den eksisterende tekstramme for at oprette en ny tekstramme, der udfylder indholdsområdets højre side.

  1. Marker tekstrammen med markeringsværktøjet. Tryk på og hold Alternativ (Mac) eller Alt (Windows), mens du trækker en kopi af tekstrammen over i indholdsområdets højre side (se billedet nedenfor).

    Brug de viste hjælpelinjer til at sikre, at den højre tekstramme flugter vandret med den venstre tekstramme.

    Dubler den eksisterende tekstramme for at oprette endnu en kolonne i højre side.
    Dubler den eksisterende tekstramme for at oprette endnu en kolonne i højre side.

  2. Skift midlertidigt mellem Muse til tekstredigeringsprogrammet, der indeholder indholdet til det faneopdelte panel. Kopiér det indhold, du vil indsætte i den duplikerede fane.

  3. Skift tilbage til Muse. Slet al eksisterende tekst i den dublerede højre tekstramme. Indsæt det nye tekstindhold, som du kopierede, fra udklipsholderen.

  4. Efter behov kan du bruge markeringsværktøjet til at placere begge tekstrammer, så de flugter og er centreret inden for indholdsområdet på det ønskede sted.

  5. Tryk én gang på Esc, mens tekstrammen er markeret, for at vælge indholdsområdet i den duplikerede fane. Indstil stregbredden til 0, og indstil fyldfarven til Ingen.

Kopiering af tekstrammer er næsten færdig. I den sidste del tilføjes et lille billede, der ombrydes inde i teksten i den venstre tekstramme.

Arbejd med harmonikapaneler

Harmonika-panel-widgets er nyttige, når du skal gøre plads til en masse indhold på et lille område af den faktiske skærmstørrelse. Funktionsmåden med minimering og udvidelse gør det muligt for besøgende at klikke på et mærkepanel og se det tilsvarende indholdsområde. Foruden skrivebordssteder bruges harmonika-panel-widgets ofte til at vise indhold i mobillayouts.

I dette afsnit lærer du at tilføje indhold på individuelle websitesider. Du kommer til at arbejde med en anden type widget kaldet en Harmonika-widget. Panel-widgets (både harmonikapaneler og faneopdelte paneler) er nyttige, fordi de gør det muligt at vise mere indhold på en side i et mindre område af skærmen.

  1. Åbn dit projekt i visningen Design, og gå i gang med redigeringen.

  2. Vælg Filer > Placer. Naviger til den mappe, hvor dine aktiver er, i dialogboksen Import, og vælg den billedfil, du skal bruge. Klik på Vælg, og klik derefter en enkelt gang øverst på siden for at placere billedet i dets oprindelige størrelse på siden som sidehovedtekst. Du kan tilføje widgeten Harmonika under dette sidehoved.

Føj en harmonika til en webside

  1. Åbn Widgets-biblioteket. Vælg Vindue > Widgets-bibliotek for at åbne det. Eller klik på den øverste fane for at aktivere Widgets-biblioteket i gruppen af forankrede paneler, hvis det allerede er åbent.

  2. Klik på Paneler for at udvide listen med Panel-widgets. Vælg Harmonika-widgeten. Træk Harmonika-widgeten til siden, og anbring den i øverste venstre side af sideindholdsområdet.

    Træk og placer harmonikawidgeten på Adobe Muse-siden
    Træk og placer harmonikawidgeten over på din side.

  3. Markér de forskellige komponenter i widgeten med markeringsværktøjet. Når du har markeret hele widgeten, vises ordet "Widget" i markeringsindikatoren øverst til venstre i kontrolpanelet. Bemærk, hvordan markeringsindikatoren opdateres til at vise, at du har markeret en beholder eller en tekstramme, når du klikker igen. Markeringsindikatoren fortæller, hvilken aktuel del af widgeten der er markeret.

    Du kan fravælge det pågældende element i widgeten ved at trykke på Esc-tasten for at komme et niveau op i forhold til den aktuelle markering. Du kan også trykke på Esc flere gange for at komme ud af de indlejrede elementer. Du kan også blot klikke et andet sted på siden ud for widgeten.

    Harmonika-widgeten har to paneler som standard. Det øverste panel viser pladsholderfanenavnet Lorem 1, og det nederste panel viser pladsholderfanenavnet Ipsum 2.

  4. Åbn dialogboksen Indstillinger for widget ved at klikke på det runde blå pileikon. Kontroller, at indstillingen Rediger sammen er markeret. Indstillingen sikrer, at de ændringer, du foretager i et fanenavn i harmonikaen, anvendes på alle faner.

    Sørg for at Rediger sammen er markeret i panelet Indstillinger i Harmonikawidgets.
    Sørg for at Rediger sammen er markeret i panelet Indstillinger i Harmonikawidgets.

  5. Klik én gang på widgeten med markeringsværktøjet for at markere den, og træk derefter i håndtaget til højre for at udvide bredden på widgeten, så den dækker to kolonner som vist i billedet nedenfor.

    Træk i håndtaget på widgeten for at udvide den til to kolonner.
    Træk i det højre håndtag på den markerede widget for at udvide den, så den dækker to kolonner.

  6. Klik på plustegnet (+) nederst i widgeten under Ipsum 2 for at tilføje et tredje panel. Det tredje panel viser pladsholderfanenavnet Ipsum 3.

I det næste afsnit lærer du at udfylde et afsnit i Harmonika-widgeten med tekstindhold. Men først skal du opdatere navnet på den øverste fane, som vises over det første panel i Harmonika-widgeten.

Føj tekst til panelet Harmonika

  1. Markér tekstrammen på den øverste fane med navnet Lorem 1 med markeringsværktøjet. Klik en enkelt gang på "Lorem 1" for at markere hele widgeten og udvide den beholder, som svarer til den øverste fane, og klik derefter på teksten "Lorem 1" for at markere tekstrammen. Ordet "Tekstramme" vises i markeringsindikatoren, når tekstrammen er markeret.

  2. Dobbeltklik på pladsholderteksten "Lorem 1" for at redigere den, og skriv derefter den tekst, du vil bruge.

  3. Markér den store lysegrå beholder under den første fane. Træk og åbn en tekstramme i den store beholder med tekstværktøjet.

  4. Skriv teksten i sidehovedet i den nye tekstramme.

Fyld de øverste faneblade i harmonikaen med baggrundsbilleder

  1. Markér den øverste fane på Harmonika-widgeten, der viser sidehovedet.

  2. Klik på det runde blå pileikon for at åbne menuen Indstillinger. Fjern markeringen ud for indstillingen Rediger sammen. Klik uden for menuen Indstillinger for at lukke den.

  3. Klik to gange på den øverste fane, indtil ordet "Tekstramme" vises i markeringsindikatoren. Klik på linket Fyld i kontrolpanelet, mens den øverste fanes tekstramme er markeret, for at åbne menuen Fyld. Klik på farvevælgeren, og angiv fyldfarven til baggrunden til ingen i stedet for den mørkegrå standardfarve.

  4. Klik på mappeikonet i afsnittet Billede for at åbne dialogboksen Importer. Naviger til din mappe med aktiver, og vælg det billede, du vil tilføje.

  5. Åbn panelet Mellemrum. Tryk og hold på pil op i Margen: V (Venstre) for at øge mellemrummet før sidehovedet, så teksten centreres på baggrundsbilledet for fanen.

    Konfigurer afstanden for Harmonika Widgets i Adobe Muse
    Brug panelet Mellemrum til at øge den venstre indre margen og centrere teksten i harmonikaen.

Den første fane i Harmonika-widgeten er nu færdig.

Hvis du har fravalgt indstillingen Rediger sammen, når du har redigeret den første fane, vises ændringerne ikke for de andre faner. Du skal formatere de andre faner enkeltvis i dit Harmonika-panel.

Roter Harmonika-widgets

Harmonika-panel-widgets er som standard konfigureret til at vise mærkepaneler øverst og indholdsområder nederst i lodret retning.

Som standard vises harmonikawidgets i Adobe Muse lodret.
Når du tilføjer en harmonika-panel-widget på en side, vises den lodret.

Hvis du vil oprette en vandret skydeknap ved hjælp af Harmonika-widgeten, skal du følge disse trin:

  1. Åbn Widgets-biblioteket i designvisning, og udvid afsnittet Paneler.

  2. Vælg indstillingen Harmonika i afsnittet Paneler, og træk den over på siden.

  3. Klik én gang med markeringsværktøjet for at markere hele widgeten. Markeringsindikatoren i øverste venstre hjørne af kontrolpanelet viser ordet: Harmonika.

  4. Hold Skift-tasten nede, mens du roterer, for at begrænse proportionerne, så du kan flytte widgeten i intervaller af 45 grader. Der vises et værktøjstip med den aktuelle rotationsværdi, mens du roterer widgeten.

    Roter widgeten til -90° eller +90°, afhængig af den retning, som du vil rotere harmonikaen.
    Roter widgeten til -90° eller +90°, afhængig af den retning, som du vil rotere harmonikaen.

  5. Når du har roteret widgeten, skal du klikke på linket Forhåndsvisning eller se forhåndsvisningen af siden i en browser for at kontrollere, om harmonikaen stadig udvider og skjuler panelerne som forventet. Tjek om mærkecontainerne er kodet til at vise det tilsvarende indholdsområde, når der klikkes på dem.

    Nu mangler du bare at udfylde mærkerne og indholdsområdets containere med indhold, der vender "opad" i stedet for at blive vist sidelæns.

    Følg disse trin for at vise tekstindhold i indholdsområderne. Du skal bruge samme teknik som ovenfor til at rotere tekstfeltet i indholdsområdets container.

     

  6. Klik to gange på standardteksten i indholdsområdet. Det første klik markerer hele harmonika-widgeten, og det andet klik markerer indholdsområdets container. Brug markeringsværktøjet, mens indholdsområdet er markeret, til at udvide størrelsen af indholdsområdet ved at klikke på og trække i dets størrelseshåndtag.

  7. Klik igen, mens indholdsområdet stadig er markeret, for at markere tekstrammen inde i indholdsområdet. Lad markøren hvile tæt på et af tekstrammens hjørner, indtil du kan se rotationsmarkøren. Tryk på og hold Shift-tasten nede, mens du roterer tekstrammen til samme 90 graders rotation som den ydre widget.

    Roter den eksisterende pladsholders tekstindhold, hvis du vil vise tekst i indholdsområdet.
    Roter den eksisterende pladsholders tekstindhold, hvis du vil vise tekst i indholdsområdet.

  8. Brug markeringsværktøjet, når du har roteret tekstrammen, til at flytte den inde i indholdsområdet. Brug tekstværkøjet til at erstatte pladsholderteksten med den faktiske tekst, du vil vise, og brug derefter indstillinger for tekstformatering i kontrolpanelet og panelet Tekst til at formatere teksten (eller anvend afsnitsformater for at opdatere dens udseende).

  9. Placer billeder, tegn rektangler, eller integrer HTML for at udfylde indholdsområdets containere efter behov. Du behøver ikke at rotere dette indhold, fordi det automatisk placeres opretstående i den roterede container.

Opdater tekst i mærkecontainerne

Du har flere muligheder for at opdatere teksten i mærkecontainerne.

Hvis tekstmærkerne er korte, og du vil bevare teksten som "sidelæns" (f.eks. for at efterligne bøger i en reol), kan du bruge tekstværktøjet til at markere den eksisterende pladsholdertekst og skrive de ønskede mærker (se billedet nedenfor).

Rediger mærkatteksten med tekstværktøjet til harmonikawidgets.
Rediger mærkatteksten med tekstværktøjet til harmonikawidgets.

Hvis du ikke vil bruge tekstmærker, kan du bare slette den eksisterende pladsholdertekst i mærkecontainerne og derefter bruge formateringsindstillingerne i kontrolpanelet eller panelet Fyld (sammen med panelet Tilstande) til at anvende en anden farve på hvert mærke (se billedet nedenfor). Du kan opdatere udseendet af hver mærkecontainer for sig ved at klikke på den blå pileknap for at åbne menuen Indstillinger og deaktivere indstillingen Rediger sammen.

Brug menuen Fyld og indstillingerne for tekstformatering til at farvekode mærkecontainerne og det tilsvarende tekstindhold.
Brug menuen Fyld og indstillingerne for tekstformatering til at farvekode mærkecontainerne og det tilsvarende tekstindhold.

Du kan også bruge et billedredigeringsprogram til at oprette billeder, der er indsat i mærkepanelerne. Placer billederne på siden, klip dem, marker mærketeksten med tekstværktøjet, og indsæt derefter billederne i mærkecontainerne. Billederne kan evt. indeholde lodret tekst (se billedet nedenfor).

Indsæt billeder med lodret tekst i mærkecontainerne.
Indsæt billeder med lodret tekst i mærkecontainerne.

Tilføj ankerlinks i Harmonika-paneler

Du kan linke alle slags sideelementer til Harmonika-widgets ved at tilføje ankerlinks i harmonikapaneler. Læs videre for at lære, hvordan du føjer ankerlinks til Harmonika-widgets:

  1. Vælg den Harmonika-widget, du vil føje ankerlinket til. Klik på fanen, hvor du vil tilføje ankerlinket.

  2. Klik på ankerværktøjer for at indlæse et ankerlink i placeringsværktøjet.

    Vælg ankerværktøjet på panelet Værktøjer.
    Vælg ankerværktøjet på panelet Værktøjer.

  3. Placer ankerlinket i Harmonika-widgeten.

    En pop op-menu, hvori ankeret kan omdøbes, vises. Skriv et passende navn for ankeret, og klik på OK.

    Placer ankerlinket i Harmonika-widgeten
    Placer ankerlinket i Harmonika-widgeten

    Du kan nu linke dette anker til et hvilket som helst sideelement på en hvilken som helst side på dit website.

  4. Vælg sideelementet, du vil linke, for at linke et sideelement til dette anker. Fra rullelisten Hyperlinks øverst skal du vælge det anker, du oprettede.

    Når du klikker på sideelementet på dit live website, viser siden Harmonika-fanen, hvor du placerede ankerlinket.

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