Giugno 2015 Il contenuto di alcune pagine collegate potrebbe essere disponibile solo in inglese. Aiuto di Adobe® Dreamweaver® CC Sommario Novità 1 Riepilogo delle nuove funzioni 2 Creative Cloud 17 App desktop Creative Cloud 18 Sfogliare, sincronizzare e gestire risorse 27 Aggiungere font da Typekit 32 Creative Cloud Market 38 Creative Cloud Extract 42 Creative Cloud Libraries 45 Area di lavoro e flusso di lavoro 51 Flusso e area di lavoro di Dreamweaver 52 Personalizzazione dell'area di lavoro di Dreamweaver 65 Operazioni con la finestra del documento 75 Uso delle barre degli strumenti, delle finestre di ispezione e dei menu di scelta rapida 79 Utilizzare il pannello Inserisci 81 Pannello CSS Designer 85 Pannello DOM 94 Eseguire ricerche nei file in base al nome file o al contenuto | Mac OS 98 Ingrandire e ridurre con lo zoom 99 Scelte rapide da tastiera 101 Ottimizzazione dell'area di lavoro per lo sviluppo visivo 103 Integrazione di CEF 106 Gestione del sito 110 Informazioni sui siti di Dreamweaver 111 Informazioni sui siti dinamici 113 Configurare una versione locale del sito 114 Connettersi a un server remoto 115 Opzioni della finestra di dialogo Gestisci siti 126 Configurare un server di prova 128 Controllo delle versioni e impostazioni avanzate 132 Importare ed esportare le impostazioni di un sito Dreamweaver 134 Modificare un sito Web remoto esistente 136 Impostare le preferenze del sito per il trasferimento di file 137 Specificare le impostazioni del server proxy 138 Gestione dei file 140 Creazione e apertura dei documenti 141 Gestione di file e cartelle 154 Scaricamento e caricamento dei file da e verso il server 161 Deposito e ritiro dei file 165 Sincronizzare i file 172 Comparazione di file per verificare le differenze 174 Applicazione della maschera file a file e cartelle del sito Dreamweaver 177 Archiviazione delle informazioni sui file nelle Design Notes 180 Verifica del sito Dreamweaver 183 Layout e progettazione 186 Uso di riferimenti visivi per il layout 187 Uso dei frame 190 Creazione del layout delle pagine con i CSS 200 Operazioni con i file Bootstrap 205 Media query visive 213 Responsive design con i layout a griglia fluida 217 Presentazione del contenuto mediante le tabelle 220 Uso dei widget di interfaccia utente jQuery in Dreamweaver 238 Uso di effetti jQuery in Dreamweaver 239 Colori 241 CSS 243 Nozioni sui fogli di stile CSS 244 Pannello CSS Designer 248 Impostare le preferenze per gli stili CSS 257 Creare una regola CSS 258 Impostare le proprietà CSS 259 Modificare una regola CSS 266 Aggiungere una proprietà a una regola CSS 267 Applicare, eliminare o rinominare gli stili di classe CSS 268 Spostare/esportare regole CSS 270 Convertire CSS in linea in una regola CSS 272 Collegare un foglio di stile CSS esterno 273 Modificare un foglio di stile CSS 274 Formattare il codice CSS 275 Disattivare/attivare i CSS 277 Esaminare i CSS nella vista Dal vivo 278 Verificare i problemi di rendering CSS nei browser 279 Utilizzare i fogli di stile Fase di progettazione 281 Operazioni con i tag div 282 Applicare sfumature allo sfondo 299 Effetti di transizione CSS3 302 Usare i fogli di stile di esempio di Dreamweaver 304 Il pannello Stili CSS 305 Contenuto di pagina e risorse 309 Impostare le proprietà di pagina 310 Impostare le proprietà dei collegamenti CSS per un'intera pagina 312 Impostare le proprietà di intestazione CSS per un'intera pagina 313 Impostare le proprietà del titolo e della codifica della pagina 314 Uso di un'immagine di ricalco per la progettazione della pagina 315 Nozioni sulla codifica dei documenti 316 Selezionare e visualizzare gli elementi nella finestra del documento 317 Colori 319 Ingrandire e ridurre con lo zoom 321 Impostare le preferenze relative alle dimensioni e al tempo di scaricamento 323 Operazioni con il testo 324 Testo in arabo e in ebraico 334 Modifica nella vista Dal vivo 336 Pannello DOM 347 Definire le proprietà del testo nella finestra di ispezione Proprietà 351 Eseguire il controllo ortografico di una pagina Web 355 Importare dati di tabella 356 Importazione di documenti di Microsoft Office (solo Windows) 357 Creare un collegamento a un documento Word o Excel 358 Utilizzare la formattazione HTML 359 Utilizzare i filetti orizzontali 361 Modificare le combinazioni di caratteri 362 Aggiungere caratteri Edge Web Fonts all'elenco Caratteri 363 Inserire date 365 Operazioni con le risorse 366 Creazione e gestione di un elenco di risorse preferite 372 Inserire e modificare le immagini 374 Aggiunta di oggetti multimediali 385 Aggiunta di video 391 Inserire video HTML5 396 Inserimento di file SWF 398 Aggiunta di widget Web 401 Aggiunta di audio 402 Inserire audio HTML5 404 Automatizzazione delle operazioni 406 Informazioni sulle risorse e le librerie 411 Operazioni con le voci di libreria 412 Collegamenti e navigazione 416 Informazioni sui collegamenti e sulla navigazione 417 Collegamenti 419 Menu di collegamento 428 Barre di navigazione 430 Mappe immagine 431 Risoluzione dei problemi relativi ai collegamenti 433 jQuery 435 Uso dei widget di interfaccia utente jQuery in Dreamweaver 436 Uso di effetti jQuery in Dreamweaver 437 Anteprima 439 Visualizzare in anteprima ed esaminare pagine Web su più dispositivi 440 Anteprima delle pagine 444 Codifica 448 Informazioni generali sul codice in Dreamweaver 449 Impostazione dell'ambiente di codifica 454 Impostazione delle preferenze di codifica 456 Scrivere e modificare il codice 465 Compressione del codice 487 Comando Lint 489 Ottimizzare il codice 492 Modifica del codice nella vista Progettazione 498 Operazioni con il contenuto head delle pagine 503 Operazioni con le server-side include 507 Gestione delle librerie di tag 509 Importazione di tag personalizzati in Dreamweaver 512 JavaScript 514 Uso dei comportamenti JavaScript (istruzioni generali) 515 Applicazione di comportamenti JavaScript incorporati 518 Interazione con altri prodotti 527 Moduli aggiuntivi 528 Integrazione tra applicazioni diverse 532 Operazioni con Fireworks e Dreamweaver 533 Operazioni con Flash e Dreamweaver 538 Utilizzo di Adobe Bridge e Dreamweaver 539 Operazioni con Device Central e Dreamweaver 541 Operazioni con ConnectNow e Dreamweaver 542 Estensione AIR per Dreamweaver 543 Uso di Dreamweaver con i servizi Adobe Online 548 Extract in Dreamweaver CC 553 Integrazione tra Dreamweaver e Business Catalyst 565 Importazione di documenti di Microsoft Office (solo Windows) 568 Utilizzo di Photoshop e Dreamweaver 569 Modelli 575 Informazioni sui modelli di Dreamweaver 576 Riconoscere i modelli e i documenti basati sui modelli 580 Creazione di un modello di Dreamweaver 583 Creazione di aree modificabili nei modelli 586 Creazione di aree ripetute nei modelli 588 Uso delle aree opzionali nei modelli 590 Definizione di attributi di tag modificabili nei modelli 592 Creazione di un modello nidificato 594 Modifica, aggiornamento ed eliminazione dei modelli 597 Esportazione e importazione del contenuto di un modello 600 Applicazione o rimozione di un modello da un documento esistente 602 Modificare il contenuto di un documento basato su un modello 604 Sintassi dei modelli 606 Impostazione delle preferenze di authoring per i modelli 608 Dispositivi mobili e multischermo 610 Creazione di media query 611 Cambiare l'orientamento della pagina per i dispositivi mobili 614 Creazione di applicazioni Web per dispositivi mobili (CS5.5) 615 XML 616 Informazioni su XML e XSLT 617 Esecuzione di trasformazioni XSL sul server 622 Esecuzione di trasformazioni XSL sul client 636 Entità carattere mancanti per XSLT 638 Siti, pagine e moduli Web dinamici 640 Nozioni sulle applicazioni Web 641 Configurare il computer per lo sviluppo di applicazioni 647 Connessioni di database per sviluppatori ColdFusion 651 Connessioni di database per sviluppatori ASP 653 Connessioni di database per sviluppatori PHP 661 Risoluzione dei problemi relativi alle connessioni di database 663 Eliminazione di script di connessione 667 Ottimizzazione dell'area di lavoro per lo sviluppo visivo 668 Progettazione di pagine dinamiche 671 Panoramica sulle origini di contenuto dinamico 673 Definizione delle origini di contenuto dinamico 678 Aggiungere contenuto dinamico alle pagine 690 Modifica del contenuto dinamico 693 Visualizzare i record di database 695 Visualizzazione Live Data 704 Aggiunta di comportamenti server personalizzati 705 Creazione di moduli 714 Uso di moduli per raccogliere informazioni dagli utenti 715 Creazione di moduli ColdFusion 718 Creazione di moduli Web 732 Supporto HTML5 avanzato per gli elementi modulo 743 Sviluppo visivo delle applicazioni 746 Creazione di pagine principali e di dettaglio 747 Creazione di pagine di ricerca e di risultati 754 Creazione di una pagina di inserimento record 759 Creazione di una pagina di aggiornamento record 763 Creazione di una pagina di eliminazione record 768 Creazione di pagine con oggetti di manipolazione dati avanzati (ColdFusion, ASP) 775 Creazione di una pagina di registrazione 780 Creazione di una pagina di login 782 Creazione di una pagina accessibile solo agli utenti autorizzati 784 Protezione di una cartella dell'applicazione (ColdFusion) 787 Uso dei componenti ColdFusion 788 Accessibilità 794 Dreamweaver e l'accessibilità 795 Dreamweaver e Creative Cloud 798 Sincronizzare le impostazioni di Dreamweaver con Creative Cloud 799 Novità 1 Riepilogo delle nuove funzioni Adobe Dreamweaver CC (versione 2015) Novità Cosa è cambiato Anteprima dispositivo Media query visive Supporto per il linting Supporto Emmet Anteprima nella vista Codice Nuovi snippet di codice Integrazione con Bootstrap Nuovi menu nella vista Dal vivo Supporto per le tabelle nella vista Dal vivo Ripiegamento del codice Miglioramenti a Extract Miglioramenti della modifica nella vista Dal vivo Modifiche della barra degli strumenti Codifica Miglioramenti a CSS Designer Server di prova - Miglioramenti al flusso di lavoro Modifiche al flusso di lavoro di Business Catalyst Altre modifiche La versione 2015 di Dreamweaver CC è incentrata sulla progettazione reattiva, sui miglioramenti alle funzioni di modifica del codice, sull'anteprima delle pagine Web sui dispositivi e sull'estrazione in batch da composizioni di Photoshop di immagini ottimizzate per il Web con più risoluzioni. L'integrazione con il framework Bootstrap consente di creare siti Web reattivi per dispositivi mobili. Le media query visive integrano ulteriormente l'esperienza di progettazione per il Web reattivo consentendo di visualizzare e modificare le progettazioni in vari punti di interruzione. Questa versione include anche diversi miglioramenti delle funzioni di modifica nella vista Dal vivo e CSS Designer. Questo articolo presenta le nuove funzioni e i miglioramenti e fornisce collegamenti a ulteriori risorse di aiuto e apprendimento. La patch per la versione 2015 di Dreamweaver CC, pubblicata a luglio, consente a Dreamweaver di utilizzare le impostazioni del server proxy specificate nell'app desktop Adobe Creative Cloud. Per ulteriori informazioni, vedete Specificare le impostazioni del server proxy. 2 Supporto per gli elementi dell'interfaccia utente jQuery nella vista Dal vivo Pannello DOM Suggerimenti di codice SVG nei documenti HTML Anteprime tecnologia Anteprima personalizzata nella vista Codice utilizzando le API di ShowPreview Torna all’inizio Dreamweaver consente ora di provare le pagine Web prodotte su più dispositivi contemporaneamente. Potete vedere come la pagina Web rifluisce con diversi fattori di forma e provare le funzioni interattive sulle pagine. Tutto questo senza dover installare nessuna app per dispositivi mobili o senza dover connettere fisicamente i dispositivi al desktop. Acquisite semplicemente il codice QR generato automaticamente con i dispositivi e visualizzate in anteprima le pagine Web sui dispositivi. Esercitazione video: anteprima e verifica su dispositivi mobili (provatela, 3 min) Scoprite come visualizzare in anteprima e verificare i progetti Web nei browser per dispositivi mobili con i dispositivi stessi. Torna all’inizio Anteprima dispositivo Live Inspect, quando attivato sul desktop, riflette tutti i dispositivi connessi e consente di ispezionare i diversi elementi e di modificare le progettazioni secondo necessità. Per informazioni dettagliate, vedete Visualizzare in anteprima ed esaminare pagine Web su più dispositivi. Media query visive Le barre media query visive sono una rappresentazione visiva delle media query presenti nella pagina. Queste barre consentono di visualizzare, in diversi riquadri di visualizzazione, la pagina Web in diversi punti di interruzione e come diversi componenti nella pagina Web si riadattano. Osservando la pagina nei diversi riquadri di visualizzazione, potete modificare il design specifico a un riquadro di visualizzazione senza influire sul design della pagina in altri riquadri di visualizzazione. Le media query visive comprendono tre barre come righe orizzontali, ciascuna rappresentante una categoria di media query: Verde: media query con condizioni max-width Blu: media query con condizioni min-width e max-width Viola: media query con condizioni min-width Media query visive 3 Torna all’inizio Torna all’inizio 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. Esercitazione video: completamento e convalida avanzati del codice (provatela, 2 min) Scoprite come completare automaticamente semplici abbreviazioni in snippet di codice HTML e CSS complesso con il supporto per Emmet e utilizzare la convalida avanzata del codice per evidenziare errori in tempo reale con il supporto per Lint. Torna all’inizio Per ulteriori informazioni, vedete 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 è il processo di analisi del codice per trovare potenziali errori o utilizzi sospetti del 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. Il pannello Output con i risultati di linting Supporto per Emmet Anteprima in vista Codice Se lavorate nella vista Dividi, potete vedere immediatamente qualsiasi modifica alle immagini o ai colori nella vista Dal Vivo o Progettazione. Quando però preferite lavorare solo nella vista Codice, le immagini sono solo nomi di file, e questo spesso non è intuitivo. Anche i colori, a meno che non si utilizzino colori predefiniti, sono solo un insieme oscuro di numeri. Con questa versione di Dreamweaver, potrete rapidamente vedere in anteprima le immagini e i colori direttamente nella vista Codice. Questa funzione consente di connettere 4 Torna all’inizio visivamente i nomi file delle immagini e i formati dei colori con le immagini o i colori attuali da essi rappresentati. Le decisioni di progettazione potranno di conseguenza essere prese con maggiore rapidità, riducendo drasticamente i tempi di sviluppo. Per ulteriori informazioni, vedete Anteprima di immagini e colori nella vista Codice. Anteprima immagini nella vista Codice Anteprima colori nella vista Codice La vista Codice visualizza anche un’anteprima dell’errore. Il numero di riga contenente il codice errato, è evidenziata in rosso. Quando si passa con il mouse sul numero, appare una breve descrizione dell’errore. Nota: viene visualizzato solo il primo errore nella riga. Se la riga contiene solo un avviso, ne viene visualizzata la descrizione. Se la riga contiene un avviso e un errore, viene visualizzata solo la descrizione dell'errore. 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. 5 Torna all’inizio Bootstrap è il più diffuso framework HTML, CSS e JavaScript gratuito per lo sviluppo di siti Web reattivi e per dispositivi mobili. Il framework include modelli CSS e HTML reattivi per pulsanti, tabelle, elementi di navigazione, caroselli di immagini e altri elementi che è possibile utilizzare nelle pagine Web. Sono inoltre disponibili alcuni plug-in JavaScript aggiuntivi, che consentono anche agli meno esperti di creare siti Web reattivi di grande impatto. Dreamweaver consente di creare documenti Bootstrap e anche di modificare pagine Web esistenti create con Bootstrap. Potete iniziare a progettare il vostro sito Web Bootstrap utilizzando uno dei modelli campione di Bootstrap selezionabile dalla finestra di dialogo Nuovo documento (Modelli per iniziare > Bootstrap Templates). Esercitazione video: creare siti Web reattivi in Dreamweaver CC (durata, 3 min) Informazioni su come utilizzare le funzionalità responsive web design per creare siti Web, partendo da zero o da modelli campione di Bootstrap, che si adattano alle diverse dimensioni dello schermo per il miglior rendering del contenuto. Ora potete inoltre mantenere gli snippet di codice aggiornati nelle vostre installazioni di Dreamweaver utilizzando la funzioni di sincronizzazione cloud. Per informazioni sulla sincronizzazione degli snippet di codice con Creative Cloud e altre installazioni di Dreamweaver, vedete Sincronizzare le impostazioni di Dreamweaver con Creative Cloud. Integrazione con Bootstrap Bootstrap-Agenzia Bootstrap-eCommerce Bootstrap-Portfolio Bootstrap-Prodotto Bootstrap-Immobiliare Bootstrap-Curriculum Dalla finestra di dialogo Nuovo documento (Nuovo documento > Bootstrap), potete anche creare un documento Bootstrap personalizzato. Create quindi il sito Web modularmente utilizzando i componenti Bootstrap quali pannelli a soffietto e carousel, utilizzando il pannello Inserisci in Dreamweaver. Oppure, se avete a disposizione delle composizioni Photoshop, utilizzate Extract per importare immagini, font, stili, testo e altro ancora nel documento Bootstrap. 6 Nota: Torna all’inizio Opzioni di formattazione in Visualizzazione elemento Modifica > menu Tabella Nota: il menu Modifica è ora attivo nella vista Dal vivo. Torna all’inizio Creazione di documenti Bootstrap Con Dreamweaver potete modificare sia i progetti Bootstrap completi sia quelli ancora in corso d'opera; non solo potete modificare il codice, ma anche sfruttare le funzioni di modifica visiva quali la modifica nella vista Dal vivo, CSS Designer, media query visive ed Extract. per siti Web creati con versioni del framework Bootstrap precedenti alla 3, gli strumenti di modifica visiva per nascondere e scoprire gli elementi, nonché modificare righe e colonne (aggiungere, ridimensionare, sfalsare) non sono disponibili in Dreamweaver. Per informazioni dettagliate, vedete Operazioni con i file Bootstrap. Supporto per la modifica di tabelle nella vista Dal vivo La modifica delle tabelle può essere effettuata con facilità e rapidità nella vista Dal vivo utilizzando una delle seguenti opzioni o una combinazione di esse: Per ulteriori informazioni, vedete Modificare le dimensioni di tabelle e Formattare tabelle e celle. Nuovi menu nella vista Dal vivo 7 Torna all’inizio Nota: Torna all’inizio Vista rapida elemento è ora il pannello DOM (Finestre > DOM). Il pannello DOM consente di eseguire tutte le funzioni offerte da Vista rapida elemento e altre ancora. Questo pannello è disponibile in tutte le aree di lavoro ed è permanente, potete cioè aprire due documenti e accedere contemporaneamente ai relativi pannelli DOM. Utilizzando il pannello DOM, potete: Trascinare elementi del pannello Inserisci e inserirli con precisione nella struttura del documento. Copiare, incollare, duplicare, spostare o eliminare gli elementi strutturali nel documento. Visualizzare qualsiasi elemento della pagina nel contesto della struttura del documento dato che l'elemento attivo è evidenziato nel pannello DOM. Video: esplorare il codice HTML (guardate, 6 min) Visualizzate e modificate la struttura del codice HTML. Le funzionalità di modifica nella vista Dal vivo sono state migliorate con i seguenti menu disponibili nella vista stessa: Modifica Formato Comandi Sito Opzione "Incolla speciale" nel menu Modifica e di scelta rapida Supporto per gli elementi dell'interfaccia utente jQuery nella vista Dal vivo Ora potete inserire widget jQuery direttamente nella vista Dal vivo utilizzando il pannello Inserisci. Trascinate l'elemento desiderato dal pannello Inserisci sulla vista Dal vivo e tenete premuto il mouse per utilizzare una delle seguenti funzioni di inserimento: Guide dal vivo: queste guide sono visualizzate quando passate sulla vista Dal vivo con l'elemento trascinato dal pannello Inserisci. Grazie alle Guide dal vivo, potete inserire elementi in alto o in basso, a sinistra o a destra, rispetto all'elemento attivo. Icona DOM: l'icona DOM appare dopo la visualizzazione delle Guide dal vivo, quando vi fermate un attimo. Fate clic sull'icona per visualizzare la struttura DOM in una finestra a comparsa e rilasciare l'elemento in un punto preciso della struttura del documento. Assistente di posizionamento: consente di posizionare l'elemento prima o dopo l'elemento attivo o di nidificarlo al suo interno (nella vista Dal vivo). le funzioni sopra sono visualizzate in base all'elemento che si sta inserendo. Per ulteriori informazioni, vedete Inserire elementi direttamente nella vista Dal vivo. Pannello DOM 8