Primo avvio
La prima volta che avviate Dreamweaver CS4 visualizzerete una schermata come quella presente nella figura 1.
Occorrerà concentrarsi in particolare sul riquadro centrale. Nella parte più a sinistra, ai prossimi utilizzi di Dreamweaver troverete l’elenco degli ultimi file aperti: potrete riaprirli con un semplice clic sul loro nome.
Nella parte più a destra, invece, trovate dei collegamenti con alcune delle principali voci della guida in linea. La parte che ci interessa più direttamente è quella centrale, dalla quale potete scegliere quale tipo di file volete creare (HTML, PHP, ASP ecc.).
Figura 1: la finestra di avvio di Dreamweaver CS4
Nota
Questa schermata, oltre che la creazione di singole pagine, permette di definire un intero sito web. Riparleremo di questa opzione nel prossimo articolo su Dreamweaver CS4.
Per fare le prime prove creeremo una classica pagina HTML: fate, dunque, clic sulla voce corrispondente. Dreamweaver crea il vostro file e mostra la schermata della figura 2.
Figura 2: un nuovo file HTML
La prima cosa da notare è che la schermata è divisa in due parti: in alto vedete il codice sorgente, in basso l’anteprima della pagina web come sarà visualizzata nel browser. Questo riquadro permette di lavorare in modo WYSIWYG (What you see is what you get - quello che vedi è ciò che ottieni), ossia in modo da vedere esattamente il risultato della pagina già mentre si lavora.
Voi potete scegliere di lavorare indifferentemente nel riquadro che preferite. Le modifiche verranno poi automaticamente trasferite nell’altra vista.
Questa finestra bipartita è molto comoda per lavorare, ma ci sono casi in cui è più pratico visualizzare una sola delle due parti (che così avrà a disposizione più spazio).
Per modificare la visualizzazione del documento, potete ricorrere agli appositi pulsanti sulla barra degli strumenti del documento, visibile in figura 3.
Figura 3: la barra degli strumenti del documento
Le viste possibili sono:
- Codice: l’area di lavoro mostra solo il codice sorgente della pagina;
- Dividi: è la visualizzazione predefinita con la finestra divisa in due aree, una per il codice e una per la vista WYSIWYG;
- Progettazione: tutta l’area di lavoro mostra la vista WYSIWYG.
- Vista dal vivo: assembla le parti dinamiche di un sito e da un'anteprima di come si vedrebbe la pagina all'interno del browser.
La schermata di Dreamweaver, oltre all’area del documento, presenta sulla destra i pannelli, ovvero delle aree che raggruppano i comandi dedicati a una particolare operazione, come l’inserimento di elementi nella pagina.
Tutti i pannelli sono dotati di un menu, visibile in figura 4, con comandi specifici. Per aprire questo menu, è sufficiente fare clic sull’apposita icona presente nel pannello in alto a destra.
Figura 4: il menu del pannello Inserisci
Alcuni pannelli sono raggruppati ad altri e sono accessibili semplicemente facendo clic sulla linguetta con il loro nome nel gruppo, visibile in figura 5.
Figura 5: pannelli raggruppati
In alcuni casi, i pannelli sono addirittura nascosti e si vede solo la linguetta con il loro nome. È il caso, per esempio, dei pannelli Stili CSS ed Elementi PA nella figura 5. Per espanderli è sufficiente fare clic sulla relativa linguetta. L’espansione di un gruppo di pannelli può però comportare la riduzione di un altro gruppo. L’area dedicata ai pannelli può essere temporaneamente ridotta per fare spazio al documento. Per ridurre l’area destinata ai pannelli, fate clic sulla doppia freccia posta in alto a destra dell’area stessa. Quando l’area dei pannelli è ridotta, questa doppia freccia ha le punte rivolte a sinistra, come visibile nella figura 6. Basterà rifare clic su di essa per rivoltare le punte a destra e riespandere l’area dei pannelli.
Figura 6: l’area dei pannelli ridotta
I pannelli possono anche essere spostati e staccati dall’area in cui si trovano normalmente. È sufficiente fare clic sulla linguetta con il loro nome e spostarli dove risulta più comodo. Si potranno poi ritrascinare nella posizione iniziale. Un contorno azzurro segnala il punto in cui verrà attaccato il pannello.
La disposizione dei pannelli può essere modificata da Dreamweaver CS4 stesso, che dispone di diverse aree di lavoro preimpostate.
Per farlo, potete scegliere il tipo di area di lavoro più adatta alle vostre esigenze dal Commutatore area di lavoro, visibile in figura 7.
Figura 7: scegliere il tipo di area di lavoro che si preferisce
Ciascuna di queste aree di lavoro predefinite è pensata per un particolare tipo di attività (design, sviluppo ecc.) o per assomigliare all’interfaccia delle precedenti versioni di Dreamweaver. In particolare, la visualizzazione Classica elimina il pannello Inserisci e lo sostituisce con una barra degli strumenti corrispondente, tipica delle precedenti versioni del programma, come visibile in figura 8.
Figura 8: la barra degli strumenti Inserisci
Di volta in volta, potete scegliere come lavorare senza modificare le pagine sui cui state operando.
È anche possibile creare un’area di lavoro personalizzata scegliendo l’apposita voce dal menu visibile nella figura 7.
Dreamweaver vi chiederà di assegnare un nome alla nuova area di lavoro e poi passerà a utilizzarla. Configurate l’area di lavoro come preferite. Le modifiche che apporterete verranno salvate e potrete ritrovarle ogni volta che volete: la nuova area di lavoro sarà sempre accessibile dal menu Commutatore area di lavoro.
Per concludere questa descrizione dell’area di lavoro di Dreamweaver CS4, dobbiamo ricordare la Finestra di ispezione delle proprietà, posta sotto all’area del documento. Si tratta di una finestra sensibile al contesto che permette di leggere e impostare le proprietà dell’oggetto selezionato in quel momento. Chi lavora in ambiente WYSIWYG avrà sicuramente modo di usarla moltissimo.
Sia la Finestra di ispezione delle proprietà sia gli altri pannelli possono essere chiusi utilizzando l’apposita voce dal menu del pannello stesso. Per riaprire un pannello chiuso si deve ricorrere al menu Finestra.
 |
|
|
|
|
