Visualizzare in anteprima le pagine web in Dreamweaver, nei browser e nei dispositivi mobili.

L'anteprima in tempo reale consente di visualizzare in anteprima le pagine nel browser e sui dispositivi mobili e di visualizzare le modifiche nel browser o sul dispositivo in tempo reale durante la scrittura del codice.

La vista Dal vivo consente di vedere l’aspetto che la pagina avrà sul Web e di modificare gli elementi nella vista Codice.

Anche la vista Progettazione consente di vedere l’aspetto della pagina sul Web ma non riproduce la pagina esattamente come i browser.

La funzione Apri nel browser permette invece di verificare come saranno visualizzate le pagine nei browser. Questa opzione è ideale per lavorare con le pagine che utilizzano dati dinamici dai database, non essendo questa in tempo reale.

Continuate a leggere per ulteriori informazioni sui diversi tipi di opzioni di anteprima in Dreamweaver.

Anteprima in tempo reale nel browser

Potete visualizzare in anteprima le pagine Web in tempo reale mentre scrivete il codice o le progettate in Dreamweaver. Questa funzione consente di scrivere codice e visualizzare in anteprima contemporaneamente le pagine Web in più browser. 

Anteprima delle modifiche in tempo reale nel browser
Anteprima delle modifiche in tempo reale nel browser

Nota:

il codice può essere visualizzato in anteprima anche mentre lo scrivete. Per ulteriori informazioni, consultate Visualizzare in anteprima le pagine Web di Dreamweaver su più dispositivi.

  1. Fate clic su Anteprima in tempo reale nella barra di stato di Dreamweaver.

    Anteprima in tempo reale
    Anteprima in tempo reale

    Sono disponibili opzioni per visualizzare in anteprima le pagine Web in tempo reale in un browser o su un dispositivo.

    Se desiderate visualizzare in anteprima le pagine Web su un dispositivo, consultate Visualizzare in anteprima pagine web di Dreamweaver su più dispositivi.

  2. Per visualizzare in anteprima le pagine Web nel browser, fate clic su una delle opzioni disponibili per il browser.

    Nota:

    i browser visualizzati in questo elenco possono essere modificati. Per aggiungere o rimuovere un browser dall'elenco, consultate Impostare le preferenze del browser.

    Se disponete di un server di prova, durante la sua configurazione, assicuratevi di abilitare l'opzione Invia automaticamente i file al server di prova. 

    L'anteprima in tempo reale funziona con i file nel server di prova. Abilitando l'invio automatico al server di prova potrete visualizzare le modifiche in tempo reale. 

    Abilitare l'invio automatico al server di prova
    Abilitare l'invio automatico al server di prova

  3. Se richiesto, salvate la pagina Web e i documenti correlati.

    Il browser si apre e visualizza la pagina Web.

  4. Continuate a codificare la pagina e osservate le modifiche nel browser mentre scrivete il codice.

Impostare le preferenze di anteprima del browser

Potete impostare le preferenze relative al browser da utilizzare per l'anteprima di un sito e definire il browser predefinito principale e secondario.

Queste preferenze dei browser vengono quindi utilizzate anche se state visualizzando in anteprima il sito con l'anteprima in tempo reale o se aprite semplicemente la pagina nel browser.

  1. Selezionate File > Anteprima in tempo reale > Modifica elenco browser.

  2. Per aggiungere un browser all'elenco, fate clic sul pulsante più (+), impostate le opzioni desiderate nella finestra di dialogo Aggiungi browser e fate clic su OK.
  3. Per eliminare un browser dall'elenco, selezionate il browser e fate clic sul pulsante meno (-).
  4. Per modificare le impostazioni del browser selezionato, fate clic sul pulsante Modifica, apportate le modifiche desiderate nella finestra di dialogo Modifica browser e fate clic su OK.
  5. Selezionate l'opzione Browser principale o Browser secondario per specificare se il browser selezionato è quello principale oppure un browser secondario.

    F12 (Windows) o Opzione +F12 (Macintosh) consente di aprire il browser principale; Control+F12 (Windows) o Comando+F12 (Macintosh) consente di aprire il browser secondario.

  6. Selezionate Anteprima mediante il file temporaneo per creare una copia temporanea per l'anteprima e il debug del server. (Deselezionate l'opzione se desiderate aggiornare direttamente il documento.)

Pagine di anteprima nella vista Dal vivo

La vista Dal vivo si distingue dalla tradizionale vista Progettazione di Dreamweaver, in quanto fornisce un rendering più realistico (e modificabile) dell'aspetto che assumerà la pagina in un browser. 

Potete passare alla vista Dal vivo in qualsiasi momento mentre state lavorando nella vista Progettazione. L'attivazione della vista Dal vivo è, tuttavia, un'operazione diversa dal passaggio tra le altre viste tradizionali di Dreamweaver (Codice, Progettazione e combinata). Il passaggio alla vista Dal vivo dalla vista Progettazione consiste semplicemente nel passaggio tra la modalità modificabile e la modalità “dal vivo” della vista Progettazione.

Mentre la vista Progettazione rimane bloccata quando passate alla vista Dal vivo, la vista Codice continua a essere modificabile e consente di apportare modifiche al codice e aggiornare la vista Dal vivo per vedere applicate le modifiche. Nella vista Dal vivo è disponibile l'ulteriore opzione di visualizzare il codice dal vivo. La vista Codice dal vivo è analoga alla vista Dal vivo, in quanto consente di visualizzare una versione del codice eseguito attualmente dal browser per il rendering della pagina. Come la vista Dal vivo, la vista Codice dal vivo non è modificabile.

Un ulteriore vantaggio dalla vista Dal vivo è la capacità di bloccare JavaScript. Potete, ad esempio, passare alla vista Dal vivo e posizionare il cursore del mouse sulle righe della tabella basata su jQuery che cambiano colore a seguito dell'interazione con l'utente. Quando bloccate JavaScript, la vista Dal vivo blocca la pagina nello stato corrente. Potete modificare CSS o JavaScript e aggiornare la pagina per vedere applicate le modifiche apportate. Il blocco di JavaScript nella vista Dal vivo risulta utile se desiderate visualizzare e modificare le proprietà per i diversi stati dei menu a comparsa o di altri elementi interattivi che non sono visibili nella tradizionale vista Progettazione.

Per visualizzare le pagine in anteprima nella vista Dal vivo:

  1. Assicuratevi di essere nella vista Progettazione (Visualizza > Progettazione) o nella vista Codice e Progettazione (Visualizza > Codice e Progettazione).

  2. Fate clic sul pulsante Vista Dal vivo.

  3. (Opzionale) Apportate le modifiche nella vista Codice, nel pannello Stili CSS, in un foglio di stile CSS esterno o in un altro file correlato.

    Sebbene non sia possibile apportare modifiche nella vista Dal vivo, le opzioni per le modifiche in altre aree (ad esempio, nel pannello Stili CSS o nella vista Codice) cambiano mentre fate clic nella vista Dal vivo.

    Nota:

    potete lavorare con i file correlati (ad esempio, i fogli di stile CSS) mentre è attiva la vista Dal vivo, aprendo il file correlato dalla barra degli strumenti File correlati nella parte superiore del documento.

  4. Se avete apportato modifiche nella vista Codice o in un file correlato, potete aggiornare la vista Dal vivo facendo clic sul pulsante Aggiorna nella barra degli strumenti Documento o premendo il tasto F5.

  5. Per tornare alla vista modificabile Progettazione, fate di nuovo clic sul pulsante Vista Dal vivo.

Anteprima di Codice dal vivo

Il codice visualizzato nella vista Codice dal vivo è simile a quello che verrebbe riprodotto visualizzando l'origine della pagina in un browser. Mentre tali origini di pagine sono statiche e consentono di visualizzare solo l'origine della pagina nel browser, la vista Codice dal vivo è dinamica e viene aggiornata mentre interagite con la pagina nella vista Dal vivo.

  1. Assicuratevi di essere nella vista Dal vivo.

  2. Fate clic sul pulsante Codice dal vivo.

    Viene visualizzato il codice dal vivo utilizzato dal browser per riprodurre la pagina. Il codice viene evidenziato in giallo e non è modificabile.

    Quando interagite con elementi di pagina interattivi, il codice dal vivo evidenzia le modifiche dinamiche apportate al codice.

  3. Per disattivare l'evidenziazione delle modifiche nella vista Codice dal vivo, scegliete Visualizza > Opzioni vista Dal vivo > Evidenzia modifiche in Codice dal vivo.

  4. Per tornare alla vista Codice modificabile, fate di nuovo clic sul pulsante Codice dal vivo.

Per cambiare le preferenze Codice dal vivo, scegliete Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Mac OS), quindi selezionate la categoria Colorazione codice.

Blocca JavaScript

Effettuate una delle operazioni seguenti:

  • Premete F6.

  • Selezionate Blocca JavaScript dal menu a comparsa del pulsante vista Dal vivo.

Nella parte superiore del documento viene visualizzata una barra delle informazioni in cui è indicato che JavaScript è bloccato. Per chiudere la barra delle informazioni, fate clic sul collegamento di chiusura.

Opzioni della vista Dal vivo

Oltre all'opzione Blocca JavaScript, sono disponibili altre opzioni tramite il menu a comparsa del pulsante Vista Dal vivo o dalla voce di menu Visualizza > Opzioni vista Dal vivo.

Blocca JavaScript Blocca nello stato corrente gli elementi interessati da JavaScript.

Disattiva JavaScript Disattiva JavaScript ed effettua nuovamente il rendering della pagina, in modo che venga visualizzata come se nel browser non fosse attivato JavaScript.

Disattiva plugin Disattiva i plugin ed effettua nuovamente il rendering della pagina, in modo che venga visualizzata come se nel browser non fossero attivati i plugin.

Evidenzia modifiche in Codice dal vivo Attiva o disattiva l'evidenziazione delle modifiche in Codice dal vivo.

Modifica la pagina vista Dal vivo in una nuova scheda Permette di aprire nuove schede per i documenti del sito che consultate mediante la barra degli strumenti Navigazione browser o la funzione Segui collegamento. Dovete prima accedere al documento desiderato, quindi selezionare Modifica la pagina Vista Dal vivo in una nuova scheda per creare una nuova scheda in cui visualizzarlo.

Segui collegamento Rende attivo il prossimo collegamento su cui fate clic nella vista Dal vivo. In alternativa potete attivare il collegamento facendo clic su di esso nella vista Dal vivo mentre tenete premuto il tasto Control.

Segui collegamenti continuamente Mantiene attivi tutti i collegamenti nella vista Dal vivo finché non li disattivate di nuovo o chiudete la pagina.

Sincronizza automaticamente file remoti Sincronizza automaticamente i file locale e remoto quando fate clic sull'icona Aggiorna nella barra degli strumenti Navigazione browser. Dreamweaver carica il file sul server prima di effettuare l'aggiornamento, in modo da mantenere sincronizzati i due file.

Usa server di prova per origine documento Utilizzata soprattutto dalle pagine dinamiche (ad esempio, le pagine ColdFusion) e selezionata per impostazione predefinita per le pagine dinamiche. Quando l'opzione è selezionata, Dreamweaver utilizza la versione del file disponibile nel server di prova del sito come origine per la visualizzazione della vista Dal vivo.

Usa file locale per collegamenti documento L'impostazione predefinita per i siti non dinamici. Quando l'opzione è selezionata per i siti dinamici che utilizzano un server di prova, Dreamweaver utilizza le versioni locali dei file collegati al documento (ad esempio, file CSS e JavaScript), anziché i file sul server di prova. Potete quindi apportare modifiche locali ai file correlati per vedere quale aspetto avranno, prima di caricarli sul server di prova. Se l'opzione è deselezionata, Dreamweaver utilizza le versioni dei file correlati sul server di prova.

Impostazioni richiesta HTTP Visualizza una finestra di dialogo di impostazioni avanzate in cui potete inserire i valori per la visualizzazione di dati dal vivo. Per ulteriori informazioni, fate clic sul pulsante Aiuto nella finestra di dialogo.

Apri nel browser

Potete aprire una pagina in un browser in qualsiasi momento; non è necessario caricarla prima su un server Web. Quando visualizzate l'anteprima di una pagina, tutte le funzioni relative al browser dovrebbero funzionare normalmente, compresi i comportamenti JavaScript, i collegamenti assoluti e relativi al documento, i controlli ActiveX® e i plugin del browser, a condizione che nei browser siano stati installati i plugin o i controlli ActiveX necessari.

Prima di aprire un documento nel browser, è necessario salvarlo, altrimenti il browser non riprodurrà le ultime modifiche eseguite.

  1. Fate clic con il pulsante destro del mouse sul nome del file nella barra degli strumenti Documento e fate clic su Apri nel browser.

    Nota:

    se non è indicato alcun browser, selezionate Modifica > Preferenze o Dreamweaver > Preferenze (Macintosh), quindi selezionate la categoria Anteprima nel browser a sinistra per selezionare un browser. Per ulteriori informazioni, consultate Impostare le preferenze di anteprima del browser.

  2. Fate clic sui collegamenti e verificate il contenuto della pagina.

    Nota:

    il contenuto collegato con un percorso relativo alla cartella principale del sito non appare quando visualizzate l'anteprima dei documenti in un browser locale, a meno che non abbiate specificato un server di prova o abbiate selezionato l'opzione Anteprima mediante il file temporaneo in Modifica > Preferenze > Anteprima nel browser. Ciò avviene perché i browser, al contrario dei server, non riconoscono le cartelle principali dei siti.

    Nota:

    per visualizzare l'anteprima di un contenuto collegato mediante un percorso relativo alla cartella principale del sito, spostate il file su un server remoto, quindi scegliete File > Anteprima nel browser per visualizzarlo.

  3. Chiudete la pagina nel browser una volta terminata la verifica.

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