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.

Vista rapida elemento

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. 

Vista rapida elemento
Vista rapida elemento

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

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.

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

Finestra di ispezione Proprietà della vista Dal vivo per la formattazione del testo
Finestra di ispezione Proprietà rapida per la formattazione del testo


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.

Visualizzazione elemento per la modifica di classi e ID
Visualizzazione elemento per la modifica di classi e ID

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.

Modificare il testo direttamente nella vista Dal vivo. Modifica del testo dal vivo.
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.

Finestra di ispezione Proprietà della vista Dal vivo
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, vedete Inserire elementi direttamente nella vista Dal vivo.

Trascinare e rilasciare nella vista Dal vivo dal pannello Inserisci
Trascinare e rilasciare nella vista Dal vivo dal pannello Inserisci

Miglioramenti di 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. 
Proprietà di controllo dei bordi prima della versione 2014 di Dreamweaver CC
Proprietà di controllo dei bordi prima della versione 2014 di Dreamweaver CC

Proprietà di controllo dei bordi nella versione 2014 di Dreamweaver CC
Proprietà di controllo dei bordi nella versione 2014 di Dreamweaver CC


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 dalle opzioni disponibili: 

Copia di stili con CSS Designer
Copia di stili con CSS Designer

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

Caselle di testo a modifica rapida
Caselle di testo a modifica rapida

Specificare le proprietà
Specificare le proprietà


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

Caselle di testo per aggiungere nome e valore della proprietà
Caselle di testo per aggiungere nome e valore della proprietà

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

Scelta rapida Flusso di lavoro
CTRL + Alt + [Maiusc =] Aggiunge il selettore (se il controllo è nella sezione del selettore)
CTRL + Alt+ S Aggiunge il selettore (se il controllo è in un punto qualsiasi dell'applicazione)
CTRL + Alt + [Maiusc =] Aggiunge la proprietà (se il controllo è nella sezione della proprietà)
CTRL + Alt+ P Aggiunge la proprietà (se il controllo è in un punto qualsiasi dell'applicazione)
Selezione + Canc Elimina il selettore, se è selezionato
CTRL + Alt + (PgSu/PgGiù) Salto di sezione - se ci si trova nel sottopannello delle 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ù.

Selettori Più specifico/Meno specifico
Selettori Più specifico/Meno specifico

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.

Scorrimento diretto alla categoria
Scorrimento diretto alla categoria

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.

Nota:

Dreamweaver supporta solo i file di chiave OpenSSH.

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.  

Nota:

per annullare o ripristinare le modifiche nei file JavaScript, passate al file JS corrispondente e quindi selezionate Annulla o Ripeti. 

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-on”.

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. 

Finestra > Estensioni in Dreamweaver CC 13.0
Finestra > Estensioni in Dreamweaver CC 13.0

Finestra > Consulta Add-Ons in Dreamweaver CC 2014
Finestra > Consulta Add-Ons nella versione 2014 di Dreamweaver CC


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: 

Importazione delle impostazioni sincronizzate
Importazione delle impostazioni sincronizzate

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

Invia bug/richiesta di funzione nel menu Aiuto
Invia bug/richiesta di funzione nel menu Aiuto

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

Dreamweaver ora include un mini-tour delle nuove funzioni introdotte nell'ultima versione.
Oltre a illustrare le nuove funzioni, il tour presenta anche a 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.

Tour delle nuove funzioni
Tour delle nuove funzioni

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

Galleria video
Galleria video

Nota:

potete accedere in qualsiasi momento alla panoramica guidata delle nuove funzioni
e alla galleria video mentre utilizzate Dreamweaver. Basta aprire il menu Aiuto o la schermata di benvenuto e fare clic sull'opzione richiesta.

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:

Messaggio Vista rapida elemento
Messaggio Vista rapida elemento

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:

Messaggio vista Dal vivo
Messaggio vista Dal vivo

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.

Nota:

per visualizzare nuovamente i messaggi, potete reimpostare l'impostazione dell'Aiuto in-app in Preferenze.
Per ulteriori informazioni, vedete Disattivare o ripristinare i messaggi in-app e nel prodotto

Esempi di messaggi nel prodotto: 

Edge Animate

Evento di attivazione:

  • Fate clic su una transizione CSS e poi su +

Messaggio:

Messaggio Edge Animate
Messaggio Edge Animate

Parfait

Evento di attivazione:

  • Inserisci immagine > Modifica impostazioni immagine

Messaggio:

Modifica impostazioni immagine
Modifica impostazioni immagine

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.
disattivare i suggerimenti. disattivare i messaggi in-app.
Preferenze per disattivare o ripristinare l'Aiuto in-app

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.

Menu Aiuto prima di Dreamweaver CC 2014
Menu Aiuto prima della versione 2014 di Dreamweaver CC

Menu Aiuto in Dreamweaver CC 2014
Menu Aiuto nella versione 2014 di Dreamweaver CC


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