Lägga till text och textramar i Adobe Muse

Läs om hur du arbetar med text i Adobe Muse. Med hjälp av panelen Text kan du ändra utseendet på texten, lägga till utfyllnad, ange indragsvärden med mera.

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 i de vanliga frågorna om när Adobe Muse inte längre kommer att vara tillgängligt.

Så här kan du använda Adobe Muse till att lägga till text när du designar webbplatser:

  • Lägg till en textruta och börja skriva ditt innehåll i textrutan.
  • Spara texten i en textfil och importera den till din Adobe Muse-sida.
  • Använd ett program som InDesign till att layouta texten. Kopiera den förformaterade texten till urklipp och klistra in den i Adobe Muse.

I en responsiv layout kan du även formatera texten så att den passar den enhet som användarna visar webbplatsen med. Du kan till exempel göra texten för smarta mobiltelefoner större och med mer utfyllnad jämfört med datorversionen. Dessutom kan du med responsiv webbdesign i Adobe Muse även formatera text för alla brytpunkter. Du kan ändra format, färg, radavstånd, utfyllnad och storleken på texten för varje brytpunkt. Om du vill ha mer information om hur du formaterar text när du skapar en webbplats för olika enheter i en enda fil läser du i Formatera text i responsiva layouter.

Skapa och formge textramar

För att lägga till innehåll i menyerna kopierar du menytexterna från externa textfiler och klistrar sedan in dem i textramar. Du kommer också att anpassa texten genom att skapa och använda styckeformat. Gör så här:

  1. När du redigerar en sida i vyn Design använder du textverktyget för att skapa textramar. Om du vill kopiera text från en annan filkälla kopierar du texten i Adobe Muse och klickar i textramen med hjälp av textverktyget. Klistra in textinnehåller du kopierade i textramen.

  2. Markera textrader med hjälp av textverktyget.

  3. I textpanelen formaterar du texten genom att välja bland följande inställningar:

    • Teckensnitt: Droid Serif Bold (eller ett annat serif-teckensnitt som du vill använda)
    • Teckenstorlek: 14
    • Teckenformat: Fetstil
    • Teckenfärg: #A6342A (röd)
    • Justering: Vänsterjustering
    • Radavstånd: 120 %
  4. Du kan formatera text ytterligare med något av följande ytterligare textformateringsalternativ:

    • Upphöjd
    • Nedsänkt
    • Versaler
    • Gemener
  5. När texten är markerad klickar du på Nytt format längst ned i panelen Styckeformat (Fönster > Styckeformat). Dubbelklicka på det nya styckeformatet och ändra namn på den till: food-header.

    Detta gör det lättare att återanvända samma formatering på annat textinnehåll i menyerna.

  6. Markera nästa frukostobjekt med textverktyget: Croissanter $3

  7. Klicka på styckestilen food-header för att använda samma formatering på det andra frukostobjektet.

  8. Upprepa steg 7 och 8 för att välja och använda food-header-styckets stil på alla frukostobjekt i textramen (alla rader som innehåller dollartecknet).

  9. Börja från toppen och använd textverktyget till att markera det första frukostobjektets beskrivning: Bananer, apelsiner, red delicious-äpplen, bärblandning.

  10. Klicka på styckeformatet Brödtext i panelen Styckeformat för att använda formateringen på textraden.

  11. Markera varje återstående beskrivningstext under frukostobjekten och använd styckeformatet Brödtext.

Använd formatering för att anpassa menyn med styckeformat.

Det kan vara användbart att besöka den publicerade versionen av exempelwebbplatsen och använda dess design som referens.

Om du vill ha mer information om hur du arbetar med text läser du artikeln Typografi i Adobe Muse.

Använda den inbyggda stavningskontrollen

Adobe Muse har en stavningskontroll som gör det lätt att hitta och lösa typografiska fel i textramar. Stavningskontrollen är alltid aktiverad. Den stryker under alla ord som inte finns med i ordlistan med en röd linje.

Ord som verkar vara felstavade stryks under med rött.

Om något av de föreslagna orden är rätt trycker du på Nedåtpil eller använder musen för att välja det föreslagna ord du vill använda och trycker sedan på Enter för att använda det. Om du gör ett misstag och väljer fel ord ångrar du ändringen (Redigera > Ångra) och väljer sedan ett annat föreslaget ord eller redigerar ordet med textverktyget.

Om ett ord som flaggats som felstavat bara används en gång (t.ex. en persons namn eller en plats) och du vet att det är rättstavat behöver du inte åtgärda det. Den röda understrykningen du ser i designvyn visas inte när du förhandsvisar, publicerar eller exporterar en webbplats.

När du arbetar med ord som används ofta, t.ex. företagsnamn eller adresser, kan du lägga till orden i stavningskontrollens ordlista så att de inte längre markeras som felstavningar.

Använd textverktyget och högerklicka på ett ord som du vill lägga till i ordlistan och välj sedan alternativet Lägg till i ordlista på snabbmenyn som visas.

Du kan ställa in önskat språk (som i sin tur ställer in stavningskontrollens ordlistespråk) för hela webbplatsen och för individuella textramar.

Om du vill ställa in stavningskontrollens ordlista för hela webbplatsen väljer du Arkiv > Webbplatsegenskaper. Klicka på fliken Text, välj önskat språk på menyn Språk och klicka sedan på OK.

Ställ in språket för hela webbplatsen i dialogrutan Webbplatsegenskaper.

Ibland kräver webbplatsprojekt text på flera språk. I så fall kan du ställa in standardspråket (det som används oftast) i Webbplatsegenskaper och sedan ställa in stavningskontrollens språk för specifika textramar som visas text på olika språk.

Om du vill ställa in stavningskontrollens ordlista för en textram markerar du en textram med markeringsverktyget. Högerklicka och välj Språk > (önskat språk) på den snabbmeny som visas.

Ställ in språket för en markerad textram på snabbmenyn.

Därefter uppdaterar du utseendet på textramen. På samma sätt som för rektanglar och bildramar kan du ange streck, fyllning och bakgrundsbilder för textramar och anpassa dem.

Uppdatera utseendet på textramar

I det här avsnittet kommer du att uppdatera attributen för en textram så att den står ut från bakgrundsgrafiken på sidan.

  1. Markera textramen som innehåller frukostmenyn med markeringsverktyget.

  2. På kontrollpanelen ställer du in streckbredden på 5 och streckbredden på svart.

  3. Använd menyn Fyllning för att ställa in fyllningsfärgen för den färgklick du bytte namn på till cream-menu (eller angav det hexadecimala färgvärdet: #E9916F). Klicka på mappikonen intill Bild och bläddra efter filen bg-texture.png i mappen med exempelfilerna. Klicka på OK för att stänga dialogrutan Importera. Ställ in menyn Passning på Sida vid sida och klicka sedan någon annanstans på sidan för att stänga menyn.

  4. Om det behövs använder du markeringsverktyget och drar i handtaget på textramen och ändrar storlek på den tills texten passar. Måtten på frukostmenyn på den aktiva webbplatsen är ca 800 pixlar bred och 440 pixlar hög.

    Bakgrundsbilden med fyllningsfärgen cream ger en pergamentliknande effekt till textramen och de mörka strecken bidrar till att då den att stå ut från bakgrunden.

    Nu kommer du att lägga till en titel längst upp på frukostmenyn för att identifiera den för besökare.

  5. Använd textverktyget och skapa en textram ovanför frukostmenyn, justerad längs den övre vänstra sidan.

  6. Skriv ordet: Frukost.

  7. I panelen Text väljer du följande inställningar för att formatera texten:

    • Webbteckensnitt: Kaushan Script (eller ett annat skriptteckensnitt som du föredrar)
    • Teckenstorlek: 32Color: #70909D (i del 3 ändrade du namn på den här färgen till "blue-menu")
    • Radavstånd: 120 %
    • Justering: Centrerad
  8. När texten är markerad klickar du på knappen Ny stil längst ned i panelen Styckeformat för att skapa en ny styckestil. Dubbelklicka på den nya styckestilen och ändra namn på den till: menu-label.

Etiketten ovanför frukostmenyn gör det lättare för användarna att orientera sig och gör det tydligt vilken meny de läser. När du har gjort de här ändringarna ser den slutliga frukostmenyn ut ungefär som i följande bild.

Frukostmenyn anpassas och textinnehållet formateras.

I nästa avsnitt kommer du att kopiera frukostmenyn och sedan uppdatera textinnehållet i de kopierade textramarna för att skapa lunch-, middag- och dessertmenyerna.

Kopierade textramar

I föregående avsnitt skapade du frukostmenyns textram, fyllde den med text från en extern textfil, använde styckeformat för att använda en konsekvent textformatering och uppdaterade sedan utseende på textramen genom att lägga till en staplad bakgrundsbild, en fyllningsfärg och ett streck. Du lade också till en andra textram ovanför menytextramen och skapade en rubrik som identifierar frukostmenyn. Nästa steg bestod i att kopiera denna uppsättning element tre gånger för att skapa totalt fyra menyer.

  1. Använd markeringsverktyget för att markera textramen med ordet Frukost och textramen som innehåller frukostmenyn.

  2. Håll ned Alt och dra sedan uppsättningen med de två textramarna nedåt på sidan för att skapa en kopia. Dra kopian nedåt och håll den vertikalt justerad med originalet (de smarta stödlinjerna som visas tillfälligt anger när sidorna och mitten ligger i linje med varandra). Den kopierade uppsättningen med textramar ska vara ungefär 430 pixlar under originaluppsättningen.

    Dra en kopia av frukostmenyn ned längs sidan.

  3. Använd textverktyget och markera det kopierade textfältets etikett. Byt ut ordet Frukost till ordet: Lunch.

  4. Växla tillfälligt från Adobe Muse till datorn. Öppna mappen med exempelfiler och leta upp filen med namnet text-food-lunch.txt. Dubbelklicka på filen för att öppna den i en textredigerare. Kopiera den första textraden: The JR $9.

  5. Gå tillbaka till Adobe Muse. Använd textverktyget och klicka i lunchmenyns textram. Klistra in textinnehållet du kopierade i textramen och ersätt det befintliga första matalternativet i listan: Croissanter $3.

  6. Upprepa steg 4 och 5 för att kopiera varje rad med dollartecken från filen text-food-lunch.txt och ersätt objekten i lunchmenyn.

  7. Forsätt befolka lunchmenyn genom att kopiera beskrivningarna i filen text-food-lunch.txt och klistra in beskrivningarna en och en ovanpå de befintliga beskrivningarna i den kopierade lunchmenyn. Denna strategi säkerställer att de format du har använt på textinnehållet bevaras.

  8. Upprepa steg 1 till 7 för att markera de två lunchtextramarna, kopiera dem, dra ned dem ca 430 pixlar under den befintliga lunchmenyn, ändra namn på etiketten till Middag och kopiera sedan objekten i filen text-food-dinner.txt för att befolka middagsmenyn.

  9. Upprepa steg 8 en gång till. Den här gången ändrar du namn på den kopierade etiketten till: Dessert. Kopiera textraderna från text-food-dessert.txt för att slutföra dessertmenyn.

  10. Använd markeringsverktyget till att ändra positionen för var och en av de fyra textramarna så att textramarna justeras vertikalt med ungefär 120 pixlar mellan varje område.

    Justera de fyra menyerna (frukost, lunch, middag och dessert) vertikalt på matsidan.

Du kan ha lagt märke till när du drar varje kopia nedåt att det sidfotsområdet som du definierade i del 1 automatiskt flyttas nedåt för att skapa mer vertikal plats på sidan. Resultatet är att matsidan blir mer utdragen på höjden än de andra sidorna på exempelwebbplatsen.

Du måste lägga till ankare över varje meny om du vill skapa ett navigeringssystem som besökarna kan använda till att snabbt gå till de olika menyerna. Eftersom matsidan är en längre sida rullar innehållet vertikalt för att visa motsvarande meny, baserat på det menyalternativ som besökaren klickar på. Du kommer också att arbeta med länkar och skapa olika typer av länkar, inklusive länkar för hämtning så att besökarna kan hämta PDF-filer.

Infoga symboler och specialtecken

Med panelen Infoga tecken kan du infoga symboler, till exempel © eller specialtecken som beta (ᵝ), vilka inte är tillgängliga på ett vanligt tangentbord. Med panelen Infoga tecken kan du infoga Unicode-tecken.

Vilka symboler och tecken du kan infoga beror på vilket teckensnitt du väljer. Vissa teckensnitt kan till exempel innehålla internationella tecken (Ç, ë) och internationella valutasymboler (£, ¥). Det inbyggda teckensnittet Symbol innehåller pilar, punkter och vetenskapliga tecken.

Så här infogar du tecken med hjälp av panelen Specialtecken:

  1. Om du inte redan har gjort det så ritar du en textram på webbsidan där du vill infoga tecknet.

  2. Välj Fönster > Specialtecken för att öppna panelen Specialtecken.

  3. Använd listrutan för att välja en kategori tecken som du vill infoga.

  4. Panelen Infoga tecken visar alla tecken i den valda kategorin. Dubbelklicka på tecknet du vill infoga.

Redigera utseendet på textramar

Oavsett om du använder webbteckensnitt, webbsäkra teckensnitt eller systemteckensnitt kan du alltid redigera texten medan du jobbar i vyn Design. Du kan dessutom uppdatera utseendet på själva textramen så att textenheten visas på ett annat sätt.

Tänk på textramar som behållare som innehåller de olika textavsnitten. Du kan kontrollera dem på många olika sätt och påverka hur de visas på den publicerade webbplatsen.

När du vill formatera om och ändra hur textramar visas använder du markeringsverktyget och väljer textramen. Därefter gör du ändringarna som ändrar hur texten visas.

Obs! Om du väljer texten med Text-verktyget kan du ändra utseendet på texten med inställningsalternativen i panelen Text och på kontrollpanelen.

Du kan ändra dimensionerna på textramen genom att markera handtagen och dra ut eller krympa den. Du kan dra runt hela ramen på sidan och dess position. När du ändrar storleken på textramen visas ett verktygstips med de nya dimensionerna.

Dra i handtagen kring texten om du vill ändra storleken.

Du kan också rotera texten, men observera att om du roterar texten exporteras den som en bildfil, oavsett vilket teckensnitt du använder. Så var sparsam med att rotera texten och lägg alltid till en beskrivning till texten som du har roterat.

Om du vill uppdatera hur en textrambehållare visas kan du använda samma formateringsalternativ som när du redigerar rektanglar. Du kan ställa in fyllningsfärg och till och med lägga till bakgrundsfärger. Du kan dessutom ställa in linjer och använda samma inställningar till att kontrollera streckbredden, färgen och justeringen. På kontrollpanelen hittar du menyer där du kan ställa in hörn och effekter. Du kan ställa in hörnradien på textramen och lägga till skuggor, avfasade hörn och glöd.

Om du vill göra en textram transparent ändrar du opacitetsvärdet med opacitetsskjutreglaget.

Och använd menyn Hyperlänkar och hyperlänkfältet och lägg till beskrivningar till text, lägg till länkar och bestäm om länken ska öppnas i ett nytt webbläsarfönster.

Styra textjustering och figursättning av text runt en bild

Textramarna är extremt användbara när du skapar sidinnehåll. I förra avsnittet visade vi att textramar kan innehålla både grafiska element och effekter och text.

I det här avsnittet ska vi titta på hur du kan kontrollera texten inom en textram genom att använda utfyllnad och lägga till mer utrymme. Vi tittar också på hur du skapar tidskriftslayout genom att skapa textkolumner som du figursätter runt bilder.

Lägga till utfyllnad i text

Den text du skriver, monterar eller klipper in i en textram justeras som standard längs den vänstra sidan. Om du tittar på inställningarna i panelen Mellanrum är alla inställda på 0.

Standardutfyllnaden som används på text i en textram.

Om du vill lägga till mer utrymme till vänster, höger, ovanför eller under textramen skriver du in det önskade värdet (i bildpunkter) eller klickar på uppåt- och nedåtpilarna intill varje fält för att öka eller minska siffervärdet.

Göra indrag på text och kontrollera värden för radavstånd och spärrning/knipning

Du kan kontrollera textformateringen i Adobe Muse på samma sätt som när du uppdaterar textinnehåll i en ordbehandlare eller i ett bildredigeringsverktyg. När du har markerat ett textstycke hittar du många inställningar i panelen Text som du inte hittar på kontrollpanelen.

Så här gör du om du vill göra indrag på första raden i ett stycke:

  1. Använd textverktyget för att välja lite text.

  2. Ställ in indragsvärdet i textverktyget på det önskade bildpunktsvärdet.

Skriv en siffra i fältet eller klicka på uppåt- eller nedåtpilen.

I panelen Text kan du knipa och spärra texten och ange hur mycket utrymme det ska vara mellan varje tecken. Den här funktionen är särskilt bra om du vill skapa texteffekter eller om du vill göra ett stiliserat teckensnitt enklare att läsa på webben.

Du kan skriva antalet bildpunkter i fältet AV och använda mellanrumseffekten på den text du har markerat. Du kan också klicka på uppåt- och nedåtpilarna tills du når den önskade effekten.

Skriv en siffra i fältet AV (spärra/knip) eller klicka på uppåt- eller nedåtpilarna.

Radavståndskontrollen är en annan användbar funktion när du ska kontrollera textformat i stycken. Du justerar helt enkelt hur mycket utrymme det är mellan textraderna. Radavståndskontrollen finns både i kontrollpanelen och i panelen Text.

Skriv det önskade radavståndsvärdet i fältet eller klicka på pilarna så att utrymmet mellan raderna ökar eller minskar.

De återstående fyra verktygen för typografikontroll i panelen Text är:

Vänstermarginal och Högermarginal

Som förväntat reglerar de här verktygen avståndet mellan tecknen på båda sidorna om textramen och textramens kant. De här inställningarna liknar i stor utsträckning inställningen för Utfyllnad i panelen Mellanrum. Skillnaden är att du väljer textramen med markeringsverktyget när du vill ändra utfyllnadsvärdena (istället för att välja text med textverktyget).

Avstånd före och Avstånd efter

Med de här inställningarna kontrollerar du hur mycket utrymme som finns innan och efter ett hårt styckeavslut. Du kan visa mer eller mindre tomt utrymme mellan en uppsättning stycken som ligger i en enda textram.

Prova dig fram och testa alla funktioner så att du vet hur de fungerar. Då blir det lättare att kontrollera hur texten visas på de sidor du designar.

Montera text från en textfil på en sida

Källfilerna som innehåller själva texten för detta exempelprojekt finns i mappen Kevins_Koffee_Kart. Texten sparas som TXT-filer. Du kan lägga till text på en sida i Adobe Muse genom att montera en hel textfil. Du behöver inte öppna textfiler i en textredigerare och kopiera textraderna för att klistra in dem på sidorna.

  1. När du vill montera text väljer du antingen Arkiv > Montera eller så använder du kortkommandot för Montera på ditt tangentbord: Kommando+D (OS X) eller Ctrl+D (Windows). Det här är samma process som du använder när du monterar bildfiler på en sida.

  2. Navigera i dialogrutan Importera till mappen Kevins_Koffee_Kart och välj textfilen med namnet TextThreeSpeed.txt.

  3. Klicka på den ljusgrå större behållaren i dragspelswidgeten, nedanför rubriken TASTING NOTES, för att montera materialet i textfilen i den övre dragspelspanelen.

  4. När du har placerat den första textramen använder du markeringsverktyget till att placera den nedanför rubriken TASTING NOTES och drar i handtagen på ovansidan, undersidan och sidorna på textramen och utökar den ljusgrå behållaren efter behov så att både rubriken och texten nedanför den passar. När du klickar och drar texten ser du på den vänstra sidan på rubriktexten när den passar. En blå markering syns nämligen tillfälligt när de två objekten är i linje med varandra. Observera att du förutom att dra i handtagen för att anpassa storleken på texten även kan klicka på den grå behållaren och dra de nedre handtagen. Du utökar då höjden på behållaren.

  5. När den ljusgrå behållaren är markerad klickar du på fyllningsfärgväljaren och anger bakgrundsfärgen för panelen till Ingen fyllning.

    Lägg till text på den övre grå fliken och den större motsvarande behållaren för att fylla den med innehåll.

Arbeta med synkroniserad text

Mer information om hur du arbetar med synkroniserad text finns i Arbeta med synkroniserad text.

Arbeta med text i responsiva layouter

Om du vill ha mer information om hur du formaterar text i responsiva layouter läser du i Formatera text i responsiva layouter.

Adobes logotyp

Logga in på ditt konto