Guida a Dreamweaver

A cura di: www.tutorialpc.it 

Nota: E' permessa la pubblicazione di questa guida su altri siti lasciando intatto il contenuto, questa nota e il link al nostro sito.

Dreamweaver è utilizzato in tutto il mondo da circa l’80% dell’utenza professionale, perché offre molteplici vantaggi, non ultimo, quello di generare il codice più pulito tra gli editor.
Come procurarsi Dreaweaver, è possibile scaricare una versione dimostrativa, pienamente funzionante per 30 giorni, dal sito Macromedia. La versione dimostrativa è in inglese, per cui le videate ed i comandi descritti nelle lezioni seguenti saranno relativi alla versione inglese (suvvia, chi di voi ha problemi con l’inglese??? Io ne ho da sempre, ma almeno mi sono abituato :-P ).
 

Installare Dreaweaver
Lanciate l’installer e seguite le istruzioni delle finestre di dialogo.
Come si diceva Dreamweaver MX vi permette di editare parecchi linguaggi, per cui durante la fase di installazione vi verrà richiesto per quali linguaggi volete che Dreamweaver MX sia l’editor predefinito. Dunque, se per qualche linguaggio preferite che l’editor predefinito sia un altro, togliete da quel linguaggio il segno di spunta (ad esempio io come editor predefinito per i CSS – i fogli di stile - preferisco l’eccellente TopStyle, purtroppo disponibile solo per piattaforma Windows).
Teminata l’installazione si aprirà (nei PC) la finestra della cartella col gruppo di programmi Macromedia, al cui interno troverete l’icona della scorciatoia per lanciare Dreamweaver MX. Doppio click sull’icona e il programma verrà aperto.
Configurare il Workspace
La prima volta che lanciate Dreamweaver MX si aprirà una finestra di dialogo in cui vi verrà richiesto di configurare il vostro Workspace (spazio di lavoro). Tra le novità di MX c’è la possibilità di scegliere tra tre tipi di configurazioni diverse:

• Dreamweaver MX Workspace, la nuova interfaccia con i pannelli integrati, posizionati sulla sinistra. Consigliata a chi è un assiduo utilizzatore di programmi come Flash, Fireworks o PhotoShop, che, appunto posizionano i pannelli sulla sinistra dell’area di lavoro;
• Dreamweaver 4 Workspace, che ricorda l’intefaccia delle versioni precedenti, con i panelli sganciati che possono essere posizionati a piacimento nei vari punti del vostro monitor. Consigliata a chi lavora con due monitor contemporaneamente;
• Dreamweaver MX Workspace HomeSite/Coder –Style, la nuova interfaccia con i pannelli integrati, posizionati sulla destra e che di default si aprirà in Code View (Vista Codice). Consigliata per gli utenti di HomeSite, ColdFusion Studio e Jrun Studio.
Spuntate la casella della vostra impostazione preferita (di default Dreamweaver MX ha selezionata la configurazione Dreamweaver MX Workspace) premete OK e finalmente si aprirà il nuovo Dreamweaver MX.
 

La prima volta che lanciate Dreamweaver, se sul vostro computer non sono presenti altre installazioni di versioni precedenti nelle quali avevate definito dei siti (che quindi verranno importati), comparirà una finestra che vi avverte che non vi sono siti definiti. Potete ignorarla cliccando su Cancel, ma ovviamente se vogliamo creare un sito, dovremo definirne uno (crearne la struttura)

Se si sceglie di premere Cancel, le successive volte che verrà lanciato Dreamweaver ci si presenterà la stessa finestra di dialogo (come una maledizione), tuttavia sarà anche possibile definire il primo sito dal pannello Site.

Se per “un caso anomalo” volessimo creare un sito su dreamweaver, ci sono alcune cose che ovviamente i nuovi utilizzatori devono necessariamente sapere:
Innanzitutto definire un sito significa ricreare la stessa struttura che troveremo pubblicando il sito su internet, questo comporta si la perdita di tempo di definire alcune variabili (2 minuti in tutto, non tremate!) ma anche la grande comodità, ad es. di poter compiere alcune modifiche e vederle aggiornate prima di pubblicare (ad es. quando cambiate il nome di una pagina e i link a quella, si auto-aggiornano).
Per ora, vediamo cosa accade in prima battuta, cliccando sul pulsante EDIT.
 

• Comparirà a questo punto un’altra finestra, che consente varie opzioni sui siti;

• Clicchiamo nuovamente sul pulsante Edit presente nella nuova finestra, 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 (un classico esempio è dato da prova.it, ma basta ricordarsi di dare al sito un nome che ci ricordi cosa stiamo per pubblicarci);

• Clicchiamo sull’icona della cartella accanto al campo Local Root Folder e selezioniamo una cartella all’interno del nostro hdd, 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, (di solito si crea una cartella “img” o “images” ma ovviamente la scelta è vostra….)
 

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 (che il 90% di voi non toccherà mai).
Gli utenti delle versioni precedenti, qualora abbiano in tali versioni, ancora installate, dei siti definiti, avranno la fortuna di ritrovarli tutti anche nella nuova versione di dreamweaver, come già accennato, dunque potranno evitare il calvario della prima definizione di sito.
 

L’area di lavoro sulla quale lavoreremo durante questo corso è quella propria di dreamweaver MX..
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, come altri editor html visuali, assegna di default alla pagina non salvata il titolo “Untitled Document”. 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 delle pagine;

• View comprende le opzioni per la visualizzazione;

• Insert comprende alcuni oggetti (tag di varia natura… da asp:NET a php, jsp ecc…) utilissimi come scorciatoie;

• Modify consente di modificare alcune proprietà della pagina o di alcuni elementi sui quali stiamo lavorando;

• Text da questo menu accediamo al controllo degli elementi testuali della pagina, ma anche verificare, collegare o importare uno stile o un file css e dunque usarlo all’interno della pagina che stiamo modificando, sia che questo file sia stato creato con dreamweaver (ovviamente) sia con altri strumenti;

• Commands, i comandi che troviamo in questa voce di menù servono, di norma per automatizzare operazioni ripetitive. In realtà, non ne ho mai trovato particolare utilità di utilizzo.

• Site questa voce di menu ci permette di accedere ai principali controlli sul sito che stiamo sviluppando, oltreché accedere alla sua rappresentazione visiva. Questo tuttavia, come anche molti altri comandi, possono essere richiamati direttamente dalle finestre che circondano l’area di lavoro;

• 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: un programma separato, ma che viene installato contestualmente a Dreamweaver.

Al di sotto del menu classico appena visto, 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 ci permette di visualizzare sia il codice che la versione grafica della pagina, mentre ne modifichiamo il codice;

• Show Design View, la modalità visuale;

• Live Data View consente di visualizzare una pagina contenente script, ma per utilizzare questo comando è necessario avere scelto un Server Model ed avere attivato una connessione ad un database;

• 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>

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, ovviamente deprecata, ma sempre utile per capire anche oggi il target di utenza possibile per il nostro sito). Per calcolare il peso di una pagina la Connection Speed considera anche 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 divesa, come indicato di seguito


I pannelli o i gruppi di pannelli che appaiono di default nell’area di lavoro sono, dall’alto verso il basso: Design (gruppo di pannelli), Code (gruppo di pannelli), Application (gruppo di pannelli), Files (gruppo di pannelli) e Answers.
Infine al di sopra ed al di sotto della pagina troviamo rispettivamente il gruppo di pannelli Insert e il pannello Property.

Altri pannelli sono disponibili dal menu Window: il gruppo Result che si apre sotto il pannello Property ed i pannelli accessibili da Windows >> Others… Ovvero i pannelli mobili Code Inspector e Sitespring, il gruppo di pannelli Advanced Layout, ed il pannello History, che si agganciano ai pannelli sul lato del documento tra il gruppo Sites ed Answers ed infine il pannello Timelines che si apre tra Property ed il gruppo Result in fondo alla pagina.
Analizziamo ora le caratteristiche dei pannelli.
Pannelli Insert
Il gruppo di pannelli Insert è un’alternativa al menu Insert per inserire gli oggetti. I pannelli sono:

• Common, da cui inserire links, immagini, livelli, tabelle, Flash movies, ecc.;

• Layout, che consente di andare in modalità Layout View;

• Text, per inserire i principali elementi relativi alla formattazione del testo;

• Tables, che in vista codice consente di inserire alcuni tag di tabella non presenti nelle precedenti versioni di Dreamweaver;

• Frames, che consente la creazione di frameset ed, in vista codice, consente l’inserimento del tag Iframe, il cui supporto è tuttavia parziale e comunque nullo in modalità visuale;

• Forms, per inserire un form ed i suoi elementi;

• Template, una nuova funzionalità che consente l’inserimento rapido dei templates e l’inserimento di templates nidificati;

• Characters: inserisce l’interruzione di riga (attivabile anche mediante la combinazione di tasti Maiuscolo+Invio), lo spazio unificatore ed i principali caratteri speciali (ad esempio il simbolo dell’euro e del copyright)

• Media, inserisce i elementi multimediali come file Flash o Shockwave, nonché dei bottoni Flash, o converte il testo in Flash senza bisogno di avere quest’ultimo programma;

• Head, da questo pannello accediamo agli elementi del tag head, tra cui i meta tags per i motori di ricerca e i link a file esterni (ad esempio JavaScript o CSS)

• Script, ci permette di gestire degli script interni o esterni alla pagina;

• Application, è relativo alle funzioni delle pagine contenenti linguaggi di scripting, supportati da Dreamweaver MX: ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, JSP e PHP MySQL.

• Pannelli specifici vengono visualizzati a sinistra del pannello Application quando si sviluppano pagine nei linguaggi appena citati
Pannello Property

In basso, a fine pagina, troviamo il pannello Property, questo pannello è risultato talmente utile che è stato inserito in tutto il pacchetto macromedia. Questo pannello, ci permette di esaminare e modificare rapidamente le proprietà degli elementi della pagina.

Pannello Timelines
Il pannello delle Timelines consente di stabilire delle temporizzazioni da applicare agli elementi della pagina, sfruttando il DHTML, in modo da potere applicare funzioni JavaScript, suddividendo la linea temporale in numero di frame (fotogrammi) al secondo, chi di voi ha familiarità con flash non troverà nessun problema a familiarizzare con questo oggetto.


Pannelli Design
Il gruppo Design, comprendente:

• CSS Styles, l’editor per i fogli di stile integrato in Dreamweaver che ci permette di creare, controllare e modificare sia gli stili interni che esterni alla pagina, ovviamente questi non devono necessariamente essere stati creati con dreamweaver;

• HTML Styles, permette di definire e memorizzare gli attributi HTML ed alcuni stili fisici degli elementi di testo di una pagina, in modo da poterli riapplicare, ad altre parti del documento o ad altri documenti, con un semplice click su nome dello stile HTML memorizzato (la cosa più classica ce potrebbe essere anche definita in un css, ma che non sempre conviene, è la formattazione con un dato carattere);

• Behaviors, consente di applicare alcune funzioni JavaScript, pertanto se siete abbastanza esperti con javascript, lo userete molto molto poco e se non lo siete per nulla non lo userete affatto….. in pratica, a mio parere, si tratta di una utilissima scorciatoia, ma che probabilmente non verrà mai usata…..
Pannelli Application
Il gruppo Application è relativo alla creazione di pagine lato server (script e database tanto per fare un esempio concreto):

• Databases serve per navigare all’interno dei database e creare connessioni ai database;
• Bindings crea associazioni di dati;
• Server Behaviors inserisce comportamenti server;
• Components permette di creare componenti e web services in ASP.NET e ColdFusion.
Pannelli Files

Il gruppo Files comprende:

• Site: questo pannello ci permette di visualizzare, attivando il programma FTP integrato in Dreamweaver, visualizzare i file remoti residenti sul server di pubblicazione;

• Assets 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.

Considerazioni
Macromedia consiglia una risoluzione di 1024x768. il motivo è ovvio se si considera il numero di pannelli che compongono questo splendido strumento di lavoro.
Possiamo anche far sparire tutti i pannelli laterali, cliccando sulla freccia posta nella parte centrale del bordo che divide i pannelli laterali dall’area del documento.

Cliccando nuovamente sulla freccia riappariranno i pannelli laterali.

È 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 "Resize horizontal" ovvero doppia freccia orizzontale, trascinandolo verso destra 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.

Ognuno dei pannelli o dei gruppi di pannelli presenti in Dremaweaver MX, consente la sua massimizzazione e la sua chiusura, cliccando sulla freccia posta sulla destra della barra del titolo del pannello, oppure cliccando col tasto destro del mouse sempre sulla barra del titolo del pannello. Cliccando, invece, sulla freccia posta sulla sinistra, si apre il pannello, o se aperto, si riduce alla sola area della barra del titolo.


Per configurare l’area di lavoro in modo da avere sotto controllo tutti gli elementi della pagina, controlliamo dal pulsante View Options della Toolbar Document che tutti gli elementi dei Visual Aids ed i righelli siano spuntati. I righelli hanno come unità di misura di default il pixel (che rappresenta lo standard), tuttavia l’unità di misura è liberamente modificabile, basta ciccare con il tasto destro per richiamare il menu di modifica.


Preview
Dreamweaver consente l’anteprima delle pagine su tutti i browsers presenti nel nostro computer, creando dei file HTML temporanei aperti nel browser prescelto, in modo che la cache 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.
Al momento dell’installazione di Dreamweaver, l’unico browser disponibile per l’anteprima è il browser predefinito del computer. Per aggiungere il browser secondario e gli eventuali altri dalla Toolbar Document:
Prewiev/Debug in Browser >> Edit Browser List…

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.

Così apparirà l'elenco dei vari browser pronti per essere lanciati dalla Toolbar Document, cliccando il pulsante Prewiev/Debug in Browser.

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.

Premesso che tutto quello che abbiamo detto o che potremmo dire non è che un minimo del totale e premesso soprattutto che webmaster non si nasce ma si diventa con studio, passione e fantasia, io spero di aver chiarito alcuni dubbi e di essere stato abbastanza utile con questa guida.
 

Alla prossima.