Dreamweaver MX 2004 - lenst

Dreamweaver MX 2004
Dreamweaver nasce, come editor visuale, nel 1997 ed il suo bellissimo nome (tessitore dei sogni)
risulta veramente azzeccato. Nel corso degli anni si arriva alla versione 4, che consente anche un
eccellente controllo del codice e che riscuote un crescente successo anche fra gli utenti avanzati, tra
i più riluttanti ad adottare editor visuali. Oggi, infatti, Dreamweaver è utilizzato in tutto il mondo da
circa l'80% dell'utenza professionale, perchè offre molteplici vantaggi, non ultimo, quello di
generare il codice più corretto e "pulito" tra gli editor della sua categoria.
L'attuale versione di Dreamweaver non ha un numero di release, ma si chiama Dreamweaver MX,
tuttavia nella finestra splash iniziale vediamo come numero di versione il 6, dunque Macromedia, la
società che lo produce, ha saltato a piè pari la versione 5. Questo sta a significare l'importanza delle
novità di questa release, considerata dagli utenti delle prima ora, l'aggiornamento più importante
mai realizzato.
Nel corso di queste lezioni andremo ad esaminare le principali funzionalità di questo software, ma
anche le enormi novità apportate dall'ultima versione.
In primissima battuta si può notare come Dreamweaver abbia integrato dentro di sè la stragrande
maggioranza delle funzionalità di HomeSite il miglior editor testuale, originariamente sviluppato
dal geniale Nick Bradbury e di proprietà dell'Allaire. Nel 2001 Macromedia ed Allaire si sono fuse,
con enormi benefici per gli utenti di entrambi i software.
Infine con Dreamweaver MX si sono unificate le due versioni precedenti: Dreamweaver 4 e
Dreamweaver UltraDev 4. Quest'ultimo, oltre ad integrare tutte le funzionalità di Dreamweaver,
consentiva di editare visualmente pagine con tecnologie lato server, specificamente, ASP, CFML e
JSP. Dreamweaver MX ha ampliato il numero di linguaggi supportati , sia dal lato client,
affiancando XHTML al HTML, sia dal lato server, aggiungendo ai già presenti Server Models
ASP, CFML e JSP, il nuovo Microsoft ASP.NET e l'open source PHP.
Come procurarsi Dreaweaver
Per seguire le successive lezioni di questa guida dovete essere in possesso di Dreamveawer MX, se
ancora non lo avete, è possibile scaricare una versione dimostrativa, pienamente funzionante per 30
giorni, dal sito da questa pagina del sito Macromedia. La versione dimostrativa è in inglese, per cui
le videate ed i comandi descritti nelle lezioni seguenti saranno relativi alla versione inglese.
Giunti alla pagina del sito, scegliete la versione per la vostra piattaforma - Windows o Macintosh -
loggatevi, se avete già un ID Macromedia, o riempite un form con le vostre informazioni,
necessario per attivare il download e scaricate il programma (48,8 MB).
Avvertenza generale: Dreamweaver è un programma molto flessibile, che vi consente di avere
installate sul vostro computer, sia diverse copie della stessa versione, sia diverse versioni
contemporaneamente. Ovviamente per installare più copie della stessa versione è necessario che,
nella seconda o successive installazioni, cambiate il nome alla cartella di destinazione (esempio:
invece di Dreamveaver MX nominatela Dreamweaver). Tuttavia è consigliabile disinstallare la
versione dell'Extension Manager che viene installata insieme a Dreamweaver e installare la nuova
versione uscita dopo Dreamweaver MX.
Avvertenza per gli utenti di versioni precedenti: Non disinstallate subito la versione precedente

di Dreamweaver o di Dreamveawer UltraDev presente sul vostro computer, in quanto
Dreamweaver MX importa automaticamente le configurazioni dei siti che avete già definito in altre
precedenti installazioni. Chi si avvicina per la prima volta a questo software troverà le necessarie
informazioni su come definire un sito sul proprio computer a partire dal capitolo 8.
Installare Dreaweaver
Lanciate l'installer e seguite le istruzioni delle finestre di dialogo.
Come si diceva Dreamweaver MX vi permette di editare parecchi linguaggi,
per cui durante la
fase di installazione vi verrà richiesto per quali linguaggi volete che Dreamweaver MX sia l'editor
predefinito. Dunque, se per qualche linguaggio preferite che l'editor predefinito sia un altro, togliete
da quel linguaggio il segno di spunta (ad esempio io come editor predefinito per i CSS - i fogli di
stile - preferisco l'eccellente TopStyle, purtroppo disponibile solo per piattaforma Windows).
Teminata l'installazione si aprirà (nei PC) la finestra della cartella col gruppo di programmi
Macromedia, al cui interno troverete l'icona della scorciatoia per lanciare Dreamweaver MX.
Doppio click sull'icona e il programma verrà aperto.
Configurare il Workspace
La prima volta che lanciate Dreamweaver MX si aprirà una finestra di dialogo in cui vi verrà
richiesto di configurare il vostro Workspace (spazio di lavoro). tra le novità di MX c'è la possibilità
di scegliere tra tre tipi di configurazioni diverse:

• Dreamweaver MX Workspace,
la nuova interfaccia con i pannelli integrati, posizionati
sulla sinistra. Consigliata a chi è un assiduo utilizzatore di programmi come Flash,
Fireworks o PhotoShop, che, appunto posizionano i pannelli sulla sinistra dell'area di lavoro;
• Dreamweaver 4 Workspace,
che ricorda l'intefaccia delle versioni precedenti, con i panelli
sganciati che possono essere posizionati a piacimento nei vari punti del vostro monitor.
Consigliata a chi lavora con due monitor contemporaneamente;
• Dreamweaver MX Workspace HomeSite/Coder - Style, la nuova interfaccia con i
pannelli integrati, posizionati sulla destra e che di default si aprirà in Code View (Vista
Codice). Consigliata per gli utenti di HomeSite, ColdFusion Studio e Jrun Studio.
Spuntate la casella della vostra impostazione preferita (di default Dreamweaver MX ha selezionata
la configurazione Dreamweaver MX Workspace) premete OK e finalmente si aprirà il nuovo
Dreamweaver MX.
Negli esempi di questo corso le schermate saranno prese dalla configurazione Dreamweaver MX
Workspace HomeSite/Coder -Style,
anche perchè ciò non pregiudica in alcuno modo
l'apprendimento degli utenti che optassero per una diversa configurazione dello spazio di lavoro.

Con le sue numerosissime funzionalità , Dreamweaver offre la possibilità di creare in maniera
semplice e veloce pagine web di elevato livello professionale. L'interfaccia, ricca di opzioni, può a
prima vista intimidire, ma - una volta rotto il ghiaccio - credo proprio che non potrete fare più a
meno di questo splendido programma. Ecco perchè inizieremo proprio dall'esplorazione
dell'interfaccia. Per esaminare più in dettaglio, successivamente, le varie funzionalità , ed infine
creare un piccolo sito.
Esploriamo l'interfaccia I
La prima volta che lanciate Dreamweaver MX, se sul vostro computer non sono presenti altre
installazioni di versioni precedenti nelle quali avevate definito dei siti, comparirà una finestra di
dialogo che vi avverte che non vi sono siti definiti. Potete ignorarla cliccando su Cancel.

Se si sceglie di premere Cancel, le successive volte che verrà lanciato Dreamweaver ci verrà
riproposta questa finestra di dialogo, tuttavia sarà anche possibile definire il primo sito dal pannello
Site del gruppo Code.
Dunque, sebbene tratteremo più oltre la definizione di un sito (a partire dal capitolo 8), vediamo
subito cosa succede cliccando su Edit Sites... :
• Comparirà un'altra finestra di dialogo, che consente varie opzioni sui siti;
• Clicchiamo Edit... per lanciare la finestra Site Definition in cui sono selezionate le opzioni
Advanced e Local Info;
• Scriviamo il nome del sito nel campo Site Name;
• Clicchiamo sull'icona della cartella accanto al campo Local Root Folder per navigare
all'interno del nostro disco e selezioniamo una cartella per il nostro sito, così in questo
campo apparirà il percorso del sito locale;
• Infine clicchiamo sull'icona della cartella del campo Default Images Folder per navigare
all'interno del nostro disco e selezioniamo una cartella per le immagini da inserire nel nostro
sito, in questo campo apparirà il percorso della cartella dove si trovano le immagini del
nostro sito locale.

Così avremo definito un sito, e finalmente si apre lo spazio di lavoro di Dreamweaver MX, in cui
appare anche un pannello mobile da cui accedere ad un tour delle nuove funzionalità, nonché ai
tutorials in inglese.
Gli utenti delle versioni precedenti, qualora abbiano in tali versioni - non ancora disinstallate - dei
siti locali, non dovranno passare attraverso la procedura di definizone del primo sito locale.

Analizziamo l'area di lavoro che si presenta al primo avvio di Dreameaver MX, ricordo che per le
schermate di questo corso si è scelta l'area di lavoro Dreamweaver MX Workspace HomeSite/Coder
-Style.
In alto troviamo la barra del titolo dove, accanto alla scritta Macromedia Dreamweaver MX,
troviamo - in parentesi quadra - il titolo della pagina, seguito - in parentesi tonda - dal nome del file.
Dreamweaver, per impostazione predefinita, assegna alla pagina il titolo Untitled Document fino a
quando non ne scegliamo uno diverso e come nome del file - finché non lo salviamo con un nome a
nostra scelta, Untitled - ed un numero progressivo in funzione dei nuovi documenti aperti in quella
sessione di lavoro. La prima volta che apportiamo dei cambiamenti in una pagina, Dreamweaver
aggiunge un asterisco accanto al nome del file.
Immediatamente sotto troviamo le voci di menu di Dreamweaver:
• File,
che contiene i comandi per la gestione dei files;
• Edit,
che contiene i principali comandi per la modifica della o delle pagine;
• View comprende le opzioni per la visualizzazione dell'area di lavoro;
• Insert comprende gli stessi oggetti che sono anche accessibili dal pannello Insert, si tratta in
genere di tag HTML;
• Modify consente di modificare le proprietà della pagina o degli elementi sui quali stiamo
lavorando, tuttavia, pur essendo raggruppate in questa voce di menu alcune delle
funzionalità principali, personalmente trovo più comodo accedere a tali funzionalità tramite i

pannelli di Dreamweaver, oppure da scorciatoie come quelle di tastiera o utilizzando il
comodissimo menù contestuale da tasto destro del mouse;
• Text da questo menu accediamo al controllo degli elementi testuali della pagina;
• Commands,
i comandi che troviamo in questa voce di menù servono, in genere, per
automatizzare operazioni ripetitive. In realtà ne troviamo ben pochi, ma importanti, perché
in questa voce i menu possono essere "registrate" e salvate come voci di menu le operazioni
che il singolo utente riterrà più utili, un po' come le Macro dei programmi della suite
Microsoft Office. Inoltre da questo menu potremo accedere ad una buona parte delle
estensioni per Dreamweaver;
• Site questa voce di menu ci permette di accedere ai principali controlli sul sito che stiamo
sviluppando, oltreché accedere alla sua rappresentazione visiva;
• Window da qui apriamo i vari pannelli di Dreamweaver, questi ultimi ci permettono
ulteriori rapidi e completi controlli e modifiche sugli elementi della pagina;
• Help, per accedere ai vari file di help ed all'Extension Manager (vedi capitolo 10), un
programma separato, ma che viene installato contestualmente a Dreamweaver.
Una delle principali novità che troviamo in alto a destra in Dreamweaver MX è il doppio gruppo di
pulsanti Riduci ad icona, Ripristina in basso/Ingrandisci e Chiudi.
Infatti adesso, come in altri
programmi, ad esempio Word o FrontPage, è possibile tenere aperte più pagine all'interno della
medesima compatta area di lavoro.
Più in basso, al di sotto del gruppo di pannelli Insert - fino alla precedente versione denominato
Objects - troviamo la Barra degli Strumenti con una serie di pulsanti, da sinistra:
•
•
•
•
•
•
•
•
Show Code View che ci permette di visualizzare la pagina come codice (HTML e/o gli
eventuali altri linguaggi utilizzati);
Show Code and Design Views che divide l'area della pagina in due aree, ridimensionabili
per mezzo del tracinamento del bordo comune, l'una in vista codice e l'altra in modalità
visuale, simile a come apparirà sui browsers;
Show Design View,
la modalità visuale;
Live Data View consente di visualizzare una pagina contenente linguaggi server side in
modo simile a come apparirà sui browsers, per utilizzare questo comando è necessario avere
scelto un Server Model ed avere attivato la connessione al database, vedi corso di
Dreamweaver UltraDev;
Title:
è il campo di testo che permette di modificare il titolo del documento;
File Management,
permette vari controlli, tra cui la pubblicazione del sito con il
programma FTP integrato in Dreamweaver;
Preview/Debug in Browser consente sia l'anteprima che il debug nel browser di
destinazione;
Refresh Design View aggiorna la modalità visuale dopo aver modificato il codice;

• Reference apre il pannello dei riferimenti ai vari linguaggi di cui Dreamweaver offre la
reference;
• Code Navigation ci permette di navigare rapidamente all'interno del codice, di individuare
rapidamente le funzioni JavaScript inserite nella pagina ed attivare il relativo debug;
• View Options consente di personalizzare le varie opzioni di visualizzazione della pagina.
In basso troviamo la Barra di Stato con sulla sinistra l'utilissimo Tag Selector. Questo serve mentre
costruiamo la pagina in Design View, infatti ci fa visualizzare il tag HTML su cui stiamo lavorando
e tutti quelli precedenti in cui è racchiuso a partire da . In questo modo possiamo facilmente
selezionare un tag altrimenti difficile da selezionare ed intervenire a modificarne le proprietà,
velocizzando di molto il nostro lavoro in modalità visuale. Ad esempio se vogliamo selezionare la
riga di una tabella all'interno della quale è inserito un filmato Flash, è sufficiente cliccare sul filmato
e poi cliccare due tag indietro sul Tag Selector per selezionare esattamente la riga di tabella
desiderata.
Sulla destra della barra di stato troviamo l'opzione Window size e la Connection Speed, che serve
a calcolare il peso in Kb della pagina e fare una stima dei tempi di caricamento (di default vengono
stimati su una connessione a 28.8 Kilobits al secondo). Per calcolare il peso di una pagina la
Connection Speed tiene anche conto di eventuali file esterni come le immagini i filmati Flash, i
JavaScript ed i CSS.
Per attivare l'opzione Window size è necessario che la finestra della pagina non sia massimizzata,
dunque una volta ridotta è necessario cliccare sul triangolino in basso a destra per selezionare una
dimensione predefinita della pagina, che può meglio simulare le dimensioni di un browser ad una
determinata risoluzione. E' anche possibile, cliccando su Edit sizes... impostare ed aggiungere una
dimensione personalizzata, nella schermata qui sotto l'ultima è un'impostazione personalizzata.

Esploriamo l'interfaccia II
Concludiamo con questo capitolo l'esplorazione dell'interfaccia, analizzando i pannelli di
Dreamweaver MX.
I pannelli o i gruppi di pannelli che appaiono di default nell'area di lavoro al lancio di Dreamweaver
MX, sono, dall'alto verso il basso, al lato della documento aperto: Design (gruppo di pannelli),
Code (gruppo di pannelli), Application (gruppo di pannelli), Files (gruppo di pannelli) e Answers.
Infine al di sopra ed al di sotto della pagina troviamo rispettivamente il gruppo di pannelli Insert e
il pannello Property.
Altri pannelli sono disponibili dal menu Window: il gruppo Result che si apre sotto il pannello
Property ed i pannelli accessibili da Windows >> Others... Ovvero i pannelli mobili Code
Inspector e Sitespring, il gruppo di pannelli Advanced Layout, ed il pannello History, che si
agganciano ai pannelli sul lato del documento tra il gruppo Sites ed Answers ed infine il pannello
Timelines che si apre tra Property ed il gruppo Result in fondo alla pagina.
Analizziamo in dettaglio le caratteristiche dei principali pannelli.
Pannelli Insert
Il gruppo di pannelli Insert - denominato Object nelle versioni precedenti - come si diceva nel
capitolo precedente, situato sopra l'area del documento, è un'alternativa al menu Insert per inserire
gli oggetti. I pannelli sono:

• Common,
da cui inserire links, immagini, livelli, tabelle, Flash movies, ecc.;
• Layout, che consente di andare in modalità Layout View;
• Text,
per inserire i principali elementi relativi alla formattazione del testo;
• tables,
che in vista codice consente di inserire alcuni tag di tabella non presenti nelle
precedenti versioni di Dreamweaver;
• Frames,
che consente la creazione di frameset ed, in vista codice, consente l'inserimento del
tag Iframe, il cui supporto è tuttavia parziale e comunque nullo in modalità visuale;
• Forms,
per inserire un form ed i suoi elementi;
• Template,
una nuova funzionalità che consente l'inserimento rapido dei templates e
l'inserimento di templates nidificati;
• Characters: inserisce l'interruzione di riga (attivabile anche mediante la combinazione di
tasti Maiuscolo+Invio),
lo spazio unificatore ed i principali caratteri speciali (ad esempio il
simbolo dell'euro e del copyright)
• Media,
inserisce i elementi multimediali come file Flash o Shockwave, nonché dei bottoni
Flash, o converte il testo in Flash senza bisogno di avere quest'ultimo programma;
• Head,
da questo pannello accediamo agli elementi del tag head, tra cui i meta tags per i
motori di ricerca e i link a file esterni (ad esempio JavaScript o CSS)
• Script,
ci permette di gestire degli script interni o esterni alla pagina;
• Application,
è un nuovo gruppo di oggetti relativo alle funzioni comuni delle pagine
contenenti linguaggi lato server, supportati da Dreamweaver MX, ovvero ASP JavaScript,
ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, JSP e PHP MySQL.
• Pannelli specifici (ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e
PHP) vengono visualizzati alla sinistra del pannello Application quando si sviluppano
pagine nei menzionati linguaggi.
Pannello Property
Al di sotto dell'area del documento, tra i vari pannelli, decisamente il più importante, è il pannello
Property, questo pannello è risultato talmente utile che ora lo ritroviamo pure nei nuovi Flash MX
e Fireworks MX. Il pannello Property ci permette di esaminare e modificare rapidamente le
proprietà degli elementi della pagina, nella parte superiore troviamo quelle più importanti e nella
parte inferiore (a scomparsa) le altre. Per visualizzare o far scomparire - a seconda dei casi - la parte
inferiore del pannello si clicchi sull'icona a forma di triangolo in basso a destra. Per lanciare l'help
di Dreamweaver relativo al'elemento di cui il pannello Property ci mostra le informazioni, si
clicchi sull'icona ? in alto a destra.

Pannello Timelines
Il pannello delle Timelines consente di stabilire delle temporizzazioni da applicare agli elementi
della pagina, sfruttando il DHTML, in modo da potere muovere, rendere visibili, invisibili, ecc i
livelli e le immagini ed attivare in un dato momento funzioni JavaScript, il tutto suddividendo la
linea temporale in numero di frame (fotogrammi) al secondo.
Pannelli Result
Il gruppo di pannelli Result ci restituisce i risultati di operazioni ripetitive relative ad una o più
pagine o all'intero sito, come ad esempio le operazioni del comando Find and Replace, il controllo
dei links, la validazione delle pagine, ecc. I pannelli sono: Search, Validation, Target Browser
Check, Link Checker, Site Reports, FTP Log e Server Debug.
A lato del documento troviamo l'ultima serie di pannelli.
Pannelli Design
Il gruppo Design,
comprendente:

• CSS Styles,
l'editor per i fogli di stile integrato in Dreamweaver che ci permette di creare,
controllare e modificare sia gli stili interni che esterni alla pagina;
• HTML Styles,
permette di definire e memorizzare gli attributi HTML ed alcuni stili fisici
degli elementi di testo di una pagina, in modo da poterli riapplicare, ad altre parti del
documento o ad altri documenti, con un semplice click su nome dello stile HTML
memorizzato;
• Behaviors,
consente di applicare alcune funzioni JavaScript, quali l'apertura di finestre
indipendenti, la validazione client-side dei forms, il controllo dell'audio, la comparsa e la
scomparsa dei livelli, ecc.
Pannelli Code
Nel gruppo di pannelli Code troviamo due nuovi pannelli:
• Tag Inspector,
mediante il quale visualizziamo, nella parte superiore, in una struttura ad
albero, gli elementi HTML della pagina e nella parte inferiore gli attributi ed eventi
JavaScript disponibili, in modo da poterne aggiungere nuovi e modificare quelli esistenti;
• Snippets,
che vuol dire pezzi di codice, ci permette in vista codice di inserire del codice
precedentemente salvato ed immagazinato in una struttura di cartelle e sottocartelle, sono
già presenti oltre 200 Snippets ed è possibile sia modificarli, sia crearne nuovi, sia riordinarli
in modo diverso;
• Reference,
già presente nelle precedenti versioni, ci fa accedere alle reference dei linguaggi
supportati dal programma, alcune sono le ottime reference della O'Relly e della Wrox le
case editrici leader in questo campo.
Pannelli Application

Il gruppo Application comprende i pannelli relativi alla creazione di pagine lato server:
• Databases serve per navigare all'interno dei database e creare connessioni ai database;
• Bindings crea associazioni di dati;
• Server Behaviors inserisce comportamenti server;
• Components permette di creare componenti e web services in ASP.NET e ColdFusion.
Pannelli Files
Il gruppo Files comprende:
• Site,
il pannello mediante il quale controlliamo il sito locale sul quale stiamo lavorando.
Inoltre con Dreamweaver MX ci consente anche di navigare all'interno del sito con una sorta
di Esplora risorse integrato. Da questo pannello è anche possibile lanciare la finestra del sito
che consente di visualizzarne la mappa o, attivando il programma FTP integrato in
Dreamweaver, visualizzare i file remoti residenti sul server di pubblicazione;
• Assets sono librerie di elementi frequentemente utilizzati durante la costruzione di un sito,
ad esempio possiamo salvare, in un sito di centinaia di pagine, una struttura di navigazione
come elemento di libreria e, con una sola modifica a tale elemento di libreria, applicare la
modifica in tutte le pagine.
Pannelli Advanced Layout
Nel gruppo Advanced Layout troviamo:

• Layers,
che consente il controllo dei livelli presenti su una pagina;
• Frames,
che consente in una pagina con frames il controllo sui frameset ed i relativi frames.
Il pannello History registra tutte le operazione svolte dall'apertura della pagina, permettendo di
cancellarle o duplicarle, possiamo anche registrare un gruppo di operazioni ripetitive e salvarle
come comando che ritroveremo all'interno del menu Commands.
Pannello Answers
Infine il pannello Answers, analogamente ai sottomenu di Help, consente di accedere al tour delle
nuove funzionalità ed ai tutorial di Dreaweaver MX, il pulsante Update, collegandosi al sito
Macromedia, consente di aggiornare i contenuti del pannelloi. Una volta aggiornato il contenuto, il
pulsante Update scompare.
Si noti come appena si lancia la procedura di Update il pannello, dal menù a discesa rende
disponibile il collegamento diretto al sito della Macromedia permettendo di visualizzare:

• le ultime tre Technotes e di effettuare al ricerca delle Technotes, per parole chiave,
all'interno della sezione Dreamweaver Support;
• le ultime tre estensioni per Dreamweaver, consentendo anche la ricerca di estensioni per
parole chiave all'interno Dreamwever Exchange;
• gli ultimi tre articoli all'interno del Designer & Developer Center e il collegamento alla
home page del Designer & Developer Center;
• il sito del giorno con un'anteprima sulla parte superiore del pannello
il tutto senza uscire da Dreamweaver MX e consentendo anche cliccando sulla relativa voce nel
pannello di aprire la pagina selezionata. E' possibile dalla voce Settings del menù rendere
disponibile la visualizzazione non solo degli ultimi tre articoli della sezione Dreamweaver MX del
del Designer & Developer Center, ma di tutti i prodotti Macromedia.
Ovviamente si potranno avvantaggiare maggiormente di tali funzionalità coloro i quali hanno una
possibilità di connessione ad internet permanente, come gli utenti di tariffe "flat", o meglio di
connessioni ADSL o simili.
Personalizzazione dell'interfaccia
Macromedia stabilisce, tra requisiti minimi di sistema,
un monitor settato ad una risoluzione
800x600 e come risoluzione consigliata 1024x768. In presenza di così tanti pannelli si comprende
facilmente il perché avere un monitor settato ad un'alta risoluzione, o addirittura due monitor,
consenta di sfruttare al meglio le potenzialità di questo programma, velocizzando il flusso di lavoro.
Infatti possiamo fare scomparire in un colpo solo tutti i pannelli laterali, cliccando sulla freccia
posta nella parte centrale del bordo che divide i pannelli laterali dall'area del documento, in questo
modo la larghezza del documento verrà massimizzata guadagnando spazio prezioso.

Cliccando nuovamente sulla freccia riappariranno i pannelli laterali. Quando nella parte inferiore
del documento oltre al pannello Property è presente almeno un altro pannello, compare un'analoga
freccia dalle medesime funzionalità. È anche possibile allargare l'area dei pannelli - a scapito
dell'area del documento - per meglio visualizzarne il contenuto, puntando col mouse sul suo bordo.
Quando il mouse assume la forma "Resize horizontal" ovvero doppia freccia orizzontale,
trascinandolo verso destra l'area dei pannelli verrà allargata. Spostando completamente verso destra
i panelli riassumeranno la dimensione di default. La medesima funzione, in direzione verticale, è
presente per i pannelli situati in fondo alla pagina.
Ognuno dei pannelli o dei gruppi di pannelli presenti in Dremaweaver MX, inoltre consente la sua
massimizzazione e la sua chiusura, cliccando sulla freccia posta sulla destra della barra del titolo del
pannello, oppure cliccando col tasto destro del mouse sempre sulla barra del titolo del pannello.
Cliccando, invece, sulla freccia posta sulla sinistra, si apre il pannello, o se aperto, si riduce alla sola
area della barra del titolo.

Sempre cliccando sulla freccia del lato destro è possibile accedere all'Help relativo a quel pannello,
nonché alle sue specifiche funzionalità e comandi.
È infine possibile sganciare un pannello dal suo gruppo ed agganciare nuovi pannelli ad un gruppo
preesistente. La procedura è tuttavia differente rispetto alle precedenti versioni di Dreamweaver.
Dunque vediamo in dettaglio come fare.
Immaginiamo di voler sganciare dal gruppo Design il pannello HTML Styles, in quanto poco
utilizzato e voler agganciare a questo gruppo i pannelli Layers e Frames del gruppo Advanced
Layout,
in quanto utilizzati più frequentemente.
Mentre è attivo il pannello HTML Styles clicchiamo sulla freccia posta sulla destra del titolo del
gruppo di pannelli Design, oppure col tasto destro del mouse direttamente sulla linguetta del
pannello in questione e selezioniamo dal menu a comparsa:

Group HTML Styles with >> New Panel Group
il pannello verrà distaccato dal gruppo e si presenterà "flottante" ovvero non più agganciato al lato
della pagina, lanciamo di nuovo il menu a comparsa e clicchiamo Close Panel Group, così il
pannello scomparirà dall'area di lavoro finché non verrà nuovamente richiamato dal menu Window.
Nel gruppo Advanced Layout, con la stessa procedura, aprendo il menu a comparsa dei relativi
pannelli, agganciamo il pannello Layers ed il pannello Frames al gruppo Design

Group Layers with >> Design
Group Frames with >> Design
In questo modo il gruppo di pannelli Design adesso presenterà quattro pannelli: CSS Styles,
Behaviors, Layers e Frames.
Chiudiamo col metodo illustrato anche il pannello History, se aperto, il pannello Answers ed il
gruppo di pannelli Application se non lavoriamo con linguaggi server-side.
Qualora volessimo massimizzare l'area del documento potremmo procedere alla chiusura del
pannello Property e del pannello Insert con la stessa procedura. E far scomparire i pannelli laterali
con la procedura illustrata in precedenza.
Infine possiamo anche eliminare la
Toolbar.
Dal menu:

View >> Toolbars >> Document.
A questo punto, a parte la Barra di stato, in basso, la Barra del titolo ed il menu, in alto, all'interno
di Dreamweaver viene visualizzata solo la pagina sulla quale stiamo lavorando.
Dunque anche con monitor a basse risoluzioni si può disporre, con qualche rapido accorgimento, di
spazio a sufficienza per lavorare.

Abbiamo visto nella schermata relativa alla Toolbar, che Dreamweaver MX dispone di un'altra
Toolbar, questa è una novità molto comoda che, soprattutto gli utenti di Office non mancheranno di
apprezzare: la Toolbar Standard.
Per accedervi bisogna selezionare dal menu:
View >> Toolbars >> Standard.
Normalmente viene posizionata al di sotto della Toolbar Document, riducendo così, in altezza,
l'area del documento, tuttavia con il medesimo procedimento Drag and Drop delle barre di Office è
possibile affiancarla alla Toolbar Document trascinando con il mouse il suo bordo sinistro fino alla
posizione desiderata.
La Toolbar Standard dispone di nove comandi comandi, i primi quattro altrimenti accessibili dal
menu File ed i restanti dal menu Edit:
•
•
•
•
•
•
•
•
•
New,
per creare un nuovo documento;
Open,
per aprire un documento esistente;
Save,
per salvare il documento sul quale si sta lavorando;
Save All,
per salvare tutti i documenti aperti
Cut,
per tagliare un elemento della pagina (a differenza di altri programmi permette di
incollarlo più volte)
Copy,
per copiare un elemento della pagina;
Paste,
per incollare un elemento della pagina;
Undo,
per annullare l'ultimo comando;
Redo,
per ripetere l'ultimo comando.

Per configurare l'area di lavoro in modo da avere sotto controllo tutti gli elementi della pagina,
controlliamo dal pulsante View Options della Toolbar Document che tutti gli elementi dei Visual
Aids ed i righelli siano spuntati. I righelli hanno come unità di misura espressa in pixels, tuttavia
essa è modificabile con click del tasto destro del mouse sull'area dei righelli.
Inoltre se abbiamo sufficiente spazio verticale per l'area del documento potremo anche attivare
anche la visualizzazione del contenuto del tag head
View Options >> Head Content.
Dreamweaver consente l'anteprima delle pagine su tutti i browsers presenti nel nostro computer,
creando dei file HTML temporanei aperti nel browser prescelto, in modo che la cache dei browsers

non venga riempita dalle nostre anteprima. Inoltre consente di lanciare il browser primario con la
scorciatoia tasto F12 ed il browser secondario con la scorciatoia Ctrl+F12.
Al momento dell'installazione di Dreamweaver, l'unico browser disponibile per l'anteprima è il
browser predefinito del computer. Per aggiungere il browser secondario e gli eventuali altri dalla
Toolbar Document:
Prewiev/Debug in Browser >> Edit Browser List...
Premere il tasto + nella finestra di dialogo e navigare nella propria cartella Programmi fino al file
.exe del browser desiderato. Ripetere l'operazione per ogni browser che si vuole aggiungere.
Così apparirà l'elenco dei vari browser pronti per essere lanciati dalla Toolbar Document,
cliccando il pulsante Prewiev/Debug in Browser.

Con queste semplici procedure abbiamo personalizzato la nostra area di lavoro e settato i browser
per l'anteprima. Dreamweaver memorizza il modo in cui abbiamo lavorato al momento della sua
chiusura e quando lo lanceremo nuovamente ci presenterà la medesima area di lavoro.
Le novità di Dreamweaver MX I
Come si diceva, enormi sono le nuove funzionalità introdotte da questa versione di Dreamweaver,
non basterebbe l'intero corso per illustrale in dettaglio.
E tuttavia mia intenzione passarle in rassegna sinteticamente, mostrando i cambiamenti più
significativi. Ciò servirà ai principianti per fare un ulteriore passo nella conoscenza di questo
programma - prima di addentrarci nel dettaglio delle principali funzionalità - ma soprattutto potrà
essere utile a coloro i quali, conoscendo già Dreamweaver, potranno subito trarre vantaggio dalle
nuove funzionalità.
Le principali novità di Dreamweaver MX possono essere raggruppate in sei macroaree:
La nuova interfaccia;
L'integrazione di HomeSite al suo interno ed i conseguenti miglioramenti soprattutto quando si
lavora direttamente sul codice;
Le funzionalità per aderire agli standard del web stabiliti dal W3C (World Wide Web Consortium);
La più stretta integrazione con gli altri software della Macromedia;
Le tecnologie ed i linguaggi lato server supportati;
I modelli "Quick Start".

La nuova interfaccia
Come già illustrato nel primo capitolo e successivi, l'interfaccia è radicalmente cambiata,
ricordiamo i punti già illustrati in precedenza:
• Interfaccia integrata;
• La possibilità di aprire più documenti e passare dall'uno all'altro selezionando il nome del
file posto sopra la Barra di Stato;
• La nuova Toolbar Standard;
• Il modo di gestire sganciare e raggruppare i pannelli;
• Il gruppo di pannelli Result;
• Il pannello Sitespring per l'integrazione con questo software Macromedia per la gestione
della produzione di siti web;
• Il pannello Answers;
• I pannelli Tag Inspector e Snippets all'interno del gruppo Code.
L'integrazione di HomeSite
L'integrazione di HomeSite all'interno di Dreamweaver MX ed i miglioramenti nella gestione del
codice non si fermano ai due nuovi pannelli Tag Selector e Snippets.
Infatti basta andare in Code View e digitare il segno minore < (di apertura del tag) e apparirà il
Code Hints, scorrendo la barra orizzontate (o digitando l'iniziale del tag) e cliccando due volte sul
tag prescelto o premendo il tasto Invio esso sarà inserito.

Spostandoci di uno spazio verrà visualizzato il gruppo di attributi disponibili, cliccando sue volte
sull'attributo prescelto esso verrà inserito e, ove disponibile, ci farà visualizzare un elenco di valori
da inserire, scelto ed inserito - come precedentemente - il valore, basterà digitare il segno maggiore
> (chiusura di tag) e Dreamweaver MX inserirà automaticamente il tag di chiusura, ove necessario.
Nell'esempio scelto ho inserito come si vede il cursore automaticamente
lampeggia tra il tag di apertura e quello di chiusura, consentendoci, non appena inserito il segno >
nel tag di apertura, di inserire il testo del paragrafo.
Sempre in modalità Code View si può seguire un'altra procedura per inserire i tag.
Col click destro del mouse si scelga dal menu contestuale Insert Tag... verrà così visualizzata la
finestra di dialogo Tag Chooser.
Il Tag Chooser è diviso in due parti, sulla sinistra una serie di cartelle relative ai vari linguaggi per
i quali è possibile scegliere il tag (HTML, CFML, ASP.NET, JSP, Jrun Custom Library, ASP, PHP,
WML, Sitespring Project Site Tags), sulla destra l'elenco generale dei tag relativo al linguaggio

selezionato. Le cartelle a loro volta contengono delle sottodirectory che suddividono il linguaggio in
categorie, selezionando una delle sottodirectory appaiono solo i tag relativi a quella categoria. Una
ulteriore suddivisione consente di scegliere all'interno della sottodirectory prescelta la
sottocategoria General, Browser-specific, Deprecated o Obsolete ed i relativi tag. Qualora la lista
di tag , tra quelli disponibili sulla destra della finestra, sia lunga, piuttosto che scorrere la barra
verticale, è sufficiente selezionare uno qualsiasi dei tag e digitare sulla tastiera la lettera iniziale del
tag desiderato, il Tag Chooser si posizionerà sul primo tag che inizia con quella lettera dell'alfabeto.
Una terza parte, in basso, della finestra di dialogo del Tag Chooser permette di accedere alla
reference del linguaggio. Il tasto sulla sinistra Tag Info fa apparire la reference sulla parte inferiore
della finestra, il tasto invece apre il pannello Reference. Si noti come dal menu del pannello
Reference è possibile scegliere la dimensione del testo visualizzato.
Avvertenza: questa è una versione ridotta del pannello laterale Reference che non consente di
visualizzare gli attributi relativi ai tag.
Una volta selezionato il tag, cliccando su insert, si apre il Tag Editor dal quale possiamo scegliere
o digitare attributi, valori ed eventi JavaScript per il tag selezionato ed se il caso, anche il contenuto.
In questo esempio il testo del paragrafo. Si noti come la reference a comparsa, sia disponibile anche
nella parte inferiore anche del Tag Editor.

Inserito - se necessario - l'eventuale attributo il tag comparirà nel codice della pagina che stiamo
realizzando.
Avvertenza: tutte queste e le altre funzionalità, specifiche per il lavoro sul codice, richiedono una
particolare attenzione, l'utente deve sapere che cosa sta inserendo e dove inserirlo, altrimenti si può
incorrere, in gravi errori. A titolo di esempio si provi ad inserire una immagine mentre il cursore si
trova tra la "o" e la "d" del tag body e si visualizzi l'anteprima sul browser.
Si può anche aprire autonomamente il Tag Editor, sempre tramite il menu contestuale (click destro
del mouse), per modificare un tag già inserito dopo averlo selezionato, sempre in modalità Code
View.

Si accennava precedentemente che il pannello Snippets,
oltre a consentire l'inserimento degli oltre
200 snippets già integrati in Dreamweaver MX, consente di salvare pezzi di codice, che si prevede
di utilizzare spesso.
Immaginiamo di volere inserire i meta tag che bloccano l'uso degli "smart tags" e non fanno
visualizzare la fastidiosa "image toolbar" di Microsoft Internet Explorer.
Dopo aver inserito tali meta, selezioniamo la cartella Meta nel pannello Snippets e selezioniamo
nel codice della pagina i meta prescelti, dal menu contestuale (tasto destro del mouse) scegliamo
Create new Snippet, verrà così visualizzata la finestra di dialogo Snippet,
con già inseriti i meta,
aggiungiamo nei relativi campi un titolo ed una descrizione, clicchiamo OK e lo snippet comparirà
nell'elenco di quelli inseriti nella cartella meta.

Tutte le volte successive che vorremo inserire i meta "imagetoolbar" e
"MSSmartTagsPreventParsing", sarà sufficiente posizionarci all'interno del tag head e dalla cartella
Meta del pannello Snippets,
con un doppio click, inserire lo snippet da noi creato.
Ho pacchettizzato questi meta come estensione accessibile appunto dal pannello Snippets cartella
Meta.
Avvertenza: per questa estensione è necessario riavviare Dreamweaver.
Scarica l'estensione Meta MS Image & Smart Scarica l'estensione Meta MS Image & Smart
(versione HTML)
(versione XHTML)

Per la verità gli snippets non sono una novità assoluta per Dreanweaver, infatti coloro i quali
avevano acquistato Snippets Panel un'estensione commerciale realizzata da Massimo Foti, hanno
potuto godere di questa funzionalità fin da Dreamweaver 4 e Dreamweaver UltraDev 4. Sebbene il
pannello Snippets sia ormai integrato in Dreamweaver MX, questa estensione presenta ancora
alcuni vantaggi: compatibilità con gli snippets di HomeSite, ColdFusion Studio, JRun Studio,
import/export integrato e prestazioni decisamente superiori.
Per l'estensione Snippets panel è stato realizzato Snippets Exchange un'area dove è possibile
loggarsi, scaricare ed installare snippets pacchettizzati come estensioni per Dreamweaver. Questi
snippets - oltre 200 - sono disponibili anche per coloro i quali non abbiano acquistato l'estensione
Snippets panel. E' anche disponibile un Newsgroup di supporto.

E' possibile anche scaricarne molti in una volta selezionandoli ed andando nella relativa pagina che
ci permetterà di scaricare un file zip contenente tutti gli snippets da noi selezionati. e
successivamente eliminarli dall'area personale di download dove è situato il nostro file zip.
Tuttavia poiché il formato degli snippets dell'estensione Snippets panel è analogo a quello degli
snippets per HomeSite ColdFusion Studio e JRun Studio, ma diverso da quello degli snippets per
Dreamweaver MX, coloro i quali hanno installato gli snippets per l'estensione Snippets panel o - in
quanto utilzzatori dei summenzionati software - hanno degli snippets nel formato non compatibile
per Dreamweaver MX, potranno scaricare un'estensione gratuita Snippets Converter, che importa e
converte il formato di questi snippets nel formato di Dreamweaver MX. Istruzioni sullo Snippets
Converter sono disponibili cliccando il pulsante Help dell'estensione.
Scaricata, installata e lanciata l'estensione si localizzi le cartelle degli snippets da convertire - per gli
snippets scaricati da Snippets Exchange bisogna andare nella cartella:

C:/Programmi/Macromedia/Dreamweaver MX/Configuration/Snippets/le varie cartelle contenenti
le categorie di snippets
e cliccare su OK.
Una finestra di dialogo ci avvertirà quanti snippets da convertire sono stati trovati, cliccando su OK
inizierà il processo di conversione. terminata la conversione un'altra finestra ci darà un rapporto
sulla conversione. Riavviando Dreamweaver gli snippets così convertiti saranno disponibili.
In ogni caso gli utenti di Dreamweaver MX che scaricano gli snippets da Snippets Exchange non
hanno bisogno di convertire questi snippets in formato utilizabile da Dreamweaver MX, in quanto
sono tutti compatibili anche con il pannello Snippets di Dreamweaver MX

Un'altra nuova funzionalità attivabile dal pannello Tag Inspector è la possibilità di creare tag
personalizzati o aggiungere valori ed attributi a quelli già esistenti. Tale potenzialità è
particolarmente utile in linguaggi come il CFML. Tuttavia qui rappresenteremo un esempio relativo
all'HTML per dimostrarne il funzionamento.
Immaginiamo di volere aggiungere un target personalizzato al tag . Dunque una volta inserito il
tag lo selezioniamo dal pannello Tag Inspector, cliccando sul pulsante Tag Library Editor del
pannello, si aprirà la relativa finestra di dialogo con la sottocartella relativa al tag selezionata,
aprendo la sottocartella e selezionando l'attributo target è possibile aggiungere il nome di un frame,
ad esempio, "mainframe" separandolo con una virgola dal valore precedente. Salvate le modifiche è
possibile richiamare anche il target personalizzato dall'elenco a discesa dei target situato nelle parte
inferiore del pannello Tag Inspector.

Un'altra novità relativa al codice è accessibile dal menù:
Edit: >> Preferences... >>Code coloring
che offre un migliorato supporto alla colorazione del codice, adesso più semplice da gestire e con
opzioni differenziate per i vari linguaggi.
Infine è adesso possibile
File >> Print Code...
oppure dal menù contestuale (click destro del mouse) in modalità Code View stampare il codice del
documento, anche se solo in bianco e nero.

Le novità di Dreamweaver MX II
Il supporto degli standard
Alcuni dei miglioramenti più consistenti di Dreamweaver MX sono stati fatti nel supporto agli
standard del W3C.
Una delle prime cose che balza all'occhio è che inserendo del testo in grassetto e/o in corsivo
Dreamweaver MX non utilizza più i tag ed (bold ed italic), ma i tag ed ,
questo non perché i primi due siano deprecati, bensì per il principio generale in base al quale per gli
elementi che definiscono il layout della pagina sono da preferirsi i fogli di stile rispetto a tag ed
attributi HTML, dunque al posto dei tag che definiscono dei cosiddetti stili fisici si preferisce
utilizzare dei tag HTML (quando non si fa ricorso ai CSS) che definiscono degli stili logici appunto
ed in questo caso.
Si tenga anche presente che quei dispositivi per disabili con funzione di sintetizzatore vocale
daranno un rilievo diverso ai tag ed .
È tuttavia sempre possibile impostare nuovamente Dreamweaver in modo che utilizzi ed
modificando le preferenze dal menu: Edit >> Preferences... >> General
Togliendo il segno di spunta dalla casella
"Use and in place of and " .

Si noti anche come adesso visualizzando una pagina in Code View Dreamweaver inserisce il
seguente Doctype prima del tag
la scelta di un Doctype transitional no URI è dovuta al fatto che con questo tipo di Doctype si
ottiene il miglior supporto da parte dei browsers, evitando sorprese dovute al fatto che alcuni
browsers non supportano correttamente il Doctype transitional:
.
Quando utilizzeremo una pagina con frames nel frameset, invece sarà inserito, correttamente il
Doctype Frameset.
Anche il tag body è cambiato, se infatti prima veniva inserito adesso viene inserito , non perché nell'html transitional tali attributi non
siano più validi, ma, ancora una volta, per il principio generale di stabilire gli elementi del layout di
pagina tramite CSS. Peraltro ove non settati altrimenti dall'utente, i browsers delle ultime
generazioni vedranno lo sfondo di pagina bianco ed il testo in nero, ove non specificato altrimenti
tra gli attributi del tag o tramite CSS.
Inoltre è stato migliorato il supporto dei caratteri speciali e modificate, per aderire agli standard,
quelle named entities che prima venivano inserite in modo non standard.
Un altro decisivo passo verso il pieno supporto degli standard del web è dato dalla possibilità di
scegliere di creare pagine XHTML.
Dal menu File >> New... o dalla Toolbar Standard pulsante New... notiamo che si apre una
finestra di dialogo ricca di opzioni cliccando sulla casella Make Document XHTML Compliant e
poi sul pulsante Create verrà aperta una nuova pagina XHTML con Doctype XHTML transitional
e, prima del Doctype, una dichiarazione XML.
Quest'ultima, a parte essere consigliata, garantisce un miglior supporto da parte di IE 6.
È anche possibile salvare questa impostazione come predefinita, spuntando la casella Make
Document XHTML Compliant nelle impostazioni delle preferenze stabilite dall'utente accessibili
dal menu: Edit >> Preferences... >> New Document

Sempre nell'ambito dei significativi miglioramenti di Dreamweaver verso una maggiore aderenza
agli standard del web, bisogna menzionare il migliorato funzionamento generale dell'editor CSS
integrato, accessibile pannello CSS Styles.
Inoltre adesso è possibile avere un quadro chiaro degli stili applicati ad una pagina selezionando la
casella Edit Styles,
che mostra tutti gli stili applicati ad una pagina, con un doppio click su uno di
essi si aprirà l'editor CSS, permettendo di modificare quel dato stile.
Inoltre è adesso possibile esaminare e modificare le classi CSS degli elementi testuali di una pagina
dal pannello Property, cliccando sul pulsante A il pulsante diventa quello del simbolo dei CSS in

Dreamweaver e verrà così visualizzata la classe applicata, dal menu a discesa è possibile
modificarla. Sempre da questo pulsante si può richiamare l'editor CSS per applicare uno stile ad un
tag selector, ma tale stile non verrà visualizzato.
Il supporto CSS è migliorato anche relativamente ai layers, infatti prima dal Tag Selector era solo
possibile visualizzare l'eventuale classe, adesso anche l'ID.
Dreamweaver MX integra ora un validatore di linguaggi markup (tra cui l'HTML). È possibile
settarne le preferenze ed opzioni dal menu:
Edit >> Preferences >> Validator

Per lanciarlo si acceda invece da:
File >> Check Page >> Validate Markup...
il validatore mostrerà nel pannello Validation del gruppo Results
i risultati.
Anche nel campo dell'accessibilità Dreamweaver MX mostra notevoli miglioramenti, infatti dal
menu: Edit >> Preferences >> Accessibility è possibile impostare di default che Dreamweaver
mostri delle finestre di dialogo aggiuntive per inserire gli attributi necessari all'accessibilità della
pagina ogni volta che sia necessario. Ad esempio per il tag ci verrà richiesto di aggiungere
l'attributo alt o longdesc e per le tabelle l'attributo caption.

Per lanciare il validator dell'accessibilità bisogna accedere da:
File >> Check Page >> Check Accessibiliy
Analogamente alla validazione di linguaggio il validatore mostrerà nel pannello Validation del
gruppo Results i risultati.
La Dreamweaver Task Force
Il WASP The Web Standards Project - un gruppo di sviluppatori web guidati da Jeffrey Zeldman,
che dal 1998 si battono per l'adozione degli standard del W3C, dialogando con produttori di
browser, produttori di editor per il web ed altri sviluppatori - ha creato nel 2001 una Dreamweaver
Task Force, questo sta a significare anche come tra gli sviluppatori professionisti Dreamweaver sia
considerato l'editor per eccellenza. La Dreamweaver Task Force - avvalendosi degli sforzi, della
competenza e della passione di Drew McLellan e Rachel Andrew due sviluppatori che godono di
universale rispetto nella comunità degli utenti di Dreamweaver - ha lavorato ha stretto contatto con
gli ingegneri della Macromedia, affinché Dreamweaver potesse essere uno strumento che consenta
di realizzare con facilità pagine aderenti agli standard. In conseguenza dei cambiamenti e dei
miglioramenti portati da Dreamweaver MX la Dreamweaver Task Force ha pubblicato un
documento di valutazione che promuove ampiamente gli sforzi fatti dalla Macromedia in questa
direzione.
Le novità di Dreamweaver MX III

La migliorata integrazione con Fireworks e Flash
L'integrazione di tutti i prodotti Macromedia della generazione MX è decisamente migliorata.ed
anche Dreamweaver non fa eccezione.
Fino alle versioni precedenti era possibile lanciare Fireworks per modificare un file di immagine
inserito in una pagina. Adesso tale opzione è disponibile anche per Flash. Infatti è sufficiente
inserire un file swf in una pagina, selezionarlo e cliccare il bottone Edit del pannello Property. La
prima volta ci verrà richiesto di specificare il percorso, all'interno del nostro disco, per il file
sorgente fla e questo verrà aperto da Flash. Le volte successive, al click del bottone Edit il file fla si
aprirà direttamente in Flash, senza bisogno di specificare il percorso che, anzi apparirà nel pannello
Property.
L'esempio utilizzato in queste videate è il tree menu (menu only), realizzato da Alessandro
Crugnola (nick Sephiroth). Uno tra i più competenti flasher non solo italiani. L'esempio è

disponibile su Flash-MX.it e sfrutta un file xml esterno dal quale prende i dati per trasformarli in un
menu stile Esplora risorse di Windows.
Scarica i files Flash d'esempio
Tecnologie e linguaggi lato server supportati
Come accennato nel primo capitolo, Dreamweaver 4 e Dreamweaver UltraDev 4 sono stati
integrati, dunque Dreamweaver MX è, di fatto, un upgrade significativo di Dreamweaver UltraDev
4.
Quest'ultimo supportava 3 tecnologie lato server ASP (con linguaggi scripting server-side
JavaScript e VBScript), ColdFusion e JSP.
Adesso Dreamweaver supporta oltre alle tre tecnologie già menzionate, anche il nuovo Microsoft
ASP.NET (con linguaggi scripting server-side C# e VB).
La precedente versione di Dreamweaver UltraDev non supportava il PHP, sebbene degli
sviluppatori, il team InterAKT, avessero sviluppato un eccellente modello server PHP per
Dreamweaver: PHAkt, che si installava nel programma come estensione di Dreamweaver UltraDev.
Dreamweaver MX invece adesso supporta nativamente PHP MySQL. Tuttavia anche in questa
versione è possibile utilizzare il PHP con altri database sempre tramite l'estensione PHAkt, giunta
alla versione 2, è scaricabile gratuitamente dopo essersi loggati, dal sito InterAKT, che utilizza per
la connessione ai database ADOdb. Mentre agli utilizzatori di PHP con UltraDev 4 è consigliato lo
scaricamento di PHAkt 1.51, che adesso integra le funzionalità avanzate di ImpAKT, la versione
commerciale del Server Model PHP per UltraDev 4. PHAkt 1.51 è scaricabile sempre dallo stesso
URL sopra indicato.
Infine Dreamweaver MX è uscito contemporaneamente al nuovo ColdFusion MX ovvero la
versione 6, che Dreamweaver MX supporta pienamente, anzi come avvenuto per HTML/XHTML
relativamente all'integrazione di HomeSite, Dreamweaver ha anche integrato ColdFusion Studio,
l'editor per il ColdFusion Markup Language (CFML)
I modelli "Quick Start"
Sia che selezioniate New... dal menu file, sia che clicchiate il pulsante New dalla Toolbar Standard,
si aprirà una finestra di dialogo ricca di opzioni.
La prima delle categorie, tra quelle disponibili dal pulsante General, è il gruppo Basic Page che
consente non solo di aprire nuovi documenti in linguaggio HTML, CSS, JavaScript e XML, ma
anche creare sia Templates, sia Library Items di Dreamweaver. Inoltre come già accennato è
possibile selezionare Make Document XHTML Compliant perché l'HTML 4.01 venga sostituito
dal suo successore, l'XHTML 1.0.
Nel gruppo Dynamic Page è possibile creare pagine per i già menzionati linguaggi lato server e
ColdFusion Components.

A differenza di Dreamweaver UltraDev 4 in cui, con il comando Save, scegliendo l'opzione All
Documents, il documento veniva salvato sempre nel linguaggio del Server Model definito per il
sito locale sul quale si stava lavorando, oppure in HTML, se non era definito nessun Server Model,
adesso è possibile salvare una pagina precedentemente creata in uno dei vari linguaggi lato server,
cliccando sull'opzione predefinita - All Documents - indipendentemente dal Server Model
predefinito per il sito locale.
È anche possibile creare templates per tali linguaggi selezionando una delle opzioni del gruppo
Template Page.
Nel gruppo Other è possibile creare documenti in numerosi formati di file, tra i quali vale la pena
menzionare l'Action Script, ovvero il linguaggio di scripting di Flash, il WML (wireless Markup
Language) il linguaggio per i telefonini WAP, ma anche dei normalissimi file di testo (in formato
txt).
Le ultime quattro opzioni di New (categoria General)
servono per generare documenti predefiniti,
un po' come i modelli di pagine HTML e di frameset di FrontPage, ma molto più ricchi e
professionalmente validi.
Infatti dall'opzione CSS Style Sheet,
possiamo scegliere tra scegliere tra 22 modelli di file CSS
predefiniti, anche qui scorrendo l'elenco notiamo una particolare attenzione per le tematiche
dell'accessibiltà, ovvero la realizzazione di pagine che siano accessibili anche dai portatori di
handicap, infatti 3 di questi CSS, realizzati specificamente per l'accessibilità di un sito, utilizzano
per il testo l'unità di misura relativa "em". tra l'altro vale la pena di studiarli per prendere confidenza
con questo tipo di unità di misura dei CSS, il cui uso è ancora relativamente poco diffuso e
pressoché sconosciuto dai principianti. Spesso un esempio vale di più di tante pagine di teoria.
L'opzione Framesets permette di creare un frameset, scegliendo tra 15 modelli di frameset, ovvero
i 13 che troviamo anche nel pannello Frames del gruppo Insert, ed in più Split Horizontal e Split
Vertical.

Le ultime due opzioni, Page Design e Page Design (Accessible), consentono di creare rapidamente
pagine da modelli contenuti in Dreamweaver MX, nel secondo caso i modelli sono realizzati per
aderire agli standard di accessibilità ed in entrambi i casi è possibile generare sia una pagina html
che un template. tra la trentina di modelli disponibili, vale la pena di menzionare quelli per un sito
di e-commerce, per il login, per l'upload dei file e per i moduli di contatto tramite e-mail.
Avvertenza: nonostante si possa aver selezionato Make Document XHTML Compliant con le
procedure spiegate nel capitolo precedente, utilizzando i modelli "Quick Start" Framesets, Page
Design e Page Design (Accesible), Dreamweaver MX non produrrà documenti XHTML, ma
sempre HTML. Dunque, qualora si voglia creare pagine XHTML con frames, la procedura non
dovrà essere quella di scegliere uno dei frameset dai modelli "Quick Start", nonostante si sia settato
Dreamweaver in modo da creare pagine XHTML, bensì aprire una normale pagina XHTML e poi
scegliere dal pannello Frames del gruppo Insert uno dei frameset disponibili.
Cliccando invece il pulsante Template,
visualizzeremo l'elenco dei siti definiti sul nostro computer.
I nostri siti che utilizzano i template di Dreamweaver, mostreranno anche l'elenco dei files dwt
(Dramweaver template) ed un anteprima della pagina, consentendo così di aprire il template e
modificarlo oppure, da questo, creare la relativa pagina html.
Inoltre, la gestione dei template è stata notevolmente migliorata migliorata È infatti possibile creare
Nested Templates (templates nidificati), creare delle aree ripetute o delle tabelle ripetute, creare
Optional Regions,
ovvero con istruzioni condizionali (If...else) ed utilizzare i semplici operatori
booleani true false, oppure costruire espressioni ed istruzioni più complesse, inoltre è possibile
rendere editabili gli attributi.

Per creare un sito e settare i vari parametri tra cui quelli del programma FTP integrato è adesso
possibile ricorrere al Site Definition Wizard che in 6 semplici passi consente di creare sia un sito
html che un sito dinamico nei vari linguaggi supportati. Il Site Definition Wizard è accessibile sia
dal pannello Site del gruppo Code, sia dal menu:
Site >> New Site...
Sarà sempre possibile modificare le impostazioni del sito sia dal pannello Site del gruppo Code, sia
dal menù:
Site >> Edit Sites...
ma anche dalla finestra di dialogo Site Definition scegliendo l'opzione Advanced.
Creazione, controllo e pubblicazione dei siti
Iniziamo con questo capitolo ad esaminare in dettaglio le varie funzionalità di Dreamweaver MX.
Sebbene Dreamweaver consenta di creare pagine senza bisogno di specificare un sito locale, la
produttività del lavoro verrà accresciuta e sarà possibile utilizzare tutte le funzionalità di
Dreamweaver, definendo un sito locale prima di iniziare a realizzare le pagine web.

tra le nuove funzionalità di Dreamweaver MX c'è il Site Definition Wizard che consente una
procedura alternativa per la definizione dei siti oltre a quella già conosciuta degli utenti delle
versioni precedenti e sinteticamente descritta nel secondo capitolo.
Possiamo accedere al menu: Site >> New Site... sia dal menu di Dreamweaver che dal pannello Site
del gruppo Files.
Scegliendo l'opzione Basic dai pulsanti in alto a sinistra della finestra di dialogo Site Definition il
Wizard ci guiderà passo, passo nella definizione del sito.
Il primo passo da compiere è dare un nome al sito.
Premendo il pulsante Next la finestra di dialogo ci chiede se vogliamo utilizzare una server
tecnology, selezionando l'opzione Yes si aprirà un menu discesa dal quale selezionare la tecnologia
lato server tra quelle supportate da Dreamweaver MX, cliccando su No invece potremo procedere a
definire un sito di pagine HTML.
Possiamo a questo punto premere sia Back, sia Next, nel primo caso potremo modificare le scelte
fatte nei passaggi precedenti, cliccando Next proseguiremo nella procedura di definizione del sito.
Cliccando su Next ci viene richiesto dove vogliamo creare e modificare i nostri files, le alternative
sono tre :

1. direttamente sul nostro computer ed uploadare i file sul server remoto quando lo riteniamo
opportuno;
2. sul server, ad esempio quando utilizziamo una tecnologia lato server e sviluppiamo il sito su
un server locale;
3. sul server usando FTP (File transfert Protocol) o RDS (Remote Development Services);
avendo scelto di realizzare pagine HTML la prima delle scelte è quella raccomandata e
Dreawmeaver MX ci propone come cartella di destinazione del sito locale una cartella col nome
scelto nel primo passaggio della procedura all'interno della cartella documenti.

Cliccando Next ci viene richiesto come vogliamo connetterci al server remoto, se non abbiamo
intenzione di specificarlo in questo momento, possiamo scegliere l'opzione None,
altrimenti
l'opzione più frequentemente utilizzata è FTP, in questo caso i campi richiesti sono:

indirizzo FTP o nome dell'host, la cartella di destinazione, il nome utente e la password, inserendo
quest'ultima la casella Save, per memorizzare la password verrà automaticamente spuntata.
Premendo il pulsante Test Connection, se siamo connessi ad internet, possiamo provare la
connessione. Verificato che la connessione è attiva premiamo Next.
La nuova finestra di dialogo ci chiede se vogliamo abilitare il "checking in and checking out" dei
files del sito: questa procedura risulta utile quando si lavora in team, infatti Checking out vuol dire
che un file è in fase di lavorazione da parte di un membro del team e quindi non è disponibile per
evitare sovrapposizioni di modifiche da parte di persone diverse, i file Check in invece sono
editabili.

Premendo Next vedremo un rapporto delle impostazioni del sito ed infine premendo Done il sito
verrà creato e così pure la relativa cartella che sarà visibile nel pannello Site.

Cliccando sul pulsante Expande/Collapse, l'ultimo a destra sul pannello Site
, si apre la finestra del
sito divisa in due aree, sulla destra visualizziamo i files e le cartelle del sito come appaiono nel
panello documenti, sulla sinistra la mappa del sito.

È anche possibile creare dei collegamenti tra le pagine puntando sulla relativa icona accanto al file e
trascinando il mouse fino al file che si vuole collegare.
Quando siamo connessi al sito remoto, sulla sinistra potremo visualizzarne i file e le cartelle come
nei programmi FTP.
Nella finestra del sito è possibile ordinare i file per data ultima modifica, tipo, dimensione, ecc.

Quando siamo in visualizzazione finestra del sito, a parte i pulsanti che consentono di visualizzare
su un lato alternativamente il sito remoto o la mappa del sito, troviamo anche il pulsante di FTP
Log che apre il pannello di visualizzazione dei Log FTP nella parte inferiore dell'area di lavoro
all'interno del gruppo Results.
Gli altri pulsanti, che troviamo pure sul pannello Site, sono il pulsante di collegamento al sito
remoto ed il pulsante di Refresh; i pulsanti Get File e Put File,
che servono rispettivamente per
downloadare e uploadare i file, se selezioniamo uno o più file ci viene richiesto se vogliamo
uploadare o downloadare anche i files dipendenti, ad esempio i files di immagini,

se invece si clicca direttamente sul pulsante ci viene richiesta conferma se si vuole procedere al
trasferimento dell'intero sito.
Gli altri pulsanti sono Check in e Check out, attivi solo quando si lavora in locale ed il pulsante
Expande/Collapse.
È possibile fare un controllo dei link del sito sia dal menu:
File >> Check Page >> Check Links,
sia dal menu del pannello Site: Check Links >> Sitewide... sia - a livello di singolo file - col click
destro del mouse, il risultato del controllo dei link verrà visualizzato nel pannello Link Checker del
gruppo Reports, in questo modo possiamo controllare i link interrotti, i link esterni ed gli
Orphaned Files,
ovvero quei file che appaiono isolati e non collegati ad altri, dunque estranei alla
struttura del sito.
Avvertenza: qualora non si utilizzino dei collegamenti HTML, ma JavaScript o con scripting
server side, eliminare questi files richiede una certa cautela, perché alcuni files potrebbero risultare
non collegati, quando invece lo sono.

Creare un sito: la funzione syncronize
Dal menu del pannello Site è possibile accedere alle funzioni di sincronizzazione Syncronize...
ovvero Dreamweaver controlla qual è il più recente tra i medesimi files presenti sia nel sito remoto,
sia in quello locale e ne consente l'aggiornamento.
Nello stesso modo si accede alla nuova funzionalità Cloacking,
che consente di escludere files o
cartelle da alcune operazioni relative al sito, ed esempio s'immagini di aver aggiornato tutti i file di
un sito meno quelli appartenenti alla cartella delle immagini con questa funzione è possibile
uploadare l'intero sito escludendo la cartella delle immagini.
E' da notare come rinominando una cartella Dreamweaver chiede se si vogliono aggiornare i
collegamenti dei vari files che puntano a quella cartella.
Infine possiamo aprire dal pannello Site tutti i tipi di file con il relativo programma associato, come
se ci trovassimo in Esplora risorse di Windows, ma quei file per i quali abbiamo definito un editor
predefinito per Dreaweaver MX, dal menù:
Edit >> Preferences... >> Files Types/Editors
con un doppio click del mouse verranno aperti da quel programma, indifferentemente da quale è
stato invece scelto come programma associato per il sistema operativo. Ad esempio per aprire i file
di immagine si può avere come programma predefinio ACDSee, un browser di immagini, ma

cliccando sugli stessi, dal pannello Site, essi verranno aperti direttamente da Fireworks, se lo si è
scelto come editor di immagini predefinito per Dreamweaver.
Invece i files per i quali Dreamweaver è l'editor predefinito, come si vede nella videata del Default
Editor in fase di installazione, con un doppio click verrano aperti da Dreamweaver MX, mentre col
tasto destro del mouse il menù contestuale presenta, alla voce Open With,
come programma per
aprirli l'editor predefinito di sistema, ad esempio i CSS con TopStyle.
E' anche possibile scegliere di aprire qualsiasi tipo di file con un altro programma, cliccando sul
sottomenù Browse...
Definire i tag
Probabilmente la prima cosa che sarà necessario fare quando si realizza una pagina web è impostare
le sue proprietà inserendo o modificando i tag nidificati all'interno del tag e gli attributi del
tag .

Dreamweaver consente di modificare anche il contenuto del tag head in modo visuale.
Per modificare il titolo possiamo utilizzare due metodi o dalla finestra di dialogo delle proprietà di
pagina, di cui parlemo più avanti, oppure digitando il titolo dalla pagina nel campo Title: della
Toolbar Document.
tramite alcune estensioni di Dreamweaver è possibile gestire il tag in modo più avanzato.
L'estensione AutoTitle Untitled Documents, rinomina automaticamentei titoli delle pagine, col
nome del file senza l'estensione. Funziona solo se non si è provveduto a dare un nome alla pagina,
in modo che, piuttosto che salvare una pagina con Untitled Document come titolo, essa avrà come
titolo il nome del file, che in genere è più significativo.
Modify page title consente, selezionando un documento dal pannello Site, di cambiarne il titolo
direttamente dal menù contestuale (tasto destro del mouse) senza bisogno di aprire la pagina
modificare il titolo e salvarla.
Set Page Title consente di invece di inserire o cambiare il titolo ad una o più pagine o addirittura
alle pagine del'intero sito. Come tutte le estensioni che consentono modifiche su più pagine o
sull'intero sito è necessario che le pagine su cui applicare le modifiche siano state preventivamente
salvate.
Dal pannello Head del gruppo Insert è possibile inserire gli altri tag nidificati all'interno del tag
. In questo pannello troviamo i pulsanti per inserire i meta tag ed i pulsanti per inserire il tag
ed il tag , quest'ultimo serve per creare collegamenti a file esterni, ad esempio
JavaScript e CSS.
Particolarmente comodi appaiono i pulsanti Keywords e Description.
Il primo serve per inserire le parole chiave, con le quali la pagina viene indicizzata dai motori di
ricerca.

Il meta Description serve per inserire una breve descrizione del contenuto della pagina, anch'esso
utile ai motori di ricerca.
Avvertenza:
sebbene utili per una parte dei motori di ricerca questi ed altri meta tag, come ad
esempio il meta Robots, non esauriscono la lista degli accorgimenti da utilizzare per agevolare il
lavoro dei motori di ricerca. Infatti molti di essi tengono in conto anche altri elementi, quali:
• il titolo della pagina;
• l'url;
• il testo alternativo per le immagini;
• i titoli inseriti nel contenuto della pagina;
• il contenuto effettivo della pagina.
Per una più dettagliata rassegna di su questo genere di accorgimenti si legga l'articolo dedicato a
questo argomento nella sezione Pro.
I Metatag
Molte sono le estensioni che consentono di aggiungere metatag senza dover scrivere il codice a
mano, di tutte queste, tuttavia, quella che preferisco è Meta Manager, che oltre ad aggiungere alcuni
tag non presenti in Dreamweaver, tra i quali il summenzionato meta Robots, permette di aggiungere
anche i meta ed i meta Keywords e Description ad una, più pagine o addirittura alle pagine
del'intero sito, inoltre è possibile salvare profili di meta personalizzati, pronti per essere inseriti,
recuperabili da un comodo menù a discesa.
Abbiamo visto nel capitolo 5 come creare degli Snippets personalizzati e nell'esempio illustrato, è
stato creato uno snippet che inserisce due e meta: imagetoolbar e MSSmartTagsPreventParsing, il
primo, che impedisce la visualizzazione della Image Toolbar di IE

quando il mouse punta su un'immagine ed il secondo che evita che nella pagina siano visualizzati
gli Smart Tags di Microsoft, che sfuggono al controllo dell'autore della pagina. Personalmente li
inserisco sempre, trovando sgradevole l'effetto grafico della image toolbar sulle immagini ed il
controllo di terze parti del contenuto della stessa.
Il tage
Un altro tag, che si può inserire dal pannello Head di Dreamweaver, è , questo tag determina
un collegamento di base per la pagina. È utile nel caso si volessero inserire nella pagina
collegamenti relativi a siti esterni, oppure, qualora volessimo aprire tutti i collegamenti della pagina
in un'altra finestra del browser, o nel caso di pagina con frames stabilire un frame di destinazione
comune, in questi casi non sarà dunque necessario specificare il target a livello di singolo link. Per
comprendere meglio il significato di questo tag si legga il capitolo relativo ai link e quello sui
frameset. È comunque possibile specificare, per i singoli link della pagina, valori differenti da quelli
di base, specificando il target a livello di singolo link oppure inserento un link assoluto diverso da
quello relativo di base
Come si accennava Dreamweaver consente il controllo visuale anche degli elementi del tag head. Il
cui unico elemento visualizzato dai browser è il tag . Infatti quando la voce Head Content è
spuntata nel menu a discesa View Options della Toolbar Document gli elementi del tag head
verranno visualizzati come icone nell'area riservata ad Head Content.
È così possibile selezionare, puntando il mouse sui singoli elementi, vederne ed editarne le proprietà
nel pannello Property, cambiarne l'ordine con un semplice "Drag and Drop" ed eliminare gli
elementi selzionati col tasto Canc, il tutto in modalità Design View. È tuttavia possibile selezionare
un solo elemento alla volta.

Definire i tag
Passiamo adesso a descrivere gli attributi del tag .
Come si diceva nel capitolo sulle novità di Dreamweaver MX adesso di default il programma apre
una pagina con il tag body senza attributi, questo perchè si preferisce delegare ai CSS la definizione
di quegli attributi che determinano il layout delle pagine.
Sebbene più avanti tratteremo in dettaglio l'utilizzo dei CSS, in questo capitolo ed in quelli
successivi vedremo come inserire degli attributi dell'html che determinano gli aspetti visivi della
pagina, così dovrebbe essere più facile, acquisita confidenza con tali attributi, comprendere
l'utilizzo dei CSS.
Possiamo accedere al controllo delle proprietà della pagina in due modi, dal menu: Modify >> Page
Properties...
oppure col menu contestuale, tasto destro del mouse sulla pagina.
In entrambi i casi verrà visualizzata la finestra di dialogo Page Properties.

Si noti come, sebbene il tag sia nidificato all'interno di , esso è modificabile anche
da questa finestra di dialogo, che per il resto gestisce gli attributi del tag body.
È possibile inserire nella pagina sia un'immagine di sfondo, sia un colore di sfondo. Nel primo caso,
cliccando sul pulsante Browse... potremo navigare al'interno del nostro disco e scegliere l'immagine
di sfondo da inserire. Altrimenti utilizzando cliccando sul selettore dei colori di Dreamweaver
scegliere un colore di sfondo.
Dreamweaver, quando ancora non si è scelto un colore, ci fa visualizzare il selettore settato sul
colore #CCCCCC - espresso in termini esadecimali (HEX) - tuttavia se non selezioniamo
esplicitamente tale colore, esso rappresenterà i colori di default del browser, che, se non settato
diversamente da chi visita le pagine avrà il colore di sfondo delle pagine bianco ed il testo in nero
(almeno per i browsers delle ultime generazioni).
Per impostazione predefinita Dreamweaver fa visualizzare la "palette" dei colori come cubi distinti
del tipo cosiddetto Web Safe, essi sono 216 colori visualizzabili nel medesimo modo da tutti i
browsers, sia su piattaforma Windows, sia su piattaforma Macintosh. Un'altra caratteristica dei
colori Web Safe è che le coppie di valori esadecimali dei tre colori (rosso, giallo, blu) assumono
ciascuna il medesimo valore.

Per il testo della pagina è possibile impostare sia il suo colore, sia i colori che devono assumere i
link testuali nello stato normale, link vistato e link attivo - nel momento in cui si preme il link con il
mouse, vale la pena di specificare che se non si seleziona un colore diverso da quello di default i
browsers faranno visualizzare il testo in nero #000000, il link in blu #0000FF, il link visitato in
viola #800090 su IE ed orchidea #551A8B in NN ed il link attivo in violetta #800080 su IE ed in
rosso # FF0000 su NN.
È possibile settare i margini sinistro e superiore della pagina digitando un valore numerico (in pixel)
se non si inserisce un valore i vari browser inseriranno uno spazio, differente da brower a browser,
di circa di 10px in alto e a sinistra.
Per compatibilità tra i vari browsers è necessario specificare, qualora si volesse inserire un valore
personalizzato per i margini della pagina,
una doppia coppia di tali valori, infatti gli attributi
marginwidth e marginheight sono utilizzati da Netscape ed Opera, mentre leftmargin e topmargin
sono utilizzati da Internet Explorer.
Di default tra le proprietà della pagina è selezionato il set di caratteri Western (Latin 1) che va bene
per i siti in inglese, in italiano e per la grande maggioranza delle pagine.
Si può infine utilizzare un'immagine di ricalco per la costruzione della pagina cliccando il pulsante
Browse del campo tracing Image: e se ne può stabilire la trasparenza, tramite il selettore Image
transparency: , tale immagine non apparirà sui browsers, serve solo a scopo interno per costruire la
pagina.
L'utilizzo tipico è quando si crea un'interfaccia per la pagina con un programma grafico che non
consente l'esportazione dell'HTML oppure si preferisce lasciare scrivere l'HTML da Dreamweaver,
che comunque genera un HTML più efficiente di quello di qualsiasi programma grafico. Di
conseguenza avendo l'immagine di ricalco a disposizione si possono più facilmente impostare gli
elementi della pagina, come ad esempio le tabelle e poi inserire le slice dell'immagine, senza
bisogno di importare l'HTML del programma grafico.
Tuttavia con Fireworks si puo utilizzare il comando Fireworks HTML accessibile dal pannello
Common del gruppo Insert,
che importa la grafica e la pagina HTML generata da Fireworks.
Con Image Ready, il programma della Adobe integrato in Photoshop, invece si può utilizzare
l'estensione di Massimo Foti Image Ready HTML, scaricabile (307 Kb) dal sito Lynda.com
cliccando sui link dei files compressi di Insert ImageReady HTML, insieme ad un file PDF
contenente l'help per l'estensione. Le schermate relative a Dreamweaver si riferiscono alla versione
3 ma l'help conserva la sua sostanziale validità.

Una volta scaricata ed installata, anche questa estensione è accessibile dal pannello Common del
gruppo Insert.
Avvertenza: questa estensione funziona fino alla versione 3 di Image Ready ovvero quella
integrata in Photoshop 6. Poiché il codice HTML di Image Ready 7, integrato nel nuovo
Photoshop 7, è cambiato l'estensione non funziona: non converte i Rollover, anzi vengono
danneggiati ed il resto del codice rimane praticamente invariato.
Inserimento, modifica e posizionamento delle immagini
Come si è finora visto Dreamweaver consente di effettuare la medesima azione in svariati modi,
anche l'inserimento delle immagini non fa eccezione.
È infatti possibile - in modalità - Design View,
inserire un immagine
posizionandosi nel punto desiderato della pagina e dal menu:
• Insert >> Image, navigare all'interno del computer e selezionare l'immagine desiderata;
• dal pannello Common del gruppo Insert, premendo il pulsante Image, navigare all'interno
del computer e selezionare l'immagine desiderata;
• con la combinazione di tasti Ctrl+Alt+I e navigare all'interno del computer e selezionare
l'immagine desiderata;

• dal pannello Site del gruppo File, trascinando col Drag and Drop l'immagine prescelta nella
pagina, essa verrà posizionata nel punto in cui si trova il cursore. È possibile selezionare un
immagine sia del sito locale, sia navigando all'interno del computer con l'Esplora risorse
integrato nel pannello Site;
• sempre nel gruppo di pannelli File dal pannello Assets, cliccando sull'icona delle immagini
presenti nel sito verranno visualizzate tutte immagini contenute nel sito locale, è dunque
possibile selezionarne una e premere il tasto Insert.

Oppure col click destro del mouse - sul file dell'immagine o sulla sua anteprima -
selezionare l'opzione Insert;
• è anche possibile trascinare l'immagine nella pagina col Drag and Drop, con entrambi i
metodi che accedono all'immagine dal pannello Assets l'immagine verrà posizionata dove si
trova il cursore.
Avvertenze: il doppio click sul file dell'immagine nel pannello Site o nel pannello Assets o sulla
sua anteprima nel pannello Assets lancia l'editor delle immagini predefinito. Dunque questo non è
un metodo per inserire le immagini, ma per modificarle.
Se si inserisce un'immagine in modalità Code View dal panello Common non verrano inseriti gli
attributi dei dimensione dell'immagine.
Se un'immagine viene inserita in una pagina non ancora salvata all'interno del sito locale,
Dreamweaver mostra una finestra che avverte che per scrivere un percorso relativo al documento il
documento stesso deve essere salvato,

infatti la sintassi che si troverà nel codice sarà di questo tipo:
ovvero con un percorso assoluto riferito al disco dove si trova l'immagine. Una volta salvata la
pagina il codice verrà automaticamente trasformato in
ovvero il percorso relativo al documento salvato.
Come si vede nella finestra di dialogo - che permette di selezionare l'immagine desiderata -
mostrata con i primi tre metodi di inserimento di un immagine è possibile scegliere se il percorso
deve essere relativo al documento oppure al Site Root.
Se si sceglie la seconda opzione Dreamweaver scriverà direttamente un percorso relativo alla
cartella principale del sito, di questo tipo
e non farà visualizzare la summenzionata finestra di avvertimento relativa al percorso del file
d'immagine, nonostante la pagina sia ancora da salvare.
È anche possibile inserire un'immagine esterna al sito locale. In questo caso se la pagina è già stata
salvata all'interno del sito e si è scelta l'opzione Relative To: Document oppure, con la pagina
ancora non salvata, e l'opzione Relative To: Site Root selezionata, visualizzeremo un messaggio
che ci avverte che il file dell'immagine si trova al di fuori del sito, qual è la cartella principale del
sito e se vogliamo copiare il file all'interno del sito.

Cliccando Si potremo scegliere in quale cartella del sito locale copiare l'immagine.
Questo perché il percorso HTML relativo all'immagine esterna al sito potrebbe funzionare nel
nostro computer, consentendoci di visualizzarla correttamente, ma una volta pubblicato il sito sul
web essa non sarebbe visibile.
Nella finestra di dialogo che consente di navigare all'interno del nostro disco, di default, è
selezionata l'opzione Select File Name From: File system, se invece, in un sito che utilizza una
tecnologia server side, viene spuntata l'opzione Data Sources ai file verrà attribuito il nome
dinamicamente da una tabella del database.

Una volta che l'immagine è inserita nella pagina e selezionata possiamo controllarne le proprietà dal
pannello Property.
Dreamweaver inserisce, come attributi dell'immagine, il percorso relativo al file e le dimensioni
width: larghezza e height: altezza. Queste dimensioni corrispondono alle dimensioni originali del
file, ma è possibile modificare tali attributi dando all'immagine dimensioni differenti rispetto a
quelle originarie.
È possibile modificare le dimensioni dell'immagine nel documento dalle maniglie di
ridimensionamento sui bordi dell'immagine. Per ridimensionare un immagine, bloccandone le
proporzioni, è necessario utilizzare la maniglia diagonale, posta sull'angolo dell'immagine, tenendo
contemporaneamente pressato il tasto Maiuscolo.

Tuttavia le dimensioni del file ed il suo peso in Kb rimarranno invariati, inoltre, poiché gli algoritmi
di ridimensionamento delle immagini dei browser non sono sofisticati il risultato potrebbe essere
deludente. In ogni caso se si rimpicciolisce un'immagine dagli attributi HTML width e height si
costringe i visitatori delle pagina a caricare byte superflui, in quanto un immagine più piccola pesa
meno Kb, mentre se la si ingrandisce si perde in qualità rendendo più visibili i pixel. Dunque è
sempre meglio ridimensionare il file piuttosto che gli attributi HTML, lasciando in questi le
dimensioni originali.
Uno dei modi per modificare, l'immagine è premere il pulsante Edit sul pannello Property,
gli altri
sono
• il doppio click sul file nel pannello Site
• il doppio click sul file o sulla sua anteprima nel pannello Assets
• selezionare l'immagine nel documento e dalle opzioni, visualizzate col tasto destro del
mouse, scegliere Edit With Fireworks (o con qualsiasi altro programma è stato definito del
menu Edit >>Preferences... come editor principale) oppure Edit With e selezionare o
scegliere un programma per la manipolazione delle immagini.

Il pulsante Reset size, accanto a quello Edit nel pannello Property, serve invece a ripristinare, come
attributi HTML dell'immagine, le dimensioni originali del file, sia quando questi mancano, sia
quando sono differenti dall'altezza e larghezza del file, in questo caso le dimensioni visualizzate nel
pannello Property appariranno in grassetto.

Specificare le dimensioni della immagine permette, in genere, ai browsers di caricare più
rapidamente la pagina e mostrare più velocemente il contenuto testuale. Infatti il browser, in questo
modo, sarà in grado di conoscere le dimensioni dell'immagine ancora prima di aver finito di
scaricarla. Quindi sarà in grado di attribuire all'immagine il giusto spazio e posizionare gli altri
elementi della pagina di conseguenza.
Sempre dal pannello Property è possibile aggiungere e controllare il nome dell'immagine. Una
novità di Dreamweaver MX è che aggiungendo nel relativo campo il nome verrà anche aggiunto
l'id, questo per una maggiore aderenza agli standard, in particolare XHTML richiede che per gli
elementi di una pagina sia specificato al posto dell'attributo name l'attributo id, magari in
associazione con name per garantire la retrocompatibilità con i browser più vecchi.
Dal pannello Property è possibile inserire nel campo Alt il testo alternativo per le immagini, utile
per gli standard di accessibilità, inoltre, quando il mouse punta sull'immagine, esso farà visualizzare
il testo alternativo in un riquadro giallino accanto al mouse, che, tra l'altro, può essere un utile
sostituto delle didascalie.
Riempiendo il campo Link si trasforma l'immagine in un collegamento ipertestuale. È possibile
inserire un link:
• scrivendo il collegamento direttamente nel campo;

• cliccando sull'icona cartella, navigare all'interno del computer e selezionare il documento o
il file da linkare;
• cliccando sull'icona puntatore
Site.
e trascindo il mouse fino ad un documento del pannello
Nella parte inferiore (a scomparsa) del pannello Property è possibile scegliere altre opzioni.
Possiamo stabilire un Target per il link dal relativo menu a discesa.
Nel campo border possiamo inserire la dimensione del bordo (in pixel) dell'immagine.
Nei campi HSpace e VSpace si può inserire la distanza orizzontale e verticale dagli altri elementi
della pagina.
Cliccando i pulsanti allinea a destra allinea a sinistra o allinea al centro l'immagine verrà allineata di
conseguenza ed il tag img nidificato all'interno del tag o o di un'altro elemento blocklevel.
È possibile inserire un'immagine in versione più leggera (riducendone dimensioni, risoluzione,
numero di colori, sfuocandola, utilizzando una scala di grigi). Tale immagine viene richiamata,
prima che venga caricato il file più grande, per mezzo dell'attributo lowsrc e poi sostituita
dall'immagine di migliore qualità. L'mmagine lowsrc è inseribile come le immagini normali
dall'apposito campo Low src posto nella parte inferiore del pannello Property.
Tuttavia quando in un sito locale abbiamo salvato anche le immagini sorgenti PNG di Fireworks,
visualizzeremo nell'icona dell'immagine - in alto a sinistra nel pannello Property - con il logo di
Fireworks e sulla sinistra del campo riservato a Low src sarà visbile un'icona di Fireworks e nel
campo il percorso al file sorgente PNG. In questo caso cliccando sul pulsante Edit verrà aperto per
le modifiche direttamente il file sorgente.
Un immagine può essere affiancata a del testo, le opzioni per il controllo degli attributi relativi
all'affiancamento del testo all'immagine sono controllabili dal menu a discesa align sulla destra
della parte inferiore (a scomparsa) del pannello Property.

Le opzioni di allineamento sono:
• Default (generalmente allinea l'immagine come l'attributo baseline);
• Baseline (base dell'immagine allineata con la base del testo);
• Top (parte superiore dell'immagine allineata all'oggetto più alto);
• Middle (il centro dell'immagine allineata con la base del testo);
• Text Top (parte superiore dell'immagine allineata alla lettera più alta);
• Absolute Middle (il centro dell'immagine allineata con centro del testo);
• Absolute Bottom (base dell'immagine allineata alle lettere più basse, ad esempio p, g, y);
• Left (immagine a sinistra e testo a destra in alto);
• Right (immagine a destra e testo al sinistra in alto).
Immagini segnaposto, mappe immagine, filetto orizzontale
Una novità di Dreamweaver MX è la possibilità di inserire delle immagini segnaposto che servono
per ottimizzare il flusso di lavoro in fase di realizzazione del layout della pagina.
Per inserire delle immagini segnaposto si può accedere dal menu:
• Insert >> Image Placeholder,
• oppure dal pannello Common e scegliere Image Placeholder.

Viene visualizzata una finestra di dialogo dove inserire il nome, le dimensioni, il colore ed il
testo alternativo per l'immagine segnaposto.
Alcune opzioni di controllo su queste immagini virtuali sono disattivate nel pannello Property,
sebbene sia sempre possibile inserire tali attributi manualmente in modalità Code View.
Mappe Immagine
Dreamweaver consente di creare punti attivi all'interno delle immagini: le cosiddette mappe
immagine, dove inserire dei link o comportamenti JavaScript. Gli strumenti per disegnare le mappe
immagine sono il rettangolo, l'ellisse ed il poligono. Selezionato il tipo di strumento è sufficiente
disegnare l'area attiva sull'immagine. Con lo strumento poligono è sufficiente inserire 3 punti in
un'immagine e l'area verrà creata automaticamente all'interno dei tre punti. Con lo strumento
rettangolo e con quello ovale ancora più semplicemente basta determinare un vertice dell'area da
ricoprire con la mappa immagine e spostare il mouse in diagonale fino al punto desiderato. Quando
si utilizza lo strumento rettangolo, cliccando contemporaneamente il tasto Maiuscolo viene
disegnato un quadrato
Avvertenza:
sebbene si chiami ellisse, questo strumento è in grado di disegnare solo cerchi.

Creati i punti attivi sull'immagine è sufficiente cliccare sulla freccia accanto alle forme delle mappe
immagine nel panello Property e selezionare con il mouse l'immagine per tornare alle proprietà
dell'immagine. Puntando col mouse sulla mappa immagine potremo accedere nuovamente al
pannello Property della stessa e ridimensionarla (o modificarla nel caso del poligono) attraverso le
maniglie contrassegnate da dei quadratini sui bordi, cliccando all'esterno si visualizzano
nuovamente le proprietà dell'immagine. È anche possibile spostare di un pixel alla volta l'area attiva
con i tasti Freccia, o di 5 pixel per volta con la combinazione Maiuscolo+Freccia.
Filetto orizzontale
Il tag inserisce una riga orizzontale e sebbene non faccia ricorso ad un'immagine, l'effetto è
simile.
Si può inserire dal menu:
• Insert >> Horizontal Rule
• oppure premendo l'apposito pulsante del pannello
Common
Dal pannello Property è possibile controllarne gli attributi: id, larghezza in px o %, altezza,
allineamento ed ombreggiatura, non è supportato l'attributo colore, proprietario di Microsoft e
visualizzabile con IE 4 e superiore.
Tuttavia si può sempre inserre in modalità Code View, ad esempio con lo strumento Code Hint.
Inserimento dei link
E' possibile applicare un collegamento ipertestuale direttamente a del testo, ad un'immagine o ad

una sua parte, ovvero ad una mappa immagine. Per cui, essendo a questo punto chiare sia la
gestione del testo, sia quella delle immagini, risulta più semplice comprendere l'inserimento dei
collegamenti usando Dreamweaver.
Si noti come sia sul testo;
sia sulle immagini. Si noti come Dreamweaver, quando l'immagine è un link, inserisce
automaticamente nel campo border il valore zero. Questo perché, mentre il bordo di un
immagine normale, se non specificato, assume come valore di default 0, se l'immagine è un link
di default viene contornata da un bordo che ha gli stessi colori dei link testuali, ovvero quelli
impostati con le proprietà di pagina. se tuttavia si vuole che l'immagine link sia contornata dal
bordo, ovviamente è sempre possibile eliminare il valore zero dal campo border;
sia sulle mappe immagine
Dreamweaver, nella parte superiore del pannello Property, mostra un campo: Link dove inserire
il collegamento.
Il link può essere direttamente digitato nel campo omonimo oppure si può cliccare sull'icona
cartella - navigare nel disco - e selezionare il file da associare al documento.

E' anche possibile, una volta selezionato l'elemento della pagina da linkare, trascinare l'icona
puntatore su un file del pannello Site.
Quando si crea un link, Dreamweaver si comporta in modo analogo all'inserimento delle
immagini ovvero:
• avverte, se la pagina non è stata ancora salvata, che il collegamento viene creato con un
percorso assoluto riferito al disco dove si trova il documento da linkare, per poi
trasformarlo in relativo una volta che la pagina è salvata;
• se il file da linkare è esterno al sito locale ci verrà richiesto se vogliamo copiarlo nel sito
locale;

• si può creare un collegamento non solo relativo al documento, ma anche alla cartella
principale del sito;
• in un sito che utilizza una tecnologia server side, è possibile selezionare l'opzione Data
Sources,
così al file da collegare verrà attribuito il nome dinamicamente da una tabella del
database.
Per un approfondimento di quanto detto sopra si confronti l'apposita sezione del capitolo
sull'inserimento delle immagini, viste le forti analogie.
Quanto finora esposto si riferisce ai cosiddetti collegamenti relativi. Ad esempio un collegamento
del tipo portofolio/sito_1/index.htm sta a significare che ho creato, all'interno del sito
http://my_site.com, un collegamento al file index.htm che si trova nella sotto-sottocartella
portofolio/sito_1/, dunque il collegamento assoluto, in questo caso, si potrebbe esprimere in
questo modo http://my_site.com/portofolio/sito_1/index.htm.
Normalmente i collegamenti relativi si utilizzano all'interno del proprio sito e quelli assoluti per
risorse esterne al sito. Tuttavia, qualora si imposti in una pagina come base target l'URL di un
altro sito, è possibile usare dei collegamenti relativi a pagine interne dell'altro sito. Ad esempio se
utilizza come base target di una pagina http://www.macromedia.com/ per scrivere il
collegamento alla pagina interna http://www.macromedia.com/it/software/dreamweaver/, sarà
sufficiente scrivere nel campo Link del pannello Property it/software/dreamweaver/.
Avvertenza: in questo caso anche le immagini faranno riferimento a quel sito esterno, per cui
non è consigliabile questo uso di base target, a meno che non si sappia esattamente cosa si sta
facendo.
Una volta inserito un link nel pannello Property, il menù a discesa Target diventa attivo e
propone i seguenti target: _blank, _parent, _self e _top, più i vari nomi dei frames, nel caso di
una pagina con frames. Il significato dei target _parent e _top verrà illustrato nel capitolo sui
frame, il target _self è il comportamento predefinito delle finestre del browser, ovvero l'apertura
di una nuova pagina all'interno della stessa finestra, per cui al di fuori del contesto di un frameset,
in genere, non ha significato. Il target _blank apre il collegamento in una nuova finestra,
lasciando aperta sullo sfondo la finestra che ha aperto collegamento. Si può indicare come base
target di una pagina il target _blank quando si vuole che i collegamenti di quella pagina si
aprano, per impostazione predefinita, in un'altra finestra del browser. In questo caso nei singoli
link non sarà necessario specificare il target _blank, definito a livello di pagina. Tuttavia se si
vuole aprire qualche link nella stessa finestra del browser, bisognerà, in questo caso, specificare il
target _self, anche se non si lavora con i frames, inoltre poiché Dreamweaver inserisce di default
l'attributo href bisogna comunque specificare l'URL del sito, oppure cancellare questo attributo da

Code View, se si vuole verificare sul proprio PC questo tipo di link.
Gli esempi finora illustrati riguardano l'apertura di pagine web, ma è possibile utlizzare i link per
fare scaricare dei files, la procedura è piuttosto semplice, nella gran parte dei casi basterà
comprimere un file in formato zip e creare un collegamento a quel file di questo tipo mio_file.zip
nel caso di collegamenti relativi, oppure http://my_site.com/mio_file.zip nel caso di
collegamenti assoluti.
Link a FTP, E-Mail e Newsgroup
Oltre ad Http, i metodi per collegarsi ai server remoti possono essere di altro tipo: File transfert
Protocol, Gopher, Mailto, News, Telnet.
Vediamo degli esempi di quelli più frequentemente utilizzati.
Il File transfert Protocol (FTP) è normalmente utilizzato per caricare e scaricare i files del nostro
sito sul server remoto, in pratica per pubblicare il nostro sito, ovviamente in questo caso è richiesto
un nome utente ed una password. Si è visto nel capitolo sulla definizione dei siti come
Dreamweaver abbia un programma FTP integrato. Tuttavia il protocollo FTP può essere usato per
aprire finestre del browser e consentire di scaricare dei file, in questo caso, l'accesso FTP può
essere, anche anonimo. Ad esempio per scaricare le varie versioni del browser Mozilla possiamo
creare un collegamento di questo tipo ftp://ftp.mozilla.org/pub/mozilla/releases/, l'utente che clicca
su questo genere di link vedrà aprirsi una finestra del browser in cui sono contenute cartelle o files,
cliccando su uno dei file eseguibili si attiverà lo scaricamento.

Il metodo Mailto consente di creare un link che apre il programma di posta elettronica dell'utente
con il campo del destinatario già compilato, dunque se si vuole essere contattati dai visitatori del
sito, basterà creare un link, sempre su testo o su immagine, di questo tipo
mailto:info@my_site.com. Dreamweaver offre la possibilità di creare questo tipo di link in modo
visuale. E' infatti sufficiente cliccare sul pulsante Email Link del pannello Common, oppure dal
menù:
Insert >> Email Link
una finestra di dialogo richiederà di inserire il testo del link e l'indirizzo email (senza mailto:) e nel
punto del documento dove è posizionato il cursore verrà visualizzato il testo, con il link alla email
che si sono inseriti nella finestra di dialogo.
E' possibile specificare oltre al destinatario principale, anche quelli CC e BCC, l'oggetto ed il
contenuto del corpo del messaggio: Scrivendo il link email in questo modo:
mailto:info@my_site.com?Subject=Richiesta
informazioni&CC=amministrazione@my_site.com&BCC=webmaster@my_site.com si specificano
il
• destinatario principale: info@my_site.com,
• l'oggetto: Richiesta informazioni,
• il destinatario CC: amministrazione@my_site.com
• ed il destinatario BCC: webmaster@my_site.com.
E' possibile creare questi link email complessi con delle estensioni. Una di queste estensioni:
Advanced Email è un oggetto che viene inserito nel pannello Common,
cliccando sul relativo pulsante è sufficiente riempire i vari campi per ottenere visualmente un link
del tipo sopra illustrato senza dover scrivere una riga di codice.

Un altro tipo di link frequentemente utilizzato è quello ai server delle news. Immaginiamo di voler
creare un link al Newsgroup ufficiale di Macromedia Italy, nel campo Link sarà sufficiente scrivere
l'indirizzo del newsgroup preceduto da news://, ad esempio:
news://forums.macromedia.com/macromedia.general.italy.
Una funzionalità simile al pulsante Email Link, introdotta da Dreaweaver MX, è la possibilità
inserire un link, nel punto della pagina dove si trova il cursore, cliccando il pulsante Hyperlink del
pannello Common.
Una finestra di dialogo richiede il testo da inserire, il link - in questo caso bisogna specificare
sempre il metodo: ftp://, http://, malto:, news://, oppure, cliccando sull'icona cartella, navigare nel
proprio disco e scegliere il file da linkare - e l'eventuale target. Inoltre questa finestra di dialogo
consente di inserire un ordine per il tasto Tab. Col tasto Tab è possibile spostarsi da un link ad un
altro ed è usato principalmente per motivi di accessibilità. Se, ad esempio, stabiliamo per un
collegamento come ordine 1, quel link sarà il primo ad essere accessibile dal tasto Tab,
indipendentemente dalla sua posizione nelle pagina. E' anche possibile inserire un titolo per il link
analogo al testo alternativo per le immagini,

tuttavia il titolo per i link non è visualizzato da NN4.X e dai browser di terza generazione ed
inferiori. Infine è possibile associare una scorciatoia da tastiera per aprire il link, digitando una
lettera nell'apposito campo, la scorciatoia viene attivata dalla combinazione dei tasti CtrL+ il tasto
prescelto.
Come si è visto nel capitolo sull'impostazione delle proprietà della pagina, i link assumono tre
colori diversi da quelli del testo: un colore predefinito, uno del link attivo - quando viene cliccato -
ed uno per i link visitati. E' possibile cambiare i colori predefiniti dei browser dalla finestra di
dialogo delle proprietà di pagina.
Un link può essere indirizzato anche ad un punto preciso del documento, in questo caso è necessario
inserire un ancoraggio in quel punto della pagina ed il collegamento, preceduto dal simbolo #, va
fatto a quell'ancoraggio. Immaginiamo di volere inserire un collegamento che consenta di tornare
rapidamente dal fondo di una pagina lunga al suo inizio. Posizionandosi ad inizio pagina, si clicca
sul pulsante Named Anchor del pannello Common
e si inserisce il nome dell'ancora nella relativa finestra di dialogo, es: inizio_pagina.
Inserito così l'ancoraggio, si crea il link in fondo alla pagina, digitando nel campo Link del pannello
Property #inizio_pagina. Cliccando questo link verremo portati all'inizio della pagina. E' anche

possibile linkare un punto preciso di un'altra pagina facendo seguire al link della pagina
l'ancoraggio, ed esempio: pagina_con_ancoraggio.htm#ancoraggio_5. Gli ancoraggi sono
contrassegnati con un simbolo visibile, purché dal pulsante View Options della Toolbar
Document non si sia selezionato Hide All Visual Aids.
Infine è da notare che i browser che aderiscono agli standard del W3C (IE e Mozilla/Netscape 6 e
superiore) quando viene cliccato un link, sia esso testuale, sia di immagine, lasciano sul link un
bordo tratteggiato,
che ha la funzione di attivare la navigazione tra un link e l'altro con il tasto Tab, come sopra
accennato. Per evitare questo effetto antiestetico si possono usare dei JavaScript, però molti di
questi disabiliteranno la funzionalità Tab. E' tuttavia possibile scaricare MFX focus cleaner
un'estensione che, una volta installata e lanciata dal menù Commands,

aggiunge un JavaScript nella pagina che evita le linee tratteggiate sui link, lasciando, tuttavia,
intatte le funzionalità del tasto Tab e dunque di accessibilità della pagina.
Le tabelle: controllare le proprietà di una tabella
Le tabelle sono dei contenitori. Esse possono contenere dati tabellari, testo o immagini, per questi
motivi hanno rappresentato il principale elemento per disegnare il layout delle pagine quando il
supporto dei browser a CSS e layer era scarso o nullo. Adesso è più semplice utilizzare i CSS ed i
layer per impostare il layout delle pagine. Sebbene vi sia chi teorizza il non utilizzo delle tabelle
come elementi di layout in favore del CSS P, ovvero il posizionamento degli elementi di una pagina
unicamente per mezzo dei CSS ed in particolare dei layer, è bene precisare che finora, secondo gli
standard stabiliti dal W3C, le tabelle non sono né deprecate, né deprecato è il loro utilizzo come
strumenti per disegnare il layout di pagina.
Ovviamente avere più elementi a disposizione per determinare il layout della pagina: tabelle, layer e
CSS semplifica non di poco il lavoro e consente una maggiore flessibilità. Dunque un'efficiente
integrazione dei vari elementi HTML è probabilmente l'approccio più corretto ed anche di maggiore
buon senso.
In html la struttura base di una tabella è costituita dei tag ovvero tabella riga di tabella
e dato di tabella, ovvero cella, dunque il numero di colonne è implicitamente determinato dal
numero di celle presenti su una riga, come si vede in questo esempio di tabella formata da due righe
e due colonne:
contenuto
contenuto
contenuto
contenuto
Per inserire una tabella in una pagina si può cliccare sul menù:
Insert >> table
o cliccare sul pulsante Insert table nel pannello Common o trascinare, sempre da questo pulsante,
la tabella dentro la pagina.

In tutti e tre i casi Dreamweaver presenterà una finestra di dialogo con le proprietà della tabella nei
vari campi.
Tali proprietà possono essere modificate immediatamente dalla finestra di dialogo o
successivamente dal pannello Property.
La prima volta che si utilizza Dreamweaver, la finestra di
dialogo ci propone una tabella di 3 righe per 3 colonne larga il 75% della pagina con Cell Padding e
Cell Spacing non determinati - il che vuol dire 1px per il Cell Padding e 2px per il Cell Spacing - e
bordo impostato ad 1px, vedremo tra breve il significato degli attributi della tabella. Una volta
modificate le proprietà della tabelle dalla finestra di dialogo Dreamweaver ci proporrà al successivo
inserimento di una tabelle le ultime proprietà che avevamo impostato.
Il pulsante Insert table è presente in Dreameaver MX anche in due nuovi pannelli del gruppo
Insert: Layout che serve a passare alla cosiddetta Layout View ed il pannello tables.
Il controllo delle proprietà di una tabella e dei suoi elementi righe e colonne è Particolarmente
semplice in Dreamweaver utilizzando il pannello Property ed il Tag Selector.
Quest'ultimo ci
consente di selezionare una tabella o gli elementi in essa contenuti con estrema facilità.
Dal Pannello Property possiamo controllare e variare il numero di righe ed il numero di colonne
rispettivamente dei campi Rows e Cols, la sua larghezza dal menù a discesa width e la sua altezza
dal menù Height. Le dimensioni di una tabella possono essere impostate - sia in larghezza, sia in
altezza - in percentuale selezionando dal menù a discesa % oppure in pixel selezionando px.
In particolare, per la larghezza selezioneremo una misura in px quando vogliamo che la grandezza
sia predefinita, ovviamente purché non inferiore ad altri elementi di dimensione fissa contenuti al
suo interno, come per esempio immagini. La dimensione in percentuale, invece si basa su un'unità
di misura relativa, che cambia al variare delle dimensioni della finestra del browser. Per cui può
tornare molto utile quando, per mezzo delle tabelle, si voglia impostare un layout della pagina
"elastico", che si adatti automaticamente alle diverse risoluzioni dei monitor dei visitatori della
pagina. Infatti se impostiamo le dimensioni di una tabella al 75% essa occuperà sempre il 75% o

¾ della pagina qualsiasi risoluzione essa venga visualizzata; tuttavia come area della pagina si
intende quella a partire dal margine superiore e sinistro, pertanto se si vuole che una tabella occupi
effettivamente il 100% di una pagina, bisognerà impostarne i margini a 0 (vedi capitolo 9). Sebbene
una tabella di dimensioni percentuali non potrà, comunque, essere inferiore al suo contenuto - ad
esempio immagini - avente una dimensione fissa in pixel.
Con i valori numerici (in pixel) inseriti nei campi CellPad e CellSpace
si controllano
rispettivamente il cellpadding ed il cellspacing.
Il cellpadding rappresenta la distanza tra gli elementi contenuti nelle celle ed i bordi della cella,
nell'esempio della schermata abbiamo impostato il cellpadding a 5 il che vuol dire che qualsiasi
elemento contenuto nelle celle sarà distanziato dai suoi bordi di 5 pixel a destra, a sinistra, in alto ed
in basso.
Il cellspacing rappresenta la distanza tra una cella e l'altra e tra queste ed il bordo esterno della
tabella.
Ovviamente quando si inseriscono nella cella elementi come le immagini aventi anch'essi una
dimensione assoluta in pixel si dovrà tenere conto del cellpadding e del cellspacing, altrimenti la
tabella si allargherà oltre le sue dimensioni - siano esse percentuali o in pixel - quando la somma
degli elementi contenuti più il cellpadding ed il cellpsacing superano le dimensioni della tabella.
Sulla sinistra del pannello Property possiamo determinare, dal menù a discesa align, l'allineamento
di una tabella. Il valore predefinito Default non scriverà alcunché nel codice html e la tabella verrà
generalmente visualizzata allineata a sinistra. Gli altri valori sono Left (sinistra), Center (centro) e
Right (destra).
Nel campo Border
possiamo inserire il valore in pixel del bordo di una tabella, quando non
impostato diversamente il bordo delle righe o delle celle sarà dello stesso colore, ma delle
dimensioni di 1 pixel.
Sulla parte superiore sinistra del pannello Property possiamo inserire un id nel campo table Id,
questo può tornare utile, ad esempio, quando vogliamo assegnare eventi JavaScript ad una tabella.
Nella parte inferiore (a scomparsa) del pannello Property possiamo assegnare nei campi Bg Color
e Brdr Color rispettivamente il colore di sfondo della tabella ed il colore del suo bordo - quando
questo è maggiore di 0 - il colore può essere scelto dai selettori del colore accanto ai due campi. Il
colore di sfondo di default di una tabella è quello dello sfondo della pagina; il colore di default dei
bordi di tabella è grigio, con differenze minori da browser a browser. Si può anche inserire
un'immagine di sfondo al posto del colore di sfondo, in questo caso si sceglierà lo sfondo cliccando
sull'icona cartella sulla destra del campo Bg Image e, navigando all'interno del proprio disco,
selezionare l'immagine da inserire come sfondo oppure cliccando sull'icona puntatore e
trascinandola fino ad un'immagine presente nel pannello Site.

I sei pulsanti sulla parte inferiore sinistra servono per variare rapidamente le dimensioni di
una tabella.
I due sulla sinistra annullano le dimensioni, rispettivamente in larghezza ed in altezza di una tabella;
i due centrali convertono rispettivamente la larghezza e l'altezza da percentuale in pixel ed i due
sulla sinistra convertono rispettivamente la larghezza e l'altezza da pixel in percentuale. Le
conversioni in percentuale o in pixel sono fatte rapportandosi alla nostra area di lavoro.
Talvolta può essere problematico selezionare una tabella o un suo elemento all'interno di una
pagina, soprattutto quando ci troviamo in presenza di tabelle, celle, righe o colonne molto piccole, o
tabelle nidificate ovvero tabelle contenute all'interno di altre tabelle.

Tuttavia Dreamweaver fornisce delle soluzioni che possono rendere tali operazioni molto facili. Per
selezionare una cella la cosa più semplice da fare è posizionare il cursore al suo interno e poi
selezionarne il tag td con il Tag Selector sulla barra di stato di Dreamweaver.
Lo stesso procedimento spostandosi sul tag immediatamente precedente - tr - può essere fatta per
selezionare una riga di tabella, le righe e le colonne possono anche essere selezionate trascinando il
mouse da uno dei vertici della riga o delle colonne.
E' anche possibile selezionare le righe o le colonne posizionando il mouse sul bordo della tabella in
corrispondenza della riga o colonna prescelta e cliccare per selezionarla quando il puntatore assume
la forma di una freccetta nera.

Per selezionare una tabella, infine la cosa più semplice è selezionarne il tag sul Tag Selector.
Le tabelle: agire sulle celle e sulle righe
Selezionando una o più celle, righe o una colonne di tabella possiamo controllarne le proprietà.
Come al solito dal pannello Property.

Questa volta il pannello Property mostra nella parte superiore le proprietà del testo che potremmo
inserire nelle celle e nelle parte inferiore le proprietà sia della cella, sia del gruppo di celle, se ne
abbiamo selezionato più di una, oppure della riga o della colonna.
Quando selezioniamo una o più celle l'icona sulla sinistra della parte inferiore del pannello
Property mostra evidenziata una cella ed accanto la scritta Cell. Se invece è selezionata una riga
l'icona mostra selezionata una riga e la scritta Row. Infine se è una colonna ad essere selezionata
sarà mostrata un selezione di colonna e la scritta Column.
Le proprietà mostrate dal pannello Property per celle righe e colonne sono analoghe, pertanto sono
trattate insieme.
Due menù a discesa controllano l'allineamento orizzontale e verticale dei contenuti.
Il menù Horiz allineamento orizzontale, a parte il valore Default può assumere i valori Left (uguale
a Default), Center e Right.
Avvertenza: quando si inseriscono degli elementi (testo, immagini, ecc.) all'interno di una tabella
spesso può commettersi l'errore di definirne l'allineamento per mezzo dei pulsanti allinea testo, così
all'interno della tabella avremo l'allineamento determinato dal tag div, ad esempio .
Per evitare effetti indesiderati è consigliato utilizzare l'attributo align. Infatti div è un elemento
block level che non può essere contenuto all'intero di una tabella o di una riga di tabella e sebbene
possa essere contenuto all'interno di una cella, può ugualmente, dare origine a problemi.
Il menù Vert, che determina l'allineamento verticale, invece può assumere 5 valori Default, che è
uguale a Middle, e posiziona gli elementi al centro della cella, Top che posiziona gli elementi in
cima alla tabella, Bottom che li posiziona in basso e Baseline che li posiziona in alto in tutti i
browser, tranne in NN4.x, che assume un comportamento diverso a seconda che gli elementi siano
testo o immagini - in questo caso li allinea in basso come l'attributo Bottom - ma in presenza di
testo ed immagini li posizionerà in alto come Top. Per questa difformità di comportamento e poiché
non aggiunge nessun posizionamento diverso da Top e Bottom,
non è consigliabile usare questo
attributo.
I campi W e H determinano rispettivamente la larghezza e l'altezza, inserendo un numero questo
sarà interpretato come misura in pixel, mentre qualora si voglia inserire una misura percentuale
bisognerà inserire il numero seguito dal simbolo %.

La casella No Wrap serve per bloccare l'andata a capo del testo e dunque disporlo su un'unica riga,
se questa opzione è spuntata - ed il testo eccede in larghezza le dimensioni impostate per la cella -
essa si espanderà oltre le sue dimensioni per accoglierlo in un'unica riga.
La casella Header trasforma i tag in tag ovvero intestazione di tabella, il corretto uso è
applicare questo tag sulla prima riga di tabelle e/o sulla prima colonna (da sinistra), generalmente i
browser visualizzeranno il contenuto delle intestazioni di tabella in grassetto e centrato. I due campi
Bg servono per inserire il colore di sfondo o l'immagine di sfondo mentre il campo Brdr serve per
inserire il colore del bordo, il tutto esattamente nello stesso modo dello sfondo e del colore del
bordo della tabella.
Un modo per ridimensionare le tabelle e trascinarne i bordi dalle maniglie di ridimensionamento
come si fa con le immagini. Per mantenere le proporzioni di altezza e larghezza è necessario tirare
la maniglia diagonale pressando in contemporanea il tasto Maiuscolo.
Nel ridimensionamento Dreamweaver preserverà l'unita di misura, sia essa in px o in %.
E' possibile, sempre con il metodo del trascinamento, posizionandosi sul relativo bordo,
ridimensionare sia le celle, sia le colonne.

Per unire più celle, più righe o più colonne (tag e ) e sufficiente selezionare le
celle desiderate e col tasto destro del mouse selezionare table >> Merge Cells.
Posizionandosi su una cella è possibile, sempre col tasto destro del mouse, selezionare table >>
Split Cell... una finestra di dialogo chiederà se la si vuole dividere in righe o colonne ed il loro
numero.
Entrambe le opzioni sono accessibili sia dal menù:
Modify >> table,
sia dagli appositi pulsanti posti sulla sinistra del pannello Property di celle, righe e colonne.

Sempre utilizzando il menù contestuale - tasto destro del mouse e selezionando indifferentemente
una o più celle o righe o colonne - è possibile inserire nuove righe o colonne.
Dal menù:
Modify >> table >> Insert Rows or Columns...

una finestra di dialogo ci chiederà se vogliamo inserire righe o colonne, il loro numero e se esse
vanno inserite al di sopra o al di sotto della selezione.
Con lo stesso metodo è possibile accedere ad altre funzioni quali l'inserimento o la cancellazione di
singole righe o colonne.
Le tabelle: altre opzioni di gestione
Quando si inserisce del contenuto nelle celle, ad esempio del testo esse si espandono per contenerlo.
Tale espansione può essere differita o immediata.

Dal menù:
Edit >> Preferences... >> General
se la voce Faster table Editing (Deferred Update) è spuntata si accede alla modifica rapida delle
tabelle con aggiornamento differito. Ovvero, una volta inserito il testo, esso si disporrà su più righe
e la cella si espanderà solo quando si clicca fuori dalla tabella. In base alla potenza del processore
ed in funzione del fatto che si lavori con tabelle nidificate, tale opzione potrebbe rallentare
l'inserimento dei dati in tabella.
Quando si inseriscono dati tabellari può risultare comodo utilizzare le opzioni di formattazione
accessibili dal menù:
Commands >> Format table...
che mostra una finestra di dialogo dove scegliere tra vari modelli predefiniti e numerose opzioni,
che prevedono l'alternarsi dei colori di sfondo delle righe e formattazioni specifiche per la prima
riga e la prima colonna da sinistra.
Dal menù:
Commands >> Sort table...
è possibile accedere ad un'altra comodissima opzione relativa alla gestione dei dati tabellari: si può
ordinare il contenuto delle colonne di tabella sia in ordine alfabetico, sia in ordine numerico
ascendente o discendente. E' inoltre possibile a partire da un'altra colonna impostare un nuovo
metodo di ordinamento, includere o escludere dall'ordinamento la prima riga, ecc.

Due utilissime funzioni di Dreamweaver sono la possibilità di importare ed esportare dati tabellari.
Possiamo ad esempio salvare un un foglio di lavoro di Excel in formato txt ovvero come file di testo
delimitato da tabulazione ed importatrlo in Dreamweaver dal menù:
File >> Import >> Tabular Data
una finestra di dialogo richiederà di selezionare il file da importare, scegliere il delimitatore (in
questo caso Tab),
ed impostare alcune proprietà di formattazione, se lo si desidera si possono poi
aggiungere le opzioni di formattazione rapida di Format table..., e verrà importata nella pagina una
tabella contenente i dati esportati dal foglio di calcolo.

Possiamo invece esportare i dati di una tabella di Dreamweaver dal menù:
File >> Export >> table
Una finestra di dialogo chiederà di specificare il formato dei delimitatori e la piattaforma per le
interruzioni di riga. Se vogliamo generare un foglio di calcolo per Windows sarà necessario
scegliere come opzione Delimiter: Comma ovvero virgola, in quanto il file verrà esportato in
formato CSV ovvero Comma Separated Values (valori separati da virgola) e come Line Breaks:
Windows.
Il file cvs che viene così creato è leggibile e manipolabile da un programma come
Microsoft Excel.

Si è già accennato che in Dreamweaver MX ci sono due nuovi pannelli per inserire per inserire le
tabelle. Il pannello tables dal quale oltre al pulsante Insert table si accede a dei pulsanti, che solo
in modalità Code View consentono di inserire alcuni dei tag di tabella: , , , e
. Gli altri tag di tabella , , , e sono comunque
inseribili, da Code view, sia con il con il Tag Chooser, sia con il Cod Hints.
L'altro pannello è il pannello Layout,
di cui si parlerà nel prossimo capitolo.
La layout view
Layout View e realizzazione di un sito in Layout View
La Layout View è un'altra modalità visuale per inserire tabelle, presente da Dreamweaver 4 e
Dreamweaver UltraDev 4. Essa serve per disegnare dei layout di pagina basati su tabelle. Sebbene

consenta un minor controllo sulla pagina e sebbene abbia qualche limitazione, questa modalità potrà
risultare familiare a coloro i quali vengono dal mondo della grafica.
Si accede alla modalità Layout View dal pannello Layout del gruppo Common. Per impostazione
predefinita è attiva la Standard View che rende accessibili solo i pulsanti Insert table e Draw
Layer, cliccando sul pulsante Layout View si accede a questa modalità e diventano attivi i pulsanti
Draw Layout table e Draw Layout Cell, mentre diventano inattivi i pulsanti accessibili dalla
Standard View.
Pressando il pulsante Layout View viene mostrata una finestra di dialogo che da una sintetica
spiegazione dell'utilizzo della Layout View.
In Dreamweaver 4 e Dreamweaver UltraDev 4 questa modalità è invece accessibile dalla parte
inferiore del pannello Objects.

Per disegnare una tabella o una cella di layout bisogna premere si relativi pulsanti Draw Layout
table e Draw Layout Cell e disegnare con il mouse la tabella o la cella. Se si disegna direttamente
una cella, verrà anche disegnata la relativa tabella, che occuperà l'intera rimanente area delle pagina.
L'area della tabella è del colore di sfondo della pagina ed è editabile, dunque possiamo inserire
testo, immagini, ecc e possiamo anche ridimensionarla, cliccando sul suo bordo per selezionarla. In
questo caso la maniglia per il ridimensionamento diagonale manterrà le proporzioni di larghezza ed
altezza della cella senza bisogno di premere il tasto Maiuscolo .

La residua area della tabella è invece di colore grigio, per cui le relative celle non sono modificabili.
Tuttavia nell'area grigia premendo il pulsante Draw Layout table è possibile inserire una tabella
nidificata all'interno della tabella di layout principale.

E' anche possibile nell'area grigia della tabella disegnare ulteriori celle, ogni volta che si deve
disegnarne una bisognerà cliccare il pulsante Draw Layout Cell e tenendo contemporaneamente
pressato il tasto Ctrl sarà possibile disegnare più tabelle.
Non è invece possibile disegnare altre tabelle nidificate o celle e relative tabelle nidificate
all'interno delle celle editabili.

Come si può vedere, dalla schermata, sul bordo superiore delle tabelle e delle celle di layout è
presente un'area che ne indica le dimensioni e da cui è accessibile un menù a comparsa le cui
relative voci sono accessibili anche dal pannello Property, ad eccezione di Add Spacer Image,
che
inserisce un'immagine spaziatrice all'interno della tabella, in pratica una gif trasparente di 1px per
1px, la cui larghezza è impostata, come attributo html, pari alle dimensioni, in pixel, della cella.
Selezionando dal menù a comparsa, o dal pannello Property, Make Column Autostretch essa sarà
allargata alla dimensione relativa 100%, ovvero occuperà l'intera area disponibile, è anche possibile
trasformare una colonna autostrectch in una di grandezza prefissata in pixel selezionando la voce di
menù Make Column Fixed width.
Creiamo un sito di prova

Dopo questa introduzione al Layout View , creiamo la home page per un'immaginario negozio di
chewing gum. In modo che sia più chiaro l'utilizzo di questa modalità.
• Apriamo la pagina e paasiamo in modalità Layout View.
• Inseriamo il titolo nel campo Title: della ToolBar Document.
• Impostiamo le proprietà di pagina, settando il valore del colore di sfondo a #E0F8F8, il
margine superiore, topmargin e marginheight a 0.
• Salviamo la pagina con il nome index - il nome generalmente utilizzato per la home page -
dal menu
File >> Save
• Disegnamo, senza preoccuparci delle sue dimensioni, una tabella di layout nella parte
superiore della pagina dove inserire il logo del sito e selezioniamo dal menu a comparsa
sulla sua parte superiore Make Column Autostretch.
• Disegnamo un'altra tabella di layout. Anche in questo caso non bisogna preoccuparsi né del
suo posizionamento, né delle sue dimensioni, in quanto Dreamweaver la posizionerà
immediatamente sotto a quella precedente.
• Disegnamo una tabella nidificata sulla sinistra della tabella appena creata e impostiamone la
larghezza a 140 pixel dal pannello Property.

• Disegnamo all'interno della tabella 5 celle di layout dove andrà inserito il menu di
navigazione, ricordandoci, dopo aver premuto il pulsante Draw Layout Cell, di tenere
pressato il tasto Ctrl per poterne disegnare più di una senza dover ogni volta selezionare il
pulsante Draw Layout Cell.
Anche in questo caso non preoccupiamoci della loro altezza.
• Sulla destra della tabella principale disegnamo un'altra tabella nidificata, impostiamone la
larghezza, dal pannello property, a 200 pixel e trasciniamola fino a che il suo bordo sinistro
coincida con il bordo sinistro della tabella principale.
• Clicchiamo sul menu a discesa di ciascuna tabella di layout Clear Cell Heights.
• Clicchiamo sul menu a comparsa della tabella principale e selezioniamo Make Column
Autostretch

• Passiamo in modalità Standard View.
• Notiamo subito che oltre alle 5 celle di layout che abbiamo disegnato nella tabella nidificata
sinistra ne troviamo una sesta, questo perché quando inseriamo una tabella di layout è
comunque presente al suo interno una tabella che si somma a quelle da noi disegnate.
• Cancelliamo l'altezza della sesta cella della tabella nidificata di sinistra e dell'unica cella
della tabella nidificata di destra.
• Se vogliamo avere un codice più leggero e corretto, controlliamo che le tabelle nidificate
abbiano impostato il solo attributo di larghezza in pixel, le relative righe e celle non abbiano
impostati gli attributi di altezza e larghezza e le tabelle superiore e principale abbiano
impostato il solo attributo di larghezza al 100% e le relative righe e tabelle non abbiano
impostato alcun attributo. Come si vede il disegno del layout di pagina in modalità Layout
View necessita di numerosi controlli ed accorgimenti quando si vuole realizzare un prodotto
professionalmente valido. Il che comporta rallentamenti nel flusso di lavoro ed un'attenzione
particolare.
• Inseriamo adesso le immagini create in precedenza.
• Nella tabella superiore, dal pannello Common. cliccando sul pulsante Insert Image,
selezioniamo l'immagine logo.gif da inserire nella tabella superiore e scriviamo nel relativo
campo del pannello Property il testo alternativo per le immagini.
• Dal pannello Property della cella dove si è inserito il logo selezioniamo per l'attributo
allineamento orizzontale il valore Center.
Qualora volessimo ottenere lo stesso risultato
dalla layout view potremmo solo farlo inserendo .
• Creiamo adesso il menu di navigazione nella tabela nidificata di sinistra.
• Sempre dal pannello Common, premendo il pulsante Insert Image inseriamo un immagine
per ogni cella. Nella prima inseriamo una gif trasparente e dal pannello Property
impostiamone l'altezza a 25 pixel, nelle celle sottostanti inseriamo nell'ordine i vari pulsanti
del menu di navigazione del sito (home, about, products, order, contact) e scriviamo nel
relativo campo del pannello Property il testo alternativo per le immagini.
• Impostiamo nella cella della tabella principale l'attributo allineamento verticale a Top.
• Nella cella appena creata premiamo il tasto Invio e digitiamo Home Page, trasformiamo
questo testo in un titolo h3, scegliamo come font Comic Sans MS e come colore #FF33CC
• Premiamo il tasto Invio e nel nuovo paragrafo cambiamo il tipo di font in trebuchet MS ,
impostiamo la sua dimensione a 2, giustifichiamo il paragrafo ed inseriamo con il pulsante
Lorem Ipsum del pannello Common 700 caratteri.
• Selezioniamo tutto il testo, titolo e paragrafo e dal pannello Property premiamo il tasto
Text Indent (tag blockquote).
• Nella cella vuota della colonna nidificata sulla sinistra digitiamo News,
trasformiamo questo
testo in un titolo h3, scegliamo come font Comic Sans MS e come colore #FF33CC
• Premiamo il tasto Invio e nel nuovo paragrafo cambiamo il tipo di font in trebuchet MS ,
impostiamo la sua dimensione a 2 ed inseriamo con il pulsante Lorem Ipsum 250 caratteri.
• Selezioniamo il titolo News, andiamo in modalità Code View selezioniamo tutta la riga
contenente il tag h3, il tag font ed il testo News. Col tasto destro selezionando Insert Tag...
lanciamo il Tag Chooser ed inseriamo il tag blink (visualizzabile solo da Netscape fino alla
versione 4), che è il primo della lista dei tag html.

• A questo punto la home page è creata, vanno solamente create le altre pagine, inserito un
nuovo titolo nella tabella principale di ogni pagina e, quando sarà disponibile, si potrà
sostituire il testo dell'estensione Latin Text con il contenuto effettivo. L'operazione è
semplicissima in quanto basterà dal menu:
File >> Save As...
salvare lo stesso file con nomi diversi.
• In ognuna delle pagine su ciascun pulsante del menu di navigazione creiamo un link a
ciascuna delle altre pagine.
• A questo punto si può aggiungere qualche script relativo ai link, per migliorare l'effetto
complessivo.
• Dal menu:
Commands >> MFX

possiamo inserire MFX focus cleaner,
che come si è visto nel capitolo 12, aggiunge un
JavaScript nella pagina che evita le linee tratteggiate sui link in IE 4 e superiore, Netscape 6
e superiore e Mozilla.
• Infine possiamo utilizzare Set IE Scrollbars, un'estensione che permette di settare l'attributo
scroll del tag body ad auto, in modo che, quando l'area della pagina sta in un'unica videata,
IE 4 e superiore non mostri l'area vuota per la barra di scorrimento verticale, ma prolunghi
l'area della pagina fino al bordo della finestra. L'estensione è accessibile dal menu:
Commands >> Page Properties
e funziona su una o più pagine o sull'intero sito locale.
Così in pochi semplici passi abbiamo creato un piccolo sito dalla modalità Layout View.
Introduzione ai livelli o layers
I livelli, da ora in avanti chiamati layers, per uniformità con la terminologia del software, sono dei
contenitori come le tabelle.Tuttavia differiscono da queste in molti aspetti, presentando alcuni limiti
e notevoli vantaggi.
Possiamo inserire i Layer o dal menu:
Insert >> Layer
oppure dal pannello Common >> Layer

Tuttavia, in questo caso specifico a differenza degli altri elementi accessibili dal menu Insert,
le
due procedure presentano notevoli differenze.
Infatti dal menu Insert >> Layer verrà inserito un layer le cui proprietà sono definite dalle
impostazioni che abbiamo stabilito dal menu:
Edit >> Preferences... >> Layers
per impostazione predefinita, se non modifichiamo le preferenze relative ai layers, Dreamweaver
inserirà un layer nel punto esatto della pagina dove si trova il cursore, di larghezza 200 ed altezza
115 pixel, con posizione non predefinita.

Se invece clicchiamo il pulsante Draw Layer del pannello Common,
possiamo disegnare un layer,
che, oltre ad avere le dimensioni impostate da noi, sarà posizionato, rispetto ai margini superiore e
sinistro, nel punto esatto dove abbiamo iniziato a tracciare il disegno.
Il layer ha una maniglia di selezione in alto a sinistra, per mezzo della quale è possibile trascinarlo a
piacimento per spostarne il posizionamento nella pagina ed otto maniglie di ridimensionamento sui
bordi e sui vertici.
Quando si spostano i layer, per mezzo della maniglia di selezione, può risultare utile visualizzare,
oltre ai righelli, una griglia, soprattutto nel caso in cui si voglia allineare più layer.

Dal menù:
View >> Grid >> Show Grid
si attiva la visualizzazione di una griglia con quadra di 50 x50 pixel. È possibile cambiarne le
impostazioni (dimnesione, colore, ecc.) dal menù:
View >> Grid >> Grid Settings...
impostando dei valori personalizzati nella finestra di dialogo.
È anche possibile dal menù:
View >> Grid >> Snap To Grid
rendere più facile agganciare il bordo superiore sinistro di un layer con il vertice di uno dei quadrati
della griglia, infatti quando ci si trova in prossimità del vertice, esso sraà calamitato al vertice del
quadrato, quindi, rilasciando la maniglia di trascinamento del layer, il suo bordo superiore sinistro
risulterà agganciato con precisione alla griglia.

È anche possibile spostare e ridimensionare un layer con precisione per mezzo della tastiera.
Per spostare un layer, una volta che lo si è selezionato, il tasto:
• Freccia sposta il layer di un pixel alla volta nelle direzione della freccia;
• la combinazione di tasti Maiuscolo+Freccia sposta il layer di 5 pixel alla volta nelle
direzione della freccia.
Per ridimensionare un layer la combinazione di tasti:
• Ctrl+Freccia ridimensiona il layer di 1 pixel alla volta in direzione della freccia;
• Ctrl+Maiuscolo+Freccia ridimensiona il layer di 1 pixel alla volta in direzione della
freccia.
Le proprietà dei livelli
I layers sono dei tag div o span cui viene dato un identificatore unico: id ed alcune proprietà. Fino
alla versione 4 di Dreamweaver e Dreamweaver UltraDev si potevano anche utilizzare i tag ilayer
e layer, proprietari di Netscape e supportati fino solo da questo browser fino alla versione 4.
Se non abbiamo modificato le impostazioni dal menu Preferences... verrà utilizzato il tag div, per
creare un layer senza colore o immagine di sfondo e visibilità definite.
Inoltre Dreamweaver inserirà - per impostazione predefinita è spuntata la casella di controllo Add
Resize Fix when Inserting Layer - anche un JavaScript che serve per mantenere la compatibilità
con NN 4.x che non riposiziona automaticamente i layer quando l'utente ridimensiona la finestra
del browser.
Avvertenza: se eliminiamo un layer, ad esempio selezionandolo e premendo il tasto Canc,
Dreamweaver non eliminerà automaticamente lo script divenuto superfluo. Per eliminarlo

possiamo andare in modalità Code View e cancellarlo oppure selezionarlo nell'area Head
Content e premere il tasto Canc, o anche dal menu:
Commands >> Add Resize/Remove Fix when Inserting Layer.
Infine come impostazione predefinita Dreamweaver non consente la nidificazione dei layers,
ovvero l'inserimento di un layer all'interno di un altro layer. Se ne vogliamo consentire la
nidificazione come impostazione predefinita, sarà necessario spuntare la relativa voce nella
finestra di dialogo Layers del menu Edit >> Preferences ...
Possiamo controllare i layers dal pannello Properties ed anche dallo specifico pannello Layers
accessibile dal menu:
Window >> Others >> Layers
Per selezionare un layer possiamo cliccare sui bordi quando il cursore assume la forma di una
croce con le frecce oppure possiamo cliccare sull'icona degli elementi invisibili che Dreamweaver
inserisce all'inserimento del layer, purché non sia spuntata l'opzione delle Toolbar Standard:
View Options >> Hide All Visual Aids
In questo pannello troviamo la casella di controllp Prevent Overlap che, se spuntata impedisce la
sovrapposizione dei layers.
Avvertenza: quando si lavora con elementi per i quali Dreamweaver inserisce le icone degli
elementi invisibili come ad esempio layers, ancoraggi, JavaScript interni alla pagina, ecc. viene
occupato dello spazio nell'area della pagina in Design View. In questi casi se si devono
posizionare con precisione degli elementi nella pagina conviene abilitare l'opzione:
View Options >> Hide All Visual Aids
in quanto, eliminando questi segnaposto, Dreamweaver darà una rappresentazione più fedele
dell'area della pagina.
Un altro modo per selezionare i layers è cliccarci sopra dal pannello Layers, questo è
probabilmente il metodo più comodo e più sicuro quando una pagina è riempita di elementi ed i
layers diventano difficili da selezionare.

Infine quando posizioniamo il cursore all'interno di un layer è sufficiente cliccare sul tag del layer
nella barra di stato per selezionarlo. Si noti che Dreamweaver MX oltre a presentare sul Tag
Selector il tag div mostra pure il relativo id, a differenza delle versioni precedenti che mostravano
un generico tag div.
Dal pannello Property possiamo controllare le proprietà del layer.
Nella parte superiore, da sinistra, troviamo il campo Layer ID dove va inserito l'id del layer.
Avvertenza: Dreamweaver assegna un id ad ogni layer, esso è un elemento non solo
fondamentale, ma deve essere unico, ovvero non si può dare lo stesso id a due layers diversi ed
inoltre bisogna fare attenzione nel dare ai layers dei nomi che non siano riservati, ad esempio
banner è un nome riservato che le impostazioni di sicurezza dei browser o dei firewall o degli
antivirus potrebbero rendere invisibile. È anche sconsigliabile dare lo stesso id e/o name ad altri
elementi contenuti nella pagina, ad esempio forms, immagini tabelle, ecc. e, comunque, come
regola generale ogni elemento dovrebbe avere un id diverso dagli altri. Dreamweaver, dunque
sceglie un metodo conservativo e nomina i layers "Layer" seguito da un numero progressivo.
L'id può anche essere cambiato, ma bisogna bene sapere cosa si sta facendo e tenere presenti
queste regole.
Altri quattro campi determinano la posizione del layer nella pagina e la sua dimensione:
• L:
rappresenta la distanza dal margine sinistro della pagina
• T:
la distanza dal margine superiore
• W:
la larghezza
• H:
l'altezza
Un ulteriore campo Z-Index rappresenta la terza dimensione. Infatti, a differenza di altri elementi
html, i layers possono avere una profondità, più alto è il numero, più il layer si trova in primo
piano, dunque visibile rispetto agli elementi sottostanti. In pratica con il layers si da profondità
agli elementi di una pagina e si accede alla terza dimensione in un documento html. Mano a mano
che si aggiungono layer Dreamweaver attribuisce loro uno Z index crescente.
Il menu a discesa Vis può assumere quattro valori

• default:
non viene specificata la visibilità ed i browser normalmente faranno visualizzare
il layer, quando si inserisce con Dreaweaver un layer l'impostazione predefinita di
visibilità è default
• inherit:
si riferisce ai layers nidificati che ereditano le proprietà di visibilità dal layer che
li contiene
• visible:
rende un layer visibile
• hidden:
rende un layer invisibile.
La visibilità dei layers può essere controllata anche dal pannello Layers, cliccando sul layer
selezionato, in corrispondenza dell'icona occhio. Sempre dal pannello Layers possiamo
controllarne l'id e lo z index.
Sulla sinistra troviamo i campi ormai familiari con i quali è possibile scegliere un colore di
sfondo, tramite il selettore dei colori, oppure un'immagine di sfondo navigando all'interno del
nostro disco.
Nella parte inferiore del pannello Property possiamo scegliere il tag, div o span, da utilizzare per
i layers, ricordiamo che Dreamweaver di default inserirà div.
Il menu a discesa Overflow controlla il contenuto inserito in un layer quando questo eccede la
dimensione del layer stesso, le opzioni possono essere visible (visibile) hidden (nascosto) scroll e
auto in questi casi verrà aggiunta la barra di scorrimento al layer. Con l'opzione scroll in ogni
caso, con auto solo se il contenuto eccede l'area del layer.
Avvertenza sia NN 4.x sia Opera non sono in grado di visualizzare correttamente il contenuto
eccedente l'area del layer quindi con questi due browser non si può purtroppo fare affidamento
sulle barre di scorrimento, in particolare NN 4.x interpreterà come hidden il contenuto eccedente,
mentre Opera in genere come visibile se Overflow è settato ad auto ed invisibile se settato a
scroll.
I campi Clip,
infine rendono visibile solo una parte del layer:
•
•
•
•
L dal margine sinistro;
R dal margine destro;
T dal margine superiore;
B dal margine inferiore.

Avvertenze e ultime precisazioni finali
Una trattazione esaustiva dell'argomento layers richiederebbe molto più tempo ed inoltre, poiché
essi sono uno strumento avanzato per il design delle pagine, solo l'esperienza ed un'adeguata
documentazione sui bug dei browser può pemettere di padroneggiarli con confidenza.
Inoltre gli argomenti CSS e JavaScript saranno affrontati successivamente per cui in questa fase è
bene limitare la trattazione dei layers ad alcune avvertenze e precisazioni finali.
I layers non sono altro che dei tag div o, molto meno frequentemente span - per la differenza tra
questi due elementi, il primo block, il secondo in line si veda l'apposita sezione del corso
sull'XHTML - cui vengono applicati un id e degli stili CSS. Dunque, come qualsiasi stile, quello dei
layers può essere portato nell'head della pagina o addirittura in un file CSS esterno, tuttavia inserirli
in un file esterno non è consigliabile agli utenti di Dreameweaver 3 o 4, perché la visualizzazione
della pagina non sarà corretta.
I CSS verranno trattati successivamente per il momento è sufficiente sapere che NN 4.non supporta
gli stili in linea dei layers nidificati, ovvero come gli stili dei layer vengono scritti normalmente da
Dreamweaver. Per risolvere questo problema è sufficiente portare gli stili dei layers nel tag head,
un'estensione fondamentale, dunque, quando si lavora con i layers è Layer to Style di Jaro Von
Flocken. Essa è accessibile dal menu Commands e permette, con un solo click del mouse, di
portare tutti gli stili dei layers, che Dreamweaver scrive nella pagina, dal punto in cui si trovano al
tag head.
Come si è detto sopra i layers si possono sovrapporre e possono essere anche invisibili, questo ne fa
il principale strumento del DHTML, ovvero la possibilità di modificare dinamicamente la pagina in
funzione delle azioni dell'utente per mezzo dei JavaScript e dei CSS. Per cui i layers possono essere

utilizzati in numerose occasioni, tra cui vale la pena di menzionare, a titolo di esempio, i menu a
tendina.
Un layer ove si inserisca del testo e si cancellino gli attributi di larghezza e di altezza potrà
espandersi indipendentemente dalla risoluzione del monitor. Si provi infatti ad inserire all'interno di
un layer con dimensioni predefinite una gran quantità di testo, si cancellino successivamente gli
attributi di larghezza ed altezza e si ridimensioni a piacere la finestra del browser.
Inoltre, sebbene Dreamweaver inserisca una dimensione in altezza del layer, nella maggior parte dei
casi è consigliabile eliminarla. tranne, ovviamente quando impostare un'altezza prefissata è
necessario.
Non è consigliabile inserire i layers in tabella per due motivi, in primo luogo è un errore dal punto
di vista delle regole html, ma soprattutto ciò non è supportato da NN4.x. E' invece possibile inserire
tabelle all'interno dei layers purché queste abbiano una dimensione in pixel e non in percentuale.
Come si può intuire i layers sono strumenti estremamente versatili e potenti, tuttavia è necessario
conoscerne bene il funzionamento ed in particolare all'interno di Dreamweaver per evitare
problemi.
Una delle cose da evitare, se non si è degli utenti avanzati, è l'inserimento dei layers dal menu
Insert, in quanto se ne ha un minore controllo. Un utilizzo opportuno del menu Insert >> Layer
potrebbe invece essere quando si vuole nidificare un layer, infatti in questo caso, a prescindere dalle
impostazioni settate dal menu Preferences..., se si inserisce un layer in questo modo, quando il
cursore è all'interno di un altro layer, esso sarà nidificato. Dreamweaver inoltre consente la
nidificazione selezionando un layer sul pannello Layers e, tenendo cliccato Ctrl, lo si trascina sul
layer all'interno del quale si vuole nidificarlo.
Si tenga inoltre presente che quando i spostano i layers nel pannello Layers Dreamweaver ne
cambia lo z index - aumentandolo, dunque portandoli in primo piano, quando si spostano verso
l'alto e viceversa verso il basso.

Dreamweaver consente di inserire degli oggetti ad esempio delle immagini più grandi dei layers che
le contengono, ma in questo caso è fortemente consigliato adattare le dimensioni dei layers a quelle
del loro contenuto.
Si tenga presente inoltre che Dreamweaver inserisce il codice html del layer in corrispondenza
dell'icona segnaposto e che, pur spostando il layer nella pagina, il codice rimarrà nello stesso punto
dove è stato inserito, cambiando solo i valori di posizionamento dell'attributo syle.
Riproduzione video
Inserire dei filmati dei player sopra menzionati in Dreamweaver è una procedura abbastanza simile
a quella dell'inserimento dei file Flash o Shockwave.
E' infatti sufficiente premere il pulsante Plugin del pannello Media oppure selezionare il menù:

Insert >> Media >> Plugin
e selezionare il filmato da inserire nella pagina dalla relativa finestra di dialogo .
Nel pannello Property possiamo inserire il name e l'id del filmato e, come per le immagini,
controllare le dimensioni W (larghezza) H (altezza), la distanza da altri elementi della pagina per
mezzo dei campi V Space (verticale) e H Space (orizzontale), l'allineamento orizzontale dal menù a
discesa align, ed il bordo: campo border.
Nel campo src è visibile il percorso del file mentre nel campo Plg URL è possibile specificare
l'URL da cui scaricare il plugin se l'utente della pagina ne fosse sprovvisto. Infatti, per riprodurre
filmati Quick Time, Windows Media Player o Real Time è necessario che nel browser siano
abilitati i relativi player o un player in grado di riprodurre questi formati.
Il pulsante Play/Stop serve per eseguire i filmati inseriti nella pagina all'interno dell'ambiente di
sviluppo di Dreamweaver. Il pulsante Parameters... permette di aggiungere parametri addizionali.
Riproduzione audio
Sebbene per inserire l'audio in Dreamwever sia necessario utilizzare il pulsante Plugin oppure il
relativo menù, l'operazione può risultare piuttosto complessa in quanto è necessario inserire tutti i
parametri manualmente utilizzando il pulsante Parameters...
Fortunatamente esistono numerose estensioni che semplificano questa procedura, una di esse, di uso
molto semplice, è Insert Sound.
L'estensione è accessibile dal pulsante Insert Sound 2.2.0 del pannello Common oppure dal menù:
Insert >> Sound.
Cliccando sul pulsante, o selezionando la voce di menù, si apre una finestra di dialogo che permette
di selezionare il file audio da inserire (i formati supportati sono Midi, Wav e Aiff) e nel sottostante
gruppo di pulsanti di opzione Loop è possibile impostare quante volte deve essere riprodotto il

ano o il suono. Forever equivale ad infinite volte, Never ad una sola volta, No of times imposta
il numero di volte, che va digitato nell'adiacente campo.
Il pannello Property è identico a quello dei filmati, per cui è anche possibile eseguire il brano da
Dreamweaver per mezzo del pulsante Play/Stop.
I file mp3, come è noto, uniscono una compressione molto elevata ad una buona qualità audio. In
locale possono mostrare un funzionamento corretto, ma una volta caricati sul server remoto, se non
configurato alla loro esecuzione, il browser chiederà di avviare il download del file senza eseguirlo.
Per questa eventualità Dreamweaver prevede una finestra di avviso, che compare se si prova ad
eseguire la riproduzione con il pulsante Play/Stop,
che ci notifica che i browser installati non sono
in grado di eseguire il file.
La soluzione in questi casi è creare un file Flash contenente il file mp3: Flash infatti si avvale delle
compressione mp3, così il file audio in formato mp3 verrà riprodotto dal plugin di Flash.
Se si vuole inserire un brano di sottofondo in un intero sito è necessario ricorrere ai frameset, poiché
ad ogni apertura di una nuova pagina il brano verrebbe ricaricato e riavviato, perdendo così la
continuità di riproduzione. Dunque, in un sito che si avvale di frameset, è possibile collocare il
suono in un frame fisso, per esempio il frame del menù di navigazione. In un sito senza frame è
possibile ricorrere ad un semplice artifizio: si crea un frameset di due frame, uno di dimensione 0
pixel e l'altro - la pagina visualizzata dal browser - di dimensioni relative, in modo tale che,
navigando nei frame di dimensione relative, saranno solo queste pagine a cambiare ed il frame di 0
pixel, rimanendo fisso, riprodurrà il brano senza soluzione di continuità.
Validazione dell'accessibilità

Il gruppo di pannelli Results,
posizionati in fondo all'area di lavoro di Dreamweaver MX,
permettono di visualizzare rapporti relativi ad una singola pagina o ad un intero sito.
Questo pannello non è normalmente visibile e - come tutti i pannelli - è accessibile dal menù
Window, tuttavia è sufficiente lanciare uno dei comandi che mostrano questi rapporti, perché esso
appaia al di sotto del pannello Property visualizzando il rapporto.
È possibile lanciare la validazione dell'accessibilità della pagina dal menù:
File >> Check Page >> Check Accessibility,
il pannello Site Reports mostrerà eventuali errori con una X rossa e con un punto interrogativo
segnalerà sia quei tag che richiedono attenzione relativamente ai problemi di accessibilità, sia delle
considerazione generali.
Ognuno di questi errori o considerazioni, fa riferimento alla riga di codice HTML dove si trova ed
alla relativa regola sull'accessibilità.
Cliccando su una delle righe dell'elenco dei risultati del rapporto, Dreamweaver seleziona in Code
View nella pagina l'elemento preso in considerazione nel rapporto.

L'icona a forma di triangolo verde sulla sinistra del pannello, se cliccata, fa visualizzare una finestra
di dialogo dove impostare i parametri del rapporto

e l'icona a forma di fumetto con punto interrogativo apre il pannello Reference della UsableNet
Accessibility Reference.
Validazione del codice
Dal menù:
File >> Check Page >> Validate Markup...
si lancia il validatore per i vari linguaggi e browsers per i quali Dreamweaver MX offre la
validazione, tra cui HTML, XHTML e ColdFusion.
E' possibile scegliere il linguaggio da validare attraverso il menù:
Edit >> Preferences... >> Validator

e dal bottone Options... della finestra di dialogo impostare i parametri di validazione.
Anche in questo caso il pannello Validation mostra i risultati riga per riga, suddivisi in errori,
avvertimenti, tag nidificati erroneamente e messaggi.

L'icona a forma di triangolo verde sulla sinistra del pannello consente, tra le varie opzioni, di
validare, oltre alla singola pagina, l'intero sito.
L'icona a forma di fumetto con punto interrogativo lancia una finestra con una breve spiegazione
della riga del rapporto.
e l'icona con la forma del mappamondo apre in una finestra del browser il rapporto sulla
validazione.

Validazione della compatibilità tra browser
Dal menù:
File >> Check Page >> Check Target Browsers...
si lancia un rapporto sulla pagina relativamente ad un browser specifico, infatti dopo aver cliccato
questa voce di menù, una finestra di dialogo chiede di selezionare un browser di destinazione

pe controllare eventuali problemi con quel tipo di browser e - come per gli altri rapporti - nel
pannello Target Browser Check potremo visualizzare l'elenco di problemi relativi a quello
specifico browser.
Le icone sulla sinistra del pannello hanno una funzione simile a quelle del pannello Validation.

Validazione dei link
Una funzione molto potente per la gestione dei siti, come si è accennato nel capitolo 8, è il controllo
dei link e dei file di un sito. Possiamo accedere a questa funzione, a livello di singola pagina, dal
menù:
File >> Check Page >> Check Links
oppure dal menu File del pannello Site e controllare i link interrotti ed esterni.

Inoltre, sia dall'icona a forma di triangolo verde, sia dal menù contestuale nel pannello Site accedere
al controllo dei link dell'intero sito e controllare anche gli Orphaned Files,
ovvero quei file che
appaiono non collegati ad altri e dunque eliminabili, tuttavia a questo proposito e bene rileggere
l'avvertenza del capitolo 8.
Quando si utilizza il programma FTP integrato in Dreamweaver è possibile accedere al rapporto sui
FTP Log dal menù View del pannello Site ed il pannello FTP Log mostrera il file di log FTP.
Gli utenti di ColdFusion MX, che utilizzano ColdFusion MX come server per i test su
Dreamweaver MX, possono utilizzare il pannello Server Debug per visualizzare le informazioni di
debug, senza uscire da Dreamweaver, cliccando sulla relativa icona nella Toolbar Document, se
una pagina contiene errori le possibili cause appariranno elencate al fondo della pagina. Il pannello
Server Debug che viene aperto quando si clicca Server Debug permette di analizzare e correggere
gli errori della pagina.

Find & Replace: automatizzare le sostituzioni
Uno strumento molto utile di Dreamweaver e di cui nessun utente avanzato può fare a meno è il
comando Find and Replace, accessibile dal menù:
Edit Find and Replace...
che apre una finestra di dialogo, ricca di opzioni, per effettuare ricerche e sostituzioni, non solo di
testo, ma anche del codice e di tag specifici con funzioni avanzate di sostituzione del tag e/o di
attributi, il tutto su una singola pagina, o su un gruppo di pagine, su una cartelle o sull'intero sito
locale.

Particolarmente ricca di opzioni appare la finestra relativa a Tag Specific del comando Find And
Replace, dove è possibile inserire numerosi attributi dal pulsante + .
Dopo aver effettuato l'ultima sostituzione Dreamweaver fa visualizzare il pannello Code Inspector
nel punto in cui è stata effettuata l'ultima sostituzione.

Dal pannello Search del gruppo Results possiamo visualizzare le operazioni trova e sostituisci
relative a singole pagine, a più pagine o all'intero sito.
E' anche possibile salvare come query - cliccando l'apposita icona a forma di dischetto nella finestra
di dialogo - la ricerca effettuata e riutilizzarla in seguito, accedendovi dalla icona a forma di
cartella.

I Behaviors
Il pannello Behaviors di Dreamweaver è quello da cui attivare, a parte delle eccezioni, i
comportamenti - ovvero i behaviors - JavaScript.
Il suo funzionamento generale può essere spiegato in quattro semplici passi:
1. un comportamento è sempre associato ad un tag, per cui bisogna selezionare dal Tag
Selector il tag HTML cui associarlo, in genere il tag body, un link, un’immagine, un form o
un suo elemento
Avvertenza:
sebbene molti behavior vengono applicati ai layers il tag div non supporta i
behavior per cui i behavior che si riferiscono ai layer vengono in genere applicati ai tag
o ;
2. selezionato il tag bisogna verificare quali eventi sono supportati dai vari browser,
Dreamweaver per impostazione predefinita mostra gli eventi per i browser di terza
generazione e superiori, ma considerato che i browser di terza generazione hanno un
supporto JavaScript molto limitato e soprattutto che ormai essi non rappresentano nemmeno
lo 0,1% della quota globale dei browser, è consigliabile impostare la scelta degli eventi per i
browser di quarta generazione e superiori per avere un supporto realmente ampio. Oppure
scegliere i singoli browser se si sviluppa per utenze specifiche. Dreamweaver MX mostra gli
eventi per IE 3, 4, 5, 5.5 e 6 e per Netscape 3, 4 e 6. Gli eventi sono sono le interazioni con
la pagina web compiute dagli utenti durante la navigazione. Esempi di interazione sono il
caricamento di una pagina, il suo ridimensionamento, la sua chiusura (tutti ovviamente
associati al tag ), oppure il passaggio del mouse, il suo click, ecc. (associati, per
esempio ad un link, tag );

3. dopo aver selezionato il tag da associare al behavior ed i browsers che supportano gli eventi
è necessario scegliere un’azione premendo il pulsante +, che consente di visualizzare il
menù del pannello Behaviors. Se un Behavior non può essere attivato da un tag esso sarà
visualizzato in grigio, come non attivo nel menù delle azioni;

4. infine selezionata un’azione si impostano i parametri dalla finestra di dialogo e cliccando
OK si inserisce il behavior nella pagina.
Gestire il codice dei Behaviors
Quando si inserisce un behavior vengono inseriti nella pagina web due pezzi separati di codice:
• un JavaScript, contenuto in un tag script, all'interno del tag head della pagina;
• un event handler che richiama le funzioni JavaScript, inserito come attributo del tag HTML
cui è associato il behavior.
Il pannello Behaviors non ha menù specifici da attivare col tasto destro del mouse oppure dal menù
a comparsa, sulla destra del pannello, il quale serve solo per gestire il pannello stesso e l’Help.

Per visualizzare nel pannello i behavior inseriti nella pagina è necessario selezionare il tag cui essi
sono associati. I behavior sono ordinati per eventi, disposti sulla sinistra del pannello in ordine
alfabetico. All’interno di un gruppo di eventi, associati allo stesso tag, questi sono ordinati per
azioni in ordine cronologico di inserimento, che coincide con l’ordine cronologico di esecuzione del
behavior al verificarsi dell’evento. Se all’interno di un gruppo di azioni attivate dallo stesso evento
vogliamo cambiare la successione cronologica di esecuzione è necessario posizionarsi sull’azione
prescelta e premere il tasto freccetta rivolta verso l’alto, situato sulla destra del pannello, affinché
l’azione sia eseguita prima o la freccetta rivolta verso il basso perché l’azione sia eseguita dopo.
Sulla sinistra del pannello troviamo, a parte il pulsante + per aprire il menù delle azioni, anche il
pulsante – che serve per eliminare un’azione, dopo averla selezionata.
Una volta che si è selezionata un’azione, diventa visibile un tasto freccetta che, se cliccato, mostra
un menù con gli eventi disponibili per quell’azione (ovviamente in funzione del browser di
destinazione che si è scelto, anch’esso modificabile da questo menù) in questo modo e possibile
selezionare un altro evento e dunque modificare l’evento di attivazione dell’azione. Con un doppio
click su un’azione presente nel pannello Behaviors viene aperta nuovamente la finestra di dialogo
per l’inserimento dei parametri ed è così possibile modificarli.

Al centro del pannello Behaviors si visualizza il tag corrente cui sono associate le azioni.
I Behaviors per Dreamweaver MX - parte I
Vediamo quali sono i behavior disponibili.
Call JavaScript permette di inserire una funzione JavaScript che va scritta a mano nella relativa
finestra di dialogo.

Change Property serve per cambiare le proprietà di uno degli elementi elencati nel menù a discesa
della finestra di dialogo del behavior.
Check Browser permette di reindirizzare i visitatori su pagine differenti in funzione del browser
utilizzato. I browser presi in considerazione sono IE 4 e superiore NN 4 e superiore e gli altri
browser, le opzioni sono
•
•
•
Stay on this Page (rimani nella pagina corrente)
Go to URL (vai all’URL)
Go to Alt URL (vai all’URL alternativo)
Check Plugin consente di controllare la presenza di una serie di Plugin nel browser dei visitatori,
tra cui ovviamente Flash e Shockwave e, in funzione dei risultati del controllo compiuto, effettuare
il reindirizzamento.

Control Shockwave or Flash consente di effettuare dei controlli JavaScript sul filmato: Play,
Stop, Rewind e Go to Frame (vai al frame). Gli utenti di Dreamweaver 3 e 4, ma non di MX,
potranno avvantaggiarsi dell’estensione JavaScript Integration Kit for Macromedia Flash 5 che
ha una più ampia scelta di controlli effettuabili sui filmati Flash, inoltre questa estensione ha, tra le
numerose funzionalità, il Flash Dispatcher Behavior che effettua un check del plugin più raffinato,
controllando anche la versione (fino alla 5) del Flash Player utilizzato e contiene le Advanced
Form Validations,
che servono per effettuare le validazioni client-side dei moduli in Flash.
L’estensione dovrebbe essere aggiornata a breve per i prodotti di generazione MX.
Drag Layer rende trascinabili i layer. Una finestra di dialogo, divisa in due sezioni e ricca di
opzioni, consente di utilizzare questa funzione per numerosi scopi, tra cui creare dei livelli
scorrevoli, tuttavia per realizzare questo effetto esistono numerose estensioni molto semplici da
utilizzare come ad esempio:

• dHTML AP (Absolutely Positioned) AutoScrolling Area, dHTML Slideshow with Full
size Image in Popup Window, dHTML Slideshow with Full size Image in Area of Page,
dHTML SlideShow, dHTML AP (Absolutely Positioned) Scrollable Area tutte
disponibili sul sito dello sviluppatore David G. Miles;
• Cross-browser AutoScroller di Marja Ribbers de-Vroed;
• Horizontal Scroller e Vertical Scroller di P VII.
Drag Layer non è compatibile con Opera, tuttavia è disponibile una “patch” di Jaro von Flocken
che rende il behavior compatibile anche con questo browser.
Avvertenza: quando si installa questa estensione su Dreamweaver MX, poiché è stata realizzata
prima di questa versione di Dreamweaver l’Extension Manager chiederà di sostituire dei file più
recenti, è necessario rispondere affermativamente perché le modifiche che rendono Drag Layer
compatibile con Opera abbiano effetto.
Go To URL serve a cambiare più pagine contemporaneamente in un frameset.
Jump Menu e Jump Menu Go vanno utilizzate in congiunzione con l’oggetto Jump Menu del
pannello Forms, una volta riempito il menù a discesa del Jump Menu con i relativi nomi dei link
ed URL, questo menù a discesa, piuttosto che essere utilizzato come un elenco a discesa di un
Form, può essere utilizzato come menù di navigazione.Jump Menu Go serve ad attivare il link da
un pulsante.

Tuttavia ci sono delle estensioni di utilizzo ancora più semplice e con molte più funzionalità:
• Jump Menu Magic il cui accesso è dal relativo pulsante Insert PVII Jump Menu Magic
del pannello Forms e come il behavior standard di Dreamweaver inserisce il relativo
behavior controllabile dal pannello Behaviors;
• 4 Level Jump Menu il cui accesso è dal pulsante standard List/Menu ed oltre alle funzioni
già presenti in Jump Menu Magic come il controllo del menù all'interno di un frameset, ha
anche numerose opzioni relative all'apertura dei link in nuove finestre pop up.
Open Browser Window serve per aprire nuove finestre del browser al caricamento della pagina, in
uscita dalla pagina, da un link, controllandone attributi e dimensioni dalla finestra di controllo del
behavior.
I Behaviors per Dreamweaver MX - parte II
Play Sound consente di attivare un suono ad esempio cliccando un link o un falso link.
Popup Message può essere collegato a vari elementi ed eventi per fare visualizzare una finestra di
popup con un messaggio.

Il contenuto del messaggio va inserito nella finestra di dialogo del behavior.
Set Nav Bar Image va utilizzato in congiunzione con il relativo oggetto del pannello Common
accessibile dal pulsante Navigation Bar, per creare in modo rapido una barra di navigazione
orizzontale o verticale, se la relativa opzione è spuntata verrà inserito anche il behavior Preload
Images.
Set Text consente di visualizzare del testo in un frame, in un layer, nella status bar del browser e
nelle textarea dei form.
Show Pop-Up Menu e Hide Pop-Up Menu come si accennava nel capitolo 7 servono per creare
menù pop-up orizzontali o verticali come in Fireworks o modificare quelli realizzati in Fireworks.
Show-Hide Layers permette di rendere dinamicamente visibili o invisibili i layer al verificarsi di
un evento, ad esempio al passaggio del mouse.

Avvertenza: su Dreamweaver 3 e 4 Show-Hide Layers non è compatibile con Netscape 6, per far
funzionare il behavior con questo browser è necessario scaricare l’estensione Netscape 6 Show-
Hide Layers se si possiede Dreamweaver 3, mentre per Dreamweaver 4 è necessario scaricare
l’update alla versione 4.01.
Swap Image e Swap Image Restore consentono di scambiare una immagine, ad esempio al
passaggio del mouse, in questo modo è possibile realizzare facilmente dei bottoni di rollover.
Questo behavior viene anche attivato dal pulsante Rollover Image del pannello Common.

Una volta inserita, dal pannello Common, l'immagine di rollover è possibile controllarne i
parametri dalla finestra di dialogo del behavior Swap Image. In entrambi i casi è spuntata di default
l'opzione Preload Rollover Image in modo che tutte le immagini siano caricate prima che sia
completato il caricamento della pagina. Preload Images può essere inserito come behavior anche
autonomamente dai due behavior cui di default viene associato(Set Nav Bar Image e Swap Image
).
Avvertenza:
se si utilizza più di una immagine per pagina è necessario assegnare a ciascuna un
nome diverso.
Il behavior Validate Form consente di effettuare validazioni dal lato client di singoli campi o di
interi form, infatti è possibile stabilire che un campo sia obbligatorio, che abbia un valore email,
oppure numerico e se numerico all’interno di un determinato intervallo numerico.
Di alcuni dei behavior ho realizzato delle semplici pagine di esempio scaricabili. Per comprendere il
loro funzionamento è necessario posizionarsi con il Tag Selector sul tag sul quale essi sono
applicati, osservare a quale evento è stato associato e con un un doppio click sul behavior presente
nel pannello vederne i parametri. I behavior di cui ho realizzato degli esempi sono Drag Layer, Go
To URL, Show-Hide Layers, Swap Image/ Swap Image Restore ed una pagina in cui sono
utilizzati in contemporanea Show-Hide Layers e Swap Image/ Swap Image Restore.

La timeline di Dreamweaver MX
Abbiamo visto, nel capitolo sui link, come una pagina HTML, per mezzo dei collegamenti
ipertestuali, può acquisire una “profondita” logica, richiamando con i link altri documenti ad essa
collegati.
Abbiamo poi visto come è possibile inserire la terza dimensione in una pagina HTML, per mezzo
dello z-index dei layer che determina la profondità spaziale di questo elemento.
Vediamo ora come sia possibile inserire in un documento HTML la quarta dimensione, ovvero
quella temporale.
Avvertenza:
le animazioni della Timeline funzionano solo con i browser della quarta generazione e
superiori.
Anche per lo svolgimento nel tempo di azioni all’interno di una pagina web si fa ricorso ai layer.
Per creare un’animazione temporale dei layer si fa ricorso alla Timeline. Timelines è un pannello
visualizzabile dal menu:
Window >> Others >> Timelines
Dreamweaver rappresenta un’animazione temporale suddividendo l’azione in fotogrammi che si
svolgono ad una determinata velocità in termini di fotogrammi per secondo. Un concetto abbastanza
simile a quello della pellicole e dei fotogrammi dei film, che viene sfruttato anche dai software
Flash e Director.
Dall’alto a sinistra troviamo il menù a discesa delle timeline, i pulsanti rewind, indietro ed avanti di
un frame, tra i pulsanti indietro ed avanti il campo che fa visualizzare in quale frame si trova la
testina di riproduzione. Nel campo Fps è indicato il numero di fotogrammi per secondo
dell’animazione. Dreamweaver, per impostazione predefinita, da all’animazione una velocità di 15
fotogrammi per secondo, modificabile dal campo Fps. Le caselle Autoplay e Loop servono,
rispettivamente, per eseguire automaticamente un’animazione al caricamento della pagina e per
eseguire un’animazione all’infinito. Sotto questo gruppo di controlli si trova il canale dei
Behaviors, da questo canale è possibile attivare dei behavior a partire da un certo frame. Sotto il
canale dei Behaviors si trova la linea per contare i frame, dove si visualizza la testina di
riproduzione, che indica su quale frame si trova l’animazione. Infine sotto troviamo i canali delle

animazioni. Ogni oggetto utilizza un suo canale di animazione ed è possibile avere più animazioni
ognuna con un suo canale all’interno della stessa timeline.
Gli altri controlli della Timeline li troviamo nel menù:
Modify >> Timeline

Questi controlli sono accessibili anche dal menù contestuale o dal menù a comparsa sulla destra del
pannello Timelines.
Infine dal pannello
Behaviors alla voce Timeline,
possiamo attivare altri controlli.

Creare una Timeline
Per creare una Timeline è necessario che nella pagina siano presenti un immagine o un layer da
inserire nella timeline, per cui qualsiasi altro elemento che non sia un layer o un immagine non può
essere gestito dalla timeline, a meno che non sia inserito all’interno di un layer.
Infatti se selezioniamo la voce di menù:
Modify >> Timeline >> Add Object to Timeline.
Dreamweaver ci ricorda con una finestra di avvertimento che gli unici oggetti che possono essere
aggiunti alla Timeline sono i layer e le immagini.

Una volta che sono stati inseriti dei layer nella pagina è possibile creare l’animazione
selezionandone uno e scegliendo la voce di menù:
Modify >> Timeline >> Record Path of Layer.
Questo commando è azionabile anche dal menu contestuale della pagina, sempre con il layer
selezionato, oppure dal menu contestuale o dal menù a comparsa della Timeline.
Per ogni layer che viene aggiunto alla Timeline viene così creato un diverso canale di animazione.
Per mezzo del trascinamento del mouse possiamo impostare un movimento del layer attraverso la
linea temporale, come si può vedere dopo aver tracciato il percorso del layer viene creata la linea di
animazione di quel layer all’interno della linea temporale.
L’animazione contiene almeno due Keyframe o fotogrammi chiave uno all’inizio ed uno alla fine
dell’animazione, se il percorso del layer contiene delle deviazioni veranno inseriti degli ulteriori
fotogrammi chiave. E’ tuttavia sempre possibile inserire dei fotogrammi chiave per cambiare
durante lo scorrere della linea temporale alcune proprietà del layer. E’ possibile cambiarne la
distanza del margine superiore e sinistro della pagina, lo z index, la visibilità e la dimensione in
altezza o larghezza, tuttavia queste ultime due modifiche non sono visualizzate da NN 4.x.
E’anche possibile inserire dei behavior nella timeline, che saranno dunque attivati a partire da un
certo fotogramma, per aggiungere dei behavior è necessario selezionare un fotogramma sul canale
dei Behaviors e inserire il behavior dal relativo pannello.

Sempre dal menù Modify,
dal menù contestuale o da quello a comparsa del pannello è possibile
aggiungere altre Timeline o rinominarle.
Le opzioni e il controllo della Timeline
Se viene spuntata l’opzione autoplay, la linea temporale verrà azionata al caricamento della pagina
ed una finestra di avvertimento ci ricorda che verrà così inserito il behavior Play Timeline al
caricamento della pagina, quindi associato al tag body ed all’evento onLoad.
Spuntando l’opzione loop la linea temporale viene ripetuta ciclicamente all’infinito, aggiungendo al
frame immediatamente successivo alla fine delle animazioni il behavior Go To Timeline Frame.
Nei parametri del behavior viene specificata la timeline cui viene assegnato il loop ed il campo Go
To Frame contiene il frame numero 1, invece nel campo Loop: times non viene specificato alcun
valore, il che corrisponde ad infinito. E’ chiaro dunque che se vogliamo impostare un ciclo di un
determinato numero di volte, ad esempio 3, sarà sufficiente spuntare la casella loop e con un doppio
click sul behavior inserire nel campo Loop: 3 times.

E’ possibile controllare la Timeline dal pannello Behaviors, come si accennava all’inizio. E’
necessario inserire un link o un falso link (# o meglio javascript:;) ad un testo o un’immagine e dal
pannello Behaviors scegliere i controlli. E’ così possibile fare partire o fermare un’animazione da
una un pulsante, utilizzando rispettivamente i behavior Timeline >> Play Timeline e Timeline >>
Stop Timeline. Come si accenava poco sopra è anche possibile tramite i controlli dei behavior, allo
stesso modo di Play e Stop Timeline, creare un pulsante che porti ad un determinato fotogramma
della timeline, in questo caso si utilizzerà il behavior Timeline >> Go To Frame.
Le estensioni per la Timeline
I controlli standard della Timeline sono dunque Autostart e Loop attivabili direttamente dal
pannello Timelines ed i behavior Timeline,
tuttavia a questi controlli se ne possono aggiungere
degli altri come estensioni di Dreamweaver.
Un’estensione di Drew McLellan Remote Timeline Fever!, consente, quando la timeline è inserita
in un frameset, di attivare i controlli dei behaviors di Dreamweaver da un’altra pagina del frameset,
purchè i controlli siano già inseriti nella pagina delle timeline. Questa estensione è accessibile dal
pannello Behaviors >> Timeline.
Timeline Fx consente di realizzare delle animazioni complesse a forma di cerchio, ellisse,
sinusoide, spirale, ecc. l’estensione è accessibile dal menù:
Commands >> timeline fx.

Mozillamat è un behavior che rende compatibili Dreamweaver 3 e Mozilla o Netscape 6 e
superiore, consentendo agli utenti di Dreamweaver 3di utilizzare appieno la Timeline e le relative
estensioni con questi browser, ovviamente questa estensione non serve agli utenti di dreamweaver 4
ed MX in quanto il codice inserito da queste versioni di Dreamweaver è compatibile con Netscape 6
e superiore e Mozilla.
Play Tl 2 Frame è un behavior che fa partire un’animazione a partire da un determinato
fotogramma.
Timelines è un gruppo di tre behaviors:
1. Go By Frame,
sposta il layer su un determinato fotogramma dell’animazione;
2. Reverse Timeline,
fa girare l’animazione al contrario, dall’ultimo al primo frame;
3. Random Timeline,
in presenza di più di una timeline ne attiva una alla volta in modo
casuale;
tutte queste estensioni, realizzate da Jaro Von Flocken, sono disponibili alla pagina del suo sito
dedicata alle estensioni per la Timeline.
Avvertenza: i behaviors Play Tl 2 Frame e Timelines, accessibili dal pannello Behaviors >>
Timeline,
non sono attualmente compatibili con Dreamweaver MX, poiché il problema relativo a
Dreamweaver MX è di facile soluzione si spera che siano a breve rese compatibili con l’ultima
versione di Dreamweaver.