Avviate Dreamweaver eseguendo il comando:
- Windows: <percorso_di_installazione> -enableRemoteDebugging
- Mac: open <percorso_di_installazione> --args -enableRemoteDebugging
Nota: digitate due trattini prima di args
Gli ultimi aggiornamenti dell’edizione 2014 di Dreamweaver CC includono l’integrazione con Extract per aiutarvi a creare siti desktop e per dispositivi mobili da una composizione PSD direttamente in Dreamweaver. Le nuove guide dal vivo rendono più facile collocare accuratamente e riposizionare gli elementi HTML, mentre le opzioni di modifica ottimizzate della vista Dal vivo consentono di effettuare modifiche in tempo reale.
Questo articolo presenta le nuove funzioni e vari altri miglioramenti e fornisce collegamenti a ulteriori risorse di aiuto e apprendimento.
Siete un nuovo utente di Dreamweaver? Avete utilizzato Dreamweaver e state cercando di migliorare le vostre competenze? Desiderate sapere cosa è cambiato dalla versione precedente a quella attuale? Dalla schermata di benvenuto potrete accedere a tutte le risorse essenziali di apprendimento per il principiante, l’utente esperto o per coloro che desiderano valutare la nuova versione di Dreamweaver
Dalla schermata di benvenuto dell’aggiornamento più recente per l’edizione Dreamweaver CC 2014 di Dreamweaver potrete accedere rapidamente a video (incluse le nuove funzioni), esercitazioni pratiche, suggerimenti, tecniche e altro ancora.
Questa nuova schermata di benvenuto è disponibile soltanto per gli utenti con impostazioni internazionali in lingua inglese. Per gli utenti con altre impostazioni internazionali, vengono visualizzate la schermata di benvenuto e la panoramica guidata delle nuove funzioni in Dreamweaver CC 2014.1.
Le Guide dal vivo e l’icona Vista rapida elemento sono ora visualizzate nella vista Dal vivo quando si trascinano le immagini dal pannello Extract. Questi strumenti visivi consentono di inserire con rapidità e precisione l’immagine nella posizione desiderata.
Gli elementi possono ora essere spostati nella vista Dal vivo trascinando il nome del tag associato. Quando passate il mouse sul nome di un tag, viene visualizzato il cursore mano che indica che l’elemento può essere trascinato. Potete rilasciare l’elemento trascinato con l’aiuto delle Guide dal vivo che indicano visivamente quale sarà il posizionamento dell’elemento dopo il suo rilascio.
Ora potete selezionare testo, immagini o altri elementi in un tag facendo clic e trascinando un punto qualsiasi all’interno di un tag (perimetro di selezione). Il perimetro di selezione consente di selezionare con facilità più elementi all’interno di un tag.
Nella vista Dal vivo, le sole operazioni con perimetro di selezione supportate sono quelle supportate dal browser.
Visualizzazione elemento mostra ora il testo di suggerimento “Classe/ID” per indicare chiaramente che è possibile specificare una classe o un ID.
Inoltre, le modifiche apportate in Visualizzazione elemento vengono salvate facendo clic su “+”. Potete inoltre premere Invio per salvare le modifiche come nelle versioni precedenti di Dreamweaver.
Alla vista Codice sono stati aggiunti dieci nuovi temi di colore:
Per ulteriori informazioni sui temi della vista Codice, consultate Impostare il tema di colore per la vista Codice.
Questo aggiornamento include alcune modifiche all’interfaccia utente di CSS Designer e una modifica nell’impostazione predefinita della casella di controllo Mostra set.
All’avvio, la casella di controllo Mostra set è selezionata per impostazione predefinita e le modifiche apportate a questa opzione sono permanenti tra le sessioni di Dreamweaver. Ad esempio, se deselezionate questa opzione, la successiva sessione di Dreamweaver mantiene l’impostazione e verrà visualizzata l’opzione nello stato deselezionato.
Di seguito sono riportati i cambiamenti nell’interfaccia utente:
Ora potete effettuare il debug remoto dei documenti Dreamweaver aperti nella vista Dal vivo utilizzando Google Chrome DevTools. In Google Chrome, potete utilizzare la porta 5471, attivabile seguendo i passaggi descritti:
Avviate Dreamweaver eseguendo il comando:
Nota: digitate due trattini prima di args
Nella finestra di dialogo visualizzata che indica che la porta 5471 è attivata per il debug, fate clic su OK.
Dreamweaver viene avviato.
Aprite i documenti su cui desiderate effettuare il debug nella vista Dal vivo.
Per iniziare il debug, aprite Google Chrome Effetto e accedete a localhost:5471. Viene visualizzato un elenco di collegamenti a tutti i documenti aperti in Dreamweaver.
Nota: dato che la nuova schermata di benvenuto e il pannello Extract utilizzano Chromium Embedded Framework (CEF), saranno presenti le voci relative a queste funzionalità.
Potete ora utilizzare Google Chrome DevTools per effettuare il debug dei documenti richiesti.
Per interrompere il debug e aprire Dreamweaver in modalità normale, uscite da Dreamweaver e avviatelo nuovamente.
Quando ora reimpostate le preferenze utilizzando le scelte rapide da tastiera, Dreamweaver crea una copia di backup delle preferenze nella cartella “Adobe Dreamweaver CC 2014.1 Backups”. Questa cartella viene creata automaticamente nella stessa cartella di quella originale delle preferenze di Dreamweaver su Windows e Mac.
Il percorso completo della cartella di backup viene visualizzato nella finestra di dialogo di reimpostazione delle preferenze.
I documenti dinamici quali PHP, CFM e ASP non sono più aperti per impostazione predefinita nella vista Codice. Essi si aprono nella stessa modalità (Codice/Dal vivo/Dividi) dell’ultimo documento chiuso o attivo.
L’integrazione di Extract con Dreamweaver permette ai web designer e agli sviluppatori di applicare le informazioni di progettazione ed estrarre le risorse ottimizzate per il Web direttamente nell’ambiente di codifica. Extract fornisce una soluzione completa e autonoma per l’estrazione di informazioni di stile e risorse dalle composizioni PSD, riducendo la necessità di passare continuamente da Photoshop a Dreamweaver e viceversa.
Con il pannello Extract in Dreamweaver è possibile estrarre CSS, immagini, caratteri, colori, gradienti e misure direttamente nella pagina Web. Oltre a queste funzioni principali di Extract, Dreamweaver offre le seguenti funzioni specifiche:
L’area di lavoro predefinita di Dreamweaver (denominata Extract) mostra il pannello Extract sulla sinistra per iniziare subito a usare questa funzionalità. Al primo avvio di Dreamweaver, il pannello Extract mostra una semplice esercitazione per aiutarvi a imparare i flussi di lavoro Extract. Fate clic su Introduzione per iniziare a utilizzare Extract.
Per ulteriori informazioni sui flussi di lavoro Extract in Dreamweaver, vedete Integrazione di Dreamweaver con Extract.
La versione a 64 bit di Dreamweaver è ora disponibile e supporta tutte le funzioni della versione a 32 bit. Pertanto, ora potete scaricare le seguenti build di Dreamweaver dall’applicazione Adobe Creative Cloud:
Sistema operativo |
Percorso di installazione predefinito |
Cartella Preferenze applicazione |
---|---|---|
Windows 32 bit |
C:\Programmi\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Windows 64 bit |
C:\Programmi\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Mac 64 bit |
/Applications/Adobe Dreamweaver CC 2014.1 |
~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1 |
Verificate che il computer esegua un sistema operativo a 64 bit:
Per verificare se il computer è a 64 bit, effettuate i passaggi descritti negli articoli seguenti:
Scaricate la versione a 64 bit di Dreamweaver da Creative Cloud e installate la build.
Le Guide dal vivo sono riscontri visivi disponibili nella vista Dal vivo, che indicano le possibili posizioni di inserimento di un elemento nei seguenti scenari:
Le Guide dal vivo non sono supportate nei documenti a griglia fluida.
Le Guide dal vivo appaiono mentre passate con il mouse sopra vari elementi della pagina, prima di rilasciare l’elemento trascinato. Possono apparire sopra, sotto, a sinistra o a destra dell’elemento sopra il quale si trova il mouse.
Potete utilizzare la Vista rapida elemento con le Guide dal vivo per inserire con maggiore precisione un elemento HTML nella struttura del documento.
Quando vi fermate un attimo prima di rilasciare un elemento, viene visualizzata l’icona della Vista rapida elemento (</>). Se passate il mouse sopra questa icona, la Vista rapida elemento viene aperta e potete rilasciare l’elemento al suo interno.
Ora potete tagliare, copiare, incollare ed eliminare elementi nella vista Dal vivo utilizzando il menu di scelta rapida. Potete anche duplicare elementi o selezionare il tag superiore o di livello inferiore utilizzando il menu di scelta rapida in vista Dal vivo.
Potete anche utilizzare le scelte rapide da tastiera (ad esempio, in Windows, Ctrl+x, Ctrl+c, Ctrl+v, Ctrl + d e il tasto Canc) nella vista Dal vivo.
In primo luogo, selezionate un elemento nella vista Dal vivo per fare apparire la Visualizzazione elemento. Quindi, fate clic con il pulsante destro del mouse nell’area del tag per visualizzare le opzioni del menu di scelta rapida. Le opzioni sono disponibili a livello di tag.
Ora potete non solo applicare selettori a un elemento, ma anche creare un selettore nell’origine CSS desiderata e assegnare una media query utilizzando la Visualizzazione elemento. Quando digitate un selettore che non esiste in alcun foglio di stile e premete Invio, la Visualizzazione elemento mostra le opzioni per scegliere un’origine CSS e una media query.
Se non desiderate scegliere un’origine CSS o una media query, premete Esc per chiudere le opzioni.
È anche possibile fare clic con il pulsante destro su un selettore applicato per passare al codice corrispondente (opzione Vai al codice) o per incollare gli stili copiati (opzione Incolla stili).
l’opzione Vai al codice mostra sottopzioni se lo stesso selettore viene aggiunto a media query multiple. L’opzione Incolla stili mostra sottopzioni se i selettori copiati sono pseudo o selettori composti.
Dreamweaver ora supporta lo spostamento di elementi (a livello di tag) nella vista Dal vivo. Potete selezionare un elemento nella vista Dal vivo, trascinarlo e rilasciarlo in qualsiasi altra posizione.
Fate clic sull’elemento da spostare e, quando appare la Visualizzazione elemento (casella blu intorno all’elemento), trascinatelo. Una volta inizializzata l’azione di trascinamento, il cursore del mouse cambia per indicare che l’elemento è pronto per essere spostato.
L’elemento di riferimento (quello rispetto al quale volete inserire l’elemento trascinato) viene evidenziato con un bordo blu. Vengono visualizzate anche le Guide dal vivo (in verde) per indicare le possibili posizioni di rilascio rispetto all’elemento di riferimento.
Solo gli elementi statici possono essere spostati nella vista Dal vivo. I tag di contenuto dinamico, ad esempio PHP, non possono essere spostati.
Quando vi fermate un attimo prima di rilasciare un elemento, viene visualizzata l’icona della Vista rapida elemento (</>). Se passate il mouse sopra questa icona, la Vista rapida elemento viene aperta e potete rilasciare l’elemento al suo interno.
Dreamweaver ora supporta la navigazione tra gli elementi di pagina mediante la tastiera, per facilitare gli utenti che preferiscono spostarsi tramite tastiera e velocizzare così il processo di web design. Potete utilizzare:
Per ulteriori informazioni, vedete Navigazione da tastiera nella vista Dal vivo.
Quando si preme Ctrl+T in Windows o Cmd+T su Mac nella vista Dal vivo, ora viene visualizzato Quick Tag Editor per l’elemento selezionato. Quick Tag Editor presenta tre stati: Modifica tag, Applica tag e Inserisci HTML. Potete alternare questi stati mediante il tasto di scelta rapida Ctrl/Cmd + T.
La barra degli strumenti Documento è stata modificata per semplificarne l’uso.
Le aree di lavoro preimpostate disponibili in Dreamweaver sono cambiate nel modo seguente:
L’area di lavoro predefinita è ora Extract. Questa area di lavoro mostra il pannello Extract sulla sinistra e la pagina Web sulla destra. Al primo avvio di Dreamweaver, il pannello Extract visualizza una semplice esercitazione per aiutarvi a imparare i flussi di lavoro Extract. Per iniziare a utilizzare Extract, fate clic su Introduzione.
La vista predefinita per i documenti HTML è ora la Vista combinata, divisa in orizzontale in modo da visualizzare le viste Dal vivo e Codice. I file dinamici, come quelli elencati di seguito, vengono aperti nella vista Codice intera per impostazione predefinita. Quando dividete la vista, questi documenti vengono visualizzati in vista Progettazione e in vista Codice.
Suggerimento: per passare a vista Progettazione, fate clic sull’elenco a discesa accanto a Dal vivo, quindi su Progettazione. Per passare dalla divisione orizzontale a quella verticale, selezionate Visualizza > Dividi in verticale. La vista Dal vivo/Progettazione ora appare sulla sinistra. Per ottenere la vista Dal vivo/Progettazione sulla destra, deselezionate Visualizza > Vista Dal vivo a sinistra o Vista Progettazione a sinistra.
Dreamweaver ora memorizza lo stato vista Dal vivo che scegliete per un documento HTML e applica la stessa vista a tutti i documenti HTML che aprite in seguito. Ad esempio, supponiamo che HTML1 sia il documento che aprite per primo. La vista del documento è combinata, con le viste Codice e Dal vivo. Supponiamo che passiate alla vista Dal vivo completa per questo documento. Quando aprite il prossimo documento, ad esempio HTML2, questo viene visualizzato nella vista Dal vivo completa.
Nella versione precedente di Dreamweaver CC sono state introdotte nuove opzioni di modifica per la vista Dal vivo. Nella nuova release, queste funzioni di modifica della vista Dal vivo sono disponibili anche per i documenti a griglia fluida. Le modifiche effettuate nella vista Dal vivo permettono di sviluppare più velocemente pagine Web fluide, poiché è possibile modificare e visualizzare in anteprima le modifiche istantaneamente nella stessa vista.
Le seguenti funzioni facilitano la modifica dei documenti a griglia fluida nella vista Dal vivo:
Adesso potete anche visualizzare la struttura DOM HTML di un documento a griglia fluida tramite Vista rapida elemento.
Nota: Vista rapida elemento nei layout a griglia fluida non consente di copiare, incollare, duplicare o riordinare gli elementi HTML.
L’interfaccia utente per visualizzare e modificare i documenti a griglia fluida è stata modificata integrando le funzioni di modifica nella vista Dal vivo. Ora, quando selezionate un elemento in un documento a griglia fluida, appare la Visualizzazione elemento con altri controlli quali Nascondi elementi e Inizia una nuova riga.
Inoltre, i documenti a griglia fluida ora si aprono direttamente nella vista Dal vivo. Non è più possibile visualizzare o modificare i documenti a griglia fluida nella vista Progettazione.
Per ulteriori informazioni sui documenti a griglia fluida, vedete Responsive design con i layout a griglia fluida.
La finestra di dialogo Inserisci per i documenti a griglia fluida ora contiene un "assistente di posizionamento" che permette di posizionare l’elemento inserito prima o dopo l’elemento attivo o di nidificarlo al suo interno (nella vista Dal vivo). Per maggiori informazioni sull’inserimento di elementi a griglia fluida, consultate Inserire elementi a griglia fluida.
L’opzione Gestisci elementi nascosti (pulsante a forma di occhio nella barra degli strumenti Documento) è stata spostata nel menu di scelta rapida in un documento a griglia fluida.
Per gestire gli elementi nascosti, fate clic con il pulsante destro del mouse sulla pagina a griglia fluida e selezionate “Gestisci elementi nascosti” per visualizzare gli elementi nascosti. Per nascondere questi elementi, potete fare clic sull’icona a forma di occhio nell’HUD.
Ora potete scegliere uno dei seguenti temi di colore già pronti disponibili per la vista Codice:
Utilizzate le preferenze di colorazione del codice per specificare un tema per la vista Codice. Potete personalizzare il tema scegliendo combinazioni di colori diverse per gli sfondi, i primi piani e i caratteri nascosti.
Per ogni tipo di documento elencato, potete personalizzare i colori per le diverse categorie di tag e di elementi di codice, quali i tag relativi ai moduli o gli identificatori JavaScript. Ad esempio, con il tema Raven applicato a tutti i tipi di documento, potete scegliere di usare un colore blu per i tag relativi ai moduli solo nei documenti HTML.
Tutte le impostazioni personalizzate di un tema vengono salvate quando fate clic su Applica e il tema personalizzato è disponibile per l’uso in tutte le sessioni di Dreamweaver.
Potete mantenere i temi codice personalizzati sincronizzati tra le istanze di Dreamweaver utilizzando l’opzione Sincronizzaz. impostaz. nelle Preferenze. Per ulteriori informazioni, vedete Sincronizzare le impostazioni di Dreamweaver con Creative Cloud.
Per ulteriori informazioni, vedete Impostare il tema di colore per la vista Codice.
La sincronizzazione tra vista Codice e vista Dal vivo consente di visualizzare istantaneamente in anteprima tutte le modifiche apportate al codice nella vista Dal vivo. A differenza delle versioni precedenti di Dreamweaver, non è necessario fare clic su Aggiorna per visualizzare in anteprima le modifiche effettuate nella vista Dal vivo.
Potete osservare la sincronizzazione tra vista Codice e vista Dal vivo in azione nei seguenti flussi di lavoro (quando è attiva la vista Codice):
Tutte le modifiche apportate al codice JavaScript richiedono un aggiornamento o ricaricamento completo della pagina per essere visualizzate nella vista Dal vivo.
Il pannello Risorse (Finestra > Risorse) ora è disponibile anche nella vista Dal vivo. Utilizzando il pannello Risorse potete gestire facilmente le seguenti operazioni:
Nota: potete trascinare risorse dal riquadro di anteprima solo su Mac.
Per istruzioni dettagliate su come utilizzare il pannello Risorse, vedete Operazioni con le risorse.
Dreamweaver ora include nuovi modelli campione reattivi che aiutano l’utente a realizzare più facilmente e velocemente siti Web di responsive design. Potete scegliere tra uno dei modelli seguenti nella finestra di dialogo Nuovo documento (File > Nuovo > Modelli per iniziare):
Quando scegliete un modello e fate clic su Crea nella finestra di dialogo Nuovo documento, Dreamweaver richiede di salvare il nuovo documento. Salvando il documento, create una copia del modello, che potete successivamente personalizzare in base alle vostre esigenze.
Le procedure di risoluzione dei problemi di Dreamweaver talvolta richiedono l’eliminazione della cartella delle preferenze, che contiene tutte le impostazioni personalizzate. Prima di questa versione, era necessario accedere manualmente alla cartella delle preferenze nel computer ed eliminarla. In questa release è possibile eliminare le preferenze con un solo clic mediante una finestra di dialogo:
Per aprire la finestra di dialogo Reimposta preferenze, tenete premuti i tasti di scelta rapida seguenti all’avvio di Dreamweaver:
Usate con cautela l’opzione Reimposta preferenze. Quando reimpostate le preferenze e le impostazioni, tutte le impostazioni personalizzate relative ad aree di lavoro, scelte rapide da tastiera, estensioni e preferenze applicazione vengono rimosse.
In Mac OS, tenete premuto Cmd + Opzione + Maiusc durante l’avvio di Dreamweaver (facendo clic sull’icona di Dreamweaver nel Dock).
In Windows, effettuate le seguenti operazioni:
Andate alla cartella di installazione, individuate Dreamweaver.exe e fate clic sul file.
Tenendo premuti i tasti Windows + Ctrl + Maiusc, fate doppio clic su Dreamweaver.exe.
Accertatevi di tenere premuti i tasti di scelta rapida sopra menzionati, anche quando viene visualizzata la finestra di dialogo Controllo dell’account utente (UAC).
Ora potete importare le impostazioni della versione precedente di Dreamweaver che erano state salvate su Creative Cloud mediante la finestra di dialogo Preferenze. Tutte le impostazioni locali vengono sostituite da quelle importate dal cloud, che vengono applicate all’avvio successivo di Dreamweaver.
Inoltre, da questa release in poi, oltre alle impostazioni che erano sincronizzate in versioni precedenti, anche le impostazioni seguenti vengono sincronizzate con Creative Cloud:
Questa versione di Dreamweaver include vari miglioramenti dell’esperienza d’uso di CSS Designer. Il pannello CSS Designer ora include anche una procedura guidata che permette di imparare velocemente i flussi di lavoro.
L’opzione Modelli sito nella schermata di benvenuto è stata sostituita dai Modelli per iniziare. È possibile accedere ai Modelli sito dalla finestra di dialogo Nuovo documento (File > Nuovo).
Dreamweaver ora include le librerie jQuery aggiornate:
Le pagine di avvio jQuery sono state rimosse.
L’integrazione diretta di Dreamweaver con PhoneGap Build per la compilazione di applicazioni non è supportata nell’ultimo aggiornamento dell’edizione 2014 di Dreamweaver CC (ottobre 2014) e nelle versioni successive.
Tuttavia, potete accedere direttamente al servizio PhoneGap Build online e utilizzare gli ultimi aggiornamenti delle funzioni per creare i pacchetti delle vostre applicazioni Web come applicazioni native per dispositivi mobili.
Accedi al tuo account