Riepilogo delle nuove funzioni - Maggio 2015

Media Query visive

Supporto per il linting del codice

Con questa nuova versione di Dreamweaver, è ora possibile eseguire il debug del codice per individuare gli errori più comuni utilizzando il linting. Il linting consiste nell'eseguire un programma che contrassegna i potenziali errori nel codice. Dreamweaver può eseguire questo comando su file HTML, CSS e JavaScript durante il caricamento, il salvataggio o la modifica. Gli avvisi e gli errori rilevati vengono quindi elencati nel nuovo pannello Output.

Per ulteriori informazioni, vedete Codice di linting.

Supporto per Emmet

Siete sviluppatori molto produttivi che sviluppate diverse righe di codice con Dreamweaver? Con le abbreviazioni di Emmet potrete risparmiare tempo prezioso: sono facili da ricordare e da digitare e vengono sostituite dal codice completo con la semplice pressione del tasto Tab nella vista Codice.

Per informazioni dettagliate, vedete Inserire codice utilizzando Emmet.

Preprocessori CSS

Anteprima immagine e colore nella vista Codice

Anteprima immagine

Dreamweaver consente ora di visualizzare in anteprima le immagini nella vista Codice passando il mouse sopra l'URL dell'immagine.

È possibile visualizzare le anteprime delle immagini per percorsi remoti quali < img src = "https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" / >.

Se Dreamweaver non è in grado di visualizzare l'anteprima di un percorso remoto, viene visualizzato il messaggio “Impossibile caricare l'immagine”.

È possibile visualizzare un'anteprima per i seguenti tipi di file di immagine:

JPEG
JPG
PNG
GIF
BMP
SVG

L'anteprima dell'immagine viene visualizzata passando il mouse su un URL nei seguenti casi:

• url( );
• data-uri( )
• Valore dell'attributo SRC del tag img

Anteprima colore

L'anteprima delle risorse nella vista Codice è stata ulteriormente migliorata. Dreamweaver consente ora di visualizzare in anteprima i colori nella vista Codice passando il mouse sopra i valori dei colori. Di seguito sono riportati i formati supportati:

Valori di colore esadecimali a 3 e 6 cifre: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Nomi di colori predefiniti: Olive, Teal, red, etc;

Nuovi snippet di codice

Gli snippet sono parti di codice che possono essere riutilizzati ripetutamente in più progetti. In questa release di Dreamweaver sono presenti snippet di codice nuovi e aggiornati:

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• Snippet JavaScript (aggiornamento)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

Per informazioni sull'utilizzo degli snippet di codice, vedete Operazioni con gli snippet di codice.

Integrazione con Bootstrap

Potete ora aprire i siti Web creati utilizzando il framework di Bootstrap (versione 3 e successive) in Dreamweaver e modificarne le pagine utilizzando funzionalità di progettazione di codice e di grafica. Dreamweaver riconosce i file CSS associati se i relativi nomi contengono il termine “bootstrap”. 

Potete inoltre aggiungere componenti di Bootstrap in Dreamweaver (pannello Inserisci) e modificare il design di finestre di visualizzazione diverse modificando le griglie in modo semplice e veloce.

Per informazioni dettagliate, vedete Operazioni con i file Bootstrap.

Modelli campione di Bootstrap

Dreamweaver ora include modelli Bootstrap che aiutano l'utente a realizzare più facilmente e velocemente elementi in responsive design. È possibile accedere ai seguenti modelli Bootstrap dalla finestra di dialogo Nuovo documento:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Ripiegamento del codice

Il ripiegamento del codice è ora possibile nei file HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML e SVG basati su blocchi di tag. Quando passate il mouse sulla colonna del numero di riga, nella vista Codice viene visualizzato accanto ai numeri di riga un piccolo triangolo su cui è possibile fare clic per comprimere o espandere i blocchi di codice. Questa nuova funzionalità di ripiegamento sostituisce la funzionalità esistente, basata sulla selezione.

Le icone di ripiegamento del codice (triangoli capovolti) vengono visualizzate per tutti i blocchi di tag che hanno più di due righe di codice nella vista Codice.

Le operazioni Copia, Taglia e Incolla e il trascinamento non modificano lo stato di ripiegamento del codice. Ad esempio, quando copiate un blocco di codice compresso, l'operazione Incolla incollerà lo stesso blocco compresso.

Ripiegamento del codice nei file HTML

A differenza della precedente funzionalità di compressione del codice, il contenuto compresso conterrà ora il tag di chiusura e sarà riprodotto in maniera diversa rispetto all'implementazione precedente.

Il numero di caratteri visualizzati in un blocco di codice compresso è maggiore. In questo modo è più semplice visualizzare l'anteprima degli attributi iniziali, se presenti, nel blocco di tag compresso. Se ad esempio il tag Div compresso contiene attributi ID e classe, il blocco compresso avrà l'aspetto seguente:

In Windows, è possibile visualizzare in anteprima il codice all'interno di un blocco compresso passando il mouse sopra il codice compresso. Il blocco compresso si espande automaticamente quando il codice al suo interno diviene attivo a causa di Selettore di riga, Trova e sostituisci, Vai alla riga, Vista rapida elemento, vista Dal vivo o Annulla/Ripeti. Quando il blocco di codice non è più attivo, viene compresso automaticamente.

Ripiegamento del codice nei file CSS, LESS, SASS, SCSS e JS

Ora potete comprimere i blocchi di codice racchiusi tra parentesi graffe nei file CSS, Less, Sass, SCSS e JS files.

È sufficiente passare il mouse su un'area di codice compresso di una riga che contenga le parentesi graffe “{” di apertura.

Facendo clic su Comprimi, viene compresso tutto il codice compreso tra le graffe; l'anteprima visualizza "{...}".

Ripiegamento del codice nei file PHP

Nei file PHP, oltre a blocchi di codice PHP, potete comprimere anche gli elementi HTML e CSS e i blocchi di codice JS.

Potete comprimere tutti i blocchi di codice PHP che iniziano con “<?php” e terminano con “?>”.

È sufficiente passare il mouse su un'area di codice compresso di una riga che contenga “<?php” e fare clic sull'icona Comprimi per comprimere il codice blocco codice.