Scoprite come progettare, modificare le pagine Web e visualizzarle in anteprima nella vista Dal vivo. Riorganizzate o inserite elementi, applicate i selettori, modificate gli attributi di immagine, inserite, modificate e formattate il testo senza passare alla vista Codice.

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.

Nota:

se la pagina cambia in modo dinamico (a causa degli script) oppure è attiva la funzione "meta refresh", le modifiche che apportate nella vista Dal vivo potrebbero andare perse.

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.

Un elemento con il bordo grigio nella vista Dal vivo non può essere modificato
Un elemento con il bordo grigio nella vista Dal vivo non può essere modificato

Nota:

nella vista Dal vivo, solo le opzioni applicabili all'elemento selezionato sono disponibili nel menu principale. Le opzioni che non sono applicabili risultano disabilitate quando l'elemento è selezionato.

Visualizzazione elemento

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.

Visualizzazione elemento per l'elemento
Visualizzazione elemento per l'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.

Nota:

la Visualizzazione elemento degli elementi di transizione non si sposta insieme agli elementi quando la transizione viene attivata. Tuttavia, le modifiche apportate utilizzando la Visualizzazione elemento vengono applicate anche se questa non è nella stessa posizione dell'elemento di transizione. 

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.

La finestra di ispezione Proprietà rapida visualizzata direttamente sopra gli elementi di pagina nella vista Dal vivo
La finestra di ispezione Proprietà rapida visualizzata direttamente sopra gli elementi di pagina nella vista Dal vivo

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

Nota:

l'icona di Navigazione codice non viene visualizzata nella vista Dal vivo se utilizzate la finestra di ispezione Proprietà rapida.

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

Finestra di ispezione Proprietà rapida per immagini nei documenti Bootstrap
Finestra di ispezione Proprietà rapida per immagini nei documenti Bootstrap

  • 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.

Finestra di ispezione Proprietà rapida per testo
Finestra di ispezione Proprietà rapida per testo

  • 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.

Nota:

la finestra di ispezione Proprietà della vista Dal vivo non è disponibile nelle pagine a griglia fluida.

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:

  • HTML
  • CSS
  • Image
  • Table
  • Media - solo audio HTML5 e video HTML5
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

Nota:

le proprietà jQuery UI e quelle relative ai modelli non sono disponibili per la modifica 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. 

Finestra di ispezione Proprietà rapida per la modifica degli attributi
Finestra di ispezione Proprietà rapida per la modifica degli attributi

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 doppio clic sull'elemento di testo per modificarlo. In alternativa, potete fare clic sull'elemento di testo per visualizzare la Visualizzazione elemento e poi premere Invio.

Nota:

quando premete Invio dopo aver attivato la modalità di modifica, i risultati variano a seconda di dove si trovava il punto di inserimento prima della pressione del tasto Invio. Le modifiche si eseguono in modo simile a quando si preme Invio durante la modifica del testo nella vista Progettazione.

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

Il bordo arancione indica la modalità di modifica
Il bordo arancione indica la modalità di modifica

Il punto di inserimento si trova nella posizione del doppio 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.

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

Supportato Non supportato
Tutti gli elementi HTML che possono contenere testo

Modifica di tag non validi o interrotti. Se il codice HTML contiene tag interrotti o non validi, la possibilità di modificare tali tag dipende dal modo in cui vengono interpretati dai browser:

  • Se i browser correggono il codice HTML automaticamente chiudendo il tag interrotto, potreste essere in grado di modificare i tag nella vista Dal vivo.
  • Se i browser aggiungono un nuovo tag durante il rendering, non potete modificare i tag interrotti o non validi.

 

File HTML derivati da modelli nella vista Dal vivo
Modifica di pagine jQuery
Tag strutturali contenenti elementi in linea. Sono presentati insieme in una singola casella per la modifica.
Modifica di tag che hanno contenuto sia statico che dinamico. Potete modificare i selettori di questi tag, ma non direttamente 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.
Testo statico nelle pagine dinamiche
 
Pagine a griglia fluida nella vista Dal vivo senza griglie
 
Testo contenente entità  

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.

Finestra di ispezione Proprietà rapida per la formattazione del testo
Finestra di ispezione Proprietà rapida per la formattazione del testo

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.
Guide dal vivo sopra e sotto
Guide dal vivo sopra e sotto gli elementi correnti

  • 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.
Guide dal vivo a destra e a sinistra degli elementi correnti
Guide dal vivo a destra e a sinistra degli elementi correnti

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:

  1. Passate alla vista Dal vivo.

  2. Dal pannello Inserisci, fate clic sull'elemento richiesto e trascinatelo nel documento. In alternativa, potete semplicemente fare clic sull'elemento richiesto nel pannello Inserisci.

    Suggerimento: se non riuscite a trascinare un elemento dal pannello Inserisci alla pagina, riavviate il computer e riprovate.

  3. Rilasciate l'elemento sopra, sotto, a destra o a sinistra di un elemento in base alle Guide dal vivo. Oppure, rilasciate l'elemento in un punto preciso nella struttura del documento facendo clic su </> e utilizzando il pannello DOM.

    L'elemento viene inserito nella pagina ed evidenziato.

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. 

Nota:

Perimetro di selezione nella vista Dal vivo è limitato alle operazioni supportate dal browser. 

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.

Fate clic sul nome del tag nella vista Dal vivo per selezionare l'intero contenuto del tag nella vista Codice
Fate clic sul nome del tag nella vista Dal vivo per 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).

  1. Con il documento aperto nella finestra del documento, fate clic su Visualizza > Esamina.

    Nota:

    se la vista Dal vivo non è già attiva, viene attivata automaticamente dalla modalità Esamina.

  2. Passate con il puntatore sopra gli elementi della pagina per visualizzare il modello di riquadro CSS. La modalità Esamina evidenzia con colori diversi il bordo, il margine, la spaziatura e il contenuto.

  3. (Opzionale) Premete il tasto Freccia sinistra sulla tastiera del computer per evidenziare l'elemento principale dell'elemento evidenziato. Premete il tasto Freccia Destra per tornare all'evidenziazione dell'elemento di livello inferiore.

  4. (Opzionale) Fate clic su un elemento per bloccare una selezione evidenziata.

    Nota:

    quando si fa clic su un elemento per bloccare una selezione evidenziata, la modalità Esamina viene disattivata.

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

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.

L’immagine è stata attivata per prima
Qui è stata attivata prima l'immagine. Quando si preme il tasto freccia Giù, il paragrafo sotto l'immagine viene selezionato, come si vede nell'immagine seguente.

È selezionato il testo in grassetto
Il testo in grassetto è selezionato.

Il paragrafo è selezionato qui
Qui è selezionato il paragrafo. Quando si preme nuovamente il tasto freccia Giù, viene selezionato l'elemento successivo della struttura DOM, il testo in grassetto, come si vede nell'immagine seguente.


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: 

È evidenziato il selettore attivo
Il selettore attivo è evidenziato con un bordo ambra.

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

Nota:

potete utilizzare la combinazione di tasti Ctrl +[ o Cmd +[ per selezionare l'elemento principale e Ctrl +] o Cmd +] per selezionare l'elemento secondario.

Disabilitare la modifica nella vista Dal vivo

Se preferite non utilizzare la Visualizzazione elemento e la finestra di ispezione Proprietà rapida della vista Dal vivo, potete disattivare queste funzioni di modifica.

Scelte rapide da tastiera:

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H

  1. Passate alla vista Dal vivo e fate clic su Visualizza > Opzioni vista Dal vivo.

  2. Selezionate Nasconde le visualizzazioni 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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online