Aprite il documento richiesto, quindi aprite il pannello DOM selezionando Finestra > DOM.
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.
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.
Aprite il documento richiesto, quindi aprite il pannello DOM selezionando Finestra > DOM.
Passate alla vista Dal vivo e fate clic sull'elemento che desiderate esaminare o modificare.
In alternativa, potete selezionare un elemento HTML nel pannello DOM. Quando fate clic su un elemento qualsiasi nel pannello DOM:
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.
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:
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.
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:
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:
Quando inserite dei tag utilizzando il pannello DOM, vengono inseriti anche un testo predefinito (segnaposto) e gli attributi necessari per i tag:
Accedi al tuo account