Lær hvordan du jobber med tekst i Adobe Muse. Endre utseendet til tekst, legg til utfylling, angi innrykkingsverdien og mer ved hjelp av tekstpanelet.

Merk:

Adobe Muse legger ikke lenger til nye funksjoner, og kundestøtte opphører 26. mars 2020. Hvis du vil ha detaljert informasjon og hjelp, kan du se siden for tjenesteopphør for Adobe Muse.

Mens du jobber med å designe et webområde, kan du legge til tekst ved hjelp av Adobe Muse på følgende måter:

  • Legge til en tekstboks og deretter begynne å skrive inn innholdet i tekstboksen.
  • Lagre teksten i en tekstfil og importere denne filen på Adobe Muse-siden.
  • Bruke et program som InDesign til å utforme teksten. Kopiere denne forhåndsformaterte teksten til utklippstavlen og lime den inn i Adobe Muse.

I responsiv layout kan du også formatere teksten i henhold til enheten der brukeren viser webområdet ditt. Du kan for eksempel gjøre teksten for smarttelefoner større, med mer utfylling, sammenlignet med datamaskinversjonen. Videre gjør responsiv webdesign i Adobe Muse det også mulig å formatere tekst for hvert avbruddspunkt. Du kan endre stilen, fargen, linjeavstanden, utfyllingen og størrelsen til teksten for hvert avbruddspunkt. Hvis du vil finne ut mer om formatering av tekst mens du oppretter et webområde for flere enheter i en enkelt fil, kan du se Formatere tekst i responsiv layout.

Opprette og formatere tekstrammer

Du fyller menyene ved å kopiere menyteksten fra eksterne filer og lime inn innholdet i tekstrammer. Du skal også formatere teksten ved å opprette og bruke avsnittsstiler. Følg disse trinnene:

  1. Når du redigerer en side i Design-visningen, bruker du tekstverktøyet til å opprette en tekstboks. Hvis du vil kopiere tekst fra en annen filkilde, kopierer du teksten og går til Adobe Muse. Der bruker du tekstverktøyet til å klikke i tekstrammen. Lim inn tekstinnholdet du kopierte, i tekstrammen.

  2. Bruk tekstverktøyet til å velge en tekstlinje.

  3. Velg blant de følgende innstillingene i tekstpanelet for å formatere teksten:

    • Skrift: Droid Serif Bold (eller en annen serif-skrift du vil bruke)
    • Skriftstørrelse: 14
    • Stil: Fet
    • Farge: #A6342A (rød)
    • Justering: Venstre
    • Linjeavstand: 120 %
  4. Formatere tekst ytterligere ved hjelp av et av følgende ytterligere formateringsalternativer:

    • Hevet skrift
    • Senket skrift
    • Store bokstaver
    • Små bokstaver
  5. Mens teksten fortsatt er merket, klikker du Ny stil-knappen nederst i Avsnittsstiler-panelet (Vindu> Avsnittstiler). Dobbeltklikk den nye avsnittsstilen og gi den navnet Mat-topptekst.

    Dermed blir det enklere å bruke den samme formateringen på nytt for andre tekstoverskrifter på menyene.

  6. Merk det neste frokostelementet med tekstverktøyet: Croissanter $3.

  7. Klikk avsnittsstilen kalt Mat-bunntekst for å bruke samme formatering på det andre frokostelementet.

  8. Gjenta trinn 7 og 8 for å merke og bruke avsnittsstilen Mat-topptekst for alle frokostelementer i tekstrammen (alle linjer som inkluderer dollartegnet).

  9. Start øverst og bruk tekstverktøyet til å merke beskrivelsen av det første frokostelementet: Bananer, mandariner, røde epler, fruktblanding.

  10. Klikk tekstavsnittsstilen som vises i Avsnittsstiler-panelet for å bruke formateringen på tekstlinjen.

  11. Merk hver gjenstående beskrivelsestekst under frokostelementene én etter én, og bruk tekstavsnittsstilen.

fig_66_building
Bruk formatering til å formatere menyen med avsnittsstiler.

Det kan være nyttig å gå til, som er den publiserte versjonen av eksempelområdet, og bruke områdets design som referanse.

Hvis du vil lære mer om hvordan du jobber med tekst, kan du lese artikkelen Typografi i Adobe Muse.

Bruke den innebygde stavekontrollen

Adobe Muse inkluderer en stavekontroll som gjør det veldig enkelt å finne og rette opp typografiske feil i tekstrammer. Stavekontrollen er alltid aktivert. Det vises en rød strek under alle ord som ikke blir funnet i ordlisten.

fig_67_building
Ord som viser seg å være feilstavet, er understreket med rød farge.

fig_68_building

Hvis ett av de foreslåtte ordene er riktig, trykker du nedoverpilen eller bruker musen til å merke det foreslåtte ordet du vil bruke, og deretter trykker du Retur/Enter for å bruke det. Hvis du gjør en feil og velger feil ord, angrer du endringen (Rediger > Angre), og deretter velger du et annet foreslått ord eller redigerer ordet ved hjelp av tekstverktøyet.

Hvis et ord er flagget som at det har en stavefeil, brukes bare én gang (for eksempel navnet til en person eller et sted), og du vet at det er stavet riktig, trenger du ikke redigere ordet. Den røde understrekingen du ser i Design-visning, vises ikke når du forhåndsviser, publiserer eller eksporterer et område.

Når du jobber med ord som brukes ofte, for eksempel virksomhetsnavn eller -adresser, kan du legge til ordene i stavekontrollordlisten slik at de ikke blir merket som stavefeil.

Bruk tekstverktøyet til å høyreklikke et ord du vil legge til i ordlisten, og velg deretter alternativet Legg til i ordliste på kontekstmenyen som vises.

Du kan angi ønsket språk (som deretter automatisk angir språket i stavekontrollordlisten) for hele området og for enkeltstående tekstrammer.

Hvis du vil angi stavekontrollordlisten for hele området, velger du Fil > Egenskaper for område. Klikk Tekst-fanen, velg ønsket språk på Språk-menyen, og klikk deretter OK.

fig_69_building
Angi språket for hele området i dialogboksen Egenskaper for område.

Noen ganger krever områdeprosjekter at tekst er oppgitt på flere språk. I disse tilfellene kan du angi standardspråket (som brukes oftest) i Egenskaper for område, og deretter kan du angi stavekontrollspråket for bestemte tekstrammer som viser tekst på et annet språk.

Hvis du vil angi stavekontrollordlisten for en tekstramme, merker du en tekstramme med markeringsverktøyet. Høyreklikk og velg Språk > (velg ønsket språk) på kontekstmenyen som vises.

fig_70_building
Angi språket for en merket tekstramme på kontekstmenyen.

Deretter skal du oppdatere utseendet på tekstrammen. På samme måte som rektangler og bilderammer, kan du angi strøk, fyll og bakgrunnsbilde for tekstrammer for å formatere dem.

Oppdatere utseendet til tekstrammer

I denne delen skal du oppdatere attributtene for en tekstramme slik at de fremheves i forhold til bakgrunnsgrafikken på siden.

  1. Merk tekstrammen som inneholder frokostmenyen ved hjelp av markeringsverktøyet.

  2. Sett strøkbredden til 5 og strøkfargen til Svart i kontrollpanelet.

  3. Bruk Fyll-menyen til å sette fyllfargen til fargeprøven du kalte Krem-meny (eller angi den heksadesimale fargeverdien #E9916F). Klikk mappeikonet ved siden av Bilde-delen, og bla for å velge filen bg-texture.png i eksempelfilmappen. Klikk OK for å lukke dialogboksen Importer. Sett Tilpassing-menyen til Side ved side, og klikk deretter på siden for å lukke Fyll-menyen.

  4. Hvis det kreves, bruker du markeringsverktøyet til å dra håndtakene for tekstrammen og endre størrelsen til teksten passer. Dimensjonene for frokostmenyen på det publiserte eksempelområdet er omtrent 800 bildepunkter bredt og 440 bildepunkter høyt.

    Bakgrunnsbildet som vises side ved side med kremfyllfarge, legger til en pergamentaktig effekt i tekstrammen, og det mørke strøket gjør at det fremheves i forhold til bakgrunnen.

    Nå skal du legge til en tittel øverst på frokostmenyen slik at besøkende enkelt kan finne den.

  5. Bruk tekstverktøyet til å opprette en tekstramme rett over Frokost-menyen, justert mot venstre øverst.

  6. Skriv inn ordet Frokost.

  7. Velg følgende innstillinger i Tekst-panelet for å formatere teksten:

    • Webskrift: Kaushan-skrift (eller en annen skrift du foretrekker)
    • Skriftstørrelse: 32. Farge: #70909D (I del 3 endret du navnet på denne blåfarge-menyen)
    • Linjeavstand: 120%
    • Justering: Midtstilt
  8. Mens teksten fortsatt er merket, klikker du Ny stil-knappen nederst i Avsnittsstiler-panelet for å opprette en ny avsnittsstil. Dobbeltklikk den nye avsnittsstilen og gi den navnet Meny-etikett.

Etiketten over frokostmenyen hjelper brukere til å orientere seg, og gjør det visuelt tydelig hvilken meny de leser. Når du har gjort disse endringene, vil den ferdige frokostmenyen se ut omtrent som på følgende bilde.

fig_71_building
Frokostmenyen og tekstinnholdet er formatert.

I den neste delen skal du duplisere frokostmenyen, og deretter skal du oppdatere tekstinnholdet i de dupliserte tekstrammene for å opprette lunsj-, middag- og dessertmenyene.

Duplisere tekstrammer

I de forrige delene opprettet du tekstrammen for frokostmenyen, fylte den med tekst fra et eksternt område, brukte avsnittsstiler til å implementere konsekvent tekstformatering, og oppdaterte deretter utseendet på tekstrammen ved å legge til et bakgrunnsbilde side ved side, en fyllfarge og et strøk. Du la også til en sekundær tekstramme over menyens tekstramme for å opprette en topptekst for frokostmenyen. I det neste trinnet skal du duplisere dette settet med elementer tre ganger for å opprette totalt fire menyer.

  1. Bruk markeringsverktøyet til å merke tekstrammen med ordet Frokost og tekstrammen som inneholder frokostmenyen.

  2. Trykk og hold nede Valg-tasten (Mac) eller Alt-tasten (Windows), og dra deretter settet med to tekstrammer nedover siden for å opprette en duplisert kopi. Dra kopien nedover og hold den vertikalt i forhold til originalen (smarthjelpelinjene som midlertidig vises, angir når sidene og midtpartene er justert i forhold til hverandre). Det dupliserte settet med tekstrammer må være omtrent 430 bildepunkter under det opprinnelige settet.

    fig_72_building
    Dra en kopi av frokostmenyen nedover siden.

  3. Bruk tekstverktøyet til å merke etiketten for det dupliserte tekstfeltet. Erstatt ordet Frokost med ordet Lunsj.

  4. Bytt midlertidig fra Adobe Muse til skrivebordet. Åpne eksempelfilmappen og finn filen text-food-lunch.txt. Dobbeltklikk filen for å åpne den i et tekstredigeringsprogram. Kopier den første tekstlinjen: JR $9..

  5. Gå tilbake til Adobe Muse. Bruk tekstverktøyet til å klikke i tekstrammen for lunsjmenyen. Lim inn tekstinnholdet du kopierte, i tekstrammen. Dermed erstattes det eksisterende første matelementet Croissanter $3..

  6. Gjenta trinn 4 og 5 for å kopiere hver linje med dollartegn fra filen text-food-lunch.txt for å erstatte elementene på lunsjmenyen.

  7. Fortsett med å fylle ut lunsjmenyen ved å kopiere hver av beskrivelsene i filen text-food-lunch.txt, og lim inn beskrivelsene en etter en over de eksisterende beskrivelsene på den dupliserte lunsjmenyen. Denne strategien sikrer at stilene du brukte i tekstinnholdet, fortsatt blir brukt.

  8. Gjenta trinn 1 til 7 for å merke de to lunsjtekstrammene, duplisere dem, dra dem nedover omtrent 430 bildepunkter under den eksisterende lunsjmenyen, endre navnet på etiketten til Middag og deretter kopiere elementene i filen text-food-dinner.txt for å fylle ut middagsmenyen.

  9. Gjenta trinn 8 på nytt. Denne gangen gir du nytt navn til den dupliserte etiketten: Dessert. Kopier tekstlinjene fra filen text-food-dessert.txt for å ferdigstille dessertmenyen.

  10. Bruk markeringsverktøyet til å omplassere hver av de fire tekstrammene etter behov, slik at de fire tekstrammene er justert vertikalt med rundt 120 piksler mellom hvert felt.

    fig_73_building
    Juster alle fire menyene (frokost, lunsj, middag og dessert) vertikalt på matsiden.

Du har kanskje lagt merke til at etter hvert som du drar hver dupliserte kopi nedover, flyttes bunntekstområdet du definerte i Del 1, automatisk nedover for å lage mer vertikal plass på siden. Det fører til at matsiden er høyere enn andre sider på dette eksempelområdet.

Du må legge til ankere over hver meny for å opprette et navigasjonssystem som gjør det mulig for besøkende å gå raskt til hver meny. Matsiden er en lenger side, og derfor blas innholdet vertikalt for å vise den tilsvarende menyen, basert på menyelementet som besøkende klikker. Du utforsker også hvordan du arbeider med koblingene for å lage ulike typer koblinger – inkludert nedlastingskoblinger, som gir besøkende muligheten til å laste ned en PDF-fil.

Sette inn symboler og spesialtegn

Du kan bruke Tegnvariant-panelet til å sette inn symboler, for eksempel ©, eller spesialtegn som beta (ᵝ), som ikke er tilgjengelige på et vanlig tastatur. Du kan også bruke Tegnvariant-panelet til å sette inn Unicode-tegn.

Hvilke typer symboler og tegn du kan sette inn, avhenger av skriften du velger. Noen skrifter kan for eksempel inneholde internasjonale tegn (Ç, ë) og internasjonale monetære symboler (£, ¥). Den innebygde symbolskriften inneholder piler, punkt og vitenskapelige symboler.

Gjør følgende hvis du vil sette inn tegn ved hjelp av Tegnvariant-panelet:

  1. Hvis du ikke har gjort det allerede, tegner du en tekstboks på websiden der du vil sette inn tegnet.

  2. Velg Vindu > Tegnvariant for å hente frem Tegnvariant-panelet.

  3. Bruk rullegardinlisten til å velge kategori for tegnet du vil sette inn.

  4. Tegnvariant-panelet viser alle tegn fra en valgt kategori. Klikk tegnet du vil sette inn.

Redigere utseendet til tekstrammer

Uansett om du bruker webskrifter, websikre skrifter eller systemskrifter i tekst, kan du redigere tekstinnholdet mens du jobber i Designvisning. Du kan også oppdatere utseendet til selve tekstrammen, slik at tekstblokken vises på en annen måte.

Tenk på tekstrammer som beholdere som omslutter hver del av teksten. Du kan kontrollere dem på mange måter for å påvirke hvordan de vises på det publiserte området.

Når du vil formatere tekstrammer, bruker du markeringsverktøyet til å merke tekstrammen og deretter bruke endringene som påvirker utseendet til tekstinnholdet.

Merk: Hvis du merker teksten med tekstverktøyet, kan du formatere teksten ved å angi formateringsalternativer i Tekst-panelet i kontrollpanelet.

Du kan endre størrelsen på dimensjonene for en tekstramme ved å dra håndtakene for å strekke eller krympe den. Du kan også dra hele tekstrammen rundt siden for å omplassere den. Når du endrer størrelsen på tekstrammen, viser et verktøytips tekstrammens dimensjoner.

fig_15_type
Dra håndtakene som omslutter en tekstramme for å endre størrelsen på tekstrammen.

Du kan også rotere en tekstramme, men vær oppmerksom på at hvis du roterer en tekstramme (uavhengig av skriftene du bruker), blir teksten eksportert som en bildefil. Så gjør det med måte, og legg alltid til en tittel i roterende tekst.

Hvis du vil oppdatere utseendet av en tekstrammebeholder, kan du bruke de samme formateringsalternativene du bruker til å redigere rektangler. Du kan angi fyllfargen og til og med legge til bakgrunnsbilder. Du kan også angi et strøk og bruke de samme innstillingene til å kontrollere strøkbredden, -fargen og -justeringen. Ved hjelp av Hjørner- og Effekter-menyene i kontrollpanelet kan du angi hjørneradiusen for tekstrammen og bruke skyggelegginger, skråkanter og gløder.

Hvis du vil legge til gjennomsiktighet i en tekstramme, endrer du tetthetsverdien ved hjelp av tetthetsglidebryteren.

Og bruk Hyperkobling-menyen og Hyperkobling-feltet til å legge til titler i tekst, og i tillegg til å legge til koblinger og definere om koblingen åpnes i et nytt webleservindu.

Kontrollere tekstjustering og tekstbryting rundt et bilde

Tekstrammer er svært nyttige når du oppretter sideinnhold. Som du så i forrige del, kan tekstrammer inneholde grafikkelementer og effekter samt tekstinnhold.

I denne delen skal du se nærmere på hvordan du kontrollerer tekstinnholdet i en tekstramme, ved å angi utfylling for å legge til mer plass. Du skal også lære hvordan du oppretter layouter med tidsskriftstil ved å opprette tekstkolonner som brytes rundt bilder.

Legge til utfylling i tekst

Som standard blir teksten du skriver inn, plasserer eller limer inn i en tekstramme, plassert til venstre. Hvis du sjekker innstillingene i Avstand-panelet, vil du se at alle er satt til 0.

PaddingZero
Standardutfyllingen som brukes for tekst i en tekstramme.

Hvis du vil legge til mer plass til venstre, høyre, toppen, eller bunnen for tekstrammen, skriver du inn den ønskede verdien (i bildepunkter) eller klikker oppover- og nedoverpilene ved siden av hvert felt for å øke eller redusere den numeriske verdien.

Rykke inn tekst og kontrollere linjeavstands- og tegnavstandsverdier

Du kan kontrollere tekstformatering i Adobe Muse på samme måte som du oppdaterer tekstinnhold i tekstbehandlingsprogrammer og mange andre redigeringsverktøy. Tekst-panelet inkluderer mange tilleggsinnstillinger, og noen av disse vises ikke i kontrollpanelet når teksten er merket.

Følg disse trinnene for å rykke inn første tekstlinje i et avsnitt:

  1. Bruk Typeverktøy til å merke tekst.

  2. Oppdater innrykkingsverdien i Typeverktøy til den ønskede bildepunktverdien.

TypeToolIndent
Skriv inn et tall i feltet, eller klikk oppover- og nedoverpilene for å endre verdien.

Ved hjelp av alternativet Tegnavstand i Tekst-panelet kan du definere avstanden mellom hvert tegn. Det er spesielt nyttig for teksteffekter og for å gjøre det enklere å lese forseggjorte eller formaterte skrifter på Internett.

Du kan bruke bokstavavstand for merket tekst ved å angi antallet bildepunkter i Tegnavstand-feltet. Alternativt kan du klikke oppover- og nedoverpilene for å øke eller redusere verdien til du har oppnådd ønsket effekt.

TypeToolAddSpace
Skriv inn et tall i Tegnavstand-feltet, eller klikk oppover- og nedoverpilene for å endre verdien.

Linjeavstand er en annen nyttig funksjon du kan bruke til å kontrollere formatering av tekst i avsnitt. Ved hjelp av linjeavstand kan du justere avstanden mellom tekstlinjer. Avstandsfunksjonen er tilgjengelig både i kontrollpanelet og Tekst-panelet.

TypeToolLeading
Oppdater linjeavstandsverdien for å øke eller redusere avstanden mellom linjer.

De fire andre typografikontrollene i Tekst-panelet er:

Venstre marg og Høyre marg

Som forventet kontrollerer disse avstanden mellom tegnene på hver side av tekstrammen og tekstrammens kantlinje. Disse innstillingene minner veldig om innstillingene for utfyllingsverdiene i Avstand-panelet, bortsett fra at du merker tekstrammen med markeringsverktøyet (i stedet for å merke tekstinnholdet med tekstverktøyet) for å redigere utfyllingsverdier.

Mellomrom foran og Mellomrom etter

Du kan bruke disse innstillingene til å kontrollere mengden plass (i bildepunkter) som vises før eller etter et hardt avsnittsskift. Ved hjelp av disse innstillingene kan du vise mer eller mindre hvitt mellomrom mellom et sett med avsnitt som finnes i én tekstramme.

Eksperimenter med å bruke alle disse innstillingene i Tekst-panelet slik at du lærer hvordan du kan kontrollere visningen av tekstinnhold på sidene du designer.

Plassere tekst fra en tekstfil på en side

Kildefilene som inneholder en kopi av brødteksten for dette eksempelprosjektet, finnes i mappen Kevins_Koffee_Kart. Teksten lagres som TXT-filer. I Adobe Muse kan du plassere en tekstfil for å legge til skrift på siden. Du trenger ikke å åpne tekstfiler i et tekstredigeringsprogram og kopiere tekstlinjene for å lime dem inn på sidene dine.

  1. Velg enten Fil > Plasser, eller bruk tastaturkommandoen Plasser, Kommando + D (Mac) eller Ctrl + D (Windows®) til å starte plasseringsoperasjonen. Dette er den samme prosessen som du bruker når du plasserer bildefiler på en side.

  2. I dialogboksen Importer går du til mappen Kevins_Koffee_Kart og velger tekstfilen TextThreeSpeed.txt.

  3. Klikk den lysegrå beholderen i trekkspillkontrollprogrammet under toppteksten TASTING NOTES for å plassere tekstfilens innhold i det øverste Trekkspill-panelet.

  4. Etter at du har plassert den nye tekstrammen, bruker du markeringsverktøyet til å omplassere den under toppteksten TASTING NOTES. Deretter drar du håndtakene øverst, nederst og på sidene av tekstrammen for å utvide den lysegrå beholderen etter behov slik at både toppteksten og teksten under passer i rammen. Når du klikker og drar teksten du nettopp plasserte, kan du finne ut når den justeres til venstre for toppteksten, fordi det midlertidig vises en blå hjelpelinje når de to elementene er plassert ved siden av hverandre. Vær oppmerksom på at i tillegg til å dra håndtakene for å endre størrelse på den plasserte teksten kan du klikke den grå beholderen og dra bunnhåndtakene for å utvide høyden på beholderen.

  5. Når den lysegrå beholderen er merket, klikker du fyllfargevelgeren og setter panelets bakgrunnsfarge til Uten fyll.

    fig_40
    Legg til tekst i den øverste grå fanen og den store samsvarende beholderen for å fylle den med innhold.

Arbeide med synkronisert tekst

Du finner informasjon om hvordan du arbeider med synkronisert tekst i Arbeide med synkronisert tekst.

Arbeide med tekst i responsiv layout

Hvis du vil lære hvordan du formaterer tekst i responsiv layout, kan du se Formatere tekst i responsiv layout.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet