Tutto il sito in un'unica pagina grazie al DHTML
Pagina 1 di 2
Introduzione
In questo articolo vedremo come gestire i diversi contenuti di un ipotetico sito web facendo ricorso ad un unica pagina web farcita con un pizzico di DHTML.
Poniamo che il nostro sito si componga (virtualmente) di 5 diverse pagine di contenuto:
- Homepage
- Servizi
- Portfolio
- Preventivi
- Contatti
Qui vedremo come gestire tutti questi contenuti attraverso un unica pagina HTML che, grazie alle magie del DHTML, cambierà il suo contenuto sulla base delle richieste dell'utente.
In sostanza: al click sulla voce di menu richiesta il browser non si collegherà ad una diversa pagina web, ma semplicemente lancerà un'apposita funzione javascript che comporterà il cambio "dinamico" del contenuto della nostra unica pagina web. Il risultato sarà di sicuro impatto ed il nostro sito risulterà più veloce e dinamico di quelli più "tradizionali".
Questa soluzione è decisamente ottima per piccoli siti personali o per realizzare vetrine e presentazioni, meno funzionale per portali o siti di contenuto in cui è consigliabile suddividere i vari contenuti su più pagine (anche al fine di favorire il flusso di traffico attraverso i motori di ricerca).
Struttura del sito
Allo scopo si crea un'unica pagina con un'area dedicata al menu ed una ai contenuti. Tutti i contenuti sono già fisicamente presenti sulla pagina, ma sono nascosti, e diventeranno visibili attraverso Javascript (+ CSS = DHTML).
Si crei dunque il file unico del sito, ad esempio "index.html". Lo si disegni e si preveda un'area per il menu ed una per il contenuto della pagina.
Menu di navigazione
Nell'area della pagina dedicata al menu inseriremo il seguente codice HTML:
<div>
<a href="javascript:Menu(1)">Homepage</a> |
<a href="javascript:Menu(2)">Servizi</a> |
<a href="javascript:Menu(3)">Portfolio</a> |
<a href="javascript:Menu(4)">Preventivi</a> |
<a href="javascript:Menu(5)">Contatti</a>
</div>
Il menu riporta le voci di esempio indicate nell'introduzione dell'articolo. Ognuna di loro non punta ad un file fisico ma richiama una funzione Javascript a cui passiamo come parametro un semplice indice numerico progressivo che, in questo caso, va da 1 a 5.
Naturalmente il menu è stilizzabile ed organizzabile secondo i propri gusti: l'importante è mantenere il riferimento alla funzione Javascript e, nel caso il cui le voci siano diverse nel tipo e nel numero, prestare attenzione e modificare di conseguenza il parametro passato alla funzione Menu() che esamineremo in seguito.
Contenuto del sito
Prima di passare al codice CSS ed al codice Javascript, concludiamo la spiegazione relativa all'implementazione del codice HTML.
Nell'area della pagina dedicata al contenuto andremo ad inserire N div quante sono le voci di menu che ci interessano.
Il codice HTML è il seguente:
<div id="PG_1">
Homepage ...
</div>
<div id="PG_2">
Servizi ...
</div>
<div id="PG_3">
Portfolio ...
</div>
<div id="PG_4">
Preventivi ...
</div>
<div id="PG_5">
Contatti ...
</div>
Ogni div avrà un ID col suffisso PG_ seguito da un indice progressivo che deve combaciare al parametro passato alla funzione Menu() nel relativo link associato al contenuto che si desidera mostrare.
