Sei sulla pagina 1di 128

Guida Dreamweaver 8

di: Marco Quadraro

Editor testuali e editor visuali


Gli strumenti per realizzare pagine web sono definiti editor HTML e si dividono in due grandi categorie: editor visuali o, dall'inglese, WSYIWYG, ovvero ci che vedi e ci che ottieni, poich consentono all'utente di realizzare le pagine in maniera visuale, come se si stesse lavorando all'interno di un browser virtuale, generando automaticamente il codice sottostante; editor di testo o di codice, perch l'utente non modifica in modo visuale gli elementi di una pagina - immagini, tabelle, frame, ecc. - ma interviene direttamente sul codice. Questa divisione, pi netta nella seconda met degli anni '90, adesso pi sfumata. Infatti gli editor visuali consentono un facile intervento diretto sul codice, mentre gli editor testuali, per contro, consentono rapide anteprima di pagina e l'inserimento di elementi della pagina tramite comandi che risparmiano buona parte della scrittura diretta del codice. Entrambi gli editor presentano vantaggi e svantaggi: se da un lato gli editor visuali consentono un pi rapido apprendimento e spesso velocizzano il lavoro, dall'altro gli editor testuali consentono un assoluto controllo del codice, risultando cos, spesso pi graditi agli utenti avanzati e velocizzano il lavoro quando si vuole inserire codice personalizzato.

Dreamweaver
Dreamweaver nasce, come editor visuale, nel 1997 ed il suo bellissimo nome (tessitore dei sogni) risulta veramente azzeccato. Nel corso degli anni si arriva alla versione 4, che consente anche un eccellente controllo del codice e che riscuote un crescente successo anche fra gli utenti avanzati, tra i pi riluttanti ad adottare editor visuali. Oggi, infatti, Dreamweaver utilizzato in tutto il mondo in particolar modo dall'utenza professionale, perch offre molteplici vantaggi, non ultimo, quello di generare il codice pi corretto e "pulito" tra gli editor della sua categoria. Nel corso di queste lezioni andremo ad esaminare le principali funzionalit di questo software, ma anche le enormi novit apportate dall'ultima versione. In primissima battuta si pu notare come Dreamweaver abbia integrato la stragrande maggioranza delle funzionalit di HomeSite, un ottimo editor testuale, originariamente

sviluppato dal geniale Nick Bradbury e di propriet dell'Allaire. Nel 2001 Macromedia ed Allaire si sono fuse, con enormi benefici per gli utenti di entrambi i software. Qualche anno fa con Dreamweaver MX si sono unificate le due versioni precedenti: Dreamweaver 4 e Dreamweaver UltraDev 4. Quest'ultimo, oltre ad integrare tutte le funzionalit di Dreamweaver, consentiva di editare visualmente pagine con tecnologie lato server, specificamente, ASP, CFML e JSP. Dreamweaver MX ha ampliato il numero di linguaggi supportati , sia dal lato client, affiancando XHTML al HTML, sia dal lato server, aggiungendo ai gi presenti Server Models ASP, CFML e JSP, il nuovo Microsoft ASP.NET e l'open source PHP. Nel 2004 Macromedia ha rilasciato Dreamweaver MX 2004 che presentava alcune novit come un'interfaccia (ancora) pi efficiente, un approccio pi incentrato sui CSS, una buona integrazione con gli altri prodotti del pacchetto Macromedia Studio e una serie di altre novit. Recentemente Dreamweaver giunto alla versione 8 e le novit introdotte sono molto interessanti. Quello che si nota lo sforzo da parte di Adobe/Macromedia di potenziare il programma ma anche di renderlo pi semplice da usare.

Requisiti di sistema
Ambiente Windows Intel Pentium III da 500 Mhz o Processore: equivalente Windows 98 SE, 2000, XP o OS: Windows Server 2003 RAM: 128 MB (256 MB consigliati) HD: 275 MB Ambiente Mac Power Mac G3 da Processore: 500 Mhz OS: OS 10.2.6 128 MB (256 MB RAM: consigliati) HD: 275 MB

Come procurarsi Dreamweaver


Per seguire la guida occorre essere in possesso di Dreamveawer 8. possibile scaricarne una versione dimostrativa, pienamente funzionante per 30 giorni, dal sito dal sito Adobe. Per scaricare il software necessario effettuare una registrazione. Una volta avuto l'accesso alla pagina per il download si pu scegliere la lingua ed il sistema operativo (Windows o Mac) e scaricare il file di installazione (di circa 60 MB). In questa guida si far riferimento alla versione Windows del programma, tuttavia gli utenti Mac non dovrebbero incontrare difficolt. Attenzione: Dreamweaver un programma molto flessibile, che consente di avere installate sul computer, sia diverse copie della stessa versione, sia diverse versioni contemporaneamente. Ovviamente per installare pi copie della stessa versione necessario cambiare il nome alla cartella di destinazione (esempio: invece di Dreamveaver MX, Dreamweaver).

L'area di lavoro Il layout dell'area di lavoro


Dreamweaver 8 permette tre Layout per area di lavoro che possiamo selezionare secondo le nostre preferenze. Per conoscere il layout correntemente selezionato o per cambiarlo usiamo il menu Finestra>Layout area di lavoro e possiamo scegliere tra le modalit: Coder, Designer, Dual Screen.

Il layout Coder posiziona i pannelli sulla sinistra dello schermo e chiude il pannello "Propriet" (il cui titolo rimane visibile). Si crea cos un ambiente che ricorda l'editor di un linguaggio di programmazione dove la maggior parte dell'area di lavoro dedicata al codice e un pannelli sulla sinistra permette di scegliere il file su cui lavorare. Il Layout Designer invece vuole i pannelli sulla destra dello schermo e il pannello "Propriet" aperto. Infine scegliendo Schermo doppio l'interfaccia di lavoro viene letteralmente "smontata" e diventa possibile posizionare su uno schermo l'area principale di lavoro e sullo schermo secondario i vari pannelli. Usando un unico schermo, pu risultare efficiente l'interfaccia Designer magari con qualche leggero ritocco. Infatti queste tre impostazioni possono essere poi aggiustate secondo le preferenze di ciascun utente. Pi precisamente, un pannello pu trovarsi in uno dei tre seguenti stati: visibile e aperto visibile e chiuso non visibile

sufficiente accedere al menu Finestra per scegliere i pannelli che vogliamo siano visibili, successivamente cliccando sulla barra superiore di un pannello possiamo aprirlo o chiuderlo. In questa guida assumeremo di utilizzare il layout "Designer".

La schermata iniziale
Appena lanciato, Dreamweaver ci accoglie con una schermata a tre colonne: nella colonna sinistra troviamo l'elenco dei file aperti di recente, con un clic possiamo proseguire il lavoro, la colonna centrale ci permette di creare un nuovo file vuoto, proponendoci diversi tipi di file, infine la terza permette di creare un file partendo da una libreria di modelli preimpostati.

Scegliamo di creare un nuovo file HTML ed esaminiamo l'interfaccia che ci si presenta: in alto troviamo la barra del titolo dove, accanto alla scritta "Macromedia Dreamweaver 8", troviamo in parentesi quadra - il titolo della pagina, seguito - in parentesi tonda - dal tipo del file corrente. Figura 1. Barra del titolo

Dreamweaver, per impostazione predefinita, assegna al file il nome Untitled-1 fino a quando non ne scegliamo uno diverso. Per i nomi dei file il comportamento simile finch non salviamo con un nome a nostra scelta, il file si chiama UntitledX dove X sta il numero progressivo dei nuovi documenti creati in una sessione di lavoro. La prima volta che apportiamo dei cambiamenti in una pagina, Dreamweaver aggiunge un asterisco accanto al nome del file per ricordarci che quei cambiamenti non sono salvati. Immediatamente sotto il titolo troviamo la barra dei menu: Figura 2. Voci di menu

File contiene i comandi per la gestione dei file; Modifica contiene i principali comandi per la modifica della o delle pagine; Visualizza comprende le opzioni per la visualizzazione dell'area di lavoro; Inserisci comprende gli stessi oggetti che sono anche accessibili dalla barra "Inserisci", si tratta in genere di tag HTML; Elabora consente di modificare le propriet della pagina o degli elementi sui quali stiamo lavorando, tuttavia, pur essendo raggruppate in questa voce di menu alcune delle funzionalit principali, personalmente trovo pi comodo accedere a tali funzionalit tramite i pannelli di Dreamweaver, oppure da scorciatoie come quelle di tastiera o utilizzando il comodissimo menu contestuale da tasto destro del mouse;

Testo da questo menu accediamo al controllo degli elementi testuali della pagina; Comandi, i comandi che troviamo in questa voce di menu servono, in genere, per automatizzare operazioni ripetitive. In realt ne troviamo ben pochi, ma importanti, perch in questa voce i menu possono essere "registrate" e salvate come voci di menu le operazioni che il singolo utente riterr pi utili, un po' come le Macro dei programmi della suite Microsoft Office. Inoltre da questo menu potremo accedere ad una buona parte delle estensioni per Dreamweaver;

Sito questa voce di menu ci permette di accedere ai principali controlli sul sito che stiamo sviluppando, oltre ch accedere alla sua rappresentazione visuale; Finestra da qui apriamo i vari pannelli di Dreamweaver, questi ultimi ci permettono ulteriori rapidi e completi controlli e modifiche sugli elementi della pagina;

? , per accedere alla guida in linea al pannello di Gestione delle estensioni (Extension Manager), un programma separato, che viene installato contestualmente a Dreamweaver.

Sin dalla versione MX, Dreamweaver riesce a gestire pi file nella stessa finestra dell'applicazione. Quindi troviamo i pulsanti Riduci a icona, Ripristino in basso e Chiudi sia nell'angolo superiore destro della finestra dell'applicazione che nell'angolo superiore destro della finestra della pagina web correntemente aperta. Figura 3. Strumenti delle finestre

Dreamweaver possiede 4 barre degli strumenti Inserisci, Rendering stile, Documenti, Standard. In realt ne esiste una quinta (introdotta nell'ultima versione), la barra Codicee ne parleremo tra poco. Figura 4. Le barre degli strumenti

Tuttavia le impostazioni predefinite ne vengono visualizzate solo 2: Inserisci e Documenti. Per visualizzare o nascondere dobbiamo accedere al menu Visualizza>Barre degli strumenti e spuntare le voci relative alle barre che vogliamo vengano visualizzate.

Le barre Documento e Standard La barra Documento


Sotto della barra degli strumenti Inserisci troviamo la barra degli strumenti Documento con una serie di pulsanti. Figura 1. Barra strumenti Documento

Modalit di visualizzazione
Possiamo scegliere se visualizzare il codice della pagina corrente schiacciando il pulsante Codice in alto a sinistra oppure possiamo attivare la modalit Progettazione, in tal caso verranno mostrati gli oggetti come apparirebbero in un browser pi una serie di simboli come (linee guida ed etichette) che ci permettono di manipolarli. Magia del WYSIWYG! Esiste anche una terza modalit ibrida che divide mostra sia la finestra Codice e la pagina Progettazione ed attivabile tramite il pulsante Dividi.

Titolo
Nella casella "Titolo" possiamo inserire il titolo dal assegnare alla pagina web corrente.

Controllo della compatibilit


Subito a destra presente un menu che racchiude alcuni strumenti per il controllo della compatibilit della pagina web nei browser principali.

Convalida Codice
Proseguendo sulla destra troviamo il menu Convalida Codice che fornisce alcune funzioni relative alla convalida della pagine web secondo gli standard pi diffusi.

Gestione File
Il menu "Gestione File" permette di gestire un team di persone che lavora allo stesso sito web in contemporanea (usando un'unica versione dei file in remoto).

Anteprima/Debug nel browser


Cliccando su questo pulsante appare un menu contenente una lista di browser. Selezionando la voce relativa al nome di un browser possiamo lanciare l'anteprima della pagina corrente nel browser scelto. Possiamo modificare l'elenco aggiungendo altri browser (che naturalmente dovremo aver precedentemente installato nel nostro sistema) scegliendo Modifica elenco browser. Accederemo cos al pannello Preview in Browser dove potremo aggiungere un nuovo browser all'elenco. Per farlo sar necessario premere il pulsante "+" e compilare la finestra di

dialogo scegliendo un nome da associare al nuovo browser e individuandone la posizione sul nostro disco fisso.

Aggiorna vista progettazione


Lavorando in modalit Dividi potrebbero crearsi delle temporanee incoerenze tra la vista Codice e quella Progettazione. Ad esempio l'utente potrebbe aggiungere del codice nella vista Codice ma notare che la finestra Progettazione non si aggiorna in base al codice aggiunto. Per imporre un aggiornamento sufficiente premere il pulsante Aggiorna vista progettazione etichettato dall'icona tonda di una freccia.

Opzioni di visualizzazione
Questo menu permette di definire alcune caratteristiche relative alla visualizzazione della pagina. Per visualizzare il menu intero bisogna attivare la vista Dividi altrimenti verranno mostrate solo le voci relative alla modalit attivata. Pi precisamente ogni voce corrisponde a un elemento (o funzionalit) che possiamo scegliere se visualizzare (o attivare). Gli elementi visualizzati vengono contrassegnati, nel menu, con un segno di spunta. Esaminiamoli nel dettaglio. Contenuto HEAD: attivando questa voce comparir una barra orizzontale sopra alla vista "Progettazione". Al suo interno troveremo una serie di icone e ogni icona rappresenta un elemento presente nell'<head> della pagina corrente. Selezionando un elemento le sue informazioni verranno mostrate (e saranno modificabili) nel pannello "Propriet". Righelli: questa voce permette di attivare i comodi righelli (orizzontale e verticale) che corredano la vista "Progettazione". Griglia: attiva una griglia nella vista "Progettazione". Immagine di ricalco: rende visibile l'immagine di ricalco precedentemente caricata tramite il comando Visualizza>Immagine di ricalco>Carica. A capo automatico: questa voce non indica un oggetto ma una funzionalit. Attivandola verr modificata la vista "Codice" e pi precisamente le righe "troppo lunghe", cio quelle che superano il bordo destra della finestra e quindi sono parzialmente invisibili, verranno "spezzate" con un carattere di nuova riga automaticamente. Numeri di riga: questa voce permette di attivare i numeri di riga nella vista "Codice". Caratteri nascosti: attivando questa voce verranno visualizzati (nella vista "Codice") tutti i caratteri nascosti. Evidenzia codice non valido: sottolinea in rosso il codice non valido. Colorazione sintassi: permette di colorare il codice per renderlo pi leggibile. Rientro automatico: questa funzionalit facilit la scrittura di codice leggibile indentandolo automaticamente.

Infine la voce Vista Struttura in primo piano permette di scambiare le posizioni delle finestre "Codice" e Progettazione nella visualizzazione Dividi.

La barra standard
Gli utenti di Dreamweaver probabilmente non sono abituati a lavorare con questa barra, che presenta i comandi principali relativi alla gestione del file, dato che secondo le impostazioni predefinite nascosta. Figura 2. La barra standard

Per accedervi bisogna selezionare dal menu: Visualizza > Barre degli strumenti > Standard. Normalmente viene posizionata al di sotto della barra Documento, riducendo cos, in altezza, l'area del documento, tuttavia con il medesimo procedimento Drag and Drop delle barre di Office possibile affiancarla alla barra Documento trascinando con il mouse il suo bordo sinistro fino alla posizione desiderata. La barra Standard dispone di nove comandi, i primi quattro altrimenti accessibili dal menu File ed i restanti dal menu Edit: Nuovo, per creare un nuovo documento; Apri, per aprire un documento esistente; Salva, per salvare il documento sul quale si sta lavorando; Salva tutto, per salvare tutti i documenti aperti; Print code (sembra che l'etichetta non sia ancora stata tradotta) stampa il codice della pagina corrente; Taglia, per tagliare un elemento della pagina (a differenza di altri programmi permette di incollarlo pi volte) Copia, per copiare un elemento della pagina; Incolla, per incollare un elemento della pagina; Annulla, per annullare l'ultimo comando; Ripetere, per ripetere l'ultimo comando.

Il pulsante, Ripeti, ha un comportamento differente rispetto ad altri applicazioni. In genere, infatti, questo pulsante permette di ripristinare un'operazione precedentemente annullata. In Dreamweaver il pulsante Ripeti permette anche di eseguire nuovamente l'ultima operazione effettuata.

Ipotizziamo di creare un nuovo documento e si inseriree una tabella nella pagina web. Subito dopo potremo inserire una nuova tabella (uguale a quella precedentemente inserita) semplicemente premendo il pulsante Ripeti. Naturalmente lo strumento Ripeti mantiene anche la sua funzione di annullamento degli effetti del pulsante Annulla.

La barra Inserisci
La barra inserisci raccoglie tutti i comandi principali necessari per lavorare con Dreamweaver. I pulsanti sono divisi in 8 gruppi: Comune, Layout, Moduli, Testo, HTML, Applicazione, Elementi Flash, Preferiti. Ecco come si presenta la barra inizialmente. Figura 1. La barra inserisci

Sulla sinistra presente un menu che permette di accedere ai vari gruppi di pulsanti (per default impostato sulla voce "Comune"). Figura 2. Gruppi di pulsanti

Tuttavia possibile visualizzare i gruppi di pulsanti anche tramite delle schede come nella figura seguente. Per passare dalla visualizzazione a menu a quella a schede necessario scegliere "Mostra come schede" dal menu visualizzato nella figura precedente. Figura 3. Schede dei gruppi di pulsanti

Per tornare alla visualizzazione a menu possiamo fare clic destro sull'etichetta "Inserisci" e scegliere "Mostra come menu". Esamineremo i comandi associati ai vari pulsanti nelle lezioni successive, intanto per notiamo che il gruppo "Preferiti" vuoto. Questo gruppo, come suggerisce il nome, conterr i pulsanti

che noi decideremo di inserirvi per raccogliere in un unica posizione i pulsanti per l'accesso alle funzioni pi frequenti. Per modificare l'elenco del pulsanti dobbiamo attivare il gruppo "Preferiti" selezionandolo dal menu a sinistra o cliccando sulla relativa scheda (a seconda della visualizzazione che abbiamo adottato), fare click destro sulla barra (vuota) e scegliere "Personalizza Preferiti..." Figura 4. Scegliere "Personalizza Preferiti..."

Il pannello che appare ci permetter di configurare i Preferiti nel dettaglio. Figura 5. Pannello di configurazione dei Preferiti

Sulla sinistra abbiamo l'elenco delle funzioni di Dreamweaver, possiamo visualizzare solo un sottoinsieme delle funzioni utilizzando il menu in alto. Nel riquadro di destra abbiamo l'insieme dei pulsanti presenti nel gruppo Preferiti. Per inserire un pulsante basta selezionarlo dal pannello di sinistra e premere il pulsante >>. Una volta inseriti gli elementi che ci interessano possiamo gestire il loro ordinamento con i pulsanti di freccia su e freccia gi che troviamo nell'angolo a destra. Inoltre possiamo eliminare un pulsante dal gruppo Preferiti, basta selezionare la voce corrispondente (nel riquadro destro) e premere il pulsante del cestino (sempre in alto a destra). Per organizzare meglio, dal punto di vista visivo, i pulsanti possiamo servirci della funzione Aggiungi separatore che, appunto, provvede a inserire uno spazio di separazione (e una riga verticale) tra due pulsanti.

La barra Rendering stile

Questa barra di aiuto in quelle situazioni in cui si utilizzano i CSS per produrre pagine adattabili a vari tipi di supporti (schermo di un computer, foglio di una stampante, etc...). possibile creare fogli di stile dipendenti dai supporti, questi prevedono permettono di associare determinate regole di visualizzazione in base al supporto corrente. Pi semplicemente un foglio di stile potrebbe definire una regola di visualizzazione dell'intestazione (h1) per un palmare, per uno schermo di un computer e per la stampa. In questi casi, naturalmente, esisterebbero varie versioni della stessa pagina e queste versioni dipenderebbero dal supporto. Per impostazioni predefinita, Dreamweaver mostra la pagina web come apparirebbe sullo schermo di un computer. Tuttavia i pulsanti della barra Rendering stile permettono quando possibile (cio quando alla pagina associato un foglio di stile del tipo descritto qualche paragrafo pi su) di visualizzare la pagina come apparirebbe su uno dei seguenti dispositivi: schermo di un computer; stampa; dispositivo portatile (ad esempio un cellulare o un BlackBerry); dispositivo di proiezione; telescrivente; schermo di un televisore.

Per attivare la visualizzazione desiderata basta cliccare sul pulsante relativo. Figura 1. Barra rendering stile

presente un settimo pulsante, quello rotondo e celeste. Premendolo possiamo attivare o disattivare la visualizzazione tramite il foglio di stile Naturalmente se non stiamo utilizzando regole CSS questi pulsanti non produrranno alcun effetto. Inoltre se non stiamo usando regole CSS specifiche per i vari dispositivi allora i primi 6 pulsanti non produrranno effetti. Per chi volesse sono disponibili maggiori informazioni sulle regole CSS dipendenti dai supporti.

La barra del Codice


Questa barra degli strumenti fa il suo esordio proprio in questa versione di Dreamweaver ed dedicata a quegli sviluppatori che necessitavano di un editor di codice pi potente.

Per attivare la barra dobbiamo prima di tutto attivare la modalit di visualizzazione ibrida (Progettazione e Codice) premendo il pulsante Dividi sulla barra Documento o in alternativa la modalit Codice premendo il pulsante omonimo. Successivamente possiamo raggiungere il menu Visualizza>Barre degli strumenti e notare che comparsa una voce relativa alla nuova barra Codice. Ecco come appare la barra Codice. Figura 1. Barra del codice

I pulsanti forniscono l'accesso a una serie di strumenti relativi alla gestione manuale del codice della pagina, vediamoli in dettaglio. Il primo, Apri documenti, un menu che visualizza tutti i documenti correntemente aperti in Dreamweaver e permette di visualizzarne uno semplicemente cliccando sul relativo nome. Questa funzionalit pu essere usata in alternativa alle linguette situate nella parte superiore di ogni documento. I successivi tre pulsanti gestiscono la compressione e l'espansione di blocchi di codice. Per la precisione il primo pulsante, Comprimi tag completo, permette di nascondere tutto il codice del tag corrente lasciando solo una porzione iniziale seguito da "..." per indicare la presenza di codice nascosto. Ad esempio immaginiamo di avere un paragrafo racchiuso tra <p> e </p> che appare come nella figura seguente. Figura 2. Esempio di paragrafo

Se posizioniamo il cursore all'interno del paragrafo e premiamo il pulsante Comprimi tag completo otteniamo il seguente risultato. Figura 3. Tag compresso

Questa funzione permette sicuramente di gestire in modo pi efficiente pagine di grandi dimensioni. In alternativa possibile premere il pulsante Alt dalla tastiera e poi selezionare il pulsante "Comprimi tag completo". In tal caso otterremo l'operazione simmetrica: verr compresso il codice di tutta la pagina web eccetto quello relativo al tag corrente. Figura 4. Tutto compresso tranne il tag corrente

Il pulsante Comprimi selezione agisce in modo simile a quello appena esaminato, tuttavia comprime non il tag corrente ma la porzione di testo correntemente selezionata. Anche questo pulsante pu essere usato insieme al pulsante Alt della tastiera, in tal caso comprimeremmo tutto il contenuto della pagina eccetto la porzione selezionata. Infine il pulsante Espandi tutto ripristina la visualizzazione completa della pagina (annullando eventualmente la pressione dei due pulsanti precedenti). Come vediamo dalla figura 3, quando comprimiamo un tag o una porzione di codice appare il pulsante "+" proprio alla sinistra della zona compressa, baster premerlo per espandere nuovamente il codice. Il pulsante Seleziona tag superiore seleziona il punto in cui si trova il cursore (o che contiene la porzione di testo selezionata). E' facile notare che premendo ripetutamente

Seleziona tag superiore espanderemo sempre di pi la porzione di codice selezionato fino a selezionare l'intera pagina. Il pulsante Bilancia parentesi permette di controllare che ogni parentesi tonda, quadra o graffa aperta corrisponda a una parentesi dello stesso tipo chiusa. I successivi due pulsanti, Numeri di riga ed Evidenzia codice non valido consentono rispettivamente di mostrare/nascondere i numeri di riga sul bordo sinistro della pagina e sottolineare/non sottolineare le porzioni di codice non valido. Il menu Applica commento composto da cinque voci che permettono di creare vari tipi di commento. Figura 5. Aggiunta di un commento

La prima voce genera un classico commento HTML, se prima di premere il pulsante selezioniamo una porzione di codice allora quel codice verr racchiuso nel commento HTML. Se scegliamo Applica commento /* */ allora il blocco di codice verr inserito tra il commento di apertura /* e quello di chiusura */. Se Applica commento // allora tutte le righe selezionate verranno precedute da un commento di linea //, analogamente la quarta voce inserir il simbolo ' all'inizio di ogni riga selezionata. Infine l'ultima voce permette di inserire con commento per il server, questa voce viene attivata solo quando lavoriamo con pagine dinamiche. Il pulsante successivo, Rimuovi commento, toglie il commento dalla riga su cui si trova il cursore o dalla porzione di codice selezionata. Un'altro comando utile Applica tag. Questa funzionalit permette di inserire il testo selezionato all'interno di un determinato tag. Se, ad esempio, volessimo mettere una parola del testo all'interno del tag <em> ci basterebbe selezionarla con il mouse, cliccare sul pulsante Applica tag e scegliere em dalla lista che Dreamweaver ci propone (o in alternativa digitarlo manualmente). Figura 6. Aggiungere un tag

Dreamweaver provveder a inserire il tag di apertura all'inizio del testo selezionato e il relativo tag di chiusura alla fine. Il pulsante Snippet recenti permette di selezionare e inserire velocemente uno snippet usato in precedenza. I due pulsanti Rientro codice e Rientro a sinistra codice permettono rispettivamente di indentare e annullare un'indentazione del codice, questo strumento viene usato per strutturare il codice in modo che sia pi comprensibile gi a primo sguardo. In genere si usa indentare a destra i tag man mano che vengono annidati in altri tag. Infine il pulsante Formatta codice di origine, se abbiamo scritto del codice in modo disordinato possiamo chiedere a Dreamweaver di "sistemarlo". Scegliendo Formatta codice di origine>Applica formattazione origine Dreamweaver aggiuster tutti gli eventuali "a capo di troppo" o mancanti ed eventuali indentazioni sbagliate. In alternativa possiamo "sistemare" solo una porzione del codice, basta selezionare il blocco di codice che desideriamo aggiustare e scegliere Formatta codice di origine>Applica formattazione origine alla selezione. importante comprendere che queste ultime due funzionalit non agiscono in nessun modo sul contenuto del codice n eseguono una verifica di correttezza dello stesso: semplicemente si limitano a disporlo in modo pi regolare.

La barra di stato
Nella finestra in basso troviamo la Barra di Stato che a sinistra mostra l'utilissimo Selettore di tag. Questo serve mentre costruiamo la pagina in modalit Progettazione, infatti ci fa visualizzare il tag HTML su cui stiamo lavorando e tutti quelli precedenti in cui racchiuso a partire da <body>. In questo modo possiamo facilmente selezionare un tag altrimenti difficile da selezionare ed intervenire a modificarne le propriet, velocizzando di molto il nostro lavoro in modalit visuale. Ad esempio se vogliamo selezionare la riga di una tabella all'interno della quale inserito un filmato Flash, sufficiente cliccare sul filmato e poi cliccare due tag indietro sul Selettore di tag per selezionare esattamente la riga di tabella desiderata.

In quest'ultima versione la barra di stato di Dreamweaver stata arricchita di 3 nuovi oggetti: Strumento Seleziona; Strumento Mano; Strumento Zoom. Figura 1. Nuovi strumenti nella barra di stato

Selezionando uno di questi tre pulsanti si entra in una differente modalit di interazione con il documento corrente. Ad esempio, scegliendo lo Strumento seleziona il puntatore del mouse potr essere utilizzato, come di solito, per selezionare, trascinare, aprire i menu contestuali e cos via. Questa era l'unica modalit attivabile nelle versioni passate di Dreamweaver . Premendo il pulsante Strumento Mano il mouse si trascina in una... mano, appunto, che permette di trascinare la pagina web in ogni direzione esattamente come se ci trovassimo in Acrobad Reader. Infine lo Strumento Zoom permette di ingrandire la pagina web. Per usarlo sufficiente portare il puntatore del mouse (che per l'occasione si trasformato in una piccola lente di ingrandimento) sulla parte dell'immagine che vogliamo ingrandire e cliccare. La percentuale di ingrandimento verr mostrata nel menu alla destra del pulsante "Strumento mano". Figura 2. Porzione di pagina zoomata

Ancora sulla destra troviamo un menu relativo alle dimensioni della finestra e alla velocit di connessione, che serve a calcolare il peso in Kb della pagina e fare una stima dei tempi di caricamento (di default vengono stimati su una connessione a 1k secondo al secondo). Per calcolare il peso di una pagina la Dreamweaver tiene anche conto di eventuali file esterni come le immagini i filmati Flash, i JavaScript ed i CSS. Per attivare il menu relativo alle dimensioni della pagina necessario che la finestra della pagina non sia massimizzata, dunque una volta ridotta necessario cliccare sulla freccia in basso a destra per selezionare una dimensione predefinita della pagina, che pu meglio simulare le dimensioni di un browser ad una determinata risoluzione.

anche possibile, cliccando su Modifica dimensioni... per impostare ed aggiungere una dimensione personalizzata. Figura 3. Selezionare le dimensioni

I pannelli
Concludiamo con questo capitolo l'esplorazione dell'interfaccia, analizzando i pannelli di Dreamweaver 8. Nell'impostazione Layout area di lavoro > Coder Dreamweaver presenta 4 pannelli incolonnati sulla destra: CSS Applicazione Finestra di ispezione Tag File Figura 1. I pannelli

Inoltre in basso troviamo il pannello Propriet aperto e pronto a visualizzare i dettagli di un qualsiasi oggetto che selezioneremo all'interno della pagina web. Esistono molti altri pannelli che potranno esserci utili durante l'esecuzione del lavoro. Possiamo visualizzare o nascondere ogni pannello accedendo al menu Finestra e spuntando la relativa voce. Analizziamo in dettaglio le caratteristiche dei principali pannelli.

Pannello Propriet
Figura 2. Pannello Propriet compresso

Al di sotto dell'area del documento, tra i vari pannelli, decisamente il pi importante, il pannello Propriet. Il pannello ci permette di esaminare e modificare rapidamente le propriet degli elementi della pagina, nella parte superiore troviamo quelle pi importanti e nella parte inferiore (a scomparsa) le altre. Per visualizzare o far scomparire - a seconda dei casi - la parte inferiore del pannello si clicchi sull'icona a forma di triangolo in basso a destra. Figura 3. Pannello Propriet espanso

Per lanciare la guida in linea di Dreamweaver relativa all'elemento di cui il pannello "Propriet" ci mostra le informazioni, si clicchi sull'icona con il punto interrogativo '?' in alto a destra.

Pannelli Risultati
Il gruppo di pannelli Risultati ci restituisce i risultati di operazioni ripetitive relative ad una o pi pagine o all'intero sito. I pannelli sono: Ricerca; Riferimenti; Convalida; Controllo browser di destinazione; Controllo collegamenti; Rapporti sito; Registro FTP; Debug server. Figura 4. Cartelle con i pannelli dei risultati

Pannello Linee temporali


Il pannello delle "Linee temporali" consente di stabilire delle temporizzazioni da applicare agli elementi della pagina, sfruttando il DHTML, in modo da potere muovere, rendere visibili, invisibili, ecc i livelli e le immagini ed attivare in un dato momento funzioni JavaScript, il tutto suddividendo la linea temporale in numero di frame (fotogrammi) al secondo.

Figura 5. Pannello delle Linee temporali

Pannelli CSS
In questo gruppo troviamo uno dei pannelli pi rivoluzionati nell'ultima versione, Stili CSS, che permette di manipolare l'aspetto degli elementi della pagina usando regole CSS. Il pannello Livelli, invece, visualizza l'elenco dei livello presenti nella pagina e il relativo ordine sull'asse Z (che ne determina la visibilit).

Pannelli Applicazione
Il gruppo Applicazione comprende i pannelli relativi alla creazione di pagine lato server: Figura 6. Pannelli Applicazione

Database: serve per navigare all'interno dei database e creare connessioni ai database; Associazioni: crea associazioni di dati; Comportamenti server: inserisce comportamenti server; Componenti: permette di creare componenti e web services in ASP.NET e ColdFusion.

Pannelli File
Il gruppo File comprende: Figura 7. Pannelli File

File, il pannello mediante il quale controlliamo il sito locale sul quale stiamo lavorando. Inoltre Dreamweaver ci consente anche di navigare all'interno del sito con una sorta di Esplora risorse integrato. Da questo pannello anche possibile lanciare la finestra del sito che consente di visualizzarne la mappa o, attivando il programma FTP integrato in Dreamweaver, visualizzare i file remoti residenti sul server di pubblicazione;

Le Risorse sono librerie di elementi frequentemente utilizzati durante la costruzione di un sito, ad esempio possiamo salvare, in un sito di centinaia di pagine, una struttura di navigazione come elemento di libreria e, con una sola modifica a tale elemento di libreria, applicare la modifica in tutte le pagine.

Snippet, che vuol dire pezzi di codice, ci permette in vista codice di inserire del codice precedentemente salvato ed immagazzinato in una struttura di cartelle e sottocartelle, sono gi presenti oltre 200 Snippet ed possibile sia modificarli, sia crearne nuovi, sia riordinarli in modo diverso.

Tag
Questo gruppo presenta il pannello Attributi e Comportamenti. Il pannello Attributi permette di definire tutti gli attributi del tag correntemente selezionato. Invece il pannello Comportamenti consente di applicare alcune funzioni JavaScript, quali l'apertura di finestre indipendenti, la convalida client-side dei moduli, il controllo dell'audio, la comparsa e la scomparsa dei livelli, ecc. Figura 8. Pannelli Tag

Pannello Frame
Questo pannello visualizza la struttura dei frame della pagina corrente. Naturalmente utile solo quando si lavora con i frame e consiglio di nasconderlo se il sito corrente non contiene questo tipo di pagine. Figura 9. Pannello Frame

Pannello Cronologia
Il pannello Cronologia registra tutte le operazioni svolte dall'apertura della pagina, permettendo di cancellarle o duplicarle, possiamo anche registrare un gruppo di operazioni ripetitive e salvarle come comando che ritroveremo all'interno del menu Comandi. Figura 10. Pannello Cronologia

Personalizzazione dell'interfaccia

Dreamweaver organizza tutti i comandi in pannelli che a loro volta sono raccolti in gruppi, in questo modo molto pi facile accedere alle funzioni e soprattutto e possibile attivare solo quei pannelli necessari in un determinato momento. In presenza di cos tanti pannelli avere un monitor settato ad un'alta risoluzione, o addirittura due monitor, consenta di sfruttare al meglio le potenzialit di questo programma, velocizzando il flusso di lavoro. Infatti possiamo fare scomparire in un colpo solo tutti i pannelli laterali, cliccando sulla freccia posta nella parte centrale del bordo che divide i pannelli laterali dall'area del documento, in questo modo la larghezza del documento verr massimizzata guadagnando spazio prezioso. Cliccando nuovamente sulla freccia riappariranno i pannelli laterali. Nella parte inferiore del documento compare un'analoga freccia dalle medesime funzionalit. Figura 1. Pulsanti di scomparsa verticali orizzontali

anche possibile allargare l'area dei pannelli - a scapito dell'area del documento - per meglio visualizzarne il contenuto, puntando col mouse sul suo bordo. Quando il mouse assume la forma "Ridimensiona orizzontalmente" ovvero doppia freccia orizzontale, trascinandolo verso sinistra l'area dei pannelli verr allargata. Spostando completamente verso destra i panelli riassumeranno la dimensione di default. La medesima funzione, in direzione verticale, presente per i pannelli situati in fondo alla pagina. Cliccando sulla freccia posta in alto a sinistra di ogni pannello lo si apre il pannello, e se aperto lo si riduce alla sola area della barra del titolo. Cliccando sulla freccia del lato destro possibile accedere all'Help relativo a quel pannello, nonch alle sue specifiche funzionalit e comandi. Figura 2. Menu di pannello

infine possibile sganciare un pannello dal suo gruppo ed agganciare nuovi pannelli ad un gruppo preesistente. La procedura tuttavia differente rispetto alle precedenti versioni di Dreamweaver. Dunque vediamo in dettaglio come fare. Immaginiamo di voler sganciare dal gruppo "CSS" il pannello "Livelli" e di volerlo agganciare al gruppo "Frame" Sar sufficiente attivare il pannello "Livelli", cliccare sul suo angolo in alto a destra e scegliere Raggruppa Livelli con>Frame. Figura 3. Raggruppare i pannelli

Qualora volessimo massimizzare l'area del documento potremmo procedere alla chiusura del pannello "Propriet". E far scomparire i pannelli laterali con la procedura illustrata in precedenza. Infine possiamo anche eliminare le 4 barre degli strumenti come mostrato nelle lezioni precedenti. A questo punto, a parte la "Barra di stato", in basso, la "Barra del titolo" ed il menu, in alto, all'interno di Dreamweaver viene visualizzata solo la pagina sulla quale stiamo lavorando. Dunque anche con monitor a basse risoluzioni si pu disporre, con qualche rapido accorgimento, di spazio a sufficienza per lavorare. Per configurare l'area di lavoro in modo da avere sotto controllo tutti gli elementi della pagina, controlliamo dal menu Opzioni di visualizzazione della Barra Documento che tutti gli elementi siano spuntati. I righelli hanno l'unit di misura espressa in pixel, tuttavia essa modificabile con click del tasto destro del mouse sull'area dei righelli. Figura 4. Modificare l'unit di misura dei righelli

Inoltre se abbiamo sufficiente spazio verticale per l'area del documento potremo anche attivare anche la visualizzazione del contenuto del tag <head> Figura 5. Attivare la visualizzazione del tag <head>

Dreamweaver consente l'anteprima delle pagine su tutti i browser presenti nel nostro computer, creando dei file HTML temporanei aperti nel browser prescelto, in modo che la cache dei browser non venga riempita dalle nostre anteprima. Inoltre consente di lanciare il browser primario con la scorciatoia tasto F12 ed il browser secondario con la scorciatoia Ctrl+F12. Per modificare l'elenco dei browser rilevati da Dreamweaver scegliamo Anteprima/debug nel browser>Modifica elenco browser. Premere il tasto + nella finestra di dialogo e navigare nella propria cartella Programmi fino al file .exe del browser desiderato. Ripetere l'operazione per ogni browser che si vuole aggiungere. Figura 6. Modificare l'elenco dei Browser

Nella finestra preferenze, facendo doppio click sulla voce di un browser accediamo alla finestra Modifica browser che, tra le altre cose, ci permette di spuntare la casella Browser principale. Cos facendo, successivamente ogni volta che lanceremo l'anteprima di una pagina web tramite il pulsante F12 della tastiera Dreamweaver mostrer la pagina corrente nel browser che abbiamo scelto. In alternativa possibile scegliere il browser nel quale visualizzare l'anteprima della pagina corrente accedendo al menu Anteprima/debug nel browser. Figura 7. Selezionare il browser per l'anteprima

Con queste semplici procedure abbiamo personalizzato la nostra area di lavoro e settato i browser per l'anteprima. Dreamweaver memorizza il modo in cui abbiamo lavorato al momento della sua chiusura e quando lo lanceremo nuovamente ci presenter la medesima area di lavoro.

Le novit di Dreamweaver 8
Le novit della nuova versione del celebre "tessitore di sogni" sono tante, alcune migliorano delle caratteristiche presenti nelle precedenti versioni mentre altre introducono nuova funzionalit. Vediamole velocemente, alcune di queste verranno trattate in questa guida mentre altre (per utenti avanzati) verranno affrontate con articoli tecnici su editor.html.it. Qui di seguito presentiamo una panoramica delleinnovazioni.

Integrazione con XML e XSLT


Finalmente possibile gestire in modo visuale i dati XML. XML lo standard per lo scambio di dati tra le applicazioni (web e non). L'XML anche alla base di esperimenti relativi a una nuova versione dei web (il cosiddetto web semantico) e in questo ambito permette di inserire delle informazioni aggiuntive agli oggetti di una pagina web e di definire delle relazioni tra di essi. Figura 1. Associazioni con XML

Il pannello CSS
Adesso tutti gli strumenti relativi alla definizione dello stile della pagina web (anzi, dell'intero sito) sono raccolti nel pannello CSS che migliora notevolmente la produttivit e la facilit di formattazione della pagina. Figura 2. Pannello dei fogli di stile

CSS pi visibili
Il menu Riferimenti visivi presente nella barra degli strumenti Documento fornisce strumenti per visualizzare in modo pi efficiente i CSS. Ad esempio il comando Sfondi layout CSS evidenzia lo sfondo di ogni livello in modo da facilitare all'utente di Dreamweaver la loro comprensione. Figura 3. Livelli evidenziati

La barra Rendering Stile

stata introdotta una nuova barra completamente dedicata all'analisi dell'aspetto che una pagina web (collegata a fogli di stile dipendenti dai supporti) avr sui vari dispositivi (schermo del computer, palmare, TV, etc.). Figura 4. Barra Rendering Stile

Trasferimento dei file in background


Finalmente sar possibile continuare a lavorare anche durante l'operazione di trasferimento dei file verso (e da) un server remoto. Questa novit elimina le lunghe e inutili attese davanti al monitor. Figura 5. Caricamento indipendente

Zoom
La nuova funzionalit presente nella barra di stato e permette di ingrandire la pagina web fino ad osservarne ogni dettaglio. Figura 6. Pagina Zoomata

La barra Codice
stataintrodotta una seconda barra degli strumenti, la barra Codice attivabile solo nella modalit codice e fornisce una serie di strumenti per il controllo ottimale del codice della pagina web. Ad esempio le funzioni Comprimi tag completo/Comprimi tag esterno e Comprimi la selezione/Comprimi la selezione esterna permettono di concentrarsi solo su una porzione del codice e nascondere il resto.

Figura 7. Barra del codice

Nuove pagine per iniziare


La raccolta Pagine per Iniziare fornita di una serie di modelli di pagine web da prendere come spunto per costruire il proprio sito web o da usare direttamente, magari solo con qualche piccolo ritocco. Infine ricordiamo il supporto per l'accessibilit, la tecnologia Flash Video e tanti altri piccoli ritocchi che rendono il lavoro pi sicuro ed efficiente.

Operazioni preliminari
Iniziamo con questo capitolo ad esaminare in dettaglio le varie funzionalit di Dreamweaver 8. Sebbene Dreamweaver consenta di creare pagine senza bisogno di specificare un sito locale, la produttivit del lavoro verr accresciuta e sar possibile utilizzare tutte le funzionalit di Dreamweaver, definendo un sito locale prima di iniziare a realizzare le pagine web. Tra le funzionalit di Dreamweaver 8 c' la definizione automatica del sito che consente una procedura alternativa per la definizione dei siti oltre a quella gi conosciuta degli utenti delle versioni precedenti. Possiamo accedere al menu: Sito>Nuovo sito... sia dal menu di Dreamweaver che dal pannello Sito del gruppo File.

Scegliendo la scheda "Generali" dai pulsanti in alto a sinistra della finestra di dialogo Definizione del sito la procedura guidata ci guider passo, passo nella definizione del sito. Il primo passo da compiere dare un nome al sito e specificare l'URL in cui verr pubblicato. In questa prima schermata ci viene data la possibilit di creare una connessione FTP o RDS (quest'ultima per lavorare direttamente sul server). Esaminiamo la creazione di un sito locale che dovr essere pubblicato di volta in volta quando decideremo di aggiornarlo. Premendo il pulsante "Avanti" la finestra di dialogo ci chiede se vogliamo utilizzare una tecnologia server, selezionando l'opzione "Si" si aprir un menu discesa dal quale selezionare la tecnologia lato server tra quelle supportate da Dreamweaver, cliccando su "No" invece potremo procedere a definire un sito di pagine HTML. Possiamo a questo punto premere sia "Indietro", sia "Avanti", nel primo caso potremo modificare le scelte fatte nei passaggi precedenti, cliccando "Avanti" proseguiremo nella procedura di definizione del sito. Cliccando su "Avanti" ci viene richiesto dove vogliamo creare e modificare i nostri file, le alternative sono due: 1. Modificando copie locali sul proprio computer, caricando sul server quando pronti (consigliato); 2. Modificando i file direttamente sul server attraverso la rete locale.

Avendo scelto di realizzare pagine HTML la prima delle scelte quella raccomandata e Dreawmeaver ci propone come cartella di destinazione del sito locale una cartella col nome scelto nel primo passaggio della procedura all'interno della cartella che contiene gli altri siti web (creata per l'esigenza). Figura 1. Definire un sito

Cliccando "Avanti" ci viene richiesto come vogliamo connetterci al server remoto, se non abbiamo intenzione di specificarlo in questo momento, possiamo scegliere l'opzione "Nessuno", altrimenti l'opzione pi frequentemente utilizzata FTP, in questo caso i campi richiesti sono: indirizzo "FTP" o "nome dell'host", la "cartella di destinazione", il "nome utente" e la "password" (inserendo quest'ultima la casella "Salva" per memorizzare la password verr automaticamente spuntata). Se stiamo lavorando su un computer personale o comunque in un account personale protetto da password consigliabile mantenere spuntata la casella "Salva" in modo da non dover digitare la password a ogni pubblicazione del sito. Se invece c' la possibilit che altri utenti accedano al computer che stiamo attualmente usando (e allo stesso account) sconsigliabile salvare la password perch in tal caso persone non autorizzate avranno completo accesso allo spazio FTP remoto in cui pubblicato il sito. Premendo il pulsante Prova connessione, se siamo connessi ad internet, possiamo provare la connessione. Verificato che la connessione attiva premiamo "Avanti". La nuova finestra di dialogo ci chiede se vogliamo abilitare il deposito e ritiro dei file del sito: questa procedura risulta utile quando si lavora in team ed avita a pi persone di lavorare contemporaneamente sullo stesso file. Questo meccanismo permette di perdere i lavoro eseguito da un utente, vediamo perch nel seguente esempio: l'utente A scarica dal remoto la pagina alfa.htm e inizia lavorarci;

poco dopo l'utente B scarica (sempre dal remoto) la pagina alfa.htm e inizia a lavorarci;

poi l'utente A ha finito di lavorare alla pagina alfa.htm e la salva sul remoto; infine l'utente B (anch'esso ha finito di lavorare alla pagina alfa.htm) decide si salvarla.

In questo caso il lavoro dell'utente A verrebbe perso! Premendo "Avanti" vedremo un rapporto delle impostazioni del sito ed infine premendo "Fine" il sito verr creato e cos pure la relativa cartella che sar visibile nel pannello "Sito". Cliccando sul pulsante Espandi per visualizzare siti, l'ultimo a destra sul pannello "Sito", si apre la finestra del sito divisa in due aree, sulla destra visualizziamo i file e le cartelle del sito come appaiono nel panello documenti, sulla sinistra la mappa del sito. anche possibile creare dei collegamenti tra le pagine puntando sulla relativa icona accanto al file e trascinando il mouse fino al file che si vuole collegare. Quando siamo connessi al sito remoto, sulla sinistra potremo visualizzarne i file e le cartelle come nei programmi FTP. Nella finestra del sito possibile ordinare i file per data ultima modifica, tipo, dimensione, ecc. Quando siamo in visualizzazione finestra del sito, a parte i pulsanti che consentono di visualizzare su un lato alternativamente il sito remoto o la mappa del sito, troviamo anche il pulsante di Visualizza registro FTP del sito che apre il pannello di visualizzazione dei Log FTP nella parte inferiore dell'area di lavoro all'interno del gruppo "Risultati". Gli altri pulsanti, che troviamo pure sul pannello "Sito", sono il pulsante di collegamento al sito remoto ed il pulsante di Aggiorna. Cliccando sui pulsanti "Scarica File" e "Carica File" (se abbiamo selezioniamo uno o pi file) ci viene richiesto se vogliamo trasferire anche i file dipendenti, ad esempio i file di immagini. Gli altri pulsanti sono "Ritira file" e "Deposita file" sono attivi solo quando si lavora in remoto. Avvertenza: qualora non si utilizzino dei collegamenti HTML, ma JavaScript o con scripting server side, eliminare questi file richiede una certa cautela, perch alcuni file potrebbero risultare non collegati, quando invece lo sono.

Sincronizzazione del sito


Dal menu del pannello "Sito" possibile accedere alle funzioni Sincronizzazione... ovvero Dreamweaver controlla qual il pi recente tra i medesimi file presenti sia nel sito remoto, sia in quello locale e ne consente l'aggiornamento. Figura 1. Pannello "sincronizza"

da notare come rinominando una cartella o un file Dreamweaver chiede se si vogliono aggiornare i collegamenti dei vari file che puntano a quella cartella o file. Infine possiamo aprire dal pannello "Sito" tutti i tipi di file con il relativo programma associato, come se ci trovassimo in "Esplora risorse" di Windows. Quei file per i quali abbiamo definito un editor predefinito per Dreaweaver, dal menu: Modifica>Preferenze...>Tipi di file/editor, con un doppio click del mouse verranno aperti da quel programma, indifferentemente da quale stato invece scelto come programma associato per il sistema operativo. Ad esempio per aprire i file di immagine si pu avere come programma predefinito ACDSee, un browser di immagini, ma cliccando sugli stessi, dal pannello Sito, essi verranno aperti direttamente da Fireworks, se lo si scelto come editor di immagini predefinito per Dreamweaver. I file per i quali Dreamweaver l'editor predefinito con un doppio click verranno aperti da Dreamweaver. E' anche possibile scegliere di aprire qualsiasi tipo di file con un altro programma, cliccando sul sottomenu Sfoglia... Figura 2. Apertura file

Definire i tag
Probabilmente la prima cosa che sar necessario fare quando si realizza una pagina web impostare le sue propriet inserendo o modificando i tag nidificati all'interno del tag <head> e gli attributi del tag <body>. Dreamweaver consente di modificare anche il contenuto del tag head in modo visuale. Per modificare il titolo possiamo utilizzare due metodi o dalla finestra di dialogo delle propriet di pagina, di cui parleremo pi avanti, oppure digitando il titolo dalla pagina nel campo "Titolo" della barra degli strumenti "Documento". Accedendo alla barra degli strumenti "Inserisci" e scegliendo il gruppo "HTML" troviamo il menu Head: che permette di inserire altri tag nell'head della pagina. Figura 1. Selezionare il tag

Scegliendo la voce Meta si apre il seguente pannello che permette di inserire nella pagina delle informazioni aggiuntive che verranno utilizzate dal server o da altri sistemi automatizzati. Pi semplicemente questo strumento (e gli altri del menu "Head") ci permettono di inserire delle informazioni nella pagina che ne definiscono alcune caratteristiche, pur rimanendo non visibili al navigatore. Il concetto simile a quello dei tag che permettono di memorizzare in un file mp3 il nome della canzone, il suo autore, etc... Figura 2. Definire gli attributi

La voce Parole chiave permette di elencare alcune parole che definiscono la pagina. In realt i moderni crawler dei motori di ricerca come Google fanno sempre meno caso a questo tag e sempre pi attenzione all'effettivo contenuto della pagina. Tuttavia questo strumento rimane ancora fondamentale per la creazione di pagine facilmente catalogabili dai sistemi automatici. La voce Descrizione serve per inserire una breve descrizione del contenuto della pagina, anch'esso utile ai motori di ricerca. Il tag Base determina un collegamento di base per la pagina. utile nel caso si volessero inserire nella pagina collegamenti relativi a siti esterni, oppure, qualora volessimo aprire tutti i collegamenti della pagina in un'altra finestra del browser, o nel caso di pagine con frame stabilire un frame di destinazione comune, in questi casi non sar dunque necessario specificare il target a livello di singolo link. Per comprendere meglio il significato di questo tag si leggano le parti relative ai link e ai set di frame. comunque possibile specificare, per i singoli link della pagina, valori differenti da quelli di base, specificando il target a livello di singolo link oppure inserendo un link assoluto diverso da quello relativo di base Come si accennava Dreamweaver consente il controllo visuale anche degli elementi del tag head. Il cui unico elemento visualizzato dai browser il tag <title>. Infatti quando la voce

Contenuto Head spuntata nel menu "Opzioni di visualizzazione" della "Barra degli strumenti Documento" gli elementi del tag head verranno visualizzati come icone in uno spazio orizzontale proprio sopra la pagina web. Figura 3. Visualizzare i contenuti dell'intestazione

cos possibile selezionare, puntando il mouse sui singoli elementi, vederne ed editarne le propriet nel pannello "Propriet", cambiarne l'ordine con un semplice trascinamento ed eliminare gli elementi selezionati col tasto "Canc", il tutto in modalit "Progettazione". possibile selezionare un solo elemento alla volta. Infine la voce Collegamento serve per creare collegamenti a file esterni che contengono codice necessario al funzionamento della pagina o alla sua rappresentazione grafica (come ad esempio JavaScript e CSS). Avvertenza: sebbene utili per una parte dei motori di ricerca questi ed altri meta tag, come ad esempio il meta Robots, non esauriscono la lista degli accorgimenti da utilizzare per agevolare il lavoro dei motori di ricerca. Infatti molti di essi tengono in conto anche altri elementi, quali: il titolo della pagina; l'url; il testo alternativo per le immagini; i titoli inseriti nel contenuto della pagina; il contenuto effettivo della pagina.

Per una pi dettagliata rassegna di su questo genere di accorgimenti si legga questo articolo.

Definire le propriet della pagina


Possiamo accedere al controllo delle propriet della pagina in due modi, dal menu: Elabora>Propriet di pagina... oppure col menu contestuale, tasto destro del mouse sulla pagina. In entrambi i casi verr visualizzata la finestra di dialogo "Propriet di pagina". Figura 1. Pannello "Aspetto"

Nelle vecchie versione di Dreamweaver le impostazioni relative al tag body della pagina (quelle cio che definivano il colore dei collegamenti, lo sfondo della pagina, etc...) venivano codificate in HTML. Attualmente questo lavoro viene delegato ai fogli di stile. La finestra Propriet di pagina propone gli strumenti raggruppati in 5 pannelli. Nel primo pannello (Aspetto) possiamo definire il carattere della pagina, la dimensione del carattere e tutta la classica collezione di parametri che determinano il modo in cui viene visualizzata la pagina e gli oggetti in essa contenuti. Il pannello Collegamenti permette di definire la visualizzazione dei collegamenti della pagina. Figura 2. Pannello "Collegamenti"

Il pannello intestazioni definisce il carattere, il formato (grassetto e/o corsivo), la dimensione e il colore di ognuna delle 6 intestazioni (attenzione, il carattere comune per tutte le intestazioni). Figura 3. Pannello "Intestazioni"

Il pannello Titolo/Codifica permette di impostare il titolo della pagina, il tipo di documento e la codifica dei caratteri. Figura 4. Pannello "Titolo/Codifica"

Infine c' il pannello Immagine di ricalco. Figura 5. Pannello "Immagine di ricalco"

Questa funzione serve per la costruzione della pagina. Cliccando il pulsante Sfoglia si pu scegliere un'immagine che verr inserita nello sfondo della pagina web e tramite il selettore Trasparenza e se ne pu stabilire, appunto, la trasparenza. Tale immagine non apparir sui browser, serve solo a scopo interno per costruire la pagina. L'utilizzo tipico quando si crea un'interfaccia per la pagina con un programma grafico che non consente l'esportazione dell'HTML oppure si preferisce lasciare scrivere l'HTML da Dreamweaver, che comunque genera un HTML pi efficiente di quello di qualsiasi programma grafico.

Di conseguenza avendo l'immagine di ricalco a disposizione si possono pi facilmente impostare gli elementi della pagina, come ad esempio le tabelle senza bisogno di importare l'HTML del programma grafico.

Gestire le immagini
Come si finora visto Dreamweaver consente di effettuare la medesima azione in svariati modi, anche l'inserimento delle immagini non fa eccezione. infatti possibile, in modalit Progettazione, inserire un'immagine posizionandosi nel punto desiderato della pagina e dal menu Inserisci>Immagine, navigare all'interno del computer e selezionare l'immagine desiderata; Figura 1. Selezionare un'immagine

Oppure dal gruppo "Comune" della barra degli strumenti "Inserisci", scegliendo la voce "Immagine" dal menu "Immagini". Figura 2. Icona di inserimento immagine sulla barra "Inserisci"

Con la combinazione di tasti Ctrl+Alt+I. Dal pannello Sito del gruppo File, trascinando l'immagine prescelta nella pagina, essa verr posizionata nel punto in cui si trova il cursore. possibile selezionare un immagine sia del sito locale, sia navigando all'interno del computer con l'Esplora risorse integrato nel pannello Sito. Sempre nel gruppo di pannelli File dal pannello Risorse, cliccando sull'icona delle immagini presenti nel sito verranno visualizzate tutte immagini contenute nel sito locale, dunque possibile selezionarne una e premere il tasto Inserisci. Figura 3. Selezionare un'immagine dal pannello "Risorse"

Oppure col click destro del mouse - sul file dell'immagine o sulla sua anteprima - selezionare l'opzione "Inserisci". Figura 4. Rimpiazzare un'immagine gi inserita

anche possibile trascinare l'immagine nella pagina. Con entrambi i metodi che accedono all'immagine dal pannello "Risorse" l'immagine verr posizionata dove si trova il cursore. Avvertenze: il doppio click sul file dell'immagine nel pannello "Sito" o nel pannello "Risorse" o sulla sua anteprima nel pannello "Assets" lancia l'editor delle immagini predefinito. Dunque questo non un metodo per inserire le immagini, ma per modificarle. Se si inserisce un'immagine in modalit "Codice" dal panello "Comune" non verranno inseriti gli attributi di dimensione dell'immagine. Se un'immagine viene inserita in una pagina non ancora salvata all'interno del sito locale, Dreamweaver mostra una finestra che avverte che per scrivere un percorso relativo al documento il documento stesso deve essere salvato, Figura 5. Inserire l'immagine tra le risorse del sito

infatti la sintassi che si trover nel codice sar di questo tipo:


<img src="file:///G|/Sites/corsomx/samples/011/immagini/palermo.jpg" width="400" height="268" />

ovvero con un percorso assoluto riferito al disco dove si trova l'immagine. Una volta salvata la pagina il codice verr automaticamente trasformato in
<img src="immagini/palermo.jpg" width="400" height="268" />

ovvero il percorso relativo al documento salvato. Come si vede in figura 1, nella finestra di dialogo che permette di selezionare l'immagine desiderata, possibile scegliere se il percorso deve essere relativo al documento oppure alla Cartella principale del sito. Figura 6. Inserire il percorso relativo

Se si sceglie la seconda opzione Dreamweaver scriver direttamente un percorso relativo alla cartella principale del sito, di questo tipo
<img src="/samples/011/immagini/palermo.jpg" width="400" height="268">

e non far visualizzare la summenzionata finestra di avvertimento relativa al percorso del file d'immagine, nonostante la pagina sia ancora da salvare. anche possibile inserire un'immagine esterna al sito locale. In questo caso se la pagina gi stata salvata all'interno del sito e si scelta l'opzione Relativo a: Documento oppure, con la pagina ancora non salvata, e l'opzione Relativo a: Cartella principale del sito selezionata, vedremo un messaggio che ci avverte che il file dell'immagine si trova al di fuori del sito, qual la cartella principale del sito e se vogliamo copiare il file all'interno del sito. Figura 7. Inserire l'immagine tra le risorse del sito

Cliccando "Si" potremo scegliere in quale cartella del sito locale copiare l'immagine. Questo perch il percorso HTML relativo all'immagine esterna al sito potrebbe funzionare nel nostro computer, consentendoci di visualizzarla correttamente, ma una volta pubblicato il sito sul web essa non sarebbe visibile.

Nella finestra di dialogo che consente di navigare all'interno del nostro disco, di default, selezionata l'opzione Seleziona nome file da: File System, se invece, in un sito che utilizza una tecnologia server side, viene spuntata l'opzione Origine Dati ai file verr attribuito il nome dinamicamente da una base di dati, ad esempio da una query al database. Figura 8. Selezione del nome del file

Una volta che l'immagine inserita nella pagina e selezionata possiamo controllarne le propriet dal pannello Propriet. Figura 9. Propriet dell'immagine

Dreamweaver inserisce, come attributi dell'immagine, il percorso relativo al file e le dimensioni La (larghezza) e Al (altezza). Queste dimensioni corrispondono alle dimensioni originali del file, ma possibile modificare tali attributi dando all'immagine dimensioni differenti rispetto a quelle originarie. possibile modificare le dimensioni dell'immagine nel documento dalle maniglie di ridimensionamento sui bordi dell'immagine. Per ridimensionare un immagine, bloccandone le proporzioni, necessario utilizzare la maniglia diagonale, posta sull'angolo dell'immagine, tenendo contemporaneamente premuto il tasto Maiuscolo. Tuttavia le dimensioni del file ed il suo peso in Kb rimarranno invariati, inoltre, poich gli algoritmi di ridimensionamento delle immagini dei browser non sono sofisticati il risultato potrebbe essere deludente. In ogni caso se si rimpicciolisce un'immagine dagli attributi HTML

width e height si costringe i visitatori delle pagina a caricare byte superflui, in quanto un immagine pi piccola pesa meno Kb, mentre se la si ingrandisce si perde in qualit rendendo pi visibili i pixel. Dunque sempre meglio ridimensionare il file piuttosto che gli attributi HTML, lasciando in questi le dimensioni originali. Uno dei modi per modificare, l'immagine premere il pulsante di Fireworks sul pannello Prosperit, gli altri sono il doppio click sul file nel pannello Sito; il doppio click sul file o sulla sua anteprima nel pannello Risorse; selezionare l'immagine nel documento e dalle opzioni, visualizzate col tasto destro del mouse, scegliere Modifica con Fireworks (o con qualsiasi altro programma stato definito del menu Modifica >Preferenze... come editor principale) oppure Modifica con e selezionare o scegliere un programma per la manipolazione delle immagini. Ogni volta che decidiamo di modificare con Fireworks un'immagine presente nella pagina web si apre la seguente finestra in cui dobbiamo scegliere se eseguire l'ottimizzazione sull'immagine corrente o se usare un file png appositamente generato per non modificare l'originale. Lo stesso discorso vale per il pulsante Ottimizza in Fireworks. Una volta scelto se usare un sorgente png o l'immagine originale si apre la seguente schermata di Fireworks che permette di eseguire varie operazioni di ottimizzazione. Figura 11. Pannello di ottimizzazione di Fireworks

La funzione ritaglio permette di mantenere solo una porzione dell'immagine originale. Per usarla dobbiamo: selezionare l'immagine che vogliamo ritagliare; premere il pulsante Ritaglio dal pannello Propriet; definire un rettangolo sull'immagine che stiamo ritagliando; premere ancora il pulsante Ritaglio.

A questo punto sar rimasta solo la porzione dell'immagine relativa al rettangolo che avevamo impostato su di essa. Questa funzione, come ci avverte Dreamweaver all'inizio, causa la perdita dell'immagine originale quindi bene eseguirla solo su immagini di cui disponiamo una copia. Il pulsante Ridefinisci serve invece a ripristinare, come attributi HTML dell'immagine, le dimensioni originali del file, sia quando questi mancano, sia quando sono differenti dall'altezza e larghezza del file, in questo caso le dimensioni visualizzate nel pannello Propriet appariranno in grassetto. Specificare le dimensioni della immagine permette, in genere, ai browser di caricare pi rapidamente la pagina e mostrare pi velocemente il contenuto testuale. Infatti il browser, in questo modo, sar in grado di conoscere le dimensioni dell'immagine ancora prima di aver finito di scaricarla. Quindi sar in grado di attribuire all'immagine il giusto spazio e posizionare gli altri elementi della pagina di conseguenza. Proseguendo sulla destra troviamo il pulsante Luminosit e contrasto. Come per i comandi precedenti dobbiamo prima selezionare l'immagine e poi il pulsante relativo all'operazione che desideriamo eseguire, appare una finestra di dialogo per avvertirci che le modifiche che apporteremo saranno permanenti (ancora una volta bene avere una copia dell'immagine su cui stiamo lavorando!). Dopo aver premuto Ok compare il pannello che ci permette di alterare la luminosit ed il contrasto dell'immagine. Figura 13. Pannello "Luminosit/Contrasto"

Infine troviamo il pulsante Precisione. Il funzionamento analogo a quello del pulsante descritto in precedenza. Figura 14. Pannello "Precisione"

Sempre dal pannello Propriet possibile aggiungere e controllare il nome dell'immagine. Sin da Dreamweaver MX aggiungendo nel relativo campo il nome verr anche aggiunto l'id, questo per una maggiore aderenza agli standard, in particolare XHTML richiede che per gli elementi di una pagina sia specificato al posto dell'attributo name l'attributo id, magari in associazione con name per garantire la retrocompatibilit con i browser pi vecchi. Dal pannello Propriet possibile inserire nel campo Alt il testo alternativo per le immagini, utile per gli standard di accessibilit e fortemente consigliato per rendere pagine pi gradevoli ai crawler dei motori di ricerca. Compilando il campo Collegamento si trasforma l'immagine in un collegamento ipertestuale. possibile inserire un collegamento: scrivendo il collegamento direttamente nel campo; cliccando sull'icona cartella, navigare all'interno del computer e selezionare il documento o il file da linkare; cliccando sull'icona puntatore e trascinando il mouse fino ad un documento del pannello Sito. Nella parte inferiore (a scomparsa) del pannello Propriet possibile scegliere altre opzioni. Possiamo stabilire una Destinaz (ione) per il collegamento dal relativo menu a discesa. Nel campo Bordo possiamo inserire la dimensione del bordo (in pixel) dell'immagine. Nei campi Spazio O e Spazio V si pu inserire la distanza orizzontale e verticale dagli altri elementi della pagina. Cliccando i pulsanti Allinea a destra, Allinea a sinistra o Allinea al centro l'immagine verr allineata di conseguenza ed il tag img nidificato all'interno del tag <div> o <p> o di un'altro elemento block-level. possibile inserire un'immagine in versione pi leggera (riducendone dimensioni, risoluzione, numero di colori, sfuocandola, utilizzando una scala di grigi). Tale immagine viene richiamata, prima che venga caricato il file pi grande, per mezzo dell'attributo lowsrc e poi sostituita dall'immagine di migliore qualit. L'immagine lowsrc inseribile come le immagini normali dall'apposito campo Preorig posto nella parte inferiore del pannello Propriet. Tuttavia quando in un sito locale abbiamo salvato anche le immagini sorgenti PNG di Fireworks, visualizzeremo l'icona dell'immagine - in alto a sinistra nel pannello Propriet - con il logo di

Fireworks e sulla sinistra del campo riservato a Preorig sar visibile un'icona di Fireworks e nel campo il percorso al file sorgente PNG. In questo caso cliccando sul pulsante Modifica verr aperto per le modifiche direttamente il file sorgente. Un immagine pu essere affiancata a del testo, le opzioni per il controllo degli attributi relativi all'affiancamento del testo all'immagine sono controllabili dal menu a discesa Allinea sulla destra della parte inferiore (a scomparsa) del pannello Propriet. Figura 15. Opzioni di allineamento

Le opzioni di allineamento sono: Predefinito (generalmente allinea l'immagine come l'attributo baseline); Linea di base (base dell'immagine allineata con la base del testo); In alto (parte superiore dell'immagine allineata all'oggetto pi alto); Al centro (il centro dell'immagine allineata con la base del testo); Inferiore (parte inferiore dell'immagine allineata all'oggetto pi basso); Limite superiore testo (parte superiore dell'immagine allineata alla lettera pi alta); Centro assoluto (il centro dell'immagine allineata con centro del testo); Punto inf assoluto (base dell'immagine allineata alle lettere pi basse, ad esempio p, g, y); A sinistra (immagine a sinistra e testo a destra in alto); A destra (immagine a destra e testo al sinistra in alto).

Immagini segnaposto e mappe immagine


In Dreamweaver possibile inserire delle immagini segnaposto che servono per ottimizzare il flusso di lavoro in fase di realizzazione del layout della pagina. Figura 1. Esempio di segnaposto

Per inserire delle immagini segnaposto si pu accedere dal menu: Inserisci>Oggetto immagine>Segnaposto immagine oppure dal gruppo Comune della barra Inserisci aprire il menu Immaginie scegliere Segnaposto immagine. Figura 2. Selezione del segnaposto

Viene visualizzata una finestra di dialogo dove inserire il nome, le dimensioni, il colore ed il testo alternativo per l'immagine segnaposto. Figura 3. Pannello Segnaposto immagine

Alcune opzioni di controllo su queste immagini virtuali sono disattivate nel pannello Propriet, sebbene sia sempre possibile inserire tali attributi manualmente in modalit Codice.

Mappe Immagine
Dreamweaver consente di creare punti attivi all'interno delle immagini: le cosiddette "mappe immagine", dove inserire dei collegamenti o comportamenti JavaScript. Gli strumenti per disegnare le mappe immagine sono il rettangolo, l'ovale ed il poligono. Selezionato il tipo di strumento sufficiente disegnare l'area attiva sull'immagine. Con lo strumento poligono sufficiente inserire 3 punti in un'immagine e l'area verr creata automaticamente all'interno dei tre punti. Con lo strumento rettangolo e con quello ovale ancora pi semplicemente basta determinare un vertice dell'area da ricoprire con la mappa immagine e spostare il mouse in diagonale fino al punto desiderato. Quando si utilizza lo strumento rettangolo, cliccando contemporaneamente il tasto "Maiuscolo" viene disegnato un quadrato Avvertenza: sebbene si chiami ovale, questo strumento in grado di disegnare solo cerchi. Figura 4. Mappe immagini di varie forme

Creati i punti attivi sull'immagine sufficiente cliccare sulla freccia accanto alle forme delle mappe immagine nel panello "Propriet" e selezionare con il mouse l'immagine per tornare alle propriet dell'immagine. Puntando col mouse sulla mappa immagine potremo accedere nuovamente al pannello "Propriet" della stessa e ridimensionarla (o modificarla nel caso del poligono) attraverso le maniglie contrassegnate da dei quadratini sui bordi, cliccando all'esterno si visualizzano nuovamente le propriet dell'immagine. Figura 5. Propriet

anche possibile spostare di un pixel alla volta l'area attiva con i tasti "Freccia!", o di 5 pixel per volta con la combinazione "Maiuscolo+Freccia".

Filetto orizzontale
Il tag <hr> inserisce una riga orizzontale e sebbene non faccia ricorso ad un'immagine, l'effetto simile. Si pu inserire dal menu: Inserisci>HTML>Filetto orizzontale; oppure premendo l'apposito pulsante del pannello "HTML" della barra "Inserisci".

Dal pannello "Propriet" possibile controllarne gli attributi: "id", "larghezza" in pixel o percentuale, "altezza", "allineamento" ed "ombreggiatura". Figura 6. Propriet del filetto orizzontale

Tuttavia si pu sempre inserire in modalit Codice.

Inserimento dei collegamenti


possibile applicare un collegamento ipertestuale direttamente a del testo, ad un'immagine o ad una sua parte, ovvero ad una mappa immagine. Per cui, essendo a questo punto chiare sia la gestione del testo, sia quella delle immagini, risulta pi semplice comprendere l'inserimento dei collegamenti usando Dreamweaver. Notiamo che quando l'immagine non un collegamento, Dreamweaver inserisce automaticamente nel campo "Bordo" il valore "zero". Se invece l'immagine un collegamento allora di default viene contornata da un bordo che ha gli stessi colori dei collegamenti testuali. Se tuttavia si vuole che l'immagine collegamento non sia contornata dal bordo possibile inserire il valore zero dal campo "Bordo". Dreamweaver, nella parte superiore del pannello "Propriet", mostra il campo Colleg dove inserire il collegamento. Figura 1. Il campo Colleg(amento)

Il collegamento pu essere direttamente digitato nel campo omonimo oppure si pu cliccare sull'icona cartella, navigare nel disco e selezionare il file da associare al documento. anche possibile, una volta selezionato l'elemento della pagina da linkare, trascinare l'icona puntatore su un file del pannello Sito. Quando si crea un collegamento, Dreamweaver si comporta in modo analogo all'inserimento delle immagini ovvero: avverte, se la pagina non stata ancora salvata, che il collegamento viene creato con un percorso assoluto riferito al disco dove si trova il documento da collegare, per poi trasformarlo in relativo una volta che la pagina salvata; se il file da collegare esterno al sito locale ci verr richiesto se vogliamo copiarlo nel sito locale; si pu creare un collegamento non solo relativo al documento, ma anche alla cartella principale del sito; in un sito che utilizza una tecnologia server side, possibile selezionare l'opzione Origine dati, cos al file da collegare verr attribuito il nome dinamicamente da una tabella del database. Per un approfondimento di quanto detto sopra si confronti l'apposita sezione del capitolo sull'inserimento delle immagini, viste le forti analogie. Quanto finora esposto si riferisce ai cosiddetti collegamenti relativi. Ad esempio un collegamento del tipo portofolio/sito_1/index.htm sta a significare che ho creato, all'interno del sito http://my_site.com, un collegamento al file index.htm che si trova nella sotto-sottocartella portofolio/sito_1/, dunque il collegamento assoluto, in questo caso, si potrebbe esprimere in questo modo http://my_site.com/portofolio/sito_1/index.htm. Normalmente i collegamenti relativi si utilizzano all'interno del proprio sito e quelli assoluti per risorse esterne al sito. Tuttavia, qualora si imposti in una pagina come base l'URL di un altro sito, possibile usare dei collegamenti relativi a pagine interne dell'altro sito. Ad esempio se utilizza come base di una pagina http://www.macromedia.com/ per scrivere il collegamento alla pagina interna http://www.macromedia.com/it/software/dreamweaver/, sar sufficiente scrivere nel campo "Collegamento" del pannello "Propriet" it/software/dreamweaver/.

Avvertenza: in questo caso anche le immagini faranno riferimento a quel sito esterno, per cui non consigliabile questo uso di base, a meno che non si sappia esattamente cosa si sta facendo.

Target
Una volta inserito un collegamento nel pannello "Propriet", il menu a discesa "Dest" diventa attivo e propone le seguente voci: _blank, _parent, _self e _top, pi i vari nomi dei frame, nel caso di una pagina con frame. Il significato dei target _parent e _top verr illustrato nel capitolo sui frame, _self il comportamento predefinito delle finestre del browser, ovvero l'apertura di una nuova pagina all'interno della stessa finestra, per cui al di fuori del contesto di un set di frame, in genere, non ha significato. Il target _blank apre il collegamento in una nuova finestra, lasciando aperta sullo sfondo la finestra che ha aperto collegamento. Si pu indicare come base di una pagina il target _blank quando si vuole che i collegamenti di quella pagina si aprano, per impostazione predefinita, in un'altra finestra del browser. In questo caso nei singoli collegamenti non sar necessario specificare il target _blank, definito a livello di pagina. Tuttavia se si vuole aprire qualche collegamento nella stessa finestra del browser, bisogner, in questo caso, selezionare _self, anche se non si lavora con i set di frame, inoltre poich Dreamweaver inserisce di default l'attributo href bisogna comunque specificare l'URL del sito, oppure cancellare questo attributo nella vista Codice, se si vuole verificare sul proprio sistema questo tipo di collegamento. Gli esempi finora illustrati riguardano l'apertura di pagine web, ma possibile utilizzare i collegamenti per far scaricare dei file, la procedura piuttosto semplice, nella gran parte dei casi baster comprimere un file in formato zip e creare un collegamento a quel file di questo tipo mio_file.zip nel caso di collegamenti relativi, oppure http://my_site.com/mio_file.zip nel caso di collegamenti assoluti. In generale ogni collegamento che punta a un tipo di file non riconosciuto non gestibile direttamente dal browser (o da un suo plugin) vene gestito dal browser avviando la procedura di download del file.

Link a FTP, E-Mail e Newsgroup


Oltre ad HTTP, i metodi per collegarsi ai server remoti possono essere di altro tipo: FTP, Gopher, Mailto, News, Telnet. Vediamo degli esempi di quelli pi frequentemente utilizzati. Il File Transfert Protocol (FTP) normalmente utilizzato per caricare e scaricare i file del nostro sito sul server remoto, in pratica per pubblicare il nostro sito, ovviamente in questo caso richiesto un nome utente ed una password. Si visto come Dreamweaver abbia un

programma FTP integrato. Tuttavia il protocollo FTP pu essere usato per aprire finestre del browser e consentire di scaricare dei file, in questo caso, l'accesso FTP pu essere, anche anonimo. Il metodo Mailto consente di creare un collegamento che apre il programma di posta elettronica dell'utente con il campo del destinatario gi compilato, dunque se si vuole essere contattati dai visitatori del sito, baster creare un collegamento, sempre su testo o su immagine, di questo tipo mailto:info@my_site.com. Dreamweaver offre la possibilit di creare questo tipo di collegamento in modo visuale. infatti sufficiente cliccare sul pulsante Collegamento e-mail del pannello "Comune" della barra "Inserisci", oppure scegliere dal menu Inserisci>Collegamento e-mail. Figura 1. Icona del collegamento a e-mail

Figura 2. Collegamento a e-mail da menu

Dopo aver cliccato su "Collegamento e-mail" una finestra di dialogo richieder di inserire il testo del collegamento e l'indirizzo e-mail (senza mailto:) e nel punto del documento dove posizionato il cursore verr visualizzato il testo, con il collegamento alla e-mail che si sono inseriti nella finestra di dialogo. Figura 3. Finestra di dialogo del collegamento a e-mail

possibile specificare oltre al destinatario principale, anche quelli CC e BCC, l'oggetto ed il contenuto del corpo del messaggio: Scrivendo il collegamento email in questo modo:
mailto:info@my_site.com?Subject=Richiesta informazioni&CC=amministrazione@my_site.com&BCC=webmaster@my_site.com

si specificano il destinatario principale: info@my_site.com, l'oggetto: Richiesta informazioni, il destinatario CC: amministrazione@my_site.com ed il destinatario BCC: webmaster@my_site.com.

Un altro tipo di collegamento frequentemente utilizzato quello ai server delle news. Immaginiamo di voler creare un collegamento al Newsgroup ufficiale di Macromedia Italy, nel campo "Collegamento" sar sufficiente scrivere l'indirizzo del newsgroup preceduto da news://, ad esempio: news://forums.macromedia.com/macromedia.general.italy. Una funzionalit simile al pulsante "Collegamento e-mail" la possibilit inserire un collegamento, nel punto della pagina dove si trova il cursore, cliccando il pulsante "Collegamento ipertestuale" del pannello "Comune". Figura 4. Icona "Collegamento ipertestuale"

Una finestra di dialogo richiede il testo da inserire, il collegamento - in questo caso bisogna specificare sempre il metodo: ftp://, http://, malto:, news://, oppure, cliccando sull'icona cartella, navigare nel proprio disco e scegliere il file da linkare - e l'eventuale target. Inoltre questa finestra di dialogo consente di inserire un ordine per il tasto "Tab" (Indice tabulazione). Col tasto "Tab" possibile spostarsi da un collegamento ad un altro ed usato principalmente per motivi di accessibilit. Se, ad esempio, stabiliamo per un collegamento come ordine 1, quel collegamento sar il primo ad essere accessibile dal tasto "Tab", indipendentemente dalla sua posizione nelle pagina. anche possibile inserire un titolo per il collegamento analogo al testo alternativo per le immagini. Nota: Ricordiamo che il titolo per i collegamento non visualizzato da NN4.X e dai browser di terza generazione ed inferiori. Infine possibile associare una scorciatoia da tastiera per aprire il collegamento, digitando una lettera nell'apposito campo, la scorciatoia viene attivata dalla combinazione dei tasti CTRL+ il tasto prescelto. Figura 5. Il pannello "Collegamento ipertestuale"

Come si visto nel capitolo sull'impostazione delle propriet della pagina, i collegamenti assumono tre colori diversi da quelli del testo: un colore predefinito, uno del collegamento attivo - quando viene cliccato - ed uno per i collegamenti visitati. possibile cambiare i colori predefiniti dei browser dalla finestra di dialogo delle propriet di pagina. Un collegamento pu essere indirizzato anche ad un punto preciso del documento, in questo caso necessario inserire un ancoraggio in quel punto della pagina ed il collegamento, preceduto dal simbolo #, va "riferito" a quell'ancoraggio. Immaginiamo di volere inserire un collegamento che consenta di tornare rapidamente dal fondo di una pagina lunga al suo inizio. Posizionandosi ad inizio pagina, si clicca sul pulsante Ancoraggio con nome del pannello "Comune" Figura 6. Icona dell'ancoraggio

e si inserisce il nome dell'ancora nella relativa finestra di dialogo, es: inizio_pagina. Figura 7. Pannello "Ancoraggio con nome"

Inserito cos l'ancoraggio, si crea il collegamento in fondo alla pagina, digitando #inizio_pagina nel campo "Collegamento" del pannello "Propriet" . Cliccando questo collegamento verremo portati all'inizio della pagina. anche possibile collegare un punto preciso di un'altra pagina facendo seguire al collegamento della pagina l'ancoraggio, ed esempio: pagina_con_ancoraggio.htm#ancoraggio_5.

Gli ancoraggi sono contrassegnati con un simbolo visibile, purch dal pulsante Riferimenti visivi della barra "Documento" non si sia selezionato "Nascondi tutti i riferimenti visivi".

Controllare le propriet delle tabelle


Le tabelle sono dei contenitori. Esse possono contenere dati tabulari, testo o immagini, per questi motivi hanno rappresentato il principale elemento per disegnare la struttura delle pagine quando il supporto dei browser a CSS e livelli era scarso o nullo. Adesso pi semplice utilizzare i CSS ed i layer per impostare il layout delle pagine. Ovviamente avere pi elementi a disposizione per determinare la struttura della pagina: tabelle, livelli e CSS semplifica non di poco il lavoro e consente una maggiore flessibilit. Dunque una efficiente integrazione dei vari elementi HTML probabilmente l'approccio pi corretto ed anche di maggiore buon senso. In HTML la struttura base di una tabella costituita dei tag <table> ovvero tabella <tr> riga di tabella e <td> dato di tabella, ovvero cella, dunque il numero di colonne implicitamente determinato dal numero di celle presenti su una riga, come si vede in questo esempio di tabella formata da due righe e due colonne:
<table> <tr> <td>contenuto</td> <td>contenuto</td> </tr> <tr> <td>contenuto</td> <td>contenuto</td> </tr> </table>

Per inserire una tabella in una pagina si pu cliccare sulla voce Inserisci>Tabella o cliccare sul pulsante "Tabella" nel gruppo "Comune" della barra "Inserisci". In alternativa si pu trascinare, sempre da questo pulsante, la tabella dentro la pagina. Figura 1. Icona "Tabella"

In tutti e tre i casi Dreamweaver mostrer una finestra di dialogo con le propriet della tabella nei vari campi (purtroppo anche nella versione italiana di Dreamweaver 8, attualmente questa finestra presenta del testo scritto in inglese). Figura 2. Pannello "Table"

Tali propriet possono essere modificate immediatamente dalla finestra di dialogo o successivamente dal pannello "Propriet". La prima volta che si utilizza Dreamweaver, la finestra di dialogo ci propone una tabella di 3 righe per 3 colonne larga il 75% della pagina con Cell Padding e Cell Spacing non determinati il che vuol dire 1px per il Cell Padding e 2px per il Cell Spacing - e bordo impostato ad 1px, vedremo tra breve il significato degli attributi della tabella. Una volta modificate le propriet della tabelle dalla finestra di dialogo Dreamweaver ci proporr al successivo inserimento di una tabelle le ultime propriet che avevamo impostato. Il pulsante Tabella presente in Dreameaver anche altri nel pannello Layout della barra Inserisci. Il controllo delle propriet di una tabella e dei suoi elementi righe e colonne particolarmente semplice in Dreamweaver utilizzando il pannello "Propriet" ed il Selettore di Tag. Quest'ultimo ci consente di selezionare una tabella o gli elementi in essa contenuti con estrema facilit. Da "Propriet" possiamo controllare e variare il numero di righe e di colonne nei rispettivi campi, la sua larghezza dal campo La e la sua altezza dal campo Al. Le dimensioni di una tabella possono essere impostate - sia in larghezza, sia in altezza - in percentuale selezionando dal men a discesa % oppure in pixel selezionando px. Figura 3. Modificare le dimensioni

In particolare, per la larghezza selezioneremo una misura in px quando vogliamo che la grandezza sia predefinita, ovviamente purch non inferiore ad altri elementi di dimensione fissa contenuti al suo interno, come per esempio immagini. La dimensione in percentuale, invece si basa su un'unit di misura relativa, che cambia al variare delle dimensioni della finestra del browser. Per cui pu tornare molto utile quando, per mezzo delle tabelle, si voglia impostare una struttura della pagina "elastica", che si adatti automaticamente alle diverse risoluzioni dei monitor dei visitatori della pagina. Infatti se impostiamo le dimensioni di una tabella al 75% essa occuper sempre il 75% o della pagina qualsiasi risoluzione essa venga visualizzata; tuttavia come area della pagina si intende quella a partire dal margine superiore e sinistro, pertanto se si vuole che una tabella occupi effettivamente il 100% di una pagina, bisogner impostarne i margini a 0. Sebbene una tabella di dimensioni percentuali non potr, comunque, essere inferiore al suo contenuto - ad esempio immagini - avente una dimensione fissa in pixel. Con i valori numerici (in pixel) inseriti nei campi MargCell e SpazCell si controllano rispettivamente il cellpadding ed il cellspacing. Il cellpadding rappresenta la distanza tra gli elementi contenuti nelle celle ed i bordi della cella, nell'esempio della schermata abbiamo impostato il cellpadding a 5 il che vuol dire che qualsiasi elemento contenuto nelle celle sar distanziato dai suoi bordi di 5 pixel a destra, a sinistra, in alto ed in basso. Il cellspacing rappresenta la distanza tra una cella e l'altra e tra queste ed il bordo esterno della tabella. Ovviamente quando si inseriscono nella cella elementi come le immagini aventi anch'essi una dimensione assoluta in pixel si dovr tenere conto del cellpadding e del cellspacing, altrimenti la tabella si allargher oltre le sue dimensioni - siano esse percentuali o in pixel - quando la somma degli elementi contenuti pi il cellpadding ed il cellpsacing superano le dimensioni della tabella. Sulla destra del pannello "Propriet" possiamo determinare, dal men a discesa Allinea, l'allineamento di una tabella. Il valore predefinito "Default" non scriver alcunch nel codice html e la tabella verr generalmente visualizzata allineata a sinistra. Gli altri valori sono A sinistra, Al centro, A destra. Nel campo Bordo possiamo inserire il valore in pixel del bordo di una tabella, quando non impostato diversamente il bordo delle righe o delle celle sar dello stesso colore, ma delle dimensioni di 1 pixel.

Sulla parte superiore sinistra del pannello "Propriet" possiamo inserire un id nel campo ID Tabella, questo pu tornare utile, ad esempio, quando vogliamo assegnare eventi JavaScript ad una tabella. Nella parte inferiore (a scomparsa) del pannello "Propriet" possiamo assegnare nei campi Col sf. e Colore Bordo rispettivamente il colore di sfondo della tabella ed il colore del suo bordo quando questo maggiore di 0 - il colore pu essere scelto dai selettori del colore accanto ai due campi. Il colore di sfondo predefinito di una tabella quello dello sfondo della pagina; il colore di default dei bordi di tabella grigio, con differenze minori da browser a browser. Si pu anche inserire un'immagine di sfondo al posto del colore di sfondo, in questo caso si sceglier lo sfondo cliccando sull'icona cartella sulla destra del campo Immagine e, navigando all'interno del proprio disco, selezionare l'immagine da inserire come sfondo oppure cliccando sull'icona puntatore e trascinandola fino ad un'immagine presente nel pannello "Sito". I sei pulsanti sulla parte inferiore sinistra servono per variare rapidamente le dimensioni di una tabella. Figura 4. Pulsanti di regolazione delle dimensioni

I due sulla sinistra annullano le dimensioni, rispettivamente in larghezza ed in altezza di una tabella; i due centrali convertono rispettivamente la larghezza e l'altezza da percentuale in pixel ed i due sulla sinistra convertono rispettivamente la larghezza e l'altezza da pixel in percentuale. Le conversioni in percentuale o in pixel sono fatte rapportandosi alla nostra area di lavoro. Talvolta pu essere problematico selezionare una tabella o un suo elemento all'interno di una pagina, soprattutto quando ci troviamo in presenza di tabelle, celle, righe o colonne molto piccole, o tabelle nidificate ovvero tabelle contenute all'interno di altre tabelle. Tuttavia Dreamweaver fornisce delle soluzioni che possono rendere tali operazioni molto facili. Per selezionare una cella la cosa pi semplice da fare posizionare il cursore al suo interno e poi selezionarne il tag td con il Selettore di Tag sulla barra di stato di Dreamweaver. Figura 5. Selettore dei tag

Lo stesso procedimento spostandosi sul tag immediatamente precedente - <tr> - pu essere fatta per selezionare una riga di tabella, le righe e le colonne possono anche essere selezionate trascinando il mouse da uno dei vertici della riga o delle colonne.

anche possibile selezionare le righe o le colonne posizionando il mouse sul bordo della tabella in corrispondenza della riga o colonna prescelta e cliccare per selezionarla quando il puntatore assume la forma di una freccetta nera. Per selezionare una tabella, infine la cosa pi semplice selezionarne il tag sul "Selettore di Tag".

Agire sulle celle e sulle righe


Selezionando una o pi celle, righe o una colonne di tabella possiamo controllarne le propriet. Come al solito dal pannello "Propriet". Figura 1. Selezione delle celle

Questa volta il pannello "Propriet" mostra nella parte superiore le propriet del testo che potremmo inserire nelle celle e nelle parte inferiore le propriet sia della cella, sia del gruppo di celle, se ne abbiamo selezionato pi di una, oppure della riga o della colonna. Quando selezioniamo una o pi celle l'icona sulla sinistra della parte inferiore del pannello "Propriet" mostra evidenziata una cella ed accanto la scritta Cella. Se invece selezionata una riga l'icona mostra selezionata una riga e la scritta Riga. Infine se una colonna ad essere selezionata sar mostrata un selezione di colonna e la scritta Colon. Le propriet mostrate dal pannello "Propriet" per celle righe e colonne sono analoghe, pertanto sono trattate insieme. Figura 2. Pannello "Propriet"

Due menu a discesa controllano l'allineamento orizzontale e verticale dei contenuti. Il menu Orizz allineamento orizzontale, a parte il valore "Predefinito" pu assumere i valori A sinistra (uguale a "Predefinito"), Al centro e A destra. Avvertenza: quando si inseriscono degli elementi (testo, immagini, ecc.) all'interno di una tabella spesso pu commettersi l'errore di definirne l'allineamento per mezzo dei pulsanti allinea testo, cos all'interno della tabella avremo l'allineamento determinato dal tag <div>, ad esempio <div align="center">.

Figura 3. Pulsuanti di allineamento del testo

Per evitare effetti indesiderati consigliato utilizzare l'attributo align. Infatti <div> un elemento block level che non pu essere contenuto all'intero di una tabella o di una riga di tabella e sebbene possa essere contenuto all'interno di una cella, pu ugualmente, dare origine a problemi. Il menu Vert, che determina l'allineamento verticale, invece pu assumere 5 valori: Predefinito, che uguale a Al centro, e posiziona gli elementi al centro della cella In alto che posiziona gli elementi in cima alla tabella Inferiore che li posiziona in basso Linea di base che li posiziona in alto in tutti i browser, tranne in NN4.x, che assume un comportamento diverso a seconda che gli elementi siano testo o immagini - in questo caso li allinea in basso come l'attributo Inferiore - ma in presenza di testo ed immagini li posizioner in alto come In alto. Per questa difformit di comportamento e poich non aggiunge nessun posizionamento diverso da In alto e Inferiore, non consigliabile usare questo attributo. I campi La e Al determinano rispettivamente la larghezza e l'altezza, inserendo un numero questo sar interpretato come misura in pixel, mentre qualora si voglia inserire una misura percentuale bisogner inserire il numero seguito dal simbolo %. La casella No a capo serve per bloccare l'andata a capo del testo e dunque disporlo su un'unica riga, se questa opzione spuntata ed il testo eccede in larghezza le dimensioni impostate per la cella allora essa si espander oltre le sue dimensioni per accoglierlo in un'unica riga. La casella Intest trasforma i tag <td> in tag <th> ovvero intestazione di tabella, il corretto uso applicare questo tag sulla prima riga di tabelle e/o sulla prima colonna (da sinistra), generalmente i browser visualizzeranno il contenuto delle intestazioni di tabella in grassetto e centrato. I due campi Sf servono per inserire il colore di sfondo o l'immagine di sfondo mentre il campo Bordo serve per inserire il colore del bordo, il tutto esattamente nello stesso modo dello sfondo e del colore del bordo della tabella. Un modo per ridimensionare le tabelle trascinarne i bordi dalle maniglie di ridimensionamento come si fa con le immagini. Per mantenere le proporzioni di altezza e larghezza necessario tirare la maniglia diagonale pressando in contemporanea il tasto "Maiuscolo". Nel ridimensionamento Dreamweaver preserver l'unita di misura, sia essa in pixel o in percentuale.

possibile, sempre con il metodo del trascinamento, posizionandosi sul relativo bordo, ridimensionare sia le celle, sia le colonne. Per unire pi celle, pi righe o pi colonne (tag <rowspan> e <colspan>) e sufficiente selezionare le celle desiderate e col tasto destro del mouse selezionare Tabella>Unisci celle. Figura 4. Menu contestuale

Posizionandosi su una cella possibile, sempre col tasto destro del mouse, selezionare Tabella>Dividi cella... una finestra di dialogo chieder se la si vuole dividere in righe o colonne ed il loro numero. Figura 5. Pannello "Dividi cella"

Entrambe le opzioni sono accessibili sia dal menu Elabora>Tabella sia dagli appositi pulsanti posti sulla sinistra del pannello "Propriet" di celle, righe e colonne. Sempre utilizzando il menu contestuale - tasto destro del mouse e selezionando indifferentemente una o pi celle o righe o colonne - possibile inserire nuove righe o colonne. Dal menu Elabora>Tabella>Inserisci Righe o Colonne... Figura 5. Menu contestuale

Una finestra di dialogo ci chieder se vogliamo inserire righe o colonne, il loro numero e se esse vanno inserite al di sopra o al di sotto della selezione. Figura 7. Pannello "Inserisci righe o colonne"

Con lo stesso metodo possibile accedere ad altre funzioni quali l'inserimento o la cancellazione di singole righe o colonne.

Altre opzioni di gestione


Quando si inserisce del contenuto nelle celle, ad esempio del testo esse si espandono per contenerlo. Tale espansione pu essere differita o immediata. Quando si inseriscono dati tabulari pu risultare comodo utilizzare le opzioni di formattazione accessibili dal menu: Comandi>Formatta tabella... che mostra una finestra di dialogo dove scegliere tra vari modelli predefiniti e numerose opzioni, che prevedono l'alternarsi dei colori di sfondo delle righe e formattazioni specifiche per la prima riga e la prima colonna da sinistra. Dal menu: Comandi >Ordina tabella... possibile accedere ad un'altra comodissima opzione relativa alla gestione dei dati tabulari: si pu ordinare il contenuto delle colonne di tabella sia in ordine alfabetico, sia in ordine numerico ascendente o discendente. inoltre possibile a partire da un'altra colonna impostare un nuovo metodo di ordinamento, includere o escludere dall'ordinamento la prima riga, ecc. Figura 1. Pannello "Formatta tabella"

Due utilissime funzioni di Dreamweaver sono la possibilit di importare ed esportare dati tabulari. Possiamo ad esempio salvare un un foglio di lavoro di Excel in formato txt ovvero come file di testo delimitato da tabulazione ed importarlo in Dreamweaver tramite il comando File > Importa > Dati di tabella... Una finestra di dialogo richieder di selezionare il file da importare, scegliere il delimitatore (in questo caso Tabulazione) ed impostare alcune propriet di formattazione e verr importata nella pagina una tabella contenente i dati esportati dal foglio di calcolo. Figura 2. Pannello "Importa i dati di tabella"

Possiamo invece esportare i dati di una tabella di Dreamweaver dal menu: File>Esporta>Tabella (prima di cliccare sulla voce dobbiamo per aver posizionato il cursore all'interno della tabella che vogliamo esportare). Figura 3. Esportare la tabella

Una finestra di dialogo chieder di specificare il formato dei delimitatori e la piattaforma per le interruzioni di riga. Se vogliamo generare un foglio di calcolo per Windows sar necessario scegliere come opzione Delimitatore: virgola, in quanto il file verr esportato in formato CSV ovvero Comma Separated Values (valori separati da virgola) e come Interrozioni di riga: Windows. Il file cvs che viene cos creato leggibile e manipolabile da un programma come Microsoft Excel. Nel pannello HTML della barra degli strumenti Inserisci presente il menu table che viene attivato solo in modalit Codice. Questo menu consente di inserire alcuni dei tag di tabella: <table>, <tr>, <th>, <td> e <cap>. Gli altri tag di tabella <col>, <colgroup>, <thead>, <tfoot> e <tbody> sono comunque inseribili, dalla vista Codice.

Modalit Layout e Espanso


La Vista Layout un'altra modalit visuale per inserire tabelle, presente in Dreamweaver dalla versione 4 e UltraDev 4. Serve per disegnare dei layout di pagina basati su tabelle. Sebbene consenta un minor controllo sulla pagina e sebbene abbia qualche limitazione, questa modalit potr risultare familiare a coloro che vengono dal mondo della grafica. Si accede alla modalit Layout dal pannello "Layout" della barra "Inserisci". Per impostazione predefinita attiva la visualizzazione "Standard" che rende accessibili solo i pulsanti "Tabella". Cliccando sul pulsante "Layout" si accede a questa modalit e diventano attivi i pulsanti Tabella Layout e Disegna cella layout mentre diventano inattivi i pulsanti accessibili dalla modalit "Standard". Attenzione: queste visualizzazioni sono concetti distinti rispetto alla vista "Codice", "Divisa" e "Progettazione". Infatti mentre le tre precedenti permettono di visualizzare il codice della pagina o gli oggetti che il codice rappresenta, le modalit "Standard", "Espanso" e "Layout" permettono di visualizzare in modi differenti gli oggetti che stiamo inserendo nella pagina. In altre parole queste modalit sono dei modi di concepire la modalit Progettazione. Figura 1. I pulsanti "Standard", "Espanso" e "Layout"

Modalit "Layout"
Una volta entrati nella modalit Layout appaiono due regioni celesti in cima alla pagina web corrente, insieme alle parole "Modalit Layout". Inoltre sempre presenti il comando "Esci" che ci permette di tornare alla modalit Standard. Figura 2. Visualizzazione in modalit "Layout"

Per disegnare una tabella o una cella di layout bisogna premere i relativi pulsanti ("Tabella layout" e "Disegna cella layout") e disegnare con il mouse la tabella o la cella. Se si disegna direttamente una cella, verr anche disegnata la relativa tabella, che occuper l'intera rimanente area delle pagina. Figura 3. I pulsanti "Tabella layout" e "Disegna cella layout"

L'area della tabella del colore di sfondo della pagina ed editabile, dunque possiamo inserire testo, immagini, etc. e possiamo anche ridimensionarla, cliccando sul suo bordo per selezionarla. In questo caso la maniglia per il ridimensionamento diagonale manterr le proporzioni di larghezza ed altezza della cella senza bisogno di premere il tasto "Maiuscolo". L'area residua della tabella invece di colore grigio, per cui le relative celle non sono modificabili. Figura 4. Area della tabella

Tuttavia nell'area grigia premendo il pulsante Tabella layout possibile inserire una tabella nidificata all'interno della tabella di layout principale.

Figura 5. Inserire una tabella nidificata

anche possibile nell'area grigia della tabella disegnare ulteriori celle, ogni volta che si deve disegnarne una bisogner cliccare il pulsante Disegna cella layout. Figura 6. Disegnare celle di layout

Attenzione: Non invece possibile disegnare altre tabelle nidificate o celle e relative tabelle nidificate all'interno delle celle editabili. Sul bordo superiore delle tabelle e delle celle di layout presente un'area che ne indica le dimensioni e da cui accessibile un menu a comparsa le cui relative voci sono accessibili anche dal pannello "Propriet", ad eccezione di Aggiungi immagine spaziatore, che inserisce un'immagine spaziatrice all'interno della tabella, in pratica una gif trasparente di 1px per 1px, la cui larghezza impostata, come attributo html, pari alle dimensioni, in pixel, della cella. Selezionando dal menu a comparsa, o dal pannello "Propriet", Imposta ridimensionamento automatico colonna essa sar allargata alla dimensione relativa 100%, ovvero occuper l'intera area disponibile.

Modalit "Espanso"
Per quanto riguarda la modalit "Espanso", possiamo attivarla premendo il pulsante Espanso (proprio a sinistra del pulsante Layout). Questa visualizzazione "espande" letteralmente le tabelle, le celle, i bordi e rende pi semplice la loro gestione. Ancora una volta in alto troviamo

del testo che ci ricorda quale modalit ci troviamo accompagnato dal pulsante "Esci" che ci riporta velocemente alla modalit Standard. Figura 7. Visualizzazione della tabella in modalit "Espanso"

Creare una pagina con la modalit Layout


Dopo questa introduzione alla modalit "Layout" cerchiamo di costruire la struttura di una pagina web, vedremo che il meccanismo semplice e potente. Creiamo una nuova pagina web, attiviamo il gruppo "Layout" della barra "Inserisci" e premiamo il pulsante "Layout" per passare alla modalit omonima. Ricordiamo due semplici regole (attenzione, valgono solo nella modalit "Layout"): 1. 2. una "tabella di layout" non pu essere contenuta in una "cella di layout"; una "cella di layout" deve essere contenuta in una "tabella di layout".

Premiamo il pulsante "Tabella layout" e disegniamo una tabella, in alto. Successivamente selezioniamola e accediamo al pannello "Propriet". Impostiamo larghezze e altezza rispettivamente a 630 e 760 pixel. Possiamo vedere segnalate larghezza e altezza sui livelli (vedi figura) Clicchiamo poi su Disegna cella layoute disegniamo un riquadro nell'angolo in alto a sinistra, impostiamo la larghezza di questa cella pari a 400 e la sua altezza pari a 100.

Figura 1. Disegnare una cella

Disegniamo ora altre due celle alla destra di quella appena creata, entrambe avranno larghezza pari a 360 e un altezza pari a 50. Figura 2. Aggiungere celle

Probabilmente avremo delle difficolt a disegnare le celle con posizione e dimensioni precise, il consiglio quello di disegnare la cella senza preoccuparsi troppo di questi fattori e poi "aggiustarla" trascinandola nel punto giusto con il mouse e assegnandogli le corrette dimensioni tramite il pannello Propriet. In alternativa possiamo controllare le dimensioni di una tabella di layout o di una cella di layout mentre la disegniamo osservando l'indicatore sulla destra della barra di stato. Figura 3. Indicatore della barra di stato

Disegniamo tre tabelle di layout nella porzione sottostante. La prima avr larghezza 150 pixel, la seconda 350 pixel e la terza 360 pixel. Tutte avranno la massima altezza 530 pixel. Il risultato possiamo vederlo in questa immagine Possiamo ora disegnare una serie di celle di layout nella tabella di layout incolonnata pi a sinistra come mostra la figura seguente. Ogni cella di layout dovrebbe avere massima larghezza (150) e altezza 50. Figura 4. Serie di celle laterali

Per quanto riguarda la tabella di layout centrale disegniamo un'unica cella di layout che la occupi interamente. Figura 4. Corpo centrale

Infine disegniamo due celle di layout orizzontali della terza tabella entrambe di larghezza 260 pixel di altezza 265 pixel. Bene, ora che la struttura della pagina completa non resta che ritornare alla modalit Standard (premendo il pulante Standard nel gruppo Layout) e riempirla con grafica, testo e altri oggetti. Eventualmente potremmo volere che la struttura sia centrata orizzontalmente. Sempre dalla modalit Standard selezioniamo la tabella pi esterna (ad esempio cliccando con il mouse all'interno della struttura della pagina e scegliendo, dal Selettore di tag, la voce table pi a sinistra), accediamo al pannello Propriet e scegliamo "Al centro" dal menu Allinea.

Introduzione ai livelli
I livelli sono dei contenitori come le tabelle. Tuttavia differiscono da queste in molti aspetti, presentando alcuni limiti e notevoli vantaggi. Possiamo inserire i livelli o dal menu Inserisci>Oggetto Layout>Livello oppure dal pannello "Comune" premendo Layout scegliendo "Disegna livello". Figura 1. Icona "Disegna Livello"

Verr inserito un livello le cui propriet sono definite dalle impostazioni che abbiamo stabilito dal menu Modifica>Preferenze...>Livelli. Per impostazione predefinita, se non modifichiamo le preferenze relative ai livelli, Dreamweaver inserir un livello nel punto esatto della pagina dove si trova il cursore, di larghezza 200 ed altezza 115 pixel, con posizione non predefinita. Figura 2. Preferenze livelli

Per disegnare dei livelli con il mouse dobbiamo passare alla modalit Layout. In tal caso quando si spostano i livelli, per mezzo della maniglia di selezione, pu risultare utile visualizzare, oltre ai righelli, una griglia, soprattutto nel caso in cui si voglia allineare pi livelli. Figura 3. Visualizzazione della griglia

Dal menu Visualizza>Griglia>Mostra griglia si attiva la visualizzazione di una griglia con quadrati di 50x50 pixel. possibile cambiarne le impostazioni (dimensione, colore, ecc.) dal menu Visualizza>Griglia>Impostazioni griglia... impostando dei valori personalizzati nella finestra di dialogo.

Figura 4. Modifica impostazioni della griglia

anche possibile dal menu Visualizza>Griglia>Griglia calamitata rendere pi facile agganciare il bordo superiore sinistro di un livello con il vertice di uno dei quadrati della griglia, infatti quando ci si trova in prossimit del vertice, esso sar attratto al vertice del quadrato, quindi, rilasciando la maniglia di trascinamento del livello, il suo bordo superiore sinistro risulter agganciato con precisione alla griglia. anche possibile spostare e ridimensionare un livello con precisione per mezzo della tastiera. Una volta che lo si selezionato infatti si pu agire con: i pulsanti Freccia che spostano il livello di un pixel alla volta nelle direzione della freccia; la combinazione di tasti Maiuscolo+Freccia sposta il livello di 5 pixel alla volta nelle direzione della freccia. Ctrl+Freccia ridimensiona il livello di 1 pixel alla volta in direzione della freccia; Ctrl+Maiuscolo+Freccia ridimensiona il livello di 1 pixel alla volta in direzione della freccia.

Le propriet dei livelli


I livelli sono dei tag <div> o <span> cui viene dato un identificatore unico, id, ed alcune propriet. Se non abbiamo modificato le impostazioni dal menu "Preferenze" verr utilizzato il tag <div>, per creare un livello senza colore o immagine di sfondo e visibilit definite. Inoltre Dremweaver inserir anche un JavaScript che serve per mantenere la compatibilit con NN 4.x che riposiziona automaticamente i livelli quando l'utente ridimensiona la finestra del browser (per impostazione predefinita spuntata la casella di controllo Aggiungi correzione ridimensionamento per inserimento livelli). Avvertenza: se eliminiamo un livello, ad esempio selezionandolo e premendo il tasto "Canc", Dreamweaver non eliminer automaticamente lo script divenuto superfluo. Per eliminarlo possiamo andare in modalit Codice e cancellarlo oppure selezionarlo nell'area "Head" e

premere il tasto "Canc", o anche dal menu Comandi>Aggiungi/elimina correzione ridimensionamento di Netscape Infine come impostazione predefinita Dreamweaver non consente la nidificazione dei livelli, ovvero l'inserimento di un livello all'interno di un altro livello. Se ne vogliamo consentire la nidificazione come impostazione predefinita, sar necessario spuntare la relativa voce nella finestra di dialogo "Livelli" del menu Modifica>Preferenze... Possiamo controllare i livelli dal pannello Propriet ed anche dallo specifico pannello Livelli accessibile dal menu Finestra>Livelli. Figura 1. Il pannello "Livelli"

Per selezionare un livello possiamo cliccare sui bordi quando il cursore assume la forma di una croce con le frecce oppure possiamo cliccare sull'icona degli elementi invisibili che Dreamweaver inserisce all'inserimento del livello, purch non sia spuntata l'opzione delle barra "Standard": Riferimenti visivi>Nascondi tutti i riferimenti visivi. Nel pannello Livelli troviamo la casella di controllo Impedisci sovrapposizioni utile se vogliamo evitare sovrapposizioni dei livelli. Questo pannello ci consente anche di selezionare i livelli cliccandoci sopra. Probabilmente questo il metodo pi comodo e pi sicuro di selezionare un livello, specie quando una pagina ricca di elementi, magari anche sovrapposti, ed i livelli diventano difficili da selezionare. Infine quando posizioniamo il cursore all'interno di un livello sufficiente cliccare sul tag del livello nella barra di stato per selezionarlo. Si noti che Dreamweaver oltre a presentare sul Selettore di tag il tag div mostra pure il relativo id. Dal pannello Propriet possiamo controllare le propriet del livello. Figura 2. Il pannello "Propriet" dei livelli

Nella parte superiore, da sinistra, troviamo il campo ID Livello.

Avvertenza: Dreamweaver assegna un id ad ogni livello, esso un elemento non solo fondamentale, ma deve essere unico, ovvero non si pu dare lo stesso id a due livelli diversi ed inoltre bisogna fare attenzione nel dare ai livelli dei nomi che non siano riservati, ad esempio banner un nome riservato che le impostazioni di sicurezza dei browser o dei firewall o degli antivirus potrebbero rendere invisibile. anche sconsigliabile dare lo stesso id e/o name ad altri elementi contenuti nella pagina, ad esempio moduli, immagini tabelle, ecc. e, comunque, come regola generale ogni elemento dovrebbe avere un id diverso dagli altri. Dreamweaver, dunque sceglie un metodo conservativo e nomina i livelli "Layer" seguito da un numero progressivo. L'id pu anche essere cambiato, ma bisogna bene sapere cosa si sta facendo e tenere presenti queste regole. Altri quattro campi determinano la posizione del livello nella pagina e la sua dimensione: Sin: rappresenta la distanza dal margine sinistro della pagina Sup: la distanza dal margine superiore La: la larghezza Al: l'altezza

Un ulteriore campo Ordine rappresenta la terza dimensione. Infatti, a differenza di altri elementi HTML, i livelli possono avere una profondit, pi alto il numero, pi il livello si trova in primo piano, dunque visibile rispetto agli elementi sottostanti. In pratica con il livelli si da profondit agli elementi di una pagina e si accede alla terza dimensione in un documento html. Mano a mano che si aggiungono livelli Dreamweaver attribuisce loro uno indice "Ordine" crescente. Il menu a discesa Vis pu assumere quattro valori: default: non viene specificata la visibilit ed i browser normalmente faranno visualizzare il livello, quando si inserisce con Dreaweaver un livello l'impostazione predefinita di visibilit default inherit: si riferisce ai livelli nidificati che ereditano le propriet di visibilit dal livello che li contiene visible: rende un livello visibile hidden: rende un livello invisibile.

La visibilit dei livelli pu essere controllata anche dal pannello Livelli, cliccando sul livello selezionato, in corrispondenza dell'icona occhio. Sempre dal pannello Livello possiamo controllarne l'id e l'ordine (z) Sulla sinistra troviamo i campi ormai familiari con i quali possibile scegliere un colore di sfondo, tramite il selettore dei colori, oppure un'immagine di sfondo navigando all'interno del nostro disco. Il menu a discesa Riversam controlla il contenuto inserito in un livello quando questo eccede la dimensione del livello stesso, le opzioni possono essere visible (visibile) hidden (nascosto)

scroll e auto in questi casi verr aggiunta la barra di scorrimento al livello. Con l'opzione scroll in ogni caso, con auto solo se il contenuto eccede l'area del livello. Avvertenza sia NN 4.x che Opera non sono in grado di visualizzare correttamente il contenuto eccedente l'area del livello quindi con questi due browser non si pu purtroppo fare affidamento sulle barre di scorrimento, in particolare NN 4.x interpreter come hidden il contenuto eccedente, mentre Opera in genere come visibile se Riversam settato ad auto ed invisibile se settato a scroll. I campi Rit, infine rendono visibile solo una parte del livello: Sin dal margine sinistro; Des dal margine destro; Sup dal margine superiore; Inf dal margine inferiore.

Avvertenze e precisazioni
Una trattazione esaustiva dell'argomento "livelli" richiederebbe molto pi tempo ed inoltre, poich essi sono uno strumento avanzato per il design delle pagine, solo l'esperienza ed un'adeguata documentazione sui bug dei browser pu premettere di padroneggiarli con confidenza. Inoltre gli argomenti CSS e JavaScript saranno affrontati successivamente per cui in questa fase bene limitare la trattazione dei livelli ad alcune avvertenze e precisazioni finali. I livelli non sono altro che dei tag <div> o, molto meno frequentemente <span> (per la differenza tra questi due elementi, il primo di tipo block, il secondo "in line" si veda l'apposita sezione della guida XHTML) cui vengono applicati un id e degli stili CSS. Dunque, come qualsiasi stile, quello dei livelli pu essere portato nell'head della pagina o addirittura in un file CSS esterno. Incontreremo i CSS pi avanti nella guida, per il momento sufficiente sapere che NN 4 non supporta gli stili in linea dei livelli nidificati, ovvero come gli stili dei livelli vengono scritti normalmente da Dreamweaver. Come si detto sopra i livelli si possono sovrapporre e possono essere anche invisibili, questo ne fa il principale strumento del DHTML, ovvero la possibilit di modificare dinamicamente la pagina in funzione delle azioni dell'utente per mezzo dei JavaScript e dei CSS. Per cui i livelli possono essere utilizzati in numerose occasioni, tra cui vale la pena di menzionare, a titolo di esempio, i menu a tendina. Un livello ove si inserisca del testo e si cancellino gli attributi di larghezza e di altezza potr espandersi indipendentemente dalla risoluzione del monitor. Si provi infatti ad inserire all'interno di un livello con dimensioni predefinite una gran quantit di testo, si cancellino

successivamente gli attributi di larghezza ed altezza e si ridimensioni a piacere la finestra del browser. Inoltre, sebbene Dreamweaver inserisca una dimensione in altezza del livello, nella maggior parte dei casi consigliabile eliminarla. Tranne, ovviamente quando impostare un'altezza prefissata necessario. Non consigliabile inserire i livelli in tabella per due motivi, in primo luogo perch un errore dal punto di vista delle regole HTML, e poi non supportato da NN4.x. invece possibile inserire tabelle all'interno dei livelli purch queste abbiano una dimensione in pixel e non in percentuale. Come si pu intuire i livelli sono strumenti estremamente versatili e potenti, tuttavia necessario conoscerne bene il funzionamento ed in particolare all'interno di Dreamweaver per evitare problemi. Una delle cose da evitare, se non si degli utenti avanzati, l'inserimento dei livelli dal menu "Inserisci", in quanto se ne ha un minore controllo. Un utilizzo opportuno del menu Inserisci>Livello potrebbe invece essere quando si vuole nidificare un livello, infatti in questo caso, a prescindere dalle impostazioni settate dal menu "Preferenze", se si inserisce un livello in questo modo, quando il cursore all'interno di un altro livello, esso sar nidificato. Dreamweaver inoltre consente l'annidamento selezionando un livello sul pannello Livelli e, tenendo premuto "Ctrl", lo si trascina sul livello all'interno del quale si vuole nidificarlo. Si tenga inoltre presente che quando i spostano i livelli nel pannello Livelli Dreamweaver ne cambia il valore z (di profondit) aumentandolo, dunque portandoli in primo piano, quando si spostano verso l'alto e viceversa verso il basso. Dreamweaver consente di inserire degli oggetti ad esempio delle immagini pi grandi dei livelli che le contengono, ma in questo caso fortemente consigliato adattare le dimensioni dei livelli a quelle del loro contenuto.

Introduzione ai Frame e ai set di Frame

I set di frame sono dei documenti HTML che nella loro sintassi non presentano necessariamente il tag <body>, bens uno o pi tag <frameset>. All'interno del tag <frameset> sono definiti i frame che richiamano al loro interno delle pagine HTML. Dunque i set di frame fungono da cornice per un gruppo di due o pi pagine, le quali vengono contemporaneamente visualizzate in una sola finestra del browser, dando, spesso, l'idea di un'unica pagina. Pertanto se possibile aprire le singole pagine che compongono un set di frame, non possibile aprire e visualizzare il set di frame da solo, in quanto questo funge da mero contenitore di altre pagine.

Per la sintassi specifica dei set di frame rimandiamo al capitolo sui Frame della Guida HTML. Le pagine vengono richiamate secondo una struttura in righe e colonne, che ricorda quella delle tabelle ed anche i set di frame, come le tabelle, possono essere nidificati. Dreamweaver aggiunge dopo i tag <frameset> il tag <noframes> al cui interno troviamo un tag <body>. In quest'area possiamo inserire un contenuto alternativo ai frame oppure un avviso tipo "La pagina corrente utilizza i frame. Questa caratteristica non supportata dal browser in uso." Avvertenza: i frames sono supportati a partire da NN 2.x e da IE 3.x. Inoltre il testo alternativo per i browser che non supportano i frame - inserito all'interno del tag <noframes> pu essere efficacemente sostituito da una descrizione del contenuto del sito e dalle keywords, per facilitare l'indicizzazione da parte dei motori di ricerca. Anche i frame possono essere inseriti in vario modo, per facilitare il lavoro con i frame possiamo rendere visibili i bordi dei frame controllando che nella "Barra Documento", cliccando sul pulsante Riferimenti visivi, sia spuntata la voce Bordi frame. Figura 1. Menu "Riferimenti Visivi"

Avvertenza: in una nuova pagina senza frame tale voce, pur essendo stata precedentemente spuntata, potrebbe non risultare attiva, tuttavia spuntandola nuovamente si vedranno i bordi esterni dalla pagina senza frame.

Costruire una pagina con Frame


Uno dei modi per inserire i frame dal menu Elabora>Set di frame, scegliamo una delle quattro opzioni per dividere la pagina (destra, sinistra, alto, basso). Figura 1. Operazioni sui Frame

Cliccando all'interno dell'area di uno dei due frame dallo stesso menu possibile inserire ulteriori set di frame nidificati.

Cliccando sui bordi dei frame si seleziona il set di frame ed dal menu Elabora>Set di frame>Modifica contenuto senza frame Dreameveawer visualizza un versione della pagina senza frame, con un'intestazione in alto Contenuto senza frame. In questa modalit possibile scrivere nel set di frame il contenuto alternativo per i browser che non supportano i frames, senza bisogno di accedere alla vista Codice. Per tornare alla visualizzazione normale del set di frame necessario accedere nuovamente a questa voce di menu e togliere il segno di spunta da "Modifica contenuto senza frame". Figura 2. Modificare il contenuto alternativo

Un altro modo di inserire i frame dal gruppo di pannelli "Inserisci", accedendo al menu Frame presente nel gruppo "Layout". Questo menu presenta 13 modelli dei pi comuni di set di frame, sufficiente scegliere la voce che rappresenta il tipo che vogliamo inserire e Dreamweaver convertir la pagina aperta in un frame all'interno di un set di frame. Figura 3. Modelli di frameset

Lo stesso modo di creazione di set di frame accessibile dal menu Inserisci>HTML>Frame e scegliere una delle varie opzioni corrispondenti a quelle dei pulsanti del pannello "Frames". Figura 4. Inserimento da menu

Le ultime quattro voci, accessibili unicamente con la vista "Codice" attivata, consentono di inserire i tag <frameset>, <frame>, <iframe>, e <noframe>. Come si nota nel pannello "Frame", nelle icone uno dei frame contrassegnato da uno sfondo azzurro, mentre gli altri da uno sfondo bianco, ci indica che il frame principale quello di colore azzurro. Figura 5. L'area azzurra identifica il frame principale

Dunque possibile riempire di contenuto una pagina senza frame e poi scegliere dal menu Frame uno dei modelli e la pagina verr integrata nel set di frame come frame principale. Dreamweaver 8 offre un'ulteriore modo per creare set di frame, senza bisogno di aprire preventivamente una pagina senza frame. Dal menu File>Nuovo, selezionare la scheda "Generale" e poi "Set di Frame". Figura 6. Creare un nuovo set di frame

Avvertenza: si ricordi che con questa nuova opzione non possibile realizzare pagine XHTML, come illustrato in precedenza. Infine possibile aprire una normale pagina, con o senza contenuto, rendere visibili i bordi dei frame, come spiegato sopra e con il trascinamento del mouse creare dei frame ed il relativo set di frame. Infatti appena posizioniamo il mouse su uno dei bordi il puntatore assume la forma di una doppia freccia ed possibile trascinare il bordo della pagina per dividerla in due frame. Figura 7. Pagina divisa in due frame

Se invece si posiziona il mouse su uno dei vertici, il puntatore assume la forma di una croce con frecce e si creano quattro frame in un colpo solo. figura 8. Pagina divisa in quattro frame

Creato il set di frame possibile usare nuovamente il puntatore sul bordo dei frame per spostarli e ridimensionarli. Se invece si tiene premuto contemporaneamente il tasto "Alt" della tastiera verranno creati nuovi frame. Queste tecniche per ridimensionare o creare nuovi frames con il trascinamento del mouse si possono applicare ai set di frame creati in uno qualsiasi dei modi che offre Dreamweaver. Avvertenza: Dreamweaver inserisce il nome dei frame ed altri attributi del tag frame solo quando si inseriscono o si creano frame dal pannello Frame, dal menu Inserisci>HTML>Frame, e dal menu File>Nuovo. Negli altri modi qui illustrati, ovvero dal menu Elabora>Set di frame oppure con il trascinamento del mouse non inserisce n il nome, n l'attributo. tuttavia sempre possibile inserire successivamente gli attributi dei frame dal pannello Propriet relativo ai frame.

Salvare il set di frame


Per salvare un set di frame necessario selezionare il menu File>Salva frame con nome... Per salvare il set di frame ed i frame che lo compongono bisogna selezionare: File>Salva tutto, si noti che quando si salvano sia i set di frame che sia i frame, Dreamweaver inserisce un bordo tratteggiato sul file che sta salvando, consentendoci di dare un nome significativo a ciascun file e di controllare che l'associazione del nome al file sia corretta. Comunque Dreamweaver salva sempre prima il set di frame, poi il frame principale ed infine gli altri frame.

Avvertenza: se si prova a fare un'anteprima del set di frame nel browser (tasto F12), prima che il set di frame ed i frame siano stati salvati, Dreamweaver lancia una finestra di avvertimento, che richiede di salvare sia il set di frame, sia tutti frame per consentire l'anteprima. Questo perch Dreamweaver crea un file temporaneo del set di frame, ma non dei frame interni. Figura 1. Salvare prima dell'anteprima

Quando si crea un set di frame si devono controllare sia il tag <frameset>, sia i tag <frame>, sia l'eventuale tag <noframe>, sia le singole pagine che compongono il <frameset>. Controllare le singole pagine la cosa pi semplice, infatti sufficiente posizionare il cursore all'interno di una di esse ed utilizzare il pannello "Propriet" e gli altri pannelli per controllarne gli elementi come spiegato nei capitoli precedenti. Il tag <noframes> invece accessibile, come spiegato precedentemente, cliccando su uno dei bordi dei frame, selezionando cos il tag <frameset> e spuntando la voce del menu Elabora>Set di frame>Modifica contenuto senza frame. Per controllare il tag <frameset> possiamo selezionare uno dei suoi bordi ed il pannello "Propriet" consentir di visualizzarne le propriet, oppure possiamo selezionare i bordi dal pannello "Frame" accessibile dal menu Finestra>Frame. Figura 2. Il pannello "Frame"

Nel pannello viene mostrata un'immagine del set di frame o dei set di frame nidificati, cliccando su un frame esso viene selezionato, cos possibile controllarne gli attributi dal panello "Propriet" e, in caso di set di frame nidificati, passare con il "Selettore di tag" ai set di frame contenitori.

Tutte le propriet del set di frame


Quando un set di frame presenta pi righe e/o pi colonne il pannello "Propriet" mostra sulla destra un'icona che rappresenta la suddivisione in righe e colonne del set di frame. Per cui possibile selezionare una riga o una colonna, cliccando sui pulsanti di selezione riga/colonna posti sui bordi superiore (colonne) e sinistro (righe) dell'icona rappresentante la suddivisione del set di frame e controllare le propriet del gruppo. Ovvero la dimensione della riga o della colonna, che si trova nella parte inferiore del pannello "Propriet", nel campo Riga o Colonna (cambia la didascalia a seconda che si sia selezionata una riga o una colonna. Figura 1. Pannello "Propriet" del frameset

possibile inserire in questo campo la dimensione, che pu essere: assoluta in pixel o in percentuale relativa e si sceglie il tipo di misura in cui esprimere la dimensione dal relativo elenco a discesa Assegnare la dimensione relativa significa attribuire ad un frame tutto lo spazio lasciato residuo dagli altri frame che hanno dimensioni impostate in pixel o percentuale. La dimensione relativa pu essere impostata anche in modo proporzionale ovvero, ad esempio in un set di frame cos impostato:
<frameset rows="*,4*,*" frameborder="no" border="0" framespacing="0"> <frame src="top.htm" name="topFrame" scrolling="no" noresize > <frame src="main.htm" name="mainFrame"> <frame src="bottom.htm" name="bottomFrame" scrolling="no" noresize> </frameset>

Il valore 4* sta ad significare che il frame centrale (main.htm, chiamato mainFrame) 4 volte pi alto dei frame inferiore e superiore. Nella parte superiore del pannello "Propriet" relativo al set di frame si trovano le impostazioni dei bordi del set di frame, se impostate su "Predefinito" i browser faranno visualizzare un bordo di circa 3 pixel cromato in rilievo, tranne Opera 6 che mostra dei bordi leggermente pi stretti grigi e senza effetto tridimensionale. possibile selezionare, dal menu a discesa "Bordi", l'opzione "No" per eliminare i bordi, oppure "Si" per farli visualizzare, che corrisponde al valore "Predefinito", anche se esplicitamente specificato nel codice.

Nel campo "Spessore" possibile specificare la dimensione in pixel dei bordi e nel campo "Colore bordo" immettere il colore del bordo, oppure selezionarlo del selettore dei colori. Opera, sia 5, sia 6 non supporta l'attributo bordercolor. Per controllare gli attributi del tag <frame> necessario cliccare sul frame prescelto nel pannello "Frame" in modo che il pannello "Propriet", consenta di visualizzare le propriet del frame. figura 2. Selezionare un frame dal pannello

Nel pannello "Propriet" dei frame da sinistra troviamo il campo "Frame" in cui inserire il nome del frame, il campo "Origine", nel quale, tramite l'icona cartella, possibile, navigando all'interno del disco, richiamare un file html da inserire in quel frame. anche possibile cliccare sull'icona puntatore e trascinare il mouse su un file html del pannello "Sito" oppure inserire l'URL di un sito esterno. Ancora, per richiamare una pagina all'interno di un frame, possibile posizionarsi con il cursore all'interno del frame, selezionare dal menu: File>Apri in frame... e navigare all'interno del proprio disco per selezionare il file da richiamare all'interno del frame. figura 3. Pannello "Propriet" del Frame

Il menu a discesa "Scorrimento" consente di stabilire se le barre di scorrimento vanno visualizzate. Esso pu essere impostato su "Predefinito", che di fatto corrisponde ad "Automatica", ovvero in questi casi le barre di scorrimento saranno visualizzate solo se necessario, ovvero quando il contenuto eccede la dimensione del frame. Selezionando "Si", le barre saranno sempre visualizzate (tranne in Netscape 6 e 7 ed in Mozilla), infine se Scorrimento impostato a "No" le barre di scorrimento saranno in ogni caso invisibili. La casella Non ridimensionare, se spuntata, impedisce che l'utente possa posizionarsi sui bordi - se esistenti - e ridimensionare i frame.

anche possibile impostare la presenza dei bordi ed il loro colore a livello di singolo frame, ma questo attributo ha un valore limitato, sia perch i bordi sono condivisi con altri frame, sia perch il bordo viene impostato a livello di set di frame. Infine nella parte inferiore del pannello "Propriet" si trovano gli attributi Larghezza margine e Altezza margine che si riferiscono alla distanza dai bordi sinistro e superiore del contenuto che si trova nella pagina all'interno del frame. Questi attributi non sono riconosciuti da NN 4.x e precedenti, per cui per ottenere una visualizzazione omogenee con questo browser, necessario intervenire sulle propriet di pagina lavorando con i campi "Margine sinistro" e "Margine superiore". A questo punto anche pi semplice comprendere il significato dei valori dell'attributo "target" nei collegamenti. A parte "_blank" che come si detto apre un collegamento in una nuova finestra del browser; gli altri valori sono: _parent che apre il collegamento nel set di frame immediatamente superiore, se esistente; _self che apre il collegamento nello stesso frame dove si trova il collegamento; _top che lo apre nel set di frame pi esterno, sostituendo una nuova pagina al set di frame. Nota: i valori _parent e _top coincidono sempre quando non vi sono set di frame nidificati. Infine, se abbiamo assegnato dei nomi ai frame, possiamo usare come valore anche il nome di un frame. Per cui se vogliamo aprire una pagina nel frame principale (nominato "mainFrame") baster dare come target "mainFrame", se poi tutti i collegamenti dovessero puntare a questo frame allora ancora pi semplice impostare, nelle pagine dove si trovano i collegamenti, un "base target".

Il supporto agli oggetti multimediali


L'integrazione di elementi multimediali - filmati o audio in vari formati di file, file Flash o Shockwave e applet Java - nelle pagine web con Dreamweaver risulta abbastanza semplice. Il problema principale, semmai, risiede nei browser degli utenti che devono disporre dei lettori o dei plugin opportuni per poter riprodurre questo tipo di contenuto. Per questo motivo fortemente consigliato inserire del codice JavaScript che verifichi la presenza del plugin in quelle pagine in cui viene richiesto. Sarebbe bene preparare un messaggio per il visitatore in cui lo si informa della necessit di scaricare il plugin e gli viene indicato l'url per procedere al download.

Plugin pi comuni

Java Virtual Machine


un programma che permette di visualizzare Applet Java. Le applet Java sono attualmente supportate da Mozilla, Netscape Navigator e Opera. Per Internet Explorer necessario scaricare un plug-ing apposito. Questa pagina web esegue una verifica del software java installato nel client.

Flash
Attualmente esiste un plugin per Flash praticamente per tutti i browser pi importanti. Nonostante la massiccia penetrazione del Flash player, bisogna tener conto anche della versione installata per comprendere effettivamente cosa sia effettivamente visualizzabile dagli utenti. Per esempio, gli utenti che dispongono del Flash player 4 non saranno in grado di visualizzare il contenuto esportato per il Flash player 8 se non dopo aver scaricato la versione aggiornata del plugin.

Audio & Video


Per quanto riguarda audio e video esistono diversi player e formati di file, fra cui i pi diffusi sono Apple Quick Time, Microsoft Windows Media Player e Real Player. Nel settore audio si segnala la buona popolarit di Winamp. I formati audio pi comuni sono Wav (Microsoft), Aiff (Apple), Midi ed MP3.

Inserire oggetti Flash


Per inserire un oggetto Flash sufficiente aprire il menu "Oggetti multimediali", presente nel gruppo "Comune" della barra "Inserisci", e scegliere Flash. Figura 1. Menu per gli oggetti multimediali

Apparir una finestra di dialogo che permette di selezionare il file desiderato che, una volta inserito, sar controllabile dal pannello "Propriet".

Avendo preso confidenza nei capitoli precedenti con il pannello "Propriet", la procedura per controllare i file Flash risulter piuttosto familiare. Figura 2. Pannello "Propriet" del contenuto in Flash

Nella parte superiore del pannello, da sinistra, possibile inserire il nome; nei campi "La" e "Al" troviamo rispettivamente gli ingombri in larghezza e altezza del file, mentre il percorso del file .swf collocato nel campo "File", modificabile digitando un nuovo percorso, cliccando sull'icona cartella e navigando nel proprio disco oppure trascinando l'icona puntatore sul file prescelto nel pannello "Site". Con le stesse modalit possibile indicare il file sorgente .fla nel campo sottostante "Orig." I due pulsanti a destra, "Modifica..." e "Ripristina dim", consentono rispettivamente di modificare il file sorgente, lanciando Flash, e di ripristinare le dimensioni originarie del filmato se modificate, in modo analogo a quanto accade con il pannello "Propriet" per le immagini. Nella parte inferiore sinistra del pannello "Propriet" le caselle "Ciclo" ed "Esecuzione autom." impostano rispettivamente, se attive, la riproduzione ciclica del filmato ed il suo avvio automatico. I campi "Spazio V" e "Spazio O" (come per la immagini) determinano la distanza verticale ed orizzontale da altri oggetti, mentre "Allinea" determina l'allineamento orizzontale rispetto a tali oggetti. I menu a discesa "Qualit" e "Dimens." impostano le opzioni di qualit nella riproduzione del filmato e le opzioni di riproduzione in scala del filmato quando esso viene ridimensionato. Il campo "Sf" determina il colore di sfondo e "Parametri..." i parametri aggiuntivi. Il pulsante "Riproduci/Interrompi", presente da Dreamweaver 4, consente di eseguire il filmato direttamente dentro Dreamweaver.

Inserire elementi Flash Inserire un pulsante Flash


Un pulsante Flash un oggetto Flash che, generalmente, cambia il suo aspetto (e in caso produce un suono) in seguito al passaggio o al click del mouse. Ma soprattutto si comporta come un collegamento in seguito un click del mouse.

Dreamweaver 8 presente una buona raccolta di pulsanti Flash, inoltre possibile crearne di personalizzati con una versione di Flash o scaricarli da internet, un buon punto di partenza Adobe Exchange. Per inserirne uno aprire il menu "Oggetto multimediale" e scegliere "Pulsante Flash". Figura 1. Selezione di "Pulsante Flash"

Appare il seguente pannello. Figura 2. Pannello di inserimento del pulsante Flash

Il menu "Stile" ci permette di selezionare un pulsante tra quelli gi installati in Dreamweaver. Nelle caselle successive possiamo definire una serie di parametri per personalizzare l'oggetto. In genere buona norma impostare un colore di sfondo uguale al colore su cui verr inserito il pulsante. Purtroppo non possibile impostare uno sfondo trasparente per i pulsanti. Dopo aver premuto "Ok" comparir la consueta finestra di accessibilit, compiliamo e premiamo "Ok". Figura 3. Aggiungere gli attributi per l'accessibilit

Inserire del testo Flash


Un vantaggio che oggre l'inserire testo Flash quello di poter scegliere il carattere che preferiamo ed avere un rendering del testo con antialiasing. Lo stesso effetto si potrebbe ottenere con un rollover di due immagini jpeg, pagando per un maggiore peso della pagina di termini di byte. Comunque, chi volesse utilizzare questa funzionalit veloce ed efficiente pu scegliere dalla barra strumenti Oggetti Multimediali>Testo Flash. Figura 4. Selezione di "Testo Flash"

La finestra che appare permette di impostare tutte le caratteristiche. Purtroppo non possibile impostare un colore di sfondo trasparente quindi sar bene impostare la casella Colore di sfondo con lo stesso colore che si trover sullo sfondo della testo flash. Figura 5. Pannello di inserimento del testo in Flash

FlashPaper, Flash Video e Shockwave


Cos' FlashPaper? una tecnologia che permette di visualizzare un documento di testo, sfogliarlo, ingrandirlo e spostarlo a piacere senza dover caricare nuove pagine web. Ecco degli esempi di Flash Paper. Per inserire un FlashPaper sufficiente aprire il menu Oggetti multimediali>FlashPaper e selezionare il file "FlashPaper" che avremo preparato in precedenza con l'apposito programma. Figura 6. Selezione di "FlashPaper"

Il supporto Flash Video una delle pi interessanti innovazioni introdotte in Dreamweaver 8. Con questa funzionalit il webmaster pu inserire un video nel proprio sito e permettere all'utente di visualizzarlo tramite una comoda interfaccia Flash. Possiamo vedere questa tecnologia all'opera nelle pagine video.google.com. Infine per inserire un file Shockwave sufficiente usare la voce omonima del menu "Oggetti multimediali". Figura 7. Selezione di "Shockwave"

Il pannello per i file Shockwave analogo a quello degli oggetti Flash, ma sono assenti le caselle "Ciclo", "Esecuzione autom.", il pulsante "Modifica...", il relativo campo per il file sorgente, il menu a discesa per la "Qualit" e le impostazioni di "Dimensione".

Riproduzione audio/video
Inserire dei filmati dei player sopra menzionati in Dreamweaver una procedura abbastanza simile a quella dell'inserimento dei file Flash o Shockwave. infatti sufficiente premere il pulsante "Plugin" del menu "Oggetto multimediale". Figura 1. L'opzione "plugin" dalla barra strumenti

In alternativa possibile selezionare Inserisci>Oggetto multimediale>Plugin e selezionare il filmato da inserire nella pagina dalla relativa finestra di dialogo. Figura 2. L'opzione "plugin" da menu

Nel pannello Propriet possiamo inserire il nome e l'id del filmato e, come per le immagini, controllare le dimensioni "La" (larghezza) e "Al" (altezza), la distanza da altri elementi della pagina per mezzo dei campi "Spazio V" (verticale) e "Spazio O" (orizzontale), l'allineamento orizzontale dal menu a discesa "Allinea", ed il bordo: campo "Bordo". Figura 3. Pannello "Propriet" del plugin

Nel campo "Orig" visibile il percorso del file mentre nel campo "URL" possibile specificare l'URL da cui scaricare il plugin se l'utente della pagina ne fosse sprovvisto. Infatti, per riprodurre filmati Quick Time, Windows Media Player o Real Time necessario che nel browser siano abilitati i relativi player o un player in grado di riprodurre questi formati. Il pulsante "Riproduci/Ferma" serve per eseguire i filmati inseriti nella pagina all'interno dell'ambiente di sviluppo di Dreamweaver. Il pulsante "Parametri..." permette di aggiungere parametri addizionali.

Riproduzione audio
Sebbene per inserire l'audio in Dreamwever sia necessario utilizzare il pulsante "Plugin" oppure il relativo menu, l'operazione pu risultare piuttosto complessa in quanto necessario inserire tutti i parametri manualmente utilizzando il pulsante "Parametri..." Una soluzione consiste nell'usare il comportamento "Riproduci suono". I file mp3, come noto, uniscono una compressione molto elevata ad una buona qualit audio. In locale possono mostrare un funzionamento corretto, ma una volta caricati sul server remoto,

se non configurato alla loro esecuzione, il browser chieder di avviare il download del file senza eseguirlo. Per questa eventualit Dreamweaver prevede una finestra di avviso, che compare se si prova ad eseguire la riproduzione con il pulsante "Play/Stop", che ci notifica che i browser installati non sono in grado di eseguire il file. La soluzione in questi casi creare un file Flash contenente il file mp3: Flash infatti si avvale delle compressione mp3, cos il file audio in formato mp3 verr riprodotto dal plugin di Flash. Se si vuole inserire un brano di sottofondo in un intero sito necessario ricorrere ai set di frame, poich ad ogni apertura di una nuova pagina il brano verrebbe ricaricato e riavviato, perdendo cos la continuit di riproduzione. Dunque, in un sito che si avvale di set di frame, possibile collocare il suono in un frame fisso, per esempio il frame del menu di navigazione. In un sito senza frame possibile ricorrere ad un semplice artifizio: si crea un set di frame di due frame, uno di dimensione 0 pixel e l'altro - la pagina visualizzata dal browser - di dimensioni relative, in modo tale che, navigando nei frame di dimensione relative, saranno solo queste pagine a cambiare ed il frame di 0 pixel, rimanendo fisso, riprodurr il brano senza soluzione di continuit.

Inserire applet Java


Le Applet Java si inseriscono dal pulsante "Applet" del pannello "Oggetto multimediale" o dal menu Inserisci>Oggetto multimediale>Applet Figura 1. Inserimento applet dalla barra strumenti

Il seguente pannello ci permette di selezionare il file class relativo alla nostra Applet. Figura 2. Selezionare il file ".class"

Dopo aver selezionato il file appare la seguente finestra che ci permette di specificare un testo e un titolo che verr visualizzato in quei client che non possono riprodurre questo tipo di oggetto. Figura 3. Informazioni addizionali per l'accessibilit

Una volta inserita l'applet possibile aggiungere, modificare o controllare le relative impostazioni dal pannello "Propriet". Nel campo "Codice" inserito il nome del file richiamato e nel campo "Base" verr automaticamente inserito il percorso alla cartella dove si trova il file, se risiede in una cartella diversa da quella della pagina. Nel campo "Alt" possibile mantenere il testo alternativo digitato in precedenza o selezionare un'immagine alternativa per quei browser che non supportano Java. Infine dalla finestra di dialogo del pulsante "Parametri..." si inseriscono i parametri specifici per quella applet.

Effettuare ricerche
Il gruppo di pannelli Risultati, posizionato in fondo all'area di lavoro di Dreamweaver, permette di visualizzare rapporti relativi ad una singola pagina o a un intero sito.

Questo gruppo non normalmente visibile e i suoi pannelli sono accessibili dal menu "Finestra", tuttavia sufficiente lanciare uno dei comandi che mostrano questi rapporti, perch esso appaia al di sotto del pannello "Propriet" visualizzando il rapporto. Uno strumento molto utile di Dreamweaver e di cui nessun utente avanzato pu fare a meno il comando Trova e sostituisci accessibile dal menu Modifica>Cerca e sostituisci o tramite il pulsante con l'icona di un triangolo verde presente nel pannello "Ricerca" del gruppo "Risultati". Figura 1. Pannello "Trova e sostituisci"

Si apre una finestra di dialogo, ricca di opzioni, per effettuare ricerche e sostituzioni, non solo di testo, ma anche del codice e di tag specifici con funzioni avanzate di sostituzione del tag e/o di attributi, il tutto su una singola pagina, o su un gruppo di pagine, su una cartella o sull'intero sito locale. Il menu "Cerca in" ci permette di effettuare la nostra ricerca nel "Testo selezionato", nel "Documento corrente", in un documento da aprire, in una cartella dal selezionare, all'interno di tutti i file del sito corrente attualmente selezionati o all'interno di tutto il sito locale. Figura 2. Opzioni di "Cerca in"

Il resto della finestra cambia in base alla scelta che viene fatta nella casella "Cerca". Se selezioniamo Codice di origine allora Dreamweaver cercher il testo digitato all'interno del codice della pagina, questa funzione particolarmente utile per ricercare e modificare eventuali tag.

Selezionando Testo invece la ricerca verr eseguita solo sul testo che viene visualizzato in un browser. Figura 3. Cercare net testo o nel codice

In entrambi il pannello presenta due aree principali, nell'area "Trova" dobbiamo digitare il testo da ricercare e nell'area "Sostituisci" possiamo digitare, eventualmente, il testo che dovr prendere il posto di quello trovato. Attivando la casella Maiuscole/minuscole Dreamweaver verificher che ci sia una corrispondenza tra lettere maiuscole e minuscole tra il testo cercato a quello trovato. La voce Trova parola intera evita di proporre nei risultati parole che contengono al loro interno la parola cercata ma di fatto sono parole diverse (esempio: si cerca "su" e si trova "super"). La seleziona della casella Usa espressione regolare permette di effettuare una ricerca usando una serie di operatori. Si veda la guida di Dreamweaver per l'elenco e il significato degli operatori. Selezionando Testo (avanzato) permette di cercare del testo decidendo se deve trovarsi dentro o fuori un determinato tag. Figura 4. Ricerca nei tag

Particolarmente ricca di opzioni appare la finestra relativa a Tag specifico, dove possibile inserire numerosi attributi col pulsante "+". Figura 5. Cercare e sostituire/inserire attributi nei tag

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

Le espressioni regolari
"Sostituisci" una funzionalit tanto potente, quanto spesso ignorata e poco documentata, essa pu sfruttare anche le espressioni regolari. consigliabile che un utente che si avvicini le prime volte a questo strumento faccia un copia di sicurezza del sito prima di procedere all'utilizzo di questo comando. Oppure si possono aprire tutte le pagine del sito, se esso di piccole dimensioni, e lanciare il comando per quelle pagine, in modo che quando si chiuderanno se il risultato non sar quello desiderato si potr evitare di salvarle con modifiche indesiderate. Basandoci sui risultati del pannello "Convalida" che segnala come gli attributi del tag <body> sono deprecati o non validi e sfruttando un esempio di Massimo Foti si possono eliminare gli attributi del tag <body>. Scrivendo nel campo "Trova": <body[a-zA-Z0-9]* [^>]*> ed in quello "Sostituisci": <body> e spuntando al casella di controllo Usa espressione regolare Dreamweaver ripulir il tag body di tutte le pagine del sito corrente. Figura 6. Impostare un'espressione regolare

Guide di riferimento

Nel gruppo "Risultati" troviamo il pannello "Riferimenti" che fornisce una serie di informazioni relative ai linguaggi supportati da Dreamweaver e sull'accessibilit. Figura 1. Guide di riferimento

Nel menu Libro possiamo selezionare la fonte di informazioni: Macromedia CF Function Reference Macromedia CFML Reference O'REILLY ASP Reference O'REILLY ASP.NET Reference O'REILLY CSS Reference O'REILLY HTML Reference O'REILLY JavaScript Reference O'REILLY JSP Reference O'REILLY PHP Pocket Reference O'REILLY SQL Language Reference O'REILLY XML in a Nutshell O'REILLY XSLT Reference UsableNet Accessibility Reference

Una volta selezionato il libro, la parte restante della barra ci permette di selezionare un argomento (tramite il menu centrale) e alcuni suoi dettagli (tramite l'ultimo menu a destra). Ad esempio, se selezioniamo il libro "O'REILLY HTML Reference" poi possiamo scegliere un tag, scegliamo h1 e comparir la descrizione di questo tag. Infine, nell'ultimo menu, possiamo visualizzare gli attributi del tag <h1> e selezionarli per ottenerne una descrizione. Purtroppo questo materiale completamente in inglese, tuttavia si tratta di inglese tecnico quindi facilmente leggibile.

Convalidare il codice

Dal menu File>Controlla pagina>Convalida pagina... si pu lanciare un processo di convalida per i vari linguaggi e comportamenti per i quali Dreamweaver offre supporto. possibile scegliere il linguaggio da convalidare attraverso il menu Modifica>Preferenze...>Convalida. Figura 1. Selezionare il tipo di documento

e dal bottone Opzioni... della finestra di dialogo impostare i parametri di convalida. Figura 2. Parametri da convalidare

Anche in questo caso troviamo un report nel gruppo "Risultati", tramite il pannello "Convalida". Ci vengono mostrati i risultati riga per riga, suddivisi in errori, avvertimenti, tag

nidificati erroneamente e messaggi. Il pannello mostra alcune icone che ci aiutano nella verifica. L'icona a forma di triangolo verde sulla sinistra del pannello consente, tra le varie opzioni, di convalidare, oltre alla singola pagina, l'intero sito. L'icona a forma di fumetto con punto interrogativo lancia una finestra con una breve spiegazione della riga del rapporto. L'icona a forma di dischetto permette di salvare il rapporto in formato xml. Infine l'icona con la forma del mappamondo apre in una finestra del browser il rapporto sulla convalida.

Controllo nel browser


Il pannello Controllo browser di destinazione ci permette di individuare facilmente gli errori che la pagina produrr sui principali browser. Premiamo il pulsante con l'icona del piccolo triangolo verde (sempre dalla barra "Controllo browser di destinazione") e scegliamo "Impostazioni". Il pannello che appare ci permette di scegliere i browser (e le rispettive versione) in cui vogliamo testare la pagina. Figura 3. Selezione di browser e versioni

Dopo aver effettuato le nostre scelte selezioniamo "Ok", premiamo ancora il pulsante del triangolo verde e scegliamo se eseguire il controllo sul documento corrente, su tutto il sito locale o solo sui file selezionati. Figura 4. Selezione del tipo di controllo

Per cercare eventuali problemi con quel tipo di browser possiamo controllare il pannello Controllo browser di destinazione nel gruppo Risultati.

Convalida dei collegamenti e debug con ColdFusion


Una funzione molto potente per la gestione dei siti il controllo dei collegamenti e dei file di un sito. Possiamo accedere a questa funzione, a livello di singola pagina, dal menu: File>Controlla pagina>Controlla collegamenti oppure dal pannello "Controllo collegamenti" del gruppo "Risultati" e controllare i collegamenti interrotti ed esterni. Figura 1. Controllo dei link interrotti

Dopo aver eseguito il controllo tutti i risultati vengono raccolti nel pannello "Controllo Collegamenti". Qui possiamo visualizzare i "Collegamenti interrotti", i "Collegamenti esterni" e i "File non collegati" ovvero quei file che appaiono non collegati ad altri e dunque eliminabili. Figura 2. Ricerca di una particolare tipologia di collegamento

Errori lato server


Quando si utilizza il programma FTP integrato in Dreamweaver possibile accedere al Registro FTP presente nel gruppo "Risultati". Gli utenti che utilizzano ColdFusion come server per i test su Dreamweaver, possono utilizzare il pannello Debug Server per visualizzare le informazioni di debug, senza uscire da Dreamweaver, cliccando sulla relativa icona nella barra degli strumenti "Documenti", se una pagina contiene errori le possibili cause appariranno elencate al fondo della pagina. Il pannello "Debug Server" permette di analizzare e correggere gli errori della pagina.

Controlli per l'accessibilit


possibile lanciare la convalida dell'accessibilit della pagina dal menu: File>Controlla pagina>Controlla accessibilit. Il pannello Rapporti sito mostrer eventuali errori con una X rossa e con un punto interrogativo segnaler sia quei tag che richiedono attenzione relativamente ai problemi di accessibilit, sia delle considerazione generali. Ognuno di questi errori o considerazioni, fa riferimento alla relativa riga di codice HTML ed alla relativa regola di accessibilit. Cliccando su una delle righe dell'elenco dei risultati del rapporto, Dreamweaver seleziona in vista "Codice" nella pagina l'elemento preso in considerazione nel rapporto.

L'icona a forma di triangolo verde sulla sinistra del pannello, se cliccata, fa visualizzare una finestra di dialogo dove impostare i parametri del rapporto e l'icona a forma di fumetto con punto interrogativo apre il pannello "Riferimenti" della UsableNet Accessibility Reference. Figura 3. Maschera di selezione dei rapporti

Il menu "Comandi"
Il menu "Comandi" di Dreamweaver, consente di effettuare alcune operazioni - in genere ripetitive - e di salvare dei comandi personalizzati. Inoltre molte estensioni si trovano in questa voce di menu. Si sono gi esaminate alcune delle voci di questo menu nel capitolo sulle tabelle, in particolare "Formatta Tabella..." e "Ordina tabella...". Analizziamo in dettaglio le altre voci del menu "Comandi". Figura 1. Il menu "Comandi"

La prima voce che notiamo "Avvia registrazione": cliccando questa voce Dreamweaver permette di registrare, ovvero di tener traccia delle operazioni che effettuiamo per riprodurle. Per fermare una registrazione di operazioni necessario cliccare la stessa stessa voce di menu che cambia durante la registrazione in "Interrompi registrazione". Interrotta la registrazione, finch non si chiude Dreamweaver - o se non si effettua una nuova registrazione - sempre possibile riprodurre tutte le operazioni compiute durante la registrazione, anche in altre pagine, usando la voce di menu "Riproduci comando registrato" . Dunque con un click su questa voce di menu si pu salvare tempo prezioso, altrimenti perso in operazioni ripetitive. Durante la registrazione il mouse sulla pagina oltre alla freccia mostra una cassetta musicale per ricordarci che siamo in fase di registrazione. Una delle principali limitazioni di questo comando che non si possono effettuare operazioni con il mouse sulla pagina - comunque si pu utilizzare le alternative da tastiera e da vista "Codice" - e non si pu usare il tasto "Tab" o "Maiuscolo+Tab".

Scaricare estensioni
La voce di menu "Richiama altri comandi" apre il browser sulla Home Page di Adobe Exchange, dove possibile scaricare centinaia di estensioni molte delle quali accessibili appunto dal menu "Comandi". La voce Gestisci estensioni invece lancia l'Extension Manager.

La formattazione del codice

Dreamweaver segue un modello di spaziature, tabulazioni e rientri per scrivere il codice. Questo modo di scrivere , sebbene possa essere personalizzato, particolarmente leggibile. Quando si fanno modifiche al codice sia in modalit "Progettazione", ma soprattutto in modalit "Codice", si pu perdere questo ordine predefinito di presentazione del codice, per cui i comandi Applica formattazione origine e Applica formattazione origine alla selezione, servono appunto a ripristinare la struttura di visualizzazione del codice tipica di Dreamweaver sull'intera pagina o sulla porzione selezionata. Questo comando inoltre risulta particolarmente utile quando si aprono pagine create o modificate con altri editor HTML, oppure quando si utilizzano dei compressori HTML che, riducendo pagine da parecchie righe in poche righe, permettono di guadagnare qualche Kb, rendendo tuttavia di difficile leggibilit il codice.

Ripulire il codice
Una funzione estremamente comoda il comando Ottimizza XHTML che lancia una finestra di dialogo con varie opzioni selezionabili per ripulire una pagina di codice errato o superfluo. Figura 1. Richiamare la voce "Ottimizza XHTML"

Tra le varie funzioni si pu anche decidere di rimuovere dei tag specifici, scrivendo i tag nel relativo campo separati tra loro da una virgola. Figura 2. Maschera "Ottimizza XHTML"

Alla fine dell'operazione viene visualizzata una finestra con un rapporto sulla pulizia effettuata nella pagina. Figura 3. Riepilogo dell'ottimizzazione

Un'altra funzione abbastanza simile e molto comoda Ottimizza HTML di Word.... Questo comando permette di ripulire in modo abbastanza profondo le pagine di Word salvate come file HTML. Una finestra di dialogo divisa in due sezioni permette di scegliere tutte le opzioni relative alla marcatura di Word da ripulire mentre il rapporto finale ci mostrer come, anche in una pagina molto semplice di Word, ci sia molto codice sporco da eliminare. Figura 4. Maschera "Ottimizza HTML di Word"

Tuttavia se si vuole una pulizia veramente totale, bisogna prendere alcuni accorgimenti addizionali: con Ottimizza XHTML rimuovere una serie di tag inutili in una semplice pagina di testo, ad esempio div e span; eliminare il tag style dal head, selezionandone l'icona nell'Contenuto head e premendo il tasto Canc; sempre in questa area, spostare, con il trascinamento del mouse, il tag meta del charset dopo il titolo e sostituire il charset Windows-1252 con uno standard, ad esempio iso-8859-1, quello che utilizza di default Dreamweaver; controllare il contenuto del tag title e completare l'operazione eliminando gli attributi dal tag body o a mano in modalit Codice.

A proposito di Netscape Navigator


Alcune versione del browser "Navigator" presentano un bug che produce una visualizzazione errata della pagina in seguito ad un'azione di ridimensionamento. Figura 1. Selezionare la correzione per NN

Dreamweaver offre un comando che permette di gestire questo problema. Scegliendo la voce di menu Comandi>Aggiungi/elimina correzione ridimensionamento di Netscape... appare la seguente finestra di dialogo. Figura 2. Finestra di spiegazione

A questo punto sar sufficiente premere il pulsante Aggiungi e Dreamweaver inserir del codice JavaScript per risolvere quel problema. Naturalmente il codice JavaScript non interferir con altri browser. Successivamente sar possibile rimuovere automaticamente il codice di correzione dalla nostra pagina web semplicemente tornando al menu Comandi>Aggiungi/elimina correzione ridimensionamento di Netscape... Figura 3. Rimozione dello script

Questa volta il pannello presenter il pulsante "Elimina", premiamolo per rimuovere il codice di correzione.

Lavorare con le immagini

In Dreamweaver troviamo due comandi che sfruttano l'integrazione con Fireworks. La voce Ottimizza immagine in Fireworks... disponibile solo se abbiamo precedentemente selezionato un'immagine all'interno della pagina web corrente. Questa funzione permette di

aprire in Fireworks l'immagine selezionata, modificarla e quindi tornare a Dreamweaver con l'immagine aggiornata. Se Dreamweaver trova il file sorgente png, l'ottimizzazione viene fatta direttamente su quel file, altrimenti una finestra di dialogo chiede se si vuole aprire il file sorgente, cercandolo nel disco, oppure ottimizzare direttamente l'immagine della pagina. Crea album fotografico l'altro comando che si avvale di una stretta integrazione con "Fireworks", lanciando due processi batch uno di Dreamweaver ed uno di Fireworks. Figura 1. Selezionare "Crea album fotografico Web" da menu

Figura 2. Pannello "Crea album fotografico Web"

Riempiti i campi della finestra di dialogo possibile creare un album fotografico. Partendo dalla sola cartella delle immagini, verranno create la pagina con le miniature, la cartella delle

miniature, la cartella delle pagine con le immagini a grandezza piena e la struttura di navigazione con i collegamenti. anche possibile scegliere come formato delle immagini gif o jpeg ed il tipo di ottimizzazione.

Creare comandi personalizzati


Una funzione, molto comoda, sfrutta l'integrazione del menu "Comandi" con il pannello "Cronologia", permettendo di salvare comandi personalizzati accessibili dallo stesso menu "Comandi". infatti possibile controllare i passi compiuti all'interno di una pagina dal pannello "Cronologia" e selezionarli, tenendo cliccato il tasto "Maiuscolo" per selezioni continue di passi, oppure il tasto "Ctrl" per selezioni disgiunte. Selezionati i passi desiderati possiamo salvarli cliccando sull'icona del dischetto in basso a destra. Figura 1. Pannello "Cronologia"

Nell'esempio in figura stato creato un comando che simula il tasto "Tab", ovvero l'inserimento di cinque spazi alla volta. Poich Dreamweaver non consente di inserire pi di uno spazio dalla barra spaziatrice, volendo replicare l'effetto spaziatore del tasto "Tab" necessario cliccare quattro volte il pulsante "Spazio unificatore" del pannello "Testo" ed una volta la "barra spaziatrice". Figura 2. Salvare il comando

Salvando questi passi della "Cronologia" come "Comando" e dando al comando il nome "Tab" troveremo nel menu "Comandi" questa voce di menu creata da noi.

Figura 4. Nuova voce di menu

Per eliminare o rinominare i comandi creato da noi sufficiente scegliere Modifica elenco programmi... - che si riferisce solo a questo tipo di comandi - ed eliminarli o rinominarli. Figura 5. Selezionare modifica dei comandi

Un'altra funzione che troviamo nel menu "Comandi" Inserisci Mark of the Web. Questo comando utile per quegli utenti "Windows XP" che in seguito all'installazione del "Service Pack 2" non riescono pi a visualizzare correttamente un contenuto attivo nell'anteprima di una pagina web (il problema dovuto a ulteriori restrizioni di sicurezza inserite da Microsoft). In tal casco scegliamo dal menu Comandi>Inserisci Mark of the web per risolvere il problema.

Usare i fogli di stile


I CSS sono stati adottati dal W3C alla fine del 1996 e nel 1998 stata adottata la versione 2, allo scopo di separare il contenuto e gli elementi strutturali delle pagine dagli elementi di presentazione. Vedremo tra breve cosa si intenda per separazione tra elementi strutturali e di presentazione. Vediamo in dettaglio gli enormi vantaggi dei CSS. Un elemento di struttura di una pagina pu essere un paragrafo, un titolo, un elenco, ecc. (tag <p>, <hx>; <li>), ma questi tag di per se

nulla dicono su quale aspetto debba avere la pagina, al massimo possiamo sapere che un titolo <h1> equivarr nella maggior parte dei browser ad un testo di dimensioni 6 in grassetto, oppure che il testo in genere, se non si specifica il tipo di font, la sua dimensione ed il suo colore, sar rappresentato come "Times New Roman" dimensione 3 nero. Gli elementi di presentazione - peraltro molto limitati - degli attributi e tag HTML permettono di intervenire su questo modo di visualizzare gli elementi di una pagina, ma non potremo certamente intervenire sul grassetto o sulla dimensione dei titoli o sull'interlinea delle righe di un paragrafo. Per ottenere i risultati voluti i designer dell'era pre-CSS erano costretti ad intervenire con complicati artifizi che comunque rendevano una pagina molto pi difficile costruire, da mantenere ed in ogni caso pi pesante da scaricare. I CSS invece nascono allo scopo di fornire gli elementi di presentazione, con una vasta possibilit di scelta di stili. Essi si dividono in: Stili in linea Stili interni Stili esterni

Gli stili in linea non presentano quasi nessun vantaggio, in quanto vengono applicati elemento per elemento, esattamente come gli attributi HTML. Gli stili interni, ma ancor pi quelli esterni invece presentano enormi vantaggi. Vediamo un esempio pratico. Sappiamo che con il tag p,il tag font ed i suoi attributi possiamo in una certa misura controllare il layout di una pagina. Ad esempio il paragrafo presentava questo codice:
<p align="justify"><font color="#3399CC" size="4" face="Georgia, Times New Roman, Times, serif">

Questo vuol dire che se abbiamo una pagina con molti paragrafi con uno stile uniforme, caso molto probabile, dovremo applicare lo stesso set di tag ed attributi ad ogni paragrafo e ad ogni pagina. Se creiamo uno stile in linea otteniamo un codice simile a questo:
<p style="text-align:justify; font-family: Georgia, Times New Roman, Times, serif; font-size: 18px; color: #3399CC;">

Il vantaggio in questo caso assolutamente relativo. Infatti, a parte l'aderenza agli standard e la possibilit di utilizzare un sistema di unit di misura per il font-size molto pi potente e flessibile come, gli stili in line vanno applicati paragrafo per paragrafo come i tag e gli attributi HTML, dunque i vantaggi in termini di gestione e manutenzione sito e leggerezza delle pagine vengono meno.

Mentre se trasportiamo gli elementi di formattazione e layout in un foglio di di stile interno avremo, all'interno del tag head, un tag style con la seguente sintassi:
p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #3399CC; text-align: justify}

Questo stile comander tutta la pagina all'interno della quale i paragrafi saranno marcati da un semplice <p>. chiaro che, pi numerosi saranno i paragrafi, maggiore sar l'alleggerimento in termini di codice, dunque tempi di scaricamento da parte degli utenti. Ma soprattutto il momento che vorremo cambiare l'aspetto dei paragrafi, piuttosto che dovere intervenire paragrafo per paragrafo, sar sufficiente cambiare lo stile della pagina per cambiare in un istante l'aspetto di tutti i paragrafi. Se poi questo stile diventa un file esterno con estensione css che viene collegato alla pagina con il tag link, sempre posizionato nell'head della pagina, ad esempio
<link href="my_style.css" rel="stylesheet" type="text/css">

Ecco che sar sufficiente cambiare questo stile esterno per cambiare istantaneamente aspetto a decine, centinaia o migliaia di pagine, senza considerare il peso in kb inferiore di queste pagine. Inoltre immaginiamo di volere anche aumentare l'interlinea dei paragrafi per renderli pi leggibili, baster aggiungere il seguente stile: line-height: 150%; per avere un'interlinea pi spaziosa. Poich gli stili possono ridefinire qualsiasi elemento della pagina: titoli, paragrafi, elenchi, sfondi, collegamenti, tabelle, livelli, ecc. applicando un CSS esterno ad un sito abbiamo un solo file da controllare e modificare, quindi tempi di lavoro drasticamente ridotti, manutenzione del sito estremamente semplificata, possibilit di errori, omissioni o dimenticanze ridotta al minimo e siti con pagine pi leggere da scaricare, dunque visitatori pi soddisfatti. A questo si aggiunga che, per mezzo dei fogli di stile possiamo controllare il layout della pagina e adattarlo alle nostre esigenze molto di pi di quanto saremmo in grado con i tag e gli attributi dell'HTML e che solo in questo modo saremo in grado di realizzare pagine aderenti agli standard ed accessibili. Anche il semplice esempio qui illustrato - a prescindere dalla possibilit di intervenire sull'interlinea - mostra delle sostanziali differenze con il suo equivalente HTML. Infatti una dimensione 4 del font ridimensionabile dalle impostazioni di visualizzazione dei browser. Ci non sarebbe, in termini generali, un fatto negativo, qualora si potesse contare su un'utenza di visitatori con un buon livello di alfabetizzazione informatica. Purtroppo vero il contrario. Per cui un utente potrebbe visualizzare in maniera anomala una pagina web semplicemente perch le impostazioni di visualizzazione dei caratteri sono impostate a "Molto Grande" o "Molto Piccolo" e l'utente essere assolutamente inconsapevole dell'esistenza di queste impostazioni.

Con la variet di unit di misura dei CSS possiamo impostare le dimensioni dei font in base alle nostre esigenze. Ad esempio se le dimensioni del font sono impostate in punti (pt) non sono pi modificabili da IE. Impostate in pixel, come nell'esempio, anche NN non pu modificarle, ma Mozilla si. Potremmo infine privilegiare l'accessibilit ed impostare una unit di misura relativa, che consente il ridimensionamento del font. Ad esempio impostando lo stesso testo ad una misura di 1.13 em oppure al 113% otterremo un testo identico a font size 4 dell'HTML e a 18 px dei CSS, e se sceglieremo em il ridimensionamento sar pi accentuato di quello percentuale. In definitiva un'ampia possibilit di scelta e dunque una flessibilit molto superiore.

Il pannello CSS
Il pannello "Stili CSS" gi dalle ultime versioni di Dreamweaver raccoglie tutti gli strumenti dedicati allo stile delle pagine web. Figura 1. Pannello "Stili CSS"

Il pannello si trova nel gruppo "CSS" che contiene il pannello "StiliCSS" e "Livelli". Possiamo visualizzare il gruppo spuntando la voce di menu Finestra>Stili CSS. In alto troviamo due pulsanti mutuamente esclusivi: "Tutte" e "Corrente". Scegliendo il primo pulsante, la parte sottostante del pannello mostrer l'insieme delle dichiarazioni che influiscono su tutta la pagina. La pressione del pulsante "Corrente", invece, provoca la visualizzazione delle dichiarazioni che influiscono sull'aspetto dell'elemento corrente. Selezionando un qualunque elemento HTML, al centro del pannello "Propriet" appare un pulsante "CSS", che si attiva se il pulsante "Corrente" del pannello "StiliCSS" non premuto. La pressione del pulsante "CSS" apre immediatamente "Stili CSS" nella modalit "Corrente".

La modalit "Corrente"

Quando il pannello "Stili CSS" in modalit "Corrente" viene suddiviso in tre blocchi: 1. 2. 3. Riepilogo per selezione; Regole; Propriet.

Nel riquadro Riepilogo per selezione vengono mostrati tutti gli attributi ridefiniti nella selezione attuale. Il secondo riquadro pu mostrare le informazioni sulla propriet selezionata nel riquadro superiore oppure l'elenco delle regole che influiscono sull'aspetto del tag selezionato nel riquadro superiore. Possiamo passare da una modalit all'altra tramite i due piccoli pulsanti che troviamo nell'angolo superiore destro del riquadro. Figura 2. Selettore Informazioni/Regole

Infine il riquadro Propriet mostra nel dettaglio tutte le regole CSS associate al tag selezionato nel riquadro "Riepilogo per selezione". Il "riquadro Propriet" (attenzione a non fare confusione con il pannello Propriet che un oggetto differente!) pu mostrare le informazioni in tre modi distinti,le tre modalit vengono attivate tramite i tre pulsanti che si trovano nell'angolo inferiore sinistro del riquadro. Figura 3. Selettori di visualizzazione delle propriet

Il primo pulsante a sinistra, Mostra vista categoria, visualizza un elenco di categorie in una struttura ad albero che possibile espandere. Ogni categoria contiene tutti i tag ad essa associati. Questa modalit visualizza quindi tutti i tag possibili, uno su ogni riga. Ogni riga divisa in due celle orizzontali: in quella di sinistra troviamo il nome della propriet e in quella di destra il relativo valore. Figura 4. Vista "Categoria"

Il secondo pulsante (quello con una A, una Z e una freccia verso il basso) attiva la modalit Vista Elenco. Anche in questo caso verranno mostrate tutte le propriet associate

all'elemento selezionato nel riquadro "Riepilogo per selezione", in questo caso non saranno raggruppate in categorie, ma semplicemente mostrate in un elenco ordinato alfabeticamente. Figura 5. Vista "Elenco"

La pressione del terzo pulsante invece provoca la visualizzazione delle sole propriet che sono state definite. Figura 6. Visualizzazione delle sole propriet impostate

La modalit "Tutte"
Quando il pannello Stili CSS attivo in questa modalit, mostra tutte le regole definite per la pagina corrente. Nel riquadro in alto ("Tutte le regole") vengono elencati tutti gli attributi che sono stati ridefiniti, raggruppati a seconda della provenienza: quelli definiti nell'intestazione (<head>) della pagina sono sotto il nome di <stile> e quelli definiti in fogli di stile esterni sotto il nome del rispettivo file. Dopo aver selezionato l'attributo che ci interessa possiamo studiarne le propriet tramite il riquadro inferiore.

Visualizzare i CSS in progettazione


Nella barra "Documento" troviamo il menu Riferimenti Visivi. Le prime quattro voci permetto di visualizzare o nascondere dei segnali visivi che forniscono maggiori informazioni sugli oggetti presente nella pagina, utili soprattutto nella modellazione di layout. Figura 7. Menu "Riferimenti Visivi"

L'opzione Sfondi layout CSS, se attivata, colora lo sfondo di un elemento la cui visualizzazione stata definita tramite CSS. L'opzione Layout CSS con riquadri, se attivata, evidenzia il bordo interno ed esterno di un riquadro in proporzione al spaziatura interna e del margine. L'opzione Contorni layout CSS, se attivata, visualizza un perimetro di contorno ai tag DIV. Infine l'opzione Profili livello evidenzia i tag DIV definiti con propriet del modello di riquadro.

Creare classi
In un certo senso l'interfaccia di Dreamweaver tornata alle origini. Infatti se vero che nelle vecchie versioni gli utenti di Dreamweaver che volevano impostare la formattazione di un oggetto (ad esempio una parola) si limitavano a selezionarla e a deciderne l'aspetto tramite il pannello Propriet adesso il sistema tornato esattamente il medesimo. Naturalmente le differenze ci sono (gi da Dreamweaver mx 2004) e soprattutto sono vantaggiose: adesso Dreamweaver traduce la formattazione in codice CSS piuttosto che in codice HTML come faceva in passato. Immaginiamo di voler definire l'aspetto di un paragrafo della nostra pagina web. sufficiente selezionare tutto il paragrafo, accedere al pannello Propriet e impostare le varie caratteristiche come la dimensione del testo, il tipo dicarattere, il colore e cos via. Gi dopo la prima modifica, nella casella "Stile" del pannello "Propriet", appare la scritta Stile1, per di pi formattata secondo le impostazioni che abbiamo definito. Naturalmente sar cambiato anche l'aspetto del paragrafo selezionato. In pratica il programma ha definito nell'<head> dellapagina web delle regole relative alla classe "Stile1". Inoltre ha applicatola classe "Stile1" al paragrafo corrente. I vantaggi sono (almeno) due:

1.

Dreamweaver non ha usato stili HTML per definire la formattazione del paragrafo corrente ma lo standard CSS, il tutto in maniera completamente trasparente all'utente che invece di preoccuparsi del modo in cui verr codificata la formattazione pu dedicarsi a compiti di livello pi alto;

2.

le informazioni relative alla formattazione sono state memorizzate nell'head della pagina come classe, quindi potranno essere facilmente applicate a ogni altro paragrafo (o oggetto) della pagina corrente senza replicare le regole di stile e con la certezza che in futuro baster modificare la classe per aggiornare automaticamente tutti gli oggetti a cui essa stata applicata.

Vediamo un veloce esempio. Immaginiamo di voler creare una classe permostrare un paragrafo con il testo di colore blu e (possibilmente) con ilcarattere Courier New. Per farlo sar sufficiente: scrivere il primo dei paragrafi che avranno questa particolare formattazione e premere invio per creare un tag <p>. selezionare tutto il paragrafo; agire sul pannello "Propriet" e scegliere "Courier New" come carattere e il "blu" (#0000FF) come colore del testo; Figura 1. Esempio di formattazione di un paragrafo

A questo punto Dreamweaver dovrebbe aver gi creato la classe "Stile1".Possiamo controllare accedendo al pannello "Stili CSS" e attivando la modalit "Tutte". Figura 2. Lo stile creato nell pannello "Stili CSS"

Vediamo che nel sotto albero della voce <stile> compare ".Stile1". Ora possiamo modificare la classe tramite il riquadro "Propriet" sottostante e possiamo rinominarla in modo da poterla riusare con maggior semplicit. Per farlo necessario fare click destro sulla voce ".Stile1",scegliere "Rinomina", digitare il nuovo nome e premere "Ok". Usiamo "TestoBlu" come nuovo nome. Figura 3. Rinominare una classe

A questo punto possiamo applicare la classe ad altri paragrafi, per farlo possiamo usare il Selettore di Tag sulla barra di stato. Prima di tutto dobbiamo selezionare il paragrafo a cui applicare la classe, fare clic destro sul relativo tag <p> nel Selettore di Tag, scegliere Imposta classe>TestoBlu. Figura 4. Impostare la classe dal Selettore di Tag

Naturalmente possiamo ripetere il procedimento per ogni paragrafo (o elemento).

Attualmente nella pagina abbiamo due paragrafi. Proviamo ora a modificare alcune impostazioni della classe "TestoBlu". Accediamo al pannello "Stili CSS", attiviamo la modalit "Tutte" e selezioniamo la voce ".TestoBlu". Accediamo al riquadro propriet sottostante e modifichiamo il carattere: scegliamo la voce "Arial, Helvetica,sans-serif". Figura 5. Modificare il carattere della classe

Automaticamente vedremo aggiornarsi tutti i paragrafi della pagina corrente associati alla classe "TestoBlu".

Attenzione alla definizione della regola del tag


Ipotizziamo di voler formattare soltanto una parola di un paragrafo. Se la selezioniamo e usiamo il pannello "Propriet" per impostare, ad esempio, il suo colore come rosso e il carattere come "Georgia" vedremo la parola aggiornarsi come desiderato. Tuttavia nel pannello "Stili CSS" non appare alcuna nuova definizione di classe, questo perch Dreamweaver definisce una nuova classe solo quando si formatta l'intero paragrafo. In tal caso non potremmo riusare quelle regole CSS per altre porzioni di testo. Tornando al discorso della classi, esiste un altro modo per creare una classe. Basta fare click destro in un qualsiasi punto del pannello "Stili CSS" e scegliere "Nuovo". Figura 6. Creare una nuova regola CSS

Scegliamo "Classe" nel menu "Tipo selettore:" e il digitiamo il nome che desideriamo assegnare alla classe nella casella "Nome". Infine scegliamo "Solo questo documento" (vedremo in seguito come creare un foglio di stile esterno). La schermata successiva ci permette di definire nei minimi dettagli le caratteristiche della nostra classe. Usandola in minima parte potremmo impostareil "Colore" nel pannello "Tipo" su verde (#00FF00). Figura 7. Definire una regola CSS

Infine scegliamo "Ok". Per applicare la classe a un paragrafo baster selezionarlo e procedere come descritto in precedenza.

Ridefinire i tag
Se siamo intenzionati a modificare l'aspetto di tutte le occorrenze di un tag nella nostra pagina web forse non ciinteressa il concetto di classe visto in precedenza ma vogliamo, pi semplicemente, ridefinire un tag. Se ridefiniamo un tag ogni volta chelo useremo esso avr l'aspetto che abbiamo deciso.

Se ad esempio decidiamo che l'"intestazione1" (che corrisponde al tag <h1>) debba essere di colore rosso, ogni volta che applicheremo l'<h1> a una porzione di testo quest'ultimo assumer il colore rosso. Vediamo come procedere: facciamo click destro in un qualsiasi punto del pannello "Stili CSS" e scegliamo "Nuovo". Nel pannello che appare scegliamo "Tag (ridefinisce l'aspetto di un tag specifico)" e poi, nel menu "Tag" selezioniamo il tag che vogliamo ridefinire (<h1> in questo esempio). Infine scegliamo "solo questo documento" e quindi "Ok". Figura 1. Creare una nuova regola CSS

Appare il pannello visto in precedenza, proviamo a selezionare il colore rosso nella casella "Colore" (in alternativa scriviamo #FF0000). Poi premiamo "Ok". Figura 2. Definire la regola CSS

A questo punto non rimane che selezionare un paragrafo e applicargli l'<h1> per verificare che, oltre ad assumere le caratteristiche proprie del tag <h1>, il testo si colorer di rosso come abbiamo deciso.

Naturalmente possiamo applicare <h1> a una serie di paragrafi e, se decideremo di modificarne le propriet, tutti i gli elementi simili si aggiorneranno automaticamente.

Fogli di stile esterni


Nelle lezioni precedenti in definivamo una classe una sola volta in una pagina per poi collegare ad essa vari paragrafi, ma possibile definire una classe una sola volta per tutte le pagine del sito web. Questa pratica porta il vantaggio di "alleggerire" il peso delle pagine web e la possibilit di poterne modificare l'aspetto modificando solo il foglio di stile senza dover aprire ogni pagina. Dobbiamo creare allora un foglio di stile esterno e collegare ad esso le nostre pagine web. Facciamo click destro in un punto qualsiasi del pannello "Stili CSS" e scegliamo "Nuovo". Appare il pannello che ci permette di definire una classe o ridefinire un tag. Possiamo scegliere indifferentemente una delle due. Decidiamo, ad esempio, di creare una nuova classe. Scegliamo quindi "Classe", assegniamogli il nome "TestoRosso", infine selezioniamo "(Nuovo foglio di stile)" e clicchiamo su "Ok". Figura 1. Creare una nuova regola CSS

Dreamweaver ci chiede di assegnare un nome al nuovo foglio di stile. Diamogli il nome "stile" (Dreamweaver aggiunger al file l'estensione ".css") e scegliamo "Ok". Si apre infine la finestra per la definizione della classe "TestoRosso". Scriviamo "#FF0000" nella casella "Colore" della scheda "Tipo" e premiamo "Ok". Figura 2. Assegnare il colore rosso allo stile

La nuova classe stata salvata nel file "stile.css". Possiamo vederlo anche dal pannello "Stili CSS" che visualizza la voce ".TestoRosso" nel sottoalbero "stile.css". Figura 3. Visualizzare il foglio di stile esterno

Dreamweaver oltre a creare il file del foglio di stile esterno lo ha anche collegato alla pagina corrente, infatti se scriviamo qualcosa nella pagina web e premiamo Invio (in modo da creare un paragrafo) possiamo selezionare il tag <p> tramite il selettore di tag e associargli la classe "TestoRosso". Vediamo ora come associare il foglio di stile ad un'altra pagina web: apriamo (o creiamo) una pagina HTML (in realt la pagina pu anche essere di tipo ASP, PHP, JSP, etc...); facciamo click destro in un qualsiasi punto del pannello "Stili CSS" e scegliamo "Associa foglio di stile..." Appare un pannello per il collegamento del foglio di stile esterno, nella prima casella dobbiamo specificare la posizione del foglio di stile. Se presente nel nostro computer (come in questo

esempio) premiamo "Sfoglia..." e cerchiamolo. Se invece memorizzato su internet possiamo specificarne l'URL. Figura 4. Pannello "Collega foglio di stile esterno"

Il gruppo di scelte "Aggiungi come:" molto importante. Se scegliamo Collegamento allora nella pagina web attuale verr soltanto specificato come raggiungere il file del foglio di stile e nient'altro. Se scegliamo Importazione allora le regole contenute nel foglio di stile verranno copiate all'interno della pagina web corrente. Il primo metodo quello pi utile e permette di beneficiare di alcuni dei vantaggi spiegati in precedenza. Infine nella casella Media: possibile specificare il tipo di "supporto" a cui destinato il foglio di stile corrente. Ad esempio se stiamo aggiungendo un foglio di stile che contiene regole su come deve apparire la pagina al momento della stampa possiamo scegliere "print". Maggiori informazioni in merito sono fornite nelle indicazioni del W3C.

I Comportamenti
Il "pannello Comportamenti" di Dreamweaver permette di attivare delle azioni (o meglio delle funzioni) JavaScript chiamate appunto comportamenti, anche perch in genere rappresentano le "reazioni" del sistema a determinate sollecitazioni. Il funzionamento generale pu essere spiegato in quattro punti: Un comportamento sempre associato ad un tag, per cui bisogna selezionare dal Selettore di tag il tag HTML cui associarlo, in genere il tag <body>, oppure un link, un'immagine, un modulo o un suo elemento. Avvertenza: sebbene molti comportamenti vengono applicati ai livelli il tag <div> non supporta i comportamenti. Quindi quei comportamenti che si riferiscono ai livelli vengono in genere applicati ai tag <body> o <a>. Figura 1. Pannello dei "Comportamenti"

Selezionato il tag bisogna verificare quali eventi sono supportati dai vari browser. Dreamweaver mostra abilitate solo le voci dei comportamenti supportati dai browser che ci interessa supportare. Quindi se stiamo progettando un sito solo per Internet Explorer 6.0 (molto molto male perch dovremmo progettare siti compatibili con tutti i principali browser!) possiamo selezionare la voce Mostra eventi per>IE 6.0. In questo modo Dreamweaver attiver tutte le voci dei comportamenti supportati da Internet Explorer 6.0. Figura 2. Compatibilit con i browser

Naturalmente, essendo noi dei webmaster coscienziosi, vorremo rendere le nostre pagine web fruibili dal maggior numero di browser possibili. In tal caso un ottima scelta selezionare la voce "HTML 4.01" dal solito menu "Mostra eventi per". In questo caso disporremo di menu funzionalit ma almeno potremo garantire una maggior compatibilit delle nostre pagine web (e in generale questo l'obiettivo primario di un buon webmaster). Un comportamento deve essere associato ad un evento. Al verificarsi dell'evento, la pagina web risponder con quel determinato comportamento. Esempi di eventi sono il caricamento di una pagina, il suo ridimensionamento, la sua chiusura (tutti ovviamente associati al tag <body>), oppure il passaggio del mouse, il suo click, ecc. (associati, per esempio ad un link, tag <a>). Dopo aver selezionato il tag da associare al comportamento ed i comportamenti che supportano gli eventi necessario scegliere un'azione premendo il pulsante "+", che consente di visualizzare il menu del pannello Comportamenti. Se un comportamento non pu essere attivato da un tag la sua voce apparir disabilitata.

Infine selezionata un'azione si impostano i parametri dalla finestra di dialogo e cliccando "OK" si inserisce il comportamento nella pagina.

Event e gestori

Quando si inserisce un comportamento vengono inseriti nella pagina web due pezzi separati di codice: un event handler (gestore di evento), ovvero una o pi funzioni JavaScript contenute in un tag <script>, all'interno del tag head della pagina che definiscono le operazioni che deve eseguire il comportamento; l'associazione dell'evento al relativo gestore, inserita come attributo del tag HTML cui associato il comportamento. Il pannello "Comportamenti" non ha menu specifici da attivare col tasto destro del mouse oppure dal menu a comparsa, sulla destra del pannello, il quale serve solo per gestire il pannello stesso e l'Help. Figura 1. Associazione evento/comportamento

Per visualizzare nel pannello i comportamenti inseriti nella pagina necessario selezionare il tag cui essi sono associati. I comportamenti sono ordinati per eventi, disposti sulla sinistra del pannello in ordine alfabetico. All'interno di un gruppo di eventi, associati allo stesso tag, questi sono elencati per azioni in ordine cronologico di inserimento, che coincide con l'ordine cronologico di esecuzione del comportamento al verificarsi dell'evento. Se all'interno di un gruppo di azioni attivate dallo stesso evento vogliamo cambiare la successione cronologica di esecuzione necessario posizionarsi sull'azione prescelta e premere il tasto freccetta rivolta verso l'alto, situato sulla destra del pannello, affinch l'azione sia eseguita prima o la freccetta rivolta verso il basso perch l'azione sia eseguita dopo. Sulla sinistra del pannello troviamo, a parte il pulsante + per aprire il menu delle azioni, anche il pulsante che serve per eliminare un'azione, dopo averla selezionata.

Una volta che si selezionata un'azione, diventa visibile un tasto freccetta che, se cliccato, mostra un menu con gli eventi disponibili per quell'azione (ovviamente in funzione del browser di destinazione che si scelto, anch'esso modificabile da questo menu) in questo modo e possibile selezionare un altro evento e dunque modificare l'evento di attivazione dell'azione. Con un doppio click su un'azione presente nel pannello Comportamenti viene aperta nuovamente la finestra di dialogo per l'inserimento dei parametri ed cos possibile modificarli. Figura 2. DESCRIZIONE