Aprite il documento richiesto, quindi aprite il pannello DOM selezionando Finestra > DOM.
Ultimo aggiornamento il
3 mag 2021
- Guida utente di Dreamweaver
- Introduzione
- Dreamweaver e Creative Cloud
- Aree di lavoro e viste di Dreamweaver
- Configurare i siti
- Siti di Dreamweaver
- Configurare una versione locale del sito
- Collegamento a un server di pubblicazione
- Configurare un server di prova
- Importare ed esportare le impostazioni di un sito Dreamweaver
- Passaggio di siti Web esistenti da un server remoto alla cartella principale del sito locale
- Funzioni di accessibilità in Dreamweaver
- Impostazioni avanzate
- Impostazione delle preferenze del sito per il trasferimento dei file
- Specificare le Impostazioni del server proxy in Dreamweaver
- Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
- Utilizzo di Git in Dreamweaver
- Gestire i file
- Creare e aprire file
- Gestire file e cartelle
- Scaricamento e caricamento dei file da e verso il server
- Depositare e ritirare i file
- Sincronizzare i file
- Confrontare file per verificare le differenze
- Applicare la maschera file a file e cartelle del sito Dreamweaver
- Attivare le Design Notes per i siti di Dreamweaver
- Impedire un potenziale attacco exploit del Gatekeeper
- Layout e progettazione
- Usare i riferimenti visivi per il layout
- Informazioni sull'utilizzo di CSS per creare il layout della pagina
- Progettazione di siti Web reattivi con Bootstrap
- Creazione e utilizzo di media query in Dreamweaver
- Presentare il contenuto mediante le tabelle
- Colori
- Responsive design con i layout a griglia fluida
- Extract in Dreamweaver
- CSS
- Nozioni sui fogli di stile CSS
- Creazione del layout delle pagine con CSS Designer
- Utilizzare i preprocessori CSS in Dreamweaver
- Impostare le preferenze di stile CSS in Dreamweaver
- Spostare le regole CSS in Dreamweaver
- Convertire CSS in linea in una regola CSS in Dreamweaver
- Utilizzare i tag div
- Applicare sfumature allo sfondo
- Creare e modificare effetti di transizione CSS3 in Dreamweaver
- Formattazione del codice
- Contenuto e risorse delle pagine
- Impostare le proprietà di pagina
- Impostare le proprietà dei collegamenti CSS e le proprietà dei collegamenti CSS
- Lavorare con il testo
- Ricercare e sostituire testo, tag e attributi
- Pannello DOM
- Modifica nella vista Dal vivo
- Codifica dei documenti in Dreamweaver
- Selezionare e visualizzare gli elementi nella finestra del documento
- Definire le proprietà del testo nella finestra di ispezione Proprietà
- Eseguire il controllo ortografico di una pagina Web
- Utilizzo dei filetti orizzontali in Dreamweaver
- Aggiungere e modificare le combinazioni di caratteri in Dreamweaver
- Operazioni con le risorse
- Inserire e aggiornare le date in Dreamweaver
- Creare e gestire le risorse preferite in Dreamweaver
- Inserire e modificare le immagini in Dreamweaver
- Aggiungere oggetti multimediali
- Aggiunta di video in Dreamweaver
- Inserire video HTML5
- Inserire file SWF
- Aggiungere effetti audio
- Inserire l'audio HTML5 in Dreamweaver
- Operazioni con le voci di libreria
- Utilizzare testo in arabo e in ebraico in Dreamweaver
- Collegamenti e navigazione
- Widget ed effetti jQuery
- Programmazione dei siti Web
- Programmazione in Dreamweaver
- Ambiente di codifica in Dreamweaver
- Impostare le preferenze di codifica
- Personalizzare la colorazione del codice
- Scrivere e modificare codice
- Suggerimenti sul codice e completamento del codice
- Comprimere ed espandere codice
- Riutilizzo del codice con gli snippet
- Comando Lint
- Ottimizzare il codice
- Modificare il codice nella vista Progettazione.
- Utilizzo del contenuto dell'intestazione delle pagine
- Inserimento di server-side include in Dreamweaver
- Uso delle librerie di tag in Dreamweaver
- Importazione di tag personalizzati in Dreamweaver
- Utilizzare i comportamenti JavaScript (istruzioni generali)
- Applicare comportamenti JavaScript incorporati
- Informazioni su XML e XSLT
- Eseguire trasformazioni XSL server-side in Dreamweaver
- Esecuzione di trasformazioni XSL client-side in Dreamweaver
- Aggiungere entità di carattere per XSLT in Dreamweaver
- Formattazione del codice
- Flussi di lavoro di interazione con altri prodotti
- Installazione e uso delle estensioni in Dreamweaver
- Aggiornamenti in app in Dreamweaver
- Inserire documenti Microsoft Office in Dreamweaver (solo Windows)
- Operazioni con Fireworks e Dreamweaver
- Modificare il contenuto nei siti Dreamweaver mediante Contribute
- Integrazione tra Dreamweaver e Business Catalyst
- Creare campagne e-mail personalizzate
- Modelli
- Informazioni sui modelli di Dreamweaver
- Riconoscere i modelli e i documenti basati sui modelli
- Creare un modello di Dreamweaver
- Creare aree modificabili nei modelli
- Creare aree e tabelle ripetute nei modelli in Dreamweaver
- Usare le aree opzionali nei modelli
- Definire attributi di tag modificabili in Dreamweaver
- Creare modelli nidificati in Dreamweaver
- Modificare, aggiornare ed eliminare modelli
- Esportare e importare contenuti xml in Dreamweaver
- Applicare o rimuovere un modello da un documento esistente
- Modificare il contenuto nei modelli di Dreamweaver
- Regole di sintassi per i tag di modello in Dreamweaver
- Impostare le preferenze di evidenziazione per le aree dei modelli
- Vantaggi dell'uso dei modelli in Dreamweaver
- Dispositivi mobili e multischermo
- Siti, pagine e moduli Web dinamici
- Applicazioni Web
- Configurare il computer per lo sviluppo di applicazioni
- Risoluzione dei problemi relativi alle connessioni di database
- Rimozione di script di connessione in Dreamweaver
- Progettare pagine dinamiche
- Panoramica sulle origini di contenuto dinamico
- Definire le origini di contenuto dinamico
- Aggiungere contenuto dinamico alle pagine
- Modifica del contenuto dinamico in Dreamweaver
- Visualizzare i record di database
- Fornire dati dal vivo e risoluzione dei problemi in Dreamweaver
- Aggiungere comportamenti server personalizzati in Dreamweaver
- Creazione di moduli con Dreamweaver
- Usare moduli per raccogliere informazioni dagli utenti
- Creare e attivare i moduli ColdFusion in Dreamweaver
- Creare moduli Web
- Supporto HTML5 avanzato per gli elementi modulo
- Sviluppare un modulo con Dreamweaver
- Sviluppo visivo delle applicazioni
- Creare pagine principali e di dettaglio in Dreamweaver
- Creare pagine di ricerca e di risultati
- Creare una pagina di inserimento record
- Costruire una pagine di aggiornamento record in Dreamweaver
- Costruzione di pagine di eliminazione record in Dreamweaver
- Utilizzare comandi ASP per modificare un database in Dreamweaver
- Creare una pagina di registrazione
- Creare una pagina di login
- Creare una pagina accessibile solo agli utenti autorizzati
- Protezione delle cartelle in ColdFusion utilizzando Dreamweaver
- Utilizzo di componenti ColdFusion in Dreamweaver
- Verifica, anteprima e pubblicazione dei siti Web
- Risoluzione dei problemi
Usare il pannello DOM per modificare la struttura HTML mappando gli elementi della vista Dal vivo o i selettori applicati in CSS Designer al rispettivo codice HTML.
Il pannello DOM esegue il rendering di una struttura HTML interattiva sia per il contenuto statico che per quello dinamico. Questa vista consente di mappare visivamente gli elementi nella vista Dal vivo con il rispettivo codice HTML e con i selettori applicati in CSS Designer. Potete anche apportare modifiche alla struttura HTML nel pannello DOM e visualizzarne istantaneamente l'effetto nella vista Dal vivo.
Per aprire il pannello DOM, selezionate Finestra > DOM. Per aprire il pannello DOM, potete anche usare la combinazione di tasti Ctrl + / (Win) o Cmd + / (Mac).
Quando trascinate gli elementi per incollarli direttamente nella vista Dal vivo, l'icona </> appare prima del rilascio dell'elemento. Potete fare clic su questa icona per aprire il pannello DOM e inserire l'elemento nella posizione richiesta all'interno della struttura del documento. Per ulteriori informazioni, consultate Inserire elementi direttamente nella vista Dal vivo.
Con la vista Codice o Progettazione, il pannello DOM visualizza solo gli elementi statici, mentre con la vista Dal vivo visualizza sia gli elementi statici che dinamici.
Nei documenti a griglia fluida, il pannello DOM consente solo di visualizzare la struttura DOM HTML e non consente di modificare la struttura HTML.
Nota:
nel pannello DOM potete modificare solo il contenuto statico. Elementi dinamici o di sola lettura vengono visualizzati in una tonalità più scura di grigio.
Potete spostare il pannello DOM e collocarlo nella posizione a voi più comoda nell'interfaccia utente. Potete inoltre ancorare il pannello insieme ad altri pannelli.
Come utilizzare il pannello DOM
-
-
Passate alla vista Dal vivo e fate clic sull'elemento che desiderate esaminare o modificare.
- Il codice HTML dell'elemento selezionato viene evidenziato nel pannello DOM.
- Il selettore applicato appare evidenziato in CSS Designer.
- Il codice corrispondente viene evidenziato nella vista Codice.
- Il tag interessato viene evidenziato (in blu) nel Selettore di tag.
In alternativa, potete selezionare un elemento HTML nel pannello DOM. Quando fate clic su un elemento qualsiasi nel pannello DOM:
- La vista Dal vivo esegue uno scorrimento fino all'elemento corrispondente.
- Se la vista Codice è aperta, viene fatta scorrere fino al codice che corrisponde all' elemento.
- Il pannello CSS Designer (riquadro Selettori) scorre fino al selettore corrispondente più vicino (l'effetto è analogo a quando si fa clic sull'elemento nella vista Dal vivo).
- Il tag viene evidenziato nel Selettore di tag.
Questa sincronizzazione tra viste diverse e CSS Designer consente di avere subito sott'occhio il codice HTML e gli stili associati all'elemento.
-
Continuate a modificare l'elemento nel modo richiesto (modifica HTML o CSS). Per informazioni sull'utilizzo del pannello di DOM per modificare il codice HTML, vedete Modificare la struttura HTML con il pannello DOM. Per informazioni su CSS Designer, consultate Creazione del layout delle pagine con CSS Designer.
Modificare la struttura HTML con il pannello DOM
L'elemento attualmente selezionato sulla pagina viene evidenziato nel pannello DOM. Potete accedere a qualsiasi nodo o elemento utilizzando i tasti freccia.
Scelte rapide da tastiera:
- Duplica - Ctrl + D (Win) / Cmd + D (Mac)
- Elimina - Canc o Backspace
- Copia - Ctrl + C (Win) / Cmd + C (Mac)
- Incolla - Ctrl + V (Win) / Cmd + V (Mac)
- Annulla - Ctrl + Z (Win) / Cmd + Z (Mac)
- Ripeti - Ctrl + Y (Win) / Cmd + Y (Mac)
- Per selezionare un elemento o un nodo, fate clic su di esso. Per espandere o comprimere un elemento o un nodo, fate clic sul tag HTML o fate doppio clic sul selettore adiacente al tag.
- Per duplicare un elemento o un nodo, fate clic su di esso con il pulsante destro del mouse, quindi fate clic su Duplica. Quando duplicate un elemento a cui è associato un ID, l'ID viene incrementato per il nuovo elemento (duplicato).
- Per copiare un elemento o un nodo, fate clic su di esso con il pulsante destro del mouse, quindi fate clic su Copia. Se avete copiato un elemento che include elementi secondari, questi vengono copiati a loro volta.
- Per incollare un elemento o un nodo, fate clic sull'elemento o sul nodo sotto il quale volete nidificare gli elementi copiati. Quindi, fate clic con il pulsante destro del mouse sull'elemento o nodo desiderato e infine fate clic su Incolla.
- Per incollare l'elemento copiato come secondario di un determinato elemento o un nodo, fate clic con il pulsante destro del mouse sull'elemento o sul nodo (superiore) e quindi fare clic su Incolla come secondario.
- Per spostare o ridisporre gli elementi, trascinateli nella posizione desiderata nel pannello DOM.
Una linea verde indica la posizione in cui l'elemento trascinato verrà posizionato. Se rilasciate l'elemento sopra l'elemento evidenziato in grigio (elemento di riferimento), l'elemento rilasciato viene posizionato come primo elemento secondario dell'elemento di riferimento.
- Per eliminare un elemento o un nodo, fate clic su di esso con il pulsante destro del mouse, quindi fate clic su Elimina.
Potete annullare (Ctrl/Cmd + Z) o ripetere (Ctrl/Cmd + Y) le operazioni che eseguite nel pannello DOM.
Per eseguire le operazioni di modifica indicate sopra su più elementi, selezionate gli elementi nel pannello DOM:
- Fate clic sugli elementi richiesti tenendo premuto il tasto Maiusc per selezionare più voci contigue
- Fate clic sugli elementi tenendo premuto il tasto Ctrl per selezionare più voci non contigue
Nota:
in genere, quando si modifica una pagina, il pulsante Aggiorna della barra degli strumenti Documento diventa Interrompi, per indicare che è in corso il caricamento della pagina aggiornata. Al termine del caricamento, il pulsante Aggiorna appare di nuovo per indicare che la pagina è stata caricata completamente.
Importante: se la pagina contiene codice JavaScript, il menu di scelta rapida del pannello DOM viene visualizzato per qualche istante e poi diventa non disponibile. Per utilizzare il menu di scelta rapida, nascondete le visualizzazioni della vista Dal vivo (Opzioni vista Dal vivo > Nasconde le visualizzazioni vista Dal vivo), quindi disattivate JavaScript (Opzioni vista Dal vivo > Disattiva JavaScript).
Modificare tag, classi e ID nel pannello DOM
È possibile modificare tag, classi e ID selezionandoli con un doppio clic nel pannello DOM. Potete anche aggiungere classi o ID supplementari separandoli con uno spazio. Per i tag che non sono associati a una classe o un ID, potete digitare il nome della classe o dell'ID dopo aver fatto doppio clic sul tag.
I suggerimenti per il codice vengono visualizzati quando iniziate a digitare il nome del tag, della classe o dell'ID. Per limitare i suggerimenti alle classi, iniziate a digitare con un punto. Per visualizzare solo gli ID nei suggerimenti, iniziate a digitare con un cancelletto (#).
Inserire elementi nel pannello DOM
Ora potete inserire nuovi elementi in una pagina Web utilizzando il pannello DOM in uno dei modi seguenti:
- Premete la barra spaziatrice oppure fate clic sull'icona di inserimento accanto all'elemento richiesto nel pannello DOM. Nella finestra a comparsa visualizzata, fate clic su una delle opzioni. Per racchiudere più elementi in un tag, selezionateli e scegliete Applica tag dalle opzioni di inserimento.
- Fate clic sull'elemento richiesto nel pannello Inserisci e trascinatelo nel pannello DOM. Vengono visualizzate le guide dal vivo per indicare dove verrà inserito l'elemento. Rilasciate l'elemento nella posizione richiesta.
Quando inserite dei tag utilizzando il pannello DOM, vengono inseriti anche un testo predefinito (segnaposto) e gli attributi necessari per i tag:
- Quando inserite uno qualsiasi dei seguenti tag e salvate le modifiche, viene inserito un testo predefinito nelle viste Codice, Dal vivo e Progettazione:
div, header, nav, aside, article, section, footer, h1-h6 e hgroup - Quando inserite un tag table e salvate le modifiche, viene inserita una tabella 3X3.
- Quando inserite un tag embed o img e salvate le modifiche, viene visualizzata la finestra di dialogo Seleziona file con la richiesta di selezionare un file appropriato.
- Quando inserite un tag meta e salvate le modifiche, viene aggiunto il codice seguente nella vista Codice: <meta name="" content="">
- Quando inserite un tag figure e salvate le modifiche, viene inserito un tag figure con l'elemento figcaption nidificato.
- Quando inserite un tag ul o ol e salvate le modifiche, viene inserito un tag ol/ul con il tag li nidificato.