Riepilogo delle nuove funzioni

La nuova versione 2014 di Dreamweaver CC include vari miglioramenti della vista Dal vivo e di CSS Designer, che permettono di creare e aggiornare più facilmente i contenuti Web e per dispositivi mobili. La nuova funzione Vista rapida elemento consente di visualizzare, esplorare e modificare rapidamente il codice HTML.

Questo articolo presenta le nuove funzioni e vari altri miglioramenti e fornisce collegamenti a ulteriori risorse di aiuto e apprendimento.

Esaminate il codice del documento con la Vista rapida elemento, che esegue il rendering di una struttura HTML interattiva sia per il contenuto statico che per quello dinamico. Modificate la struttura del contenuto statico direttamente nella vista ad albero HTML. 

La Vista rapida elemento (Visualizza > Vista rapida elemento) è stata introdotta allo scopo di accelerare il processo di sviluppo. Nelle versioni precedenti di Dreamweaver, era necessario evidenziare gli elementi HTML nella vista Dal vivo, passare alla vista Codice e modificare gli elementi. Dopo la modifica, era necessario tornare alla vista Dal vivo per visualizzare in anteprima le modifiche. Ora, con la Vista rapida elemento, potete visualizzare tutti gli elementi della pagina in una singola vista di facile lettura e modificare il contenuto statico direttamente in tale vista.

Per ulteriori informazioni, vedete Vista rapida elemento.

Nuove funzionalità di modifica nella vista Dal vivo

Esaminate e modificate qualsiasi proprietà degli elementi HTML direttamente nella vista Dal vivo e verificate come cambiano aspetto senza aggiornare nulla.  

• Finestra di ispezione Proprietà rapida
• Visualizzazione elemento
• Modifica del testo dal vivo
• Finestra di ispezione Proprietà della vista Dal vivo

Finestra di ispezione Proprietà rapida

La vista Dal vivo ora visualizza una finestra di ispezione delle proprietà rapida per gli elementi HTML presenti nelle pagine. In base all’elemento HTML selezionato, la finestra di ispezione Proprietà rapida consente di modificare gli attributi o il testo direttamente nella vista Dal vivo.

Per ulteriori informazioni, vedete Finestra di ispezione Proprietà della vista rapida.

Visualizzazione elemento

Con la nuova Visualizzazione elemento, ora è 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.

Per ulteriori informazioni, vedete Associare elementi HTML con classi e ID.

Modifica del testo dal vivo

Ora potete modificare il testo direttamente nella vista Dal vivo e visualizzare in anteprima le modifiche senza dover alternare tra viste diverse.

Fate doppio clic sull’elemento di testo nella vista Dal vivo per attivare la modalità di modifica. Per ulteriori informazioni, vedete Modificare il testo direttamente nella vista Dal vivo.

Finestra di ispezione Proprietà della vista Dal vivo

La finestra di ispezione Proprietà ora è disponibile nella vista Dal vivo per consentirvi di apportare modifiche rapide alla pagina senza passare alla vista Codice o Progettazione.

Per maggiori informazioni, vedete Finestra di ispezione Proprietà della vista Dal vivo.

Inserimento dal vivo

In questa release, potete inserire gli elementi HTML direttamente nella vista Dal vivo utilizzando il pannello Inserisci. Gli elementi vengono inseriti in tempo reale senza che sia necessario cambiare modalità di visualizzazione. Potete anche visualizzare in anteprima le modifiche immediatamente. 

Per ulteriori informazioni, consultate Inserire elementi direttamente nella vista Dal vivo.

Miglioramenti a CSS Designer

Interfaccia utente avanzata per il controllo dei bordi

Un controllo a schede che aiuta a impostare tutte le proprietà dei quattro bordi in modo semplice e intuitivo.

• Controllo a schede per evitare la possibilità di confondersi vedendo tutti i valori insieme.
• Icone utili e intuitive che qualsiasi principiante può capire.
• Due serie di icone indicano gli stati non impostato/eliminato e disattivato.
• Una scheda complessiva “tutti i lati” per impostare le proprietà di tutti i bordi contemporaneamente.
• Riga Calcolato che indirizza l’utente alla scheda più appropriata durante la verifica. 

Per ulteriori informazioni, vedete Impostare le proprietà dei bordi.

Copiare e incollare stili

Ora potete copiare gli stili da un selettore e incollarli in un altro. Potete copiare tutti gli stili oppure copiare solo una categoria di stili specifica, ad esempio Layout, Testo o Bordo.

Fate clic con il pulsante destro su un selettore e scegliete una delle opzioni disponibili:  

• Se un selettore non contiene stili, i comandi Copia e Copia tutti gli stili sono disabilitati.
• Il comando Incolla stili è disabilitato per i siti remoti che non possono essere modificati. I comandi Copia e Copia tutti
  gli stili sono invece disponibili.
• Se si incollano stili parzialmente esistenti su un selettore (Sovrapposizione), l’operazione funziona. L’unione
  di tutti i selettori viene incollata.
• Le operazioni di copia-incolla di stili funzionano anche per i concatenamenti di file CSS: importazione, collegamento, stili
  in linea.

Caselle di testo a modifica rapida

Dreamweaver ora include caselle di testo modificabili rapidamente, nelle quali potete specificare il codice stenografico per proprietà quali margine, riempimento, bordo e raggio bordo. Questa modifica è stata introdotta per gli utenti che preferiscono impostare le proprietà specificando il codice anziché usando mouse e tastiera. 

Miglioramenti nel flusso di lavoro delle proprietà personalizzate

In precedenza, era necessario fare clic su + nel riquadro Proprietà di CSS Designer per aggiungere “altre” proprietà (ovvero proprietà personalizzate). Ora è disponibile una serie di caselle di testo - nome e valore proprietà - in fondo all’elenco Proprietà. Queste caselle di testo consentono di digitare direttamente il nome della proprietà e il relativo valore senza dover fare clic su +.

Per aggiungere altre righe di proprietà personalizzate, premete il tasto Tab.

Il nome del gruppo di proprietà “altro” diventa “Personalizzato”.

Scelte rapide da tastiera

Ora potete aggiungere o eliminare i selettori e le proprietà CSS tramite le scelte rapide da tastiera. È anche possibile spostarsi tra i gruppi di proprietà nel riquadro Proprietà.  

Selettori Più specifico/Meno specifico

In questa versione, Dreamweaver fornisce fino a tre (o meno) suggerimenti sulle regole quando si aggiunge un selettore. Potete rendere le informazioni più o meno specifiche utilizzando i tasti freccia su e giù.

Scorrimento diretto alla categoria

In precedenza, quando si faceva clic sulla categoria Sfondo o Altro nella parte superiore del riquadro Proprietà in CSS Designer, queste categorie venivano rese “visibili” nel riquadro, ma non erano visualizzate nella parte superiore del riquadro.

Ora le categorie Sfondo e Altro (rinominata in Personalizzato) vengono visualizzate in cima al riquadro quando le selezionate.

Supporto per connessioni SFTP mediante file di identità

Con la versione 2014 di Dreamweaver CC potete connettervi ai vostri server di pubblicazione via SFTP utilizzando coppie di chiavi privata-pubblica e codici di identificazione (con o senza passphrase). Con questo miglioramento di Dreamweaver, la scelta dei fornitori di servizi di Web hosting diventa più ampia: potete infatti abbonarvi a qualsiasi fornitore che richiede l’utilizzo di coppie di chiavi privata-pubblica per l’autenticazione.

Per ulteriori informazioni, vedete Connessioni SFTP.

Miglioramenti di Annulla/Ripeti

Finora, per annulla o ripristinare un’operazione eseguita nel pannello CSS Designer, era necessario fare clic sul file CSS (nei file correlati) e quindi annullare o ripetere l’operazione. 

Con i nuovi miglioramenti aggiunti alla funzione Annulla/Ripeti, ora potete annullare o ripristinare un’operazione direttamente dalla vista Dal vivo di un documento oppure dal pannello CSS Designer. Le modifiche vengono quindi applicate automaticamente al file CSS associato. Per segnalare che il file correlato è stato modificato, la scheda del file interessato viene evidenziata per qualche istante (circa 8 secondi).

• Quando annullate o ripristinate un’azione dal pannello CSS Designer, la vista Dal vivo viene aggiornata automaticamente.
• Quando modificate il documento utilizzando il codice sorgente e annullate le modifiche dalla vista Dal vivo, la modalità di visualizzazione cambia in Vista combinata e il codice sorgente interessato viene evidenziato e attivato.

Tutte le azioni Annulla/Ripeti vengono registrate a livello del file HTML. Ciò significa che qualsiasi modifica manuale apportata a un file CSS può essere annullata da QUALUNQUE file correlato. Ad esempio, supponiamo che style1.css e style2.css siano correlati a index.html. Se aggiungete gli stili per .h1 in style1.css e quindi eseguite un comando Annulla da style2.css, lo stile .h1 viene eliminato da style1.css.  

Modifiche dei flussi di lavoro Business Catalyst e PhoneGap Build

Business Catalyst e PhoneGap Build ora sono disponibili come add-on per Dreamweaver. Ora installate Business Catalyst e PhoneGap Build come estensioni, dopo di che continuate a utilizzare questi servizi come prima.

Per installare le estensioni Business Catalyst e PhoneGap Build, selezionate Gestisci > Consulta Add-Ons, cercate le estensioni richieste e installatele.

Diverse modalità di accesso alle estensioni in Dreamweaver

Ora potete visualizzare e installare le estensioni di Dreamweaver utilizzando Adobe Creative Cloud. Le estensioni ora sono denominate “Add-ons”.

Per cercare add-on in Adobe Creative Cloud, fate clic su Finestra > Consulta Add-Ons in Dreamweaver. Viene visualizzata la pagina Add-Ons di Adobe Creative Cloud. 

Per ulteriori informazioni sull’installazione degli add-on, vedete Add-Ons.

Modifiche alla sincronizzazione delle impostazioni

La funzione di sincronizzazione delle impostazioni di Dreamweaver permette di mantenere sincronizzate le impostazioni con istanze di Dreamweaver presenti sui computer e in Creative Cloud. La versione 2014 di Dreamweaver CC rileva automaticamente se avete abilitato la sincronizzazione delle impostazioni nella versione precedente di Dreamweaver e vi consente di importare le impostazioni da Creative Cloud.

Quando avviate la versione 2014 di Dreamweaver CC per la prima volta dopo l’installazione, viene visualizzata la seguente finestra di dialogo: 

• Per importare le impostazioni archiviate in Creative Cloud, fate clic su Importa impostazioni sincronizzazione. 

Nota: questa opzione non può essere utilizzata in un secondo momento. 

• Per sincronizzare le impostazioni nell’istanza corrente di Dreamweaver con Creative Cloud, fate clic su Sincronizza locale.
  
• Per sincronizzare automaticamente le impostazioni, selezionate Sincronizza sempre impostazioni automaticamente.
• Per visualizzare le opzioni avanzate di sincronizzazione delle impostazioni, fate clic su Avanzate.

Invio di bug/richieste di funzioni direttamente da Dreamweaver

Ora potete accedere al modulo Wishlist (richiesta di funzioni) e al modulo di segnalazione bug direttamente da Aiuto di Dreamweaver - Invia bug/richiesta di funzione.

Help Center

Scoprite come utilizzare le nuove funzioni e come svolgere le operazioni più comuni in Dreamweaver con il nuovo Help Center. 

A differenza delle versioni precedenti, ora potete facilmente apprendere le nuove funzioni e i flussi di lavoro più efficaci già quando avviate Dreamweaver per la prima volta. Potete saltare il tour delle nuove funzioni o disattivare i messaggi di aiuto nell’applicazione in qualsiasi momento. Se necessario, potete anche riattivarli.

• Panoramica guidata delle nuove funzioni
• Messaggi in-app
• Messaggi nel prodotto
• Disattivare o ripristinare i messaggi in-app e nel prodotto
  

Panoramica guidata delle nuove funzioni

Dreamweaver ora include un mini-tour delle nuove funzioni introdotte nell’ultima versione.
Oltre a illustrare le nuove funzioni, il tour presenta anche una galleria di video nella quale è possibile vedere le nuove funzioni in azione.

La panoramica guidata delle nuove funzioni o l’opzione del mini-tour viene visualizzata non appena
avviate Dreamweaver. Potete anche saltare il tour e andare direttamente alla schermata
di benvenuto per procedere con il lavoro.

Nota: la panoramica guidata delle nuove funzioni viene visualizzata quando installate o aggiornate
Dreamweaver oppure quando eliminate le preferenze e successivamente riavviate Dreamweaver.

Ecco un riepilogo di quello che viene visualizzato nella panoramica guidata delle nuove funzioni:

• Messaggio di benvenuto. Viene inoltre richiesto di specificare se avete utilizzato Dreamweaver CC in precedenza, in modo da personalizzare l’esperienza utente di conseguenza.
• Presentazione e breve descrizione delle singole funzioni (con un’opzione per saltare il tour).
• Galleria video con filmati relativi alle nuove funzioni.

Galleria video

Alla fine della panoramica guidata delle nuove funzioni, viene visualizzata la galleria video
con filmati relativi alle nuove funzioni. Quando si passa con il mouse sulle miniature, appare una breve descrizione del video corrispondente.

Messaggi in-app

Dreamweaver ora fornisce suggerimenti per aumentare la produttività mentre lavorate
sui progetti. Lo scopo di questi suggerimenti è di aiutarvi a svolgere l’attività corrente
in un modo più efficiente.

I messaggi vengono attivati da eventi specifici. Ad esempio, quando fate clic sui selettori di tag
in qualsiasi vista oppure fate clic con il pulsante destro su un elemento per esaminarlo, viene visualizzato il messaggio relativo alla
Vista rapida elemento. La Vista rapida elemento è
una nuovissima funzione che consente di visualizzare e modificare il codice HTML più facilmente rispetto agli altri metodi già provati.

Dopo che avete seguito il suggerimento fornito, il messaggio in-app non viene più visualizzato
per lo stesso tipo di evento. Viene invece visualizzato di nuovo per gli altri “eventi di attivazione”
identificati successivamente.

Potete disattivare la visualizzazione dei messaggi in-app nelle Preferenze. Per ulteriori
informazioni, vedete Disattivare o ripristinare i messaggi in-app e nel prodotto. 

Esempi di messaggi in-app: 

Vista rapida elemento

Eventi di attivazione:

• Clic su un selettore di tag (tutte le viste)
• Dal vivo + Esamina o clic destro + Esamina su un elemento

Messaggio:

Finestra di ispezione Proprietà della vista Dal Vivo per classi e ID 

Eventi di attivazione:

• Modifica di ID mediante la finestra di ispezione Proprietà nella vista Progettazione

Messaggio:

Messaggi nel prodotto

Dreamweaver si integra perfettamente con molte altre applicazioni su Creative Cloud
e i messaggi nel prodotto servono appunto per presentare i flussi di lavoro che combinano più applicazioni. Utilizzando questi
flussi di lavoro, potete sfruttare ancora meglio Adobe Creative Cloud e le relative offerte.

I messaggi nel prodotto sono visualizzati quando vengono rilevati “eventi di attivazione” specifici. Ad esempio, quando
tentate di utilizzare le transizioni CSS, un messaggio nel prodotto suggerisce l’uso del flusso di lavoro “Edge Animate”.

Un messaggio nel prodotto contiene una breve descrizione del flusso di lavoro
alternativo (o migliore) che potreste adottare in uno scenario specifico. Include anche una miniatura video su cui potete fare clic per visualizzare un video esplicativo del flusso
di lavoro suggerito. Il pulsante Altre informazioni vi permette di accedere
a un articolo/blog che fornisce ulteriori informazioni.

I messaggi nel prodotto vengono visualizzati solo la prima volta che si verifica il relativo evento di attivazione.

Esempi di messaggi nel prodotto: 

Edge Animate

Trigger:

• Fate clic su una transizione CSS e poi su +

Messaggio:

Parfait

Evento di attivazione:

• Inserisci immagine > Modifica impostazioni immagine

Messaggio:

Disattivare o ripristinare i messaggi in-app e nel prodotto

Selezionate Preferenze > Accessibilità ed effettuate le seguenti operazioni nella finestra di dialogo visualizzata:

• Per disattivare i messaggi, deselezionate la casella di controllo Mostra Aiuto in-app.

Se abilitate nuovamente i messaggi in seguito, i messaggi già visualizzati
in precedenza non vengono più mostrati. Appariranno solo i messaggi mai visualizzati prima.

• Per visualizzare i messaggi già visti in precedenza, fate clic su Ripristina.

Modifiche al menu Aiuto

Il menu Aiuto è stato riorganizzato per consentire l’accesso rapido alla panoramica guidata delle nuove funzioni, alla galleria video, all’Aiuto e ad altre risorse per l’apprendimento, nonché al modulo di segnalazione bug/richiesta funzione.