Layout dell area di lavoro In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell area di lavoro integrata, tutte le finestre e i pannelli sono integrati in una sola finestra di applicazione più grande. 1
Sul Macintosh, Dreamweaver fornisce un layout dell area di lavoro mobile in cui ogni documento è visualizzato in una finestra personale. I gruppi di pannelli sono inizialmente agganciati insieme, ma è possibile sganciarli nelle relative finestre. Le finestre si "agganciano" automaticamente una accanto all altra ai lati dello schermo e alla finestra Documento quando vengono trascinate o ridimensionate. Barra degli strumenti Documento La barra degli strumenti Documento contiene i pulsanti che permettono di cambiare rapidamente la vista del documento: vista Codice, vista Progettazione e una vista combinata che mostra le viste Codice e Progettazione in una sola finestra. Questa barra degli strumenti contiene inoltre alcuni comandi e opzioni comuni relativi alla visualizzazione del documento e al suo trasferimento tra i siti locale e remoto. 2
Nella barra degli strumenti Documento vengono visualizzate le seguenti opzioni: Mostra vista Codice Visualizza solo la vista Codice nella finestra Documento. Mostra viste Codice e Progettazione Visualizza la vista Codice in una parte della finestra Documento e la vista Progettazione nell altra. Quando si seleziona questa vista combinata, l opzione Vista Progettazione in primo piano diventa disponibile nel menu Visualizza. Utilizzare questa opzione per specificare quale vista è visualizzata in primo piano nella finestra Documento. Mostra vista Progettazione Visualizza solo la vista Progettazione nella finestra Documento. Debug server Visualizza un rapporto che consente di eseguire con facilità il debug della pagina ColdFusion corrente. Nel rapporto sono riportati gli eventuali errori presenti sulla pagina. Titolo Consente di inserire il titolo del documento, che verrà visualizzato nella barra del titolo del browser. Se il documento ha già un titolo, esso compare in questo campo. Nessun browser/controllo errori Consente di controllare la compatibilità con tutti i browser. Gestione file Visualizza il menu a comparsa Gestione file. Anteprima/debug nel browser Consente di visualizzare in anteprima o di eseguire il debug del documento in un browser. Selezionare un browser dal menu a comparsa. Aggiorna vista Progettazione Aggiorna la vista Progettazione del documento dopo che sono state apportate modifiche in vista Codice. Le modifiche apportate in vista Codice non vengono visualizzate automaticamente in vista Progettazione finché non si eseguono alcune azioni come il salvataggio del file o la selezione di questo pulsante. Opzioni di visualizzazione Consente di impostare le opzioni per la vista Codice e la vista Progettazione, tra cui la vista che deve essere al di sopra dell altra. Le opzioni del menu sono validi per la vista corrente: vista Progettazione, vista Codice o entrambe. Barra di stato La barra di stato presente sul fondo della finestra Documento fornisce informazioni supplementari sul documento in fase di creazione. Il selettore di tag visualizza la gerarchia dei tag che contengono la selezione corrente. Fare clic su qualsiasi tag nella gerarchia per selezionare il tag specifico e il relativo contenuto. Fare clic su <body> per selezionare tutto il corpo del documento. Per impostare gli attributi class o id di un tag nel selettore di tag, fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Control (Macintosh) sul tag e selezionare una classe o un ID dal menu di scelta rapida. Il menu a comparsa Dimensioni finestra (visibile solo nella vista Progettazione) consente di impostare la finestra Documento su dimensioni predefinite o personalizzate. Alla destra del menu a comparsa Dimensioni finestra è visualizzata la stima della dimensione del documento e del tempo di scaricamento della pagina, compresi tutti i file dipendenti (ad esempio, le immagini o altri file multimediali). 3
Barra Inserisci La barra Inserisci contiene una serie di pulsanti che consentono di creare e inserire oggetti come tabelle, livelli e immagini. Quando si passa il puntatore del mouse sopra un pulsante, viene visualizzata la descrizione comandi con il nome del pulsante. I pulsanti sono organizzati in diverse categorie, che è possibile passare sul lato sinistro della barra Inserisci. Quando il documento corrente contiene codice server, come i documenti ASP o CFML, vengono visualizzate ulteriori categorie. Quando si avvia Dreamweaver, si apre l ultima categoria su cui si stava lavorando. Alcune categorie dispongono di pulsanti con menu a comparsa. Quando si seleziona un opzione da un menu a comparsa, l opzione diventa l azione predefinita del pulsante. Ad esempio, se si seleziona Segnaposto immagine dal menu a comparsa del pulsante Immagine, la volta successiva che si fa clic sul pulsante Immagine, Dreamweaver inserisce un segnaposto immagine. Ogni volta che si seleziona una nuova opzione dal menu a comparsa, l azione predefinita del pulsante cambia. La barra Inserisci è organizzata nelle categorie seguenti: Comuni Consente di creare e inserire gli oggetti usati più di frequente, come ad esempio immagini e tabelle. Layout Consente di inserire tabelle, tag div, livelli e frame. È possibile scegliere tra tre viste di tabella: Standard (predefinita), Tabelle espanse e Layout. Quando viene selezionata la modalità Layout, è possibile usare gli strumenti di layout di Dreamweaver: Disegna cella layout e Disegna tabella layout. Moduli Contiene pulsanti che consentono di creare moduli e inserire i relativi elementi. Testo Consente di inserire numerosi tag di formattazione di testo ed elenco, come b, em, p, h1, ul. HTML Consente di inserire tag HTML per filetti orizzontali, testo dei contenuti HEAD, tabelle frame e script. Categorie del codice server Disponibili solo per le pagine che utilizzano un particolare linguaggio server (ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP). Ognuna di queste categorie fornisce oggetti di codice server inseribili in vista Codice. Applicazione Consente di inserire elementi dinamici come set di record, aree ripetute, moduli inserimento record e aggiornamento record. Elementi Flash Consente di inserire elementi Flash. Preferiti Consente di raggruppare e organizzare i pulsanti della barra Inserisci più utilizzati in un unico punto. Visualizzazione della barra Inserisci e delle categorie e dei menu È possibile nascondere, visualizzare, comprimere o espandere la barra Inserisci, in base alle proprie necessità. È anche possibile visualizzare le differenti categorie della barra Inserisci. Per alcune categorie della barra Inserisci sono disponibili pulsanti che contengono menu con comandi comuni. Se si preferisce visualizzare le categorie come schede nella parte superiore della barra Inserisci, è possibile modificare il layout della barra. Per visualizzare o nascondere la barra Inserisci, effettuare una delle operazioni seguenti: Selezionare Finestra > Inserisci. 4
Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) nella barra Inserisci o nella barra degli strumenti Standard, quindi selezionare Barra Inserisci. Per visualizzare i pulsanti di una particolare categoria: Fare clic sulla freccia accanto al nome della categoria all estrema sinistra dalla barra Inserisci e selezionare un altra categoria dal menu a comparsa. Per visualizzare il menu a comparsa di un pulsante: Fare clic sulla freccia in giù accanto all icona del pulsante. Per visualizzare le categorie delle barra Inserisci come schede: Fare clic sulla freccia accanto al nome della categoria all estrema sinistra dalla barra Inserisci e selezionare Mostra come schede. Nella parte superiore della barra Inserisci vengono visualizzate le categorie come schede. Nota: potrebbe essere necessario fare clic sulla barra del titolo per aprire nuovamente la barra Inserisci. Per visualizzare le categorie delle barra Inserisci disposte in un menu: Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) nella barra Inserisci, quindi selezionare Mostra come menu. La barra Inserisci visualizza le categorie disposte in un menu anziché come schede. 5
Uso della finestra di ispezione Proprietà La finestra di ispezione Proprietà consente di verificare e modificare le proprietà più comuni dell elemento di pagina (oggetto o testo) attualmente selezionato. Il contenuto della finestra di ispezione Proprietà varia a seconda dell elemento selezionato. Per visualizzare o nascondere la finestra di proprietà Ispezione: Selezionare Finestra > Proprietà. Per espandere o comprimere la finestra di ispezione Proprietà: Fare clic sulla freccia di espansione nell angolo inferiore destro della finestra di ispezione Proprietà. Per impostare le proprietà di un elemento di pagina: Selezionare l elemento di pagina nella finestra Documento. Nota: potrebbe essere necessario espandere la finestra di ispezione Proprietà per visualizzare tutte le proprietà dell elemento selezionato. Per modificare le proprietà di un elemento pagina: 1. Selezionare l elemento di pagina nella finestra Documento. 2. Modificare qualsiasi proprietà nella finestra di ispezione Proprietà. Nota: per ottenere informazioni su proprietà specifiche, selezionare un elemento nella finestra Documento e fare clic sull icona della Guida nell angolo superiore destro della finestra di ispezione Proprietà. Nella maggior parte dei casi, le modifiche apportate alle proprietà si riflettono immediatamente nella finestra Documento. 3. Se le modifiche non vengono applicate immediatamente, effettuare una delle operazioni seguenti: o o o Fare clic all esterno dei campi di modifica testo della proprietà. Premere Invio. Premere Tab per passare a un altra proprietà. Visualizzazione dei pannelli e dei gruppi di pannelli È possibile visualizzare o nascondere i gruppi di pannelli e i pannelli nell area di lavoro, in base alle proprie necessità. Per espandere o comprimere un gruppo di pannelli, effettuare una delle seguenti operazioni: Fare clic sulla freccia di espansione nella parte sinistra della barra del titolo del gruppo di pannelli. Fare clic sul titolo del gruppo di pannelli. Per chiudere un gruppo di pannelli e non renderlo più visibile sullo schermo: Selezionare Chiudi gruppo di pannelli dal menu Opzioni nella barra del titolo del gruppo di pannelli. Il gruppo di pannelli scompare dallo schermo. 6
Per aprire un gruppo di pannelli o un pannello non visibile sullo schermo: Selezionare il menu Finestra e quindi un nome di pannello dal menu. Accanto agli elementi attualmente aperti (anche quelli nascosti da altre finestre) viene visualizzato un segno di spunta. Suggerimento: se non si riesce a trovare un pannello, una finestra di ispezione o una finestra che riporta il segno di spunta indicante lo stato di apertura, selezionare Finestra > Disponi e quindi Pannelli per disporre ordinatamente tutti i pannelli aperti. Per selezionare un pannello in un gruppo di pannelli espanso: Fare clic sul nome del pannello. Per visualizzare il menu Opzioni di un gruppo di pannelli, se non è già visualizzato: Espandere il gruppo di pannelli facendo clic sul nome o sulla relativa freccia di espansione. Il menu Opzioni è visibile solo quando il gruppo di pannelli è espanso. Suggerimento: alcune opzioni sono disponibili nel menu di scelta rapida del gruppo di pannelli anche quando il gruppo è compresso; per visualizzare tale menu, fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto Control (Macintosh). Uso del pannello File Il pannello File consente di visualizzare file e cartelle, siano essi associati o non associati a un sito Dreamweaver, e di eseguire operazioni standard di gestione file quali l apertura e lo spostamento di file. In base alle necessità, è possibile spostare il pannello File, inoltre è possibile impostare le preferenze per il pannello File. Utilizzare questo pannello per eseguire le seguenti operazioni: Accesso ai siti, al server e alle unità disco locali Visualizzazione di file e cartelle Gestione dei file e delle cartelle nel pannello File Operazioni con una mappa visiva del proprio sito Per i siti Dreamweaver, utilizzare le seguenti opzioni per visualizzare o per trasferire i file: Nota: i pulsanti File del sito, Server di prova e Mappa del sito appaiono soltanto nel pannello File espanso. Vista File del sito Visualizza la struttura dei file dei siti remoti e locali nei riquadri del pannello File. (L impostazione di una preferenza determina quale sito appare nel riquadro di sinistra e quale nel riquadro di destra) La vista File del sito è la vista predefinita del pannello File. Vista Server di prova Visualizza la struttura directory del server di prova e del sito locale. 7
Vista Mappa del sito Visualizza una mappa grafica del sito, basata sul modo in cui i documenti sono collegati l uno all altro. Tenere premuto questo pulsante per scegliere Solo mappa o Mappa e file dal menu a comparsa. Il menu a comparsa corrente elenca i siti Dreamweaver, i server a cui si è connessi e fornisce l accesso alle unità disco locali e al desktop. Connetti/Disconnetti (disponibili con FTP, RDS, il protocollo WebDAV e SourceSafe) rispettivamente aprono e chiudono una connessione con il sito remoto. Per impostazione predefinita, una connessione che rimane inattiva per 30 minuti viene chiusa automaticamente (solo FTP). Per modificare il limite di tempo, selezionare Modifica > Preferenze (Windows) o Dreamweaver> Preferenze (Macintosh) e selezionare Sito nell elenco Categoria visualizzato sulla sinistra. Aggiorna Aggiorna gli elenchi delle directory locali e remote. Utilizzare questo pulsante per aggiornare manualmente gli elenchi delle directory se è stato selezionato Aggiorna automaticamente elenco file locali o Aggiorna automaticamente elenco file remoti nella finestra di dialogo Definizione del sito. Scarica il/i file Copia i file selezionati dal sito remoto al sito locale (sovrascrivendo l eventuale copia locale del file). Se l opzione Abilita deposito e ritiro file è attivata, le copie locali sono di sola lettura e i file rimangono disponibili sul sito remoto per essere ritirati da altri utenti. Se l opzione Abilita deposito e ritiro file è disattivata, durante un operazione di scaricamento di un file viene trasferita una copia con proprietà di lettura e scrittura. I file copiati da Dreamweaver sono i file selezionati nel riquadro attivo del pannello File. Se è attivo il riquadro remoto, i file remoti o del server di prova selezionati vengono copiati nel sito locale, mentre se è attivo il riquadro locale, le versioni remote o del server di prova dei file locali selezionati vengono copiate da Dreamweaver nel sito locale. Carica il/i file Copia i file selezionati dal sito locale al sito remoto. I file copiati da Dreamweaver sono i file selezionati nel riquadro attivo del pannello File. Se è attivo il riquadro locale, i file locali selezionati vengono copiati nel sito remoto o sul server di prova, mentre se è attivo il riquadro remoto, le versioni locali dei file del server di prova selezionati vengono copiate da Dreamweaver nel sito remoto. Se si carica un file che non esiste già sul sito remoto e l opzione Abilita deposito e ritiro file è attiva, il file viene aggiunto da Dreamweaver al sito remoto come "ritirato". Per aggiungere un file senza lo stato "ritirato", fare clic sul pulsante Deposita. Ritira Trasferisce una copia del file dal server remoto al sito locale (sovrascrivendo l eventuale copia locale del file esistente) e contrassegna il file come ritirato sul server. Questa opzione non è disponibile se nella finestra di dialogo Definizione del sito l opzione Abilita deposito e ritiro file è disattivata per il sito corrente. Deposita Trasferisce una copia del file locale sul server remoto, in modo che possa essere ritirato e modificato da altri utenti. Il file locale diventa di sola lettura. Questa opzione non è disponibile se nella finestra di dialogo Definizione del sito l opzione Abilita deposito e ritiro file è disattivata per il sito corrente. Il pulsante Espandi/comprimi espande o comprime il pannello File, in modo da visualizzare uno o due riquadri. Pannello Stili CSS Il pannello Stili CSS viene utilizzato per creare, modificare ed eliminare stili CSS, nonché per associare fogli di stile esterni ai documenti. Per aprire il pannello Stili CSS Effettuare una delle seguenti operazioni: o Selezionare Finestra > Stili CSS. o Premere Maiusc+F11. 8
Il pannello Stili CSS consente di visualizzare la definizione degli stili associati al documento corrente, nonché la gerarchia degli stili. Questo pannello contiene la definizione degli stili CSS (classe) personalizzati, i tag HTML ridefiniti, nonché il selettore di stili CSS. Nel momento in cui si crea o si associa un foglio di stile CSS, il nome e gli attributi dello stile vengono visualizzati nel pannello Stili CSS. Il pannello Stili CSS elenca tutti i selettori definiti in tutti i tag di stile e nei fogli di stile esterni collegati o importati. Quando si crea uno stile (classe) personalizzato, questo viene visualizzato nel pannello Stili CSS, nel menu a comparsa Stile nella finestra di ispezione Proprietà e nel sottomenu Testo > Stili CSS. Di seguito sono descritti i pulsanti presenti nella parte inferiore del pannello Stili CSS: Associa foglio di stile Apre la finestra di dialogo Collega foglio di stile esterno. Selezionare un foglio di stile esterno da collegare da o importare nel documento corrente. Nuovo stile CSS Apre la finestra di dialogo Nuovo stile CSS. Questa finestra di dialogo consente di selezionare il tipo di stile che si sta creando, ad esempio per creare uno stile di classe, per ridefinire un tag HTML o definire un selettore CSS. Modifica foglio di stile Apre la finestra di dialogo Definizione stile CSS. È possibile modificare qualunque stile utilizzato nel documento corrente o appartenente ad un foglio di stile esterno. Elimina stile CSS Elimina lo stile selezionato dal pannello Stile CSS e la formattazione da tutti gli elementi a cui era stato applicato lo stile. Nota: fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) nel pannello Stili CSS per aprire il menu di scelta rapida che contiene le opzioni disponibili con i comandi dei fogli di stile CSS. 9