La prima volta che lanciate Dreamweaver MX, se sul vostro
computer non sono presenti altre installazioni di versioni precedenti nelle
quali avevate definito dei siti, comparirà una finestra di dialogo che vi avverte
che non vi sono siti definiti. Potete ignorarla cliccando su Cancel.
Se si sceglie di premere Cancel, le successive volte che verrà
lanciato Dreamweaver ci verrà riproposta questa finestra di dialogo,
tuttavia sarà anche possibile definire il primo sito dal pannello Site
del gruppo Code.
Dunque, sebbene tratteremo più oltre la definizione di un sito (a partire dal capitolo 8), vediamo subito cosa succede cliccando su Edit Sites...:
- Comparirà un'altra finestra di dialogo, che consente varie opzioni sui
siti; - Clicchiamo Edit... per lanciare la finestra Site
Definition in cui sono selezionate le opzioni Advanced
e Local Info; - Scriviamo il nome del sito nel campo Site Name;
- Clicchiamo sull'icona della cartella accanto al campo Local Root
Folder per navigare all'interno del nostro disco e selezioniamo una
cartella per il nostro sito, così in questo campo apparirà il percorso del
sito locale; - Infine clicchiamo sull'icona della cartella del campo Default Images
Folder per navigare all'interno del nostro disco e selezioniamo una
cartella per le immagini da inserire nel nostro sito, in questo campo apparirà
il percorso della cartella dove si trovano le immagini del nostro sito locale.
Così avremo definito un sito, e finalmente si apre lo spazio di lavoro di Dreamweaver
MX, in cui appare anche un pannello mobile da cui accedere ad un tour delle
nuove funzionalità, nonché ai tutorials in inglese.
Gli utenti delle versioni precedenti, qualora abbiano in tali versioni - non
ancora disinstallate - dei siti locali, non dovranno passare attraverso la procedura
di definizone del primo sito locale.
Analizziamo l'area di lavoro che si presenta al primo avvio di Dreameaver MX,
ricordo che per le schermate di questo corso si è scelta l'area di lavoro Dreamweaver
MX Workspace HomeSite/Coder -Style.
In alto troviamo la barra del titolo dove, accanto alla scritta Macromedia
Dreamweaver MX, troviamo - in parentesi quadra - il titolo della pagina, seguito
- in parentesi tonda - dal nome del file. Dreamweaver, per impostazione predefinita,
assegna alla pagina il titolo Untitled Document fino a quando non ne scegliamo
uno diverso e come nome del file - finché non lo salviamo con un nome a nostra
scelta, Untitled - ed un numero progressivo in funzione dei nuovi documenti
aperti in quella sessione di lavoro. La prima volta che apportiamo dei cambiamenti
in una pagina, Dreamweaver aggiunge un asterisco accanto al nome del file.
Immediatamente sotto troviamo le voci di menu di Dreamweaver:
- File, che contiene i comandi per la gestione dei files;
- Edit, che contiene i principali comandi per la modifica
della o delle pagine; - View comprende le opzioni per la visualizzazione dell'area
di lavoro; - Insert comprende gli stessi oggetti che sono anche accessibili
dal pannello Insert, si tratta in genere di tag HTML; - Modify 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
menù contestuale da tasto destro del mouse; - Text da questo menu accediamo al controllo degli elementi
testuali della pagina; - Commands, i comandi che troviamo in questa voce di menù
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; - Site questa voce di menu ci permette di accedere ai principali
controlli sul sito che stiamo sviluppando, oltreché accedere alla sua rappresentazione
visiva; - Window da qui apriamo i vari pannelli di Dreamweaver,
questi ultimi ci permettono ulteriori rapidi e completi controlli e modifiche
sugli elementi della pagina; - Help, per accedere ai vari file di help ed all'Extension
Manager (vedi capitolo 10), un programma
separato, ma che viene installato contestualmente a Dreamweaver.
Una delle principali novità che troviamo in alto a destra in Dreamweaver MX
è il doppio gruppo di pulsanti Riduci ad icona, Ripristina
in basso/Ingrandisci e Chiudi. Infatti adesso, come
in altri programmi, ad esempio Word o FrontPage, è possibile tenere aperte più
pagine all'interno della medesima compatta area di lavoro.
Più in basso, al di sotto del gruppo di pannelli Insert -
fino alla precedente versione denominato Objects - troviamo la Barra degli Strumenti
con una serie di pulsanti, da sinistra:
- Show Code View che ci permette di visualizzare la pagina
come codice (HTML e/o gli eventuali altri linguaggi utilizzati); - Show Code and Design Views che divide l'area della pagina
in due aree, ridimensionabili per mezzo del tracinamento del bordo comune,
l'una in vista codice e l'altra in modalità visuale, simile a come apparirà
sui browsers; - Show Design View, la modalità visuale;
- Live Data View consente di visualizzare una pagina contenente
linguaggi server side in modo simile a come apparirà sui browsers, per utilizzare
questo comando è necessario avere scelto un Server Model
ed avere attivato la connessione al database, vedi
corso di Dreamweaver UltraDev; - Title: è il campo di testo che permette di modificare
il titolo del documento; - File Management, permette vari controlli, tra cui la pubblicazione
del sito con il programma FTP integrato in Dreamweaver; - Preview/Debug in Browser consente sia l'anteprima che
il debug nel browser di destinazione; - Refresh Design View aggiorna la modalità visuale dopo
aver modificato il codice; - Reference apre il pannello dei riferimenti ai vari linguaggi
di cui Dreamweaver offre la reference; - Code Navigation ci permette di navigare rapidamente all'interno
del codice, di individuare rapidamente le funzioni JavaScript inserite nella
pagina ed attivare il relativo debug; - View Options consente di personalizzare le varie opzioni
di visualizzazione della pagina.
In basso troviamo la Barra di Stato con sulla sinistra l'utilissimo Tag
Selector. Questo serve mentre costruiamo la pagina in Design
View, 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 Tag Selector
per selezionare esattamente la riga di tabella desiderata.
Sulla destra della barra di stato troviamo l'opzione Window size
e la Connection Speed, 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 28.8 Kilobits al secondo). Per calcolare il peso di una
pagina la Connection Speed tiene anche conto di eventuali file
esterni come le immagini i filmati Flash, i JavaScript ed i CSS.
Per attivare l'opzione Window size è necessario che la finestra
della pagina non sia massimizzata, dunque una volta ridotta è necessario cliccare
sul triangolino in basso a destra per selezionare una dimensione predefinita
della pagina, che può meglio simulare le dimensioni di un browser ad una determinata
risoluzione. E' anche possibile, cliccando su Edit sizes...
impostare ed aggiungere una dimensione personalizzata, nella schermata qui sotto
l'ultima è un'impostazione personalizzata.
