Dreamweaver CC

814 Pages·2013·13.55 MB·English

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