Selezionare e visualizzare gli elementi nella finestra del documento

Ultimo aggiornamento il 20 dic 2021

Selezionare e visualizzare gli elementi in Dreamweaver, visualizzare o nascondere le icone del marcatore per gli elementi invisibili e impostare le preferenze degli elementi invisibili.

Per selezionare un elemento nella vista Progettazione della finestra del documento, fate clic su di esso. Se un elemento è invisibile, per poterlo selezionare è necessario visualizzarlo.

Alcuni elementi di codice HTML non hanno una rappresentazione visibile in un browser. Un esempio sono i tag comment, che non vengono visualizzati nei browser. Tuttavia, quando create una pagina può risultare utile la possibilità di selezionare, modificare, spostare ed eliminare gli elementi invisibili.

Dreamweaver consente di specificare se devono essere visualizzate delle icone che contrassegnino la posizione degli elementi invisibili nella vista Progettazione della finestra del documento. Per specificare quali indicatori devono essere visualizzati, potete impostare le opzioni delle preferenze Elementi invisibili. Ad esempio, potete decidere di impostare come visibili gli ancoraggi con nome ma non le interruzioni di riga.

È possibile creare alcuni elementi invisibili (ad esempio commenti e ancoraggio con nome) e modificarli utilizzando la finestra di dialogo Preferenze > Elementi invisibili.

Selezionare gli elementi

  • Per selezionare un elemento visibile nella finestra del documento, fate clic su di esso o trascinate il puntatore sull'elemento.

  • Per selezionare un elemento invisibile, selezionate l'opzione Visualizza > Opzioni vista Progettazione > Riferimenti visivi > Elementi invisibili (se non è già selezionata) e fate clic sull'indicatore dell'elemento nella finestra del documento.

    Sulla pagina, alcuni oggetti occupano una posizione diversa da quella in cui è stato inserito il codice corrispondente. Ad esempio, nella vista Progettazione un elemento PA (con posizione assoluta) può trovarsi in un punto qualunque della pagina, mentre nella vista Codice il codice che lo definisce occupa una posizione fissa. Quando la visualizzazione degli elementi invisibili è attivata, Dreamweaver visualizza gli indicatori nella finestra del documento per mostrare la posizione del codice degli elementi invisibili. Se selezionate un indicatore, viene selezionato l'intero elemento (ad esempio, l'indicatore di un elemento PA seleziona l'intero elemento PA).

  • Per selezionare un tag completo (compreso l'eventuale contenuto), fate clic sul selettore di tag situato nella parte inferiore sinistra della finestra del documento. Il selettore di tag viene visualizzato sia in vista Progettazione che in vista Codice. Il selettore di tag visualizza sempre i tag che contengono la selezione o il punto di inserimento corrente. Il tag più a sinistra è il tag più esterno che contiene la selezione o il punto di inserimento corrente. Il tag successivo è contenuto in tale tag esterno, e così via. Il tag più a destra è il tag più interno che contiene la selezione o il punto di inserimento corrente.

Visualizzare codice HTML

Per visualizzare il codice HTML associato al testo o all'oggetto selezionato, effettuate una delle seguenti operazioni:

  • Nella barra degli strumenti Documento, fate clic su Codice.

  • Selezionate Visualizza > Codice.

  • Selezionate l'opzione Visualizza > Dividi > Codice-Dal vivo, Codice-Progettazione o Codice-Codice.

  • Selezionate Finestra > Finestra di ispezione Codice.

    Quando selezionate un elemento in uno degli editor di codice (la vista Codice o la finestra di ispezione Codice), l'elemento viene generalmente selezionato anche nella finestra del documento. Può essere necessario sincronizzare le due viste per fare apparire la selezione.

Mostra o nascondi le icone dei marcatori per gli elementi invisibili

Selezionate Visualizza > Opzioni vista Progettazione > Riferimenti visivi > Elementi invisibili.

Nota

La visualizzazione degli elementi invisibili può modificare leggermente il layout di una pagina, spostando altri elementi di alcuni px, quindi per un layout di precisione, nascondi gli elementi invisibili.

Impostare le preferenze Elementi invisibili

Usa le preferenze Elementi invisibili per specificare quali tipi di elementi sono visibili quando selezioni Visualizza > Riferimenti visivi > Elementi invisibili.

Seleziona Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh), quindi fai clic su Elementi invisibili.
Seleziona quali elementi devono essere resi visibili e fai clic su OK.

Un segno di spunta accanto al nome dell'elemento nella finestra di dialogo indica che l'elemento è visibile quando viene selezionato Visualizza > Riferimenti visivi > Elementi invisibili.

Ancoraggi con nome

Visualizza un'icona che contrassegna la posizione di ciascun ancoraggio denominato (a name = "") nel documento.

Script

Visualizza un'icona che contrassegna la posizione del codice JavaScript o VBScript nel corpo del documento. Seleziona l'icona per modificare lo Script nella finestra di ispezione Proprietà o per collegare a un file di Script esterno.

Commenti

Visualizza un'icona che contrassegna la posizione dei commenti HTML. Seleziona l'icona per visualizzare il commento nella finestra di ispezione Proprietà.

Interruzioni di riga

Visualizza un'icona che contrassegna la posizione di ogni interruzione di riga (BR).Per impostazione predefinita, questa opzione è deselezionata.

Mappe immagine client-side

Visualizza un'icona che contrassegna la posizione di ogni mappa immagine lato client nel documento.

Stili incorporati

Visualizza un'icona che mostra la posizione degli stili CSS incorporati nella sezione corpo del documento.Se gli stili CSS sono posizionati nella sezione intestazione di un documento, non vengono visualizzati nella finestra Documento.

Campi modulo nascosti

Visualizza un'icona che contrassegna la posizione dei campi modulo che hanno l'attributo type impostato su "hidden".

Delimitatore modulo

Visualizza un bordo attorno a un modulo in modo da poter vedere dove inserire gli elementi del modulo.Il bordo mostra l'estensione del tag form, quindi tutti gli elementi del modulo all'interno di quel bordo sono racchiusi correttamente nei tag form.

Punti di ancoraggio per elementi PA

Visualizza un'icona che contrassegna la posizione del codice che definisce un elemento AP.L'elemento PA vero e proprio può trovarsi in qualsiasi punto della pagina. (Gli elementi AP non sono elementi invisibili; solo il codice che definisce l'elemento AP è invisibile.)Seleziona l'icona per selezionare l'elemento AP; puoi quindi visualizzare i contenuti dell'elemento AP anche se l'elemento AP è contrassegnato come nascosto.

Punti di ancoraggio per elementi allineati

Visualizza un'icona che mostra la posizione del codice HTML per gli elementi che accettano l'attributo align.Questi includono immagini, tabelle, oggetti ActiveX, plug‑in e applet. In alcuni casi, il codice per l'elemento può essere separato dall'oggetto visibile.

Tag server visivi

Visualizza la posizione dei tag di markup Server (come i tag Active Server Pages e i tag ColdFusion) il cui contenuto non può essere visualizzato nella finestra Documento. Questi tag generano di solito tag HTML quando vengono elaborati da un server.Ad esempio, un tag <CFGRAPH> genera una tabella HTML quando viene elaborato da un server ColdFusion.Dreamweaver rappresenta il tag con un elemento invisibile ColdFusion poiché Dreamweaver non può determinare l'output dinamico finale della pagina.

Tag server non visivi

Mostra la posizione dei tag di markup del server (come i tag Active Server Pages e i tag ColdFusion) il cui contenuto non può essere visualizzato nella finestra del documento.Questi tag sono di solito tag di configurazione, elaborazione o logica (ad esempio, <CFSET>, <CFWDDX> e <CFXML>) che non generano tag HTML.

Visualizzazione CSS: No

Mostra un'icona che indica la posizione del contenuto nascosto dalla proprietà display:none nel foglio di stile collegato o incorporato.

Mostra testo dinamico come

Mostra qualsiasi testo dinamico sulla pagina nel formato {Recordset:Field} per impostazione predefinita. Se la lunghezza di questi valori è sufficientemente lunga da distorcere la formattazione della pagina, puoi cambiare la visualizzazione in {} invece.

Server-side include

Visualizza il contenuto reale di ciascun file di server-side include.