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

Esploriamo l'interfaccia I

Link copiato negli appunti

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.

Definizione del sito locale

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.

Definizione del sito locale

Dunque, sebbene tratteremo più oltre la definizione di un sito (a partire dal capitolo 8), vediamo subito cosa succede cliccando su Edit Sites...:

Creazione del sito locale

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

Le impostazioni del 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.

Area di lavoro di Dreamweaver MX

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.

La barra del titolo

Immediatamente sotto troviamo le voci di menu di Dreamweaver:

I menù

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

La gestione di più pagine

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.

La Toolbar Document

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.

Il Tag Selector

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.

Window size e Connection Speed

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.

Le impostazioni Window size

Ti consigliamo anche