Primo Passo: Definire il Sito

8.Definire lo spazio di lavoro: il Sito LocaleLa 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 tuttoil codice di cui sono composti i documenti, Dreamweaver incorpora un'interfaccia di gestione del sito chepermette di verificare, modificare e creare i collegamenti fra i diversi files. Inoltre esso integra unapraticissima funzione FTP per la pubblicazione diretta su di un server web cui si abbia accesso, ovvero per ilquale 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 harddisk, 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 quelligià 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 selezionataLocal 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 deidocumenti ad un server remoto (Web Server Info), le operazioni di trasferimento cui sono sottoposti idocumenti per essere modificati (Check In/Check Out), e la possibilità di definire una Home Page o paginainiziale 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, è comunquenecessario aver definito una home page per accedere ad una particolare modalità di visualizzazione del sitodetta 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 perscegliere 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 alsito.L'importanza di questa operazione risiede nel fatto che il programma utilizza questo nome per identificare ilsito 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 velocizzarel'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 pagenel campo HTTP Address e si selezionerà la casella di opzione Cache per permettere a Dreamweaver dicreare una memoria cache che sarà utilizzata in caso di cambiamenti per accelerare l'aggiornamento deicollegamenti fra files all'interno del sito.Abilitare questa ipotesi permette di velocizzare le operazioni della Site Map; quando si sceglie questamodalità di visualizzazione verrà richiesto di creare una cache (o memoria temporanea) per ottimizzare lagestione del sito nel suo insieme ma se le risorse sul proprio computer sono molto limitate non è vincolanteaccettare.

9.Site View: predisporre la struttura del sitoLa 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 dallafinestra 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 checompongono il lavoro, ed anche i documenti stessi..Non esistono ovviamente regole in merito ma è buona norma tenere i documenti separati creando adesempio una cartella per le immagini, una per i files HTML, eventualmente una ove conservare filestemporanei ed altri elementi che si rendessero necessari durante la realizzazione del siti ed ogni altra cartellasia 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à nellamanutenzione 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 scegliendol'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 Filedal menu contestuale o dal menu File: verranno creati dei documenti HTML vuoti che è possibile utilizzarecome segnaposto per successiva lavorazione.

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

10.Site Map: il sito visto dall'altoPermette 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 è possibilevisualizzare o creare una struttura di collegamenti che li unisca, passando nella modalità divisualizzazione Site Map che permette delle operazioni sui file di un sito presente sul propriohard-disk (uno remoto vi va copiato per avere queste funzioni)È necessario aver definito una Home Page o pagina iniziale del sito per accedere a questamodalità 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 è invecerappresentata dall'icona di sinistra) alla "mappa del sito". Tenere premuto il tasto del mouse mentre si scegliela modalità permette di decidere se visualizzare unicamente la mappa del sito (Map Only) o mantenerecontemporaneamente 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, concatenatesecondo la struttura dei collegamenti che uniscono i documenti stessi a partire da quello che è stato definitocome 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 quindivisualizzare, 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 documentocontiene uno o più collegamenti interrotti.Se invece il nome del documento è scritto in blu e presenta il simbolo , si tratta di un link ad undocumento esterno al sito, ad esempio un altro sito su Internet, oppure di un collegamento speciale comequelli 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 stalavorando.

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

Questa piccola icona, una caratteristica di Dreamweaver che si ripropone in modalità di authoring nelProperty Inspector, ha un grosso potere in quanto permette di creare collegamenti fra documenti, anche inquesto 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 definitanessuna caratteristica, consisterà semplicemente nel nome del file di destinazione. Ma è pur sempre uncollegamento funzionante.

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

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

Proprietà della pagina

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

Questa serie di lezioni propone un approcio contestuale volto alla realizzazione di un contenuto complesso: ivari 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 siinvitano sin d'ora gli sviluppatori a prendervi confidenza e... a non esitare a chiuderle se in alcuni momentidovessero 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 sperimentazionequal'è il modo più agevole per il proprio personale utilizzo.

La finestra principale della modalità Authoring è una pagina bianca nella quale possiamo inserire una enormevarietà 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 trovail cursore..Fra i consueti menu a discesa della finestra principale, come FIle o Edit ve n'è uno denominato Window, escegliendo fra le opzioni ch'esso contiene Launcher viene aperta una finestra, che riproduce quello cheappare nella parte inferiore destra della finestra principale di authoring, una serie di 5 icone che permettonoaccesso 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 lerispettive opzioni dal menu Window..

Sito: rimanda alla modalità Site View (F5) oppure Site Map (MAIUSC + F5) a seconda di quale fossel'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 checonduca ad un CSS. (F7)

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

Linea Temporale: direttamente mutuata da applicazioni come Director e Flash, questa partedell'interfaccia permette di definire dei "punti chiave" da utilizzare come referenti o marcatori per lanavigazione, 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 permettea chi ne conosce la sintassi di modificare direttamente il codice HTML, JavaScript e DHTML e ne facilita lacomprensione 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 rapidaCTRL + F3 oppure Properties dal menu Window)

12.Definire le proprietà generaliInserire manualmente le marcature che definiscono le caratteristiche generali della pagina

Non.tutti vogliono inserire manualmente le marcature che definiscono le caratteristiche generali della paginae 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 deltitolo), è una marcatura dell'intestazione head del documento, mentre le seguenti possono esservi definitecome "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 graficadella pagina.e non determina variazioni nel codice.Un designer alla ricerca di un particolare, preciso effetto grafico può inserire in questa sede un qualunquedocumento 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 restache ricalcarne il profilo che interessa con quello dei relativi elementi.Sfruttando un'immagine tracciante durante la realizzazione di un documento, nella modalità grafica Authoringnon vengono visualizzati nè il colore che è stato indicato per lo sfondo, nè l'eventuale immagine prescelta pertappezzare lo sfondo .Non si tratta di una modifica apportata al codice, quindi la visualizzazione finale non ne risente ed essa nonapparirà mai nel browser:

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

13.Scelta dei coloriVarie 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 chelo prevedono come lo sfondo della pagina, il testo, i collegamenti nei loro vari stati di attivazione ed altrimerita qualche attenzione.

È possibile utilizzare la splendida fotografia impostata come sfondo della propria scrivania elettronica qualefonte di particolari sfumature di colore, e si possono selezionare queste tinte direttamente, senza dovercopiare 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 leproprietà generali del documento HTML in cui definire un colore di sfondo, ma le funzionalità elencate qui diseguito 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 desktopquindi 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 fraquelli 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 qualunquemodo un colore non presente in questa palette, la scelta viene automaticamente reindirizzata al coloreweb-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 sceltaai colori di sistema scegliendo l'icona della tavolozza.

14.Meta Tags: gli indispensabili invisibiliMediante 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 altrecaratteristiche 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 findall'inizio con le caratteristiche anche meno evidenti delle pagine web può aiutare a comprenderne la logicadi funzionamento.

Si tratta di elementi di marcatura, i cosiddetti meta tags, che non hanno sempre effetto sull'impaginazionedel 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") manon per questo la loro assenza sarebbe tollerabile.Un sito web realizzato senza definire alcuno di questi elementi potrebbe essere perfettamente funzionante eanche di aspetto professionale, ma probabilmente se ne starebbe tutto soletto nel suo angolo delcyberspazio ricevendo ben poche visite.

Mediante questi tag si trovano infatti definite le parole chiave usate dai motori di ricerca (e dai loroweb-crawler, i "ragni" che scandagliano la rete) per indicizzare il sito e dargli un certo grado di visibilità erintracciabilità, vi si può scrivere una succinta ma puntuale descrizione del sito, ovvero la prima parte del sitostesso 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 seconttiene informazioni di intestazione HTML, da un valore VALUE, che può essere definito secondo leproprie necessità e da un contenuto CONTENT che rappresenta l'informazione vera e propria. Ad esempioavendo 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 finestraprincipale di Dreamweaver il menu a discesa Insert, scegliendo Head fra gli elementi e selezionando quellorichiesto.

Le proprietà dei meta tags predefiniti possono essere definite e modificate nella rispettiva istanza dellafinestra 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 (ilink ad "index.htm" sono relativi, mentre quelli ad "http://www.html.it/index.htm" sono invece assoluti) e senecessario il frame di riferimento.

Refresh per definire, se necessario, un lasso di tempo trascorso il quale la paginaviene automaticamente ricaricata dal browser, oppure in alternativa un altro indirizzo URL alternativo cui ilbrowser viene re-indirizzato.Può essere di grande utilità trattando contenuti dinamici che vengono aggiornati di frequente (ad esempio leprevisioni meteorologiche..od i prezzi...) far ricaricare automaticamente la pagina ogni minuto significaassicurarsi che l'utenza avrà sempre a disposizione le informazioni più recenti o per organizzare una "visitaguidata" al sito, nel corso della quale l'interazione dell'utente sarà ridotta al minimo ma lo si porterà a visitaresequenzialmente le pagine che si sono scelte.Basta inserire nell'intestazione di ognuna di queste pagine l'opportuno META Refresh che reindirizzi allasuccessiva, 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'intestazionedel 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 nellafinestra di composizione quelle parti del codice scritte nel corpo del documento che non vengonorappresentate nel browser, come gli script od i commenti del programmatore.

Inserire Elementi

15.Inserire, definire e modificare testoDall'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 esi possono apportare tutte le modifiche più appropriate.

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

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

Similmente a come si farebbe con un word-processor, dal menu Text o dalla finestra delle proprietà PropertyInspector si possono inserire i parametri relativi al blocco di testo selezionato In assenza di una selezioneattiva 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 unblocco di testo pre-formattato.

Font è un menu a scelta multipla dal quale scegliere il tipo di carattere da applicare al testo. L'ultimavoce, 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 aspettoparticolare 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 caratterepredefinito 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 comepredefinita una dimensione di 3.La dimensione può anche essere definita relativamente rispetto a 3 con valori preceduti dal segnomeno -o dal più +

L'icona Color definisce il colore ed è seguita da quella per definire gli stili fisici del testo con Bold, ilgrassetto, 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'indentazionedel testo, e le potenzialità del menu Text non vanno oltre l'offrire la possibilità di un controllolinguistico sul documento, mentre il Property Inspector offre tutto quello che serve per crearecollegamenti 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 ilquale 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 qualcheesperimento per evitare troppi paragrafi indesiderati..

La semplice marcatura che viene inserita con MAIUSC + INVIO è accessibile anche dal menu Insert conl'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 ancoreGestire link ipertestuali con Dreamweaver

Innanzitutto descriviamo il meccanismo di inserimento delle ancore che rappresentano le destinazioni, i puntidi arrivo di collegamenti ipertestuali in diversi punti di uno stesso documentoL'inizio di ogni sezione di questo testo, come "Collegamenti ed Ancore" per la presente, è caratterizzato dallapresenza 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 menuInsert 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: è indispensabileassegnare 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 ascelta seguire una delle seguenti modalità:

scegliere dal menu Modify l'opzione Hyperlink -Make Link.(CTRL + L) e scegliere a quale file ilcollegamento deve riferirsi;

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

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

ridurre la dimensione della finestra principale e dal menu File (per MAC esiste un apposito menuSIte), con l'opzione Open Site visualizzare la struttura del sito e ridimensionare anche questafinestra così da poterla affiancare all'altra, poi tornare nella finestra principale e dal PropertyInspector 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 uncollegamento interno;

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

La casella Target riguarda l'indirizzamento di un collegamento ad un Frame, individuandolo con il nomeTarget Name e sarà trattata nel capitolo relativo ai frames.

17. ImmaginiGestire e inserire immagini all'interno del documento

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

I formati di immagine che è possibile inserire in un documento HTML sono principalmente il JPEG ed il GIF, ilprimo 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'iconaImage con il quadretto dell'alberello.

Selezionando l'immagine la finestra del Property Inspector cambia, per mostrare le proprietà relativeall'oggetto immagine oltre ad una sua rappresentazione di anteprima, e l'indicazione del suo "peso" in terminidi 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à diassegnarvi comportamenti: esso va inserito nel campo (che non presenta indicazioni) che si trova nelProperty 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 questasede, 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 selezionedell'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 esuccessivamente inserirle.ll tasto Edit situato in basso a destra nel Property Inspector permette di definire e lanciare un editor esternodi 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, oltreche 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 edindicandola, 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 associatiad elementi testuali.

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

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

Il campo Align definisce le varie possibilità di allineamento dell'immagine rispetto al testo che la circonda edil 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 lavisualizzazione di immagini nel proprio browser potrebbero almeno leggerne questa descrizione sotto formadi testo alternativo.

L'allineamento dell'immagine nella pagina rispetto al testo è un argomento delicato la cui trattazionedettagliata esula dagli obiettivi di questo corso introduttivo all'uso di Dreamweaver, che non pretende disviscerare tutte le sottigliezze dell'HTML.A seconda delle dimensioni dell'immagine e della sua funzione nell'economia strutturale della pagina siopterà 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 inferioredell'immagine alla riga di testo in cui si trova, e l'allineamento di tipo Absolute Bottom che invece allinea ilbordo 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 unbordo, uno spazio vuoto, sopra e sotto l'immagine conV Space, ai suoi lati sinistro e destro con H Space.

Un realizzatore grafico abituato ad inserire gli elementi con assoluta libertà potrebbe trovarsi limitato nellepossibilità 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à dioggetti 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 dellapagina attraverso tabelle e nella creazione delle tabelle stesse sfruttando la precisione e la praticità diposizionamento dei livelli.

Impaginazione: tabelle e livelli

18. Inserimento di tabelleCon 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 qualchedifficoltà.

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

Una tabella può essere creata scegliendo la combinazione di tasti CTRL+ ALT + T, la voce Table dal menuInsert oppure l'icona relativa alla tabella nella finestra degli oggetti di utilizzo più frequente, accessibilescegliendo 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 esserevariamente estesi dallo sviluppatore di Dreamweaver; ci si assicuri per ora che il titolo della finestra siaObjects 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 didialogo 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 inpercentuale rispetto alle dimensioni della pagina.Inserire una tabella di larghezza pari a 100% significa disporre di uno strumento di impaginazione checontrolla tutta l'estensione della pagina e la cui struttura si ridimensiona relativamente alle dimensioni dellafinestra di browser.Una cifra inserita nel campo Cell Padding determina la distanza, in pixel, del contenuto delle celle dai lorobordi, 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 dalmenu View l'opzione Table Borders.

19. Modifica di tabelleModificare tabelle con Dreamweaver

Per selezionare una tabella cliccare sull'angolo superiore sinistro della tabella, sul suo bordo inferiore o suquello 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 unacornice e le maniglie di ridimensionamento.Per allineare una tabella od altro oggetto a sinistra, al centro o a destra nella pagina selezionarla e scegliererispettivamente le opzioni left, center, right presentate per la voce Alignment dal menu Modify oppure dalmenu contestuale.

Prestare particolare attenzione all'aspetto della finestra delle proprietà per essere certi di avere la selezioneattiva 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 delleproprietà relativa al contenuto di quella cella della tabella, per default il testo, che presenta però un tastotriangolare nell'angolo inferiore sinistro che permette di controllare le proprietà della cella di tabella entro cuisi sta inserendo contenuto.

La finestra delle proprietà (o Property Inspector, dal menu Window - Properties CTRL+F3) relativa invecealle tabelle porta scritto Table Name e nella sua parte superiore permette di rettificare i valori impostati nellafinestra di definizione della tabella con i campi Rows, Cols, W e H, CellPad, Cell Space e Border. È inoltrepossibile 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 menucontestuale l'opzione Alignment..La parte inferiore dellta finestra delle proprietà per la tabella permette di eliminare tutte le informazioni sulledimensioni delle righe e delle colonne componenti la tabellla con i due tasti Clear Row Heights e ClearColumn WidthsI tasti sottostanti a questi due permettono di convertire il valore impostato come larghezza della tabella inpixel od in percentualeCon i campi V Space e H Space si definisce la distanza della tabella dall'angolo superiore sinistro dellapagina.o dell'oggetto entro cui la tabella è contenuta, ad esempio una cella di altra tabella nel caso diannidamento.Compaiono poi un campo Bg con l'icona Point to file e quella della cartella, che permette di inserireun'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 dellesfumature (chiara e scura) del bordo della tabella per dare un effetto di tridimensionalità, ma queste ultimedue proprietà sono interpretate variamente dalle diverse piattaforme.

Sia per l'intera tabella che per righe e colonne, la dimensione può essere modificata trascinandone i bordinella finestra principale: la tabella presenta maniglie di ridimensionamento in basso e a destra ed il puntatoredel 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 tabellaModificare 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 celllevariamente 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 etrascinare il puntatore in una cella vicina, estendendovi la selezione.

Le potenzialità di Dreamweaver nella gestione delle tabelle si esplicano appieno nella modifica delleproprietà 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 parteinferiore.In questa finestra impostare l'allineamento del contenuto della cella in senso orizzontale scegliendo fra leopzioni del campo Horz ed in senso verticale scegliendo le opzioni del menu Vert. Scegliendo Center perallineamento 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 ilbordo (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 TableHeaders, applicando una formattazione predefinita di grassetto e centrando orizzontalmente il contenutodella cella.

Per aggiungere righe o colonne bisogna cliccare all'interno di una cella contigua alla nuova area che sivuole creare e quindi scegliere dal menu contestuale, o dal menu Modify l'opzione Table - Insert Rows orColumns.Nella finestra di dialogo che viene aperta l'utente può scegliere se inserire righe con Rows o colonne conColumns, in che numero, e se posizionarle sopra (Above) alla riga o o prima (Before) della colonna in cui sitrova, 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 aggiungereautomaticamente 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 operazionesono ammesse unicamente selezioni il cui perimetro totale, quindi delle varie celle insieme, abbia una formadi rettangolo).A livello di HTML viene modificata l'estensione di una cella: essa si estendera per più righe o colonne, peruna 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à, poiscegliere nella finestra di dialogo in quante righe o colonne si desidera suddividere ulteriormente la cella.

21. I livelli, versatili contenitoriMediante l’utilizzo di livelli è possibile inserire in una pagina contenuto testuale, di immagini od altri oggetti, eposizionarlo con assoluta precisione.

Gli oggetti possono essere inseriti direttamente nella pagina oppure ordinati mediante tabelle, ma chiunqueabbia dimestichezza con programmi per l'impaginazione di documenti cartacei non potrà non trovarsi limitatodalla rigidità della loro struttura. Un modo di posizionare gli elementi con maggiore versatilità è quello diutilizzare i livelli.Mediante l’utilizzo di livelli è possibile inserire in una pagina contenuto testuale, di immagini od altri oggetti, eposizionarlo 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 unaltro tag come predefinito si può variare questa impostazione scegliendo la combinazione CTRL+U oppure lavoce Preferences dal menu Edit, quindi selezionare la voce Layers e definire il tag che sarà associato perdefault 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 ilcampo 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 visualizzanocorrettamente 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 inbase al tipo ed alla versione del browser di riferimento.A differenza delle tabelle, i livelli strutturano quindi documenti che non possono essere interpretati in manieraomogenea da tutte le versioni dei browsers, ma come si vedrà nel capitolo successivo, relativo allaconversione di livelli in tabelle e viceversa, Dreamweaver permette di ridefinire tutte le informazioni diposizionamento dei livelli in tabelle corrispondenti. Benchè i livelli possano essere nidificati (all'interno di unlivello ne puo' esssere contenuto un altro), per poter effettuare questa conversione i livelli non devonopresentare 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 diprecisione 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 (damenu View -Grid- Show, o la combinazione CTRL+ALT+SHIFT+G), con eventuali opzioni di snap perlavorare 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 menuView scegliere Settings e scegliere nella finestra di dialogo in alto il valore della distanza fra righe e colonnedella griglia e nella parte inferiore i valori di riposizionamento automatico.

22. Inserire e modificare livelliUtilizzare 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 trascinandonella 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 menuWindow - 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 laposizione del tag relativo ad un oggetto nel codice (per visualizzarla scegliere Invisible Elements dal menuView).Osservare la posizione di questa icona aiuta anche ad individuare la posizione di eventuali livelli annidati. Inquesto 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à nellafinestra Layers (menu Window - Layers). Alcuni oggetti non necessitano necessariamente di un nome, adesempio una immagine se non è oggetto di scripting, ma i livelli rientrano fra gli oggetti che Dreamweaverdeve 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 dellapagina. Se il livello è inserito dentro un altro livello queste coordinate di posizionamento sono relative al livelloche fa da contenitore. Posizionando il mouse sulla "maniglia di selezione" del livello, il puntatore,assume laforma 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 eT (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, inpixel. Si possono anche ridimensionare i livelli, dopo averli selezionati, nella finestra principale, posizionandoil 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 livellovisualizzato 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 nomesia 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 disovrapposizione 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 determinaereditarietà 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 alnome del livello in questione: se la visibilità è attiva il livello sarà contraddistinto dalla rappresentazione di unocchio, che sarà chiuso in caso di visibilità impostata su Hidden. L'icona sarà assente per impostazione divisibilità di default.

A seconda del tag prescelto per definirli, i livelli dispongono di diverse altre proprietà. L’interpretazione diqueste 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 opzionipresenti nella voce Layers dal menu Modify.

Nella finestra dei Layers è presente una casella di opzione recante la critta Prevent Layer Overlaps: averselezionato 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 lasovrapposizione modificando le dimensioni di livelli esistenti dalla finestra delle proprietà, od inserendone dinuovi 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 vannomolto oltre la mera impaginazione, ed in vari casi sarà necessario mantenere abilitata la sovrapposizione deilivelli, ad esempio per creare delle animazioni con effetti tridimensionali di oggetti che passano l'uno davantiall'altro.

23. Da livelli a tabelle, e ritornoUna peculiarità di Dreamweaver è quella di permettere allo sviluppatore di convertire una qualsiasi pagina inun 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à diquesti "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 - RepositionContent Using Layers.Nella finestra di dialogo selezionare le opzioni Prevent Layer Overlaps e Show Layers Palette per evitare lasovrapposizione dei livelli e per visualizzare la finestra dei livelli,inoltre selezionare se lo si desidera le opzionirelative 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 LayerOverlaps 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 edimensioni tramite la finestra delle proprietà (CTRL+F3), ma crearli dalla finestra Objects - Common eridimensionarli nella finestra principale.consultare eventualmente il paragrafo relativo alle proprietà dei livelliDefinire la posizione dei contenuti della pagina ed il colore dei livelli, che diverrà il colore di sfondo delle celledi tabella.

Scegliere dal menu Modify - Layout l’opzione Convert Layers to Table: viene generata automaticamenteuna 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 essecontengono 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 complessesenza 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 valoreprescelto (4 pixel viene proposto come predifinito).Si dispone quindi di uno strumento grafico di precisone che evita la scrittura di codici potenzialmentecomplessi.

Per modificarne l’aspetto si possono manipolare le proprietà della tabella oppure ripristinare lo statoprecedente 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 diconvertire tabelle in livelli, e attraverso l'opzione 3.0 Compatible di scegliere se convertire i livelli in tabelle, setradurre eventuali indicazioni di stile CSS in marcature HTML, od entrambi.

Modelli e librerie

24. Inserimento rapido: la finestra degli oggettiLe 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 scegliendol'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, adestra dell'intestazione nella finestra Objects, e scegliere Common. Per inserire i vari oggetti, rappresentati inquesta finestra dalle rispettive icone, è generalmente sufficiente farvi clic sopra o trascinarne l'icona neldocumento, dalla finestra degli oggetti a quella principale. In alcuni casi l'utente può scegliere fra varieopzioni mediante una finestra di dialogo

Le diverse voci disponibili nel menu della finestra degli oggetti sono relative all'inserimento di altri tipi dioggetti. Scegliendo Forms essa permette di aggiungere alla pagina i principali elementi dei moduli, medianteHead consente la definizione dell'intestazione del documento e con Invisibles permette l'inserimento rapido dielementi invisibili come spazi, ritorni a capo, ancore e commenti ma anche script personalizzati o potentiapplicazioni basate su un computer remoto, le cosiddette server side includes che in quanto inclusionivengono solo richiamate dal codice HTML.Si possono aggiungere altre voci a questo menu creando una nuova cartella dentro a Objects nella cartella diinstallazione di Dreamweaver (con un percorso di tipoC:\Programmi\Macromedia\Dreamweaver\Configuration\Objects\NuoviOggetti).Inserendoli invece nella cartella con percorso tipo C:\...\Objects\Common, gli oggetti addizionali sarannovisualizzati assieme predefiniti come comuni (immagine, tabella, livello, etc.)Sono disponibili ad esempio estensioni per l'inserimento di caratteri speciali (intestazione Characters) come ilsegno 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 possonoessere 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 riutilizzarepiù volte (ad esempio una stessa intestazione da riproporre su diversi documenti).

25. Templates: modelli per realizzazione serialeDefinire 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 ilprimo passo da compiere consiste nell'individuare e definirei una impostazione grafica adatta allarealizzazione di una serie di documenti, accomunati da alcuni elementi, ma diversi l'uno dall'altro per unaparte 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 dielementi, da inserire ripetutamente in vari documenti anche non legati ad una serie mediante la libreria dioggetti

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à unaspetto 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 diseparare 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 dalprogramma all'interno del Local Root Folder.

Per creare un modello ex-novo, cominciando a lavorare su di un documento vuoto, visualizzare la finestradei 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 clicsull'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: leproprietà di pagina definite per un modello saranno riproposte su tutti i documenti che ne saranno generati ese 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 siutilizzasse per generare dei documenti HTML non sarebbe possibile con Dreamweaver modificarne alcuncontenuto, è pertanto necessario definire regioni modificabili.

Le opzioni illustrate qui di seguito sono accessibili anche dal menu contestuale del mouse scegliendo le vocifra 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 diseguito 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 unonei singoli documenti, le aree non comuni della serie.

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

Tutte le zone che non sono state identificate come regioni modificabili rimarranno fisse nel modello e sarannoriprodotte 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'areadefinita nel modello come modificabile.

Per applicare un modello ad un documento esistente, aprire il documento e premere il pulsante Apply ToPage 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 ilmodello viene applicato.

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

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

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

Viene richiesto se si desidera avviare una ricerca automatica di documenti che utilizzano il modello peraggiornarli automaticamente ed è possibile definire se ricercare ed aggiornare fra tutti i documenti del sitoscegliendo, nella finestra di dialogo degli aggiornamenti relativi ad elementi riutilizzabili, dal menu Look inl'opzione Entire Site e selezionando un modello, oppure se si desidera limitare l'aggiornamento ai documentiche 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 lapagina dal Template scegliendo l'opzione Detach From Template fra quelle disponibili nella voce Templatesdel menu Modify, si veda inoltre la sezione relativa ai commenti HTML inseriti da Dreamweaver nelle paginebasate su modelli

26. Riutilizzare elementi: gli oggetti di libreriaUna 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 unalibreria di oggetti personale da cui attingere per introdurre rapidamente nei documenti porzioni di contenutodi 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 ecancellare oggetti HTML da inserire ripetutamente nei documenti, oggetti che possono necessitare difrequenti aggiornamenti, con la differenza che in questo caso non si definisce una impostazione graficagenerale per il documento ma si identifica un oggetto o gruppo di oggetti da inserire in qualunque documentodel 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 selezionareuna regione che si desidera utilizzare come oggetto di libreria, e trascinare la selezione nella finestra dellalibreria, in cui ne viene visualizzata un'anteprima.

Con questo procedimento è possibile ad esempio definire un'intestazione da inserire solo nei documenti incui lo si desidera e modificare tutti i documenti che la utilizzano qualora ciò si renda necessario, definendo aquali documenti apportare le modifiche con la stessa modalità utilizzata per la modifica dei modelli.

27. Commenti di Dreamweaver ed elementi riutilizzabiliL'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 liutilizzano dei commenti HTML, invisibili in fase di visualizzazione nel browser ma ben riconoscibili daun'esame del codice.Per rimuovere questo tipo di marcatura da un documento generato a partire da un Template oppurecontenente 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 undocumento HTML non solo la marcatura relativa a templates od oggetti di libreria, ma di attuare unarimozione automatica di eventuali tag <font> superflui (Combine nested font tags whren possible) o di altramarcatura reasasi inutile perchè nidificata (Redundant nested tags) o vuota (Empty tags).

Selezionando la casella Dreamweaver HTML Comments si rimuovono le informazioni che identificano al suointerno le aree modificabili del template su cui esso è bastao, oppure che segnano gli oggetti di libreria checontiene.Questa opzione va selezionata solo quando si è assolutamente certi di non dover più appportare modifichealla struttura del modello od al contenuto della libreria ed è sconsigliabile farlo se non è necessarioalleggerire drasticamente il codice del documento, poichè vanno perse definitivamente le informazionirelative 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 altitolo della serie debba essere di un altro colore.

L'opzione Non-Dreamweaver HTML comments della finestra di dialogo della ripulitura del codice rimuove tuttii commenti HTML e va prestata particolare cautela nell'applicarla poichè, ad esempio, JavaScript e le suefunzioni sono definite all'interno di commenti HTML, interpretati dal browser ma non visualizzati sotto forma ditesto 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 FramesUn documento HTML può essere suddiviso in più files, i cui contenuti vengono visualizzati in determinatearee della stessa pagina, i cosiddetti frames.

La pagina web così creata è solo un contenitore atto a definire la presentazione di altri files, che nerappresentano 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, oppurenella finestra definita da un frame si può caricare un'altra pagina completamente diversa, pubblicata su dialtro 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 detteframes, 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 ridimensionarloe la presenza di barre di scorrimento.

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

L’utilizzo di un frameset prevede l’utilizzo di almeno tre documenti HTML: il frameset che funge dacontenitore 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 è benenon 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 è determinatodall’integrazione di tre o più documenti; e che i riferimenti ai vari frames, sia nella definizione della pagina chenell’indirizzamento dei collegamenti, devono specificare il nome del frame nel quale caricare un datodocumento oltre al nome del file che vi deve apparire.

29. Creazione di FramesDreamweaver 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… edecidere in che senso operare la divisione: Split Frame Up o Down definiscono un frameset suddiviso arighe, 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 aquanto sarà visualizzato dal browser.La gestione di questo "sistema" di documenti sarà facilitata combinando le funzionalità della finestra delleproprietà 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 delframeset sarà visualizzato nella barra del browser mentre i titoli assegnati ai frames serviranno solo comeriferimento allo sviluppatore.

Per selezionare un frame cliccare sulla sua rappresentazione nella finestra Frames o su di un suo bordonella finestra principale: cliccando al suo interno nella finestra principale di Authoring ci si trova neldocumento 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 (vpervisualizzarla 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 ilframe desiderato, quindi digitare od incollarvi il contenuto.

30. Proprietà dei FramesDopo 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 (Noresize).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 alladefinizione delle dimensioni dei frames in percentuale, in pixels o relativamente alle dimensioni degli altriframes, oltre a determinare l’eventuale presenza, l’aspetto ed il colore delle "cornici" dei frames che essocontiene. Quest’ultima proprietà è gerarchicamente subordinata alla definizione della proprietà Border per iframe contenuti.

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

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

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

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

Selezionare l'oggetto cui associare il collegamento (il "pulsante" la cui pressione deve determinare ilcaricamento di una pagina, e mediante la finestra delle proprietà definire a quale documento esso deve fareriferimento inserendo il nome del documento (es file01.htm) e definire il Frame di caricamento mediante ilmenu 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 nellostesso 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 dicaricare la pagina collegata in vari modi.

Scegliendo l'opzione _blank il documento viene caricato in un nuova finestra di browser (viene affiancata aquella principale una ulteriore sessione di Explorer o di Navigator in cui si carica il documento ed è possibilecosì 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 framesetnon nidificato, di tornare alla navigazione a pagina piena e nel caso di framest nidificato, di spostarsi ad unlivello superiore cioè di caricare il documento collegato nel frame che contiene il frameset in cui è posto ilcollegamento.

Scegliendo l'opzione _top il documento collegato viene caricato a "piena pagina" nel browser e quindi siriporta l'utente ad una navigazione in un singolo documento, che può eventualmente esere definito anch'essocome 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 deiframeset più intricati può essere molto semplice.

Timelines

33. Definizione di timelineDreamweaver permette di usare i livelli in molti modi diversi ed uno dei più appariscenti è rappresentato dallapossibilità di variarne le proprietà

Oltre che come strumenti di impaginazione per la creazione di documenti statici, Dreamweaver permette diusare i livelli in molti modi diversi ed uno dei più appariscenti è rappresentato dalla possibilità di variarne leproprietà (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 diversibrowsers, come indicato nella sezione relativa ai livelli (lezione n.6)

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

Il modo più semplice di creare un’animazione consiste nel selezionare un livello e scegliere dal menucontestuale 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 diposizionamento, che viene visualizzata nella finestra Timelines come una serie di punti, detti keyframes, ofotogrammi-chiave, sulla linea cronologica del livello.I fotogrammi della timeline non definiti come keyframes sono il risultato dell'interpolazione automatica fra ilkeyframe precedente ed il successivo.

L'unità di misura è quella dei fotogrammi e la velocità di riproduzione dell'animazione viene controllata tramiteil 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à visualizzatacorrettamente 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 senzaaverne definiito i diversi stati, scegliendo l'opzione Add To Timeline dal menu contestuale oppure l'opzioneAdd 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 animazionel'aspetto desiderato.

34. Modificare la timelineControllo sull’animazione, movimento sul percorso e prolungamento della durata

Per muovere tutto il percorso selezionare l'intera sequenza nella finestra Timelines quindi trascinare illivello 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 altrikeyframes 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 propriatastiera (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 scorrerelungo la sequenza: le proprietà del livello animato non vengono modificate ma se ne varia l'occorrenzatemporale, 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 ogniistante.

Per modificare la posizione di un livello in un Keyframe, selezionare il keyframe e nella finestra principaletrascinare il livello nella nuova posizione, oppure definirne la nuova posizione mediante i campi W e T del;lafinestra delle proprietà.Per nascondere e mostrare un livello in vari istanti (es.: effetto lampeggiante) scegliere per i keyframes diuna sequenza alternativamente hidden e visible, nel campo Vis della finestra delle proprietà, o selezionandoper 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) facendolotransitare 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 inquesto caso il livello (A) apparirà dietro a (B) quando si imposterà Z-Index =1 e davanti ad esso quando siinserirà Z-Index>=3

35. Controllo dell'animazioneEsecuzione automatica e ripetizione ciclica

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

La casella di opzione Autoplay consente l’esecuzione automatica dell’animazione al caricamento dellapagina ed inserisce la corrispondente funzione

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

L’attivazione di ciascuna di queste opzioni inserisce un "comportamento" JavaScript nell’intestazione deldocumento, e questo inserimento è segnalati con un messaggio. La comparsa dei messaggi succitati nondeve allarmare mentre dovrebbe meravigliare la complessità del codice inserito dalla combinazione diJavaScript e DynamicHTML nell’intestazione del documento.Si è creato un documento dinamico, una sola pagina il cui aspetto muta nel tempo e che può essereulteriormente gestito utilizzando degli oggetti come pulsanti per controllarne lo "stato", il tutto senza doverconoscere 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 timelinecome 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 siapossibile far eseguire una animazione a comando e non automaticamente al caricamento della pagina.

Behaviors

36. Definizione di BehaviorMediante i behaviors (comportamenti) di Dreamweaver è possibile associare ai diversi elementi della paginacomplesse 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 vengonoincorporati 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 eseguitilocalmente. Con JavaScript è quindi possibile rispondere alle azioni dell'utente senza una transazione attivasulla rete.Una volta caricata la pagina, il computer dispone di tutto ciò di cui necessita per eseguire l’applicazione. È ilbrowser (agendo da client) che si occupa dell'elaborazione delle funzioni JavaScript e non il server (ocomputer remoto, ove risiedono materialmente i documenti pubblicati.

Le funzionalità di JavaScript (JS) sono molteplici e l’utilizzo varia dalla creazione di contenuto HTML (inpratica un JS che definisce il contenuto della pagina) ad effetti dinamici quali la sostituzione di un’immaginecon 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 successivema la loro interpretazione, e gli eventi che determinano l'esecuzione delle funzioni in essi definite, sonovariamente interpretate dai browsers. Si rimanda alla trattazione dettagliata su JavaScript curata da IlarioValdelli, 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 unsuono, 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 transitodel puntatore del mouse su di un'immagine ne determini la sostizione con un'altra e contemporaneamentevisualizzi un messaggi nella barra di stato del browser.

A diversi oggetti HTML sono associati diversi eventi: tramite la finestra dei Behaviors si controllal’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 Eventsfor…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 nellabarra del titolo della finestra Behaviors.

38. Inserire BehaviorCome inserire Behavior all'interno di un documento

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

Selezionare un’oggetto della pagina, ad esempio una immagine, e definire nella finestra Behaviors il browserdi 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 iltasto "apri menu" (ovvero la freccina verso il basso posta in corrispondenza del behavior inserito) l’eventoche ne controlla l’esecuzione.

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

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

Gli eventi che compaiono tra parentesi, ad esempio (onMouseOver), possono essere assegnati solo adoggetti cui è associato un collegamento: selezionando uno di questi eventi per un oggetto non "linkato", vieneautomaticamente 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 è opportunosperimentarne praticamente l’utilizzo con alcune osservazioni ed esercizi.

39. Inserire Behavior: esempi praticiAlcuni esempi pratici sull'inserimento di Behavior

Aprire un documento nel quale sia stato inserito, dal menu Insert o dalla barra degli oggetti, un elementoRollover Image per la sostituzione di un'immagine al transito del mouse, ed osservare nella finestraBehaviors come all’immagine siano stati associati due comportamenti per i diversi stati di attivazione: SwapImage - onMouseOver per cambiare la sorgente dell’immagine al transito del puntatore e Swap ImageRestore - 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 chesarà visualizzato nella barra di stato del browser.Modificare questo behavior e verificare il suo diverso funzionamento a seconda che all’azione Display StatusMessage sia assegnato l’evento onClick(disponibile per Explorer 4+) o onMouseDown, oppure ancoraonMouseOver.

Mediante i behaviors si può controllare l’esecuzione della Timeline.Chiudere il documento aperto in precedenza ed aprirne uno contenente un’animazione DHTML (animazionidi 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 esecuzioneautomatica e/o ripetizione, deselezionando le caselle Autoplay e Loop nella finestra Timelines, oppurescegliendo 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: moltiJavaScript devono essere associati ad un collegamento per poter funzionare.È necessario pertanto associare un link "fittizio" al testo, inserendo il carattere # nel campo Link della finestradelle proprietà.D opo questa operazione è possibile selezionare nella finestra Behaviors varie azioni, fra le quali si sceglieràTimeline - Play Timeline, associandovi l’evento onClickA questo punto una pressione sul testo "Animazione" farà partire l’animazione, che sarà eseguita una solavolta.

Per ripetere l’animazione ad ogni click del mouse, è necessario inserire un’ulteriore azione: dal menuselezionare Timeline - Go To Frame , inserire il numero 1 per definire il "ritorno" al primo fotogramma, edassegnarvi lo stesso evento onClick.Se necessario spostare questo nuovo behavior sopra al precedente utilizzando il tasto con la freccina in altoposto 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), incui 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 assegnarviun link "fittizio" inserendo # nel campo Link.Dalla finestra Behaviors selezionare l’azione Show-Hide Layers e scegliere il tasto Show (mostra livello) nellafinestra di dialogo ed accettare l’evento predefinito onClickper creare un nuovo stato di attivazione per il "pulsante", selezionare nuovamente la stessa azioneShow-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 faclic.Un possibile utilizzo di questa tecnica consiste nel porre all'interno dei livelli da visualizzare a comandodei collegamenti ipertestuali, creando così una sorta di "menu a comparsa".

40. Forms e behaviorsUn utilizzo interessante di JavaScript è l’analisi locale dei dati inseriti in un modulo (form), senza che sianecessario 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 notevolilivelli di complessità: chi sa programmare può inserire innumerevoli funzioni di analisi degli input dell'utente, equindi di reazione interattiva ai loro valori, ma le potenzialità di JavaScript vanno integrate con applicazioniposte 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 - FormObject - Textfield).

Un esempio concreto: verificare indirizzo e-mailAggiungere 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 Addressnella finestra di dialogo che si apre.Accettare l’evento predefinito onClick: una pressione sul pulsante inserito nella pagina genererà unmessaggio di errore se nel campo di testo verrà inserita dall’utente una stringa di testo non conforme agliindirizzi e-mail (ovvero non di tipo …..@…..).

41. Estensioni di DreamweaverSono disponibili su Internet numerose estensioni scaricabili gratuitamente con le quali potenziareulteriormente il programma

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

Sono disponibili su Internet numerose estensioni scaricabili gratuitamente con le quali potenziareulteriormente il programma: merita perlomeno una menzione il Netscape Layer Fix di Peter Belesis, il cuiinserimento 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 cartellaDreamweaver\Configuration\Objects\Common sul proprio hard disk, al prossimo avvio di Dreamweaver essosarà 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 echiunque, digitando "dreamweaver extensions" in un motore di ricerca, può andarne a scovare di adatti allepiù disparate esigenze.