Creare menu | Static Web Creator

Creare il menù

Scegliere il layout di una pagina significa scegliere il tipo di menù da utilizzare. Ogni menù per funzionare ha bisogno di essere associato a degli stili di css specifici. Per far sì che tutto funzioni correttamente è indispensabile seguire delle regole fondamentali.
I menù in Static Web Creator possono avere 3 livelli di profondità. Ciò significa che dentro ad un livello 1 ci può essere un sottomenù di livello 2 che contiene a sua volta un sottomenù di livello 3.

I tre livelli nel Side Menù

I tre livelli nel Top Menù

Quando si utilizza un tema vuoto il menù da cui si partirà sarà sempre formato da il link visibile alla Home page e il link nascosto alla pagina 404. La pagina 404 viene visualizzata solo quando sul nostro sito si sbaglia a digitare un indirizzo o si cerca una pagina che non esiste. Il meccanismo di comparsa della pagina 404 funziona solo quando il sito è online.
Per visualizzare il menù cliccare sul tasto

.

Di seguito è mostrato come si vede il menù di base dei temi vuoti rispettivamente nella finestra dell'editor, nella finestra del menù e nel browser.

@BeginMenu index.html|Hidden
@Menu index.html>Home page|Hidden
@Menu 404.html>Pagina non trovata|Hidden
@EndMenu|Hidden

@BeginMenu index.html>Home page @EndMenu

Esempio di menù base in Static Web Creator

Esempio di menù base fatto con Static Web Creator visualizzato in un browser

La sintassi utilizzata nella finestra dell'editor (prima immagine) si può dividere in due parti. Quella di colore verde racchiude tutte le pagine che esistono ma non hanno un link visibile nel menù e quella di colore blu in cui si creano le pagine e le voci di menù corrispondenti che avranno un link visibile nel menù.

Per il corretto funzionamento del sito la sezione hidden deve essere sempre presente e contenere il menù index.html.

Nell'esempio sopra riportato la pagina index.html con etichetta Home Page ha una voce di menù e la pagina 404 pur essendo creata non ha voce di menù. Nel caso in cui si volesse il link a index.html solo nel logo bisognerebbe eliminare la parte blu del menù.

Aggiungere un Livello 1 al menù

Quando si aggiunge un Livello 1 bisogna valutare se avrà una pagina o sarà solo una voce di menù con sotto di sè un Livello 2.
Come visto nel paragrafo precedente per aggiungere un livello 1 bisogna utilizzare la seguente sintassi fuori dal blocco hidden:

@BeginMenu NomeFile.html>Voce Menù
@EndMenu

@BeginMenu index.html|Hidden
@Menu index.html>Home page|Hidden
@Menu 404.html>Pagina non trovata|Hidden
@EndMenu|Hidden

@BeginMenu index.html>Home page
@EndMenu

@BeginMenu NomeFile.html>Voce Menù
@EndMenu

Esempio di aggiunta di un Livello 1 in Static Web Creator

Esempio di menù con aggiunta di un Livello 1 fatto con Static Web Creator visualizzato in un browser

Nel caso in cui il Livello 1 sia solo una "etichetta" del menù di primo livello bisogna inserire il carattere # al posto del nome del file html della pagina. Nel caso dell'esempio abbiamo sostituito NomeFile.html con #.

Esempio di aggiunta di un Livello 1 come etichetta in Static Web Creator

Dopo aver creato l'alberatura si devono creare le pagine relative. Per fare questo si deve:

Ricaricare il menù nella finestra del menù
Eseguire un doppio click sul link della pagina creata.

La setessa procedura dovrà essere eseguita anche per le pagine di menù di livello 2 e 3.

Aggiungere un Livello 2 al menù

Il Livello 2 è un livello che esiste solo sotto al Livello 1. Come il Livello 1 può avere una pagina su cui atterrare o essere una etichetta.
Di seguito vediamo come creare un menù di Livello 2 con pagina al di sotto di una etichetta di Livello 1.

@BeginMenu index.html|Hidden
@Menu index.html>Home page|Hidden
@Menu 404.html>Pagina non trovata|Hidden
@EndMenu|Hidden

@BeginMenu index.html>Home page
@EndMenu

@BeginMenu #>Voce Menù
@Menu NomeLivello2.html>Voce Livello 2
@EndMenu

Esempio di aggiunta di un Livello 2 con pagina di atterraggio

Esempio di menù con aggiunta di un Livello 2 visualizzato in un browser

Anche le voci di menù di Livello 2 quando sono etichette hanno il carattere # al posto del nome del file con estensione html, come si può vedere nell'esempio sottostante.

Il risultato visivo nel Browser non cambia.

Esempio di aggiunta di un Livello 2 come etichetta

Esempio di menù con aggiunta di un Livello 2

Aggiungere un Livello 3 al menù

I menù di terzo livello sono compresi tra i comandi @BeginSubmenu e @EndSubmenu e vengono inseriti sotto la voce di menù di secondo livello alla quale si riferiscono.

Nel caso ci fossero più voci di menù per lo stesso Livello 2, dovranno essere inserite nello stesso BeginSubmenu.

La riga di comando che serve a creare il Livello 3 usa la seguente sintassi: @Menu NomeLivello3.html>Voce Livello 3.

@BeginMenu index.html|Hidden
@Menu index.html>Home page|Hidden
@Menu 404.html>Pagina non trovata|Hidden
@EndMenu|Hidden

@BeginMenu index.html>Home page
@EndMenu

@BeginMenu #>Voce Menù
@Menu #>Voce Livello 2
@BeginSubmenu
@Menu NomeLivello3.html>Voce Livello 3
@EndSubmenu
@EndMenu

Esempio di menù con aggiunta di un Livello 3 visualizzato in un browser

Aggiungere un TAG menù

I TAG menù sono delle voci di menù che non hanno una pagina propria, ma fanno riferimento ad una pagina specifica, e possono essere impiegati per i Livello 1, Livello 2 e Livello 3.

Per funzionare i TAG menù devono avere un corrispettivo seed InternalLink. Ogni voce di InternalLink deve essere univoca altrimenti il menù non funziona correttamente. I seed InternalLink sono messi all'interno della pagina genitore nel punto esatto in cui vogliamo far atterrare chi sta navigando sul nostro sito web.

L'uso dei TAG menù è impiegato principalmente nei Livello 1 per creare i siti a pagina singola con un menù di navigazione, conosciuti come landing page, o con i Livello 2 e i Livello 3 per creare un indice come è quello di questa pagina.

Nell'esempio sotto riportato posiamo vedere come devono essere creati i TAG menù di Livello 1 nel file di creazione del menù e all'interno della pagina genitore tramite gli InternalLink.

@BeginMenu index.html|Hidden
@Menu index.html>Home page|Hidden
@Menu 404.html>Pagina non trovata|Hidden
@EndMenu|Hidden

@BeginMenu index.html#riferimento1>Nome riferimento 1
@EndMenu

@BeginMenu index.html#riferimento2>Nome riferimento 2
@EndMenu

@BeginMenu index.html#riferimento3>Nome riferimento 3
@EndMenu

@BeginMenu index.html#riferimento4>Nome riferimento 4
@EndMenu

$InternalLink riferimento1
$TitleThin3 Nome riferimento1

$InternalLink riferimento2
$TitleThin3 Nome riferimento2

$InternalLink riferimento3
$TitleThin3 Nome riferimento3

$InternalLink riferimento4
$TitleThin3 Nome riferimento4

Di seguito possiamo vedere la visualizzazione di TAG menù di Livello 1 nella finestra dei menù di Static Web Creator e come sarà la navigazione sul web.