Creare Intestazioni e Piè di pagina in Adobe Muse

Definite le aree di intestazione e piè di pagina del sito Web per aggiungere i menu, il logo, il testo di copyright e altro ancora in Adobe Muse.

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 sezione con le domande frequenti sulla fine del servizio per Adobe Muse.

Adobe Muse consente di creare facilmente intestazioni e piè di pagina per una pagina Web. Per conferire omogeneità a un sito Web, è utile impostare con un aspetto simile tutti gli elementi di intestazione e piè di pagina, definendo tali elementi nella pagina mastro di Adobe Muse. Se successivamente si aggiorna la pagina mastro, le modifiche vengono applicate a tutte le pagine del sito Web.

Quando create un sito Web con HTML e CSS, le singole pagine presentano spesso altezze diverse, in base al contenuto specifico di ciascuna di esse. Muse include funzioni che consentono di visualizzare le pagine di un sito con diverse lunghezze, in base al contenuto delle singole pagine. Potete impostare le aree in modo che l’intestazione rimanga sempre nella parte superiore e che il piè di pagina sia sempre immediatamente sotto al contenuto della pagina, indipendentemente dall’altezza della pagina stessa.

Aggiunta di intestazioni e piè di pagina

Prima di iniziare a definire le aree di intestazione e piè di pagina della pagina, accertatevi che le guide di intestazione e piè di pagina siano visualizzate. Se non lo sono, scegliete Visualizza > Mostra intestazione e piè di pagina.

In alternativa, potete usare il menu Visualizza nel pannello Controllo per attivare le guide Intestazione e piè di pagina.

Verificate che le guide di intestazione e piè di pagina siano attive.
Verificate che le guide di intestazione e piè di pagina siano attive.

Se preferite, potete anche fare clic con il pulsante destro del mouse sul lato sinistro dell’area di lavoro, fuori dall’area della finestra del browser. Attivate l’opzione Mostra intestazione e piè di pagina nel menu di scelta rapida.

Utilizzo di guide e righelli

Per poter riposizionare le guide di intestazione e piè di pagina, deve essere attivato il righello. Il righello consente di impostare le guide in una posizione pixel esatta. Per impostazione predefinita, vengono visualizzate le guide normali (con il numero di colonne specificato al momento della creazione del nuovo sito).

Cinque guide orizzontali blu attraversano la pagina in larghezza. A partire dall’alto, queste cinque guide consentono di definire: la parte superiore della pagina, il bordo inferiore dell’intestazione, il bordo superiore dell’area piè di pagina, la parte inferiore della pagina Web e la parte inferiore della finestra del browser. Mentre trascinate le guide per definire tali aree, viene visualizzata una descrizione di ciascuna guida e della relativa posizione corrente. Si consiglia di aumentare l’ingrandimento della pagina per posizionare con maggiore precisione le guide.

Le tre guide centrali definiscono il contenuto che verrà visualizzato nelle aree intestazione e piè di pagina. L’area centrale restante è l’area in cui aggiungerete il contenuto univoco della pagina; quest’area centrale è in grado di espandersi per adattarsi all’altezza degli elementi inseriti in ciascuna pagina.

Potete anche selezionare i rettangoli e gli elementi della pagina. È utile usare i rettangoli di selezione degli elementi selezionati per facilitare l’allineamento delle guide quando impostate le aree di intestazione e piè di pagina.

Nota:

il lato inferiore della finestra del browser determina il bordo inferiore dell’area visibile quando il sito viene visualizzato in un browser. Se impostate un colore o un’immagine di sfondo per il browser stesso e posizionate la guida per il lato inferiore della pagina in modo che si trovi al di sopra della guida del browser, il colore o l’immagine di sfondo verrà visualizzato sotto al contenuto della pagina.

Definizione degli elementi di piè di pagina e intestazione

Per definire gli elementi di intestazione e piè di pagina, effettuate le seguenti operazioni:

  1. Trascinate sia la guida del fondo della pagina che quella del fondo del browser nella stessa posizione nella parte inferiore della pagina, proprio sotto al rettangolo dell’area piè di pagina, come nella figura di seguito.
Definire gli elementi di intestazione e piè di pagina in Adobe Muse
Definire gli elementi di intestazione e piè di pagina in Adobe Muse

  1. Selezionate il rettangolo dell’area piè di pagina contenente l’immagine di sfondo affiancata. Trascinate la guida piè di pagina fino ad allinearla alla parte superiore del rettangolo piè di pagina.
  2. Lasciate la guida della parte superiore della pagina nella parte più in alto (nella posizione Y: 0 px). Trascinate la guida di intestazione verso il basso, fino alla posizione desiderata.

Il contenuto dell’intestazione viene visualizzato nell’area tra la parte superiore della pagina e la guida di intestazione.

Trascinare la guida di intestazione per impostare l’area di intestazione
Trascinare la guida di intestazione per impostare l’area di intestazione

In qualsiasi momento durante il processo di progettazione, potete tornare alla pagina A-Mastro per regolare le guide e adattarle al contenuto di intestazione e piè di pagina.

Fate clic sul collegamento Pianificazione oppure sulla scheda denominata katiesCafe per tornare alla vista Pianificazione.

Tutte le miniature delle pagine del sito ora contengono gli elementi aggiunti alla pagina A-Mastro collegata.

L’intestazione e il piè di pagina specificati in tutte le pagine sono collegati alla pagina A-Mastro.
La progettazione A-Mastro è visualizzata in tutte le miniature delle pagine collegate nella vista Pianificazione.

In qualsiasi momento durante la progettazione del sito, le modifiche apportate alla pagina mastro vengono automaticamente implementate nelle pagine collegate. Le pagine mastro facilitano l’aggiornamento o la manutenzione di un sito, poiché consentono di aggiornare una sola pagina mastro per modificare l’aspetto del sito.

Inserimento di un’immagine come contenuto intestazione

Poiché il logo deve essere visualizzato su tutte le pagine del sito, è utile inserirlo come intestazione della pagina mastro.

  1. Scegliete File > Inserisci. Oppure, se preferite, usate la scelta rapida da tastiera Ctrl+D (Windows) o Comando+D (Mac OS) per inserire un’immagine.

  2. Nella finestra di dialogo Importa, individuate e selezionate il file denominato Logo.png che si trova nella cartella Kevins_Koffee_Kart. Fate clic su Seleziona.

  3. Con lo strumento selezione, trascinate il logo nella parte superiore dell’area di intestazione precedentemente definita.

Inserirete quindi un’altra immagine che fungerà da grafica di sfondo per il widget Barra di menu che verrà inserito nel corso della sezione successiva.

  1. Scegliete File > Inserisci oppure utilizzate la scelta rapida da tastiera Ctrl+D (Windows) o Comando+D (Mac OS).

  2. Individuate la cartella Kevins_Koffee_Kart e selezionate il file denominato top-nav.png.

  3. Fate clic una volta nella parte superiore della pagina, nell’area precedentemente definita come intestazione. Abbiate cura di posizionare l’immagine al di sopra dell’indicatore della intestazione, in modo che venga sempre visualizzata in ogni pagina nella stessa posizione, al di sopra del contenuto principale della pagina.

  4. Con lo strumento selezione trascinate la grafica del nastro appena inserita, in modo che le gomme rosse della bicicletta del logo tocchino appena la parte superiore del nastro marrone. In questo modo si avrà l’impressione che la bicicletta stia avanzando sul nastro marrone.

  5. Scegliete di nuovo File > Inserisci. Individuate il file denominato thedrip.png. Fate clic una volta vicino alla parte in basso a destra della grafica del nastro marrone per inserire l’immagine con le sue dimensioni originali.

  6. Con lo strumento selezione, riposizionate l’immagine delle gocce in modo che sia allineata con il nastro marrone e che dia l’impressione di caffè che gocciola a destra.

    Contenuto dell’intestazione, dopo aver aggiunto il logo e lo sfondo degli elementi di navigazione del sito.
    Contenuto dell’intestazione, dopo aver aggiunto il logo e lo sfondo degli elementi di navigazione del sito.

    Per vedere come devono essere posizionati il logo e gli elementi di navigazione superiore, controllate l’esempio del sito pubblicato.

    Nella sezione successiva viene spiegato come utilizzare i contenitori widget e come aggiungere i widget.

Utilizzo di piè di pagina fissi

L’opzione Piè di pagina fisso consente di fissare un elemento piè di pagina in una pagina Web. Questa funzione è utile soprattutto per gli utenti che dispongono di monitor desktop di grandi dimensioni. Piè di pagina fisso consente di mantenere l’elemento piè di pagina nella posizione desiderata, anche nelle finestre browser molto più grandi della pagina Web progettata.

L’opzione Piè di pagina fisso è disponibile nella finestra di dialogo Nuovo sito (File > Nuovo sito) quando si crea un sito in Muse. È inoltre disponibile nelle finestre di dialogo Proprietà di pagina (Pagina > Proprietà di pagina) e Proprietà sito (File > Proprietà sito)
.

L’opzione Piè di pagina fisso è attiva per impostazione predefinita. In generale, si consiglia di usare la funzione Piè di pagina fisso quando progettate i siti. Tuttavia, se notate che la lunghezza della pagina è molto superiore a quanto desiderato (se il sito presenta contenuti di pagina ridotti e le pagine sono piuttosto brevi), potete disattivare l’opzione deselezionando la casella di controllo nella finestra di dialogo Proprietà di pagina.

Per disattivarla invece per l’intero sito Web, deselezionate questa opzione nella finestra di dialogo Proprietà sito.

Logo Adobe

Accedi al tuo account