I modelli di Dreamweaver MX 2004

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...

A questo punto possiamo inserire nella cella del logo l'immagine che rappresenta il nostro sito web. Poi andiamo a creare un menu da inserire nel blocco verde come avevamo deciso in precedenza.

Ora che gli elementi comuni sono stati definiti dobbiamo occuparci delle zone che cambieranno da pagina a pagina, ovvero titolo e contenuto. Andremo a creare delle aree modificabili in corrispondenza di queste regioni.

Posizioniamo il cursore  all'interno della cella che conterrà il titolo della pagina web. Poi accediamo alla barra degli strumenti Comune, apriamo il menu Modelli e scegliamo Area Modificabile.

È comparsa una finestra di dialogo che ci chiede il nome da associare all'area modificabile (ricordiamo che non possono esistere due aree modificabili con lo stesso nome all'interno dello stesso modello).

Digitiamo un nome che ci aiuterà a identificarla: Titolo. Poi scegliamo Ok.

Notiamo che nella cella in cui avevamo lasciato il cursore è comparso un rettangolo celeste: quella è l'area modificabile.

Da ora verrà identificata dalla linguetta celeste in alto a sinistra che contiene il nome.

Procediamo analogamente per creare un'area modificabile Contenuto da collocare come indicato nella figura vista in precedenza.

Terminata la creazione di questa seconda area modificabile consideriamo che le singole pagine create dal modello corrente avranno un contenuto di default nelle aree modificabili. Questo contenuto predefinito corrisponde a ciò che è attualmente mostrato nelle aree modificabili nel modello. In altre parole il contenuto predefinito dell'area modificabile Titolo è il testo "Titolo" e analogamente per l'altra area. Chiariamo che questo contenuto predefinito può essere modificato come preferiamo, ad esempio nell'area modificabile titolo potremmo scrivere qualcosa del tipo "Digita qui il titolo della pagina corrente".

Salviamo la pagina scegliendo File > Salva come modello e digitiamo il nome che vogliamo assegnare al nostro modello (ad esempio modello1).

Nota: per eliminare un area modificabile è sufficiente selezionarla (facendo clic sulla sua linguetta celeste) e scegliere Elabora > Modelli > Rimuovi codice modello.

Creare una pagina basata sul modello

Da questo momento il lavoro è più semplice: abbiamo già la struttura delle nostre pagine, dobbiamo solo riempirle di contenuti!

Per creare una pagina basata sul modello procediamo così:

• Scegliamo File > Nuovo.
• Apriamo la scheda Modelli.
• Nel riquadro di sinistra selezioniamo il nome del nostro sito web.
• Nel riquadro di destra comparirà solo modello1, selezioniamolo.
• Importante: verifichiamo che la voce "Aggiorna le pagine quando il modello cambia" sia spuntata.
• Premiamo Crea.

Abbiamo appena creato una pagina web basata sul nostro modello. Verifichiamo subito che non è consentito modificare le zone della pagina al di fuori delle aree Titolo e Contenuto.

Al contrario possiamo apportare cambiamenti alle aree modificabili (Titolo e Contenuto) nelle quali potremmo inserire, rispettivamente, il titolo e il contenuto informativo della pagina corrente.

Una volta terminata l'operazione possiamo salvare la pagina con nome e passare a creare un'altra pagina basata sul modello.

Possiamo eseguire un ulteriore verifica, dopo aver creato altre pagine basate sul modello, torniamo ad aprire il modello1 (che troviamo nella cartella Templates dove è bene che rimanga senza essere spostato!) e modifichiamone alcune parti. Ad esempio cambiamo l'immagine del logo o aggiungiamo altri elementi.

Dopo averlo salvato Dreamweaver elencherà le pagine che erano basate su quel modello e ci chiederà se vogliamo aggiornarle. Basterà premere il pulsante Aggiorna per apportare automaticamente i cambiamenti a tutte le pagine costruite a partire dal modello.

Applicare un modello a una pagina

Esiste un secondo metodo per collegare una pagina a un modello di Dreamweaver. Mentre in precedenza abbiamo visto come creare una nuova pagina a partire da un modello ora vediamo come applicare un modello a una pagina web già esistente.

• Partiamo dal presupposto di avere un sito web (definito in Dreamweaver) equipaggiato già di un modello.
• Ipotizziamo anche che la pagina web a cui vogliamo applicare il modello si trovi già nel sito web.
• Apriamo il sito web con Dreamweaver e poi apriamo la pagina web.
• Scegliamo Elabora > Modelli > Applica modello alla pagina...

• Compare una finestra di dialogo che ci permette di scegliere il modello da applicare (utile nel caso in cui avessimo definito più di un modello per il nostro sito web).

• Ricordiamo di mantenere spuntata l'opzione Aggiorna la pagina quando il modello cambia!
• Infine premiamo il pulsante Seleziona.

A questo punto Dreamweaver ci pone una domanda molto importante. Il contenuto della pagina corrente in che modo dovrà essere riversato nelle aree modificabili?

Compare una finestra che riassume le zone della pagina corrente in cui si trovano dei contenuti informativi che potremmo voler conservare dopo l'applicazione del modello.

Definire come verranno "riversate" le informazioni è molto semplice, dobbiamo:

• Selezionare un'area modificabile individuata nella pagina corrente (ad esempio Corpo del documento).
• Scegliere poi dal menu in basso l'area modificabile che ospiterà quel contenuto.

Se, ad esempio, volessimo trasferire il Corpo del documento attuale all'interno dell'area modificabile Contenuto del modello dovremmo:

• Selezionare Corpo del documento nella finestra corrente.
• Scegliere dal menu in basso la voce Contenuto.

Infine, dopo aver definito come saranno trasferite tutte le informazioni dalla pagina attuale alla pagina strutturata secondo il modello scegliamo Ok. Se vogliamo perdere il contenuto di alcune aree della pagina attuale (ad esempio se non ci interessa conservare le informazioni inerenti l'intestazione attuale) dobbiamo selezionare la voce e scegliere Nessuna area dal menu in basso.

Come passare da un modello all'altro

Può verificarsi un terzo caso nell'applicazione di un modello. Infatti potremmo voler applicare a una pagina (a cui è già stato applicato un modello) un modello differente.

Chiamiamo modello1 il modello di origine e modello2 il nuovo modello da applicare. Il procedimento è simile a quello visto nel paragrafo precedente.

• Apriamo la pagina web (a cui è applicato il modello1) con Dreamweaver.
• Scegliamo Elabora >Modelli > Applica modello alla pagina.

• Scegliamo il nuovo modello (modello2)
• Premiamo il pulsante Seleziona.

A questo punto se i due modelli possiedono delle aree modificabili aventi il medesimo nome allora Dreamweaver provvederà automaticamente a trasferire il contenuto da un'area all'altra.

In caso di eventuali non omogeneità tra i nomi delle aree comparirà la consueta finestra vista nel paragrafo precedente che ci permetterà di definire le corrette corrispondenze.

Il concetto di area modificabile sta un po' alla base della gestione dei modelli di Dreamweaver. Studieremo altri tipi di aree: quelle ripetute e quelle opzionali.

Dreamweaver fornisce degli strumenti per creare modelli estremamente manipolabili, ovviamente sempre rispettando determinate regole di base. Il webmaster che progetta un modello può avvalersi della funzione Area ripetuta per definire una regione del modello che può essere duplicata secondo necessità dagli utenti che creeranno pagine web basate sul modello.

Un'area ripetuta è una regione il cui contenuto non può essere modificato una volta che si sta lavorando alla pagina web basata sul modello. Per farlo è necessario inserire, all'interno dell'area ripetuta, un'area modificabile.

Vediamo come procedere per inserire un'area ripetuta in un modello.

• Apriamo il nostro modello in Dreamweaver MX.
• Inseriamo il testo "Questo testo si trova nell'area ripetuta" nella pagina (un'area ripetuta può contenere anche immagini, tabelle, etc...)
• Selezioniamo il testo.
• Accediamo al menu Modelli presente nella barra Comune di Dreamweaver e scegliamo Area ripetuta.

• Dobbiamo ora assegnare un nome all'area ripetuta (non possiamo assegnare lo stesso nome a due aree ripetute presenti nello stesso modello e non si possono usare caratteri speciali).

• Infine scegliamo Ok.

Notiamo che nella pagina web l'area ripetuta viene identificata da un rettangolo celeste e da una linguetta del tipo Ripeti: NomeAreaRipetuta.

Bene, il lavoro è finito. Possiamo ora creare una pagina web basata sul modello e verificare che Dreamweaver ci permette di manipolarla utilizzando degli appositi pulsanti.

Ecco un esempio:

I pulsanti + e - permettono all'utente della pagina basata sul modello di aggiungere automaticamente una copia dell'area ripetuta o di eliminarla. Gli altri due pulsanti permettono di selezionare l'area ripetuta precedente o successiva.

Ovviamente l'importanza di questo meccanismo consiste nel fatto che:

• In ogni pagina possiamo creare velocemente il numero di blocchiche desideriamo.
• Tutti questo blocchi verranno automaticamente aggiornati quando verrà modificato il contenuto dell'area ripetuta dal modello.

Aree ripetute modificabili

Vogliamo ora creare un modello che contenga un'area ripetuta che sia modificabile durante la creazione delle pagine basate sul modello. Come accennato in precedenza dobbiamo procedere semplicemente inserendo un'area modificabile all'interno della nostra area ripetuta.

Vediamo nei dettagli come procedere e immaginiamo di partire dai risultati ottenuti nel paragrafo precedente:

• Apriamo nuovamente il nostro modello (contenente l'area ripetuta con del testo all'interno) con Dreamweaver.
• Cancelliamo il testo "Questo testo si trova nell'area ripetuta".
• Posizioniamo il cursore all'interno dell'area ripetuta.
• Accediamo al menu Modelli.
• Selezioniamo Area modificabile.

• Assegniamogli un nome e premiamo Ok.

Ecco il risultato: un'area ripetuta che contiene un'area modificabile.

Salviamo il modello e creiamo una pagina web basata sul modello per verificare che ora sarà possibile modificare i contenuti delle aree ripetute.

Una tabella ripetuta

Dopo la teoria delle due pagine precedenti vediamo un applicazione pratica delle nozioni apprese. Creeremo una tabella ripetuta, ovvero una tabella alla quale potranno essere aggiunte o rimosse righe utilizzando gli strumenti, già esaminati, di gestione delle aree ripetute.

• Creiamo un nuovo modello con Dreamweaver.
• Accediamo al menu Modelli (nella barra Comune) e scegliamo Tabella ripetuta.

Appare una finestra che permette di definire le caratteristiche della tabella ripetuta.

I campi Righe, Colonna, Margine celle, Spaziatura celle, Larghezza e Bordo sono gli stessi che permettono di definire una tabella classica.

I campi Riga iniziale e Riga finale identificano quelle righe che saranno comprese nell'area ripetuta.

Se ad esempio impostiamo la tabella ripetuta nel modo seguente:

Otteniamo il seguente risultato:

Esaminiamolo un momento:

• Le frecce rosse indicano le celle presenti nella prima e nella quarta riga (ovvero quelle che non devono essere comprese nell'area ripetuta).
• Le frecce verdi indicano le celle comprese tra la riga 2 e la riga 3 (come indicato nella finestra Inserisci tabella ripetuta). Queste celle, giustamente, si trovano all'interno della regione ripetuta.
• Dreamweaver ha inserito automaticamente delle aree modificabili all'interno delle celle che verranno ripetute (altrimenti sarebbe state "intoccabili" durante la creazione delle pagine basate sul modello).

Salviamo il modello e creiamo una pagina web basata su di esso per vedere come è possibile manipolare la tabella.

Abbiamo ancora a disposizione i quattro pulsanti necessari per la manipolazione dell'area ripetuta.

Premendo, ad esempio, il pulante + notiamo che viene duplicato l'intero blocco contenuto nella regione ripetuta. Il nuovo blocco viene inserito subito dopo il blocco originale come mostrato in figura.

Una tabella ripetuta con celle di colore alternato

Questo esempio pratico completa l'argomento delle aree ripetute e introduce alcune nozioni relative ai modelli parametrizzati (che tratteremo con più precisione nel prossimo articolo).

Per ora ci basta sapere che è possibile definire delle istruzioni che poi verranno eseguite da Dreamweaver per decidere alcune caratteristiche della pagina basata sul modello.

Ora, ad esempio, vedremo come è possibile definire il colore di sfondo alternato delle celle di una tabella ripetuta.

Così il webmaster che costruirà una pagina basata su un modello contenente una tabella ripetuta con celle alternate non dovrà preoccuparsi del colore e del formato della tabella. Potrà limitarsi a premere i pulsanti + e - per creare o eliminare righe, lasciando che siano le istruzioni definite nel modello a colorarle!

Iniziamo subito.

Apriamo Dreamweaver e creiamo un nuovo modello.

Inseriamo poi una tabella ripetuta (avente 2 righe e 2 colonne), solo la seconda riga deve essere ripetuta quindi digitiamo 2 nelle caselle Riga iniziale e Riga finale come descritto nella figura seguente.

Selezioniamo la seconda riga della tabella.

Accediamo alla vista codice scegliendo Visualizza > Codice.

A questo punto dobbiamo scrivere nel codice un'istruzione del tipo:

Se la riga corrente è pari (cioè l'indice che la identifica è un numero pari) allora visualizza il colore A altrimenti visualizza il colore B.

Tradurre questa frase in un linguaggio di script è molto facile. Infatti ad un area ripetuta viene associata la variabile _index che rappresenta l'indice numerico dell'elemento corrente (il contatore parte da 0).

Quindi se replichiamo 3 volte la riga ripetuta, alla prima riga verrà associato il valore _index = 0, alla seconda _index = 1 e alla terza _index = 2.

L'espressione deve iniziare e finire con il doppio @ come visualizzato di seguito:

@@ espressione @@

Un'espressione del tipo IF THEN ELSE deve essere scritta con gli operatori : ?. Per chi non li conoscesse si usano nel modo seguente:

((espressione) : comando1 ? comando2)

Se l'espressione risulta vera allora viene eseguito il comando posizionato dopo i due punti (comado1) altrimenti viene eseguito il comando dopo il punto interrogativo (comando2).

Ecco l'istruzione completa:

@@((_index&1) ? "#CCCCCC" : "#000000")@@

Inizialmente viene valutato il valore dell'espressione _index&1. Questo valore è vero se _index è un numero pari altrimenti è falso.
Se il valore dell'espressione è vero allora viene restituito il colore #CCCCCC, altrimenti viene restituito il colore #000000.

Quando questa espressione viene calcolata da Dreamweaver essa viene semplicemente sostituita con uno dei due colori. Quindi questo codice andrà inserito in un punto opportuno del nostro listato HTML, più precisamente nel punto in cui si definisce il colore di sfondo della cella.

Ecco il codice che va inserito nel tag tr corrispondente alla nostra riga:

bgcolor=@@((_index&1) ? "#CCCCCC" : "#000000")@@

Salviamo il modello e creiamo una nuova pagina basata su di esso e iniziamo ad aggiungere righe alla tabella ripetuta utilizzando i pulsanti + e -. Vedremo che le celle si colorano automaticamente in modo alternato!

In modo analogo possiamo definire altri tipi di espressioni. Abbiamo a disposizione le seguenti variabili:

• _document: questa variabile contiene le informazioni del modello corrente (contiene un campo per ogni parametro del modello e altri campi relativi a informazioni sul documento contenente il modello).
• _repeat: questa variabile è definita all'interno di un area ripetuta e fornisce informazioni relative all'elemento ripetuto
• _index: l'indice dell'elemento ripetuto (che abbiamo visto nell'esempio precedente) a partire a 0.
• _numRow: il numero totale degli elementi ripetuti.
• _isFisrt: valore booleano che è true (vero) se l'elemento ripetuto è il primo.
• _isLast: analogamente a sopra, questa variabile assume il valore true se l'elemento è l'ultimo.
• _prevRecord: contiene l'oggetto ripetuto precedente a quello corrente.
• _nextRecord: contiene l'oggetto successivo a quello corrente.
• _parent: può essere usato in un area ripetuta nidificata e contiene l'oggetto _repeat dell'area esterna.

Questi oggetti sono accessibili in modo implicito, infatti nell'esempio precedente abbiamo avuto accesso all'indice dell'area ripetuta semplicemente digitando _index invece di _repeat._index.

Inoltre, come specificato nella guida di Dreamweaver, possiamo costruire le espressioni utilizzando questo sottoinsieme di operatori e funzioni JavaScript.

• Numeri, stringhe di caratteri (scritte tra le doppie virgolette) e valori booleani (true e false).
• Riferimenti di variabile.
• Riferimenti di campo (ad esempio per accedere al campo _index dell'area ripetuta esterna a quella corrente possiamo digitare _parent._index).
• I seguenti operatori unari +, -, ~, ! e binari +, -, *, /, %, &, |, ^, &&, ||, <, <=, ==, >=, >, !=, <<, >>.
• Operatore condizionale ? : usato nell'esempio precedente.
• Parentesi tonde ().

Approfondiremo questo discorso imparando a usare le aree opzionali.

Scopriamo insieme le potenzialità dello strumento Area opzionale dei modelli di Dreamweaver. In sintesi, si tratta di una zona del modello che viene visualizzata in funzione del valore di un parametro. Questo meccanismo permette, a chi progetta il modello, di definire delle regole che, se saranno verificate nelle pagine basata sul modello, allora faranno comparire alcuni elementi della pagina.

È importante ricordare che il calcolo di queste condizioni viene eseguito in Dreamweaver al momento della costruzione della pagina basata sul modello: questo linguaggio di scripting non verrà eseguito durante il caricamento della pagina web del browser.

In altre parole è uno strumento che ci aiuta a costruire la pagina e a mantenere la sua struttura omogenea a quella delle altre pagine basate sul modello.

Creare un modello con un'area opzionale

Un'area opzionale è una regione della pagina web che viene visualizzata in funzione del valore di un attributo. Una volta creato il modello (contenente l'area opzionale) chi creerà la pagina web basata sul modello potrà velocemente impostare il valore dell'attributo (a cui è collegata l'area opzionale) e decidere se far comparire o meno una determinata regione della pagina.

Vediamo come procedere.

· Apriamo Dreamweaver e creiamo un nuovo modello.

· Apriamo il menu Modelli e scegliamo Area opzionale.

· Appare il seguente pannello.

· L'unica casella di testo definisce il nome che verrà assegnato all'area opzionale.

· La casella di controllo invece permette di definire se di default l'area opzionale dovrà essere visualizzata o nascosta.

· Lasciamo inalterati tutti i valori e scegliamo Ok.

Nella pagina web è apparsa l'area opzionale. Notiamo che nella linguetta che la identifica c'è l'istruzione: If OptionalRegion1.

Questo significa che l'area verrà visualizzata se il valore dell'attributo OptionaRegion1 sarà impostato su true (vero). Vedremo tra poco come agire sul valore di questo attributo, per ora sostituiamo il testo presente nell'area opzionale con qualcosa di più esplicativo come nella figura seguente.

Infine salviamo il modello con un nome (File > Salva come modello...) e chiudiamolo.

Usare un modello con un'area opzionale

Adesso che abbiamo un modello contenente un area opzionale vediamo come creare pagine web basate su di esso.

· Creiamo una pagina web basata sul modello (File > Nuovo scegliamo la scheda Modelli, selezioniamo il sito web corrente e infine il nome del modello creato poco prima).

Compare la pagina web e l'area opzionale è correntemente visualizzata. Ricordiamo che dovrebbe scomparire se il valore dell'attributo OptionalRegion1 diventasse false (falso). Per accedere all'attributo è sufficiente scegliere Elabora > Proprietà modello.

Il pannello che compare contiene la lista delle aree opzionali (e degli attributi tag modificabili che ancora non conosciamo!) definite nel modello su cui è basata la pagina corrente. Nel nostro caso abbiamo solo l'attributo OptionalRegion1. Per impostare il suo valore su false (e quindi far scomparire l'area opzionale OptionalRegion1 dalla nostra pagina) è sufficiente togliere la spunta dall'opzione Mostra OptionalRegion1.

Dopo averlo fatto notiamo che il valore dell'attributo è diventato false (cioè falso).

Scegliamo Ok per confermare e tornare alla nostra pagina web dove...

... l'area opzionale è scomparsa!

Ricordiamo che un'area opzionale non può essere modificata al di fuori del modello, si può soltanto decidere se renderla visualizzabile o meno. Tuttavia possiamo inserire nel modello di origine un'area opzionale modificabile. In questo modo, successivamente, potremo avere accesso ad essa ed intervenire anche sul suo contenuto. Per il resto il procedimento è identico a quello appena visto.

Collegare più aree opzionali allo stesso parametro

Con il procedimento appena visto, ogni volta che creiamo un'area opzionale Dreamweaver crea un nuovo parametro e lo associa ad essa. In questo modo ci permette di decidere se rendere visibile l'area opzionale semplicemente modificando il valore del parametro.

E se volessimo associare due o più aree opzionali allo stesso parametro in modo da renderle tutte visibili, o invisibili, semplicemente modificando quell'unico valore?

Niente di più facile:

· Apriamo il modello creato nel paragrafo precedente (dove esisteva già l'area opzionale OptionalRegion1 associata al parametro avente il medesimo nome).

· Posizioniamo il cursore in un punto vuoto della pagina e creiamo una nuova area opzionale aprendo il menu Modelli dalla barra Comune e selezionando Area Modificabile.

· Si apre il pannello che conosciamo.

· Invece di premere Ok apriamo la scheda Avanzato.

· L'opzione Usa parametro ci permette di associare questa area ad un parametro già esistente).

· Apriamo il menu sulla destra per avere la lista dei parametri presenti nel modello attuale.

· Scegliamo OptionalRegion1 (cioè il parametro associato all'area opzionale) e scegliamo Ok.

· Salviamo il modello.

Ora verifichiamo che tutto funzioni. Creiamo una nuova pagina basata sul modello, scegliamo Elabora > Proprietà modello, proviamo a togliere la spunta dall'opzione Mostra OptionalRegion1 e verifichiamo che entrambe le aree opzionali siano scomparse.

Un consiglio da Macromedia

Prima di concludere questo terzo articolo vorrei citare un consiglio di Drew McLellan autore di alcuni articoli tecnici su Dreamweaver pubblicati dal sito ufficiale della Macromedia.

Bisogna sapere che le pagine basate sui modelli sono "sporcate" da codice aggiuntivo che Dreamweaver scrive (ma non potrebbe fare altrimenti) per memorizzare varie regole, aree speciali, etc. Queste informazioni servono per la creazione (e successiva modifica) di pagine basate sui modelli e in effetti rimangono in tutte le pagine costruite a partire da un modello. Tuttavia non sono necessarie per la visualizzazione delle pagine all'interno di un browser (in effetti il browser ignora totalmente questi "commenti" aggiuntivi). Per alleggerire le dimensioni del file di una pagina web (e quindi per risparmiare tempo all'utente durante il downlaod della pagina) è consigliabile pubblicare la pagina su internet dopo averla "pulita".

Per farlo abbiamo due alternative. La prima consiste nello staccare la pagina dal modello. In questo modo togliamo i commenti aggiuntivi ma perdiamo anche al possibilità di sfruttare tutte le potenzialità offerte dal modello (e allora questi ultimi tre articoli dedicati ai modelli a che servirebbero?).

La seconda consiste nell'usare la funzione di esportazione del sito senza il codice del modello scegliendo Elabora > Modelli > Esporta senza codice). Questa funzione di Dreamweaver permette di definire una cartella secondaria e di trasferire in quella cartella tutto il sito e tutte le pagine web "alleggerite" dei commenti aggiuntivi dei modelli. Successivamente potremo trasferire online questi file più "leggeri" e al tempo stesso mantenere le versioni originali delle pagine (quelle con i commenti dei modelli) in modo da poterle modificare in seguito utilizzando le potenzialità dei modelli.