Modifica nella vista Dal vivo

La vista Dal vivo utilizza un motore di rendering basato su chromium per fare in modo che il contenuto abbia lo stesso aspetto in Dreamweaver e nei browser Web più diffusi. Durante lo sviluppo, potete passare alla vista Dal vivo per visualizzare rapidamente un’anteprima della pagina. Inoltre, per risparmiare tempo evitando di alternare tra viste diverse (Codice e Progettazione), potete modificare gli elementi HTML direttamente nella vista Dal vivo.

La vista Dal vivo si aggiorna istantaneamente per mostrare le modifiche apportate alla pagina.

È possibile utilizzare i componenti seguenti per modificare la pagina nella vista Dal vivo:

• Pannello DOM: (Finestra > DOM) mostra la struttura HTML del documento e consente di copiare/incollare, duplicare, eliminare e riordinare gli elementi nella vista. Per ulteriori informazioni, vedete Pannello DOM.
• Visualizzazione elemento: appare sopra l’elemento HTML selezionato nella vista Dal vivo. La Visualizzazione elemento consente di associare gli elementi HTML con classi e ID. Per ulteriori informazioni, vedete Associare elementi HTML con classi e ID.
• Finestra di ispezione Proprietà rapida: viene visualizzata quando fate clic sull’icona del panino nella Visualizzazione elemento oppure selezionate un testo. La finestra di ispezione Proprietà rapida consente di modificare gli attributi delle immagini e di formattare il testo nella vista Dal vivo. Per ulteriori informazioni, vedete Finestra di ispezione Proprietà rapida.
• Finestra di ispezione Proprietà della vista Dal vivo: viene visualizzata sopra la finestra del documento e consente di modificare varie proprietà HTML e CSS nella vista Dal vivo. Per ulteriori informazioni, vedete Finestra di ispezione Proprietà della vista Dal vivo.
• Pannello Inserisci: (Finestra > Inserisci) consente di trascinare elementi dal pannello direttamente nella vista Dal vivo. Per ulteriori informazioni, vedete Inserire elementi direttamente nella vista Dal vivo.

Suggerimenti:

• Se la vista Dal vivo diventa vuota mentre modificate la pagina, disattivatela e poi riattivatela.
• Se non vedete le modifiche aggiornate sulla pagina, fate clic sul pulsante Aggiorna nella vista Dal vivo.

I contenuti che vengono riprodotti in modo dinamico mediante database o JavaScript e le aree non modificabili dei modelli non possono essere modificati nella vista Dal vivo. Quando fate clic su tali elementi nella vista Dal vivo, intorno ad essi appare un bordo grigio per indicare che non possono essere modificati.

Con la Visualizzazione elemento, è possibile associare elementi HTML con classi e ID direttamente nella vista Dal vivo. La Visualizzazione elemento suggerisce le classi e gli identificatori disponibili per aiutarvi a visualizzare e scegliere rapidamente l’opzione richiesta. 

Visualizzazione elemento consente anche di formattare le tabelle. Per ulteriori informazioni, vedete il collegamento.

Associare elementi HTML con classi e ID

Fate clic sull’elemento richiesto nella vista Dal vivo. Viene visualizzata la Visualizzazione elemento contenente la classe e l’ID attualmente associati.

Quando è visualizzata la vista Dal vivo, potete anche fare clic sull’elemento HTML nel pannello DOM per accedere alla sua Visualizzazione elemento.

• Per dissociare l’elemento HTML da una classe o da un ID, fate clic sulla “x” accanto alla classe o all’ID.
• Per cambiare la classe o l’ID associato all’elemento HTML, fate clic nella casella. Viene visualizzato un elenco delle classi e degli ID disponibili. Fate clic sull’opzione richiesta.
• Per aggiungere una classe o un ID e applicarlo all’elemento, fate clic sul segno “+”, quindi digitate il nome. Per salvare le modifiche, fate clic su "+" o premete Invio.

Potete quindi utilizzare CSS Designer per definire un selettore che include questa classe o ID. Per ulteriori informazioni, consultate Creazione del layout delle pagine con CSS Designer.

Finestra di ispezione Proprietà rapida

Finestra di ispezione Proprietà rapida per immagini

La finestra di ispezione Proprietà rapida è visualizzata direttamente sopra gli elementi selezionati nella vista Dal vivo. Utilizzando questa finestra di ispezione Proprietà, è possibile modificare attributi o formattare testo nella vista Dal vivo.

Per mostrare o nascondere la finestra di ispezione Proprietà rapida, premete Ctrl+Alt+H (Win)/Cmd+Ctrl+H (Mac).

Nei documenti Bootstrap, la finestra di ispezione Proprietà rapida comprende anche le opzioni per personalizzare le immagini.

• Ritaglia secondo forma: fare clic per ritagliare gli angoli delle immagini secondo angoli circolari o arrotondati o come immagine miniatura.
• Rendi immagine reattiva: fate clic per rendere le immagini reattive per rispondere e adatte a diverse dimensioni dello schermo.

Finestra di ispezione Proprietà rapida per testo

La finestra di ispezione Proprietà rapida per il testo nella vista Dal vivo consente di formattare il testo, farlo rientrare e inserire un collegamento ipertestuale con rapidità. La finestra di ispezione Proprietà rapida per il testo viene visualizzata quando fate clic sull’icona del panino per gli elementi di testo: h1-h6, pre e p.

• L’opzione di formattazione consente di cambiare rapidamente il tag dell’elemento in uno dei seguenti: h1-h6, p e pre. 
• L’opzione di collegamento consente di inserire un collegamento ipertestuale per l’elemento di testo. 
• Le icone per grassetto e corsivo consentono di aggiungere i tag <strong> and <em> all’elemento di testo.
• Le icone di rientro consentono di aggiungere o rimuovere il rientro del testo. Il tag <blockquote> è aggiunto o rimosso di conseguenza dal codice.

Nei documenti Bootstrap, la finestra di ispezione Proprietà rapida per il testo consente anche di allineare e trasformare gli elementi di testo.

• Allinea: consente di allineare gli elementi di testo Bootstrap a sinistra, al centro, a destra o giustificati applicando le classi corrispondenti.
• Trasforma: consente di modificare il formato maiuscolo/minuscolo del testo di un elemento applicando classi per il formato minuscolo, maiuscolo o frase normale.

Finestra di ispezione Proprietà della vista Dal vivo

La finestra di ispezione Proprietà della vista Dal vivo è la finestra di ispezione Proprietà standard disponibile sotto la finestra del documento.

La finestra di ispezione Proprietà della vista Dal vivo 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à della vista Dal vivo varia a seconda dell’elemento selezionato.

Per accedere all’Aiuto relativo a 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. 

Di seguito sono riportati gli elementi che possono essere modificati nella finestra di ispezione Proprietà della vista Dal vivo:

Modificare gli attributi HTML

Potete aggiungere, modificare o rimuovere rapidamente gli attributi HTML delle immagini direttamente nella vista Dal vivo utilizzando la finestra di ispezione Proprietà rapida.

La finestra di ispezione Proprietà rapida per le immagini viene visualizzata quando fate clic sull’icona del panino . A seconda dello spazio disponibile, la finestra di ispezione Proprietà viene visualizzata a destra, sinistra, sopra o sotto l’immagine. Potete spostare la finestra di ispezione Proprietà e collocarla nella posizione a voi più comoda. 

Per modificare gli attributi, fate clic sull’icona del panino nella finestra di ispezione Proprietà rapida. Potete modificare l’origine dell’immagine e altri attributi quali “titolo” e “alt”; le modifiche vengono applicate immediatamente. Potete anche regolare in modo simile la larghezza e l’altezza dell’immagine nella vista Dal vivo.

Le modifiche apportate vengono salvate quando effettuate una delle seguenti operazioni:

• Fate clic in qualsiasi punto fuori della finestra di ispezione Proprietà
• Premete Invio
• Premete Tab per modificare un altro attributo nella finestra di ispezione Proprietà
• Salvate il file
  

Quando le immagini vengono caricate in modo dinamico, è possibile utilizzare la finestra di ispezione Proprietà rapida dell’immagine per esaminare rapidamente gli attributi impostati per l’immagine. 

Modificare il testo direttamente nella vista Dal vivo

Ora è possibile modificare gli elementi di testo direttamente nella vista Dal vivo. Potete semplicemente fare clic sull’elemento di testo per modificarlo. Nella modalità Visualizzazione elemento, premete Invio per modificare il testo.

Il bordo arancione intorno all’elemento di testo indica che è stata attivata la modalità di modifica. 

Il punto di inserimento è posizionato dove fate clic. Per selezionare tutto il testo nell’elemento di testo, fate triplo clic sull’elemento.

I comandi Taglia, Copia/Incolla e Annulla/Ripeti sono supportati quando si modifica il testo nella vista Dal vivo. Quando incollate un testo, questo viene incollato come testo semplice.

 La funzione di sincronizzazione automatica consente di sincronizzare automaticamente le modifiche apportate nella vista Dal vivo con la vista Codice. 

Nella tabella seguente sono elencati gli scenari supportati e non supportati per la modifica del testo nella vista Dal vivo:

Formattare il testo

Ora potete modificare la formattazione del testo normale e del testo dei collegamenti ipertestuali direttamente nella vista Dal vivo. Per visualizzare le opzioni di formattazione del testo, selezionate una parola o una frase. La finestra di ispezione Proprietà rapida con le opzioni di formattazione viene visualizzata appena sopra il testo selezionato.

Inserire gli elementi direttamente nella vista Dal vivo

Utilizzando il pannello Inserisci, potete trascinare direttamente gli elementi nella posizione richiesta del documento nella vista Dal vivo. I riferimenti visivi della vista Dal vivo, quali le Guide dal vivo e le icone DOM, aiutano a posizionare gli elementi trascinati rispetto all’elemento sul quale state passando con il mouse.

Le Guide dal vivo (in verde) appaiono mentre passate con il mouse sopra vari elementi della pagina, prima di rilasciare l’elemento trascinato. Queste guide indicano le posizioni in cui l’elemento può essere inserito. Possono apparire sopra, sotto, a sinistra o a destra dell’elemento sopra il quale si trova il mouse.

• Sopra e sotto - Viene visualizzato quando posizionate il mouse sopra tutti i tipi di elementi/tag, ad eccezione dei tag in linea. Quando posizionate il mouse nel primo 50% (parte superiore) dell’elemento, le guide appaiono sopra l’elemento corrente. Quando posizionate il mouse nell’ultimo 50% (parte inferiore) dell’elemento, le guide appaiono sotto l’elemento corrente.

• Sinistra e destra - Viene visualizzato quando posizionate il mouse sopra i tag in linea, ad esempio <a> o <span>, oppure sui tag con la proprietà ’float’ impostata.

Quando vi fermate un attimo prima di rilasciare un elemento, viene visualizzata l’icona DOM (</>). Se passate il mouse sopra questa icona, il pannello DOM viene aperto e potete rilasciare l’elemento nella struttura DOM del documento.

Per inserire gli elementi direttamente nella Vista dal vivo, effettuate le seguenti operazioni:

Perimetro di selezione

Perimetro di selezione consente di selezionare facilmente un blocco di testo facendo clic e trascinando all’interno del tag nella vista Dal vivo. Quando fate clic e trascinate un blocco di testo in versioni di Dreamweaver precedenti alla 2014.1, l’elemento si spostava come un tutt’uno. 

Selezione e trascinamento di elementi

Nella vista Dal vivo potete spostare un elemento facendo clic sul nome del tag e trascinandolo nella posizione desiderata. Quando fate clic sul nome di un tag, viene visualizzato un cursore mano che indica che è possibile trascinare il tag dal punto. Quando iniziate a trascinare il tag, le guide consentono di inserirlo nella posizione precisa.  

Facendo clic sul nome del tag nella vista Dal vivo, potete selezionare l’intero contenuto del tag nella vista Codice.

Esaminare il codice nella vista Dal vivo

La modalità Esamina funziona in parallelo con la vista Dal vivo per aiutarvi a identificare rapidamente gli elementi HTML e gli stili CSS ad essi associati. Con la modalità Esamina attivata, potete passare sopra gli elementi della pagina per vedere gli attributi del modello di riquadro CSS per qualsiasi elemento a livello di blocco.

Oltre a visualizzare una rappresentazione visiva del modello di riquadro CSS in modalità Esamina, potete utilizzare CSS Designer anche quando passate con il puntatore sopra gli elementi nella vista Dal vivo.

Quando CSS Designer è aperto in modalità Corrente e passate sopra un elemento della pagina, il contenuto di CSS Designer viene aggiornato automaticamente in modo da visualizzare le regole e proprietà specifiche di quell’elemento.

Inoltre, le viste o i pannelli correlati all’elemento in questione vengono a loro volta aggiornati (ad esempio la vista Codice, il selettore di tag, la finestra di ispezione Proprietà e così via).

Navigazione da tastiera nella vista Dal vivo

Potete attivare gli elementi di pagina o i selettori nella Visualizzazione elemento utilizzando la tastiera per velocizzare il processo di modifica. 

Navigazione tra gli elementi di pagina

I tasti freccia Su e Giù aiutano a navigare tra gli elementi di pagina nella vista Dal vivo. La navigazione è basata sulla struttura DOM del documento.

La navigazione da tastiera nella vista Dal vivo facilita l’accesso agli elementi nidificati e racchiusi tra tag.

Quando accedete a un elemento utilizzando il tasto freccia Su o Giù, appare la Visualizzazione elemento relativa a tale elemento. Potete quindi passare ai selettori nella Visualizzazione elemento oppure premere Invio per modificare il testo direttamente nella vista Dal vivo.

Navigazione tra i selettori

Premete il tasto Tab per spostarvi tra i selettori nella Visualizzazione elemento. Il selettore attivo è visualizzato con un bordo color ambra, come illustrato di seguito: 

Se premete il tasto Tab dopo l’ultimo selettore applicato, viene visualizzata la casella di testo Aggiungi selettore. 

Disabilitare la modifica nella vista Dal vivo

Scenari non supportati

• I file di modello di Dreamweaver non possono essere modificati nella vista Dal vivo.
• I tag che hanno contenuto sia statico che dinamico. Potete modificare i selettori di questi tag, ma non il testo nella vista Dal vivo. Se fate doppio clic su tali elementi nella vista Dal vivo, intorno ad essi appare un bordo grigio, per indicare che la modifica del testo non è supportata.
• Tag ai quali sono applicati pseudo-selettori. Si potrebbero produrre risultati imprevisti quando si tenta di modificare tali elementi nella vista Dal vivo.
• Le griglie CSS sono supportate nella vista Dal vivo solo in Dreamweaver 2019 e versioni successive.