Editor  »  Articoli  »  Dreamweaver 

I modelli di Dreamweaver rappresentano un valido strumento per la creazione e il mantenimento di un layout comune tra le pagine di uno stesso sito web. In questo articolo impareremo ad utilizzare la versione più recente di questo strumento: quella presente in Dreamweaver MX 2004.

Il funzionamento è semplice: si definisce un modello per un insieme di pagine web del nostro sito che desideriamo abbiano un aspetto omogeneo. Utilizziamo Dreamweaver per costruire la struttura del modello come se fosse una comune pagina web (possiamo aggiungere link, immagini, tabelle, comportamenti, etc...). Successivamente dobbiamo definire delle aree destinate a racchiudere il contenuto delle singole pagine web basate sul modello.

Queste zone sono fondamentali perché saranno le uniche aree modificabili delle pagine basate sul modello. Tutti gli altri oggetti presenti nel modello e non racchiusi nelle aree modificabili non potranno in alcun modo essere alterati durante la costruzione delle pagine basate sul modello.

Questa regola permette di creare pagine con una struttura omogenea ed evita errori all'interno di un team che costruisce un sito web. Insomma si ha la sicurezza che chi aggiunge contenuto al sito web non vada ad interferire con chi ne cura il design.

Il secondo beneficio prodotto da questo meccanismo è rappresentato dalla facilità, dalla sicurezza e dalla velocità nell'aggiornare le pagine. Per capire meglio immaginiamo la seguente situazione: abbiamo creato un modello per tutte le pagine del nostro sito web, ora esistono 50 pagine basate sul modello e abbiamo utilizzato le apposite aree modificabili per aggiungere contenuto individuale a ciascuna pagina. Successivamente sorge la necessità di modificare il layout di tutte le pagine web. Grazie ai modelli di Dreamweaver sarà sufficiente aprire la pagina modello, apportare le modifiche necessarie, salvare la nuova versione del modello e lasciare che Dreamweaver aggiorni la struttura di tutte le 50 pagine del sito.

Sicuramente un metodo che merita di essere imparato e utilizzato. Perché se è vero che la tecnologia degli script server-side (come ASP, JSP, PHP) ci permette di utilizzare una stessa pagina per visualizzare differenti informazioni (ad esempio tutte le recensioni presenti nel database) spesso dobbiamo comunque costruire differenti pagine dinamiche per visualizzare differenti classi di informazioni (ad esempio una pagina per visualizzare l'elenco di prodotti, una per visualizzare la scheda di un prodotto, una per ricercare una marca, etc...). I modelli invece ci permettono di gestire tutto il layout del sito in modo completamente centralizzato. Per evitare confusione, infine, bisogna precisare che questo sistema può essere sfruttato indipendentemente dall'utilizzo di pagine dinamiche o statiche.

Aree modificabili

Iniziamo a lavorare. Desideriamo creare un modello di pagina per il nostro sito web e vogliamo inserire nel modello alcune aree modificabili che poi utilizzeremo per aggiungere contenuto nelle pagine che creeremo.

• Creiamo un sito web in Dreamweaver (non è necessario definire un tecnologia server-side).
• Scegliamo File > Nuovo.
• Selezioniamo Pagina di base dal riquadro Categoria e Modello HTML dal riquadro Pagina di Base.
• Infine schiacciamo il pulsante Crea.

Siamo tornati nella finestra principale del nostro editor preferito ed è attualmente aperta quella che sembra una normale pagina web (e che invece è un modello).

Bene, possiamo verificare che è possibile aggiungere qualsiasi oggetto presente in una normale pagina web. Tuttavia ricordiamo che vogliamo creare una struttura sulla quale si baseranno tutte le pagine del nostro sito. Immaginiamo di volere il titolo della pagina in alto insieme al logo del nostro sito. Inoltre vogliamo un menu laterale sulla sinistra e il contenuto informativo della pagina in basso a destra come visualizzato nello bozzetto qui di seguito.

Domandiamoci subito: quali saranno le aree comuni a tutte le pagine del nostro sito web? Beh, potrebbero essere quella blu e quella verde, ovvero il logo e il menu. Mentre invece la zona del titolo e quella del contenuto dovranno variare da pagina a pagina.

Costruiamo allora il layout del nostro modello. Una soluzione è quella di creare una tabella con 3 righe e 1 colonna. Successivamente inseriremo una seconda tabella  (1 x 2) nella prima cella, un filetto orizzontale nella seconda cella e infine una tabella (1 x 2) nella terza cella.

Il tocco finale consiste nell'assegnare la giusta proporzione alle celle delle sottotabelle...

Altri articoli

Altre guide

Altre newsletter