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.

Adobe Dreamweaver CC 2014.1.1 (febbraio 2015)

Nuova schermata di benvenuto

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 e tecniche e altro ancora.

Schermata di benvenuto
Schermata di benvenuto

Nota:

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.

Miglioramenti al pannello Extract

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.

Pannello Extract
Pannello Extract

Miglioramenti della modifica nella vista Dal vivo

Trascinamento e rilascio di elementi

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.

Perimetro di selezione

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.

Nota:

nella vista Dal vivo, le sole operazioni con perimetro di selezione supportate sono quelle supportate dal browser.

Miglioramenti a Visualizzazione elemento

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. 

Nuovi temi della vista Codice

Alla vista Codice sono stati aggiunti dieci nuovi temi di colore:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

Per ulteriori informazioni sui temi della vista Codice, consultate Impostare il tema di colore per la vista Codice.

Miglioramenti di CSS Designer

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:

  • Il pannello di CSS Designer scorre durante l'aggiunta di una proprietà: quando fate clic su "+" nella sezione Proprietà, il pannello scorre in modo che la riga Aggiungi proprietà si trovi quasi al centro del pannello Proprietà. Se la sezione Proprietà è troppo piccola, il pannello scorrerà per visualizzare la riga Aggiungi proprietà nella parte inferiore della sezione.
  • Evidenziazione dello sfondo: quando la casella di testo Aggiungi nuova proprietà è attiva, la riga è evidenziata con lo sfondo grigio. 
  • Posizione dei pulsanti "+" e "-": la posizione dei pulsanti "+" e "-" visualizzati in ciascuna sezione del pannello CSS Designer (Origine, Selettori, Media query e Proprietà) sono stati spostati dall'estrema destra a sinistra per renderli più visibili.
  • La categoria "Personalizzato" è ora denominata "Altro".

Debug remoto della vista Dal vivo

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:

  1. Avviate Dreamweaver eseguendo il comando:

    • Windows: <percorso_di_installazione> -enableRemoteDebugging
    • Mac: open <percorso_di_installazione> --args -enableRemoteDebugging

    Nota: digitate due trattini prima di args

  2. Nella finestra di dialogo visualizzata che indica che la porta 5471 è attivata per il debug, fate clic su OK.

    Dreamweaver viene avviato.

    Fate clic su OK nella finestra di dialogo per avviare Dreamweaver
    Fate clic su OK nella finestra di dialogo per avviare Dreamweaver

  3. Aprite i documenti su cui desiderate effettuare il debug nella vista Dal vivo.

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

  5. Per interrompere il debug e aprire Dreamweaver in modalità normale, uscite da Dreamweaver e avviatelo nuovamente.

Altri miglioramenti

Modifiche nel flusso di lavoro di reimpostazione delle preferenze

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.

Reimpostare le preferenze e le impostazioni
Reimpostare le preferenze e le impostazioni

Modifiche nella modalità di visualizzazione dei documenti dinamici

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.

Adobe Dreamweaver CC 2014.1 (ottobre 2014)

Extract in Dreamweaver

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:

  • Accesso diretto ai file PSD su Creative Cloud e ai file PSD che sono stati condivisi con voi in una cartella di collaborazione
  • Suggerimenti contestuali sul codice per definire facilmente caratteri, colori e gradienti nel codice CSS.
  • Supporto per il trascinamento, per creare tag di immagine da livelli PSD
  • Possibilità di incollare gli stili direttamente nella vista Dal vivo (ad esempio, in CSS Designer e nella Visualizzazione elemento)

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.

Pannello Extract area di lavoro predefinita
Pannello Extract

Per ulteriori informazioni sui flussi di lavoro Extract in Dreamweaver, vedete Integrazione di Dreamweaver con Extract.

Architettura a 64 bit

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

Domande frequenti

  • Un'applicazione a 64 bit può essere eseguita su una versione a 32 bit di Windows? - No
  • È possibile installare sia la versione a 32 bit che a 64 bit sullo stesso computer Windows? - No
  • Come si fa per verificare se il sistema esegue una versione a 32 o a 64 bit di Dreamweaver?
    • Windows: avviate Dreamweaver. Aprite Gestione attività e cercate il processo Dreamweaver. Se la build di Dreamweaver avviata è a 64 bit, il nome del processo sarà "Dreamweaver.exe". Se è a 32 bit, il nome di processo sarà "Dreamweaver.exe *32".
    • Mac: aprite Monitoraggio Attività, quindi selezionate Visualizza > Colonne > Tipo. Cercate Dreamweaver in Monitoraggio Attività e osservate la voce nella colonna Tipo. Se Dreamweaver è a 64 bit, la colonna Tipo indica "64 bit".

Installazione della versione a 64 bit di Dreamweaver

  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:

  2. Scaricate la versione a 64 bit di Dreamweaver da Creative Cloud e installate la build.

Miglioramenti della vista Dal vivo

Guide dal vivo

Le Guide dal vivo sono riscontri visivo disponibili nella vista Dal vivo, che indicano le possibili posizioni di inserimento di un elemento nei seguenti scenari:

  • Quando trascinate un elemento dal pannello Inserisci.
  • Quando trascinate un elemento dal pannello Risorse.
  • Trascinare (spostare) elementi nella vista Dal vivo.

Nota:

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.

  • 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 gli elementi correnti
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

Inserimento di precisione di un elemento strutturale

Potete utilizzare la Vista rapida elemento con le Guide dal vivo per inserire un elemento HTML con maggiore precisione 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.

Icona Vista rapida elemento
La Vista rapida elemento facilita gli inserimenti di precisione

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.

Nota:

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.

Modifiche della Visualizzazione elemento

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.

Opzioni Origine CSS e Media query nella Visualizzazione elemento
Opzioni Origine CSS e Media query nella Visualizzazione elemento

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

Opzioni Vai al codice e Incolla stili nella Visualizzazione elemento
Opzioni Vai al codice e Incolla stili nella Visualizzazione elemento

Nota:

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.

Spostare elementi nella vista Dal vivo

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.

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

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

Nota:

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:

  • I tasti freccia Su e Giù per spostarvi tra gli elementi di pagina. La navigazione da tastiera nella vista Dal vivo facilita l'accesso rapido agli elementi nidificati e racchiusi tra tag.
  • Il tasto Tab per spostarvi a rotazione tra i selettori nella Visualizzazione elemento

Per ulteriori informazioni, vedete Navigazione da tastiera nella vista Dal vivo.

Quick Tag Editor 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 tra questi stati mediante il tasto di scelta rapida Ctrl/Cmd + T.

Quick Tag Editor nella vista Dal vivo
Quick Tag Editor nella vista Dal vivo

Modifiche all'area di lavoro di Dreamweaver

Modifica alla barra degli strumenti Documento

Lo barra degli strumenti Documento è stata modificata per semplificarne l'uso.

  • Le opzioni delle viste Progettazione e Dal vivo sono state combinate in un unico controllo (elenco a discesa).
Opzioni delle viste Progettazione e Dal vivo in Dreamweaver CC (ottobre 2014)
Opzioni delle viste Progettazione e Dal vivo nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Pulsanti delle viste Progettazione e Dal vivo nella barra degli strumenti Documento nelle versioni precedenti
Pulsanti delle viste Progettazione e Dal vivo nella barra degli strumenti Documento nelle versioni precedenti

  • Il campo Titolo documento è stato spostato nella finestra di ispezione Proprietà.
Barra degli strumenti Documento in Dreamweaver CC (ottobre 2014)
Barra degli strumenti Documento nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Campo Titolo documento spostato nella finestra di ispezione Proprietà in Dreamweaver CC (ottobre 2014)
Campo Titolo documento spostato nella finestra di ispezione Proprietà nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Campo Titolo nella barra degli strumenti Documento nelle versioni precedenti
Campo Titolo nella barra degli strumenti Documento nelle versioni precedenti

  • I pulsanti della modalità Esamina e della vista Codice dal vivo sono stati sostituiti con icone.
Icone Codice dal vivo e Esamina in Dreamweaver CC (ottobre 2014)
Icone Codice dal vivo e Esamina nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Pulsanti Codice dal vivo e Esamina nelle versioni precedenti
Pulsanti Codice dal vivo e Esamina nelle versioni precedenti

  • Le opzioni Indietro, Avanti e Aggiorna sono state raggruppate con la barra dell'indirizzo e collocate al centro della barra degli strumenti Documento.
Barra dell'indirizzo con opzioni Indietro, Avanti e Aggiorna in Dreamweaver CC (ottobre 2014)
Barra dell'indirizzo con opzioni Indietro, Avanti e Aggiorna nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Barra dell'indirizzo con le opzioni Indietro, Avanti e Aggiorna nelle versioni precedenti
Barra dell'indirizzo con le opzioni Indietro, Avanti e Aggiorna nelle versioni precedenti

  • Le icone Anteprima/debug nel browser, Opzioni vista Dal vivo e Gestione file sono state raggruppate e allineate sulla destra della barra degli strumenti Documento.
Icone Anteprima/debug nel browser, Opzioni vista Dal vivo e Gestione file in Dreamweaver CC (ottobre 2014)
Icone Anteprima/debug nel browser, Opzioni vista Dal vivo e Gestione file nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Icone Anteprima, Debug nel browser, Opzioni vista Dal vivo e Gestione file nelle versioni precedenti
Icone Anteprima, Debug nel browser, Opzioni vista Dal vivo e Gestione file nelle versioni precedenti

Modifiche dell'area di lavoro predefinita

Le aree di lavoro preimpostate disponibili in Dreamweaver sono cambiate nel modo seguente:

  • Codice
  • Progettazione
  • Extract
Aree di lavoro
Aree di lavoro

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.

Area di lavoro Extract
Area di lavoro Extract

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.

  • PHP
  • Modello PHP (Example.dwt.php)
  • ASP
  • Modello ASP (Example.dwt.asp)
  • JSP
  • Modello JSP (Example.dwt.jsp)
  • CFM
  • Modello CFM (Example.dwt.php)
Vista predefinita per i documenti HTML con viste Dal vivo e Codice
Vista predefinita per i documenti HTML con viste Dal vivo e Codice

Vista predefinita per i documenti dinamici con vista Codice completa
Vista predefinita per i documenti dinamici con vista Codice completa

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, deselezionare 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.

Modifiche ai documenti a griglia fluida

Supporto per la modifica nella vista Dal vivo

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.

Opzioni della griglia fluida nelle versioni precedenti
Opzioni della griglia fluida nelle versioni precedenti

Opzioni della griglia fluida con Visualizzazione elemento in Dreamweaver CC 2014 (ottobre 2014)
Opzioni per i documenti a griglia fluida con Visualizzazione elemento nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)


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.

Barra degli strumenti Documento in Dreamweaver CC (ottobre 2014)
Barra degli strumenti Documento nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Barra degli strumenti Documento di un documento a griglia fluida nelle versioni precedenti
Barra degli strumenti Documento di un documento a griglia fluida nelle versioni precedenti

Per ulteriori informazioni sui documenti a griglia fluida, vedete Responsive design con i layout a griglia fluida.

Modifiche al flusso di lavoro Inserisci

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.

Modifica dell'opzione Gestisci elementi nascosti

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. 

Opzione Gestisci elementi nascosti nel menu di scelta rapida in Dreamweaver CC (ottobre 2014)
Opzione Gestisci elementi nascosti nel menu di scelta rapida nell'ultimo aggiornamento - Dreamweaver CC (ottobre 2014)

Icona "occhio" per la gestione degli elementi nascosti nelle versioni precedenti
Icona "occhio" per la gestione degli elementi nascosti nelle versioni precedenti

Temi di colore pronti per la vista Codice

Ora potete scegliere uno dei seguenti temi di colore già pronti disponibili per la vista Codice:

  • Classic (predefinito; come nelle versioni precedenti di Dreamweaver)
  • Raven
  • Slate
  • Blanche
  • Geneva
Temi Classic, Raven, Slate, Blanche e Geneva
Temi Classic, Raven, Slate, Blanche, e Geneva

Utilizzate le preferenze di colorazione del codice per specificare un tema per la vista Codice. Potete personalizzare il tema scegliendo schemi di colore diversi 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.

Nota:

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.

Sincronizzazione tra vista Codice e vista Dal vivo

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):

  • Operazioni sul testo quali Taglia, Copia, Incolla, Elimina, Annulla/Ripeti.
  • Spostamento di elementi nella Vista rapida elemento quando è attiva la vista Codice.
  • Digitazione nella vista Codice.
  • Azioni Elimina/Duplica/Copia/Incolla nella Vista rapida elemento (opzioni del menu di scelta rapida).
  • Operazioni nella finestra di ispezione Proprietà, quali formattazione del testo (grassetto/corsivo), modifica della classe, dell'ID, del formato e delle proprietà di pagina, applicazione di caratteri.
  • Aggiunta ed eliminazione di classi o ID utilizzando i suggerimenti codice nella vista Codice.
  • Inserimento di elementi quali Div, immagini, collegamenti ipertestuali ed elementi strutturali dal pannello Inserisci alla vista Codice.
  • Aggiunta e modifica di stili CSS nel tag <style>. 
  • Modifica del codice nei file CSS.

Nota:

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 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:

  • Trascinate o inserite risorse (immagini, URL, colori o elementi multimediali) dal riquadro di anteprima o dalla vista elenco del pannello Risorse.

Nota: potete trascinare risorse dal riquadro di anteprima solo su Mac.

  • Copiare un valore del colore e incollarlo in qualsiasi campo di testo in Dreamweaver, ad esempio nelle proprietà di CSS Designer, nella vista Codice, nel selettore colore anche in altre applicazioni come Blocco note.

Nota:

 

  • Poiché le categorie Script, Modello e Libreria sono più rilevanti nella vista Codice, sono state nascoste nel pannello Risorse della vista Dal vivo.
  • In questa versione di Dreamweaver CC, le categorie Flash e Filmati sono combinate in un'unica categoria denominata "Oggetto multimediale".
         

Il pannello Risorse nella vista Dal vivo
Il pannello Risorse nella vista Dal vivo

Il pannello Risorse nelle viste Codice e Progettazione
Il pannello Risorse nelle viste Codice e Progettazione


Per istruzioni dettagliate su come utilizzare il pannello Risorse, vedete Operazioni con le risorse.

Nuovi modelli campione

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):

  • Pagina Info su
  • Post del blog
  • eCommerce
  • E-mail
  • Portfolio
Nuovi modelli campione reattivi
Nuovi modelli campione reattivi

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.

Ripristino delle preferenze all'avvio

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:

Reimposta preferenze
Reimposta preferenze

Per aprire la finestra di dialogo Reimposta preferenze, tenete premuti i tasti di scelta rapida seguenti all'avvio di Dreamweaver:

  • (Win) tasto Windows + Ctrl + Maiusc
  • (Mac) Cmd + Opzione + Maiusc

Nota:

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:

  1. Andate alla cartella di installazione, individuate Dreamweaver.exe e fate clic sul file.

  2. 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 User Account Control (UAC). 

Altri miglioramenti

Modifiche alla sincronizzazione delle impostazioni

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.

Importare impostazioni da versioni precedenti di Dreamweaver
Importare impostazioni da versioni precedenti 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:

Modifiche a CSS Designer

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.

Modifiche della schermata di benvenuto

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

Aggiornamenti della versione jQuery

Dreamweaver ora include le librerie jQuery aggiornate:

  • Da jQuery - 1.8.3 a jQuery - 1.11.1
  • Da interfaccia utente jQuery UI - 1.9.2 a interfaccia utente jQuery UI - 1.10.4

Le pagine di avvio jQuery sono state rimosse.

Aggiornamento di PhoneGap

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. Per ulteriori informazioni, consultate Uso di PhoneGap Build con l'ultimo aggiornamento di Dreamweaver CC 2014.

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