Scoprite come lavorare con il testo in Adobe Muse e come modificare l’aspetto del testo, aggiungere spaziatura, impostare valori di rientro e molto altro con il pannello Testo.

Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

Durante la progettazione di un sito Web in Adobe Muse, potete aggiungere del testo con i metodi seguenti:

  • Aggiungete una casella di testo e iniziate a digitare in essa il contenuto desiderato.
  • Salvate il testo in un file di testo esterno e importatelo nella pagina di Adobe Muse.
  • Usate un’applicazione come InDesign per comporre il testo. Quindi copiate negli Appunti il testo formattato e incollatelo in Adobe Muse.

Nel layout dinamico, è inoltre possibile formattare il testo per i diversi dispositivi utilizzati dagli utenti per visualizzare il sito Web. Ad esempio, potete fare in modo che il testo sia più grande e con una maggiore spaziatura per gli smartphone, rispetto alla versione per computer desktop. Inoltre, il Web design dinamico in Adobe Muse consente di formattare il testo per ogni punto di interruzione, impostando per ognuno di questi lo stile, il colore, l’interlinea, la spaziatura e la dimensione del testo più appropriati. Per informazioni su come formattare il testo durante la creazione di un sito Web per dispositivi diversi in un singolo file, consultate Formattare il testo nei layout dinamici.

Creazione e applicazione di stili alle cornici di testo

Copierete il testo dei menu da file di testo esterni e lo incollerete in cornici di testo. Inoltre formatterete il testo creando e applicando degli stili di paragrafo. Effettuate le seguenti operazioni:

  1. Per creare una cornice di testo quando modificate una pagina nella vista Progettazione, usate lo strumento testo. Se desiderate copiare un testo da un altro file sorgente, copiate il testo all'interno di Adobe Muse e usate lo strumento testo per fate clic nella cornice di testo. Incollate il testo copiato nella cornice di testo.

  2. Per selezionare una riga di testo, usate lo strumento testo.

  3. Nel pannello Testo, usate una delle seguenti impostazioni per formattare il testo:

    • Font: Droid Serif Bold (o altro font serif a vostra scelta)
    • Dimensione font: 14
    • Stile font: Bold
    • Colore : #A6342A (rosso)
    • Allineamento: A sinistra
    • Interlinea: 120%
  4. Formattate ulteriormente il testo con le seguenti opzioni:

    • Apice
    • Pedice
    • Maiuscolo
    • Minuscolo
  5. Con il testo selezionato, fate clic sul pulsante Nuovo stile nella parte inferiore del pannello Stili di paragrafo (Finestra > Stili di paragrafo). Fate doppio clic sul nuovo stile di paragrafo e rinominatelo “food-header”

    in modo da poterlo applicare facilmente anche agli altri titoli dei menu.

  6. Con lo strumento testo, selezionate la voce successiva del menu della prima colazione: Croissants $3

  7. Fate clic sullo stile di paragrafo “food-header” per applicare la stessa formattazione alla seconda voce del menu della prima colazione.

  8. Ripetete i passaggi 7 e 8 per selezionare ciascuna voce del menu della prima colazione (le righe che contengono il simbolo del dollaro) e applicarvi lo stile di paragrafo “food-header”.

  9. A partire dall’alto, selezionate con lo strumento testo la descrizione della prima voce del menu della prima colazione: “Bananas, mandarin oranges, red delicious apples, mixed berry cup”

  10. Fate clic sullo stile di paragrafo “body” nel pannello Stili di paragrafo per applicare la formattazione corrispondente alla riga di testo.

  11. Selezionate una alla volta le altre descrizioni e applicate a ciascuna di esse lo stile di paragrafo “body”.

fig_66_building
Formattate il testo del menu utilizzando gli stili di paragrafo.

Per riferimento, visitate la versione online del sito di esempio.

Per ulteriori informazioni su come utilizzare il testo, leggete l’articolo Composizione tipografica in Adobe Muse.

Usare il controllo ortografico interno

Adobe Muse include un controllo ortografico per trovare e correggere facilmente eventuali errori ortografici nelle cornici di testo. Il controllo ortografico è sempre abilitato. Le parole che non vengono trovate nel dizionario sono sottolineate in rosso.

fig_67_building
Le parole con possibili errori ortografici sono sottolineate in rosso.

fig_68_building

Per applicare una delle parole suggerite, premete il tasto Freccia giù oppure utilizzate il mouse per selezionare la parola suggerita e premete Invio per applicarla. Se per errore scegliete una parola sbagliata, potete annullare (Modifica > Annulla) e scegliete un’altra parola tra quelle suggerite oppure potete modificare direttamente la parola con lo strumento testo.

Se una parola contrassegnata come errore viene utilizzata una sola volta (ad esempio, il nome di una persona o di un luogo) e non contiene alcun errore, non è necessario correggerla. La sottolineatura rossa che compare nella vista Progettazione non è visibile quando visualizzate in anteprima, pubblicate o esportate il sito.

Quando utilizzate spesso alcune parole come il nome o l’indirizzo dell’azienda, potete aggiungere tali parole al dizionario del controllo ortografico in modo che non vengano più segnalate come errori.

Con lo strumento testo fate clic con il pulsante destro del mouse su una parola da aggiungere al dizionario e scegliete Aggiungi a dizionario dal menu di scelta rapida.

Potete impostare la lingua desiderata (che a sua volta imposta la lingua del dizionario per il controllo ortografico) per l’intero sito e per singole cornici di testo.

Per impostare il dizionario per il controllo ortografia per l’intero sito, scegliete File > Proprietà sito. Fate clic sulla scheda Testo, scegliete la lingua desiderata dal menu Lingua e fate clic su OK.

fig_69_building
Impostate la lingua per l’intero sito nella finestra di dialogo Proprietà sito.

Per alcuni progetti può essere necessario utilizzare del testo in più lingue. In questi casi, potete impostare la lingua predefinita (utilizzata più frequentemente) in Proprietà sito e quindi la lingua del controllo ortografico per quelle cornici che contengono del testo in un’altra lingua.

Per impostare il dizionario per il controllo ortografico per una cornice di testo, selezionate quest’ultima con lo strumento selezione. Fate clic con il pulsante destro del mouse e scegliete Lingua > (lingua desiderata) dal menu di scelta rapida.

fig_70_building
Impostate la lingua per la cornice di testo selezionata, dal relativo menu di scelta rapida.

L’operazione successiva prevede la modifica dell’aspetto della cornice di testo. Come per i rettangoli e le cornici per immagini, potete impostare la traccia, il riempimento e l’immagine di sfondo per le cornici di testo.

Aggiornare l’aspetto delle cornici di testo

In questa sezione potrete modificare gli attributi di una cornice di testo per darle maggior risalto rispetto alla grafica di sfondo della pagina.

  1. Con lo strumento selezione, selezionate la cornice di testo contenente il menu della prima colazione.

  2. Nel pannello di controllo, impostate lo spessore della traccia su 5 e il colore della traccia su nero.

  3. Dal menu Riempimento, impostate il colore di riempimento sul campione che avevate denominato cream-menu (oppure immettete il valore esadecimale del colore, #E9916F). Fate clic sull’icona della cartella accanto alla sezione Immagine e selezionate il file denominato bg-texture.png nella cartella dei file di esempio. Fate clic su OK per chiudere la finestra di dialogo Importa. Impostate il menu Adatta su Affianca, quindi fate clic ovunque sulla pagina per chiudere il menu Riempimento.

  4. Se necessario, con lo strumento selezione trascinate le maniglie della cornice di testo per ridimensionarla in base al testo. Le dimensioni del menu della prima colazione nel sito di esempio sono di circa 800x440 pixel.

    L’immagine di sfondo affiancata di colore panna aggiunge un effetto pergamena alla cornice di testo e il bordo scuro la fa risaltare meglio dallo sfondo.

    Ora aggiungerete un titolo all’inizio del menu della prima colazione.

  5. Con lo strumento testo, create una cornice di testo immediatamente al di sopra del menu della prima colazione, allineato al lato superiore sinistro.

  6. Digitate “Breakfast”.

  7. Nel pannello Testo, scegliete le seguenti impostazioni per formattare il testo:

    • Font Web: Kaushan Script (o un altro font di tipo script a vostra scelta)
    • Colore font: 32Color: #70909D (che avevate rinominato blue-menu nel corso della Parte 3)
    • Interlinea: 120%
    • Allineamento: Centrato
  8. Con il testo ancora selezionato, fate clic sul pulsante Nuovo stile in fondo al pannello Stili di paragrafo per creare un nuovo stile di paragrafo. Fate doppio clic sul nuovo stile di paragrafo e rinominatelo “menu-label”

L’etichetta al di sopra del menu della prima colazione consente ai visitatori di orientarsi e di capire a colpo d’occhio quale menu stanno leggendo. Dopo aver apportato queste modifiche, il menu della prima di colazione si presenta come nella figura di seguito.

fig_71_building
Menu della prima colazione formattato.

Nella sezione successiva verrà duplicato il menu della prima colazione e modificherete quindi il contenuto delle cornici di testo duplicate per creare i menu per il pranzo, la cena e i dessert.

Duplicare cornici di testo

Nelle sezioni precedenti avete creato la cornice di testo per il menu della prima colazione; avete inserito in essa il testo di un file esterno; avete utilizzato gli stili di paragrafo per formattare il testo in modo uniforme; e infine avete definito l’aspetto della cornice di testo aggiungendo un’immagine di sfondo affiancata, un colore del riempimento e una traccia. Inoltre avete aggiunto una seconda cornice di testo al di sopra della cornice del menu, per creare il titolo del menu della prima colazione. Ora dovrete duplicare tre volte questo set di elementi, per ottenere in totale quattro menu.

  1. Con lo strumento selezione, selezionate la cornice di testo contenente la parola Breakfast e quella contenente il menu della prima colazione.

  2. Tenete premuto il tasto Opzione (Mac) o Alt (Windows) e trascinate il set delle due cornici di testo in basso sulla pagina, per crearne un duplicato. Trascinate la copia verso il basso e mantenetela allineata in verticale con l’originale (le guide sensibili che vengono visualizzate temporaneamente indicano quando i lati e i centri sono allineati). Il set di cornici di testo duplicato deve trovarsi circa 430 pixel sotto il set originale.

    fig_72_building
    Trascinate un duplicato del menu della prima colazione sulla pagina.

  3. Con lo strumento testo, selezionate l’etichetta del campo di testo duplicato. Sostituite la parola “Breakfast” con “Lunch”.

  4. Passate temporaneamente da Adobe Muse al desktop. Aprite la cartella dei file di esempio e selezionate il file text-food-lunch.txt. Fate doppio clic sul file per aprirlo in un editor di testo. Copiate la prima riga di testo: The JR $9.

  5. Tornate ad Adobe Muse. Con lo strumento testo, fate clic all’interno della cornice di testo del menu del pranzo. Incollate nella cornice di testo il contenuto che avete appena copiato in modo da sostituire la prima voce del menu esistente: Croissant $3.

  6. Ripetete i passaggi 4 e 5 per copiare ogni riga contenente un simbolo di dollaro dal file text-food-lunch.txt e sostituire le voci del menu del pranzo.

  7. Continuate a popolare il menu del pranzo, copiando ciascuna delle descrizioni dal file text-food-lunch.txt e incollandole una alla volta sulle descrizioni esistenti nel menu duplicato. Così facendo viene mantenuta la formattazione dei precedenti contenuti di testo.

  8. Ripetete i passaggi da 1 a 7 per selezionare le due cornici di testo del pranzo, duplicarle, trascinarle fino a circa 430 pixel sotto il menu del pranzo, rinominare l’etichetta “Dinner” e quindi copiare e incollare il testo dal file text-food-dinner.txt.

  9. Ripetete ancora una volta il passaggio 8, questa volta rinominando l’etichetta duplicata “Dessert” e copiando il testo dal file text-food-dessert.txt per completare il menu dei dessert.

  10. Con lo strumento selezione, riposizionate le quattro cornici di testo in modo da allinearle verticalmente lasciando circa 120 pixel tra ogni area.

    fig_73_building
    Allineate i quattro menu (prima colazione, pranzo, cena e dessert) verticalmente sulla pagina “food”.

Mentre trascinate verso il basso ogni copia duplicata, l’area del piè di pagina definito nella Parte 1 si sposta automaticamente per creare più spazio verticale sulla pagina. La pagina “food” è quindi più lunga delle altre pagine del sito di esempio.

È necessario aggiungere dei punti di ancoraggio al di sopra di ciascun menu, per creare un sistema di navigazione che consenta ai visitatori di passare rapidamente da un menu all’altro. Poiché la pagina “food” è più lunga, il contenuto scorre in verticale per visualizzare il menu corrispondente, in base alla voce su cui fa clic il visitatore. Potrete inoltre vedere come utilizzare il menu Collegamenti per creare diversi tipi di collegamento, compresi quelli che consentono ai visitatori di scaricare un file PDF.

Inserire simboli e caratteri speciali

Il pannello Glifi consente di inserire simboli (ad esempio ©) o caratteri speciali (ad esempio ᵝ) non disponibili sulla tastiera standard. Il pannello Glifi consente di inserire caratteri Unicode.

I tipi di simboli e caratteri disponibili dipendono dal font selezionato. Ad esempio, alcuni font possono includere caratteri internazionali (come Ç oppure ë) e simboli di valute (£, ¥). Il font incorporato Symbol contiene frecce, punti elenco e simboli scientifici.

Per inserire dei caratteri tramite il pannello Glifi, effettuate le seguenti operazioni:

  1. Se necessario, create sulla pagina Web una cornice di testo in cui inserire il carattere.

  2. Scegliete Finestra > Glifi per visualizzare il pannello Glifi.

  3. Dal menu a discesa selezionate la categoria di caratteri che vi interessa.

  4. Nel pannello Glifi vengono visualizzati tutti i caratteri della categoria selezionata. Fate clic sul carattere da inserire.

Modificare l’aspetto delle cornici di testo

A prescindere dal tipo di font applicato al testo (Font Web, font sicuri per il Web o font di sistema), mentre lavorate nella vista Progettazione i contenuti testuali restano modificabili. Potete anche modificare l’aspetto della cornice di testo, per presentare diversamente l’intero blocco di testo.

Le cornici di testo sono come dei contenitori che racchiudono ogni sezione di testo. Potete controllarli in molti modi diversi per definire come vengono visualizzati nel sito online.

Per formattare una cornice di testo, selezionatela con lo strumento selezione e quindi applicate le modifiche che controllano l’aspetto del contenuto di testo.

Nota: se selezionate il testo con lo strumento testo, potete formattarlo con le opzioni di formattazione disponibili nel pannello Testo o di controllo.

Per ridimensionare una cornice di testo, trascinatene le maniglie per estenderla o ridurla. Per riposizionare una cornice di testo sulla pagina, trascinatela. Mentre ridimensionate la cornice di testo, le sue dimensioni sono riportate in una descrizione.

fig_15_type
Trascinate le maniglie di una cornice di testo per ridimensionarla.

Potete anche ruotare una cornice di testo. Tuttavia, tenete presente che il testo che si trova all’interno di una cornice ruotata verrà esportato come file di immagine. Usate quindi la rotazione con moderazione e aggiungete sempre un titolo al testo ruotato.

Potete modificare l’aspetto di un contenitore per cornice di testo con le stesse opzioni utilizzate per formattare un semplice rettangolo. Potete impostare il colore di riempimento e aggiungere un’immagine di sfondo. Potete inoltre impostare una traccia e specificarne lo spessore, il colore e l’allineamento. Con i menu Angoli ed Effetti del pannello di controllo potete impostare il raggio degli angoli della cornice di testo e applicare ombre esterne, smussi e bagliori.

Per aggiungere trasparenza alla cornice di testo, impostate il valore di opacità desiderato con il cursore Opacità.

Infine, servitevi del menu Collegamento ipertestuale e del relativo campo per aggiungere un titolo, un collegamento e per definire se il collegamento verrà aperto in una nuova finestra del browser.

Controllare l’allineamento del testo e lo scorrimento del testo attorno a un’immagine

Le cornici di testo sono molto utili per creare i contenuti delle pagine. Come spiegato nella sezione precedente, le cornici di testo possono contenere elementi grafici ed effetti nonché contenuto di testo.

Questa sezione spiega come controllare il contenuto testuale in una cornice di testo, impostandone la spaziatura. Spiega inoltre come creare layout di tipo rivista con colonne di testo che scorrono attorno a immagini.

Aggiungere spaziatura al testo

Per impostazione predefinita, il testo che digitate, inserite o incollate in una cornice di testo è allineato a sinistra. Tutte le impostazioni del pannello Spaziatura sono inizialmente impostate su 0.

PaddingZero
Spaziatura predefinita applicata al testo in una cornice di testo.

Per aggiungere più spazio a sinistra, a destra, in alto o in basso nella cornice di testo, digitate il valore desiderato (in pixel) oppure fate clic sulle frecce accanto a ciascun campo per aumentare o ridurre il valore numerico.

Rientro, interlinea e avvicinamento

In Adobe Muse potete controllare la formattazione del testo con opzioni simili a quelle disponibili nei programmi di elaborazione testo o di modifica delle immagini. Il pannello Testo contiene numerose impostazioni aggiuntive, alcune delle quali non sono visualizzate nel pannello di controllo quando è selezionato del testo.

Per fare rientrare la prima riga di testo in un paragrafo, effettuate le seguenti operazioni:

  1. Selezionate del testo con lo strumento testo.

  2. Impostate il valore desiderato per Rientro.

TypeToolIndent
Digitate un numero nel campo o usate le frecce per modificare il valore.

L’opzione Spazio tra lettere nel pannello Testo consente di definire la quantità di spazio tra ciascun carattere. È utile per ottenere effetti di testo particolari e per rendere più leggibili i font ornati.

Per applicare la spaziatura tra lettere al testo selezionato, immettete il numero di pixel nel campo Spazio tra lettere. Oppure fate clic sulla freccia verso l’alto o il basso per incrementare o ridurre il valore fino a ottenere l’effetto desiderato.

TypeToolAddSpace
Digitate un numero nel campo Spazio tra lettere o usate le frecce per modificare il valore.

Applicando l’interlinea potete controllare il formato del testo di un paragrafo regolando lo spazio tra le righe di testo. La funzione Interlinea è disponibile sia nel pannello di controllo che nel pannello Testo.

TypeToolLeading
Modificate il valore Interlinea per aumentare o ridurre lo spazio tra le righe di testo.

Nel pannello Testo sono inoltre disponibili le seguenti opzioni di composizione tipografica:

Margine sinistro e Margine destro

Questi comandi consentono di controllare lo spazio da lasciare tra il testo e il bordo della cornice di testo. Sono molto simili all’impostazione Spaziatura del pannello Spaziatura, ma per impostarle si seleziona la cornice di testo con lo strumento selezione (invece di selezionare il contenuto di testo con lo strumento testo).

Spazio prima e Spazio dopo

Queste impostazioni controllano la quantità di spazio (in pixel) lasciato vuoto prima o dopo un ritorno a capo (fine paragrafo). Queste impostazioni permettono di lasciare più o meno spazio vuoto tra un paragrafo e l’altro in una stessa cornice di testo.

Provate a usare tutte le impostazioni del pannello Testo per imparare a controllare il modo in cui il testo si presenta sulle pagine che create.

Inserire il testo da un file di testo su una pagina

I file sorgente contenenti il testo per questo progetto di esempio si trovano nella cartella Kevins_Koffee_Kart. Il testo è stato salvato come file TXT. In Adobe Muse, potete inserire un intero file di testo per aggiungere il testo alla pagina. Non è necessario aprire i file di testo in un editor di testo per copiare e incollare il testo nelle pagine.

  1. Scegliete File > Inserisci o utilizzate la scelta rapida da tastiera Ctrl+D (Windows®) o Comando+D (Mac OS). Si tratta della stessa operazione necessaria per inserire dei file immagine su una pagina.

  2. Nella finestra di dialogo Importa, individuate la cartella Kevins_Koffee_Kart e selezionate il file testo denominato TextThreeSpeed.txt.

  3. Fate clic sul contenitore più grande grigio chiaro nel widget Pannello a soffietto, sotto l’intestazione TASTING NOTES, per inserire il contenuto del file di testo nel pannello superiore.

  4. Dopo aver inserito la nuova cornice di testo, con lo strumento selezione riposizionatela sotto l’intestazione TASTING NOTES e trascinate le maniglie superiore, inferiore e laterali della cornice di testo per espandere il contenitore grigio chiaro in modo da contenere sia l’intestazione che il testo sottostante. Mentre trascinate il testo che avete inserito, quando questo si allinea al lato sinistro del testo di intestazione viene visualizzata temporaneamente una guida blu. Oltre a trascinare le maniglie per ridimensionare il testo inserito, potete anche fare clic sul contenitore grigio e trascinare le maniglie inferiori per espandere l’altezza del contenitore.

  5. Con il contenitore grigio chiaro selezionato, fate clic sul selettore Colore riempimento e impostate il colore di sfondo del pannello su Nessuno.

    fig_40
    Aggiungete del testo alla scheda grigia superiore e al contenitore corrispondente più grande.

Operazioni con il testo sincronizzato

Per informazioni su come lavorare con il testo sincronizzato, consultate Operazioni con il testo sincronizzato.

Operazioni con il testo nel layout dinamico

Per informazioni su come formattare il testo nel layout dinamico, consultate Formattare il testo nei layout dinamici.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online