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.

Il Web design dinamico o reattivo è supportato a partire dalla versione di febbraio 2016 di Adobe Muse. I siti Web creati con versioni precedenti possono essere convertiti in siti dinamici.

Perché convertire un sito esistente in sito con layout dinamico?

Se un progetto Adobe Muse esistente utilizza un layout alternativo, potete effettuarne la migrazione al layout dinamico. Tuttavia, se preferite, potete anche continuare a lavorare con layout alternativi.  

La creazione di siti dinamici spesso richiede molta programmazione e modelli complessi. Per la prima volta, Adobe Muse offre la possibilità di creare siti dinamici senza programmazione e senza griglie o modelli. Consnete inoltre di utilizzare un singolo file per creare siti completamente dinamici che si presentano correttamente su qualsiasi dispositivo, a prescindere dalle dimensioni del display. Non è più necessario creare layout distinti.

Il design dinamico di Adobe Muse facilita inoltre l’aggiornamento del testo e delle immagini. Non è più necessario dedicare ore ad aggiornare ogni singolo layout in seguito a una modifica. Inoltre, il layout dinamico è supportato anche da In-browser Editing, l’applicazione che consente di modificare il contenuto del sito direttamente dal browser.

Adobe Muse offre funzioni flessibili per la progettazione del sito. Potete scegliere se visualizzare o nascondere specifici oggetti in corrispondenza dei vari punti di interruzione. Ad esempio, potete rendere visibili le opzioni di menu touch se il sito viene visualizzato su un dispositivo mobile. Potete inoltre fissare gli oggetti in una data posizione o cambiarne la posizione per specifici punti di interruzione.

Di seguito viene spiegato come convertire i siti Adobe Muse esistenti in siti con layout dinamico. Convertite il sito in un sito con layout dinamico, per renderlo a prova di futuro.

Come si possono convertire i layout alternativi in layout dinamici?

Prima di convertire il sito Web per renderlo dinamico, seguite questa panoramica sul Web design dinamico in Adobe Muse.

Per iniziare a convertire il sito in un layout dinamico:

  1. Aprite il sito Web esistente.

  2. Aprite ogni pagina del sito Web e scegliete Pagina > Proprietà pagina.

    Fate clic su Proprietà di pagina.
  3. Nella scheda Layout, cambiate Larghezza fissa in Larghezza fluida. In questa finestra potete anche impostare i valori minimo e massimo per la larghezza della pagina, i margini e la spaziatura.

    Fate clic su OK.

    Cambiate Larghezza fissa in Larghezza fluida
    Cambiate Larghezza fissa in Larghezza fluida nella finestra Proprietà pagina.

  4. Per rendere fluide anche eventuali nuove pagine che verranno aggiunte in un secondo tempo, scegliete File > Proprietà sito. Nella finestra risultante, cambiate Larghezza fissa in Larghezza fluida.

  5. Scegliete la larghezza di pagina massima, la larghezza minima e l’altezza minima per il layout.

  6. Fate clic su OK.

  7. Passate alla pagina mastro e alle singole pagine per aprirle in modalità Larghezza fluida.

    Per ottimizzare la reattività di un design dinamico, disattivate gli effetti di scorrimento. Per mantenere gli effetti di scorrimento per alcune pagine, procedete con Larghezza fissa per tali pagine.

    Quando aprite le pagine in modalità Larghezza fluida, per impostazione predefinita agli oggetti sulla pagina sono applicate le impostazioni Larghezza fissa. Inoltre sono fissati a sinistra.

  8. Potete renderli fluidi in modo che possano essere ridimensionati in proporzione alla larghezza della finestra del browser. Fate clic con il pulsante destro del mouse su ognuno degli oggetti da rendere fluidi e selezionate l’opzione Dinamico.

    Rilasciate gli oggetti affinché non siano più fissi, ma fluidi: fate clic con il pulsante destro del mouse sull’oggetto e scegliete Fissa nella pagina > Fluido.

  9. Utilizzate il cursore di scorrimento per visualizzare il layout a diverse larghezze di pagina.

    Noterete che alcuni widget non sono fluidi. Aggiungete dei punti di interruzione in corrispondenza della posizione in cui i widget interferiscono con il design della pagina. Quindi ridimensionate oppure nascondete il widget per specifici punti di interruzione.

    Per impostazione predefinita, la barra dei punti di interruzione non è visibile quando lavorate su un sito Web creato con una versione precedente. Per rendere visibili i punti di interruzione, fate clic su Visualizza > Mostra punti di interruzione.

    Opzione Mostra punti di interruzione nel menu Visualizza
    Fate clic su Visualizza > Mostra punti di interruzione.

    Nota:

    Quando create un layout dinamico, definite innanzitutto le pagine per la larghezza massima desiderata. Quindi utilizzate il cursore di scorrimento per visualizzare le pagine a diverse larghezze di browser. Se si verificano dei problemi di layout, aggiungete altri punti di interruzione in corrispondenza delle larghezze problematiche. Quindi regolate il layout per questi punti di interruzione.

    In generale, è consigliabile aggiungere i punti di interruzione in base al layout del sito e non in base alle dimensioni del display dei dispositivi utilizzati dagli utenti.

  10. Regolate la dimensione e la posizione degli oggetti e formattate il testo, affinché si presentino tutti correttamente, a prescindere dalle dimensioni della finestra del browser. Per informazioni su come disporre gli oggetti in un layout dinamico, consultate Posizionare gli oggetti nel Web design dinamico.

    Nota:

    quando disponete gli oggetti, controllate la distanza tra di essi e tra gli oggetti e il bordo del browser. Potrebbe essere necessario regolare la posizione degli oggetti o aggiungere altri punti di interruzione per risolvere eventuali problemi di design tra un punto di interruzione e un altro.

  11. Verificate l’allineamento e la leggibilità del testo per tutti i punti di interruzione. Per riallineare la casella di testo o formattare il testo per specifiche larghezze di pagina, consultate Formattazione del testo nei layout dinamici.

  12. Per visualizzare un’anteprima delle modifiche, trascinate il cursore di scorrimento a specifici punti di interruzione oppure visualizzate la pagina in un browser Web.

  13. Eliminate eventuali layout alternativi del sito, creati per altri dispositivi. Con la progettazione Web dinamica potete convertire e gestire il sito per tutti i dispositivi, con una singola area di lavoro.

Il sito Web dinamico è ora pronto per essere pubblicato.

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