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.

Utilizzo di pagine mastro gerarchiche

Muse consente di creare pagine mastro applicabili ad altre pagine mastro. Le pagine mastro gerarchiche funzionano in modo simile alle altre pagine mastro applicate a una pagina nella vista Pianificazione. Nelle versioni precedenti di Muse è possibile creare più pagine mastro, ma si può applicare una sola pagina mastro alla volta, con una serie di elementi di pagina, a una pagina Web.

In passato, per creare un sito con due sezioni simili ma con aspetti diversi, potevate duplicare una pagina mastro, modificarla leggermente e applicarla alle pagine specifiche. Di conseguenza, entrambe le pagine mastro contenevano spesso alcuni elementi condivisi; pertanto, per aggiornare il sito e mantenere la sincronizzazione di tutti gli elementi, era necessario modificare il contenuto di due pagine mastro.

Con Muse 4.0 e versioni successive, potete creare una pagina A-Mastro contenente gli elementi comuni a più pagine mastro (ad esempio aggiungendo lo sfondo e un piè di pagina come descritto nelle sezioni precedenti), quindi altre pagine mastro che con elementi univoci e che ereditano tutti gli elementi della pagina A-Mastro. Potete poi creare una terza pagina mastro, con tutti gli elementi nella pagina A-Mastro ed elementi univoci della seconda sezione.

Utilizzando le pagine mastro è possibile limitare il numero di occorrenze di un elemento a una sola istanza. Quando riprogettate un sito, dovrete quindi modificare ogni elemento una sola volta e tutte le relative istanze verranno aggiornate automaticamente nel sito.

Potete gestire e applicare le pagine mastro nella vista Pianificazione. Per applicare la pagina mastro a una pagina si trascina la miniatura della pagina mastro sulla miniatura della pagina. Allo stesso modo, per applicare una pagina mastro a un’altra pagina mastro la si trascina su di essa. Se preferite, potete fare clic con il pulsante destro del mouse su una miniatura di pagina mastro o di pagina nella vista Pianificazione e usare l’opzione Mastro nel menu di scelta rapida per impostare la mastro.

Se passate il puntatore del mouse su un nome di pagina o di pagina mastro, viene visualizzata una descrizione contenente la gerarchia delle mastro applicate a tale pagina o pagina mastro.

Finora, avete creato la pagina A-Mastro con lo sfondo di riempimento del browser affiancato e il contenuto piè di pagina. Nella sezione successiva, creerete una nuova pagina mastro che eredita i contenuti della pagina A-Mastro e a cui aggiungerete l’intestazione. Potrete quindi applicare tale nuova pagina mastro alle pagine del sito. Effettuate le seguenti operazioni:

  1. Con la mappa del sito nella vista Pianificazione, passate il puntatore del mouse sulla miniatura della pagina A-Mastro per visualizzare i pulsanti + su entrambi i lati. Fate clic sul segno + a destra della pagina A-Mastro per creare una nuova pagina mastro. Per impostazione predefinita, la nuova pagina mastro è denominata B-Mastro.
  2. Fate doppio clic sul campo di testo B-Mastro sotto alla miniatura per modificarlo. Digitate un nome più descrittivo da assegnare alla nuova pagina mastro creata: Principale.
  3. Fate clic con il pulsante destro del mouse sulla miniatura della pagina mastro Principale e scegliete Mastro > A-Mastro nel menu di scelta rapida.
In questa esercitazione, conoscerete meglio l’area di lavoro di Adobe Muse e imparerete a realizzare un sito Web ricco di funzioni senza scrivere alcun codice. Scoprirete come creare una mappa del sito e come utilizzare le pagine mastro e le opzioni di riempimento del browser in Muse.
Scegliete A-Mastro nel menu per applicarla alla pagina mastro Principale.

Una volta applicata la pagina A-Mastro alla pagina mastro Principale, la miniatura della pagina mastro Principale viene aggiornata di conseguenza. L’etichetta blu sotto alla miniatura della pagina Principale riporta [A-Mastro] perché al passaggio 3 avete applicato tale pagina mastro alla pagina mastro Principale.

È importante precisare che la pagina mastro Principale non contiene effettivamente gli elementi A-Mastro, dal momento che non avete semplicemente duplicato la pagina A-Mastro. Al contrario, avete collegato la pagina mastro Principale alla A-Mastro: questo significa che qualunque nuovo contenuto aggiunto alla A-Mastro verrà visualizzato automaticamente nella pagina mastro Principale.

Come accennato in precedenza, il vantaggio principale delle pagine mastro gerarchiche è che i piè di pagina, i menu e lo sfondo sono presenti solo sulla pagina A-Mastro. Pertanto, se in un secondo momento un cliente chiede un diverso sfondo affiancato, sarà sufficiente aggiornare solo la pagina A-Mastro e la pagina mastro Principale si aggiornerà automaticamente di conseguenza.

Più avanti in questa esercitazione, creerete due mastro diverse per diversi aspetti delle due sezioni del sito. Tuttavia, per ora potete aggiornare le pagine nella vista Pianificazione in modo che tutte usino la nuova pagina mastro Principale, anziché A-Mastro.

  1. Trascinate la pagina mastro Principale sulla miniatura della pagina “food” nell’angolo in alto a sinistra. Mentre trascinate la pagina mastro Principale sulla miniatura “food”, il testo blu sotto alla miniatura della pagina “food” si aggiorna da [A-Mastro] a [Principale].

Questo è il metodo più comune per applicare le pagine mastro alle pagine in vista Pianificazione, ma potete anche provare ad applicarle usando il menu di scelta rapida:

  1. Fate clic con il pulsante destro del mouse sulla miniatura della pagina “events” e scegliete Mastro > Principale nel menu di scelta rapida.
In questa esercitazione, conoscerete meglio l’area di lavoro di Adobe Muse e imparerete a realizzare un sito Web ricco di funzioni senza scrivere alcun codice. Scoprirete come creare una mappa del sito e come utilizzare le pagine mastro e le opzioni di riempimento del browser in Muse.
Usate il menu di scelta rapida per impostare Principale come pagina mastro per la pagina “events”.

  1. Applicando il vostro metodo preferito (descritto ai passaggi 4 e 5), impostate Principale come pagina mastro per le tre pagine rimanenti: home, about e visit.

Dopo questa modifica, tutte le etichette di testo blu sotto ogni miniatura di pagina indicano [Principale]. Quando passate il cursore del mouse su una delle etichette blu, viene visualizzata una descrizione con la gerarchia delle pagine mastro applicate.

In questa esercitazione, conoscerete meglio l’area di lavoro di Adobe Muse e imparerete a realizzare un sito Web ricco di funzioni senza scrivere alcun codice. Scoprirete come creare una mappa del sito e come utilizzare le pagine mastro e le opzioni di riempimento del browser in Muse.
Al passaggio del mouse sull’etichetta viene visualizzata un’utile descrizione della gerarchia.

In questo esempio, la gerarchia presenta un solo livello. In altre parole, la pagina mastro Principale eredita i contenuti della pagina A-Mastro. Tuttavia, se lo desiderate, potete creare una catena di pagine mastro. Ad esempio, potete creare una pagina mastro denominata Intestazione, che include solo il contenuto dell’intestazione, quindi un’altra pagina mastro denominata Piè di pagina che eredita il contenuto della pagina mastro Intestazione, e un’altra ancora denominata Principale che eredita tutto il contenuto della pagina mastro Piè di pagina (che include anche l’intestazione). In base alla progettazione di un sito e alla consapevolezza che alcuni elementi potrebbero cambiare, potete creare diversi livelli di eredità. Questo struttura è analoga alla creazione di simboli, in quanto consente di isolare parti specifiche di un progetto, trovare e modificare facilmente tali parti in un secondo momento, in base alle esigenze.

Potete ora procedere con l’esercitazione successiva, Utilizzo di Muse per creare il primo sito Web, parte 2, in cui imparerete a usare i widget (funzioni per sito interattive predefinite che potete trascinare sulle pagine). I widget consentono di aggiungere rapidamente alle pagine delle funzionalità avanzate senza scrivere alcun codice. Scoprirete come modificare il comportamento e l’aspetto dei widget, per personalizzarne la visualizzazione nella struttura del sito.

Aggiungere il contenuto dell’intestazione alla pagina mastro Principale

Dopo aver aggiunto il piè di pagina con un widget per menu sulla pagina mastro Principale, aggiungerete ora l’elemento di navigazione di primo livello. Per aggiungere dei contenuti nell’area di intestazione, effettuate le seguenti impostazioni.

  1. Nella vista Pianificazione, fate doppio clic sulla miniatura della pagina mastro Principale per aprire la pagina e iniziare a modificarla nella vista Progettazione (se non è già aperta).
  2. Con lo strumento rettangolo, tracciate un rettangolo dall’angolo in alto a sinistra dell’area visibile del browser fino all’angolo in alto a destra, ossia su tutta la larghezza. Con lo strumento selezione, trascinate le maniglie dei lati superiore, sinistro e destro del rettangolo fino a visualizzare brevemente il bordo rosso, a indicare che la larghezza del rettangolo è impostata su 100%, con le stesse modalità di creazione del piè di pagina.
fig_30_building
Tracciate un rettangolo che si estende sull’intera larghezza della finestra del browser.

 

Dopo aver trascinato le maniglie, la dimensione del rettangolo deve essere di circa 1160x253 pixel. Il valore orizzontale X è -100, ossia l’angolo superiore sinistro del rettangolo si trova a 100 pixel dall’angolo superiore sinistro della pagina. Il valore Y è 0, ossia l’angolo superiore sinistro del rettangolo corrisponde in verticale all’angolo superiore sinistro della pagina. Se desiderate impostare esattamente questi valori, potete utilizzare i campi del pannello Trasforma o del pannello di controllo mentre il rettangolo è selezionato.

  1. Impostate la spessore della traccia su 0 e utilizzate il menu Riempimento per impostare il colore di riempimento su Nessuno. Fate clic sull’icona della cartella a destra della sezione Immagine e selezionate il file tile-header.png. Impostate il menu Adatta su Affianca in orizzontale.
fig_31_building
Utilizzate il menu Adatta per affiancare orizzontalmente l’immagine di sfondo.

 

Sebbene l’intestazione sia composta da un singolo rettangolo, l’immagine di sfondo affiancata in orizzontale crea l’impressione di un rettangolo grigio su un rettangolo nero.

  1. Scegliete File > Inserisci oppure usate la scelta rapida da tastiera Comando+D (Mac OS) o Ctrl+D (Windows) per aprire la finestra di dialogo Importa.
  2. Selezionate il file denominato bg-ribbon.png nella cartella dei file di esempio. Fate clic su Apri per sceglierlo e chiudete la finestra di dialogo Importa.
  3. Fate clic una volta al centro del rettangolo dell’intestazione, nella parte superiore della pagina. Viene inserita una singola istanza del file bg-ribbon.png con le sue dimensioni originali.
  4. Con lo strumento selezione, allineate l’elemento grafico del nastro arancione in modo da centrarlo verticalmente nella parte superiore dell’intestazione e da estenderlo sull’intera larghezza della pagina.
fig_32_building
Nastro arancione centrato nell’intestazione.

 

Il nastro arancione fungerà da sfondo per il menu di livello superiore che verrà aggiunto nella sezione successiva.

Duplicare una pagina mastro

L’intestazione della pagina mastro Principale è completa. Anche se potreste utilizzare la pagina mastro Principale per tutte le pagine del sito, il design di questo sito prevede due sezioni. La pagina mastro Principale verrà utilizzata per le pagine “home” e “visit”. Una seconda pagina mastro leggermente diversa verrà invece usata per le pagine “food”, “events” e “about”.

Per duplicare la pagina mastro Principale, effettuate le seguenti operazioni:

  1. Nella vista Pianificazione, fate clic con il pulsante destro del mouse sulla miniatura della pagina mastro Principale.
  2. Nel menu di scelta rapida che viene visualizzato, scegliete Duplica pagine.
fig_38_building
Utilizzate il menu per duplicare la pagina mastro esistente.

 

A destra della pagina mastro Principale compare una nuova pagina mastro, con il nome predefinito Principale copia. Come la pagina mastro Principale, anche la sua copia si basa sulla pagina A-Mastro.

  1. Fate doppio clic sul campo del nome sotto la pagina mastro appena creata e rinominatela “Primo piano”.

Nella sezione successiva vedrete come disporre gli elementi di una pagina mastro in modo che vengano visualizzati sopra agli elementi di pagina. A questo punto, è opportuno salvare il lavoro.

  1. Scegliete File > Salva sito.

Sulla pagina mastro duplicata potrete impostare parte del contenuto sopra ad altri contenuti della pagina, in modo analogo alla funzione Disponi > Porta in primo piano. Questo comportamento verrà applicato alle pagine “food” ed “events”.

La possibilità di impostare l’ordine di sovrapposizione degli elementi della pagina mastro è una nuova funzione introdotta in Musa 4.0. In precedenza, per ottenere l’effetto di sovrapposizione era necessario inserire gli elementi di piè di pagina o intestazione su ogni pagina, anziché sulla pagina mastro.

Impostare elementi nelle pagine mastro da visualizzare in primo piano

In Muse, nella vista Progettazione è possibile selezionare un elemento di pagina e scegliere Oggetto > Porta in primo piano, Porta avanti, Porta sotto o Porta indietro per visualizzare un elemento sopra o sotto altri elementi della pagina. Potete trovare questi stessi comandi nel sottomenu Disponi del menu di scelta rapida che compare quando fate clic con il pulsante destro del mouse su un elemento o un gruppo.

Con le versioni precedenti di Muse, per impostazione predefinita gli elementi di una pagina mastro si trovano sempre dietro a tutti gli elementi di una pagina. Questo poteva risultare problematico (a seconda del design del sito) perché l’unica soluzione consisteva nel copiare gli elementi della pagina mastro e incollarli su tutte le pagine del sito sulle quale dovevano comparire in primo piano.

Muse offre ora la possibilità di controllare la disposizione degli elementi sulle pagine mastro. Ora potete infatti selezionare alcuni elementi delle pagine mastro e impostarli per essere visualizzati in primo piano. Gli elementi sulle pagine mastro impostati come elementi di primo piano verranno visualizzati sopra a tutti gli elementi delle singole pagine.

Potete trovare questa nuova opzione in Oggetto > Sposta a > Primo piano mastro nonché nel menu di scelta rapida che compare quando fate clic con il pulsante destro del mouse su un elemento nella vista Progettazione mentre modificate una pagina mastro.

In questo progetto di esempio, il design richiede l’ordine di sovrapposizione predefinito (con gli elementi di pagina visualizzati sopra all’intestazione della pagina mastro Principale) per il contenuto delle pagine “home” e “visit”, ma non per quello delle pagine “food”, “events” e “about”.

Per le pagine “food” e “visit”, dovrete aggiornare la pagina mastro Primo piano in modo che l’intestazione sia in primo piano, sopra al contenuto delle pagine mentre queste scorrono. Effettuate le seguenti operazioni:

  1. Nella vista Pianificazione, fate doppio clic sulla miniatura della pagina mastro Primo piano per aprire la pagina e iniziare a modificarla nella vista Progettazione (se non è già aperta).
  2. Con lo strumento selezione trascinate per selezionare tutta l’intestazione, compresi il rettangolo con lo sfondo affiancato, il nastro arancione, il widget per menu e il logo GIF animato al centro.
  3. Con tutta l’intestazione selezionata, fate clic con il pulsante destro del mouse e scegliete Sposta a > Primo piano mastro. Invece del consueto bordo blu degli oggetti selezionati, gli elementi impostati come primo piano sono evidenziati da un bordo rosso quando vengono selezionati.
fig_39_building
Utilizzate il menu di scelta rapida per impostare il contenuto dell’intestazione in primo piano.

L’intestazione verrà visualizzata sopra agli elementi delle singole pagine a cui viene applicata la pagina mastro Primo piano.

  1. Con l’intera intestazione ancora selezionata, fissatela al bordo superiore della pagina, in modo che non scorra insieme alla pagina. La parte 7 tratta in maggior dettaglio come fissare gli elementi. Per il momento, per fissare l’intestazione fate clic sul punto centrale superiore nel pannello di controllo.
fig_40_building
Per fissare l’intestazione selezionata, selezionate la posizione centrale superiore.

  1. Trascinate la pagina mastro Primo piano sulla pagina “food”, per applicarla. Ripetete questo passaggio per applicare la pagina mastro Primo piano anche alle pagine “events” e “about”.

L’etichetta di testo blu presenta ora la dicitura [Primo piano], a indicare che questa pagina mastro è stata applicata alle pagine “food”, “events” e “about”. Se passate il cursore del mouse sull’etichetta blu [Primo piano], un messaggio segnala che la pagina mastro Primo piano è basata sulla pagina A-Mastro.

Quando progetterete un vostro sito, potrete provare la nuova funzione Sposta a > Primo piano per impostare gli elementi delle pagine mastro come elementi di primo piano. Più avanti in questa serie di esercitazioni, completerete la progettazione delle pagine “food” ed “events” e potrete osservare come, grazie a questa funzione, l’intestazione venga visualizzata sopra agli altri contenuti di queste pagine.

Nella sezione successiva, Creazione del primo sito Web con Muse - Parte 4, vedrete come utilizzare l’HTML incorporato per visualizzare il codice copiato da altri siti Web. Verrà inoltre spiegato come aggiungere un widget per composizione Scatola luminosa per completare la pagina “home”.

Utilizzare più pagine mastro e includere l'animazione

Questa sezione offre ulteriori approfondimenti su come utilizzare le pagine mastro e visualizzare contenuti comuni del sito in più pagine mastro per coerenza tra le diverse sezioni diverse del sito. Viene inoltre descritto come spostare degli elementi dalle pagine mastro. Per alcuni design (ad esempio, per i siti con colori diversi per le diverse aree del sito) può infatti essere utile creare più pagine mastro, ciascuna con solo alcuni elementi grafici. Scoprirete inoltre come spostare elementi da una pagina mastro a una singola pagina, per creare effetti di design come ad esempio la sovrapposizione di elementi l’uno sull’altro.

Modificare il contenuto della pagina mastro

Gli oggetti posizionati su una pagina mastro vengono visualizzati sotto il contenuto della singola pagina. Ad esempio, eventuali oggetti inseriti nell’intestazione o nel piè di pagina della pagina Home vengono visualizzati sopra gli elementi di sfondo inseriti nell’intestazione e nel piè di pagina della pagina mastro. In alcune situazioni può quindi essere necessario spostare gli elementi di una pagina mastro e inserirli nelle singole pagine, per visualizzarli nell’ordine di sovrapposizione desiderato.

Per modificare successivamente del contenuto aggiunto alle pagine mastro, è necessario aprire la pagina mastro. Se aprite una pagina associata a una pagina mastro e tentate di modificare l’intestazione, il piè di pagina o altro contenuto della pagina mastro, tali contenuti sembrano essere bloccati. Potete usare due diversi metodi per modificare il contenuto di una pagina mastro:

  1. Fate doppio clic sulla miniatura della pagina mastro nella vista Pianificazione, quindi modificate il contenuto della pagina mastro in vista Progettazione.

  2. Fate doppio clic sulla miniatura della pagina mastro nella vista Pianificazione per aprirla nella vista Progettazione. Selezionate gli elementi da modificare (che devono trovarsi sopra ad altri elementi, e quindi spostati su una singola pagina del sito) e scegliete Modifica > Taglia oppure utilizzate le scelte rapide da tastiera corrispondenti (Comando+X per Mac OS, Ctrl+X per Windows).

  3. Tornate alla vista Pianificazione e fate doppio clic sulla pagina in cui desiderate inserire il contenuto che si trovava sulla pagina mastro. Scegliete Modifica > Incolla nella stessa posizione. In questo modo gli elementi tagliati dalla pagina mastro vengano inseriti nella stessa posizione sulla singola pagina. Se necessario, aprite più pagine e scegliete Modifica > Incolla nella stessa posizione per inserire su più pagine il contenuto tagliato dalla pagina mastro.

Se necessario, potete anche duplicare una pagina mastro esistente. Potete configurare il sito in modo che la maggior parte delle pagine utilizzino una pagina mastro, mentre una pagina speciale utilizza una versione simile duplicata della pagina mastro (con elementi specifici copiati dalla pagina mastro duplicata alla pagina speciale del sito). Per ulteriori informazioni su come duplicare le pagine mastro, consultate le sottosezioni di seguito.

Una volta che l’elemento si trova sulle singole pagine e non sulla pagina mastro, potete modificarlo pagina per pagina e visualizzarlo in primo piano.

In questo progetto di esempio, il sito presenta il logo di Kevin’s Koffee Kart (bicicletta rossa con banner) immediatamente sopra l’area di navigazione del sito nell’intestazione. Il contenuto dell’intestazione e del piè di pagina viene visualizzato automaticamente su ogni pagina perché per impostazione predefinita la pagina Home (e ogni altra pagina creata) è collegata alla pagina A-Mastro che contiene tale contenuto. In molti casi, potete creare siti Web che utilizzano tutti la stessa pagina mastro per garantire coerenza visiva.

Tuttavia, questo sito contiene un logo animato da visualizzare solo sulla pagina Home. Date un’occhiata al sito di esempio Kevin’s Koffee Kart: noterete che nella pagina Home il logo rosso della bicicletta si anima una volta quando viene inizialmente caricata la pagina, come se la bicicletta entrasse nella pagina da sinistra. Fate clic per visitare altre pagine: osservate come l’animazione viene eseguita solo nella pagina Home, mentre nelle altre pagine il logo è statico.

Nella sottosezione seguente verrà illustrato come creare una pagina mastro duplicata e come assegnare specifiche pagine mastro alle pagine del sito nella vista Pianificazione.

Duplicare ed eliminare pagine mastro

  1. Fate clic su Pianificazione per tornare alla vista Pianificazione. Individuate la miniatura A-Mastro nella parte inferiore dell’interfaccia della vista Pianificazione.

  2. Passate il cursore sulla miniatura A-Mastro e osservate come, al passaggio del mouse, compaiono le stesse icone più (+) disponibili per aggiungere nuove pagine alla sitemap. Fate clic sul simbolo più (+) a destra della miniatura A-Mastro. Potete usare questa tecnica ogni volta che desiderate creare da zero una pagina mastro. La miniatura è vuota, senza il contenuto che avete aggiunto alla pagina A-Mastro. Per impostazione predefinita la nuova pagina mastro è denominata B-Mastro, ma potete fare clic sul campo sotto la miniatura e rinominarla.

    In questo caso, invece di creare una nuova pagina mastro vuota, verrà creato un duplicato della pagina A-Mastro.

  3. Fate clic sull’icona X nell’angolo in alto a destra di B-Mastro per eliminarla. Se per errore eliminate una pagina mastro esistente, potete scegliere Modifica > Annulla Elimina pagina mastro per ripristinarla.

  4. Fate clic con il pulsante destro del mouse sulla miniatura A-Mastro e scegliete Duplica pagina dal menu di scelta rapida. Viene visualizzata una nuova miniatura con la pagina mastro duplicata, denominata A- Mastro copia.

    fig_59_getting
    Duplicate la pagina A-Mastro in vista Pianificazione.

  5. Fate clic sul campo sotto la miniatura della copia di A-Mastro e rinominatela “MasterFlash”. Utilizzerete questa pagina per aggiungere contenuti multimediali avanzati con animazione sulla pagina Home, mentre tutte le altre pagine continueranno a essere basate su A-Mastro, con una versione statica del logo nell’intestazione.

  6. Fate clic con il pulsante destro del mouse sulla miniatura della pagina Home. Nel menu che viene visualizzato, scegliete Pagine mastro > MasterFlash. Questa operazione associa la pagina mastro MasterFlash alla pagina Home.

    Nota:

    In alternativa, potete trascinare la miniatura di MasterFlash nella parte superiore della miniatura della pagina HOME per applicarla.

Il nome della pagina mastro MasterFlash viene quindi visualizzato fra parentesi sotto la miniatura della pagina Home nella vista Pianificazione.

Se clic su Anteprima, non noterete alcuna differenza. Per il momento infatti MasterFlash è solo una copia duplicata di A-Mastro, con lo stesso logo statico. Tuttavia, nella sottosezione successiva verrà modificato il contenuto di MasterFlash con l’aggiunta di un’animazione che verrà riprodotta solo sulla pagina Home.

L’utilizzo di pagine mastro duplicate, quasi identiche (con solo piccole differenze) è utile per distinguere una sezione specifica di un sito Web e rendere la pagina Home unica, come descritto per questo progetto.

Questa esercitazione illustra come utilizzare le pagine mastro. Verranno esaminati e decostruiti tre layout di sito e scoprirete come ottenere effetti interessanti e coerenza tra le diverse pagine del sito inserendo gli elementi comuni in una pagina mastro.

Che cosa si intende per pagina mastro? Una pagina mastro consente di applicare gli elementi comuni quali intestazioni, piè di pagina, logo e sistema di navigazione a più pagine del sito. È possibile utilizzare una sola pagina mastro oppure definire più pagine mastro per poter applicare rapidamente e con coerenza stili particolari a specifiche sezioni del sito.

Per impostazione predefinita, quando si crea un nuovo sito, Muse crea una home page vuota e una pagina mastro vuota. Queste sono il punto di partenza per qualsiasi sito Web. Potete progettare la mappa del sito utilizzando pagine vuoto e applicarvi le pagine mastro in un secondo momento, oppure potete creare un sito Web iniziando con la pagina mastro, applicandola a una singola pagina (la home page) e quindi creando nuove pagine basate su tale design.

Decostruzione di layout di siti

Un ottimo modo per apprendere strategie di design di siti Web consiste nell’esaminare diversi layout di pagine mastro. In questo articolo, prenderemo in esame tre diversi layout di siti creati in Muse per scoprire come sono stati creati in origine.

Per seguire questi passaggi aprendo le risorse per ciascuno di questi siti di esempio, scaricate i file di esempio, decomprimere il file ZIP e fate doppio clic sui singoli file .muse per aprirli in Muse.

Mentre osservate ognuno di questi siti di esempio, osservate alcune delle funzioni utilizzate per creare design di siti caratterizzati da un sistema di navigazione intuitivo che guida i visitatori ad accedere ai vari contenuti del sito:

  • Configurare le proprietà del sito per definire le dimensioni di tutte le pagine
  • Utilizzare le guide per definire le aree di intestazione e piè di pagina nella pagina mastro
  • Fissare gli oggetti alla finestra del browser, per posizionarli all’esterno del layout di pagina
  • Impostare il riempimento con immagini di sfondo a scorrimento o in posizioni fisse per creare interessanti effetti
  • Estendere rettangoli per ottenere una larghezza del 100%, pari alla larghezza della finestra del browser
  • Aggiungere widget Pannello a soffietto e Presentazione per contenuti di pagina interattivi
  • Personalizzare e applicare uno stile ai widget Menu per ottenere un sistema di navigazione del sito
  • Creare collegamenti di ancoraggio per passare in verticale o in orizzontale ad aree specifiche della pagina
  • Incollare codice da altri siti (HTML incorporato) per aggiungere funzioni alle pagine

Quando visitate ogni sito di esempio, provate a scorrere e ridimensionare la finestra del browser per vedere come funziona il risultato finale. Quindi, aprite ciascun file .muse in Muse per vedere come sono state utilizzate le pagine mastro per standardizzare i layout del sito e creare un’esperienza online unificata.

Esempio 1: Happy Valley Adventure

fig01.master.b720

Nel primo esempio, la grafica del piè di pagina è fissata al fondo della finestra del browser. Inoltre, lo sfondo del piè di pagina è impostato su una larghezza di 100% in modo che si estende su tutto il lato inferiore orizzontale della pagina. I contenuti più lunghi della pagina scorrono dietro gli elementi di primo piano del piè di pagina per creare un effetto di cielo sfumato. Quando fate clic sui collegamenti di ancoraggio a sinistra, la pagina si sposta in verticale fino alla sezione corrispondente. L’utilizzo di elementi grafici semi-trasparenti e di un particolare ordine di sovrapposizione trasmettono l’esperienza di volare in una mongolfiera.

Esaminate il file .muse di questo sito e osservate i seguenti aspetti:

Nella pagina mastro, una serie di rettangoli con riempimento sfumatura funge da sfondo per i contenuti più lunghi della pagina.

  • La pagina Home contiene un elemento grafico piè di pagina con un’immagine di sfondo divisa in sezioni con larghezza impostata su 100% e fissata al bordo inferiore della finestra del browser. Un secondo elemento grafico per il piè di pagina (la vetta della montagna) è invece centrato e fissato al bordo inferiore del browser. Questo è stato disposto in modo da essere visualizzato sopra il precedente elemento grafico in sezioni del piè di pagina, con Disponi > Porta in primo piano. Gli elementi così impostati si adattano a qualsiasi dimensione di monitor.
  • I collegamenti di navigazione a sinistra consentono di passare ad ancoraggi aggiunti alla pagina lunga con orientamento verticale. Quando un visitatore fa clic su uno dei collegamenti, la pagina scorre per visualizzare il contenuto corrispondente. Il design complessivo è bilanciato e si presenta in modo uniforme man mano che diventano visibili nuove sezioni del sito.
  • La sezione dei contatti della pagina Home contiene HTML incorporato per visualizzare gli elementi del modulo di contatto, per facilitare la comunicazione con i visitatori e programmare nuove avventure.

Esempio 2: Kevin's Koffee Kart

fig02.master.b720
Questo sito a più livelli usa un widget Menu e funzioni con HTML incorporato.

La pagina Home del sito Kevin's Koffee Kart contiene un’animazione Flash nell’intestazione e della grafica fissata. Utilizzando le barre di scorrimento per navigare nella pagina, potrete notare che l’immagine di sfondo è fissa e non scorre, mentre il contenuto della pagina scorre sopra di essa. Viene automaticamente riprodotta una presentazione, con le immagini che scorrono sotto un feed Twitter proveniente da HTML incorporato.

La barra dei menu nell’intestazione è stata creata con un widget Menu orizzontale per creare pulsanti di navigazione persistenti che si aggiornano automaticamente quando vengono aggiungete delle nuove pagine. In questo esempio, il widget Menu è configurato per visualizzare le pagine di primo e secondo livello.

Interagite con il menu e osservate come le varie pagine vengono caricate quando fate clic sui pulsanti. L’intestazione e il piè di pagina sono standard per tutte le pagine, ma l’altezza delle pagine varia in base al contenuto. L’elemento piè di pagina marrone è composto da due rettangoli con larghezza impostata su 100%, ossia pari alla larghezza della finestra del browser, e conferisce uniformità alle varie pagine.

Per creare il sito del Kevin's Koffee Kart sono state utilizzate le seguenti convenzioni di progettazione:

  • Il sito si basa su due pagine mastro simili: una senza l’elemento multimediale Flash Media, applicata alla maggior parte delle pagine del sito; e una con il filmato Flash, applicata solo alla pagina Home. Entrambe le pagine mastro hanno elementi piè di pagina con larghezza impostata su 100% e bordi trasparenti, e utilizzano lo stesso widget Menu. Dopo aver creato la prima pagina mastro, gli elementi vengono copiati e incollati in posizione sulla seconda pagina mastro in modo che siano perfettamente allineati.
  • Le pagine sono organizzate nella vista Pianificazione per creare sezioni di primo e secondo livello, e tale organizzazione è ripresa anche negli elementi a discesa del widget Menu.
  • La mappa immagine di sfondo utilizzata come riempimento della finestra del browser è impostata su dimensione originale anziché suddivisione in sezioni. È centrata e impostata in modo da non scorrere sotto il contenuto della pagina.
  • Il riempimento di sfondo della pagina è bianco con una leggera trasparenza per lasciare che trasparisca l’immagine della mappa di sfondo.
  • La pagina Home contiene due immagini semitrasparenti di nuvole fissate alla finestra del browser. Fate scorrere la pagina in verticale per vedere che gli elementi fissati non si spostano, ma restano in posizione se ridimensionate la finestra del browser.
  • La pagina Home contiene inoltre del codice HTML incorporato per visualizzare contenuti dinamici di feed Twitter.
  • La pagina Koffee presenta un widget Pannello a soffietto con pannelli che si espandono e riducono quando si fa clic per visualizzare altro contenuto in un’area ridotta della pagina.
  • La pagina Origins presenta un widget Presentazione con miniature per visualizzare una galleria di foto interattiva. La pagina Preparation utilizza un sistema di navigazione con tag di ancoraggio per passare alle varie sezioni della pagina e la pagina Kart Map contiene codice HTML incorporato per visualizzare una mappa di latitudine Google Maps dinamica, in base alla posizione corrente del telefono cellulare utilizzato per tale account.

Esempio 3: More than Square

fig03.master.b720
Elementi grafici d’impatto fissi e sovrapposti incorniciano il contenuto della pagina con scorrimento.

Come nell’ultimo esempio, osservate come gli elementi grafici degli edifici sono fissati agli angoli in alto a destra e in basso a sinistra per incorniciare il contenuto della pagina. L’edificio nell’angolo in alto a destra si trova davanti per sovrapporsi al contenuto della pagina, mentre quello in basso a sinistra viene visualizzato sotto la pagina.

Il contenuto della pagina è centrato, semitrasparente e in risalto rispetto agli elementi strutturali con angoli arrotondati. Il contenuto della pagina scorre in verticale e l’altezza varia mano a mano che fate clic per scorrere le pagine. I collegamenti per social network (Twitter, Facebook e YouTube) restano visibili sul lato sinistro della pagina per invitare i visitatori a pubblicare collegamenti della pagina e trasmettono un design asimmetrico uniforme all’interno sito.

La pagina Home contiene una galleria di foto con pulsanti di navigazione Precedente e Successiva, configurata per passare lentamente da una diapositiva all’altra se il visitatore non fa clic sui pulsanti. La pagina How to Get Here contiene una mappa interattiva creata con codice HTML incorporato copiato da Google Maps.

Esaminate il file .muse sorgente di questo sito e osservate i seguenti aspetti:

In questo esempio, quasi tutti gli elementi comuni a tutte le pagine provengono dalla pagina mastro. Questo facilita l’aggiornamento del sito e la modifica del contenuto delle singole pagine.

La pagina mastro contiene un grafico di sfondo senza scorrimento per l’immagine del piè di pagina, fissata al bordo inferiore sinistro della finestra del browser. La pagina mastro contiene anche gli elementi semitrasparente con angoli arrotondati per la navigazione nel sito.

Tutte le pagine del sito hanno un elemento grafico fissato all’angolo in alto a destra disposto in modo da essere visualizzato sopra al contenuto della pagina, per creare un’illusione di prospettiva rafforzata dall’angolazione degli edifici.

Muse è uno strumento di design intuitivo che consente di portare i vostri progetti sul Web. Il posizionamento creativo degli elementi sulle pagine mastro e il contenuto univoco visualizzato su ciascuna pagina consentono di realizzare layout coinvolgenti. Potete dare via libera alla vostra immaginazione e creare siti innovativi per i vostri clienti.

Per ulteriori suggerimenti sull’utilizzo di Muse, visitate la pagina dedicata all’Aiuto e alle esercitazioni di Muse oppure la pagina dedicata agli eventi 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