Dreamweaver MX 2004 implementa la funzione Vista Mappa che permette di generare un'immagine relativa alla struttura del sito web che stiamo costruendo. In questo grafico vengono rappresentate le pagine e i link che le tengono unite. Il tutto in una struttura a livelli in cui la home page si trova al livello più alto.
Questo strumento permette di ottenere una panoramica immediata di come sono organizzati i file del sito web e consente di eseguire alcune operazioni che vedremo tra poco.
Prima di poter utilizzare la funzione mappa è necessario comunicare a Dreamweaver qual è la Home page del nostro sito, in modo che il programma possa generare la struttura a partire da essa.
Per farlo è necessario:
- aprire il nostro sito web con l'editor Macromedia;
- accedere al pannello File scegliendo Finestra > File;
- fare clic destro sul file che vogliamo selezionare come Home;
- scegliere Imposta come home page.
A questo punto scegliamo Vista mappa (sempre dal pannello File) per ottenere la mappa del sito web corrente.
In questo caso è utile il pulsante Espandi/Comprimi che ingrandisce la visuale.
Successivamente schiacciamo ancora il pulsante Espandi/Comprimi per tornare alla visuale precedente.
Dreamweaver visualizza le pagine web ma nasconde i file dipendenti (immagini, file di script, etc...) e le pagine impostate come nascoste.
Come leggere la mappa
Vediamo ora come interpretare la mappa del sito. Come visto in precedenza una freccia da una pagina A verso una pagina B denota un link che dalla pagina A richiama la pagina B.
Ad esempio la pagina index.htm contiene dei link a chi_siamo.htm, prodotti.htm e contatti.htm.
Dal secondo livello in poi i link vengono visualizzati come un elenco di nomi di pagine. Ad esempio la pagina prodotti.htm contiene dei link a index.htm, prodotto1, prodotto2, etc...
Un testo di colore azzurro preceduto dall'icona di un mappamondo indica un riferimento a una risorsa esterna al sito web come ad esempio un sito web distinto, una risorsa di un sito web o un collegamento e-mail. Dalla figura seguente si vede che la pagina contatti.htm contiene un collegamento e-mail e un collegamento ad HTML.it.
Un testo di colore rosso rappresenta un link interrotto, infatti la pagina prodotti.htm contiene un collegamento alla pagina prodotto5.htm che però non esiste.
Un segno di spunta rappresenta un file ritirato dall'utente (se di colore verde) o ritirato da un altro utente (se di colore rosso).
Infine il lucchetto indica che il file è di sola lettura.
Personalizzare la mappa
Esiste un pannello che permette di adattare la rappresentazione della mappa secondo le proprie esigenze.
Ecco come fare per accedervi:
- scegliamo Sito > Gestisci siti;
- selezioniamo il nostro sito corrente e scegliamo Modifica;
- scegliamo la scheda Avanzate;
- selezioniamo la voce Layout mappa del sito dalla colonna di sinistra.
La prima casella definisce la Home page del sito (se abbiamo seguito le istruzioni precedenti dovrebbe già essere stata impostata).
Numero di colonne definisce il numero massimo di pagine che devono essere rappresentate su ogni riga della mappa mentre Larghezza colonna ne definisce la larghezza espressa in pixel.
Etichetta icone permette di definire il nome che compare sotto l'icona di una pagina: possiamo scegliere se visualizzare il nome del file o il titolo della pagina.
Le ultime due opzioni permettono di scegliere se vogliamo visualizzare anche i file contrassegnati come nascosti e i file dipendenti (come ad esempio immagini presenti nella pagina).
Nascondere dei file
In precedenza abbiamo visto come rendere visibili o meno i file contrassegnati come nascosti. Ma a cosa può servire definire nascosto un file? Questa funzionalità è utile nel caso in cui volessimo focalizzare l'attenzione su alcune sezioni del sito web di particolare interesse e ottenere una mappa "ripulita" di alcuni elementi che al momento non siamo interessati a rappresentare.
Possiamo impostare ogni singolo file come nascosto, per farlo dobbiamo:
- accedere al pannello File (Finestra > File) o alla mappa del sito;
- fare clic destro sul file che vogliamo rendere nascosto;
- scegliere Mostra/nascondi collegamento.
Se non abbiamo modificato le impostazioni del pannello Layout mappa del sito l'icona del file scomparirà insieme a tutte le icone da essa discendenti.
Per rendere nuovamente visibile l'icona associata al file che abbiamo reso nascosto dobbiamo:
- accedere al pannello Layout mappa del sito;
- spuntare l'opzione Mostra file contrassegnati come nascosti;
- tornare alla mappa;
- fare clic destro sull'icona del file nascosto (ora viene visualizzata ma il nome è in corsivo)
- scegliere ancora Mostra/nascondi collegamento.
Eventualmente potremmo tornare alla scheda Layout mappa del sito e togliere la spunta a Mostra file contrassegnati come nascosti.
Visualizzare solo un ramo
Torniamo al nostro esempio.
Potremmo avere la necessità di focalizzare l'attenzione della mappa su una porzione della struttura del sito come ad esempio la pagina prodotti.htm e le sue pagine figlie. Per restringere la mappa a quest'area facciamo clic destro sulla pagina prodotti.htm e scegliamo Visualizza come principale.
Ecco come cambia la visuale del sito web:
Il fatto che stiamo osservando solo una porzione della struttura del sito è indicato nella parte superiore della finestra:
Per tornare alla visuale normale basta fare clic sul testo index.htm indicato nella figura precedente.
È possibile esportare la mappa come un file immagine bmp o png. Per farlo è sufficiente passare alla visualizzazione espansa e scegliere File > Salva mappa del sito assicurandosi che attualmente non vi siano icone selezionate.
Lavorare con la mappa
Vediamo, finalmente, quali operazioni possiamo eseguire direttamente dalla mappa del nostro sito web.
Innanzitutto è sufficiente fare doppio clic sull'icona di una pagina web presente nella mappa per aprire la pagina e poterla modificare.
Se nel pannello Layout mappa del sito abbiamo deciso di visualizzare i titoli delle pagina allora possiamo usare la mappa per modificare il titolo di una pagina. Per farlo basta fare clic sul titolo, aspettare che diventi modificabile e quindi agire su di esso.
L'operazione analoga può essere eseguita col nome del file che è identificato dall'icona della mappa (a patto di aver scelto di visualizzare i nomi del file dal pannello Layout mappa del sito). In questo caso, dopo che avremo modificato il nome del file, Dreamweaver provvederà ad aggiornare tutti i link presenti nelle pagine del sito corrente.
In qualsiasi momento possiamo cambiare la pagina che rappresenta la Home page del sito, per farlo facciamo clic destro su una pagina qualsiasi nel pannello File impostato su Vista locale e scegliamo Imposta come home page.
Altre operazioni effettuabili direttamente dalla mappa sono accessibili facendo clic destro sull'icona di un file presente nella mappa.
La prima voce l'abbiamo già esaminata.
La seconda, Collega a nuovo file, permette di creare un nuovo file e impostare direttamente un collegamento ad esso.
Se ad esempio facciamo clic destro sulla pagina prodotti.htm e scegliamo Collega a nuovo file... compare la seguente finestra.
Dobbiamo compilarla inserendo, rispettivamente, il nome del nuovo file, il titolo e il testo che rappresenterà il link dalla pagina prodotti.htm al nuovo file.
Compilando i campi come in figura e scegliendo Ok verrà creata una nuova pagina offerte.htm, con titolo Offerte. Inoltre aprendo la pagina prodotti.htm troveremo, in fondo, il link Visualizza i prodotti in offerta che porterà alla pagina offerte.htm.
La funzione Collega a file esistente invece permette di generare un link a un file presente nel nostro hard disk.
La voce Cambia collegamento modifica il collegamento che punta alla pagina selezionata. Se ad esempio facciamo clic destro sull'icona della pagina prodotti.htm, scegliamo Cambia collegamento e quindi selezioniamo la pagina contatti.htm allora contatti.htm sostituirà prodotti.htm nella mappa. Questo ovviamente influirà nella struttura della pagina che puntava a prodotti.htm, cioè index.htm, con un relativo aggiornamento del link.
La voce Elimina collegamento cancella il link che porta alla pagina corrente. Se ad esempio selezioniamo prodotti.htm, facciamo clic destro e scegliamo Elimina collegamento allora viene rimosso il link che da index.htm punta a prodotti.htm.
Infine la voce Apri all'origine del collegamento visualizza il link che porta alla pagina correntemente
selezionata. Se facciamo clic destro su prodotti.htm e scegliamo Apri all'origine del collegamento
viene aperta la pagina index.htm e viene selezionato il link che punta a prodotti.htm.
Conclusione
La funzionalità mappa non può essere utilizzata su file remoti ma esclusivamente sulla copia locale del sito web.
Questo strumento permette di gestire facilmente la struttura di siti web complessi senza dover aprire le singole pagine e modificare manualmente i link. Sicuramente creerà qualche sconcerto agli utenti abituati a lavorare in modo più classico ma resta una componente che completa Dreamweaver MX 2004 e rende possibile la gestione ad alto livello di strutture particolarmente complesse.
