Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 2 di 55
  • livello principiante
Indice lezioni

L'area di lavoro

Primo approccio con l'interfaccia utente del programma
Primo approccio con l'interfaccia utente del programma
Link copiato negli appunti

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

Ti consigliamo anche