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.
-
- 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.
-
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.
L'elemento attualmente selezionato sulla pagina viene evidenziato nel pannello DOM. Potete accedere a qualsiasi nodo o elemento utilizzando i tasti freccia.
- 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).
È 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 (#).
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.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.