Upload
vudung
View
219
Download
0
Embed Size (px)
Citation preview
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