Primo Passo: Definire il Sito

8.Definire lo spazio di lavoro: il Sito Locale

La prima volta che viene lanciata l'applicazione, Dreamweaver chiede all'utente di creare il sito locale

Questo programma offre un vero ambiente integrato di sviluppo e pubblicazione: oltre al compilatore per tutto
il codice di cui sono composti i documenti, Dreamweaver incorpora un'interfaccia di gestione del sito che
permette di verificare, modificare e creare i collegamenti fra i diversi files. Inoltre esso integra una
praticissima funzione FTP per la pubblicazione diretta su di un server web cui si abbia accesso, ovvero per il
quale si possieda un identificativo utente e relativa password.

La prima volta che viene lanciata l'applicazione, Dreamweaver chiede all'utente di creare il sito locale.
Anche in seguito sarà comunque necessario definire un sito locale, ovvero una cartella sul proprio hard
disk, dove risiederà il progetto che verrà creato.
Per fare ciò selezionare Open Site dal menu File e scegliere il comando Define Sites, poi scegliere fra quelli
già presenti nella lista il sito locale sul quale si andrà ad operare o cliccare su New per crearne uno nuovo.
Gli utenti Macintosh accedono a queste funzione scegliendo DefineSites dal menu Site.

Sulla sinistra della finestra di dialogo che verrà aperta saranno elencate quattro opzioni fra cui va selezionata
Local Info, di default quando si crea un nuovo sito.
Le altre opzioni riguardano rispettivamente la scelta del tipo di connessione da usarsi per il trasferimento dei
documenti ad un server remoto (Web Server Info), le operazioni di trasferimento cui sono sottoposti i
documenti per essere modificati (Check In/Check Out), e la possibilità di definire una Home Page o pagina
iniziale per il sito (Site Map Layout) oltre ai parametri di visualizzazione della "mappa sito".
Per default viene definito come home page il file index.htm o index.html se esistente, è comunque
necessario aver definito una home page per accedere ad una particolare modalità di visualizzazione del sito
detta appunto Site Map.

Va ora definita nella sezione Local Info la posizione sul disco fisso ove intendiamo registrare il nostro sito,
inserendo il percorso nel campo denominato Local Root Folder oppure cliccando sull'icona della cartella per
scegliere o creare questa directory nella posizione che si ritiene più opportuna..

Per quanto riguarda il sito locale, è richiesta ancora solo la definizione del nome che si intende assegnare al
sito.
L'importanza di questa operazione risiede nel fatto che il programma utilizza questo nome per identificare il
sito ed è quindi indispensabile scegliere un nome che sia al contempo descrittivo ed esclusivo.
Nel campo Site Name inserire quindi il nome prescelto.

I due campi rimanenti indicano opzioni di gestione dei collegamenti che il programma usa per velocizzare
l'aggiornamento dei collegamenti e si tratta di opzioni che non è necessario attivare nel caso di un sito locale,
presente solo sul proprio hard-disk.
Avendo a gestire un sito posto su un server web remoto, si inserirà l'URL completo della propria home page
nel campo HTTP Address e si selezionerà la casella di opzione Cache per permettere a Dreamweaver di
creare una memoria cache che sarà utilizzata in caso di cambiamenti per accelerare l'aggiornamento dei
collegamenti fra files all'interno del sito.
Abilitare questa ipotesi permette di velocizzare le operazioni della Site Map; quando si sceglie questa
modalità di visualizzazione verrà richiesto di creare una cache (o memoria temporanea) per ottimizzare la
gestione del sito nel suo insieme ma se le risorse sul proprio computer sono molto limitate non è vincolante
accettare.

9.Site View: predisporre la struttura del sito

La finestra di dialogo alla modalità di visualizzazione Site View
Una volta definito ove sarà ubicato il sito e quale sarà il suo nome, scegliendo OK si passa direttamente dalla
finestra di dialogo alla modalità di visualizzazione Site View

In questa sede è possibile creare delle cartelle (directory) per tenere in ordine i vari tipi di documenti che
compongono il lavoro, ed anche i documenti stessi.
.
Non esistono ovviamente regole in merito ma è buona norma tenere i documenti separati creando ad
esempio una cartella per le immagini, una per i files HTML, eventualmente una ove conservare files
temporanei ed altri elementi che si rendessero necessari durante la realizzazione del siti ed ogni altra cartella
sia necessaria od utile per l'organizzazione del sito o la sua lavorazione.
Bisogna solo tenere in mente che il web-master, ed anche chi eventualmente gli succederà nella
manutenzione del sito, sia in grado di accedere con facilità ad ogni dato documento.

La creazione di nuove cartelle avviene con modalità analoghe a quelle che si adoperano in genere per
"gestire le risorse" sul proprio hard-disk e cioè sia selezionando New Folder dal menu File che scegliendo
l'opzione New Folder dal menu contestuale che appare agendo sul tasto destro del mouse.

In modalità Site View si possono anche creare dei nuovi files scegliendo l'opzione corrispondente New File
dal menu contestuale o dal menu File: verranno creati dei documenti HTML vuoti che è possibile utilizzare
come segnaposto per successiva lavorazione.

Questo è il tipo di visualizzazione adottato durante operazioni di traferimento e gestione remota di file: le
operazioni sono analoghe ai più diffusi programmi FTP, quindi una volta stabilita la connessione, la lista dei
documenti contenuti nel sito remoto apparirà a fianco di quella dei file locali e si potrà procedere a quelle
richieste fra le consuete operazioni di modifica, caricamento, scaricamento, etc.

10.Site Map: il sito visto dall'alto

Permette delle operazioni sui file di un sito presente sul proprio hard-disk

Quando ci si trova in modalità Site View e si sono già creati alcuni documenti è possibile
visualizzare o creare una struttura di collegamenti che li unisca, passando nella modalità di
visualizzazione Site Map che permette delle operazioni sui file di un sito presente sul proprio
hard-disk (uno remoto vi va copiato per avere queste funzioni)
È necessario aver definito una Home Page o pagina iniziale del sito per accedere a questa
modalità e se ciò non è stato fatto viene chiesto di farlo in questo momento.

Un clic sull'icona indicata dalla freccina nera di questa immagine e si passa da Site View (che è invece
rappresentata dall'icona di sinistra) alla "mappa del sito". Tenere premuto il tasto del mouse mentre si sceglie
la modalità permette di decidere se visualizzare unicamente la mappa del sito (Map Only) o mantenere
contemporaneamente attiva la visualizzazione della lista dei files che lo compongono (Map and Files).

Nella mappa, i files HTML presenti in quello definito come sito vengono visualizzati come icone, concatenate
secondo la struttura dei collegamenti che uniscono i documenti stessi a partire da quello che è stato definito
come pagina iniziale.
Altre piccole icone e simboli possono affiancare quelle che identificano i documenti.

I simboli + e - accanto alle icone dei documenti indicano rispettivamente la possibilità di espandere e quindi
visualizzare, oppure quella di comprimere e quindi nascondere, il livello successivo della rete di collegamenti,
i file collegati a quello evidenziato.
Se il nome del file viene scritto in rosso e vi compare a fianco il simbolo significa che quel documento
contiene uno o più collegamenti interrotti.
Se invece il nome del documento è scritto in blu e presenta il simbolo , si tratta di un link ad un
documento esterno al sito, ad esempio un altro sito su Internet, oppure di un collegamento speciale come
quelli ad uno script o ad un indirizzo di posta.
Il simbolo del lucchetto indica che il documento è di sola lettura.

I segni di spunta che possono comparire a fianco delle icone dei file indicano il loro status di modifica:
Check-Out significa aprire un file da un sito remoto per modificarlo e Check-In significa ricaricarvelo.
Nel caso di progetti complessi in cui sia necessaria l'interazione di più persone puù diventare complesso
capire quali sono i documenti aperti per modifica, e la comparsa di un segno di spunta verde indica che il file
è aperto su quel computer, mentre un segno di spunta rosso indica che qualche altro collaboratore vi sta
lavorando.

Resta da illustrare un'oggetto dall'importanza tutt'altro che marginale, che compare accanto al documento
selezionato nella mappa, l'icona Point to file.

Questa piccola icona, una caratteristica di Dreamweaver che si ripropone in modalità di authoring nel
Property Inspector, ha un grosso potere in quanto permette di creare collegamenti fra documenti, anche in
questo caso, quando essi sono ancora vuoti.
Viene detta icona Point to file perchè è sufficiente un'operazione di drag-and-drop per creare un link:
selezionare questa icona tenedo premuto il tasto del mouse e trascinarla su di un altro documento.
Così è stato realizzato un collegamento ipertestuale, un link.
Si tratta certo di un link piuttosto "grezzo", poichè il testo che lo rappresenta, di cui non è stata definita
nessuna caratteristica, consisterà semplicemente nel nome del file di destinazione. Ma è pur sempre un
collegamento funzionante.

Anche chi è terrorizzato dall'idea di avere a che fare con la sintassi dell'HTML dovrà ammettere che non si
tratta di un'operazione difficile ed i più scettici possono verificare immediatamente il funzionamento di questa
semplicissima procedura cliccando due volte sull'icona che rappresenta il file da cui è stato fatto partire il
collegamento (quello inizialmente selezionato).

Si avvia così l'interfaccia di Authoring di Dreamweaver con la quale si inizierà a prendere confidenza
attraverso semplici operazioni.

Proprietà della pagina

11.L'interfaccia Authoring
La finestra principale della modalità Authoring è una pagina bianca nella quale possiamo inserire una enorme
varietà di oggetti

Questa serie di lezioni propone un approcio contestuale volto alla realizzazione di un contenuto complesso: i
vari aspetti dell'interfaccia saranno affrontati a mano a mano che si rendono necessari per la lavorazione ma
è bene ricordare che essa si compone di diverse finestre progettate per semplificare il lavoro e quindi si
invitano sin d'ora gli sviluppatori a prendervi confidenza e... a non esitare a chiuderle se in alcuni momenti
dovessero risultare ingombranti.
Ci sono parecchi modi di riaprirle, sempre che non si esca dal programma.

In questo senso si tratta di un ambiente molto versatile in cui ognuno troverà dopo qualche sperimentazione
qual'è il modo più agevole per il proprio personale utilizzo.

La finestra principale della modalità Authoring è una pagina bianca nella quale possiamo inserire una enorme
varietà di oggetti con facilità, che presenta dei menu ed una barra di stato.
Nell parte sinistra di questa barra di stato sono indicate tutte le marcature che definiscono l'area dove si trova
il cursore.
.
Fra i consueti menu a discesa della finestra principale, come FIle o Edit ve n'è uno denominato Window, e
scegliendo fra le opzioni ch'esso contiene Launcher viene aperta una finestra, che riproduce quello che
appare nella parte inferiore destra della finestra principale di authoring, una serie di 5 icone che permettono
accesso immediato ad altrettante modalità operative e che per ora verranno solo elencate.

Fra parentesi sono indicati i tasti di scelta rapida ed alle medesime modalità si può arrivare scegliendo le
rispettive opzioni dal menu Window.
.
Sito: rimanda alla modalità Site View (F5) oppure Site Map (MAIUSC + F5) a seconda di quale fosse
l'ultima utilizzata prima di passare in Authoring.
 Libreria: apre una finestra ove è possibile salvare gli elementi della pagina che vengono utilizzati più volte
(F6).

Stili: attraverso questa modalità si possono definire degli stili di formattazione da applicare al documento,
siano essi codificati nel documento stesso con il tag <style> oppure da raggiungere tramite un link che
conduca ad un CSS. (F7)

Comportamenti: ecco la finestra che determina quali script sono associati ad un oggetto, quale evento li
attiva e qual'è la loro compatibilità.(F8)

Linea Temporale: direttamente mutuata da applicazioni come Director e Flash, questa parte
dell'interfaccia permette di definire dei "punti chiave" da utilizzare come referenti o marcatori per la
navigazione, oppure da impostare come "fotogrammi chiave" quando si realizza un'animazione (F9)

HTML: com'è facilmente intuibile, cliccando su questa icona si accede all'interfaccia testuale che permette
a chi ne conosce la sintassi di modificare direttamente il codice HTML, JavaScript e DHTML e ne facilita la
comprensione a chi studia questi idiomi.(F10).

Un ulteriore clic sull'icona chiude la rispettiva finestra.

Da tenere sempre a portata di mouse la finestra delle proprietà, il Property Inspector (tasti di scelta rapida
CTRL + F3 oppure Properties dal menu Window)

12.Definire le proprietà generali

Inserire manualmente le marcature che definiscono le caratteristiche generali della pagina

Non.tutti vogliono inserire manualmente le marcature che definiscono le caratteristiche generali della pagina
e dalla finestra Authoring di Dreamweaver si può farlo automaticamente.

Dal menu Modify scegliere Page Properties, oppure premere la combinazione di tasti CTRL + J.
Nella finestra che viene aperta si possono definire, nell'ordine:

Title: il titolo della pagina ovvero la stringa che verrà visualizzata nella barra in alto del browser (o barra del
titolo), è una marcatura dell'intestazione head del documento, mentre le seguenti possono esservi definite
come "stili", ma sono caratteristiche dei contenuti del corpo body.

Background Image: un'immagine da usare come sfondo per la pagina

Background: il colore di sfondo (il bianco è la scelta di default),

Text: il colore del testo (il nero per default),

Link: il colore del testo (o del bordo di immagine) cui è associato un collegamento,

Visited Link: il colore del testo (o del bordo di immagine) di collegamenti già visitati,

Active Link : il colore del testo (o del bordo) che definisce il collegamento attivo,

Document Encoding: la codifica linguistica che viene adottata per il documento,

Tracing Image e relativo indice di trasparenza. Questa opzione fornisce un ausilio per l'impostazione grafica
della pagina.e non determina variazioni nel codice.
Un designer alla ricerca di un particolare, preciso effetto grafico può inserire in questa sede un qualunque
documento GIF, JPG o PNG il cui aspetto intenda ricalcare nella realizzazione di una pagina web.
Impostando un indice di trasparenza di circa 50% per l'immagine tracciante, per esempio, è facile
distinguerne le forme dagli elementi modificabili tramite HTML come tabelle, frames ed immagini: non resta
che ricalcarne il profilo che interessa con quello dei relativi elementi.
Sfruttando un'immagine tracciante durante la realizzazione di un documento, nella modalità grafica Authoring
non vengono visualizzati nè il colore che è stato indicato per lo sfondo, nè l'eventuale immagine prescelta per
tappezzare lo sfondo .
Non si tratta di una modifica apportata al codice, quindi la visualizzazione finale non ne risente ed essa non
apparirà mai nel browser:

Una volta selezionate le opzioni che si preferiscono, dare OK per chiudere la finestra delle Proprietà di
Pagina.

13.Scelta dei colori

Varie possibilità di scelta per quanto riguarda i colori da assegnare agli oggetti HTML

La trattazione delle varie possibilità di scelta per quanto riguarda i colori da assegnare agli oggetti HTML che
lo prevedono come lo sfondo della pagina, il testo, i collegamenti nei loro vari stati di attivazione ed altri
merita qualche attenzione.

È possibile utilizzare la splendida fotografia impostata come sfondo della propria scrivania elettronica quale
fonte di particolari sfumature di colore, e si possono selezionare queste tinte direttamente, senza dover
copiare lo schermo, incollarlo in qualche applicativo, leggerne i valori cromatici...
Con la combinazione di tasti CTRL + J (Modify - Page Properties) viene riattivata la finestra che imposta le
proprietà generali del documento HTML in cui definire un colore di sfondo, ma le funzionalità elencate qui di
seguito sono valide in generale.

La finestra di selezione del colore presenta una tabella di colori oltre a tre icone: è identica per tutti gli
oggetti in cui è presente questa possibilità di scelta ed è indicata dall'icona

Selezionarla fa del puntatore del mouse un contagocce da trascinare in un punto qualunque del desktop
quindi anche nella finestra di un'altra applicazione aperta, per scegliervi un colore.

Per definire la proprietà colore si può scegliere fra i 212 considerati web-safe, ovvero "sicuri" perchè
visualizzabili dal maggior numero di utenti IE o NN sia PC che MAC, semplicemente scegliendone uno fra
quelli presentati nella palette ed al cui inserimento viene affiancato il codice esadecimale.
.
SI può anche limitare la scelta a questi colori cliccando sull'icona del contagocce: selezionando in qualunque
modo un colore non presente in questa palette, la scelta viene automaticamente reindirizzata al colore
web-safe più simile.

L'icona della gomma elimina la scelta effettuata senza inserirne una nuova.

L'utente può inserire colori non presenti in questa tabella definendone il codice od allargare la propria scelta
ai colori di sistema scegliendo l'icona della tavolozza.

14.Meta Tags: gli indispensabili invisibili

Mediante questi tag si trovano infatti definite le parole chiave usate dai motori di ricerca

Oltre a definire le proprietà principali della pagina sarebbe bene definire sin da questo momento altre
caratteristiche molto importanti del documento, anche se per lo più invisibili nella visualizzazione del browser.
L'importanza apparirà chiaramente soprattutto all'atto della pubblicazione su Internet ma esercitarsi fin
dall'inizio con le caratteristiche anche meno evidenti delle pagine web può aiutare a comprenderne la logica
di funzionamento.

Si tratta di elementi di marcatura, i cosiddetti meta tags, che non hanno sempre effetto sull'impaginazione
del lavoro in quanto vengono definiti nell'intestazione head del documento HTML e non nel suo corpo (body:
è quest'ultima la parte del codice che il browser visualizza nella finestra principale come "pagina web") ma
non per questo la loro assenza sarebbe tollerabile.
Un sito web realizzato senza definire alcuno di questi elementi potrebbe essere perfettamente funzionante e
anche di aspetto professionale, ma probabilmente se ne starebbe tutto soletto nel suo angolo del
cyberspazio ricevendo ben poche visite.

Mediante questi tag si trovano infatti definite le parole chiave usate dai motori di ricerca (e dai loro
web-crawler, i "ragni" che scandagliano la rete) per indicizzare il sito e dargli un certo grado di visibilità e
rintracciabilità, vi si può scrivere una succinta ma puntuale descrizione del sito, ovvero la prima parte del sito
stesso che verrà visualizzata rintracciandolo attraverso un motore di ricerca.

Ogni meta tag è composto da un attributo NAME se riferito a proprietà della pagina oppure HTTP-EQUIV se
conttiene informazioni di intestazione HTML, da un valore VALUE, che può essere definito secondo le
proprie necessità e da un contenuto CONTENT che rappresenta l'informazione vera e propria. Ad esempio
avendo definito VALUE="data di creazione" si potrebbe scrivere CONTENT="04/07/1492".

Oltre ad inserire meta tags personalizzati si possono utilizzare quelli già predisposti aprendo dalla finestra
principale di Dreamweaver il menu a discesa Insert, scegliendo Head fra gli elementi e selezionando quello
richiesto.

Le proprietà dei meta tags predefiniti possono essere definite e modificate nella rispettiva istanza della
finestra Property Inspector (palette delle Proprietà).

· Keywords per inserire parole chiave ed aumentare la reperibilità del sito; ).

· Description per inserire una descrizione riassuntiva dei contenuti del sito;

· Base per definire un URL al quale faranno riferimento tutti i collegamenti relativi presenti nel documento (i
link ad "index.htm" sono relativi, mentre quelli ad "http://www.html.it/index.htm" sono invece assoluti) e se
necessario il frame di riferimento.

· Refresh per definire, se necessario, un lasso di tempo trascorso il quale la pagina

viene automaticamente ricaricata dal browser, oppure in alternativa un altro indirizzo URL alternativo cui il
browser viene re-indirizzato.
Può essere di grande utilità trattando contenuti dinamici che vengono aggiornati di frequente (ad esempio le
previsioni meteorologiche..od i prezzi...) far ricaricare automaticamente la pagina ogni minuto significa
assicurarsi che l'utenza avrà sempre a disposizione le informazioni più recenti o per organizzare una "visita
guidata" al sito, nel corso della quale l'interazione dell'utente sarà ridotta al minimo ma lo si porterà a visitare
sequenzialmente le pagine che si sono scelte.
Basta inserire nell'intestazione di ognuna di queste pagine l'opportuno META Refresh che reindirizzi alla
successiva, definire dopo quanti secondi deve avvenire il re-indirizzamento, ed il gioco è fatto.

Esistono molti altri Meta Tags e diversi elementi che vengono definiti nello spazio "invisibile" dell'intestazione
del documento: per visualizzarli, in modalità authoring scegliere Head Content dal menu View.(CTRL +
MAIUSC + W), per controllarli modificare i parametri nel Property Inspector.
Invisible Elements, dallo stesso menu View (CTRL + MAIUSC + V), permette invece di visualizzare nella
finestra di composizione quelle parti del codice scritte nel corpo del documento che non vengono
rappresentate nel browser, come gli script od i commenti del programmatore.
 Inserire Elementi

15.Inserire, definire e modificare testo

Dall'interfaccia Authoring di Dreamweaver si accede facilmente ad ogni elemento di un documento HTML

Dall'interfaccia Authoring di Dreamweaver si accede facilmente ad ogni elemento di un documento HTML e

si possono apportare tutte le modifiche più appropriate.

La finestra principale è una pagina bianca nella quale è possibile inserire subito del testo, eventualmente
incollandovi quanto copiato da un'altra applicazione, solo testo senza formattazione. La formattazione
predefinita del testo è a paragrafi.

Le proprietà del testo sono controllabili mediante il relativo Property Inspector oppure attraverso le opzioni
del menu Text e mediante il menu contestuale.

Similmente a come si farebbe con un word-processor, dal menu Text o dalla finestra delle proprietà Property
Inspector si possono inserire i parametri relativi al blocco di testo selezionato In assenza di una selezione
attiva si definisce come apparirà il testo che verrà inserito subito dopo.
· Format imposta il formato del testo, definendo se si tratti di un paragrafo, di un'intestazione o di un
blocco di testo pre-formattato.

· Font è un menu a scelta multipla dal quale scegliere il tipo di carattere da applicare al testo. L'ultima
voce, Edit Font List, permette di personalizzare la lista di font presenti nel menu.
Senza addentrarsi in una trattazione dettagliata, è bene ricordare che cercare di dare un aspetto
particolare alle proprie pagine utilizzando dei set di caratteri stravaganti può essere rischioso perchè
se questi non sono presenti sul computer che visualizzerà le pagine, il sistema utilizzerà il carattere
predefinito ovvero Times New Roman su PC e Times su Mac.

· Size definisce la dimensione (il corpo) del testo e può essere un valore da uno a sette avendo come
predefinita una dimensione di 3.
La dimensione può anche essere definita relativamente rispetto a 3 con valori preceduti dal segno
meno -o dal più +

· L'icona Color definisce il colore ed è seguita da quella per definire gli stili fisici del testo con Bold, il
grassetto, ed Italics, il corsivo

· Sulla stessa riga tre comandi per allineare il testo a sinistra, al centro, a destra

· Subito sotto le icone per creare liste numerate o puntate ed aumentare o diminuire l'indentazione
del testo, e le potenzialità del menu Text non vanno oltre l'offrire la possibilità di un controllo
linguistico sul documento, mentre il Property Inspector offre tutto quello che serve per creare
collegamenti ipertestuali.
Una precisazione sull'inserimento di ritorni a capo nel testo è necessaria.
Premendo "invio" (o "enter" o "return") si crea un nuovo paragrafo, mentre il ritorno a capo normale, per il
quale basta inserire il comando <BR> per line break nel codice HTML, richiede la combinazione MAIUSC +
INVIO (o RETURN o ENTER).
È consigliabile prendere rapidamente confidenza con questa caratteristica del programma con qualche
esperimento per evitare troppi paragrafi indesiderati..

La semplice marcatura che viene inserita con MAIUSC + INVIO è accessibile anche dal menu Insert con
l'opzione Line Break, oppure dalla finestra Objects: dal menu Window scegliere Objects (CTRL + F2),
aprire il menu con la piccola freccina nera e fra i tipi di oggetti disponibili scegliere la categoria Invisibles.
Il ritorno a capo è rappresentato dall'icona con le lettere "BR".
16. Collegamenti ed ancore
Gestire link ipertestuali con Dreamweaver

Innanzitutto descriviamo il meccanismo di inserimento delle ancore che rappresentano le destinazioni, i punti
di arrivo di collegamenti ipertestuali in diversi punti di uno stesso documento
L'inizio di ogni sezione di questo testo, come "Collegamenti ed Ancore" per la presente, è caratterizzato dalla
presenza di un'ancora alla quale si riferisce il collegamento in alto nella pagina.

Si tratta di oggetti invisibili, che possono essere inseriti mediante la combinazione CTRL + ALT + A, dal menu
Insert scegliendo Named Anchor od ancora scegliendo l'icona dell'ancoretta nella finestra degli oggetti
(CTRL + F2), fra quelli invisibili.
Si avrà così un punto del documento al quale è possibile far riferire un collegamento: è indispensabile
assegnare un nome all'ancora con l'attributo Name..

Per associare un link o collegamento ad un oggetto, sia esso testuale od un'immagine, selezionarlo poi a
scelta seguire una delle seguenti modalità:
· scegliere dal menu Modify l'opzione Hyperlink -Make Link.(CTRL + L) e scegliere a quale file il
collegamento deve riferirsi;

· l'icona browse, la cartella, indica anche nel Property Inspector la possibilità di cercare sul disco un
documento da collegare;

· nel campo Link del Property Inspector inserire direttamente il percorso fino al file desiderato o
sceglierlo dal menu a discesa;

· ridurre la dimensione della finestra principale e dal menu File (per MAC esiste un apposito menu
SIte), con l'opzione Open Site visualizzare la struttura del sito e ridimensionare anche questa
finestra così da poterla affiancare all'altra, poi tornare nella finestra principale e dal Property
Inspector trascinare l'icona
Point to File su un documento del sito.
Questa icona può anche essere trascinata su di un'ancora in un documento aperto per creare un
collegamento interno;

· trascinare dalla struttura del sito, Site View o Site Map, l'icona del documento verso cui si vuole
creare il collegamento nel campo Link del Property Inspector
ed il percorso sarà inserito automaticamente.

La casella Target riguarda l'indirizzamento di un collegamento ad un Frame, individuandolo con il nome

Target Name e sarà trattata nel capitolo relativo ai frames.

17. Immagini
Gestire e inserire immagini all'interno del documento

Le immagini da inserire devono essere contenute in una cartella all'interno della directory del sito, e tentando
di inserire un documento immagine che si trova altrove viene chiesto se si vuole crearne una copia
all'interno del sito.

I formati di immagine che è possibile inserire in un documento HTML sono principalmente il JPEG ed il GIF, il
primo a milioni di colori d il secondo con colori indicizzati da 1 a 8 bit per pixel.
È accettato anche il formato nativo di Macromedia Fireworks, PNG.

Per inserire un'immagine statica od una animazione GIF scegliere dal menu Insert la prima voce, Image,
oppure digitare la combinazione CTRL + ALT + I.
In alternativa, dalla finestra Objects (CTRL + F2) scegliere la categoria Common e selezionare l'icona
Image con il quadretto dell'alberello.

Selezionando l'immagine la finestra del Property Inspector cambia, per mostrare le proprietà relative
all'oggetto immagine oltre ad una sua rappresentazione di anteprima, e l'indicazione del suo "peso" in termini
di kilobytes e quindi di tempo di caricamento.
L'assegnazione di un attributo Name facilita l'identificazione e quindi l'uso dell'immagine quando si tratterà di
assegnarvi comportamenti: esso va inserito nel campo (che non presenta indicazioni) che si trova nel
Property Inspector, a fianco dell'anteprima dell'immagine e sotto i campi delle sue dimensioni.

I campi Width ed Height definiscono le dimensioni dell'immagine, che possono essere variate sia in questa
sede, inserendo i valori in pixel o facendoli seguire dall'unità di misura adatta (cm o mm o pica) che sarà
convertita in pixel nel codice HTML, sia trascinando le maniglie nere presenti nel perimetro di selezione
dell'immagine.
Trattandosi di immagini rasterizzate (bitmap) che non vengono ri-campionate in questo processo, è
sconsigliabile modificarne le dimensioni originali, meglio ridefinirle in un programma di grafica e
successivamente inserirle.
ll tasto Edit situato in basso a destra nel Property Inspector permette di definire e lanciare un editor esterno
di immagini con il quale elaborarle e adattarle.

Sempre nel Property Inspector si incontrano i campi Src e Link, poi Align e Alt.

Sia Src che Link sono accompagnati dall'ormai consueta icona Point to File per "puntare" ad un file, oltre
che dall'icona della cartella che permette di cercare i documenti sul proprio disco.

Il campo Src definisce quale file grafico inserire nella pagina e si può inserire manualmente il percorso,
puntare ad un'immagine presente nel sito trascinando l'icona Point to File sulla mappa /lista del sito ed
indicandola, oppure cercarla nel modo tradizionale con l'icona della cartella.

Il campo Link definisce il collegamento con modalità analoghe a quelle descritte per i collegamenti associati
ad elementi testuali.

Il campo Border si riferisce allo spessore della cornice che circonda l'immagine quando vi è associato un
collegamento: immettere il valore per 0 per non visualizzare alcuna cornice attorno ad una immagine
collegata.

È facilissimo creare una mappa immagine aprendo la relativa finestra con il tasto Map, definendo aree
sensibili e collegamenti. Dreamweaver si occupa di tutto l'HTML necessario inserendo un tag <MAP> alla fine
del documento.

Il campo Align definisce le varie possibilità di allineamento dell'immagine rispetto al testo che la circonda ed
il campo Alt permette di inserire una breve descrizione dell'immagine, che viene visualizzata come "etichetta"
o tool-tip quando il puntatore del mouse vi si trova sopra. Gli utenti che avessero disabilitato la
visualizzazione di immagini nel proprio browser potrebbero almeno leggerne questa descrizione sotto forma
di testo alternativo.

L'allineamento dell'immagine nella pagina rispetto al testo è un argomento delicato la cui trattazione
dettagliata esula dagli obiettivi di questo corso introduttivo all'uso di Dreamweaver, che non pretende di
sviscerare tutte le sottigliezze dell'HTML.
A seconda delle dimensioni dell'immagine e della sua funzione nell'economia strutturale della pagina si
opterà per un'opzione o per l'altra fra quelle disponibili nella completa lista.
Citiamo solo a titolo di esempio la differenza fra l'allineamento Bottom, che allinea la parte inferiore
dell'immagine alla riga di testo in cui si trova, e l'allineamento di tipo Absolute Bottom che invece allinea il
bordo inferiore dell'immagine all'interlinea successiva (ovvero alla parte superiore della linea successiva).

In più, questa istanza del Property Inspector definisce la presenza o meno, e le eventuali dimensioni, di un
bordo, uno spazio vuoto, sopra e sotto l'immagine con
V Space, ai suoi lati sinistro e destro con H Space.

Un realizzatore grafico abituato ad inserire gli elementi con assoluta libertà potrebbe trovarsi limitato nelle
possibilità di allineamento delle immagini rispetto al testo ma non si può non confrontarsi con questa
particolarità dell'HTML che, giova ricordiarlo, è un linguaggio che oggi permette di inserire una varietà di
oggetti ma è stato creato pochi anni fa per la presentazione di documenti prettamente testuali.

Un modo di aggirare qualche problema di impaginazione può essere ricercato nella strutturazione della
pagina attraverso tabelle e nella creazione delle tabelle stesse sfruttando la precisione e la praticità di
posizionamento dei livelli.

Impaginazione: tabelle e livelli

18. Inserimento di tabelle

Con Dreamweaver è molto semplice inserire nelle pagine tabelle

L'utilizzo di tabelle permette di disporre con precisione i contenuti sulle pagine HTML. Con Dreamweaver è
molto semplice inserire nelle pagine tabelle la cui gestione attraverso il codice potrebbe presentare qualche
difficoltà.

Le tabelle possono inoltre essere nidificate (o annidate che dir si voglia) ovvero all'interno di una cella di
tabella si può inserire un'intera altra tabella, di dimensioni compatibili, ma strutturata in maniera del tutto
indipendente dalla tabella che funge da contenitore.
Per assegnare uno stile predefinito ad una tabella, selezionarla e scegliere dal menu Commands l'opzione
Format Table, quindi scegliere il modello di tabella da applicare alla propria. Non è una soluzione molto
creativa, ma rapida.

Una tabella può essere creata scegliendo la combinazione di tasti CTRL+ ALT + T, la voce Table dal menu
Insert oppure l'icona relativa alla tabella nella finestra degli oggetti di utilizzo più frequente, accessibile
scegliendo la prima voce Objects (CTRL+F2) del menu Window.
La finestra degli oggetti permette di inserirne numerosi e di vario tipo: i suoi contenuti possono essere
variamente estesi dallo sviluppatore di Dreamweaver; ci si assicuri per ora che il titolo della finestra sia
Objects e che la sua intestazione, che identifica il tipo di oggetti, sia Common.

Qualunque sia il metodo di creazione prescelto, l'inserimento di una tabella presenta all'utente una finestra di
dialogo che permette di definirne le proprietà generali.
Mediante Rows e Columns si controlllano rispettivamente il numero di righe e di colonne di cui sarà
composta la tabella.
Con il campo Width si definisce la larghezza della tabella in pixel, quindi in modo assoluto; oppure in
percentuale rispetto alle dimensioni della pagina.
Inserire una tabella di larghezza pari a 100% significa disporre di uno strumento di impaginazione che
controlla tutta l'estensione della pagina e la cui struttura si ridimensiona relativamente alle dimensioni della
finestra di browser.
Una cifra inserita nel campo Cell Padding determina la distanza, in pixel, del contenuto delle celle dai loro
bordi, per ottenere ad esempio una "cornice" del colore di sfondo di una cella attorno ad un'immagine più
piccola che vi è contenuta..
Mediante il campo Cell Spacing si definisce in pixel lo spazio fra ogni riga e colonna e la successiva.
Il campo Border consente di definire in pixel lo spessore di un bordo visibile per righe e colonne della tabella.
Se si desidera creare una tabella "invisibile", da utilizzare ad esempio come strumento di impaginazione,
impostare il valore del campo Border a 0.
La tabella sarà comunque visualizzata, solo in fase di realizzazione e con i bordi punteggiati, scegliendo dal
menu View l'opzione Table Borders.

19. Modifica di tabelle

Modificare tabelle con Dreamweaver

Per selezionare una tabella cliccare sull'angolo superiore sinistro della tabella, sul suo bordo inferiore o su
quello destro nella finestra principale di authoring.
Il menu contestuale del mouse presenta l'opzione Select Table
Come accade per altri oggetti in Dreamweaver, selezionando una tabella attorno ad essa compaiono una
cornice e le maniglie di ridimensionamento.
Per allineare una tabella od altro oggetto a sinistra, al centro o a destra nella pagina selezionarla e scegliere
rispettivamente le opzioni left, center, right presentate per la voce Alignment dal menu Modify oppure dal
menu contestuale.

Prestare particolare attenzione all'aspetto della finestra delle proprietà per essere certi di avere la selezione
attiva sulla tabella e non sul suo contenuto, o altrove.
Quando ci si trova all'interno di una tabella, cioè all'interno di una sua cella, sarà visualizzata la finestra delle
proprietà relativa al contenuto di quella cella della tabella, per default il testo, che presenta però un tasto
triangolare nell'angolo inferiore sinistro che permette di controllare le proprietà della cella di tabella entro cui
si sta inserendo contenuto.

La finestra delle proprietà (o Property Inspector, dal menu Window - Properties CTRL+F3) relativa invece
alle tabelle porta scritto Table Name e nella sua parte superiore permette di rettificare i valori impostati nella
finestra di definizione della tabella con i campi Rows, Cols, W e H, CellPad, Cell Space e Border. È inoltre
possibile assegnare un nome alla tabella (Table Name) e definirne l'allineamento a sinistra (left), al centro
(center) o a destra (right) nella pagina, scegliendo l'opzione desiderata dal menu Align o dal menu
contestuale l'opzione Alignment..
La parte inferiore dellta finestra delle proprietà per la tabella permette di eliminare tutte le informazioni sulle
dimensioni delle righe e delle colonne componenti la tabellla con i due tasti Clear Row Heights e Clear
Column Widths
I tasti sottostanti a questi due permettono di convertire il valore impostato come larghezza della tabella in
pixel od in percentuale
Con i campi V Space e H Space si definisce la distanza della tabella dall'angolo superiore sinistro della
pagina.o dell'oggetto entro cui la tabella è contenuta, ad esempio una cella di altra tabella nel caso di
annidamento.
Compaiono poi un campo Bg con l'icona Point to file e quella della cartella, che permette di inserire
un'immagine a fare da sfondo alla tabella e ben quattro campi di selezione del colore.
Il campo Brdr definisce il colore del bordo e Bg lo sfondo della tabella mentre gli altri definiscono i colori delle
sfumature (chiara e scura) del bordo della tabella per dare un effetto di tridimensionalità, ma queste ultime
due proprietà sono interpretate variamente dalle diverse piattaforme.

Sia per l'intera tabella che per righe e colonne, la dimensione può essere modificata trascinandone i bordi
nella finestra principale: la tabella presenta maniglie di ridimensionamento in basso e a destra ed il puntatore
del mouse muta nel cursore di ridimensionamento quando lo si posiziona su di un bordo interno alla tabella.
Il ridimensionamento della tabella comporta un ridimensionamento proporzionale di tutte le celle.

20. Modifica di celle di tabella

Modificare celle con Dreamweaver

Si è detto che quando il cursore è all'interno di una cella essa è selezionata: per selezionare più celle,
premere il tasto SHIFT (Maiuscole) e cliccare all'interno delle altre celle contigue che si desidera selezionare.
Premendo CTRL e cliccando si possono effettuare anche selezioni non continue, selezionando cellle
variamente disposte nella tabella.
Viene visualizzata una cornice nera all'interno delle celle selezionate.
Cliccando in un'area vuota all'interno di una cella è anche possibile tenere premuto il tasto del mouse e
trascinare il puntatore in una cella vicina, estendendovi la selezione.

Le potenzialità di Dreamweaver nella gestione delle tabelle si esplicano appieno nella modifica delle
proprietà di una o più celle: cliccando all'interno di una cella, visualizzare la finestra delle proprietà
(CTRL+F3), uguale nella sua parte superiore a quella del testo e recante la dicitura Cell nella sua parte
inferiore.
In questa finestra impostare l'allineamento del contenuto della cella in senso orizzontale scegliendo fra le
opzioni del campo Horz ed in senso verticale scegliendo le opzioni del menu Vert. Scegliendo Center per
allineamento orizzontale e Middle per quello verticale il contenuto sarà centrato nella cella.
Impostare le dimensioni della cella, larghezza conil campo W ed altezza con H.
Inserire o selezionare un'immagine di sfondo per la cella e definirne eventuali colori di sfondo (Bg) e per il
bordo (Brdr).
La casella di opzione NoWrap permette di disabilitare il ritorno a capo automatico del testo, così che la cella
si espanda automaticamente per accoglierlo.
La casella di opzione Header imposta le celle come intestazioni di tabella e vi associa il tag <TH>, per Table
Headers, applicando una formattazione predefinita di grassetto e centrando orizzontalmente il contenuto
della cella.

Per aggiungere righe o colonne bisogna cliccare all'interno di una cella contigua alla nuova area che si
vuole creare e quindi scegliere dal menu contestuale, o dal menu Modify l'opzione Table - Insert Rows or
Columns.
Nella finestra di dialogo che viene aperta l'utente può scegliere se inserire righe con Rows o colonne con
Columns, in che numero, e se posizionarle sopra (Above) alla riga o o prima (Before) della colonna in cui si
trova, oppure se inserirle sotto (Below) alla riga oppure dopo (After) la colonna.
Scegliendo le opzioni Insert Row oppure Insert Column dagli stessi menu è invece possibile aggiungere
automaticamente una riga od una colonna sopra o prima della posizione in cui si trova il cursore.

Per unire più celle è necessario averne selezionate due o più, contigue e continue (per questa operazione
sono ammesse unicamente selezioni il cui perimetro totale, quindi delle varie celle insieme, abbia una forma
di rettangolo).
A livello di HTML viene modificata l'estensione di una cella: essa si estendera per più righe o colonne, per
una modifica degli attributi Rowspan.o Colspan del tag <TD> che definisce la cella.

Per dividere una cella cliccare al suo interno e scegliere l'icona Split Cell nella finestra delle proprietà, poi
scegliere nella finestra di dialogo in quante righe o colonne si desidera suddividere ulteriormente la cella.

21. I livelli, versatili contenitori

Mediante l’utilizzo di livelli è possibile inserire in una pagina contenuto testuale, di immagini od altri oggetti, e
posizionarlo con assoluta precisione.

Gli oggetti possono essere inseriti direttamente nella pagina oppure ordinati mediante tabelle, ma chiunque
abbia dimestichezza con programmi per l'impaginazione di documenti cartacei non potrà non trovarsi limitato
dalla rigidità della loro struttura. Un modo di posizionare gli elementi con maggiore versatilità è quello di
utilizzare i livelli.
Mediante l’utilizzo di livelli è possibile inserire in una pagina contenuto testuale, di immagini od altri oggetti, e
posizionarlo con assoluta precisione.

I livelli possono essere definiti da diversi tags: <DIV>e <SPAN> sono supportati da entrambi i browsers (
versione 4 e successive) mentre solo Netscape interpreta correttamente i tag <LAYER> ed <ILAYER>.
Per la maggior parte degli utilizzi si presta la scelta predefinita del tag <DIV> : qualora fosse impostato un
altro tag come predefinito si può variare questa impostazione scegliendo la combinazione CTRL+U oppure la
voce Preferences dal menu Edit, quindi selezionare la voce Layers e definire il tag che sarà associato per
default ai livelli.
I livelli così creati possono essere usati per generare delle tabelle (quindi dei documenti "per tutti i browsers")
o possono essere animati, variandone posizione e visibilità lungo una sequenza cronologica ma limitando il
campo di utenza ai navigatori provvisti di un browser versione di superiore alla 4.0.

Diversi browsers, diverse interpretazioni: le versioni precedenti alla 4 di entrambi i browsers visualizzano
correttamente i contenuti dei livelli ma ignorano le informazioni relative alla loro posizione.
Non tutti gli attributi dei tag che definiscono i livelli sono interpretati correttamente dai diversi browsers ed è
necessario adottare soluzioni di compromesso, differenziare il prodotto o "selezionare" la propria utenza in
base al tipo ed alla versione del browser di riferimento.
A differenza delle tabelle, i livelli strutturano quindi documenti che non possono essere interpretati in maniera
omogenea da tutte le versioni dei browsers, ma come si vedrà nel capitolo successivo, relativo alla
conversione di livelli in tabelle e viceversa, Dreamweaver permette di ridefinire tutte le informazioni di
posizionamento dei livelli in tabelle corrispondenti. Benchè i livelli possano essere nidificati (all'interno di un
livello ne puo' esssere contenuto un altro), per poter effettuare questa conversione i livelli non devono
presentare sovrapposizioni e quindi non possono presentare annidamenti.

Si è accennato alla versatilità dei livelli ed in effetti le potenzialità del loro uso sono molteplici e spaziano
dalla creazione di strutture di navigazione a semplici animazioni, all’impaginazione con strumenti di
precisione che, con le debite proporzioni, sono simili a quelli dei più diffusi strumenti per la grafica.

Impostare righelli (menu View - Rulers - Show oppure combinazione CTRL+SHIFT+ALT+R) e griglia (da
menu View -Grid- Show, o la combinazione CTRL+ALT+SHIFT+G), con eventuali opzioni di snap per
lavorare con riferimenti fissi. Snap significa riposizionamento automatico degli oggetti si una griglia.

Per non confondersi è bene impostare i valori di Snap come uguali a quelli della griglia visualizzata: dal menu
View scegliere Settings e scegliere nella finestra di dialogo in alto il valore della distanza fra righe e colonne
della griglia e nella parte inferiore i valori di riposizionamento automatico.

22. Inserire e modificare livelli

Utilizzare i livelli, per inserirli e modificarli

Per inserire un livello scegliere la voce Layer dal menu Insert o trascinare nella finestra principale l’icona
Draw Layer dalla barra Objects -Common.

Per disegnare un livello scegliere la stessa icona e definire le dimensioni del livello cliccando e trascinando
nella finestra principale.

Un livello appena creato non è selezionato, ma è selezionato il suo contenuto (la finestra delle proprietà è
quella caratteristica del testo.

Per selezionare un livello cliccare sull’icona che lo rappresenta nella finestra Layers (tasto F11 o menu
Window - Layers), in alternativa cliccare sul bordo del livello oppure sulla sua "maniglia" di selezione .
Per selezionare un livello è possibile anche utilizzare l’icona gialla che dalla finestra principale definisce la
posizione del tag relativo ad un oggetto nel codice (per visualizzarla scegliere Invisible Elements dal menu
View).
Osservare la posizione di questa icona aiuta anche ad individuare la posizione di eventuali livelli annidati. In
questo caso l'icona gialla compare all’interno del livello che funge da contenitore.

Dalla finestra delle proprietà assegnare un nome al livello nel campo Layer ID: ciò lo identificherà nella
finestra Layers (menu Window - Layers). Alcuni oggetti non necessitano necessariamente di un nome, ad
esempio una immagine se non è oggetto di scripting, ma i livelli rientrano fra gli oggetti che Dreamweaver
deve identificare con un nome e quindi ne viene inserito uno predefinito in assenza di scelta dell'utente,
numerandoli progressivamente a mano a mano che vengono creati
.
Mediante i campi L e T definire la posizione del livello relativamente all’angolo superiore sinistro della
pagina. Se il livello è inserito dentro un altro livello queste coordinate di posizionamento sono relative al livello
che fa da contenitore. Posizionando il mouse sulla "maniglia di selezione" del livello, il puntatore,assume la
forma di freccia di riposizionamento ed è possibile trascinare il livello, spostandolo.
Si noti come l'icona che definisce il livello non cambi posizione, in quanto vengono.modiificate le proprietà L e
T (ovvero posizione rispetto ai lati sinistro e superiore della pagina o del contenitore.

I campi W ed H determinano le dimensioni del livello definendone rispettivamente larghezza ed altezza, in

pixel. Si possono anche ridimensionare i livelli, dopo averli selezionati, nella finestra principale, posizionando
il mouse sulle "maniglie" nere.: ..

Inserire eventuali immagine e colore di sfondo mediante i campi Bg e Bgcolor.

Con Z-Index si definisce l’ordine di sovrapposizione dei livelli: un indice maggiore indica un livello
visualizzato sopra ad un altro con indice z minore.
Per controllare che un livello vienga posto sopra ad una altro, verificare nella finestra Layers che il suo nome
sia visualizzato sopra al livello che si desidera porre in secondo piano.
Più semplicemente che attraverso la finestra delle proprietà, si può variare il relativo ordine di
sovrapposizione di un livello semplicemente trascinandolo sopra o sotto gli altri livelli nella finestra Layers.
La visibilità di un livello può essere disattivata scegliendo hidden dal campo Vis (l’opzione inherit determina
ereditarietà delle proprietà del contenuto da quelle del livello contenitore. si utilizza in caso di livelli annidati,
mentre default non definisce specifiche).
Lo stato di visibilità per ogni livello è indicato dalla presenza di un'icona nella finestra dei Layers, accanto al
nome del livello in questione: se la visibilità è attiva il livello sarà contraddistinto dalla rappresentazione di un
occhio, che sarà chiuso in caso di visibilità impostata su Hidden. L'icona sarà assente per impostazione di
visibilità di default.

A seconda del tag prescelto per definirli, i livelli dispongono di diverse altre proprietà. L’interpretazione di
queste caratteristiche è però poco omogenea.
Sono di seguito elencate le proprietà disponibili per i livelli definiti mediante il tag <DIV>.
Overflow permette di definire se saranno visualizzate barre di scorrimento per un livello il cui contenuto
(es.: immagine) ha dimensioni maggiori del livello stesso.
Clip indica l’area visibile o area di ritaglio con i campi L (sinistra), T (alto), R (destra), B (basso).

È possibile ordinare automaticamente la disposizione dei livelli sulla pagina scegliendo le varie opzioni
presenti nella voce Layers dal menu Modify.

Nella finestra dei Layers è presente una casella di opzione recante la critta Prevent Layer Overlaps: aver
selezionato questa opzione disabilita la sovrapposizione dei livelli.
Senza avere disabilitato la sovrapposizione non sarà possibile convertire i livelli in tabelle.
P ur avendola disabilitata, sebbene non sia possibile trascinare un livello sopra l'altro, si può forzare la
sovrapposizione modificando le dimensioni di livelli esistenti dalla finestra delle proprietà, od inserendone di
nuovi dal menu, ma si incontreranno ostacoli all'atto di convertire i livelli in tabelle.
D'altro canto questo è solo uno degli usi dei livelli: si possono ottenere molteplici funzionalitài, che vanno
molto oltre la mera impaginazione, ed in vari casi sarà necessario mantenere abilitata la sovrapposizione dei
livelli, ad esempio per creare delle animazioni con effetti tridimensionali di oggetti che passano l'uno davanti
all'altro.

23. Da livelli a tabelle, e ritorno

Una peculiarità di Dreamweaver è quella di permettere allo sviluppatore di convertire una qualsiasi pagina in
un documento composto da livelli

Una peculiarità di Dreamweaver è quella di permettere allo sviluppatore di convertire una qualsiasi pagina,
organizzata mediante tabelle, in un documento composto da livelli, per sfruttare la maggiore versatilità di
questi "contenitori" nel posizionamento degli elementi ed infine riconvertire il tutto in una tabella.

Aprire un documento strutturato mediante tabelle e scegliere dal menu Modify - Layout - Reposition
Content Using Layers.
Nella finestra di dialogo selezionare le opzioni Prevent Layer Overlaps e Show Layers Palette per evitare la
sovrapposizione dei livelli e per visualizzare la finestra dei livelli,inoltre selezionare se lo si desidera le opzioni
relative alla visualizzazione (show) della griglia ed al riposizionamento automatico (snap) dei livelli.

Verificare che sia disabilitata la sovrapposizione dei livelli: deve essere selezionata la casella Prevent Layer
Overlaps nella finestra Layers (o l’opzione corrispondente dal menu View).

Per la seguente operazione non inserire livelli da menu o modificarne le proprietà relative a posizione e
dimensioni tramite la finestra delle proprietà (CTRL+F3), ma crearli dalla finestra Objects - Common e
ridimensionarli nella finestra principale.
consultare eventualmente il paragrafo relativo alle proprietà dei livelli
Definire la posizione dei contenuti della pagina ed il colore dei livelli, che diverrà il colore di sfondo delle celle
di tabella.

Scegliere dal menu Modify - Layout l’opzione Convert Layers to Table: viene generata automaticamente
una pagina definita da una tabella "invisibile", che utilizza le informazioni di posizionamento dei livelli.
Si ottiene così l'effetto desiderato per la posizione delle celle della tabella e degli elementi che esse
contengono senza perdere la compatibilità "per tutti" che non è garantita da una pagina costruita con livelli.
L’utilizzo di questa tecnica permette di ridefinire l’aspetto di tabelle esistenti o di crearne di molto complesse
senza doverne calcolare i valori: nella finestra di dialogo della conversione si può scegliere se utilizzare
un’immagine trasparente da porre nelle celle vuote e se eliminare le celle di dimensioni inferiori ad un valore
prescelto (4 pixel viene proposto come predifinito).
Si dispone quindi di uno strumento grafico di precisone che evita la scrittura di codici potenzialmente
complessi.

Per modificarne l’aspetto si possono manipolare le proprietà della tabella oppure ripristinare lo stato
precedente scegliendo dal menu Modify - Layout - Reposition Content Using Layers.

A queste funzioni si accede anche dal menu File - Convert che permette con l'opzione Table to Layers di
convertire tabelle in livelli, e attraverso l'opzione 3.0 Compatible di scegliere se convertire i livelli in tabelle, se
tradurre eventuali indicazioni di stile CSS in marcature HTML, od entrambi.

Modelli e librerie

24. Inserimento rapido: la finestra degli oggetti

Le diverse voci disponibili nel menu della finestra degli oggetti

La finestra degli oggetti, attivabile con la combinazione di tasti CTRL+F2, o dal menu Window scegliendo
l'opzione Objects, permette di inserire molti oggetti oltre alle immagini: tabelle, livelli, plug-ins...
Per cambiare tipo di oggetti disponibili in questa finestra aprire il menu di opzioni con il tastino triangolare, a
destra dell'intestazione nella finestra Objects, e scegliere Common. Per inserire i vari oggetti, rappresentati in
questa finestra dalle rispettive icone, è generalmente sufficiente farvi clic sopra o trascinarne l'icona nel
documento, dalla finestra degli oggetti a quella principale. In alcuni casi l'utente può scegliere fra varie
opzioni mediante una finestra di dialogo

Le diverse voci disponibili nel menu della finestra degli oggetti sono relative all'inserimento di altri tipi di
oggetti. Scegliendo Forms essa permette di aggiungere alla pagina i principali elementi dei moduli, mediante
Head consente la definizione dell'intestazione del documento e con Invisibles permette l'inserimento rapido di
elementi invisibili come spazi, ritorni a capo, ancore e commenti ma anche script personalizzati o potenti
applicazioni basate su un computer remoto, le cosiddette server side includes che in quanto inclusioni
vengono solo richiamate dal codice HTML.
Si possono aggiungere altre voci a questo menu creando una nuova cartella dentro a Objects nella cartella di
installazione di Dreamweaver (con un percorso di tipo
C:\Programmi\Macromedia\Dreamweaver\Configuration\Objects\NuoviOggetti).
Inserendoli invece nella cartella con percorso tipo C:\...\Objects\Common, gli oggetti addizionali saranno
visualizzati assieme predefiniti come comuni (immagine, tabella, livello, etc.)
Sono disponibili ad esempio estensioni per l'inserimento di caratteri speciali (intestazione Characters) come il
segno del copyright o quello del trademark, od altri definiti dall'utente.

Oltre a consentire all'utente di inserire rapidamente ed in diversi modi gli oggetti che compongono le pagine,
con Dreamweaver come con altri programmi si possono definire dei modelli, o Templates, che possono
essere utilizzati come struttura per realizzare una serie di documenti con caratteristiche comuni.
L'utente ha anche la possibilità di definire come Oggetto di libreria un segmento HTML che intende riutilizzare
più volte (ad esempio una stessa intestazione da riproporre su diversi documenti).
25. Templates: modelli per realizzazione seriale
Definire una impostazione grafica adatta alla realizzazione di una serie di documenti

In teoria un qualunque file HTML aperto in Dreamweaver può essere utilizzato come modello, ma senz'altro il
primo passo da compiere consiste nell'individuare e definirei una impostazione grafica adatta alla
realizzazione di una serie di documenti, accomunati da alcuni elementi, ma diversi l'uno dall'altro per una
parte di contenuto.
Realizzando una serie sulla base del modello, sarà possibile apportare modifiche multiple a tutti i documenti,
senza doverli aprire singolarmente, agendo sul modello.
È anche possibile definire con grande semplicità singole porzioni di codice, quindi elementi o gruppi di
elementi, da inserire ripetutamente in vari documenti anche non legati ad una serie mediante la libreria di
oggetti

Un modello definisce un'impostazione grafica generale.

Si pensi a titolo di esempio alla realizzazione di un catalogo: la struttura di base delle pagine manterrà un
aspetto omogeneo e sarà il contenuto, in questo caso il singolo articolo di catalogo presentato in una pagina,
a differenziare i documenti della serie fra di loro.
Una pagina strutturata mediante tabelle potrebbe essere un buon punto di partenza, poichè permette di
separare agevolmente i contenuti "fissi" da quelli "variabili".

Per definire un modello da un documento esistente, salvarlo come Template scegliendo dal menu File-
Save as Template.

A queste opzioni corrisponde la conversione del documento HTML in un documento con estensione DWT
(DreamWeaver Template), che viene registrato in una cartella Templates creata appositamente dal
programma all'interno del Local Root Folder.

Per creare un modello ex-novo, cominciando a lavorare su di un documento vuoto, visualizzare la finestra
dei Templates scegliendo la relativa opzione dal menu Window, o con la combinazione CTRL+F11.
Premere il tasto New in questa finestra, assegnare un nome al modello ed aprirlo facendo doppio clic
sull'icona che lo identifica o premendo il pulsante Open.

Un modello definisce le proprietà di pagina (CTRL+J) per tutti i documenti che vi saranno basati: le
proprietà di pagina definite per un modello saranno riproposte su tutti i documenti che ne saranno generati e
se si apporteranno modifiche al singolo documento sarà possibile solo variarne il titolo ma non, ad esempio,
il colore o l'immagine di sfondo.

Il documento è stato definito come modello ma allo stato attuale esso è ancora del tutto inutile: se lo si
utilizzasse per generare dei documenti HTML non sarebbe possibile con Dreamweaver modificarne alcun
contenuto, è pertanto necessario definire regioni modificabili.

Le opzioni illustrate qui di seguito sono accessibili anche dal menu contestuale del mouse scegliendo le voci
fra quelle presentate da Editable Regions..

Per definire una qualunque zona del documento (ad esempio una cella di tabella od un paragrafo di testo),
come area diversa per ogni pagina, selezionarla e scegliere dal menu Modify il comando Templates e di
seguito la voce Mark Selection as Editable.
Assegnare un nome alla regione modificabile

Questa operazione va ripetuta per tutti gli elementi del progetto che dovranno essere sostituiti uno per uno
nei singoli documenti, le aree non comuni della serie.

È anche possibile definire come modificabili delle zone prive di qualsiasi contenuto scegliendo dal menu
Modify - Templates - New Editable Region.

Tutte le zone che non sono state identificate come regioni modificabili rimarranno fisse nel modello e saranno
riprodotte senza possibilità di modifica su tutti i documenti che lo utilizzano.

Per creare un documento da modello scegliere dal menu File l'opzione New From Template.
Viene creato un documento nel quale si può inserire contenuto solo posizionando il cursore in un'area
definita nel modello come modificabile.

Per applicare un modello ad un documento esistente, aprire il documento e premere il pulsante Apply To
Page nella finestra dei Templates (CTRL+F11).
In alternativa scegliere da menu Modify - Templates - Apply Template to Page.
All'utente viene richiesto di definire le aree modificabili di destinazione per i contenuti del documento cui il
modello viene applicato.

Inserire i contenuti desiderati e salvare come un normale documento HTML, ripetendo l'operazione per tutti i
documenti componenti la serie..

Per attuare modifiche multiple all'impostazione generale di una serie generata partendo da un Template
non è necessario aprire i singoli documenti ma semplicemente il modello, premendo il pulsante Open nella
finestra dei Templates.

Apportando una modifica, quale ad esempio il ridimensionamento di una cella definita come intestazione
comune a tutta la serie, quando si salva il Template si può scegliere se ridefinire o meno quella caratteristica
per tutti i documenti.

Viene richiesto se si desidera avviare una ricerca automatica di documenti che utilizzano il modello per
aggiornarli automaticamente ed è possibile definire se ricercare ed aggiornare fra tutti i documenti del sito
scegliendo, nella finestra di dialogo degli aggiornamenti relativi ad elementi riutilizzabili, dal menu Look in
l'opzione Entire Site e selezionando un modello, oppure se si desidera limitare l'aggiornamento ai documenti
che utilizzano il modello attivo, scegliendo Files That Use dallo stesso menu.
A tutti i documenti così definiti viene applicata la modifica apportata al modello.

Una volta definito con assoluta certezza il contenuto dei singoli documenti della serie è possibile staccare la
pagina dal Template scegliendo l'opzione Detach From Template fra quelle disponibili nella voce Templates
del menu Modify, si veda inoltre la sezione relativa ai commenti HTML inseriti da Dreamweaver nelle pagine
basate su modelli

26. Riutilizzare elementi: gli oggetti di libreria

Una libreria di oggetti personale da cui attingere rapidamente porzioni di contenuto di utilizzo frequente

Oltre a definire una struttura per la realizzazione di una serie, è spesso desiderabile avere a disposizione una
libreria di oggetti personale da cui attingere per introdurre rapidamente nei documenti porzioni di contenuto
di utilizzo frequente.

Visualizzare la finestra della libreria scegliendo da menu Window - Library o il tasto F6. Da questa finestra è
possibile, con modalità del tutto analoghe all'inserimento e alla modifica dei modelli, creare, modificare e
cancellare oggetti HTML da inserire ripetutamente nei documenti, oggetti che possono necessitare di
frequenti aggiornamenti, con la differenza che in questo caso non si definisce una impostazione grafica
generale per il documento ma si identifica un oggetto o gruppo di oggetti da inserire in qualunque documento
del sito, sia esso legato ad modello o meno.

Il modo più semplice di creare un oggetto di libreria consiste nell'aprire un documento ed al suo selezionare
una regione che si desidera utilizzare come oggetto di libreria, e trascinare la selezione nella finestra della
libreria, in cui ne viene visualizzata un'anteprima.

Con questo procedimento è possibile ad esempio definire un'intestazione da inserire solo nei documenti in
cui lo si desidera e modificare tutti i documenti che la utilizzano qualora ciò si renda necessario, definendo a
quali documenti apportare le modifiche con la stessa modalità utilizzata per la modifica dei modelli.
27. Commenti di Dreamweaver ed elementi riutilizzabili
L'opzione Dreamweaver HTML Comments e Non-Dreamweaver HTML comments

Dreamweaver identifica la presenza di modelli ed oggetti di libreria inserendo nel codice dei documenti che li
utilizzano dei commenti HTML, invisibili in fase di visualizzazione nel browser ma ben riconoscibili da
un'esame del codice.
Per rimuovere questo tipo di marcatura da un documento generato a partire da un Template oppure
contenente uno più oggetti di libreria, si ha a disposizione dal menu Commands l'opzione Clean Up HTML.

La "pulizia" del codice permette, scegliendo nella finestra di dialogo le relative opzioni, di rimuovere da un
documento HTML non solo la marcatura relativa a templates od oggetti di libreria, ma di attuare una
rimozione automatica di eventuali tag <font> superflui (Combine nested font tags whren possible) o di altra
marcatura reasasi inutile perchè nidificata (Redundant nested tags) o vuota (Empty tags).

Selezionando la casella Dreamweaver HTML Comments si rimuovono le informazioni che identificano al suo
interno le aree modificabili del template su cui esso è bastao, oppure che segnano gli oggetti di libreria che
contiene.
Questa opzione va selezionata solo quando si è assolutamente certi di non dover più appportare modifiche
alla struttura del modello od al contenuto della libreria ed è sconsigliabile farlo se non è necessario
alleggerire drasticamente il codice del documento, poichè vanno perse definitivamente le informazioni
relative agli oggetti comuni ed una loro successiva modifica, siano essi modelli od oggetti di libreria, non avrà
più effetto sui documenti che li utilizzano e quindi non sarà possibile effettuare l'aggiornamento automatico.
Capita di frequente però che quando è già tutto ultimato, il cliente decida che la cella che fa da sfondo al
titolo della serie debba essere di un altro colore.

L'opzione Non-Dreamweaver HTML comments della finestra di dialogo della ripulitura del codice rimuove tutti
i commenti HTML e va prestata particolare cautela nell'applicarla poichè, ad esempio, JavaScript e le sue
funzioni sono definite all'interno di commenti HTML, interpretati dal browser ma non visualizzati sotto forma di
testo se non nell'enunciato del codice.
Selezionare questa casella di opzione rimuoverebbe di fatto eventuali funzionalità JavaScript dalla pagina.

Gestione dei frames

28. Definizione di Frames

Un documento HTML può essere suddiviso in più files, i cui contenuti vengono visualizzati in determinate
aree della stessa pagina, i cosiddetti frames.

La pagina web così creata è solo un contenitore atto a definire la presentazione di altri files, che ne
rappresentano invece il contenuto.
Oggetti costanti all’interno del sito, presenti ad esempio in una barra di navigazione ricca di elementi grafici,
possono essere caricati una sola volta da appositi documenti e mantenuti accessibili finchè richiesto, oppure
nella finestra definita da un frame si può caricare un'altra pagina completamente diversa, pubblicata su di
altro sito e della cui reperibilità si sia certi.

Il documento che ha funzione di contenitore è detto frameset e suddivide la pagina in righe o colonne dette
frames, in cui vengono caricati i vari documenti.

Esso definisce quale file verrà rappresentato in quale frame della pagina.

Ne determina inoltre le altre proprietà di rappresentazione, quali le dimensioni, la possibilità di ridimensionarlo

e la presenza di barre di scorrimento.
È necessario assegnare un nome ad ogni frame all’interno del documento frameset: non si tratta del nome
del file visualizzato, come frame1.htm , bensì del nome dello spazio che a quel file viene destinato sulla
pagina, ed esso è indispensabile per indirizzare correttamente i collegamenti ipertestuali fra i vari documenti
che compongono il frameset..

L’utilizzo di un frameset prevede l’utilizzo di almeno tre documenti HTML: il frameset che funge da
contenitore ed i singoli frames che vi sono contenuti, che possono essere due o più.

Similmente alle tabelle, i framesets possono anche essere nidificati (annidati) ma almeno inizialmente è bene
non eccedere con questa seppur utile tecnica, per non complicare eccessivamente la gestione del sito.

È importante ricordare che generando un frameset: si realizza una pagina il cui aspetto è determinato
dall’integrazione di tre o più documenti; e che i riferimenti ai vari frames, sia nella definizione della pagina che
nell’indirizzamento dei collegamenti, devono specificare il nome del frame nel quale caricare un dato
documento oltre al nome del file che vi deve apparire.

29. Creazione di Frames

Dreamweaver crea un frameset senza nome, composto da due frames anch’essi senza nome.

Per suddividere una pagina in diversi frames, scegliere dal menu Modify - Frameset - Split Frame… e
decidere in che senso operare la divisione: Split Frame Up o Down definiscono un frameset suddiviso a
righe, mentreSplit Frame Left o Right lo dividono in due frames affiancati come colonne.

Dreamweaver crea un frameset senza nome, composto da due frames anch’essi senza nome.

Deselezionando dal menu View - l'opzione Frame Borders si ottiene un’anteprima del frameset fedele a
quanto sarà visualizzato dal browser.
La gestione di questo "sistema" di documenti sarà facilitata combinando le funzionalità della finestra delle
proprietà e quelle della finestra relativa ai frames (dal menu Window -Frames oppure CTRL+F10).

Per non rischiare confusioni sarebbe bene assegnare subito dei titoli
(assegnando le proprietà della pagina con Modify - Page Properties) ai diversi documenti aperti: il titolo del
frameset sarà visualizzato nella barra del browser mentre i titoli assegnati ai frames serviranno solo come
riferimento allo sviluppatore.

Per selezionare un frame cliccare sulla sua rappresentazione nella finestra Frames o su di un suo bordo
nella finestra principale: cliccando al suo interno nella finestra principale di Authoring ci si trova nel
documento che viene caricatio in quel frame e si possono definire le proprietà di pagina per quel documento..

Per selezionare un frameset fare clic sulla sua cornice di un frame nella finestra principale (vper
visualizzarla scegliere Frame Borders dal menu View ) oppure sulla cornice esterna nella finestra Frames.

Per definire il contenuto dei Frames, selezionare un frame dalla finestra Frames e definire quale file vi verrà
caricato mediante il campo src nellla finestra delle proprietà.

È anche possibile inserire direttamente i contenuti nel frame desiderato dalla finestra principale: selezionare il
frame desiderato, quindi digitare od incollarvi il contenuto.

30. Proprietà dei Frames

Dopo avere selezionato un frame nella finestra principale od in quella dei Frames, definirne le proprietà.

Dalla finestra delle proprietà assegnare un nome (Name) al frame.

Detrminare quale documento vi sarà caricato con il campo Src.
Definire se esso sarà dotato di barre di scorrimento (Scroll) qualora le dimensioni del suo contenuto
eccedessero rispetto a quelle definite nel frameset e se l’utente finale potrà o meno ridimensionarlo (No
resize).
Determinare se il frame presenterà una cornice (Border), di che spessore e colore.

Con Margin Width e Margin Height definire la distanza fra il bordo del frame ed il suo contenuto.

31. Proprietà dei Frameset

Le proprietà del frameset sono accessibili nella relativa istanza della finestra delle proprietà e si riducono alla
definizione delle dimensioni dei frames in percentuale, in pixels o relativamente alle dimensioni degli altri
frames, oltre a determinare l’eventuale presenza, l’aspetto ed il colore delle "cornici" dei frames che esso
contiene. Quest’ultima proprietà è gerarchicamente subordinata alla definizione della proprietà Border per i
frame contenuti.

Per salvare un frameset ed i relativi frames:scegliendo dal menu File l’opzione Save Frameset viene
registrato il documento che funge da contenitore per i frames. Cliccando all’interno di un frame e scegliendo
File - Save si salva il documento che occupa quel frame.

Per registrare tutti i documenti aperti selezionare dal menu File - Save All: sia frameset che frames
vengono così registrati.
Quando il cursore è al''interno di un frame nbella finestra principale, scegliendo l'opzione Save dal menu File
si registrano le modifiche apportate al documento caricato in quel frame, non al framest.

32. Collegamenti
Gestione dei collegamenti ipertestuali nei documenti suddivisi in più frames

La gestione dei collegamenti ipertestuali nei documenti suddivisi in più frames può presentare qualche
difficoltà solo se non si segue questo fondamentale accorgimento: per caricare un documento in un frame
diverso da quello ove si trova l'oggetto (es. testo od immagine) cui è associato il link, è necessario
direzionare il collegamento definendo l'attributo target del tag <A HREF> che identifica il collegamento e che
si riferisce al nome del frame..

Selezionare l'oggetto cui associare il collegamento (il "pulsante" la cui pressione deve determinare il
caricamento di una pagina, e mediante la finestra delle proprietà definire a quale documento esso deve fare
riferimento inserendo il nome del documento (es file01.htm) e definire il Frame di caricamento mediante il
menu del campo Target.

Il menu Target permette di indirizzare correttamente i collegamenti all'interno di un frameset.

Si tenga presente che in assenza di definizione dell'attributo target il documento collegato viene caricato nello
stesso frame in cui si trova il collegamento.
Lo stesso effetto si ottiene selezionando l'opzione predefinita _self fra quelle disponibili nel menu Target.
Oltre a presentare come sue opzioni la scelta fra i frames nominati dall'utente, il menu Target permette di
caricare la pagina collegata in vari modi.

Scegliendo l'opzione _blank il documento viene caricato in un nuova finestra di browser (viene affiancata a
quella principale una ulteriore sessione di Explorer o di Navigator in cui si carica il documento ed è possibile
così invitare l'utenza ad una navigazione "parallela", all'esterno del frameset.

L'opzione _parent permette di far risalire gerarchicamente il collegamento, ovvero, nel caso di un frameset
non nidificato, di tornare alla navigazione a pagina piena e nel caso di framest nidificato, di spostarsi ad un
livello superiore cioè di caricare il documento collegato nel frame che contiene il frameset in cui è posto il
collegamento.
Scegliendo l'opzione _top il documento collegato viene caricato a "piena pagina" nel browser e quindi si
riporta l'utente ad una navigazione in un singolo documento, che può eventualmente esere definito anch'esso
come frameset ma che non avrà più nulla a che fare con quello di partenza.

Prestando attenzione al corretto inserimento delle opzioni disponibili per il campo target anche la gestione dei
frameset più intricati può essere molto semplice.

Timelines

33. Definizione di timeline

Dreamweaver permette di usare i livelli in molti modi diversi ed uno dei più appariscenti è rappresentato dalla
possibilità di variarne le proprietà

Oltre che come strumenti di impaginazione per la creazione di documenti statici, Dreamweaver permette di
usare i livelli in molti modi diversi ed uno dei più appariscenti è rappresentato dalla possibilità di variarne le
proprietà (la posizione, l’indice Z, la visibilità) lungo una sequenza cronologica, la Timeline.
Si tengano presenti le informazioni relative alla compatibilità delle pagine strutturate a livelli con i diversi
browsers, come indicato nella sezione relativa ai livelli (lezione n.6)

Per controllare al meglio tutte le caratteristiche nella fase successiva dello sviluppo, visualizzare sia la
finestra dei Layers che quella delle Timelines (basta selezionarne la linguetta a e trascianerla altrove) e
prendere confidenza con il loro uso combinato.

Il modo più semplice di creare un’animazione consiste nel selezionare un livello e scegliere dal menu
contestuale l’opzione Record Path oppure dal menu Modify - Record Path of Layer.
Trascinando il livello nella finestra principale si definisce un percorso, una sequenza di coordinate di
posizionamento, che viene visualizzata nella finestra Timelines come una serie di punti, detti keyframes, o
fotogrammi-chiave, sulla linea cronologica del livello.
I fotogrammi della timeline non definiti come keyframes sono il risultato dell'interpolazione automatica fra il
keyframe precedente ed il successivo.

L'unità di misura è quella dei fotogrammi e la velocità di riproduzione dell'animazione viene controllata tramite
il campo FPS ovvero frames per second, fotogrammi al secondo.
Dreamweaver ricorda con un messaggio che le dimensioni dei livelli non sono variabili dinamicamente,
ovvero lungo la sequenza della timeline, a meno di creare una pagina "IE-4 only", che non sarà visualizzata
correttamente dagli utenti Netscape.
Applicando modifiche ad indice di profondità, visibilità e posizione dei livelli in funzione del tempo è
comunque possibile creare vivaci effetti animati.

È possibile anche, avendo selezionato un livello, decidere di aggiungerlo alla sequenza cronologica senza
averne definiito i diversi stati, scegliendo l'opzione Add To Timeline dal menu contestuale oppure l'opzione
Add object to timeline dal menu Modify.
Viene così inserita una sequenza "vuota", cioè senza variazioni delle proprietà lungo il tempo, nella timeline.
È quindi possibile aggiungere fogrammi chiave e modificarne le proprietà per dare a questa animazione
l'aspetto desiderato.

34. Modificare la timeline

Controllo sull’animazione, movimento sul percorso e prolungamento della durata

Per muovere tutto il percorso selezionare l'intera sequenza nella finestra Timelines quindi trascinare il
livello sulla pagina.
I cambiamenti con l’intera sequenza selezionata influenzano tutti i keyframes.

Trascinare l’ultimo keyframe per prolungare la durata della sequenza inserita nella timeline. Gli altri
keyframes vengono riposizionati in maniera propoirzionale lungo la nuova durata della sequenza.

Premere Control (o Command) e trascinare l’ultimo keyframe per spostarlo senza influenzare gli altri.
Premendo Control è anche possibile inserire nuovi keyframes.

Per aggiungere un keyframe scegliere l'opzione Add keyframe dalla voce di menu Modify - Timelines.
Per cancellare un keyframe selezionarlo nella finestra delle timeline e premere il tasto canc sulls propria
tastiera (non viene cancellato il livello ma solo ogni informazione sulle sue proprietà in quel fotogramma.

Selezionando un keyframe non posto all'estremità della sequenza, è possibile trascinarlo per farlo scorrere
lungo la sequenza: le proprietà del livello animato non vengono modificate ma se ne varia l'occorrenza
temporale, ovvero il momento in cui esse si verificano.

Un elevato grado di controllo sull’animazione è ottenibile attraverso la modifica dei singoli keyframes.
Il keyframe di per sè non possiede proprietà in quanto rappresenta solo un istante di una sequenza.
Cliccando sui singoli keyframes si possono invece controllare le proprietà dei livelli relativamente ad ogni
istante.

Per modificare la posizione di un livello in un Keyframe, selezionare il keyframe e nella finestra principale
trascinare il livello nella nuova posizione, oppure definirne la nuova posizione mediante i campi W e T del;la
finestra delle proprietà.
Per nascondere e mostrare un livello in vari istanti (es.: effetto lampeggiante) scegliere per i keyframes di
una sequenza alternativamente hidden e visible, nel campo Vis della finestra delle proprietà, o selezionando
per ogni keyframe l'opzione desiderata nella finestra Layers, attivando o meno l'icona dell'occhio..

Si possono ottenere effetti molto accattivanti modificando la profondità (Z-Index)

dei livelli nei diversi keyframes.
Per una semplice simulazione di effetto tridimensionale descrivere un percorso con un livello (A) facendolo
transitare una volta avanti ed indietro sopra di un altro livello (B), avente quest'ultimo indice Z-Index pari a 2.
L'indice di profondità (o di sovrapposizione) Z-index minore indica un livello di sovrapposizione inferiore ed in
questo caso il livello (A) apparirà dietro a (B) quando si imposterà Z-Index =1 e davanti ad esso quando si
inserirà Z-Index>=3

35. Controllo dell'animazione

Esecuzione automatica e ripetizione ciclica

Per osservare un'anteprima dell'animazione tenere premuto il pulsante identificato dalla freccia verso destra
presente nella finestra delle timelines.

La casella di opzione Autoplay consente l’esecuzione automatica dell’animazione al caricamento della

pagina ed inserisce la corrispondente funzione

La casella Loop definisce la ripetizione ciclica dell’animazione per il numero desiderato di reiterazioni. Per
ridefinire il punto di inizio della ripetizione o definirne il numero di reiterazioni viusualizzare la finestra
deiBehaviors (F8) e fare doppio clic sull'evento inserito (onFrame...GoToTimelineFrame)

L’attivazione di ciascuna di queste opzioni inserisce un "comportamento" JavaScript nell’intestazione del

documento, e questo inserimento è segnalati con un messaggio. La comparsa dei messaggi succitati non
deve allarmare mentre dovrebbe meravigliare la complessità del codice inserito dalla combinazione di
JavaScript e DynamicHTML nell’intestazione del documento.
Si è creato un documento dinamico, una sola pagina il cui aspetto muta nel tempo e che può essere
ulteriormente gestito utilizzando degli oggetti come pulsanti per controllarne lo "stato", il tutto senza dover
conoscere questi linguaggi la cui complessità va molto oltre quella del più intricato HTML statico.

Trattando i comportamenti o Behaviors nella prossima sezione si mostrerà un ulteriore utilizzo della timeline
come strumento per la realizzazione di una struttura di navigazioni con molteplici aspetti (determinati da
diversi valori delle proprietà dei livelli in diversi keyframes) all'interno di un unico documento e come sia
possibile far eseguire una animazione a comando e non automaticamente al caricamento della pagina.

Behaviors

36. Definizione di Behavior

Mediante i behaviors (comportamenti) di Dreamweaver è possibile associare ai diversi elementi della pagina
complesse funzioni interattive, senza necessità di conoscere la sintassi del codice JavaScript.
Un Behavior non è altro che una coppia azione-evento JavaScript.

JavaScript é un linguaggio di scripting: gli scripts non funzionano come programmi autonomi ma vengono
incorporati nelle pagine HTML.
JavaScript è tutt'altra cosa di Java, che é invece un completo linguaggio di programmazione, molto piú
complesso di JavaScript e dalle potenzialità di gran lunga superiori alla creazione di animazioni per il web.

Poichè tutto il codice della pagina viene caricato dal computer dell’utente, gli script vengono eseguiti
localmente. Con JavaScript è quindi possibile rispondere alle azioni dell'utente senza una transazione attiva
sulla rete.
Una volta caricata la pagina, il computer dispone di tutto ciò di cui necessita per eseguire l’applicazione. È il
browser (agendo da client) che si occupa dell'elaborazione delle funzioni JavaScript e non il server (o
computer remoto, ove risiedono materialmente i documenti pubblicati.

Le funzionalità di JavaScript (JS) sono molteplici e l’utilizzo varia dalla creazione di contenuto HTML (in
pratica un JS che definisce il contenuto della pagina) ad effetti dinamici quali la sostituzione di un’immagine
con unl’altra od ancora la visualizzazione di un messaggio in risposta ad un’azione dell’utente.

Gli scripts possono essere eseguiti con Netscape Navigator 2.0, Internet Explorer 3.0 e versioni successive
ma la loro interpretazione, e gli eventi che determinano l'esecuzione delle funzioni in essi definite, sono
variamente interpretate dai browsers. Si rimanda alla trattazione dettagliata su JavaScript curata da Ilario
Valdelli, sempre su www.html.it.

37. Azioni ed Eventi

Un behavior inserisce automaticamente una azione ed un evento che ne determina l’esecuzione.

Le azioni sono funzioni JavaScript che eseguono svariati compiti come aprire una finestra di browser,
mostrare un messaggio nella barra di stato od in una finestra di dialogo, controllare la riproduzione di un
suono, l’esecuzione della timeline od altro acnora.

Gli eventi eseguono le azioni: ai diversi elementi della pagina possono essere associati diversi eventi.

Un singolo evento può controllare l’esecuzione di più azioni (si può ad esmpio desiderare che il transito
del puntatore del mouse su di un'immagine ne determini la sostizione con un'altra e contemporaneamente
visualizzi un messaggi nella barra di stato del browser.

A diversi oggetti HTML sono associati diversi eventi: tramite la finestra dei Behaviors si controlla
l’associazione di eventi e funzioni disponibili per i vari elementi della pagina.
I diversi browsers riconoscono una gamma variabile di eventi per le stesse funzioni: il campo Events
for…Browsers permette di scegliere il browser di destinazione, effettuando così una scelta di compatibilità
per il proprio documento.

Le azioni disponibili dipendono dal tipo di oggetto selezionato: il tag che controlla l’oggetto compare nella
barra del titolo della finestra Behaviors.

38. Inserire Behavior

Come inserire Behavior all'interno di un documento

In assenza di selezione attiva sono disponibili le azioni relative al corpo <BODY> del documento e quindi
legate al caricamento della pagina.

Selezionare un’oggetto della pagina, ad esempio una immagine, e definire nella finestra Behaviors il browser
di destinazione.

Premere nella finestra Behaviors il tasto con il segno "più" +

Viene visualizzato l’elenco delle azioni disponibili, fra cui selezionare l’azione desiderata e definire con il
tasto "apri menu" (ovvero la freccina verso il basso posta in corrispondenza del behavior inserito) l’evento
che ne controlla l’esecuzione.

Il menu di selezione degli eventi presenterà un numero diverso di opzioni a seconda del browser di
riferimento.

I browsers di generazione più recente permettono di scegliere fra una gamma più ampia di eventi, a scapito
però della compatibilità del documento.

Gli eventi che compaiono tra parentesi, ad esempio (onMouseOver), possono essere assegnati solo ad
oggetti cui è associato un collegamento: selezionando uno di questi eventi per un oggetto non "linkato", viene
automaticamente inserito un link che punta ad un’ancora # senza nome che indirizza all’inizio della pagina.

Per meglio comprendere le potenzialità rappresentate dall’inserimento dei behaviors è opportuno

sperimentarne praticamente l’utilizzo con alcune osservazioni ed esercizi.

39. Inserire Behavior: esempi pratici

Alcuni esempi pratici sull'inserimento di Behavior

Aprire un documento nel quale sia stato inserito, dal menu Insert o dalla barra degli oggetti, un elemento
Rollover Image per la sostituzione di un'immagine al transito del mouse, ed osservare nella finestra
Behaviors come all’immagine siano stati associati due comportamenti per i diversi stati di attivazione: Swap
Image - onMouseOver per cambiare la sorgente dell’immagine al transito del puntatore e Swap Image
Restore - onMouseOut per ripristinare l’immagine iniziale all’uscita del mouse.
Per ciascuno dei due behavior si ha una coppia di azione ed evento. (in questo caso: Swap Image…= azione
; onMouse…= evento).
|
Aggiungere un terzo behavior a quelli esistenti scegliendo Display Status Message ed inserendo un testo che
sarà visualizzato nella barra di stato del browser.
Modificare questo behavior e verificare il suo diverso funzionamento a seconda che all’azione Display Status
Message sia assegnato l’evento onClick(disponibile per Explorer 4+) o onMouseDown, oppure ancora
onMouseOver.

Mediante i behaviors si può controllare l’esecuzione della Timeline.

Chiudere il documento aperto in precedenza ed aprirne uno contenente un’animazione DHTML (animazioni
di livelli lungo le timelines).
Nella finestra Timelines selezionare la casella Autoplay e verificare l’inserimento di un’azione, Play Timeline,
relativa all’evento onLoad (che corrisponde con l'aavvenuto caricamento della pagina).
Verificare come la selezione della casella Loop determini l’inserimento di un’azione Go To Timeline Frame 1
(vai al fotogramma 1) relativamente all’evento onFrame…
Per creare un "pulsante di avvio" per l’animazione occorre innanzitutto disabilitarne l’eventuale esecuzione
automatica e/o ripetizione, deselezionando le caselle Autoplay e Loop nella finestra Timelines, oppure
scegliendo il pulsante contraddistinto dal segno "meno" - in quella dei Behaviors.
Inserire nella pagina, ma al di fuori dei livelli esistenti, una stringa di testo (es."Animare")
Osservare come, selezionando il testo inserito, non sia possibile assegnarvi nessun behavior: molti
JavaScript devono essere associati ad un collegamento per poter funzionare.
È necessario pertanto associare un link "fittizio" al testo, inserendo il carattere # nel campo Link della finestra
delle proprietà.
D opo questa operazione è possibile selezionare nella finestra Behaviors varie azioni, fra le quali si sceglierà
Timeline - Play Timeline, associandovi l’evento onClick
A questo punto una pressione sul testo "Animazione" farà partire l’animazione, che sarà eseguita una sola
volta.

Per ripetere l’animazione ad ogni click del mouse, è necessario inserire un’ulteriore azione: dal menu
selezionare Timeline - Go To Frame , inserire il numero 1 per definire il "ritorno" al primo fotogramma, ed
assegnarvi lo stesso evento onClick.
Se necessario spostare questo nuovo behavior sopra al precedente utilizzando il tasto con la freccina in alto
posto a destradel menu di selezione dei browser di riferimento(Events for...Browsers).

Un altro tilizzo di behaviors consiste nel visualizzare e nascondere livelli su richiesta dell'utente.
Chiudere il precedente ed aprire un nuovo documento, all’interno del quale verrà creato un layer (livello), in
cui inserire del contenuto ed un colore di sfondo.
Impostare la visibilità del livello come hidden (nascosto).
Inserire nella pagina, all’esterno del livello, una stringa di testo (es. "visualizza"), selezionarla ed assegnarvi
un link "fittizio" inserendo # nel campo Link.
Dalla finestra Behaviors selezionare l’azione Show-Hide Layers e scegliere il tasto Show (mostra livello) nella
finestra di dialogo ed accettare l’evento predefinito onClick
per creare un nuovo stato di attivazione per il "pulsante", selezionare nuovamente la stessa azione
Show-Hide Layers ma scegliere il tasto Hide (nascondi livello).
Con il tasto di scelta degli eventi assegnare a questa seconda azione l’evento onMouseOver.
Il livello sarà nascosto quando il puntatore del mouse passa sopra al link ma verrà visualizzato se vi si fa
clic.Un possibile utilizzo di questa tecnica consiste nel porre all'interno dei livelli da visualizzare a comando
dei collegamenti ipertestuali, creando così una sorta di "menu a comparsa".

40. Forms e behaviors

Un utilizzo interessante di JavaScript è l’analisi locale dei dati inseriti in un modulo (form), senza che sia
necessario inviarli al server per la convalida e poi farli tornare.

Il seguente intende essere solo un esempio per illustrare questa funzionalità che può giungere a notevoli
livelli di complessità: chi sa programmare può inserire innumerevoli funzioni di analisi degli input dell'utente, e
quindi di reazione interattiva ai loro valori, ma le potenzialità di JavaScript vanno integrate con applicazioni
poste sul server in caso di necessità di interazione complessa, ad esempio con applicazioni come databases.

Scegliere Form dalla barra degli Objects - Forms (o da menu Insert - Form) e dare un nome al modulo.
Attenzione a non crearne uno dentro ad un altro perchè se ne impedirebbe il funzionamento.

Inserire nel campo così creato, delimitato da linee tratteggiate, un campo per testo Text Field (Insert - Form
Object - Textfield).

Un esempio concreto: verificare indirizzo e-mail

Aggiungere un pulsante Button (Insert - Form Object - Button) e definirne il testo nella finestra delle proprietà
mediante il campo Label ("etichetta")
Dalla finestra dei Behavior assegnare a questo pulsante il behavior Validate Form e scegliere Email Address
nella finestra di dialogo che si apre.
Accettare l’evento predefinito onClick: una pressione sul pulsante inserito nella pagina genererà un
messaggio di errore se nel campo di testo verrà inserita dall’utente una stringa di testo non conforme agli
indirizzi e-mail (ovvero non di tipo …..@…..).
41. Estensioni di Dreamweaver
Sono disponibili su Internet numerose estensioni scaricabili gratuitamente con le quali potenziare
ulteriormente il programma

Dreamweaver costituisce in un certo senso un ambiente di sviluppo aperto: il programma in sè non è open
source ma è ampiamente estensibile da chiunque sappia codificare behaviors ed objects con il linguaggio
JavaScript.

Sono disponibili su Internet numerose estensioni scaricabili gratuitamente con le quali potenziare
ulteriormente il programma: merita perlomeno una menzione il Netscape Layer Fix di Peter Belesis, il cui
inserimento risolve un bug di Netscape relativo al ridimensionamento di pagine contenenti livelli.
Copiando i tre documenti (1 HTML, 1 GIF, 1JS) che compongono questo "oggetto" nella cartella
Dreamweaver\Configuration\Objects\Common sul proprio hard disk, al prossimo avvio di Dreamweaver esso
sarà disponibile sia nel menu Insert che nella finestra Objects - Common.

Anche se di una certa utilità, si tratta solo di un esempio: la varietà di estensioni disponibili è davvero ampia e
chiunque, digitando "dreamweaver extensions" in un motore di ricerca, può andarne a scovare di adatti alle
più disparate esigenze.