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.

In questo articolo verrà illustrato come utilizzare i collegamenti ipertestuali in Adobe Muse. Con l’uso dei collegamenti ipertestuali potete connettervi a siti Web esterni, file scaricabili, indirizzi e-mail e altro. I file scaricabili possono essere in formato PDF, DOC, PPT, TXT, contenuti multimediali avanzati o altri tipi di file da condividere con i visitatori ma che al momento non è possibile inserire nell’interfaccia di Adobe Muse. Potete impostare il collegamento ai file caricati nell’account host di Adobe Muse nonché a file che si trovano su siti Web in hosting su server di terze parti.

Video | Come creare un collegamento ipertestuale

Video | Come creare un collegamento ipertestuale
Adobe Press

Aggiungere collegamenti di ancoraggio in una pagina

In questa sezione, vedrete come collegare le voci di menu ai due elementi delle aree di ancoraggio, in modo da aggiungere dei collegamenti di ancoraggio al menu manuale. Effettuate le seguenti operazioni:

  1. Fate clic ovunque sulla pagina per selezionarla (l’indicatore della selezione presenta la dicitura “Pagina”). Quindi, fate clic due volte sulla voce di menu del widget (contenitore widget). Con il primo clic viene selezionato il widget del menu manuale e con il secondo la voce di menu. L’indicatore della selezione presenta la dicitura “Voce di menu”.
  2. Fate clic sul menu dei collegamenti ipertestuali per visualizzare l’elenco di tutte le pagine e di tutti gli ancoraggi presenti nel sito. Nella sezione Desktop, individuate la pagina in questione e osservate che sono ora elencate le quattro etichette di ancoraggio che avete creato. Selezionate l’etichetta di ancoraggio desiderato per collegarlo alla voce di menu corrispondente.
Collegamento di ancoraggi
Usate il menu Collegamenti per collegare l’ancoraggio “Breakfast” al relativo pulsante.

  1. Ripetete il passaggio 2 per aggiungere più collegamenti di ancoraggio.
  2. Scegliete File > Proprietà sito. Nella scheda Layout, controllate che l’opzione Abilita stato attivo per i collegamenti di ancoraggio sia selezionata. Questa opzione è attivata per impostazione predefinita per tutti i nuovi siti. Tuttavia se modificate un sito precedente potrebbe essere necessario attivarla.
  3. Scegliete File > Anteprima pagina nel browser.

Mentre fate clic sui collegamenti per visualizzare le diverse aree della pagina, osservate come nel menu di navigazione venga visualizzato lo stato attivo corrispondente. Questa funzione consente ai visitatori di orientarsi all’interno del sito e di capire facilmente quale sezione stanno visualizzando. Chiudete il browser e tornate ad Adobe Muse.

Inoltre, provate a scorrere la pagina verso l’alto e il basso: osservate come viene rilevata la posizione di ogni tag di ancoraggio e come lo stato attivo del menu manuale si aggiorna mano a mano che passate da un’area all’altra della pagina. Questa tecnica funziona per le pagine con scorrimento verticale e orizzontale.

Nota: le pagine devono essere sufficientemente lunghe o larghe, con lo spazio necessario per consentire ai tag di ancoraggio di passare da un’area all’altra. Se le aree della pagina sono troppo ravvicinate e tutto il contenuto rientra nella finestra del browser senza che sia necessario scorrere, i tag di ancoraggio non provocano alcun passaggio visibile all’area successiva.

  1. Chiudete il browser e tornate ad Adobe Muse.

Nella sezione successiva vedrete come aggiungere dei collegamenti di download, per consentire ai visitatori di scaricare file in formato PDF, DOC, MP3, MOV, PSD e JPEG ad alta risoluzione.

Suggerimento: se lavorate con altri designer su uno stesso progetto, potete collegarvi ai file .muse sorgente in modo che tutti i membri del team possano scaricarli direttamente dal sito Web.

Utilizzo di aree di tag di ancoraggio e stati attivi

Creando delle aree di ancoraggio in una pagina Web è possibile dividere visivamente le diverse sezioni di una pagina. È possibile accedere facilmente a ciascuna delle sezioni mediante i collegamenti di ancoraggio, elementi che facilitano la navigazione in una pagina.

Nel progetto finale, una pagina Web deve contenere dei collegamenti di ancoraggio mediante i quali i visitatori possono passare verticalmente da un’area all’altra per visualizzare il contenuto corrispondente. L’aggiunta di un tag di ancoraggio è analoga all’aggiunta di un marcatore sulla pagina. Facendo clic su un collegamento per ancoraggio, i visitatori possono passare direttamente all’area della pagina in cui si trova il tag di ancoraggio.

  1. Fate clic sul pulsante di ancoraggio nell’area di navigazione superiore per caricare lo strumento ancora.
Fate clic sul pulsante di ancoraggio
Caricate il cursore di inserimento per il primo ancoraggio facendo clic sul pulsante Ancoraggio nella parte superiore dell’area di lavoro.

  1. Fate clic una volta nella parte superiore della pagina, al di sopra dell’elemento di navigazione di primo livello nell’area di intestazione. Se necessario potete spostare temporaneamente il rettangolo di intestazione. Se spostate il contenuto dell’intestazione, accertatevi di riportarlo successivamente nella sua posizione.
  2. Nella finestra di dialogo Rinomina ancoraggio, immettete il nome del nuovo ancoraggio.
Immettete il nome di ancoraggio
Assegnate un nome all’ancoraggio per il menu della prima colazione, nella parte superiore della pagina.

  1. Ripetete i passaggi da 1 a 3 per definire le aree di ancoraggio e aggiungere altri collegamenti di ancoraggio.

Nota:

la quantità di spazio (in pixel) tra il primo ancoraggio (nella parte superiore della pagina) e la prima istanza del contenuto collegato (il widget di menu Manuale aggiunto nella sezione successiva) definisce “l’area attiva” che causa il passaggio alla stato attivo per ogni area. Ad esempio, se il primo ancoraggio si trova all’inizio della pagina e il widget di menu si trova 120 pixel sotto di esso, lo stato attivo delle voci di menu per le aree successive verrà aggiornato 120 pixel prima che compaia il testo del menu mano a mano che il visitatore scorre la pagina.

Nel passaggio successivo verrà aggiunto un widget di menu Manuale. Quindi collegherete i pulsanti ai tag di ancoraggio per creare un sistema di navigazione che consenta ai visitatori di passare alle sezioni successive della pagina e ai rispettivi menu.

Aggiungere collegamenti a file da scaricare

  1. Mentre modificate una pagina nella vista Progettazione, create con lo strumento testo una nuova cornice di testo vicino all’angolo superiore destro della cornice di testo del menu della prima colazione. Digitate “Download Menu” (Scarica il menu).
  2. Con la cornice di testo ancora selezionata, usate il pannello Testo per applicare le seguenti impostazioni:
    • Font Web: Kaushan Script (o un altro font di tipo script a vostra scelta)
    • Dimensione font: 14
    • Colore: #EEE5C4 (che avevate rinominato cream-menu nel corso della Parte 3)
    • Interlinea: 57%
    • Allineamento: Centrato
  3. Utilizzate il menu Riempimento per impostare il colore di riempimento su Nessuno. Fate clic sull’icona della cartella accanto alla sezione Immagine e selezionate il file denominato download-bg.png nella cartella dei file di esempio. Assicuratevi che il menu Adatta sia impostato su Dimensione originale e che l’opzione Posizione sia impostata su Centrato.
  1. Fate clic fuori dal menu Riempimento per chiuderlo. Se necessario, utilizzate lo strumento selezione per ridimensionare la cornice di testo e riposizionarla in modo da centrarla nell’angolo superiore destro della cornice di testo del menu della prima colazione.
  1. Con la cornice di testo ancora selezionata, selezionate il collegamento all’opzione File utilizzando il menu dei collegamenti nel pannello di controllo. Nella finestra di dialogo Importa visualizzata, individuate il file e selezionatelo facendo clic su Apri

Nota: quando selezionate un file con la funzione Collega a file, questo diventa una delle risorse del sito caricate quando il sito viene pubblicato e incluse nei file del sito quando questo viene esportato. È consigliabile copiare nella cartella locale del sito tutti i file per i quali desiderate inserire dei collegamenti, con tutte le altre immagini utilizzate nel sito.

Il collegamento al file PDF è stato aggiunto. Se controllate il pannello delle risorse, potete vedere che il file è ora elencato tra le risorse del sito Web.

  1. Selezionate la cornice di testo con lo strumento selezione. Copiate la cornice di testo “Download Menu” e incollatela sopra all’angolo superiore destro del menu del pranzo. Ripetete questo passaggio ancora due volte, per creare altre due copie da posizionare rispettivamente sull’angolo in alto a destra dei menu della cena e dei dessert.

In un progetto reale, dovrete collegare quattro file diversi, per fornire ai visitatori quattro file PDF diversi da scaricare, per visualizzare e stampare i menu. Tuttavia per questa esercitazione, il pulsante Scarica è collegato allo stesso file PDF per ciascun’area della pagina.

  1. Scegliete File > Anteprima pagina nel browser. Fate clic su una delle voci del menu orizzontale per passare alla sezione di pagina corrispondente. Mentre scorrete verso il basso per vedere i menu della cena e dei dessert, osservate come l’intestazione resta visualizzata sopra agli altri contenuti della pagina. Questo avviene perché la pagina “events” si basa sulla pagina mastro Primo piano e il contenuto dell’intestazione della pagina mastro è stato impostato come primo piano.
  2. Fate clic sul collegamento “Download Menu”: il file PDF viene scaricato nel computer.

Il comportamento dipende dal browser in uso e dalle sue preferenze. Con alcuni browser il PDF viene visualizzato nella finestra del browser, mentre con altri i file PDF viene scaricato sul desktop, da dove potrà essere aperto con Acrobat Pro o Acrobat Reader.

Creare collegamenti a indirizzi e-mail

Se avete già utilizzato Adobe Muse, noterete che il menu dei collegamenti è stato riorganizzato in diverse sezioni per trovare più facilmente i nomi delle pagine e degli elementi da collegare. In questa sezione esamineremo la struttura del menu Collegamenti e vedremo come filtrare gli elementi elencati. Inoltre verrà spiegato come aggiungere collegamenti con un indirizzo e-mail.

  1. Fate clic sulla freccia verso il basso del menu dei collegamenti per visualizzarne l’elenco completo.
Collegamenti a indirizzi e-mail
Elenco completo del menu Collegamenti.

  1. Il menu Collegamenti è strutturato in diverse sezioni. La sezione Collegamenti utilizzati di recente presenta tutti i collegamenti a siti Web esterni che sono stati aggiunti al sito. Per impostare un collegamento verso pagine Web esterne, potete inserire un URL direttamente nel campo Collegamenti.
  2. La sezione Desktop contiene le pagine del sito corrente. I tag di ancoraggio che avete aggiunto alla pagina “food” sono elencati in ordine alfabetico sotto alla pagina “food”. Potete quindi creare ancoraggi con lo stesso nome su pagine diverse ed essere comunque in grado di identificarli facilmente. In questo sito di esempio è disponibile un solo layout Desktop. Se il sito contenesse anche dei layout alternativi per Telefono o Tablet, queste sezioni verrebbero visualizzate con il corrispondente set di pagine.
  3. La sezione File, in fondo, contiene l’opzione Collega a file nonché tutti i file scaricabili che sono stati aggiunti al sito. Poiché avete aggiunto un collegamento al file KatiesCafeMenu.pdf, tale file è elencato in questa sezione e all’occorrenza può essere facilmente riutilizzato come collegamento in altre pagine del sito.
  4. Per aggiungere un collegamento e-mail (in modo che, quando un visitatore fa clic su di esso, venga aperto il client e-mail del visitatore e venga iniziato un nuovo messaggio con l’indirizzo e-mail del destinatario già inserito), specificate l’indirizzo e-mail con il prefisso “mailto:” nel campo del menu Collegamenti:

    mailto:email@indirizzo.com

  5. Talvolta l’elenco delle voci nel menu Collegamenti può diventare troppo lungo, rendendo difficile la navigazione nei siti Web più grandi. Se dovete impostare un collegamento per una particolare pagina o un particolare ancoraggio, file o URL esterno, immettete le prime lettere del collegamento nel campo del menu Collegamenti: verranno visualizzati gli oggetti corrispondenti. Questo consente di filtrare rapidamente l’elenco e individuare gli elementi desiderati.

Aggiungere collegamenti a siti Web esterni

Ora che i pulsanti per social network sono stati inseriti, potete aggiungere collegamenti esterni per ognuno dei siti di social network.

  1. Selezionate l’icona Facebook e digitate (oppure copiate/incollate) il collegamento alla pagina Facebook di Katie’s Cafe nel campo menu Collegamenti: http://www.facebook.com/KatiesCafeSF
  2. Selezionate l’icona Google+ e digitate (oppure copiate/incollate) il collegamento alla pagina Katie’s Cafe su Google+ nel campo menu Collegamenti: https://plus.google.com/u/1/117800212967830061444/posts
  3. Selezionate l’icona Twitter e digitate (oppure copiate/incollate) il collegamento alla pagina Katie’s Cafe su Twitter nel campo menu Collegamenti: http://twitter.com/katiescafesf
  4. Fate clic sull’icona Facebook per selezionarla. Fate clic sulla parola blu sottolineata “Collegamenti” che si trova a sinistra del menu Collegamenti. Nella finestra di dialogo visualizzata, selezionate la casella di controllo Apri il collegamento in una nuova finestra o scheda.
  5. Ripetete il passaggio 4 per impostare anche i collegamenti Google+ e Twitter per l’apertura in una nuova finestra del browser.

Si tratta di una prassi comune di Web design: i collegamenti verso altre pagine dello stesso sito si aprono nella stessa finestra del browser (impostazione predefinita in Adobe Muse), mentre i collegamenti verso pagine di siti Web esterni si aprono in una nuova finestra o scheda.

Individuare l’URL di un file in preparazione all’aggiunta di un collegamento

Per preparare il collegamento prima di aggiungerlo a una pagina nel sito Adobe Muse, potete visitare il file caricato e pubblicato usando un browser. Effettuate le seguenti operazioni.

  1. Avviate un browser.
  2. Passate al vostro sito o a un sito di terze parti che contiene il file dipendente caricato. Potete usare un motore di ricerca, come ad esempio Google, oppure potete scrivere il nome del dominio del sito direttamente nella barra degli indirizzi del browser.
Barra degli indirizzi del browser
Potete scrivere il nome del dominio del sito direttamente nella barra degli indirizzi del browser.

  1. Dopo essere passati alla home page del sito desiderato, fate clic nel sistema di navigazione del sito o digitate l’URL completo nella barra degli indirizzi del browser per passare al file dipendente specifico. A questo punto nel browser verrà visualizzato, riprodotto o scaricato il file corrispondente.
  2. Una volta che siete sicuri di aver immesso l’URL corretto per accedere al file caricato, selezionate tutto il contenuto della barra degli indirizzi del browser e scegliete Modifica > Copia. In alternativa, utilizzate le scelte rapide da tastiera Comando+C (Mac OS) o Ctrl+C (Windows).
Copiate l’indirizzo nella barra degli indirizzi del browser
Copiate l’URL dalla barra degli indirizzi del browser.

L’URL del file dipendente si trova ora negli Appunti. Fate attenzione a non copiare altri oggetti finché non avrete incollato l’URL del file dipendente nel campo Collegamento ipertestuale, come descritto nella sezione successiva.

Creare collegamenti a un file esterno

Dopo aver caricato il file dipendente, avervi effettuato l’accesso tramite un browser e averne copiato l’URL, l’ultimo passaggio da completare prevede la creazione del collegamento in una pagina del sito Adobe Muse. Effettuate le seguenti operazioni:

  1. Avviate Adobe Muse. Fate doppio clic sulla miniatura della pagina per aprirla nella vista Progettazione.
  2. Selezionate del testo, un’immagine inserita, o una forma rettangolare da usare come “pulsante” su cui i visitatori potranno fare clic per scaricare o accedere al file dipendente.
  3. Con il testo o l’elemento di pagina selezionato, fate clic nel campo a discesa Collegamenti ipertestuali e incollate l’URL (percorso assoluto) del file dipendente precedentemente copiato.

Se desiderate impostare il collegamento in modo che venga aperto in nuova finestra del browser, fate clic sull’etichetta a sinistra di Collegamento ipertestuale. Nella finestra di dialogo che viene visualizzata, attivate la casella di controllo accanto all’opzione Apri il collegamento in una nuova finestra o scheda, come illustrato di seguito.

Opzioni Collegamenti ipertestuali
Selezionate “Apri il collegamento in una nuova finestra o scheda”

Salvate la pagina e pubblicate le modifiche apportate al sito.

Visitate la pagina in un browser. Fate clic sul testo o pulsante del collegamento per verificare che funzioni correttamente.

Nota:

Potete provare a visitare il sito con diversi browser, ad esempio Chrome, Safari e Firefox, per vedere come si comportano diversi browser quando si fa clic sul collegamento del sito pubblicato per accedere al file dipendente.

Per ulteriori suggerimenti sull’utilizzo di Adobe Muse, visitate la pagina dedicata all’Aiuto e alle esercitazioni di Adobe Muse oppure la pagina dedicata agli eventi Adobe Muse per webinar in diretta e registrati.

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