Area di lavoro di Dreamweaver

Dopo l’installazione di Dreamweaver, al primo avvio dell’applicazione, un menu di Avvio rapido viene visualizzato; in questo menu sono riportate tre domande che consentono di personalizzare l’area di lavoro di Dreamweaver in base alle esigenze.

In base alle risposte alle domande, Dreamweaver si apre in un’area di lavoro Sviluppatore (un layout minimale incentrato sul codice) o in un’area di lavoro Standard (un layout suddiviso con strumenti visivi e un’anteprima in app quando scrivete codice). 

Dopo aver scelto l’area di lavoro, scegliete il tema di colore desiderato. Ora potete iniziare.

Schermata Inizio migliorata

La schermata Inizio in Dreamweaver consente di accedere rapidamente ai file utilizzati di recente, ai tipi di file e ai modelli per iniziare.

A seconda dello stato dell’abbonamento, questa area di lavoro può anche presentare contenuti personalizzati in base alle vostre esigenze.

Dreamweaver visualizza la schermata Inizio all’avvio o quando non è aperto nessun documento.

Opzioni dell’esperienza iniziale di Dreamweaver

Fate clic su Scopri per avere accesso immediato da questa schermata alle esercitazioni di Dreamweaver.

Iniziate a creare i documenti in Dreamweaver facendo clic su uno dei tipi di file visualizzato.

Aprite uno dei modelli per iniziare inclusi in Dreamweaver. 

Fate clic su Inizio per tornare alla schermata Inizio. 

Nella schermata Inizio, sono visualizzati i file su cui stavate lavorando di recente. Se non sono presenti file recenti, questa scheda è vuota.

Potete anche utilizzare la funzionalità di ricerca facendo clic sull’icona Ricerca nell’angolo superiore destro di questa schermata. Quando immettete una query di ricerca, l’applicazione visualizza i file recenti, le risorse Creative Cloud, i collegamenti dell’aiuto e le immagini stock che corrispondono alla query di ricerca immessa.

Per iniziare a creare nuovi file di Dreamweaver, potete fare clic su Crea nuovo. Se nel sistema sono già disponibili dei file, fate clic su Apri. Per informazioni sulla creazione e sull’apertura di documenti in Dreamweaver, consultate Creare e aprire file.

Panoramica dell’area di lavoro

L’area di lavoro di Dreamweaver consente di esaminare le proprietà dei documenti e degli oggetti. Include anche la maggior parte delle operazioni comuni nelle barre degli strumenti in modo da poter modificare velocemente i documenti.

Panoramica sugli elementi dell’area di lavoro

L’area di lavoro comprende i seguenti elementi:

Si trova nella parte superiore della finestra dell’applicazione e contiene un commutatore dell’area di lavoro, dei menu (solo per Windows) e altri controlli dell’applicazione.

Contiene i pulsanti che consentono di passare a viste diverse della finestra Documento (ad esempio, Progettazione, Dal vivo e Codice).

Per visualizzare la barra degli strumenti Standard, selezionate Finestra > Barre degli strumenti > Standard. La barra degli strumenti contiene i pulsanti per le operazioni comuni da eseguire dai menu File e Modifica: Nuovo, Apri, Salva, Salva tutto, Stampa codice, Taglia, Copia, Incolla, Annulla e Ripeti.

Si trova a sinistra della finestra dell’applicazione e contiene i pulsanti delle viste.

Visualizza il documento corrente durante le operazioni di creazione e modifica.

Consente di visualizzare e modificare una serie di proprietà dell’oggetto o del testo selezionato. Per ogni oggetto sono disponibili diverse proprietà.

Situato nella barra di stato nella parte inferiore della finestra del documento. Visualizza la gerarchia dei tag che contengono la selezione corrente. Fate clic su qualsiasi tag nella gerarchia per selezionare il tag specifico e il relativo contenuto.

Consentono di monitorare e modificare il lavoro. Alcuni esempi di pannelli sono il pannello Inserisci, il pannello CSS Designer e il pannello File. Per espandere un pannello, fate doppio clic sulla relativa linguetta.

Consente di caricare e visualizzare i file PSD su Creative Cloud. Utilizzando questo pannello, potete estrarre codice CSS, testo, immagini, caratteri, colori, gradienti e misure dalle composizioni PSD e inserire questi elementi nel documento.

Contiene i pulsanti che consentono di inserire in un documento vari tipi di oggetti, ad esempio immagini, tabelle ed elementi multimediali. Ogni oggetto consiste in una porzione di codice HTML che consente di impostare i diversi attributi mano a mano che lo inserite. Ad esempio, potete inserire una tabella facendo clic sul pulsante Tabella del pannello Inserisci. Se preferite, potete inserire gli oggetti utilizzando il menu Inserisci invece del pannello Inserisci.

Consente di gestire i file e le cartelle, indipendentemente dal fatto che facciano parte di un sito Dreamweaver oppure risiedano su un server remoto. Il pannello File consente anche di accedere a tutti i file presenti sul disco locale. Per ulteriori informazioni, consultate Gestire file e cartelle.

Consente di salvare e riutilizzare gli snippet di codice tra pagine Web diverse, siti diversi e installazioni di Dreamweaver diverse (utilizzando le impostazioni di sincronizzazione). Per ulteriori informazioni, consultate Riutilizzo del codice con gli snippet.

È una finestra di ispezione Proprietà per CSS che consente di creare “visivamente” stili e file CSS e di impostarne le proprietà, nonché di definire media query.

Panoramica sulla finestra del documento

La finestra del documento mostra il documento corrente. Per passare a una vista diversa del documento, utilizzate la barra degli strumenti Documento. 

Potete anche passare a una vista diversa utilizzando le opzioni di visualizzazione del menu Visualizza.

Riproduce una rappresentazione più realistica dell’aspetto che avrà il documento in un browser, consentendovi di interagire con il documento esattamente come in un browser. Potete modificare gli elementi HTML direttamente nella vista Dal vivo e visualizzare istantaneamente l’anteprima delle modifiche nella stessa vista. Per ulteriori informazioni sulla modifica nella vista Dal vivo, consultate Modificare elementi HTML nella vista Dal vivo.

Un ambiente per il layout di pagina visivo, la modifica visiva e lo sviluppo rapido di applicazioni. In questa vista, Dreamweaver offre una rappresentazione visiva e modificabile del documento, simile a quella che si otterrebbe guardando la pagina in un browser.

Un ambiente di codifica manuale per scrivere e modificare codice HTML, JavaScript e di qualunque altro tipo.

Una versione divisa della vista Codice, che vi consente di scorrere per lavorare contemporaneamente su sezioni diverse del documento. 

Consente di visualizzare sia la vista Codice sia la vista Dal vivo per un documento nella stessa finestra.

Consente di visualizzare sia la vista Codice sia la vista Progettazione per un documento nella stessa finestra.

Viene visualizzato il codice effettivo utilizzato da un browser per il rendering della pagina, che può cambiare in modo dinamico mentre interagite con la pagina nella vista Dal vivo.

Quando una finestra documento è ingrandita (impostazione predefinita), nella parte superiore vengono visualizzate delle linguette che mostrano i nomi di file di tutti i documenti aperti. Dreamweaver visualizza un asterisco dopo il nome di file se avete apportato delle modifiche che non sono ancora state salvate.

Dreamweaver visualizza anche la barra degli strumenti File correlati al di sotto della scheda del documento (o sotto la barra del titolo del documento se state visualizzando i documenti in finestre separate). I documenti correlati sono documenti associati al file corrente, quali i file CSS o JavaScript. Per aprire uno di questi file correlati nella finestra del documento, fate clic sul nome del file desiderato nella barra degli strumenti File correlati.

Passare da una vista all’altra

Utilizzate la barra degli strumenti Documento per passare rapidamente tra le diverse viste. Per ulteriori informazioni, consultate Panoramica sulla barra degli strumenti Documento.

Potete anche passare tra le viste utilizzando le opzioni seguenti del menu Visualizza:

• Solo vista Codice: selezionate Codice
• Vista Dividi: selezionate Dividi e una delle opzioni di divisione
• Modalità visualizzazione: alterna tra le viste Progettazione e Dal vivo
• Cambia viste: per alternare le viste da una vista all’altra.

Sovrapporre, affiancare o ridisporre le finestre dei documenti

Se avete molti documenti aperti contemporaneamente, potete disporli affiancati o sovrapposti.

Per sovrapporre le finestre dei documenti: selezionate Finestra > Disponi > Sovrapponi.

Per affiancare le finestre dei documenti: 

• In ambiente Windows, selezionate Finestra Disponi > Affianca orizzontalmente o Affianca verticalmente.
• In ambiente Macintosh, selezionate Finestra > Disponi > Affianca.

Quando aprite più file, le finestre dei documenti sono presentate sotto forma di schede. Per modificare l’ordine delle schede, trascinate la scheda di una finestra fino alla posizione desiderata nel gruppo di schede.

Ridimensionare la finestra del documento

La barra di stato visualizza le dimensioni correnti della finestra del documento (in pixel). Per progettare una pagina che dia risultati ottimali a dimensioni specifiche, potete adattare la finestra del documento a una delle dimensioni predeterminate, modificare tali dimensioni oppure crearne di nuove.

Quando modificate le dimensioni della vista di una pagina nella vista Progettazione o Dal vivo, vengono modificate solo le dimensioni della vista. Le dimensioni del documento rimangono invariate.

Oltre alle dimensioni predeterminate o personalizzate, Dreamweaver elenca anche le dimensioni specificate in una media query. Quando selezionate le dimensioni corrispondenti a una media query, Dreamweaver utilizza la media query per visualizzare la pagina. Potete inoltre modificare l’orientamento della pagina per visualizzarla in anteprima per i dispositivi mobili in cui il layout di pagina cambia in base alla posizione del dispositivo.

Per ridimensionare la finestra del documento, selezionate una delle opzioni visualizzate nel menu a comparsa Dimensioni finestra situato nella parte inferiore della finestra del documento.

Le dimensioni della finestra si riferiscono alle dimensioni interne della finestra del browser (senza i bordi). Le dimensioni del monitor o del dispositivo mobile sono indicate sulla destra.

Modificare i valori elencati nel menu a comparsa Dimensioni finestra

Aggiungere una nuova opzione al menu a comparsa Dimensioni finestra

Panoramica sulla barra degli strumenti Documento

La barra degli strumenti Documento contiene i pulsanti che consentono di passare velocemente da una vista all’altra del documento. 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.

Nella barra degli strumenti Documento sono visualizzate le seguenti opzioni:

Mostra solo la vista Codice nella finestra del documento.

Suddivide la finestra del documento fra le viste Codice e Dal vivo/Progettazione. L’opzione Vista Progettazione non è disponibile per i documenti a griglia fluida.

Si tratta di un’anteprima interattiva che riproduce accuratamente i progetti HTML5 e si aggiorna in tempo reale per visualizzare le modifiche apportate. Potete anche modificare gli elementi HTML nella vista Dal vivo. L’elenco a discesa accanto alle opzioni Dal vivo permette di alternare tra le viste Dal vivo e Progettazione. Questo elenco a discesa non è disponibile nei documenti a griglia fluida.

Visualizza una rappresentazione del documento che mostra come l’utente lo vede in un browser Web. 

Panoramica sulla barra degli strumenti Standard

Per visualizzare la barra degli strumenti Standard, selezionate Finestra > Barre degli strumenti > Standard. La barra degli strumenti contiene i pulsanti per le operazioni comuni da eseguire dai menu File e Modifica: Nuovo, Apri, Salva, Salva tutto, Stampa codice, Taglia, Copia, Incolla, Annulla e Ripeti.

Panoramica sulla barra degli strumenti Navigazione browser

La barra degli strumenti Navigazione browser si attiva nella vista Dal vivo (solo se è stata attivata selezionando Finestra->Barre degli strumenti->Standard) e mostra l’indirizzo della pagina che state visualizzando nella finestra Documento. La vista Dal vivo si comporta come un normale browser. Pertanto, anche se accedete a un sito che si trova all’esterno del vostro sito locale (ad esempio http://www.adobe.com), Dreamweaver carica la pagina nella finestra del documento.

Per impostazione predefinita, i collegamenti non sono attivi nella vista Dal vivo. Questo consente di selezionare o fare clic sul testo di un collegamento nella finestra del documento senza accedere automaticamente alla pagina di destinazione. Per verificare il corretto funzionamento dei collegamenti nella vista Dal vivo, potete attivarli uno alla volta oppure tutti insieme selezionando Visualizza > Opzioni vista Dal vivo > Segui collegamento (Ctrl+clic sul collegamento) o Segui collegamenti continuamente.

Panoramica sulla barra degli strumenti

La barra degli strumenti è visualizzata verticalmente sul lato sinistro della finestra del documento ed è visibile in tutte le viste: Codice, Dal vivo e Progettazione. I pulsanti della barra degli strumenti sono specifici alla vista e sono visualizzati solo se sono pertinenti alla vista in cui state lavorando. Ad esempio, se state lavorando nella vista Dal vivo, le opzioni specifiche alla vista Codice quali Formatta codice di origine, non sono visualizzate. 

Personalizza barra strumenti

Potete scegliere di personalizzare la barra degli strumenti secondo necessità aggiungendovi opzioni di menu o rimuovendovi quelle non desiderate.

Per personalizzare la barra degli strumenti, effettuate le seguenti operazioni:

Per ripristinare i pulsanti predefiniti della barra degli strumenti, fate clic su Ripristina predefiniti nella finestra di dialogo Personalizza barra degli strumenti.

Panoramica sulla barra di stato

La barra di stato presente nella parte inferiore della finestra del documento fornisce informazioni supplementari sul documento in fase di creazione.

Selettore di tag

Visualizza la gerarchia dei tag che contengono la selezione corrente. Fate clic su qualsiasi tag nella gerarchia per selezionare il tag specifico e il relativo contenuto. Fate clic su <body> per selezionare tutto il corpo del documento. Per selezionare gli attributi class o ID di un tag nel selettore di tag, fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) sul tag e selezionate una classe o un ID dal menu di scelta rapida.

Pannello Output

Fate clic su questa icona per visualizzare il pannello Output, che mostra gli errori di codifica presenti nel documento.

Colorazione codice

(Disponibile solo nella vista Codice)

Selezionate uno dei linguaggi di codifica da questo menu a comparsa per cambiare la colorazione del codice da visualizzare in base al linguaggio di programmazione.

Alternare inserimento e sovrascrittura

(Disponibile solo nella vista Codice)

Consente di alternare tra le modalità di inserimento e sovrascrittura durante la scrittura nella vista Codice.

Numero di riga e colonna

(Disponibile solo nella vista Codice)

Visualizza il numero di riga e di colonna in cui si trova il cursore.

Panoramica sulla finestra di ispezione Proprietà

La finestra di ispezione Proprietà (Finestra > Proprietà) consente di verificare e modificare le proprietà più comuni dell’elemento di pagina (oggetto inserito o testo) attualmente selezionato.

Il contenuto della finestra di ispezione Proprietà varia a seconda dell’elemento selezionato. Ad esempio, se selezionate un’immagine nella pagina, la finestra di ispezione Proprietà si modifica per visualizzare le proprietà dell’immagine (ad esempio il percorso del file relativo, la larghezza e l’altezza dell’immagine, il bordo intorno all’immagine, se disponibile, e così via).

Per impostazione predefinita, la finestra di ispezione Proprietà è posizionata nella parte inferiore dell’area di lavoro, ma potete sganciarla e utilizzarla come pannello mobile nell’area di lavoro.

Per accedere alla Guida di una particolare finestra di ispezione Proprietà, fate clic sul pulsante Aiuto nell’angolo superiore destro della finestra, oppure selezionate Aiuto dal menu Opzioni della finestra.

Visualizzare e modificare le proprietà di un elemento pagina

Menu di scelta rapida

I menu di scelta rapida garantiscono l’accesso rapido ai principali comandi e proprietà dell’oggetto o della finestra con cui si sta lavorando. I menu di scelta rapida contengono solo i comandi pertinenti alla selezione corrente.

Per aprire un menu di scelta rapida, fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto Ctrl (Mac) su una sezione di codice nella vista Codice oppure su un oggetto nelle viste Progettazione o Dal vivo.

Modifica della disposizione dei pannelli di Dreamweaver

Potete personalizzare il posizionamento e l’aspetto di tutti i pannelli di Dreamweaver in base alle vostre esigenze.

Ancorare e disancorare i pannelli

• Per ancorare un pannello, trascinatelo dalla linguetta nell’ancoraggio, in alto, in basso o in mezzo ad altri pannelli.
• Per ancorare un gruppo di pannelli, trascinatelo dalla barra del titolo (quella vuota sopra le linguette) nell’ancoraggio.
• Per rimuovere un pannello o un gruppo di pannelli, trascinatelo fuori dell’ancoraggio puntando il mouse sulla sua linguetta o barra del titolo. Potete trascinarlo in un altro ancoraggio o lasciarlo mobile.

Spostare i pannelli

Quando spostate i pannelli, vengono evidenziate le zone di rilascio blu in cui è possibile spostare il pannello. Ad esempio, potete spostare un pannello in alto o in basso in un ancoraggio trascinandolo nella zona di rilascio stretta e blu che si trova sopra o sotto un altro pannello. Se lo trascinate in un’area che non è una zona di rilascio, il pannello resta mobile nell’area di lavoro.

• Per spostare un pannello, trascinatelo dalla linguetta.
• Per spostare un gruppo di pannelli, trascinatene la barra del titolo.

Aggiungere e rimuovere i pannelli

Se rimuovete tutti i pannelli da un’area di ancoraggio, questa scompare. Per creare un’area di ancoraggio, portate i pannelli fino al bordo destro dell’area di lavoro, fino a visualizzare una zona di rilascio.

• Per rimuovere un pannello, fate clic con il pulsante destro del mouse (Windows) o tenendo premuto il tasto Control (Mac OS) sulla sua linguetta e selezionate Chiudi; in alternativa, deselezionatelo nel menu Finestra.
• Per aggiungere un pannello, selezionatelo dal menu Finestra e ancoratelo dove desiderate.

Modificare i gruppi di pannelli

• Per spostare un pannello e inserirlo in un gruppo, trascinatene la linguetta fino alla zona di rilascio evidenziata nel gruppo.
• Per ridisporre i pannelli in un gruppo, trascinate la linguetta di un pannello fino alla nuova posizione desiderata all’interno del gruppo.
• Per rimuovere un pannello da un gruppo, così da renderlo mobile, trascinatelo dalla linguetta all’esterno del gruppo.
• Per spostare un gruppo, trascinatene la barra del titolo (l’area sopra le linguette).

Impilare i pannelli mobili

Se trascinate un pannello fino a un’area che non è una zona di rilascio, il pannello resta mobile nell’area di lavoro. Un pannello mobile può essere posizionato ovunque nell’area di lavoro. Potete impilare pannelli mobili o gruppi di pannelli in modo che si muovano come una singola unità se trascinate la barra del titolo superiore.

• Per impilare i pannelli mobili, trascinate un pannello dalla linguetta fino alla zona di rilascio nella parte inferiore di un altro pannello.
• Per cambiare l’ordine di sovrapposizione, trascinate un pannello in alto o in basso dalla linguetta.
• Per rimuovere un pannello o un gruppo di pannelli dall’impilatura, in modo che diventi mobile, trascinatelo fuori dalla la linguetta o dalla barra del titolo.

Ridimensionare i pannelli

• Per ridurre o espandere un pannello, gruppo di pannelli o una pila di pannelli mobili, fate doppio clic su una scheda. In alternativa, fate doppio clic sull’area delle linguette (nello spazio vuoto accanto alle linguette).
• Per ridimensionare un pannello, trascinatene un bordo. 

Ridurre a icona ed espandere i pannelli

Per limitare il numero di elementi visualizzati nell’area di lavoro, conviene ridurre i pannelli a icona. In alcuni casi i pannelli sono ridotti a icona nell’area di lavoro predefinita.

• Per ridurre a icona o espandere tutti i pannelli di una colonna, fate clic sulla doppia freccia nella parte superiore dell’ancoraggio.
• Fate clic sull’icona di un singolo pannello per espanderlo.
• Per ridimensionare le icone dei pannelli in modo da visualizzare solo le icone (senza etichette di testo), regolate la larghezza dell’ancoraggio fino a far scomparire il testo. Per visualizzare nuovamente il testo delle icone, allargate l’ancoraggio.
• Per ridurre di nuovo a icona un pannello espanso, fate clic sulla linguetta, sull’icona o sulla doppia freccia nella barra del titolo del pannello.

Creare aree di lavoro personalizzate

Potete personalizzare l’area di lavoro aggiungendo o rimuovendo i pannelli in base alle vostre esigenze. Potete quindi salvare le modifiche apportate all’area di lavoro salvandola per accedervi in seguito dal commutatore dell’area di lavoro nella barra degli strumenti del documento.

Salvate le dimensioni attuali e la disposizione dei pannelli assegnando un nome all’area di lavoro, così da ripristinarla anche se spostate o chiudete un pannello.

Per salvare un’area di lavoro personalizzata:

1. Scegliete Finestra > Layout area di lavoro > Nuova area di lavoro.
2. Immettete un nome per l’area di lavoro.

L’area di lavoro viene salvata e sarà visibile nel commutatore dell’area di lavoro nella barra degli strumenti del documento.

Per eliminare un’area di lavoro personalizzata:

Selezionate Gestisci area di lavoro dal commutatore dell’area di lavoro nella barra dell’applicazione per aprire la finestra di dialogo Gestisci aree di lavoro. Selezionate l’area di lavoro e fate clic su Elimina.

Visualizzare o cambiare area di lavoro

Selezionate un’area di lavoro dal controllo per l’impostazione dell’area di lavoro, nella barra degli strumenti del documento.

Personalizzare Dreamweaver in sistemi multiutente

Potete personalizzare Dreamweaver in base alle vostre necessità anche in un sistema operativo multiutente quale Windows XP o Mac OS X.

Dreamweaver non altera le configurazioni personalizzate dei singoli utenti. Per raggiungere questo obiettivo, la prima volta che Dreamweaver viene eseguito su uno dei sistemi operativi multiutente che è in grado di riconoscere, viene creata la copia di alcuni file di configurazione. Questi file di configurazione utente vengono memorizzati in una cartella che appartiene a un utente.

Se reinstallate o aggiornate Dreamweaver, Dreamweaver esegue automaticamente la copia di backup dei file di configurazione utente esistenti; pertanto, se avete personalizzato tali file manualmente, potete sempre accedere alle modifiche apportate.

Visualizzazione di documenti a schede (solo Mac)

Potete visualizzare più documenti in un’unica finestra del documento mediante schede che identificano ogni documento. Potete inoltre visualizzarli all’interno di un’area di lavoro mobile, in cui ogni documento viene visualizzato in una finestra propria.

Aprire un documento a schede in una finestra distinta

Tenete premuto il tasto Ctrl mentre fate clic sulla scheda e selezionate Sposta nella nuova finestra dal menu di scelta rapida.

Modificare l’impostazione predefinita per i documenti a schede

1. Selezionate Dreamweaver > Preferenze, quindi selezionate la categoria Generali.
2. Selezionate o deselezionate Apri documenti in schede, quindi fate clic su OK.

Quando modificate le preferenze, la visualizzazione dei documenti già aperti rimane inalterata, I documenti aperti dopo che è stata selezionata una nuova preferenza vengono tuttavia visualizzati in base alla preferenza selezionata.

La schermata di benvenuto viene visualizzata all’avvio di Dreamweaver e quando non ci sono documenti aperti. Potete scegliere di nascondere la schermata di benvenuto e di visualizzarla, se necessario, in seguito. Quando la schermata di benvenuto è nascosta e non vi sono documenti aperti, viene visualizzata la finestra del documento vuota.

Pannelli comuni di Dreamweaver

In Dreamweaver sono disponibili diversi pannelli. Alcuni dei pannelli utilizzati con maggior frequenza sono descritti di seguito.

Panoramica sul pannello Inserisci

Il pannello Inserisci (Finestra > Inserisci) contiene una serie di pulsanti che consentono di creare e inserire oggetti, quali le tabelle, le immagini e i collegamenti. I pulsanti sono organizzati in diverse categorie, che potete alternare selezionando la categoria desiderata dall’elenco a discesa in alto.

Alcune categorie dispongono di pulsanti con menu a comparsa. Quando selezionate un’opzione da un menu a comparsa, l’opzione diventa l’azione predefinita del pulsante. Se, ad esempio, selezionate Interruzione riga dal menu a comparsa del pulsante Carattere, la volta successiva che fate clic sul pulsante Carattere, Dreamweaver inserisce un’interruzione di riga. Ogni volta che selezionate una nuova opzione dal menu a comparsa, l’azione predefinita del pulsante cambia.

Il pannello Inserisci è organizzato nelle categorie seguenti:

Consente di creare e inserire gli elementi HTML utilizzati più comunemente, come i tag div e oggetti quali immagini e tabelle.

Contiene i pulsanti per la creazione e l’inserimento di elementi modulo, ad esempio ricerca, mese e password.

Consente di salvare il documento come modello e contrassegnare aree specifiche come modificabili, opzionali, ripetute o opzionali modificabili.

Contiene i componenti Bootstrap per fornire navigazione, contenitori, menu a discesa e altro da utilizzare nei progetti reattivi.

Contiene i pulsanti per realizzare siti che utilizzano jQuery Mobile.

Consente di inserire elementi di interfaccia jQuery quali pannelli a soffietto, cursori e pulsanti.

Consente di raggruppare e organizzare i pulsanti del pannello Inserisci più utilizzati in un’unica area.

Inserisci oggetto

Per inserire un oggetto utilizzando il pannello Inserisci:

Modificare le preferenze del pannello Inserisci

Aggiungere, eliminare o gestire gli elementi nella categoria Preferiti del pannello Inserisci

Panoramica sul pannello File

Utilizzate il pannello File per visualizzare e gestire i file nel vostro sito Dreamweaver.

Potete utilizzare il pannello File per visualizzare file e cartelle, verificare se sono associati o meno a un sito di Dreamweaver ed eseguire operazioni standard di gestione dei file quali l’apertura e lo spostamento di file.

Il pannello File semplifica inoltre la gestione e il trasferimento di file da/a un server remoto. 

Per ulteriori informazioni su tutte le operazione che possono essere eseguite con il pannello File, consultate Gestire file e cartelle.

CSS Designer

Il pannello CSS Designer (Finestra > CSS Designer) è una finestra di ispezione Proprietà per CSS che consente di creare “visivamente” stili e file CSS e di impostarne le proprietà, nonché di definire media query.

Potete usare la combinazione di tasti Ctrl/Cmd + Z per annullare o Ctrl/Cmd + Y per ripetere tutte le azioni eseguite in CSS Designer. Le modifiche vengono riportate automaticamente nella vista Dal vivo e anche il file CSS corrispondente viene aggiornato. Per segnalare che il file correlato è stato modificato, la scheda del file interessato viene evidenziata per qualche istante (circa 8 secondi).

Il pannello CSS Designer è costituito dai seguenti riquadri e opzioni:

Tutto Elenca tutto il codice CSS, le media query e i selettori associati al documento corrente. Potete filtrare per le regole CSS richieste e modificare le proprietà. Potete anche utilizzare questa modalità per iniziare a creare selettori o media query.

Questa modalità non distingue la selezione. Questo significa che, quando selezionate un elemento nella pagina, il selettore, la media query o il codice CSS associato non è evidenziato in CSS Designer.

Corrente Elenca tutti gli stili calcolati per qualsiasi elemento selezionato nella vista Progettazione o Dal vivo del documento corrente. Quando utilizzate questa modalità per un file CSS nella vista Codice, tutte le proprietà del selettore attivo sono visualizzate.

Questa modalità è sensibile al contesto. Utilizzate questa opzione per modificare le proprietà dei selettori associati con gli elementi selezionati nel documento.

Origini Elenca tutti i fogli di stile CSS associati al documento. Utilizzando questo pannello, potete creare e associare un CSS al documento, oppure definire stili nel documento.

@Oggetto multimediale Elenca tutte le media query presenti nell’origine selezionata nel riquadro Origini. Se non selezionate un CSS specifico, nel riquadro sono elencate tutte le media query associate al documento.

Selettori Elenca tutti i selettori presenti nell’origine selezionata nel riquadro Origini. Se selezionate anche una media query, il riquadro limita l’elenco dei selettori alla media query selezionata. Se non selezionate né un CSS né una media query, il riquadro visualizza tutti i selettori del documento.

Quando selezionate Globale nel riquadro @Oggetto multimediale, vengono visualizzati tutti i selettori che non sono inclusi in una media query dell’origine selezionata.

Proprietà Visualizza le proprietà che potete impostare per il selettore specificato. Per ulteriori informazioni, consultate Impostare le proprietà.

Se comprimete o espandete i riquadri in CSS Designer, le dimensioni dei riquadri vengono memorizzate all’interno di una sessione. I riquadri Origini e Oggetto multimediale si attengono alle dimensioni personalizzate finché queste non vengono nuovamente modificate.

Nota: quando selezionate un elemento di pagina, il selettore più specifico viene selezionato nel riquadro Selettori. Per visualizzare le proprietà di un determinato selettore, fate clic sul suo nome nel riquadro.

Per visualizzare tutti i selettori, potete scegliere Tutte le origini nel riquadro Origini. Per visualizzare i selettori dell’origine selezionata che non appartengono a nessuna media query, fate clic su Globale nel riquadro @Oggetto multimediale.

Panoramica sui riferimenti visivi

Dreamweaver fornisce diversi tipi di riferimenti visivi utili per la progettazione dei documenti e per la previsione approssimativa del loro aspetto nei browser. Potete:

• Bloccare istantaneamente la finestra del documento su una dimensione desiderata per verificare la collocazione dei vari elementi rispetto alla pagina.

• Utilizzare un’immagine di ricalco come sfondo della pagina per riprodurre una struttura creata in un’applicazione grafica come Adobe® Photoshop® o Adobe® Fireworks®.

• Utilizzare i righelli e le guide come riferimento visivo per posizionare e ridimensionare con precisione gli elementi di pagina.

• Utilizzare la griglia per posizionare e ridimensionare con precisione gli elementi con posizione assoluta (elementi PA).

  Le linee che compongono la griglia facilitano l’allineamento degli elementi PA; inoltre, se la funzione di aggancio è attivata, gli elementi PA vengono automaticamente agganciati al punto più vicino della griglia quando vengono spostati o ridimensionati. Gli altri oggetti (ad esempio, le immagini e i paragrafi) non vengono agganciati alla griglia, I livelli vengono agganciati alla griglia indipendentemente dal fatto che questa sia visualizzata o nascosta.

Ingrandire e ridurre una pagina

Con Dreamweaver potete ingrandire un documento (aumentarne il livello di zoom) in modo da poter verificare la precisione dei pixel di un’immagine, selezionare più facilmente elementi di piccole dimensioni, realizzare pagine con testo piccolo o pagine di grandi dimensioni e così via.

Per ingrandire o ridurre una pagina, selezionate Visualizza > Opzioni vista Progettazione > Ingrandimento e scegliete una delle opzioni di ingrandimento disponibili.

Potete scegliere tra diverse opzioni di ingrandimento. Potete scegliere:

• Adatta selezione: selezionate un oggetto o del testo, quindi scegliete questa opzione per riempire la finestra del documento con la selezione.
• Adatta tutto: riempie la finestra del documento con un’intera pagina.
• Adatta larghezza: riempie la finestra del documento con la larghezza completa di una pagina.

Impostare le preferenze generali di Dreamweaver

Impostare le preferenze caratteri per i documenti in Dreamweaver

La codifica di un documento determina il modo in cui esso appare all’interno di un browser. Le preferenze di carattere di Dreamweaver permettono di vedere una determinata codifica nel carattere e nelle dimensioni preferite. Tuttavia, i caratteri selezionati nella finestra di dialogo Preferenze caratteri influiscono solo sul modo in cui i caratteri vengono visualizzati in Dreamweaver e non sull’aspetto del documento nel browser di un visitatore. Per modificare il modo in cui i caratteri vengono visualizzati in un browser, dovete modificare il testo nella finestra di ispezione Proprietà o applicare una regola CSS.

Per ulteriori informazioni sull’impostazione della codifica predefinita dei nuovi documenti, consultate Creazione e apertura dei documenti.

Personalizzare i colori di evidenziazione di Dreamweaver

Utilizzate le preferenze Evidenziazione per personalizzare i colori che identificano le regioni dei modelli, le voci di libreria, i tag di terze parti, gli elementi di layout e il codice in Dreamweaver.