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

Processore: Intel Pentium III da 500 Mhz o equivalente

OS: Windows 98 SE, 2000, XP o Windows Server 2003

RAM: 128 MB (256 MB consigliati) HD: 275 MB

Ambiente Mac

Processore: Power Mac G3 da 500 Mhz

OS: OS 10.2.6

RAM: 128 MB (256 MB 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 Untitled–X 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.ita ly .

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. una "tabella di layout" non può essere contenuta in una "cella di layout";

2. 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. Riepilogo per selezione;

2. Regole;

3. 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