ADOBE Dreamweaver CS4 User Manual [it]

Uso di

ADOBE® DREAMWEAVER® CS4

Uso di Adobe

Se la presente guida è distribuita con software che comprende un accordo di licenza per l'utente finale, questa guida e il programma in essa descritto sono forniti in licenza e possono essere usati o copiati solo secondo i termini della licenza stessa. Ad eccezione degli usi consentiti dalla licenza, nessuna parte della presente pubblicazione può essere riprodotta, memorizzata in un sistema di archiviazione o trasmessa in qualsiasi forma o con qualsiasi mezzo elettronico, meccanico, di registrazione o altro, senza previa autorizzazione scritta di Adobe Systems Incorporated. Il contenuto di questa pubblicazione è protetto dalla legge sul copyright anche se la pubblicazione non è distribuita assieme a un programma con un contratto di licenza per l'utente finale.

Le informazioni contenute in questa guida sono fornite esclusivamente a scopo informativo, sono soggette a variazioni senza preavviso e non devono essere intese come impegno da parte di Adobe Systems Incorporated. Adobe Systems Incorporated declina ogni responsabilità per eventuali errori o imprecisioni presenti nei contenuti informativi di questa guida.

Se inserite in un vostro progetto la grafica e le immagini che vi forniamo, tenete presente che tali immagini potrebbero essere protette dalla legge sul copyright. L'inserimento non autorizzato di tale materiale in una pubblicazione può rappresentare una violazione dei diritti d’autore. Assicuratevi di ottenere dall'autore ogni autorizzazione necessaria.

Qualsiasi riferimento a nomi di società nei campioni di file forniti ha scopo puramente dimostrativo ed eventuali riferimenti a società e organizzazioni realmente esistenti è da ritenersi casuale.

Adobe, the Adobe logo, ActionScript, ColdFusion, Contribute, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, FreeHand, HomeSite, Illustrator, InDesign, JRun, Shockwave, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. UNIX is a registered trademark of The Open Group in the US and other countries. Arial is a trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property of their respective owners.

This product includes software developed by the Apache Software Foundation (

The Graphics Interchange Format © is the Copyright property of CompuServe Incorporated. GIF(sm) is a Service Mark property of CompuServe Incorporated.

MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia ( compressed audio within the Software for real time or live broadcasts. If you require an MP3 decoder for real time or live broadcasts, you are responsible for obtaining this MP3 technology license.

Speech compression and decompression technology licensed from Nellymoser, Inc. (

This product includes software developed by the OpenSymphony Group (

Sorenson Spark

® Dreamweaver® CS4 per Windows® e Mac OS

http://www.apache.org/).

http://www.mp3licensing.com). You cannot use the MP3

www.nellymoser.com)

http://www.on2.com.

http://www.opensymphony.com/)

™ video compression and decompression technology licensed from Sorenson Media, Inc.

1994. All Rights Reserved. Proximity Technology Inc. The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1997 - All rights reserved Proximity Technology Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1990 - All rights reserved Proximity Technology Inc. © Oxford University Press © 2000. All rights reserved Proximity Technology Inc. © 1990 IDE a.s. © 1990 - All rights reserved Proximity Technology Inc.

This product includes software developed by Fourthought, Inc. (

This product includes software developed by CollabNet (

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublishedrights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

http://www.fourthought.com).

http://www.Collab.Net/)

Sommario

Capitolo 1: Risorse

Attivazione e registrazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Guida e assistenza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Servizi, download ed extra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Novità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Capitolo 2: Area di lavoro

Flusso e area di lavoro di Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Operazioni con la finestra del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Uso delle barre degli strumenti, delle finestre di ispezione e dei menu di scelta rapida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Personalizzazione dell'area di lavoro di CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Scelte rapide da tastiera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Estensioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Capitolo 3: Operazioni con i siti di Dreamweaver

Configurazione di un sito Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Gestione dei siti Contribute mediante Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Operazioni con i file senza un sito definito . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Opzioni della scheda Generali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

iii

Capitolo 4: Creare e gestire i file

Creazione e apertura dei documenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Gestione di file e cartelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Scaricamento e caricamento dei file da e verso il server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Deposito e ritiro dei file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Sincronizzazione dei file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Creazione di file InContext Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Comparazione di file per verificare le differenze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Ripristino dei file (utenti Contribute) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Applicazione della maschera file a file e cartelle del sito . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Archiviazione delle informazioni sui file nelle Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Verifica del sito . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Capitolo 5: Gestione delle risorse e delle librerie

Informazioni sulle risorse e le librerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Operazioni con le risorse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Creazione e gestione di un elenco di risorse preferite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Operazioni con le voci di libreria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Capitolo 6: Creazione di pagine con i CSS

Nozioni sui fogli di stile CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Creazione e gestione dei CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Creazione del layout delle pagine con i CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Operazioni con i tag div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

USO DI DREAMWEAVER CS4

Sommario

Capitolo 7: Creazione di layout di pagina in HTML

Uso di riferimenti visivi per il layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Presentazione del contenuto mediante le tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Capitolo 8: Aggiunta del contenuto alle pagine

Operazioni con le pagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Aggiunta e formattazione di testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Aggiunta e modifica di immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Inserimento di file SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Inserimento di file FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Aggiunta di audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Aggiunta di altri oggetti multimediali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Automatizzare le operazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Capitolo 9: Collegamenti e navigazione

Informazioni sui collegamenti e sulla navigazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Collegamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

Menu di collegamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Barre di navigazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

Mappe immagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

Risoluzione dei problemi relativi ai collegamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Capitolo 10: Anteprima delle pagine

Anteprima delle pagine in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Anteprima delle pagine nei browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

Anteprima delle pagine nei dispositivi mobili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Capitolo 11: Operazioni con il codice delle pagine

Informazioni generali sul codice in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Impostazione dell'ambiente di codifica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

Impostazione delle preferenze di codifica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

Scrittura e modifica del codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322

Compressione del codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Ottimizzazione e debug del codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339

Modifica del codice nella vista Progettazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Operazioni con il contenuto head delle pagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

Operazioni con le server-side include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Gestione delle librerie di tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Importazione di tag personalizzati in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Capitolo 12: Aggiunta di comportamenti JavaScript

Uso dei comportamenti JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Applicazione di comportamenti incorporati in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Capitolo 13: Operazioni con altre applicazioni

Integrazione tra applicazioni diverse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384

Operazioni con Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

USO DI DREAMWEAVER CS4

Sommario

Operazioni con Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

Operazioni con Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Operazioni con Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403

Operazioni con Device Central . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Operazioni con ConnectNow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Gestire collegamenti a servizi Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407

Capitolo 14: Creazione e gestione dei modelli

Informazioni sui modelli di Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Riconoscere i modelli e i documenti basati sui modelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

Creazione di un modello di Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Creazione di aree modificabili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

Creazione di aree ripetute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

Uso delle aree opzionali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

Definizione di attributi di tag modificabili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Creazione di un modello nidificato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Modifica, aggiornamento ed eliminazione dei modelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431

Esportazione e importazione del contenuto di un modello . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435

Applicazione o rimozione di un modello da un documento esistente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Modifica del contenuto di un documento basato su un modello . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Sintassi dei modelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Impostazione delle preferenze di authoring per i modelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442

Capitolo 15: Creazione visiva di pagine Spry

Informazioni sul framework Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Operazioni con i widget Spry (istruzioni generali) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Operazioni con il widget Pannello a soffietto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446

Operazioni con il widget Barra di menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Operazioni con il widget Pannello comprimibile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454

Operazioni con il widget Pannelli a schede . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456

Operazioni con il widget Descrizione comando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459

Operazioni con il widget Gruppo pulsanti di scelta convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461

Operazioni con il widget Campo di testo convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

Operazioni con il widget Area di testo convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470

Operazioni con il widget Selezione convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

Operazioni con il widget Casella di controllo convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476

Operazioni con il widget Password convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

Operazioni con il widget Conferma convalida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

Visualizzazione dei dati con Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486

Aggiunta di effetti Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498

Capitolo 16: Visualizzazione di dati XML con XSLT

Informazioni su XML e XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503

Esecuzione di trasformazioni XSL sul server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Esecuzione di trasformazioni XSL sul client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527

Entità carattere mancanti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529

USO DI DREAMWEAVER CS4

Sommario

Capitolo 17: Preparazione della creazione di siti dinamici

Nozioni sulle applicazioni Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532

Configurare il computer per lo sviluppo di applicazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539

Connessioni di database per sviluppatori ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544

Connessioni di database per sviluppatori ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546

Connessioni di database per sviluppatori PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553

Risoluzione dei problemi relativi alle connessioni di database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555

Eliminazione di script di connessione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560

Capitolo 18: Pagine dinamiche

Ottimizzazione dell'area di lavoro per lo sviluppo visivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562

Elaborazione di pagine dinamiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565

Panoramica sulle origini di contenuto dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567

Pannelli di contenuto dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572

Definizione delle origini di contenuto dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574

Aggiunta di contenuto dinamico alle pagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588

Modifica del contenuto dinamico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592

Visualizzazione dei record di database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595

Visualizzazione di Live Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

Aggiunta di comportamenti server personalizzati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

Capitolo 19: Sviluppo visivo delle applicazioni

Creazione di pagine principali e di dettaglio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

Creazione di pagine di ricerca e di risultati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627

Creazione di una pagina di inserimento record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634

Creazione di pagine di aggiornamento record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637

Creazione di pagine di eliminazione record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642

Creazione di pagine con oggetti di manipolazione dati avanzati (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651

Creazione di una pagina di registrazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655

Creazione di una pagina di login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658

Creazione di una pagina accessibile solo agli utenti autorizzati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660

Protezione di una cartella dell'applicazione (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663

Uso dei componenti ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663

Capitolo 20: Creazione di moduli

Raccolta di informazioni dagli utenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671

Creazione di moduli Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674

Creazione di moduli ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688

Capitolo 21: Accessibilità

Dreamweaver e l'accessibilità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702

Indice . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706

Capitolo 1: Risorse

Prima di iniziare a usare il nuovo software, dedicate alcuni minuti alla lettura delle informazioni sull'attivazione del prodotto e sulle diverse risorse disponibili. Avete infatti accesso a video informativi, plug-in, modelli, comunità di utenti, seminari, esercitazioni, feed RSS e molto altro.

Attivazione e registrazione

Assistenza per l’installazione

Per problemi relativi all’installazione, consultate le informazioni presso il centro di assistenza per l’installazione di Adobe all’indirizzo www.adobe.com/go/cs4install_it.

Attivazione della licenza

Durante il processo di installazione, il software contatta Adobe per completare il processo di attivazione della licenza. Non viene trasmesso alcun dato personale. Per ulteriori informazioni sull’attivazione del prodotto, visitate il sito Web di Adobe all’indirizzo www.adobe.com/go/activation_it.

L’attivazione di una licenza per utente singolo supporta due computer. Ad esempio, è possibile installare il prodotto su un computer desktop e un laptop. Se desiderate installare il software su un terzo computer, dovete prima disattivarlo su uno degli altri due. Scegliete Aiuto > Disattiva.

Registrazione

La registrazione del prodotto consente di ricevere gratuitamente assistenza per l’installazione, notifiche sugli aggiornamenti e altri servizi.

❖ Per effettuare la registrazione, seguite le istruzioni riportate sullo schermo nella finestra di dialogo Registrazione,

visualizzata dopo l’installazione del software.

Se decidete di rimandare la registrazione, potrete effettuarla in qualsiasi momento scegliendo Aiuto > Registrazione.

Programma di miglioramento del prodotto Adobe

Dopo che avrete utilizzato il software Adobe per un determinato numero di volte, verrà visualizzata una finestra di dialogo in cui viene richiesto se desiderate partecipare al programma di miglioramento dei prodotti Adobe.

Se scegliete di partecipare, alcuni dati riguardo il vostro utilizzo del software Adobe verranno inviati ad Adobe. Non vengono inviate né registrate informazioni personali di qualsiasi tipo. Il Programma di miglioramento prodotto Adobe raccoglie informazioni sulle caratteristiche e gli strumenti utilizzati nel software e la relativa frequenza d’uso.

In qualsiasi momento potete aderire o annullare l’iscrizione al programma:

• Per partecipare, scegliete ? oppure Aiuto > Programma di miglioramento prodotti Adobe e fate clic sull’opzione per

accettare di partecipare.

• Per ritirarvi dal programma, scegliete ? oppure Aiuto > Programma di miglioramento prodotti Adobe e fate clic su

No, grazie.

USO DI DREAMWEAVER CS4

Risorse

Leggimi

Un file Leggimi con informazioni sul software è disponibile online e nel disco di installazione. Aprite il file per leggere importanti informazioni su diversi argomenti, quali:

• Requisiti di sistema

• Installazione (compresa la disinstallazione del software)

• Attivazione e registrazione

• Installazione dei font

• Risoluzione dei problemi

• Servizio clienti

• Informazioni legali

Guida e assistenza

Risorse della comunità

Il sito Adobe.com offre un ambiente integrato con risorse della comunità, con contenuti generati dalla comunità di utenti e moderati da esperti Adobe e di settore. I commenti degli utenti stessi facilitano il reperimento delle informazioni. Effettuate ricerche nelle risorse della comunità per trovare i migliori contenuti Web su prodotti e tecnologie Adobe, tra cui:

• Video, esercitazioni, suggerimenti e tecniche, blog, articoli ed esempi forniti da designer e sviluppatori.

• Si tratta di una Guida online completa, aggiornata regolarmente e più esaustiva rispetto alla Guida fornita con il

prodotto. Se quando consultate la guida del prodotto siete collegati a Internet, potete vedere automaticamente l’Aiuto in linea completo anziché la versione fornita con il prodotto.

• Tutti gli altri contenuti presenti in Adobe.com, tra cui gli articoli della knowledgebase, download e aggiornamenti,

Developer Connection ed altro ancora.

Per accedere alle risorse della comunità, utilizzate il campo di ricerca dell’Aiuto, nell’interfaccia utente del prodotto. Per un video sulle risorse della comunità, visitate www.adobe.com/go/lrvid4117_xp_it.

Altre risorse

Le versioni cartacee dell’Aiuto in linea completo sono disponibili al costo di spedizione e gestione presso

www.adobe.com/go/store_it. L’Aiuto in linea include inoltre un collegamento alla versione PDF completa e aggiornata

della guida.

Per informazioni sulle opzioni di assistenza tecnica gratuita e a pagamento, visitate il sito Web Supporto Adobe,

www.adobe.com/it/support.

Servizi, download ed extra

È possibile ottimizzare il prodotto mediante diversi servizi, plug-in ed estensioni specifici per il prodotto in uso. Potete inoltre scaricare campioni ed altre risorse utili.

USO DI DREAMWEAVER CS4

Risorse

Servizi online Adobe Creative

Adobe® Creative Suite® 4 include nuove funzioni online che portano la potenza del Web sul vostro desktop. Queste funzioni vi permettono di collegarvi alla comunità di utenti Adobe, collaborare e utilizzare al meglio gli strumenti Adobe. Avanzati servizi creativi online permettono di portare a termine diverse operazioni, dalla corrispondenza dei colori alla teleconferenza. Tali servizi si integrano direttamente nelle applicazioni desktop in modo da ottimizzare il flusso di lavoro. Alcuni servizi vi offrono funzionalità complete o parziali anche quando non siete connessi.

Per ulteriori informazioni sui servizi disponibili, visitate Adobe.com. Alcune applicazioni Creative Suite 4 includono le seguenti offerte iniziali:

Pannello Kuler™ per creare, condividere ed esplorare temi di colori online.

Adobe® ConnectNow per collaborare con gruppi di lavoro in remoto attraverso il Web, con condivisione di voce, dati

ed elementi multimediali.

Centrale risorse per accedere a esercitazioni, file di esempio ed estensioni per le applicazioni Adobe per il video

digitale.

Per informazioni sulla gestione dei servizi, visitate il sito Web Adobe all’indirizzo

www.adobe.com/go/learn_creativeservices_it.

Adobe Exchange

Visitate Adobe Exchange all’indirizzo www.adobe.com/go/exchange_it per scaricare esempi e migliaia di plug-in ed estensioni prodotti da Adobe e da sviluppatori di terze parti. Mediante l’uso di plug-in ed estensioni è possibile automatizzare alcune attività, personalizzare i flussi di lavoro, creare effetti professionali specializzati ed altro ancora.

Download di Adobe

Visitate il sito all’indirizzo www.adobe.com/go/downloads_it per scaricare gratuitamente aggiornamenti, versioni di prova e altri software utili.

Adobe Labs

Adobe Labs (www.adobe.com/go/labs_it) permette di provare e valutare tecnologie e prodotti Adobe nuovi ed emergenti. In Adobe Labs è possibile accedere a numerose risorse, tra cui:

• Versioni preliminari di software e tecnologie

• Esempi di codice e pratiche consigliate per velocizzare la fase di apprendimento

• Versioni preliminari della documentazione tecnica e di prodotto

• Forum, contenuti basati su informazioni fornite dagli utenti e altre risorse di collaborazione che vi aiuteranno a

interagire con gli sviluppatori con interessi simili ai vostri.

Adobe Labs promuove un processo collaborativo per lo sviluppo di software. In tale ambiente, i clienti diventano rapidamente produttivi nell’utilizzo dei nuovi prodotti e delle nuove tecnologie. Adobe Labs è inoltre un forum per lo scambio di riscontri nelle fasi di sviluppo. I team di sviluppo Adobe utilizzano tali riscontri per creare software che risponda alle esigenze e aspettative della comunità.

Adobe TV

Per video di formazione o per spunti creativi, visitate Adobe TV all’indirizzo http://tv.adobe.com.

USO DI DREAMWEAVER CS4

Risorse

Extra

Il disco di installazione contiene numerosi contenuti aggiuntivi con cui trarre il massimo dal software Adobe. Alcuni di tali contenuti extra vengono installati nel computer, altri sono invece disponibili nel disco di installazione.

Per visualizzare gli elementi extra installati, controllate la cartella dell’applicazione sul computer.

• Windows®: [disco di avvio]\Programmi\Adobe\[applicazione Adobe]

• Mac OS®: [disco di avvio]/Applicazioni/[applicazione Adobe]

Per visualizzare gli elementi extra disponibili nel disco di installazione, individuate la cartella Extra o Goodies all’interno della cartella per la vostra lingua, sul disco di installazione. Esempio:

• /Italiano/Extra/

Novità

Di seguito è riportato un elenco delle nuove funzioni principali di Adobe® Dreamweaver® CS4.

Vista Dal vivo

Dreamweaver CS4 consente di progettare le pagine Web nel contesto effettivo di un browser grazie alla nuova vista Dal vivo, pur mantenendo l'accesso diretto al codice. Le modifiche apportate al codice si riflettono immediatamente nella pagina riprodotta sullo schermo. Consultate “Anteprima delle pagine in Dreamweaver” a pagina 305.

Suggerimenti codice per i framework Ajax e JavaScript

Ora potete scrivere codice JavaScript più velocemente e in modo accurato, con il supporto migliorato per gli oggetti JavaScript di base e i tipi di dati primitivi. Potete inoltre sfruttare la funzionalità di codifica estesa di Dreamweaver incorporando i più comuni framework JavaScript, tra cui jQuery, Prototype e Adobe Spry. Consultate “Uso dei

suggerimenti codice” a pagina 322

File correlati e Navigazione codice

Dreamweaver CS4 consente di gestire in modo efficiente i vari file che compongono le pagine Web. Facendo clic su qualsiasi file correlato, potrete vedere sia l'origine nella vista Codice, sia la pagina principale nella vista Progettazione. La nuova funzione Navigazione codice consente di visualizzare tutte le origini codice che influiscono sulla selezione corrente, quali le regole CSS (Cascading Style Sheets), le server-side include, le funzioni JavaScript esterne, i modelli di Dreamweaver, i file di origine iFrame e altro ancora. Consultate “Aprire file correlati” a pagina 77 e “Lavorare con

Navigazione codice” a pagina 331.

InContext Editing

Potete consentire agli utenti finali di apportare piccole modifiche alle pagine Web senza particolare assistenza o software aggiuntivo. Il designer di Dreamweaver può limitare le modifica a pagine specifiche, aree distinte e opzioni di formattazione personalizzate, in modo semplice e veloce. Consultate “Creazione di file InContext Editing” a pagina 104

Tecniche consigliate per CSS

La finestra di ispezione Proprietà di Dreamweaver CS4 consente di creare nuove regole CSS, fornendo spiegazioni chiare e semplici sulla posizione di ogni proprietà nella struttura degli stili. Consultate “Definizione delle proprietà del

testo nella finestra di ispezione Proprietà” a pagina 242.

USO DI DREAMWEAVER CS4

Risorse

Dataset HTML

Avete la possibilità di integrare le potenzialità dei dati dinamici nelle pagine Web, evitando la curva di apprendimento che sarebbe necessaria per approfondire la conoscenza dei database o della codifica XML (Extensible Markup Language). I dataset Spry riconoscono una semplice tabella HTML come un'origine dati interattiva. Consultate “Creazione di un dataset HTML Spry” a pagina 486.

Oggetti avanzati di Adobe Photoshop

Potete inserire un qualsiasi documento PSD (Photoshop Data File) di Adobe® Photoshop in Dreamweaver per creare un oggetto immagine avanzato. Gli oggetti avanzati sono direttamente collegati al file di origine. Potete apportare modifiche all'immagine di origine e aggiornare l'immagine in Dreamweaver senza dover aprire Photoshop. Vedere “Operazioni con Photoshop” a pagina 392.

Integrazione con Subversion

Dreamweaver CS4 integra il software Subversion®, un sistema di controllo versioni di tipo open source che consente di eseguire operazioni di deposito/ritiro dei file in modo più funzionale. Potete aggiornare il sito e depositare le modifiche direttamente da Dreamweaver. Consultate “Utilizzo di Subversion (SVN) per scaricare e depositare file” a pagina 97.

Nuova interfaccia utente

Grazie al design dell'interfaccia utente condivisa dei componenti di Adobe Creative Suite® 4, potete svolgere la vostra attività in modo più rapido ed efficiente. Il commutatore dell'area di lavoro consente di passare velocemente da un ambiente di lavoro a un altro. Vedere “Area di lavoro” a pagina 6.

Funzioni superate

Le funzioni elencate di seguito sono superate in Dreamweaver CS4:

• Linee temporali

• Servizi Web

• Modalità Layout

• Vista Mappa del sito

• Supporto per Java Bean

• Elementi di Adobe® Flash (Visualizzatore immagini)

• Testo Adobe® Flash e pulsanti Adobe® Flash

• Comportamenti server e recordset ASP.NET e JSP

Capitolo 2: Area di lavoro

L'area di lavoro di Adobe® Dreamweaver® CS4 contiene le barre degli strumenti, le finestre di ispezione e i pannelli utilizzabili per la realizzazione delle pagine Web. È possibile personalizzare l'aspetto e il comportamento generale dell'area di lavoro.

Flusso e area di lavoro di Dreamweaver

Panoramica sul flusso di lavoro di Dreamweaver

Durante la creazione di un sito Web, potete utilizzare approcci differenti. Di seguito ne viene descritto uno.

Pianificazione e configurazione del sito

Determinare dove dovranno essere memorizzati i file ed esaminare i requisiti e gli scopi del sito e i profili dell'utenza. Inoltre, considerate anche gli aspetti tecnici quali le modalità di accesso degli utenti e le limitazioni legate ai browser, ai plugin o alle operazioni di scaricamento. Una volta organizzate le informazioni e determinata una struttura operativa, è possibile cominciare a creare il sito. (Vedere “Operazioni con i siti di Dreamweaver” a pagina 39.)

Organizzazione e gestione dei file di un sito

Il pannello File consente di aggiungere, eliminare e rinominare facilmente i file e le cartelle per modificare l'organizzazione del sito nel modo desiderato. Il pannello File contiene anche molti strumenti utili per la gestione del sito, il trasferimento di file a/da un server remoto, l'impostazione di procedure di deposito e ritiro per impedire la sovrascrittura dei file e la sincronizzazione dei file presenti sui siti locali e remoti. Il pannello Risorse consente di organizzare facilmente le risorse di un sito e di trascinarle direttamente in un documento di Dreamweaver. Dreamweaver può essere utilizzato anche per gestire l'aspetto dei siti Adobe®Contribute®. (Vedere “Gestione di file e

cartelle” a pagina 80 e “Gestione delle risorse e delle librerie” a pagina 123.)

Definizione del layout delle pagine Web

Scegliere la tecnica di definizione del layout che meglio si adatta alle proprie necessità oppure utilizzare le opzioni di layout di Dreamweaver insieme alle altre per creare l'aspetto del sito. Per creare un layout possono essere impiegati elementi PA, stili di posizionamento CSS o layout CSS predefiniti di Dreamweaver. Gli strumenti di tabella permettono di progettare rapidamente le pagine, disegnandole e successivamente riorganizzandone la struttura. Per visualizzare più elementi insieme in un browser, è possibile definire il layout dei documenti utilizzando i frame. Infine, è possibile creare nuove pagine in base a un modello di Dreamweaver, quindi aggiornare il layout di queste pagine automaticamente al variare del modello. (Vedere “Creazione di pagine con i CSS” a pagina 136 e “Creazione di layout

di pagina in HTML” a pagina 186.)

USO DI DREAMWEAVER CS4

Area di lavoro

Aggiunta del contenuto alle pagine

Aggiungere risorse ed elementi di progettazione quali testo, immagini, immagini di rollover, mappe immagine, colori, filmati, audio, collegamenti HTML, menu di collegamento e altro ancora. Le funzioni incorporate di creazione della pagina possono essere impiegate per elementi quali titoli e sfondi, oppure si può digitare direttamente all'interno di una pagina o importare contenuto da altri documenti. Dreamweaver fornisce anche comportamenti per l'esecuzione di operazioni in base a specifici eventi, ad esempio la convalida di un modulo quando un visitatore fa clic sul pulsante Invia, oppure l'apertura di una seconda finestra del browser al termine del caricamento della pagina principale. Infine, Dreamweaver dispone di strumenti per il miglioramento della prestazioni del sito Web e per la verifica delle pagine che permettono di garantirne la compatibilità con browser Web differenti. (Vedere “Aggiunta del contenuto alle

pagine” a pagina 219.)

Creazione delle pagine mediante codifica manuale

La codifica manuale delle pagine Web è un altro approccio alla creazione delle pagine. Dreamweaver fornisce strumenti di editing visivo facili da usare, ma dispone anche di un sofisticato ambiente di codifica; l'utente può quindi scegliere quale approccio usare per creare e modificare le proprie pagine. (Vedere “Operazioni con il codice delle

pagine” a pagina 310.)

Configurazione di un'applicazione Web per il contenuto dinamico

Molti siti Web contengono pagine dinamiche che permettono ai visitatori di visualizzare le informazioni memorizzate nei database, e in genere permettono ad alcuni utenti di aggiungere nuove informazioni e di modificare le informazioni dei database. Per creare queste pagine, è necessario per prima cosa configurare un server Web e un server applicazioni, creare o modificare un sito di Dreamweaver e connettersi a un database. (Vedere “Preparazione della creazione di siti

dinamici” a pagina 532.)

Creazione di pagine dinamiche

In Dreamweaver, è possibile definire diverse origini di contenuto dinamico, inclusi i recordset estratti da database, i parametri di modulo e i componenti JavaBeans. Per aggiungere il contenuto dinamico alla pagina, basta trascinarlo sulla pagina.

È possibile impostare la pagina per visualizzare un record o più record alla volta, visualizzare più pagine di record, aggiungere collegamenti speciali per passare da una pagina di record alla successiva e alla precedente e creare contatori di record per aiutare gli utenti a individuare i record. Potete incapsulare applicazioni o logica aziendale mediante tecnologie quali Adobe® ColdFusion® e i servizi Web. Se occorre disporre di una maggiore flessibilità, è possibile creare comportamenti server e moduli interattivi personalizzati. (Vedere “Pagine dinamiche” a pagina 562.)

Test e pubblicazione

Il test delle pagine è un processo dinamico che si svolge durante il ciclo di sviluppo. Alla fine del ciclo, il sito viene pubblicato su un server. Molti sviluppatori pianificano inoltre la manutenzione periodica per garantire che il sito rimanga aggiornato e funzionante. (Vedere “Scaricamento e caricamento dei file da e verso il server” a pagina 89.)

Per vedere un'esercitazione sulle operazioni che potete eseguire con Dreamweaver, visitate il sito

www.adobe.com/go/lrvid4040_dw_it.

Panoramica sul layout dell'area di lavoro

L'area di lavoro di Dreamweaver consente di esaminare le proprietà dei documenti e degli oggetti. Include anche la maggior parte delle operazioni comuni nelle barre degli strumenti in modo da poter modificare velocemente i documenti.

USO DI DREAMWEAVER CS4

Area di lavoro

In Windows®, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell'area di lavoro integrata, tutte le finestre e i pannelli sono integrati in una sola finestra di applicazione più grande.

A. Barra applicazioni B. Barra degli strumenti Documento C. Finestra del documento D. Gruppi di pannelli E. Commutatore area di lavoro F. Selettore di tag G. Finestra di ispezione Proprietà H. Pannello File

In ambiente Mac OS®, Dreamweaver è in grado di visualizzare più documenti in un'unica finestra con schede che identificano ogni documento. Dreamweaver può inoltre visualizzare un'area di lavoro flottante, in cui ogni documento viene visualizzato in una finestra propria. I gruppi di pannelli sono inizialmente agganciati insieme, ma è possibile sganciarli nelle relative finestre. Quando i gruppi di pannelli sono agganciati è l'area del documento è ingrandita, se ridimensionate o visualizzate e nascondete i pannelli, il documento principale viene ridimensionato automaticamente, come in Windows.

USO DI DREAMWEAVER CS4

Area di lavoro

A. Barra applicazioni B. Barra degli strumenti Documento C. Finestra del documento D. Commutatore area di lavoro E. Gruppi di pannelli F. Selettore di tag G. Finestra di ispezione Proprietà H. Pannello File

Per l'esercitazione sull'utilizzo delle diverse aree di lavoro di Dreamweaver, visitate il sito

www.adobe.com/go/lrvid4042_dw_it.

Consultare anche

Uso delle barre degli strumenti, delle finestre di ispezione e dei menu di scelta rapida

Personalizzazione dell'area di lavoro di CS4

Visualizzazione di documenti a schede (solo per Dreamweaver Macintosh)

Esercitazione sull'area di lavoro di Dreamweaver

Panoramica sugli elementi dell'area di lavoro

L'area di lavoro comprende i seguenti elementi:

Nota: Dreamweaver fornisce molti altri pannelli, finestre di ispezione e finestre di opzioni. Per aprire i pannelli, le finestre di ispezione e le finestre, utilizzate il menu Finestra.

Schermata di benvenuto Consente di aprire un documento recente o di crearne uno nuovo. Dalla schermata di

benvenuto è anche possibile conoscere meglio Dreamweaver, grazie alla panoramica completa del prodotto e alle esercitazioni.

Barra applicazione La parte superiore della finestra dell'applicazione contiene un commutatore dell'area di lavoro, dei

menu (solo per Windows) e altri controlli dell'applicazione.

USO DI DREAMWEAVER CS4

Area di lavoro

Barra degli strumenti Documento Contiene i pulsanti che consentono di visualizzare la finestra del documento in

diversi modi (ad esempio in vista Progettazione e in vista Codice), impostare le opzioni di visualizzazione e accedere ad alcune operazioni comuni (ad esempio, l'anteprima in un browser).

Barra degli strumenti Standard (non visualizzata nel layout predefinito dell'area di lavoro) Contiene i pulsanti per le

operazioni comuni da eseguire dai menu File e Modifica: Nuovo, Apri, Consulta in Bridge, Salva, Salva tutto, Stampa codice, Taglia, Copia, Incolla, Annulla e Ripeti. Per visualizzare la barra degli strumenti Standard, selezionare Vista > Barre degli strumenti > Standard.

Barra degli strumenti Codifica (visualizzata solo nella vista Codice) Include pulsanti che consentono di eseguire varie

operazioni di codifica standard.

Barra degli strumenti Stile di rendering (non visibile per impostazione predefinita) Include pulsanti che consentono

di visualizzare l'aspetto del lavoro in vari tipi di supporti, se sono stati utilizzati fogli di stile dipendenti dal supporto. Include inoltre un pulsante che consente di attivare o disattivare gli stili CSS.

Finestra del documento Visualizza il documento corrente durante le operazioni di creazione e modifica.

Finestra di ispezione Proprietà Consente di visualizzare e modificare una serie di proprietà dell'oggetto o del testo

selezionato. Per ogni oggetto sono disponibili diverse proprietà. Per impostazione predefinita, la finestra di ispezione Proprietà non è espansa nel layout dell'area di lavoro Programmatore.

Selettore di tag Situato nella barra di stato nella parte inferiore della finestra del documento. Visualizza la gerarchia

dei tag che contengono la selezione corrente. Fare clic su qualsiasi tag nella gerarchia per selezionare il tag specifico e il relativo contenuto.

Pannelli Consentono di monitorare e modificare il lavoro. Alcuni esempi di pannelli sono il pannello Inserisci, il

pannello Stili CSS e il pannello File. Per espandere un pannello, fate doppio clic sulla relativa linguetta.

Pannello Inserisci Contiene i pulsanti che consentono di inserire in un documento vari tipi di oggetti, ad esempio

immagini, tabelle ed elementi multimediali. Ogni oggetto consiste in una porzione di codice HTML che consente di impostare i diversi attributi mano a mano che lo inserite. Ad esempio, potete inserire una tabella facendo clic sul pulsante Tabella del pannello Inserisci. Se preferite, potete inserire gli oggetti utilizzando il menu Inserisci invece del pannello Inserisci.

Pannello File Consente di gestire i file e le cartelle, indipendentemente dal fatto che facciano parte di un sito

Dreamweaver oppure risiedano su un server remoto. Il pannello File consente anche di accedere a tutti i file che si trovano sul disco locale in una struttura simile a Esplora risorse di Windows o al Finder di Macintosh.

Consultare anche

“Operazioni con la finestra del documento” a pagina 19

“Uso delle barre degli strumenti, delle finestre di ispezione e dei menu di scelta rapida” a pagina 23

“Gestire le finestre e i pannelli” a pagina 25

Panoramica sulla finestra del documento

La finestra del documento mostra il documento corrente. È possibile selezionare una delle viste seguenti:

Vista Progettazione Un ambiente per il layout di pagina visivo, la modifica visiva e lo sviluppo rapido di applicazioni.

In questa vista, Dreamweaver offre una rappresentazione visiva e modificabile del documento, simile a quella che si otterrebbe guardando la pagina in un browser.

Vista Codice Un ambiente di codifica manuale per la scrittura e la modifica di codice HTML, JavaScript, linguaggio

server (PHP) o linguaggio CFML (ColdFusion Markup Language) e qualsiasi altro tipo di codice.

USO DI DREAMWEAVER CS4

Area di lavoro

Vista Codice divisa Una versione divisa della vista Codice, che vi consente di scorrere per lavorare

contemporaneamente su sezioni diverse del documento.

Vista Codice e Progettazione Consente di visualizzare sia la vista Codice sia la vista Progettazione per un documento

nella stessa finestra.

Vista Dal vivo In modo analogo alla vista Progettazione, la vista Dal vivo riproduce una rappresentazione più realistica

dell'aspetto che avrà il documento in un browser, consentendovi di interagire con il documento, esattamente come in un browser. La vista Dal vivo non è modificabile. Potete tuttavia apportare modifiche nella vista Codice e aggiornare la vista Dal vivo per vedere le modifiche.

Vista Codice dal vivo Disponibile solo quando visualizzate un documento nella vista Dal vivo. Nella vista Codice dal

vivo viene visualizzato il codice effettivo utilizzato da un browser per il rendering della pagina, che può cambiare in modo dinamico mentre interagite con la pagina nella vista Dal vivo. La vista Codice dal vivo non è modificabile.

Quando una finestra del documento è ingrandita (impostazione predefinita), nella parte superiore vengono visualizzate delle linguette che mostrano i nomi di file di tutti i documenti aperti. Dreamweaver visualizza un asterisco dopo il nome di file se avete apportato delle modifiche che non avete ancora salvato.

Per visualizzare un documento, fate clic sulla relativa linguetta.

Dreamweaver visualizza anche la barra degli strumenti File correlati al di sotto della linguetta del documento (o al di sotto della barra del titolo del documento se state visualizzando i documenti in finestre separate). I documenti correlati sono documenti associati al file corrente, quali i file CSS o JavaScript. Per aprire uno di questi file correlati nella finestra del documento, fate clic sul nome del file desiderato nella barra degli strumenti File correlati.

Consultare anche

“Operazioni con la finestra del documento” a pagina 19

“Informazioni sulla vista Dal vivo” a pagina 305

“Aprire file correlati” a pagina 77

“Visualizzazione di Live Data nella vista Progettazione” a pagina 604

“Informazioni generali sul codice in Dreamweaver” a pagina 310

Panoramica sulla barra degli strumenti Documento

La barra degli strumenti Documento contiene i pulsanti che consentono di passare velocemente da una vista all'altra del documento. Questa barra degli strumenti contiene inoltre alcuni comandi e opzioni comuni relativi alla visualizzazione del documento e al suo trasferimento tra i siti locale e remoto. L'illustrazione seguente mostra la barra degli strumenti Documento espansa.

A. Mostra vista Codice B. Mostra viste Codice e Progettazione C. Mostra vista Progettazione D. Vista Dal vivo E. Vista Codice dal vivo F. Titolo del documento G. Gestione file H. Anteprima/debug nel browser I. Aggiorna vista Progettazione J. Opzioni di visualizzazione K. Riferimenti visivi L. Convalida codice M. Verifica compatibilità browser

Nella barra degli strumenti Documento vengono visualizzate le seguenti opzioni:

Mostra vista Codice Mostra solo la vista Codice nella finestra del documento.

USO DI DREAMWEAVER CS4

Area di lavoro

Mostra viste Codice e Progettazione Suddivide la finestra del documento fra le viste Codice e Progettazione. Quando

si seleziona questa vista combinata, l'opzione Vista Progettazione in primo piano diventa disponibile nel menu Opzioni di visualizzazione.

Mostra vista Progettazione Mostra solo la vista progettazione nella finestra del documento.

Nota: quando si lavora con XML, JavaScript, CSS o altri tipi di file basati su codice, non è possibile visualizzare i file nella vista Progettazione e i pulsanti Progettazione e Dividi risultano inattivi.

Vista Dal vivo Visualizza una vista del documento non modificabile, interattiva e basata su browser.

Vista Codice dal vivo Visualizza il codice effettivo utilizzato dal browser per riprodurre la pagina.

Titolo del documento Consente di inserire il titolo del documento, che verrà visualizzato nella barra del titolo del

browser. Se il documento ha già un titolo, esso compare in questo campo.

Gestione file Visualizza il menu a comparsa Gestione file.

Anteprima/debug nel browser Consente di visualizzare l'anteprima di un documento ed eseguirne il debug in un

browser. Selezionate un browser dal menu a comparsa.

Aggiorna vista Progettazione Aggiorna la vista Progettazione del documento dopo che sono state apportate

modifiche in vista Codice. Le modifiche apportate in vista Codice non vengono visualizzate automaticamente in vista Progettazione finché non si eseguono alcune azioni, come salvare il file o fare clic su questo pulsante.

Nota: l'aggiornamento interviene anche sulle caratteristiche del codice che dipendono dal DOM (Document Object Model), come la capacità di selezionare i tag di apertura o chiusura di un blocco di codice.

Opzioni di visualizzazione Consente di impostare le opzioni per la vista Codice e la vista Progettazione, tra cui la vista

che deve essere al di sopra dell'altra. Le opzioni del menu sono validi per la vista corrente: vista Progettazione, vista Codice o entrambe.

Riferimenti visivi Consente di utilizzare vari riferimenti visivi per la progettazione delle pagine.

Convalida codice Consente di convalidare il documento corrente oppure un tag selezionato.

Verifica compatibilità browser Consente di verificare se la codifica CSS utilizzata è compatibile con più browser.

Consultare anche

“Visualizzazione delle barre degli strumenti” a pagina 23

“Pagine di anteprima nella vista Dal vivo” a pagina 305

“Impostazione delle preferenze di codifica” a pagina 317

“Visualizzazione e modifica del contenuto head” a pagina 351

“Uso di riferimenti visivi per il layout” a pagina 186

Panoramica sulla barra degli strumenti standard

La barra degli strumenti Standard contiene i pulsanti per le operazioni comuni da eseguire dai menu File e Modifica: Nuovo, Apri, Consulta in Bridge, Salva, Salva tutto, Stampa codice, Taglia, Copia, Incolla, Annulla e Ripeti. Utilizzare questi menu come si utilizzano i comandi di menu equivalenti.

Consultare anche

“Visualizzazione delle barre degli strumenti” a pagina 23

“Creazione e apertura dei documenti” a pagina 68

USO DI DREAMWEAVER CS4

Area di lavoro

Panoramica sulla barra di stato

La barra di stato presente nella parte inferiore della finestra del documento fornisce informazioni supplementari sul documento in fase di creazione.

A. Selettore di tag B. Strumento Seleziona C. Strumento Mano D. Strumento Zoom E. Imposta ingrandimento F. Menu a comparsa Dimensioni finestra G. Dimensioni e tempo di scaricamento stimato H. Indicatore Codifica

Selettore di tag Visualizza la gerarchia dei tag che contengono la selezione corrente. Fare clic su qualsiasi tag nella

gerarchia per selezionare il tag specifico e il relativo contenuto. Fare clic su documento. Per selezionare gli attributi

class o ID di un tag nel selettore di tag, fate clic con il pulsante destro del

mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) sul tag e selezionate una classe o un ID dal menu di scelta rapida.

<body> per selezionare tutto il corpo del

Strumento Seleziona Attiva e disattiva lo strumento Mano.

Strumento Mano Consente di fare clic sul documento e trascinarlo nella finestra del documento.

Strumento Zoom e menu a comparsa Imposta ingrandimento Consentono di impostare il livello di ingrandimento del

documento.

Menu a comparsa Dimensioni finestra (Non disponibile in vista Codice.) Consente di ripristinare la finestra del

documento a dimensioni predeterminate o personalizzate.

Dimensioni e tempo di scaricamento del documento Mostra la stima della dimensione del documento e del tempo di

scaricamento della pagina, compresi tutti i file dipendenti (ad esempio, le immagini o altri file multimediali).

Indicatore Codifica Mostra la codifica del testo per il documento corrente.

Consultare anche

“Impostazione delle dimensioni delle finestre e della velocità di connessione” a pagina 22

“Ingrandimento e riduzione” a pagina 230

“Ridimensionamento della finestra del documento” a pagina 21

“Impostazione delle preferenze relative alle dimensioni e al tempo di scaricamento” a pagina 232

USO DI DREAMWEAVER CS4

Area di lavoro

Panoramica sulla barra degli strumenti Codifica

La barra degli strumenti Codifica contiene pulsanti per l'esecuzione di operazioni di codifica standard, come comprimere ed espandere le parti di codice selezionate, evidenziare il codice non valido, applicare e rimuovere commenti, applicare un rientro, inserire snippet di codice recenti e altro ancora. La barra degli strumenti Codifica è visualizzata verticalmente sul lato sinistro della finestra del documento ed è visibile unicamente in vista Codice.

Potete nascondere la barra degli strumenti Codifica (Visualizza > Barre degli strumenti > Codifica), ma non sganciarla o spostarla.

È anche possibile modificare la barra degli strumenti Codifica visualizzando più pulsanti (ad esempio A capo automatico, Mostra caratteri nascosti e Rientro automatico) oppure nascondendo quelli che non si intende utilizzare. Per eseguire queste operazioni, tuttavia, è necessario modificare il file XML da cui viene generata la barra degli strumenti. Per ulteriori informazioni, vedere Estensione di Dreamweaver.

Consultare anche

“Visualizzazione delle barre degli strumenti” a pagina 23

“Inserimento del codice mediante la barra degli strumenti Codifica” a pagina 325

Panoramica sulla barra degli strumenti Stile di rendering

La barra degli strumenti Stile di rendering (non visibile per impostazione predefinita) include pulsanti che consentono di visualizzare l'aspetto del lavoro in vari tipi di supporti se si utilizzano fogli di stile dipendenti da essi. Include inoltre un pulsante che consente di attivare o disattivare gli stili CSS. Per visualizzare la barra degli strumenti, selezionare Visualizza > Barre degli strumenti > Stile di rendering.

USO DI DREAMWEAVER CS4

Area di lavoro

Questa barra degli strumenti è attiva solo i documenti utilizzano fogli di stile dipendenti dai supporti. Ad esempio, nel foglio di stile potrebbe essere specificata una regola body per il supporto di stampa e un'altra per i palmari. Per ulteriori informazioni sulla creazione di fogli di stile dipendenti dai supporti, vedere il sito Web del World Wide Web Consortium all'indirizzo www.w3.org/TR/CSS21/media.html.

Per impostazione predefinita, Dreamweaver visualizza la pagina per il tipo di supporto “Schermo”, ovvero la mostra così come verrebbe riprodotta sullo schermo di un computer. I pulsanti della barra degli strumenti Stile di rendering consentono di visualizzare i seguenti tipi di rendering:

Esegui rendering per schermo Mostra la pagina come apparirebbe sullo schermo di un computer.

Esegui rendering per stampa Mostra la pagina come apparirebbe stampata.

Esegui rendering per portatile Mostra la pagina come apparirebbe su un dispositivo portatile, ad esempio un telefono

cellulare o un BlackBerry.

Esegui rendering per proiezione Mostra la pagina come apparirebbe su un dispositivo di proiezione.

Esegui rendering per TTY Mostra la pagina come apparirebbe su una telescrivente.

Esegui rendering per TV Mostra la pagina come apparirebbe sullo schermo di un televisore.

Attiva/disattiva visualizzazione stili CSS Consente di attivare o disattivare gli stili CSS. Il pulsante funziona in modo

indipendente dagli altri pulsanti.

Fogli di stile Fase di progettazione Consente di specificare un foglio di stile Fase di progettazione.

Per l'esercitazione sulla progettazione di fogli di stile per la stampa e per i palmari, vedere

www.adobe.com/go/vid0156_it.

Consultare anche

“Visualizzazione delle barre degli strumenti” a pagina 23

Panoramica sulla finestra di ispezione Proprietà

La finestra di ispezione Proprietà consente di verificare e modificare le proprietà più comuni dell'elemento di pagina (oggetto o testo) attualmente selezionato. Il contenuto della finestra di ispezione Proprietà varia a seconda dell'elemento selezionato. Ad esempio, se si seleziona un'immagine nella pagina, la finestra di ispezione Proprietà si modifica per visualizzare le proprietà dell'immagine (ad esempio il percorso del file relativo, la larghezza e l'altezza dell'immagine, il bordo intorno all'immagine, se disponibile, e così via).

Per impostazione predefinita, la finestra di ispezione Proprietà è posizionata nella parte inferiore dell'area di lavoro, ma potete sganciarla e utilizzarla come pannello mobile nell'area di lavoro.

Consultare anche

“Ancorare e disancorare i pannelli” a pagina 26

“Uso della finestra di ispezione Proprietà” a pagina 23

USO DI DREAMWEAVER CS4

Area di lavoro

Panoramica sul pannello Inserisci

Il pannello Inserisci contiene una serie di pulsanti che consentono di creare e inserire oggetti, quali le tabelle, le immagini e i collegamenti. I pulsanti sono organizzati in diverse categorie, che potete alternare selezionando la categoria desiderata dal menu a comparsa Categoria. Quando il documento corrente contiene codice server, come i documenti ASP o CFML, vengono visualizzate ulteriori categorie.

Alcune categorie dispongono di pulsanti con menu a comparsa. Quando selezionate un'opzione da un menu a comparsa, l'opzione diventa l'azione predefinita del pulsante. Se, ad esempio, selezionate Segnaposto immagine dal menu a comparsa del pulsante Immagine, la volta successiva che fate clic sul pulsante Immagine, Dreamweaver inserisce un segnaposto immagine. Ogni volta che selezionate una nuova opzione dal menu a comparsa, l'azione predefinita del pulsante cambia.

Il pannello Inserisci è organizzato nelle categorie seguenti:

La categoria Comune consente di creare e inserire gli oggetti usati più di frequente, come ad esempio immagini e

tabelle.

La categoria Layout consente di inserire tabelle, elementi di tabella, tag div, frame e widget Spry. È anche possibile

scegliere due viste per le tabelle: Standard (predefinita) e Tabelle espanse.

La categoria Moduli contiene pulsanti che consentono di creare moduli e inserire i relativi elementi, ad esempio i

widget di convalida di Spry.

La categoria Dati consente di inserire gli oggetti dati Spry e altri elementi dinamici, come recordset, aree ripetute,

moduli inserimento record e aggiornamento record.

La categoria Spry contiene i pulsanti per la creazione delle pagine Spry, con oggetti dati e widget Spry.

La categoria InContext Editing Contiene pulsanti per creare pagine di modifica di InContext, tra cui pulsanti per aree

modificabili, aree ripetute e per la gestione di classi CSS.

La categoria Testo consente di inserire molti tag di formattazione di testo ed elenco, come b, em, p, h1 e ul.

La categoria Preferiti consente di raggruppare e organizzare i pulsanti del pannello Inserisci più utilizzati in un unico

punto.

USO DI DREAMWEAVER CS4

Area di lavoro

Categorie del codice server disponibili solo per le pagine che utilizzano un particolare linguaggio server (ASP, CFML

Basic, CFML Flow, CFML Advanced e PHP). Ognuna di queste categorie fornisce oggetti di codice server inseribili in vista Codice.

A differenza di altri pannelli di Dreamweaver, potete trascinare il pannello Inserisci al di fuori della posizione di aggancio predefinita e rilasciarlo in una posizione orizzontale nella parte superiore della finestra del documento. Quando ciò accade, il pannello si trasforma in una barra degli strumenti (anche se non potete nasconderla e visualizzarla come accade con le altre barre degli strumenti).

Consultare anche

“Uso del pannello Inserisci” a pagina 219

“Creazione visiva di pagine Spry” a pagina 444

Panoramica sul pannello File

Utilizzare il pannello File per visualizzare e gestire i file nel proprio sito Dreamweaver.

Quando si visualizzano siti, file o cartelle nel pannello File, è possibile modificare la dimensione dell'area di visualizzazione ed espandere o comprimere il pannello File. Quando il pannello File è compresso, visualizza il contenuto del sito locale, del sito remoto, del server di prova o dell'archivio SVN come elenco di file. Quando è espanso, visualizza il sito locale insieme al sito remoto, al server di prova o all'archivio SVN.

Per i siti Dreamweaver è possibile personalizzare il pannello File modificando la vista, sia del sito locale che del sito remoto, che viene visualizzata per impostazione predefinita nel pannello compresso.

Consultare anche

“Operazioni con i file nel pannello File” a pagina 83

USO DI DREAMWEAVER CS4

Area di lavoro

Panoramica sul pannello Stili CSS

Il pannello Stili CSS consente di gestire le regole e le proprietà CSS che incidono su un elemento di pagina selezionato (modalità Corrente), oppure quelle che hanno effetto sull'intero documento (modalità Tutto). Un pulsante di attivazione nella parte superiore del pannello consente di scegliere la modalità desiderata. Il pannello Stili CSS consente inoltre di modificare le proprietà CSS in entrambe le modalità.

È possibile ridimensionare uno o più riquadri trascinandone i bordi.

In modalità Corrente il pannello Stili CSS è suddiviso in tre riquadri: il riquadro Riepilogo per selezione, che visualizza le proprietà CSS della selezione corrente, il riquadro Regole, che mostra la posizione delle proprietà selezionate (o di una serie di regole a cascata per il tag selezionato, a seconda della selezione effettuata), e il riquadro Proprietà che permette di modificare le proprietà CSS della regola che definisce la selezione.

In modalità Tutte il pannello Stili CSS è suddiviso in due riquadri: Tutte le regole (in alto) e Proprietà (in basso). Il riquadro Tutte le regole visualizza un elenco delle regole definite nel documento corrente e di quelle definite nei fogli di stile associati; il riquadro Proprietà consente di modificare le proprietà CSS di qualunque regola selezionata nel riquadro Tutte le regole.

Qualsiasi modifica effettuata nel riquadro Proprietà viene applicata immediatamente, consentendo di visualizzare un'anteprima in tempo reale mentre si lavora.

Consultare anche

“Creazione e gestione dei CSS” a pagina 141

Panoramica sui riferimenti visivi

Dreamweaver fornisce diversi tipi di riferimenti visivi utili per la progettazione dei documenti e per la previsione approssimativa del loro aspetto nei browser. È possibile:

• Bloccare istantaneamente la finestra del documento su una dimensione desiderata per verificare la collocazione dei

vari elementi rispetto alla pagina.

USO DI DREAMWEAVER CS4

Area di lavoro

• Utilizzare un'immagine di ricalco come sfondo della pagina per riprodurre una struttura creata in un'applicazione

grafica come Adobe® Photoshop® o Adobe® Fireworks®.

• Utilizzare i righelli e le guide come riferimento visivo per posizionare e ridimensionare con precisione gli elementi

di pagina.

•

Utilizzare la griglia per posizionare e ridimensionare con precisione gli elementi con posizione assoluta (elementi PA).

Le linee che compongono la griglia facilitano l'allineamento degli elementi PA; inoltre, se la funzione di aggancio è attivata, gli elementi PA vengono automaticamente agganciati al punto più vicino della griglia quando vengono spostati o ridimensionati. Gli altri oggetti (ad esempio, le immagini e i paragrafi) non vengono agganciati alla griglia, I livelli vengono agganciati alla griglia indipendentemente dal fatto che questa sia visualizzata o nascosta.

Consultare anche

“Uso di riferimenti visivi per il layout” a pagina 186

Utenti GoLive

Gli utenti che hanno già utilizzato GoLive e che desiderano passare a Dreamweaver possono consultare l'introduzione in linea ad area e flusso di lavoro di Dreamweaver, oltre a una discussione sui metodi per migrare i propri siti a Dreamweaver. Per ulteriori informazioni, vedere www.adobe.com/go/learn_dw_golive_it.

Consultare anche

Esercitazione Dreamweaver per utenti GoLive

Operazioni con la finestra del documento

Passaggio da una vista all'altra nella finestra del documento

Potete visualizzare un documento nella finestra del documento nelle viste Codice, Codice divisa, Progettazione e Codice e Progettazione (vista combinata) o Dal vivo. Potete anche visualizzare la vista Codice divisa o la vista Codice e Progettazione in senso orizzontale o verticale. (La visualizzazione orizzontale è quella predefinita.)

Passaggio alla vista Codice

❖ Effettuate una delle operazioni seguenti:

• Selezionate Visualizza > Codice.

• Nella barra degli strumenti Documento, fate clic sul pulsante Mostra vista Codice

Passaggio alla vista Codice divisa

La vista Codice divisa suddivide il documento in due per consentirvi di lavorare in due sezioni del codice contemporaneamente.

❖ Selezionate Visualizza > Dividi codice.

Nota: se ridimensionate la finestra del documento o la finestra dell'applicazione o se modificate il layout dell'area di lavoro, Dreamweaver mantiene la proporzione della suddivisione in modo che le due viste siano sempre visibili.

USO DI DREAMWEAVER CS4

Area di lavoro

Passaggio alla vista Progettazione

❖ Effettuate una delle operazioni seguenti:

• Selezionate Visualizza > Progettazione.

• Nella barra degli strumenti Documento, fare clic sul pulsante Mostra vista Progettazione

Visualizzazione contemporanea delle viste Codice e Progettazione

❖ Effettuate una delle operazioni seguenti:

• Selezionate Visualizza > Codice e progettazione.

• Nella barra degli strumenti Documento, fate clic sul pulsante Mostra viste Codice e Progettazione

Per impostazione predefinita, la vista Codice viene visualizzata nella parte superiore della finestra del documento mentre la vista Progettazione viene visualizzata nella parte inferiore. Per visualizzare la vista Progettazione nella parte superiore, selezionate Visualizza > Vista Progettazione in alto.

Passaggio dalla vista Codice alla vista Progettazione:

❖ Premere Ctrl+barra rovesciata (\).

Se entrambe le viste sono visualizzate nella finestra del documento, questa scelta rapida da tastiera consente di passare da una vista all'altra.

Dividere le viste in verticale

Questa opzione è disponibile solo per la vista Codice divisa e per la vista Codice e Progettazione (vista combinata). Non è abilitata per le viste Codice e Progettazione.

1 Assicuratevi di essere nella vista Codice divisa (Visualizza > Dividi codice) o nella vista Codice e Progettazione

(Visualizza > Codice e Progettazione).

2 Selezionate Visualizza > Dividi in verticale.

Se siete nella vista Codice o Progettazione, potete visualizzare la vista Progettazione sulla sinistra (Visualizza > Vista Progettazione a sinistra).

Consultare anche

“Panoramica sulla finestra del documento” a pagina 10

“Pagine di anteprima nella vista Dal vivo” a pagina 305

Sovrapposizione o affiancamento delle finestre dei documenti

In presenza di molti documenti aperti contemporaneamente, è possibile disporli affiancati o sovrapposti.

Consultare anche

“Gestire le finestre e i pannelli” a pagina 25

“Visualizzazione di documenti a schede (solo per Dreamweaver Macintosh)” a pagina 31

USO DI DREAMWEAVER CS4

Area di lavoro

Sovrapposizione delle finestre dei documenti

❖ Selezionare Finestra > Sovrapponi.

Affiancamento delle finestre dei documenti

• In ambiente Windows, selezionare Finestra > Affianca orizzontalmente o Finestra > Affianca verticalmente.

• In ambiente Macintosh, selezionare Finestra > Affianca.

Ridimensionamento della finestra del documento

La barra di stato visualizza le dimensioni correnti della finestra del documento (in pixel). Per progettare una pagina che dia risultati ottimali a dimensioni specifiche, è possibile adattare la finestra del documento a una delle dimensioni predeterminate, modificare tali dimensioni oppure crearne di nuove.

Ripristino delle dimensioni predefinite della finestra del documento

❖ Selezionare una delle opzioni visualizzate nel menu a comparsa Dimensioni finestra situato nella parte inferiore

della finestra del documento.

Nota: (solo per Windows) i documenti nella finestra del documento sono ingranditi per impostazione predefinita; non è possibile ridimensionare un documento quando è ingrandito. Per annullare l'ingrandimento del documento, fate clic sul pulsante corrispondente nell'angolo superiore destro del documento.

Le dimensioni della finestra si riferiscono alle dimensioni interne della finestra del browser (senza i bordi). I valori tra parentesi indicano le dimensioni del monitor. Ad esempio, se si prevede che i visitatori del sito utilizzeranno la configurazione predefinita di Internet Explorer o Netscape Navigator su un monitor da 640 x 480, l'opzione da utilizzare è “536 x 196 (640 x 480, predefinita)”.

Per un ridimensionamento meno preciso, utilizzare i metodi consueti del sistema operativo in uso, ad esempio il trascinamento dell'angolo inferiore destro di una finestra.

Modifica dei valori elencati nel menu a comparsa Dimensioni finestra

1 Selezionare Modifica dimensioni dal menu a comparsa Dimensioni finestra.

2 Fare clic su uno dei valori di larghezza o altezza dell'elenco Dimensioni finestra e digitare un nuovo valore.

Per modificare solo la larghezza della finestra del documento (lasciando invariata l'altezza), selezionare un valore di altezza e cancellarlo.

3 Fare clic nella casella di testo Descrizione se si desidera inserire un testo descrittivo per una dimensione specifica.

Aggiunta di una nuova opzione al menu a comparsa Dimensioni finestra

1 Selezionare Modifica dimensioni dal menu a comparsa Dimensioni finestra.

2 Fare clic nello spazio vuoto situato sotto l'ultimo valore della colonna Larghezza.

USO DI DREAMWEAVER CS4

Area di lavoro

3 Inserire una larghezza e un'altezza.

Per impostare solo la larghezza o solo l'altezza, è sufficiente lasciare vuoto uno dei due campi.

4 Fare clic nel campo Descrizione se si desidera inserire un testo descrittivo per la dimensione aggiunta.

Ad esempio, digitare SVGA o PC normale accanto alla voce relativa a un monitor da 17 pollici con risoluzione 800 x 600 pixel e 17 poll. Mac accanto alla voce relativa a un monitor con risoluzione di 832 x 624 pixel. La maggior parte dei monitor supporta più dimensioni in pixel.

Impostazione delle dimensioni delle finestre e della velocità di connessione

1 Selezionare Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).

2 Selezionare Barra di stato nell'elenco Categoria visualizzato a sinistra.

3 Impostare le opzioni desiderate tra le seguenti:

Dimensioni finestra Consente di personalizzare le dimensioni che appaiono nel menu a comparsa della barra di stato.

Velocità di connessione Specifica la velocità di connessione (in kilobit al secondo) che viene utilizzata per calcolare le

dimensioni di scaricamento. Le dimensioni di scaricamento della pagina vengono visualizzate nella barra di stato. Quando un'immagine viene selezionata nella finestra del documento, le dimensioni di scaricamento dell'immagine vengono visualizzate nella finestra di ispezione Proprietà.

Consultare anche

“Panoramica sulla barra di stato” a pagina 13

“Ridimensionamento della finestra del documento” a pagina 21

Rapporti di Dreamweaver

È possibile eseguire i rapporti in Dreamweaver per trovare i contenuti, verificarli o risolverne i problemi. È possibile generare i tipi di rapporti seguenti:

Cerca Consente di cercare tag, attributi e testo specifico nei tag.

Riferimenti Consente di consultare utili informazioni di riferimento.

Convalida Consente di controllare la presenza di errori nel codice o di sintassi.

Compatibilità browser Consente di controllare il codice HTML nei documenti per verificare se sono presenti tag o

attributi non supportati dai browser di destinazione.

Controllo collegamenti Consente di trovare e correggere i collegamenti interrotti, esterni o orfani.

Rapporti sito Consente di migliorare il flusso di lavoro e verificare gli attributi HTML nel sito. I rapporti Flusso di

lavoro includono Ritirato da, Flash e Design Notes. I rapporti HTML includono Tag Font nidificati combinabili, Accessibilità, Testo Alt mancante, Tag nidificati superflui, Tag vuoti eliminabili e Documenti senza titolo.

Registro FTP Consente di visualizzare tutte le attività di trasferimento file FTP.

Debug server Consente di visualizzare informazioni per il debug di un'applicazione Adobe ® ColdFusion®.

Consultare anche

“Ricerca di tag, attributi o testo nel codice” a pagina 335

“Uso del materiale di riferimento per i linguaggi” a pagina 336

“Verifica del sito” a pagina 119

USO DI DREAMWEAVER CS4

Area di lavoro

“Convalida dei tag” a pagina 342

“Verifica della compatibilità con i browser” a pagina 341

“Ricerca di collegamenti interrotti, esterni e isolati” a pagina 302

“Caricamento di file su un server remoto” a pagina 91

“Scaricamento di file da un server remoto” a pagina 90

“Uso del debugger ColdFusion (solo per Windows)” a pagina 343

Uso delle barre degli strumenti, delle finestre di ispezione e dei menu di scelta rapida

Visualizzazione delle barre degli strumenti

Utilizzare le barre degli strumenti Documento e Standard per eseguire operazioni relative al documento e operazioni di modifica standard, la barra degli strumenti Codifica per inserire rapidamente il codice e la barra degli strumenti Stile di rendering per visualizzare la pagina così come apparirebbe su vari tipi di supporto. È possibile scegliere se visualizzare o nascondere le barre degli strumenti, in base alle proprie necessità.

• Selezionare Visualizza > Barre degli strumenti, e quindi selezionare la barra degli strumenti.

• Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) su una

delle barre degli strumenti e selezionare la barra dal menu di scelta rapida.

Nota: per visualizzare o nascondere la barra degli strumenti Codifica nella finestra di ispezione Codice (Finestra > Finestra di ispezione Codice), selezionare Barra degli strumenti Codifica dal menu a comparsa Opzioni di visualizzazione, nella parte superiore della finestra.

Consultare anche

“Panoramica sulla barra degli strumenti Documento” a pagina 11

“Panoramica sulla barra degli strumenti standard” a pagina 12

“Panoramica sulla barra degli strumenti Codifica” a pagina 14

“Panoramica sulla barra degli strumenti Stile di rendering” a pagina 14

Uso della finestra di ispezione Proprietà

Per accedere alla Guida di una particolare finestra di ispezione Proprietà, fate clic sul pulsante della Guida nell'angolo superiore destro della finestra, oppure selezionate Guida dal menu Opzioni della finestra.

Nota: usate la finestra di ispezione Tag per visualizzare e modificare gli attributi associati a una determinata proprietà di tag.

USO DI DREAMWEAVER CS4

Area di lavoro

Consultare anche

“Panoramica sulla finestra di ispezione Proprietà” a pagina 15

“Definizione delle proprietà del testo nella finestra di ispezione Proprietà” a pagina 242

“Ancorare e disancorare i pannelli” a pagina 26

“Modifica degli attributi nella finestra di ispezione Tag” a pagina 345

Visualizzare o nascondere la finestra di proprietà Ispezione

❖ Selezionare Finestra > Proprietà.

Espandere o comprimere la finestra di ispezione Proprietà

❖ Fare clic sulla freccia di espansione nell'angolo inferiore destro della finestra di ispezione Proprietà.

Visualizzazione e modifica delle proprietà di un elemento pagina

1 Selezionare l'elemento di pagina nella finestra del documento.

Potrebbe essere necessario espandere la finestra di ispezione Proprietà per visualizzare tutte le proprietà dell'elemento selezionato.

2 Modificare qualsiasi proprietà nella finestra di ispezione Proprietà.

Nota: per ottenere informazioni su proprietà specifiche, selezionare un elemento nella finestra del documento e fare clic sull'icona della Guida nell'angolo superiore destro della finestra di ispezione Proprietà.

3 Se le modifiche non vengono applicate immediatamente nella finestra del documento, applicarle effettuando una

delle operazioni seguenti:

• Fare clic all'esterno dei campi di modifica testo della proprietà.

• Premere Invio.

• Premere Tab per passare a un'altra proprietà.

Uso dei menu di scelta rapida

I menu di scelta rapida garantiscono l'accesso rapido ai principali comandi e proprietà dell'oggetto o della finestra con cui si sta lavorando. I menu di scelta rapida contengono solo i comandi che riguardano la selezione corrente.

1 Fare clic con il pulsante destro (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sull'oggetto o

documento.

+ 700 hidden pages