Introduzione a Macromedia Studio MX

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Introduzione a Macromedia Studio MX"

Transcript

1 Introduzione a Macromedia Studio MX macromedia

2 Marchi Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind e Xtra sono marchi di fabbrica di Macromedia, Inc. e possono essere registrati negli Stati Uniti e in altre giurisdizioni, anche internazionali. Altri nomi di prodotti, logo, progetti, titoli, termini o frasi che appaiono nella presente pubblicazione possono essere marchi, marchi di servizio o denominazioni commerciali di Macromedia, Inc. o di altre società e potrebbero essere registrati in alcune giurisdizioni, incluse le giurisdizioni internazionali. Questo manuale contiene dei collegamenti a siti Web di terze parti che non sono sotto il controllo di Macromedia: Macromedia non è pertanto responsabile del contenuto dei suddetti siti. Se si accede ad un sito Web di terze parti citato in questo manuale, la responsabilità è interamente a carico dell utente. Tali collegamenti sono inclusi nella presente Guida solo per la loro utilità e ciò non implica che Macromedia approvi il loro contenuto o se ne assuma la responsabilità. Dichiarazione di non responsabilità Apple APPLE COMPUTER, INC. NON FORNISCE ALCUNA GARANZIA, ESPLICITA O IMPLICITA, PER IL PACCHETTO SOFTWARE ACCLUSO, IN RELAZIONE ALLA SUA COMMERCIABILITÀ O IDONEITÀ PER SCOPI SPECIFICI. POICHÉ L'ESCLUSIONE DELLE GARANZIE IMPLICITE NON È CONSENTITA DA ALCUNI PAESI, POTREBBE NON ESSERE APPLICABILE. LA PRESENTE GARANZIA CONFERISCE ALL'UTENTE PARTICOLARI DIRITTI. ALTRI DIRITTI POSSONO ESSERE RITENUTI VALIDI, A SECONDA DEL PAESE. Copyright Macromedia, Inc. Tutti i diritti riservati. Il presente manuale non può essere copiato, fotocopiato, riprodotto, tradotto o convertito in qualunque formato elettronico o leggibile da macchine, né integralmente né parzialmente, senza il preventivo consenso scritto di Macromedia, Inc. Numero di parte ZWS60M100IT Ringraziamenti Questo manuale è stato scritto e prodotto da membri dei team di sviluppo di ColdFusion, Dreamweaver, Fireworks, Flash e FreeHand. Desideriamo ringraziare in particolare tutti i team di localizzazione per il lavoro svolto. Prima edizione: Maggio 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

3 SOMMARIO Parte I Introduzione INTRODUZIONE Guida introduttiva Informazioni su questo manuale Nota per gli utenti di ColdFusion MX Server nella lingua internazionale Installazione di Macromedia Studio MX Apprendimento di Macromedia Studio MX Accessibilità e famiglia di prodotti Macromedia Studio MX Come contattare Macromedia CAPITOLO 1 Introduzione agli strumenti di Macromedia Studio MX Macromedia Dreamweaver MX Macromedia Flash MX Macromedia Fireworks MX Macromedia FreeHand Macromedia ColdFusion MX Server Gestore estensioni Macromedia Analisi dell'area di lavoro MX Parte II Sviluppo per il Web CAPITOLO 2 Tecnologie e applicazioni Web Internet e tecnologie relative Applicazioni Web

4 CAPITOLO 3 Flusso di lavoro di sviluppo di siti Web Pianificazione del sito Web Impostazione dell'ambiente di sviluppo Pianificazione della progettazione della pagina e dello schermo Creazione delle risorse del contenuto Creazione di risorse dell'applicazione Assemblaggio, prova e trasferimento Ulteriori informazioni Parte III Dreamweaver MX CAPITOLO 4 Dreamweaver MX Novità in Dreamweaver MX Apprendimento di Dreamweaver Risorse di tecnologie Web e HTML CAPITOLO 5 Esercitazioni di Dreamweaver MX Impostazione di un sito locale Creazione e salvataggio di una nuova pagina Correzione del layout Impostazione di un titolo di pagina Aggiunta di testo formattato Aggiunta di immagini Impostazione dei colori di sfondo Visualizzazione del codice Creazione di una seconda pagina Aggiunta di collegamenti testuali tra le pagine Creazione di rollover per i collegamenti grafici Copia della barra di navigazione Anteprima nel browser Impostazione di un sito remoto e pubblicazione Ulteriori informazioni Passaggio all area di lavoro per l inserimento del codice Copia di una cartella nel sito Visualizzazione delle pagine completate Apertura di più pagine Aggiunta di un immagine mediante trascinamento Aggiunta di un collegamento con il Selettore tag Modifica di un tag Ricerca di informazioni relative a un tag Aggiunta di un'immagine mediante i Suggerimenti per il codice Controllo delle modifiche Aggiunta di un collegamento tramite la barra Inserisci Stampa del codice Ulteriori informazioni Sommario

5 Prima di iniziare Inizio dell esercitazione Creazione di un modulo di inserimento record Copia dei file sul server Ulteriori informazioni CAPITOLO 6 Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX Integrazione tra Fireworks MX e Macromedia Flash MX Uso di Dreamweaver e Macromedia Fireworks MX Creazione di un album fotografico Web in Dreamweaver MX Uso di Dreamweaver MX e Macromedia Flash MX Parte IV Flash MX CAPITOLO 7 Macromedia Flash MX Novità di Macromedia Flash MX Offerta di intensi contenuti Web con Macromedia Flash Player Apprendimento di Macromedia Flash MX CAPITOLO 8 Esercitazione di Flash MX Conoscenze preliminari Visualizzazione del filmato finale Analisi del file stiletto.fla Definizione delle proprietà di un nuovo documento e creazione di uno sfondo sfumato Creazione di un disegno vettoriale e applicazione di maschere Interpolazione di effetti bitmap all'interno di un clip filmato Caricamento di testo dinamico in fase di esecuzione Aggiunta di animazioni e navigazione ai pulsanti Inserimento di suoni evento e audio in streaming Organizzazione del pannello Libreria Prova delle prestazioni di scaricamento e pubblicazione del filmato Altre operazioni CAPITOLO 9 Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX Macromedia Dreamweaver MX Macromedia FreeHand Macromedia Fireworks MX Macromedia ColdFusion MX Server Sommario 5

6 Parte V Fireworks MX CAPITOLO 10 Benvenuti in Macromedia Fireworks MX Novità di Fireworks MX Visita guidata di Fireworks MX CAPITOLO 11 Esercitazioni di Fireworks Argomenti trattati Conoscenze preliminari Copia della cartella Tutorials Visualizzazione del file finale Creazione e salvataggio di un nuovo documento Esplorazione dell'ambiente di lavoro di Fireworks Creazione e modifica di oggetti vettoriali Importazione di un'immagine bitmap e selezione di pixel Aggiunta e modifica di Effetti dal vivo Operazioni con i livelli e gli oggetti Creazione e modifica di una maschera Creazione e modifica del testo Esportazione del documento Per approfondire Argomenti trattati Conoscenze preliminari Copia della cartella Tutorials Visualizzazione della pagina Web finale Apertura del file sorgente Importazione di un'immagine Divisione di un documento in porzioni Creazione di un rollover di trascinamento Creazione e modifica di pulsanti per creare una barra di navigazione Creazione e modifica di un menu a comparsa Ottimizzazione del documento Esportazione di codice HTML Verifica del file finale Per approfondire CAPITOLO 12 Integrazione di Macromedia Fireworks MX con la suite di prodotti Macromedia Studio MX Uso di Macromedia Fireworks MX e di Macromedia Dreamweaver MX Operazioni con Macromedia Fireworks MX e Macromedia HomeSite Uso di Macromedia Fireworks MX e di Macromedia Flash MX Operazioni con Fireworks MX e Macromedia FreeHand Sommario

7 Parte VI FreeHand CAPITOLO 13 Benveuto in Macromedia FreeHand Nuove funzioni di FreeHand Apprendimento di FreeHand CAPITOLO 14 Esercitazione di FreeHand Conoscenze preliminari Visualizzazione dei file dell'esercitazione Creazione di oggetti Uso del pannello Strumenti per applicare tratti e colori di riempimento diversi Creazione di una fusione lungo un tracciato Aggiunta di effetti speciali Operazioni con gli oggetti su livelli Importazione di oggetti Operazioni con i simboli e le istanze Uso del pennello Spray Uso dei colori e delle tinte Aggiunta di un contorno sfumato al testo Eliminazione di pagine dal documento Uso della griglia in prospettiva Definizione dell'area di stampa Aggiunta di pulsanti di navigazione Visualizzazione in anteprima del file nella finestra Macromedia Flash Player Esportazione del documento Per saperne di più CAPITOLO 15 Integrazione di FreeHand con la famiglia di prodotti Macromedia Studio MX Animazione di testo e oggetti in FreeHand Assegnazione di azioni Macromedia Flash MX ad immagini FreeHand Esportazione di documenti FreeHand come filmati Macromedia Flash MX Uso del Controller o del menu di controllo di FreeHand con file SWF Flash MX Sommario 7

8 Parte VII ColdFusion MX Server CAPITOLO 16 Installazione della Developer Edition di Macromedia ColdFusion MX Server Requisiti di sistema di ColdFusion MX per Windows Installazione di Macromedia ColdFusion MX Server su Windows Conferma dell'installazione e gestione ColdFusion MX Server CAPITOLO 17 Macromedia ColdFusion MX ColdFusion MX Server ColdFusion Markup Language Vantaggi e funzioni principali di ColdFusion Novità di ColdFusion MX Server Funzioni di integrazione di ColdFusion MX Visita guidata di ColdFusion MX INDICE ANALITICO Sommario

9 Parte I Introduzione Parte I I capitoli della prima parte illustrano la procedura di installazione di Macromedia Studio MX, forniscono informazioni sulle risorse di Macromedia e presentano la famiglia di prodotti Macromedia Studio MX. Questa parte è costituita dai seguenti capitoli: Introduzione, Guida introduttiva Capitolo 1, Introduzione agli strumenti di Macromedia Studio MX

10

11 INTRODUZIONE Guida introduttiva Macromedia Studio MX è una suite integrata di strumenti di sviluppo potenti e di facile utilizzo che supporta gli standard e le tecnologie Web emergenti per la creazione di siti Web e applicazioni Internet dinamiche che possono essere distribuite tra le piattaforme e i dispositivi principali. La suite comprende Macromedia Flash MX, Dreamweaver MX, Fireworks MX, FreeHand, la Developer Edition di ColdFusion MX Server e Macromedia Flash Player 6. Macromedia Studio MX dispone di funzionalità per ogni parte del processo di produzione Web, compresa la creazione di immagini, il layout di pagine HTML, la codifica della logica delle applicazioni, la creazione di interfacce utente dinamiche e l'assemblaggio di soluzioni complete. I prodotti Macromedia MX sono creati per essere sviluppati rapidamente. Facili da apprendere e da usare, comprendono numerose funzioni che consentono di aumentare la produttività degli sviluppatori, dai componenti e modelli preimpostati ad un flusso di lavoro integrato e un'interfaccia utente condivisa. Macromedia Studio MX consente agli sviluppatori di creare applicazioni Internet dinamiche nel modo più efficace ed intuitivo. Mediante Macromedia Studio MX, i designer e gli sviluppatori possono creare applicazioni interattive che uniscono la funzionalità di tradizionali soluzioni client/server alla portata estesa e al trasferimento economico delle applicazioni per il Web. Macromedia Studio MX dispone di una nuova area di lavoro, di molte funzioni ed elementi di interfaccia comuni per accelerare il flusso di lavoro. Questa versione è un importante passo avanti nella realizzazione di una piattaforma di sviluppo Web flessibile e produttiva a cui si è dedicata Macromedia. Macromedia Studio MX si basa sui punti di forza dei singoli prodotti e ne migliora le capacità sinergiche ottimizzandole. È possibile installare la Developer Edition di ColdFusion MX Server sul sistema locale per valutare facilmente lo sviluppo di applicazioni Internet dinamiche dopo aver creato e trasferito le applicazioni mediante gli strumenti di Macromedia Studio MX. Vedere Capitolo 16, Installazione della Developer Edition di Macromedia ColdFusion MX Server, a pagina 391. Per ulteriori informazioni sulla famiglia di prodotti Macromedia Studio MX, vedere Introduzione agli strumenti di Macromedia Studio MX a pagina 21 o le sezioni dei singoli prodotti in questo manuale. 11

12 Informazioni su questo manuale Scopo del manuale è consentire all'utente di familiarizzare con la famiglia di prodotti Macromedia Studio MX e di apprenderne il funzionamento sinergico come ambiente di sviluppo Web più potente e produttivo attualmente disponibile. È possibile leggere l'intera documentazione per tutti i prodotti Macromedia Studio MX in formato HTML aprendola dai menu Guida (?) dei singoli prodotti, consultando il file in formato Adobe Acrobat (PDF) disponibile sul CD-ROM oppure nelle sezioni dedicate ai prodotti nel sito Web Macromedia, Il manuale è strutturato in modo da familiarizzare rapidamente con ogni prodotto seguendo un'esercitazione che spiega i principi fondamentali delle operazioni di creazione di un sito Web, la progettazione di un filmato Flash per il Web, la creazione di un documento per il Web e di un file di immagine. Se si conoscono uno o più prodotti, è possibile leggere le informazioni sulle nuove funzioni e sui miglioramenti di questa versione e sulla modalità di integrazione dei prodotti in un flusso di lavoro per lo sviluppo di siti Web. Il manuale è suddiviso nelle seguenti sezioni: Introduzione La parte I del manuale costituisce un'introduzione agli strumenti di Studio MX. Il presente capitolo, Guida introduttiva, comprende le istruzioni per l'installazione, illustra le risorse per apprendere l'uso dei prodotti, spiega le informazioni di accessibilità e include un riepilogo delle nuove funzioni. Il capitolo 1 descrive in sintesi i prodotti della linea Studio, i relativi elementi di interfaccia comuni e gli strumenti per l'aumento della produttività. Applicazioni Web e flusso di lavoro La parte II del manuale comprende una panoramica delle tecnologie Web e la spiegazione del flusso di lavoro di sviluppo mediante gli strumenti di Studio MX Il capitolo 2 spiega i concetti fondamentali delle tecnologie e delle applicazioni Web. Il capitolo 3 presenta un dettagliato flusso di lavoro dello sviluppo basato sulla creazione di un'applicazione Web interattiva. Sezioni dei prodotti Dalla parte III alla parte VI viene spiegato in dettaglio ogni prodotto della linea Studio MX. Ogni parte comprende i seguenti capitoli relativi al prodotto specifico: Un'introduzione che descrive sinteticamente il prodotto, riepiloga le nuove funzioni e fornisce riferimenti a risorse che consentono di conoscere ulteriori caratteristiche del prodotto Un'esercitazione mirata ai nuovi utenti del prodotto Una guida all'uso interattivo dei prodotti La parte VII del manuale comprende due capitoli su ColdFusion MX che spiegano come installare ColdFusion MX e come usarlo con altri prodotti di Studio MX. Per informazioni su ulteriori risorse, vedere Apprendimento di Macromedia Studio MX a pagina Introduzione

13 Nota per gli utenti di ColdFusion MX Server nella lingua internazionale ColdFusion MX non è disponibile in portoghese, spagnolo, italiano, svedese, cinese semplificato e cinese tradizionale, pertanto da Macromedia Studio MX viene installata la versione in inglese. Conseguentemente, i comandi di menu e le figure dell'interfaccia riportati nel manuale sono in inglese. Installazione di Macromedia Studio MX Macromedia Studio MX è installabile con estrema facilità su computer Windows e Macintosh. Macromedia consiglia di installare Macromedia Studio MX completo in un'unica operazione, ma è possibile installare in modo selettivo singole applicazioni. La Developer Edition di ColdFusion MX Server per Windows viene installata distintamente. Per ulteriori informazioni, vedere Capitolo 16, Installazione della Developer Edition di Macromedia ColdFusion MX Server, a pagina 391. Installazione di Macromedia Studio MX in Windows Per installare Macromedia Studio MX in Windows, procedere come descritto di seguito. Per installare Macromedia Studio MX in Windows: 1 Inserire il CD-ROM di Macromedia Studio MX nell'unità CD-ROM del computer per visualizzare la finestra del programma di installazione di Macromedia Studio MX. Se la finestra non viene visualizzata o si esegue l'installazione da un'unità di rete, usare Esplora risorse di Windows per trovare il programma Installa Macromedia Studio MX.exe nella directory principale, quindi fare doppio clic su di esso. Guida introduttiva 13

14 2 Eseguire una delle operazioni descritte di seguito: Selezionare l'opzione Installa Studio MX nella finestra di selezione dell'installazione. Macromedia consiglia di selezionare questa opzione. Per installare solo un programma, selezionarlo nella finestra. Ripetere questa procedura per installare altri prodotti singolarmente. Prima di installare ColdFusion MX, vedere Installazione della Developer Edition di Macromedia ColdFusion MX Server a pagina Completare le finestre Contratto di licenza e Informazioni utente, quindi fare clic su OK. A seconda del numero di serie immesso e delle applicazioni Macromedia rilevate sul sistema, è possibile che venga visualizzata una seconda finestra Informazioni utente. In questo caso, per continuare, specificare le informazioni richieste. 4 Accettare la posizione predefinita per le applicazioni installate o selezionarne una diversa. 5 Fare clic su Avanti per installare i programmi selezionati. Al termine dell'installazione, viene visualizzata la finestra finale dell'installazione guidata. 6 Fare clic su Fine per terminare l installazione. Se si è selezionata l'opzione Installa Studio MX, viene visualizzato il file Leggimi di Macromedia Studio MX. Se si è installato un singolo prodotto, viene visualizzato il relativo file informativo. La finestra di installazione principale rimane visualizzata finché non si sceglie il pulsante Chiudi. Le applicazioni installate di Macromedia Studio MX sono ora disponibili nel menu Start di Windows, sotto Programmi > Macromedia. 7 Per visualizzare tutti gli eccezionali extra disponibili con Macromedia Studio MX, selezionare Sfoglia contenuto CD. Per disinstallare i programmi: Selezionare Start > Impostazioni > Pannello di controllo > Installazione applicazioni, quindi selezionare il programma che si desidera disinstallare. Informazioni sull'installazione di ColdFusion MX Server La Developer Edition di ColdFusion MX Server è una versione gratuita che si può usare per sviluppare applicazioni Web sull'host locale e su un indirizzo IP remoto. Questa edizione viene fornita a scopo di valutazione e non è concessa in licenza per il trasferimento. Per informazioni sui requisiti di installazione di ColdFusion MX Server, vedere Requisiti di sistema di ColdFusion MX per Windows a pagina Introduzione

15 Installazione di Macromedia Studio MX su Macintosh Per installare Macromedia Studio MX su Macintosh, procedere nel modo descritto di seguito. Per installare Macromedia Studio MX su Macintosh: 1 Inserire il CD-ROM di Macromedia Studio MX nell'unità CD-ROM del computer per visualizzare la finestra del programma di installazione di Macromedia Studio MX. Se la finestra non viene visualizzata, fare doppio clic sull'icona Installa Macromedia Studio MX del CD-ROM. 2 Eseguire una delle operazioni descritte di seguito: Selezionare l'opzione Installa Studio MX nella finestra di selezione dell'installazione. Macromedia consiglia di selezionare questa opzione. Per installare solo un programma, selezionarlo nella finestra. Ripetere questa procedura per installare altri prodotti singolarmente. 3 Fare clic su Continua per passare alla schermata successiva. 4 Completare la finestra Contratto di licenza. 5 Nella finestra Posizione, accettare la posizione predefinita per le applicazioni installate o selezionarne una diversa. Per continuare, fare clic su Installa. 6 Completare la finestra Informazioni utente, quindi fare clic su OK. A seconda del numero di serie immesso e delle applicazioni Macromedia rilevate sul sistema, è possibile che venga visualizzata una seconda finestra Informazioni utente. In questo caso, per continuare, specificare le informazioni richieste. Se si è selezionata l'opzione Installa Studio MX, viene visualizzato il file Leggimi di Macromedia Studio MX. Se si è installato un singolo prodotto, viene visualizzato il relativo file informativo. La finestra di installazione principale rimane visualizzata finché non si sceglie il pulsante Chiudi. Le applicazioni installate di Macromedia Studio MX sono ora disponibili nella cartella Applicazioni. Per disinstallare i programmi: Trascinare la cartella di un prodotto dalla cartella Applicazioni al Cestino. Come impedire la violazione della licenza di rete Se viene visualizzata la finestra di dialogo Rilevamento licenza di rete quando si tenta di aprire un'applicazione Macromedia, è possibile che sia stato superato il numero di copie concesse in licenza consentite per il numero di serie immesso. La finestra di dialogo viene visualizzata quando le applicazioni Macromedia rilevano un altro utente su una rete aziendale che usa lo stesso numero di serie del licenziatario. È necessario disporre di una licenza software (con un numero di serie) per ogni copia del software Macromedia installato su ogni computer. Nota: il messaggio può essere visualizzato se si tenta di installare una copia di un'applicazione fornita con Macromedia Studio su più computer. Le applicazioni fornite con Macromedia Studio sono considerate un singolo prodotto e vengono concesse in licenza per essere installate su un solo computer. Guida introduttiva 15

16 Per impedire la violazione della licenza, effettuare una delle seguenti operazioni: Acquistare una copia concessa in licenza del software Macromedia per ogni computer. Per ulteriori informazioni, rivolgersi ad un rivenditore Macromedia oppure visitare il nostro negozio Web all'indirizzo In collaborazione con il dipartimento informatico, individuare le persone che usano lo stesso numero di serie in rete. Specificare il nome utente e l'indirizzo IP visualizzati nella finestra di dialogo Rilevamento licenza di rete. Ci scusiamo per gli eventuali inconvenienti causati. Se si ritiene che la finestra di dialogo sia stata visualizzata per errore, usare il menu Centro di supporto della pagina Supporto all'indirizzo per trovare il prodotto, quindi cercare gli articoli relativi al rilevamento della licenza di rete. I Centri di supporto di Macromedia forniscono le informazioni aggiornate sul nostro software. Prima di contattare il servizio assistenza Macromedia all'indirizzo reperire una copia della fattura o della ricevuta di acquisto del prodotto. Per ulteriori informazioni sulla concessione delle licenze, consultare il Contratto di licenza con l'utente finale, nel file Licenza.htm, che si trova nella directory in cui è installato il software Macromedia. Registrazione di Macromedia Studio MX Per ottenere ulteriore assistenza da Macromedia, si consiglia di registrare la copia di Macromedia Studio MX per via elettronica o postale. All'atto della registrazione, si viene inseriti nell'elenco dei destinatari che riceveranno informazioni dell'ultimo minuto su aggiornamenti e nuovi prodotti Macromedia, ovvero comunicazioni tempestive sugli aggiornamenti dei prodotti e sul nuovo contenuto disponibile all'indirizzo Per registrare Macromedia Studio MX: In qualsiasi prodotto Macromedia Studio MX, selezionare?, quindi l'opzione di registrazione in linea o tramite modulo stampato. La registrazione di un prodotto Studio MX è valida anche per gli altri prodotti. Apprendimento di Macromedia Studio MX Oltre al presente manuale, Macromedia fornisce numerose risorse per apprendere i vari aspetti della progettazione, dello sviluppo e dell'integrazione del contenuto Web nel modo più produttivo mediante la famiglia di prodotti Macromedia Studio MX. Segue un elenco sintetico delle risorse. Il file Leggimi, che viene visualizzato al termine dell'installazione, comprende collegamenti alle informazioni più aggiornate su funzionalità e problemi relativi al prodotto, nonché altre risorse. Il Centro per designer e sviluppatori all'indirizzo fornisce molte informazioni pratiche sulle tecnologie Web, nonché sulla progettazione e sullo sviluppo di siti Web. Il sito dedicato alla tecniche di gestione della produzione e dei siti Web, all'indirizzo è un comprovato servizio che consente di gestire correttamente le complesse questioni creative ed organizzative relative all'avvio e alla gestione di un'efficace presenza su Internet. 16 Introduzione

17 I forum in linea di Macromedia all'indirizzo consentono agli sviluppatori con diversi livelli di esperienza di condividere idee e tecniche d'uso dell'intera famiglia di prodotti Macromedia. Questi forum sono consultati anche dal personale del supporto tecnico di Macromedia, componenti dei team di sviluppo dei prodotti e del team Macromedia. Accessibilità e famiglia di prodotti Macromedia Studio MX Macromedia supporta la creazione di siti Web eccezionalmente accessibili a tutti e stiamo lavorando per rendere l'interfaccia e gli strumenti dei nostri prodotti più accessibili agli utenti disabili. Le informazioni più recenti sulle funzioni dei prodotti e sulle risorse che consentono l'accesso ai disabili sono disponibili nella pagina sull'accessibilità di Macromedia all'indirizzo Le linee guida del World Wide Web Consortium (W3C) sul contenuto Web invitano gli sviluppatori ad adottare pratiche di progettazione e codifica per garantire l'accessibilità. Per ulteriori informazioni sulle linee guida del W3C, consultare la sezione Web Content Authoring Guidelines all'indirizzo Le seguenti funzioni di accessibilità sono disponibili per l'uso dei prodotti finali e delle applicazioni necessarie allo sviluppo del contenuto accessibile. Accessibilità di Macromedia Dreamweaver MX Dreamweaver MX supporta i programmi di lettura delle finestre JAWS e Window Eyes. Grazie al supporto delle impostazioni di visualizzazione ad alto contrasto di Windows, Dreamweaver è accessibile a tutti gli utenti. L'applicazione supporta inoltre lo spostamento nell'interfaccia tramite tastiera. Le finestre di dialogo di accessibilità di Dreamweaver richiedono l'immissione di tag e attributi di accessibilità quando si inseriscono immagini, oggetti multimediali, tabelle e altri elementi per i quali è necessario il supporto dell'accessibilità. Dreamweaver comprende pagine Web di esempio progettate per l'accessibilità. Per ulteriori informazioni, in Dreamweaver, scegliere? > Uso di Dreamweaver > Dreamweaver e accessibilità. Accessibilità di Macromedia Flash MX Il testo dei filmati, i campi di inserimento del testo, i pulsanti, i clip filmato e i filmati Flash sono accessibili per impostazione predefinita. Ciò significa che tutti questi elementi sono inclusi nelle informazioni che Macromedia Flash Player 6 trasmette al programma di lettura delle finestre, indipendentemente dal fatto che il filmato Flash sia stato creato con Flash MX o una versione precedente. È possibile impostare proprietà descrittive per ognuno di questi tipi di oggetti e tali impostazioni sono incluse nelle informazioni che Macromedia Flash Player 6 trasmette al programma di lettura delle finestre. Macromedia Flash Player assegna automaticamente nomi ad oggetti di testo statici e dinamici. È possibile assegnare etichette a pulsanti e campi di inserimento del testo affinché vengano identificati in modo corretto da un programma di lettura delle finestre. Guida introduttiva 17

18 È possibile usare il metodo ActionScript Accessibility.isActive per rilevare se un programma di lettura delle finestre è in esecuzione durante la riproduzione del filmato. Questo è utile quando si desidera che il filmato abbia un comportamento personalizzato quando è presente un programma di lettura delle finestre. È possibile impostare un ordine di tabulazione personalizzato e definire tasti di scelta rapida per gli oggetti accessibili. Per ulteriori informazioni, in Flash, scegliere? > Uso di Flash > Creazione di contenuto accessibile. Accessibilità di Macromedia Fireworks MX I comandi per valutare il livello di accessibilità delle immagini sono disponibili in Dreamweaver Exchange. I comandi Select Blank ALT Tags e Set Blank ALT Tags consentono agli sviluppatori di trovare rapidamente i tag di immagine che non contengono testo alternativo e di specificarlo. Il testo alternativo consente ai dispositivi di ausilio esclusivamente testuali di interpretare le immagini. La finestra di ispezione Oggetti consente di assegnare attributi di testo alternativo a qualsiasi area sensibile o parte di immagine. I designer possono facilmente creare e condividere pannelli di campione di colore personalizzati per garantire il corretto contrasto di tonalità e saturazione alle immagini per il Web, come i pulsanti, che richiedono un adeguato contrasto tra primo piano e lo sfondo per essere più facilmente individuabili dagli utenti affetti da disturbi alla vista. Fireworks MX comprende una potente integrazione con le funzioni di accessibilità di Macromedia Flash MX e Dreamweaver MX. Per ulteriori informazioni, visitare il sito dedicato all'accessibilità di Fireworks all'indirizzo Accessibilità di Macromedia FreeHand 10 FreeHand 10 supporta la personalizzazione delle scelte rapide da tastiera e degli acceleratori di menu. La maggior parte della funzionalità è disponibile in finestre di dialogo; ai menu dei pannelli si può accedere tramite la tecnologia di ausilio. La gestione dei colori standard, l'uso di più spazi colore e la regolazione fine dei valori di colore, consentono di creare facilmente il contenuto accessibile. I colori e i relativi valori possono essere modificati in modo sia visivo che alfanumerico. In FreeHand si usa il sistema API per il rendering del testo, tranne quando questo è convertito in tracciati. I controlli standard a livello di sistema visualizzano e acquisiscono i dati sull'utente per impostazione predefinita. Il testo delle descrizioni comandi è disponibile per ogni immagine che funge da elemento di interfaccia utente. 18 Introduzione

19 Come contattare Macromedia Sede Supporto tecnico Macromedia, Inc. 600 Townsend Street San Francisco, CA Tel: Fax: Web: Macromedia offre varie opzioni di assistenza telefonica e via Internet. La descrizione completa dei servizi di supporto tecnico è disponibile all'indirizzo Vendite Numero verde: Tel: Fax: Guida introduttiva 19

20 20 Introduzione

21 CAPITOLO 1 Introduzione agli strumenti di Macromedia Studio MX Macromedia Studio MX comprende i seguenti strumenti di sviluppo, potenti e di facile utilizzo che supportano numerosi standard e tecnologie Web per la creazione di applicazioni Internet dinamiche: Dreamweaver MX, il prodotto preferito dai professionisti per la creazione e la gestione di siti Web in HTML. Flash MX, la soluzione più potente per lo sviluppo di applicazioni e di contenuti Internet dinamici, che possono essere distribuiti tra più piattaforme e dispositivi mediante Macromedia Flash Player. Fireworks MX, un ambiente di produzione potente e flessibile per la creazione, la modifica e l'animazione di grafica Web. FreeHand, un'applicazione di disegno vettoriale in grado di generare illustrazioni. ColdFusion MX, un veloce ambiente di script lato server, per la creazione di applicazioni Internet dinamiche. Le seguenti sezioni comprendono sintetiche descrizioni dei prodotti Macromedia Studio MX. Macromedia Dreamweaver MX Macromedia Dreamweaver MX è il prodotto professionale per la creazione di siti Web e applicazioni Internet dinamiche. È uno strumento di programmazione potente e di facile utilizzo che ogni componente del team di sviluppo può impiegare per creare rapidamente applicazioni Internet dinamiche e potenti siti Web. Per la prima volta, designer, sviluppatori e programmatori possono lavorare in un unico ambiente per creare e gestire facilmente qualsiasi sito Web professionale, indipendentemente dal fatto che sia realizzato in HTML, XHTML, XML, mediante i servizi Web, ColdFusion, ASP.NET, ASP, JSP o PHP. In Dreamweaver MX sono inclusi i noti strumenti di layout visivo di Dreamweaver, le rapide funzioni di applicazione Web di Dreamweaver UltraDev e l'elevato supporto di modifica del codice di HomeSite, che lo rendono una soluzione completa per i siti Web di oggi e per le applicazioni Internet dinamiche del futuro. Sia che si prediliga l'inserimento manuale del codice HTML oppure si preferisca lavorare in un ambiente di modifica visiva, Dreamweaver MX permette di mettersi subito all'opera, mediante una serie di utili strumenti che migliorano la progettazione di siti Web. 21

22 Dreamweaver MX comprende numerosi strumenti e funzioni di codifica: HTML, CSS e riferimenti JavaScript nel pannello Codifica, un debugger JavaScript e gli editor di codice (la vista Codice e la finestra di ispezione Codice) che consentono di modificare JavaScript, XML e altri documenti di testo direttamente in Dreamweaver MX.La tecnologia Roundtrip HTML di Macromedia consente di importare i documenti HTML senza riformattare il codice. Inoltre, grazie a Dreamweaver MX, è possibile ottimizzare e riformattare il codice HTML in base alle proprie necessità. Le funzioni di modifica visiva di Dreamweaver MX consentono di aggiungere rapidamente strutture e funzionalità alle pagine senza scrivere una riga di codice. È possibile visualizzare tutti gli elementi o le risorse del sito e trascinarli da un pannello di facile uso direttamente nel documento. È possibile aprire HomeSite+ da Dreamweaver MX per usare le relative funzioni di codifica. Dreamweaver MX è completamente personalizzabile: consente di creare oggetti e comandi personalizzati, modificare le scelte rapide da tastiera e usare il codice JavaScript per estendere le capacità del programma con nuove funzionalità, finestre di ispezione Proprietà e rapporti sui siti. Funzioni di integrazione di Dreamweaver MX Dreamweaver MX è strettamente integrato con altri strumenti Macromedia Studio MX per semplificare il flusso di lavoro di progettazione dei siti Web. Roundtrip HTML consente di modificare un file in Macromedia Flash MX, Fireworks MX o Dreamweaver MX e di estendere tali modifiche alle altre applicazioni in modo ottimale. Quando si esportano i file da Macromedia Flash MX o Fireworks MX in un sito definito in Dreamweaver MX, le Design Notes contenenti riferimenti al file di programmazione Macromedia Flash (FLA) o PNG vengono esportate automaticamente nel sito con il file per il Web (GIF, JPEG o SWF). Per avviare il processo di produzione della grafica, usare un segnaposto immagine in un documento Dreamweaver, quindi avviare Fireworks MX per realizzare l'immagine. Se si salva l'immagine come file grafico PNG e per il Web, quando si torna in Dreamweaver MX l'immagine di sostituzione viene aggiornata nel documento. L'applicazione associata e il documento di origine vengono avviati automaticamente, per consentire la modifica di un file SWF di Macromedia Flash MX o un'immagine Fireworks MX da un documento Dreamweaver. Mediante il comando Crea album fotografico Web è possibile generare un sito Web che mostra un album di immagini avviando Fireworks MX per creare una miniatura e una riproduzione di dimensioni maggiori per ogni immagine della cartella selezionata. Dreamweaver MX crea quindi una pagina Web contenente tutte le miniature, nonché i collegamenti alle immagini di dimensioni maggiori. Se si cambia il formato di un'immagine, mediante la funzione di controllo dei collegamenti viene chiesto di aggiornare i riferimenti all'immagine. Ad esempio, se si modifica il formato dell'immagine my_image da GIF a JPEG, facendo clic su OK alla visualizzazione della richiesta, tutti i riferimenti a my_image.gif nel sito vengono convertiti in riferimenti a my_image.jpg. Mediante la funzione Pulsante di Macromedia Flash, è possibile convertire i caratteri in testo Flash con antialiasing. 22 Capitolo 1

23 Per visualizzare un oggetto Macromedia Flash MX in una finestra del documento Dreamweaver MX in fase di programmazione, usare il pulsante Riproduci/Ferma della finestra di ispezione Proprietà di Flash. La barra di inserimento di Dreamweaver MX consente di aggiungere pulsanti di navigazione Macromedia Flash direttamente in Dreamweaver MX. In Dreamweaver MX i collegamenti vengono aggiornati automaticamente quando si sposta o si rinomina un file. È inoltre possibile modificare manualmente qualsiasi collegamento, inclusi URL, , FTP, collegamenti nulli e a script. Per ulteriori informazioni su tutte le funzioni di integrazione, consultare la Guida in linea di Dreamweaver e vedere il Capitolo 6, Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX, a pagina 147. Macromedia Flash MX Macromedia Flash MX dispone di tutti gli strumenti necessari per la creazione e il trasferimento di applicazioni Internet potenti e con contenuti dinamici. Quando si progettano immagini dinamiche o si creano applicazioni dipendenti da dati, in Macromedia Flash MX sono disponibili gli strumenti necessari per produrre notevoli risultati e ottimizzare l'esperienza d'uso dell'utente su più piattaforme e dispositivi. Le nuove funzionalità, come il video incorporato, i miglioramenti del flusso di lavoro per la gestione del colore e l'interazione con la linea temporale, aumentano le capacità creative dello strumento. Elementi e modelli preimpostati dell'interfaccia utente consentono agli sviluppatori, esperti e neofiti, di creare rapidamente, mediante semplice trascinamento, elementi interattivi complessi. Designer e sviluppatori possono creare rapidamente interfacce utente con l'alto livello di controllo e di funzionalità consentito da Flash Player. Grazie ad innovazioni quali un ambiente di modifica ActionScript migliorato, un debugger potente e una gestione ottimizzata dei dati tramite XML, i designer e gli sviluppatori possono sfruttare le proprie competenze per generare applicazioni Internet complete usando Flash come strumento di presentazione. In qualità di principale client complesso, Macromedia Flash MX consente la maggiore diffusione dei contenuti e costituisce il metodo più efficace per creare applicazioni Internet potenti ed estremamente efficaci. Funzioni di integrazione di Macromedia Flash MX Macromedia Flash MX interagisce in modo ottimale con altri prodotti Macromedia Studio MX, dalla semplice generazione di immagini alle più complesse operazioni di sviluppo. Quando si apre un file Macromedia Flash MX in Dreamweaver MX, è possibile specificare qualsiasi insieme di parametri mediante la finestra di ispezione Proprietà o il pulsante Parametri. È possibile trasmettere in modo dinamico coppie di nomi/valori ad un file SWF tramite l'url di caricamento del file. Le variabili trasmesse segnalano al file SWF la posizione dell'utente all'interno del sito e di conseguenza le parti di menu da evidenziare. È possibile usare questa tecnica per creare elementi di navigazione per un sito HTML. Quando si esporta e si salva un file SWF compresso con un file HTML mediante il comando Pubblica, è possibile avviare Macromedia Flash MX da un documento Dreamweaver per modificare il documento di origine. Introduzione agli strumenti di Macromedia Studio MX 23

24 In Flash MX è possibile importare immagini PNG da Fireworks MX come oggetti modificabili in Flash o come file su un unico livello, che è possibile modificare e aggiornare in Fireworks. Quando si importano i file FreeHand in Flash MX, è possibile mantenere i livelli, i blocchi di testo, i simboli di libreria e le pagine, nonché scegliere la serie di pagine da importare. Per ulteriori informazioni su tutte le funzioni di integrazione, consultare la Guida in linea di Flash e vedere il Capitolo 9, Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX, a pagina 227. Macromedia Fireworks MX Macromedia Fireworks MX costituisce il metodo più semplice per creare, ottimizzare ed esportare grafica interattiva in un unico ambiente Web. Fireworks MX comprende gli strumenti per garantire ottimi risultati ai responsabili della creazione di grafica Web, dallo sviluppatore HTML che mantiene e modifica le immagini, al designer esperto che deve eseguire il controllo professionale del ritocco delle bitmap. Fireworks MX è un ambiente semplificato per la creazione di qualsiasi elemento, da semplici pulsanti grafici a sofisticati effetti rollover e menu a comparsa. Alcuni potenti strumenti creativi, il supporto dei formati di file e degli standard HTML principali e l'integrazione con i più diffusi editor HTML consentono ai designer di usare Fireworks MX facilmente in qualsiasi ambiente di lavoro. La singola area di lavoro basata sul Web permette di modificare efficacemente le bitmap e di controllare il testo con precisione; inoltre comprende le funzioni di automazione, estendibilità e flessibilità necessarie per realizzare creazioni rapide e facili aggiornamenti. Il supporto esteso di diversi formati di file, di standard emergenti come XHTML e la conformità al Paragrafo 508 garantiscono che l'output soddisfi le esigenze attuali e future. Fireworks MX consente di creare, modificare e animare le immagini Web, di aggiungere elementi interattivi avanzati e di ottimizzare le immagini in un ambiente professionale, nonché di creare e modificare immagini bitmap e vettoriali in un'unica applicazione. Inoltre, permette di automatizzare il flusso di lavoro per rispondere alla necessità di effettuare aggiornamenti e modifiche particolarmente complessi. Funzioni di integrazione di Fireworks MX È possibile creare e modificare facilmente immagini grafiche direttamente in Macromedia Fireworks MX o in altri prodotti Macromedia Studio MX. È possibile avviare Fireworks MX per modificare le immagini selezionate da Flash MX, Dreamweaver MX, HomeSite+ e FreeHand. I comportamenti di Fireworks vengono mantenuti dopo l'esportazione, consentendo di esportare elementi interattivi come pulsanti e rollover. La funzione Roundtrip HTML consente di apportare modifiche in Fireworks MX o Dreamweaver MX e di rifletterle in modo ottimale nelle altre applicazioni. È possibile integrare immagini bitmap Fireworks ottimizzate in siti Web vettoriali Flash MX. Fireworks consente di creare menu a comparsa JavaScript, che in seguito è possibile modificare e usare in documenti Dreamweaver. Per ulteriori informazioni su tutte le funzioni di integrazione, in Fireworks scegliere? > Uso di Fireworks > Uso di Fireworks con altre applicazioni. 24 Capitolo 1

25 Macromedia FreeHand Macromedia FreeHand è un'applicazione di disegno vettoriale. Con FreeHand è possibile creare grafica vettoriale scalabile che può essere stampata a qualsiasi risoluzione, conservando dettagli e chiarezza nell'output. In FreeHand è possibile creare illustrazioni grafiche per la stampa e il Web, come loghi e banner pubblicitari, nonché trasformare le immagini in animazioni Macromedia Flash. L'interfaccia utente di FreeHand comprende un'area di lavoro e un pannello Strumenti comuni ad altri prodotti Macromedia Studio MX per garantire una soluzione integrata per la stampa e il Web. Funzioni di integrazione di FreeHand Macromedia FreeHand permette di lavorare in modo estremamente flessibile con altri prodotti della suite Macromedia Studio MX. Macromedia FreeHand consente di effettuare rapidamente lo storyboarding degli elementi e del layout di progetto del sito Web per poi svilupparne la struttura e il contenuto in Macromedia Flash MX e Dreamweaver MX. Per importare gli oggetti FreeHand in Flash MX o Fireworks MX, è sufficiente copiarli ed incollarli oppure trascinarli da un'applicazione all'altra. La funzione Anima livelli consente di creare un documento che può essere esportato in Flash MX sotto forma di animazione. È possibile assegnare le azioni Flash MX a documenti FreeHand per creare filmati interattivi da visualizzare sul Web. È possibile esportare un disegno FreeHand nel formato di file Macromedia Flash (SWF), per usarlo nella creazione di un disegno vettoriale dinamico da visualizzare sul Web. La finestra di Macromedia Flash Player consente di visualizzare in anteprima e provare in FreeHand i filmati Flash MX. Per ulteriori informazioni su tutte le funzioni di integrazione, consultare la Guida in linea di FreeHand e vedere il Capitolo 15, Integrazione di FreeHand con la famiglia di prodotti Macromedia Studio MX, a pagina 381. Macromedia ColdFusion MX Server Macromedia ColdFusion MX Server è un veloce ambiente script lato server, che permette di creare applicazioni Internet complesse. ColdFusion MX include funzioni di script facilmente comprensibili, connettività immediata ai dati aziendali e potenti capacità integrate di ricerca e di creazione di grafici. Consente agli sviluppatori di creare e trasferire facilmente siti Web dinamici, sistemi di pubblicazione del contenuto, applicazioni indipendenti, siti commerciali e altri strumenti. Il flessibile ambiente ColdFusion MX supporta i sistemi operativi Windows, Linux e UNIX, si integra con gli standard Java e.net ed è facilmente utilizzabile per i servizi Web e XML. ColdFusion fornisce inoltre una connettività ad elevate prestazioni per client Macromedia Flash e il supporto nativo di ActionScript server-side. È possibile eseguire ColdFusion MX come server autonomo o installarlo su applicativi server di tipo aziendale come IBM WebSphere, consentendo a qualsiasi team di sviluppo di migliorare notevolmente l'uso delle applicazioni da parte degli utenti. Introduzione agli strumenti di Macromedia Studio MX 25

26 Macromedia ColdFusion MX trasmette la facilità d'uso e la produttività premiate dell'ambiente di script del server ColdFusion ad un'architettura tecnologica Java basata sugli standard ed altamente scalabile, aggiungendo il nuovo innovativo supporto dello sviluppo di applicazioni Internet dinamiche, servizi Web XML e tecnologia.net Microsoft. Funzioni di integrazione di ColdFusion MX Server Gli strumenti di Macromedia Studio MX consentono di sviluppare applicazioni Web dinamiche in numerosi modi. ColdFusion MX supporta tutte le nuove funzioni dell'ambiente di sviluppo Dreamweaver MX, compresi il potente layout visivo e la creazione di prototipi, la modifica del codice migliorata, le funzioni di sviluppo e il debug integrato. Grazie al nuovo ActionScript server-side, gli sviluppatori di Macromedia Flash possono ora usare lo stesso linguaggio di script per la logica client e server. ColdFusion MX dispone di servizi integrati per aggiungere alle applicazioni la ricerca completa del testo, la creazione dinamica di grafici e una connettività ad elevate prestazioni per client Macromedia Flash. ColdFusion MX consente un'estendibilità praticamente illimitata dello sviluppo grazie a librerie di tag personalizzati, componenti riutilizzabili, Java/C++ e migliaia di componenti aggiuntivi di terze parti facilmente inseribili in applicazioni mediante Dreamweaver MX e Flash MX. Per informazioni sulla modalità di sviluppo delle applicazioni ColdFusion tramite la suite di prodotti Macromedia Studio MX, consultare la Guida in linea di Dreamweaver e Flash. Gestore estensioni Macromedia Un'estensione è un componente software che è possibile aggiungere ad un'applicazione Macromedia per potenziarne le capacità. Macromedia dispone di numerosi tipi di estensioni, tra i quali elementi di interfaccia, estensioni di accessibilità, snippet di codice ActionScript, HTML, JavaScript e nuove librerie di simboli. Tutte le applicazioni Macromedia che supportano il Gestore estensioni possono usare i pacchetti di estensione dei caratteri che installano un tipo di carattere sul disco rigido. Il Gestore estensioni Macromedia consente di installare ed eliminare, in modo facile e comodo, le estensioni dalle applicazioni Macromedia e di reperire informazioni sulle estensioni installate. Inoltre, è molto utile navigare sul sito Macromedia Exchange, dove è possibile trovare ulteriori estensioni, ottenere informazioni e scrivere recensioni al riguardo. Il sito Web di Macromedia Exchange all'indirizzo è un archivio di numerosi tipi di estensioni, alcune create da Macromedia, altre da sviluppatori terzi. Se si è interessati ad un'estensione presente sul sito, è possibile scaricarla mediante il browser Web e installarla in un'applicazione tramite il Gestore estensioni Macromedia. Installazione del Gestore estensioni Macromedia Il Gestore estensioni Macromedia viene caricato nel corso dell'installazione completa di Macromedia Studio MX o dell'installazione separata di Dreamweaver MX. Se si seleziona un'opzione di installazione diversa, è possibile installare il programma dalla cartella Extension Manager del CD-ROM di Studio MX oppure scaricare la versione più recente da 26 Capitolo 1

27 Analisi dell'area di lavoro MX Per semplificare l'integrazione reciproca, i prodotti di Macromedia Studio MX supportano molte funzioni ed elementi di interfaccia comuni, come menu, pannelli, scelte rapide da tastiera, procedure di lancio e modifica dei file. È possibile personalizzare facilmente l'area di lavoro per adattarla alle proprie esigenze. Operazioni con funzioni condivise La progettazione di pagine, la creazione di immagini, lo sviluppo di contenuti e la gestione di progetti sono solo alcune delle operazioni agevolate dal migliorato supporto dell'insieme dei prodotti Macromedia Studio MX. Modifica di oggetti e documenti mediante la finestra di ispezione Proprietà La finestra di ispezione Proprietà semplifica la creazione di documenti agevolando l'accesso agli attributi di uso più frequente della selezione corrente. È possibile apportare le modifiche ad attributi di oggetti e documenti nella finestra di ispezione Proprietà senza dover accedere ad alcun menu o pannello. Nella finestra di ispezione Proprietà sono visualizzate informazioni e impostazioni per il documento, il testo, il simbolo, la forma, la bitmap, il video, il gruppo, il fotogramma o lo strumento corrente. Quando sono selezionati due o più tipi diversi di oggetti, la finestra visualizza il numero totale di oggetti selezionati. La seguente figura illustra la finestra di ispezione Proprietà in Dreamweaver MX relativa ad un file di immagine. Questa interfaccia compatta fornisce informazioni sulle proprietà dell'immagine, ne visualizza una miniatura e consente di modificare e migliorare tali proprietà. È addirittura possibile convertire l'immagine in una mappa immagine. Le finestre di ispezione Proprietà di Dreamweaver MX, Flash MX e Fireworks MX hanno funzionalità simili con la differenza che ognuna di queste visualizza le proprietà e i controlli degli strumenti propri della singola applicazione. Per accedere alla guida sensibile al contesto di una finestra di ispezione Proprietà, è sufficiente fare clic sul punto interrogativo nell'angolo superiore destro. Per ulteriori informazioni sulla finestra di ispezione Proprietà, consultare la Guida in linea di ogni prodotto. Introduzione agli strumenti di Macromedia Studio MX 27

28 Visualizzazione della Guida in linea dal pannello Risposte Il pannello Risposte di Macromedia Flash MX, Dreamweaver MX e Fireworks MX permette di accedere rapidamente ad informazioni per usare con efficacia i diversi prodotti, ad esempio esercitazioni, note tecniche, estensioni e altri dati utili. La seguente figura illustra il pannello Risposte di Flash MX. Per visualizzare le informazioni più recenti su un prodotto disponibili sul sito macromedia.com, è sufficiente fare clic sul pulsante Aggiorna. Accesso a Macromedia Sitespring per la gestione dei progetti Se si usa Macromedia Sitespring per gestire i progetti di sviluppo, è possibile accedere alla home page di Sitespring da Dreamweaver MX, Flash MX o Fireworks MX, per vedere rapidamente lo stato dei progetti. Nel pannello Sitespring vengono visualizzate le informazioni sulle operazioni per il progetto selezionato. Per ulteriori informazioni sull'uso di Sitespring, consultare la relativa documentazione. Una versione di prova di Sitespring può essere scaricata dalla pagina software/sitespring/trial/. Dopo aver installato Sitespring, visualizzare il file Leggimi per accedere alle informazioni sulla modalità di lavoro con questo sistema di gestione dei progetti potente e di facile uso. 28 Capitolo 1

29 Uso dei menu e delle scelte rapide da tastiera comuni I menu dei prodotti Macromedia Studio MX sono strutturati in modo che le voci comuni vengano visualizzate in posizioni analoghe nei diversi prodotti. È possibile applicare le scelte rapide da tastiera standard di Macromedia a tutti i prodotti o impostare scelte rapide personalizzate per una maggiore comodità d'uso. Per ulteriori informazioni, consultare la Guida in linea di ogni prodotto. Condivisione del pannello Strumenti Macromedia Flash MX, Fireworks MX e FreeHand hanno un'interfaccia comune e una posizione predefinita per il pannello Strumenti, di conseguenza è possibile usare in modo ottimale strumenti, tavolozze di colori e altre funzioni per creare immagini e spostarle tra i prodotti. Lo strumento Penna comune ha la stessa funzionalità di disegno nei vari prodotti, ma consente di impostare preferenze personalizzate per sfruttare al meglio questo strumento all'interno di ogni applicazione. Per ulteriori informazioni sugli strumenti e sul pannello Strumenti, consultare la Guida in linea di ogni prodotto. Operazioni con i pannelli MX I pannelli dei prodotti di Macromedia Studio MX consentono di visualizzare, organizzare e modificare gli elementi di un documento. È possibile personalizzare l'interfaccia di un prodotto visualizzando i pannelli necessari per un'operazione specifica e nascondendo altri pannelli. La figura seguente illustra gli elementi disponibili in tutti i prodotti Studio MX per spostare e ridimensionare i pannelli, accedere ai menu e posizionare le schede dei pannelli. Pinza Freccia di espansione e titolo Barra del titolo Menu Opzioni Schede Introduzione agli strumenti di Macromedia Studio MX 29

30 La barra del titolo comprende elementi di interfaccia per spostare e ridimensionare un pannello. Per aprire il menu di scelta rapida di un pannello o di un gruppo di pannelli, fare clic con il pulsante destro del mouse sulla barra del titolo (Windows) oppure tenere premuto il tasto Controllo e fare clic sulla barra (Macintosh). La pinza consente di spostare un pannello in un punto diverso dello schermo facendo clic sulla pinza e trascinando il pannello. La freccia di espansione e il titolo del pannello consentono di ridurre o espandere un pannello facendo clic in questa area. In Dreamweaver MX e Fireworks MX, fare doppio clic su un pannello per ingrandirlo e per ridurre gli altri pannelli dell'area di aggancio. Il menu Opzioni comprende varie opzioni per ogni pannello. Per visualizzarlo, è sufficiente fare clic sull'icona nell'angolo superiore destro del pannello. L'opzione Schede consente di riposizionare un pannello. Per spostare un pannello lontano da un gruppo di pannelli, fare clic sulla scheda e trascinare il pannello. Per ridimensionare un pannello e quelli circostanti, fare clic e trascinare il mouse sullo spazio di fianco ad una scheda. Per visualizzare più schede, un pannello deve contenere più di una scheda. In Macromedia Flash MX non vengono usati pannelli a schede. Quando si crea un nuovo gruppo di pannelli in Macromedia Flash MX o in Dreamweaver MX, il gruppo assume automaticamente il nome della scheda. Il nome del pannello viene aggiornato quando si aggiungono o rimuovono delle schede. È possibile rinominare un gruppo di pannelli mediante il menu Opzioni. Se il gruppo contiene solo un pannello, allora non è possibile modificarne il nome. Per ulteriori informazioni sui pannelli, consultare la Guida in linea di ogni prodotto. 30 Capitolo 1

31 Parte II Sviluppo per il Web Parte II I capitoli della seconda parte offrono una panoramica delle tecnologie Web e presentano un flusso di lavoro di sviluppo che utilizza gli strumenti di Macromedia Studio MX. Questa parte è costituita dai seguenti capitoli: Capitolo 2, Tecnologie e applicazioni Web Capitolo 3, Flusso di lavoro di sviluppo di siti Web

32

33 CAPITOLO 2 Tecnologie e applicazioni Web Il capitolo spiega i concetti e la terminologia di base di Internet e delle applicazioni Web e illustra un flusso di lavoro basato su una situazione specifica relativo ad un'applicazione basata su dati. Termina con una panoramica sulle nuove interessanti tendenze dello sviluppo di siti client dinamici e accessibili. Internet e tecnologie relative Internet può essere immaginato come una WAN (wide-area network) che copre più ubicazioni. Ogni ubicazione di questa enorme rete è composta da un gruppo di computer relativamente vicini tra loro e connessi mediante hardware e cavi. Gli utenti comunicano da un'ubicazione all'altra mediante il protocollo denominato IP (Internet Protocol). Tale protocollo, eseguito su ogni computer connesso ad Internet, garantisce che non si verifichino disfunzioni di comunicazione e che i computer in rete possano comunicare e scambiare correttamente dati tra loro. Ogni computer connesso ad Internet ha un indirizzo IP unico. Se esistessero indirizzi IP doppi, le informazioni basate su un dato indirizzo potrebbero essere trasmesse al punto sbagliato. Sarebbe come usare lo stesso numero di via per due edifici. Il mittente di un'informazione non potrà mai sapere se il destinatario specificato ha ricevuto le informazioni. Applicazioni Internet Le applicazioni software che vengono eseguite in Internet sono dette applicazioni Internet. Nella seguente tabella sono elencate alcune delle applicazioni Internet più usate: Applicazione WWW FTP Telnet NFS Descrizione World Wide Web. Il Web è un sistema di informazione con ipertesti. Consente di leggere e di spostarsi tra testi e informazioni visive in modo non lineare, in base al successivo argomento di lettura desiderato. Queste informazioni disponibili liberamente sono collegate tra loro in vari modi su Internet e possono essere consultate in qualsiasi momento. Un sito Web è un'ubicazione sul World Wide Web. Quando si visualizza una pagina, il browser si connette al sito Web in cui si trova tale pagina per ottenere le relative informazioni. Posta elettronica. I programmi di posta elettronica, come Microsoft Outlook, consentono di inviare e ricevere la posta elettronicamente via Internet. Acronimo di File Transfer Protocol (protocollo di trasferimento dei file). Questo protocollo consente di trasferire le informazioni tra gli host mediante un sito FTP. Telnet consente di accedere ad un computer da una postazione remota. Acronimo di Network File System (sistema di file di rete). NFS consente di condividere file tra host. 33

34 Le applicazioni Internet comunicano via Internet tramite IP, che trasmette i dati dell'applicazione ad un indirizzo IP di destinazione in piccoli pacchetti. L'host destinatario elabora le informazioni che riceve. Applicazioni Intranet Una Intranet è una LAN (Local Area Network) o WAN (Wide Area Network) privata, che consente di usare le applicazioni Internet e di interagire con esse in un ambiente protetto. Queste reti private esistono in grandi e piccole aziende e anche in uffici domestici. Le reti private consentono alle aziende e alle organizzazioni di stabilire chi può condividere le proprie informazioni e chi può accedervi. Un'applicazione Intranet viene eseguita in una Intranet privata (rete). Si differenzia da un'applicazione Internet solo per gli utenti che possono accedervi e per l'ubicazione del computer client che vi accede. Un'applicazione Intranet può inoltre essere eseguita in una parte pubblica di Internet. Quando un'applicazione Intranet viene eseguita in Internet è detta applicazione Internet. Questi termini, applicazioni Internet e applicazioni Intranet, vengono usati in tutto il presente manuale. Server Web Un server Web è un programma software che rende disponibili le pagine Web ai client che ne fanno richiesta. Il software del server Web può essere eseguito su qualsiasi computer. Spesso le persone si riferiscono all'host su cui viene eseguito il software del server Web come il server Web e considerano il server come un componente hardware. Tecnicamente però il server Web è solo il programma software e non l'hardware. Modalità di comunicazione di un server Web e degli host di connessione Quando un utente con uno specifico indirizzo IP richiede un file, il server Web lo recupera e lo restituisce all'indirizzo IP richiedente. Il contenuto di un file non è rilevante per il server Web. È il browser Web, non il server Web, che effettua la richiesta, interpreta e visualizza i dati nel file restituito dal server Web. Quando si esegue una richiesta da un server Web, viene stabilita una connessione IP in Internet tra il client che effettua la richiesta e l'host su cui viene eseguito il software del server Web. Non appena una richiesta viene soddisfatta dal server Web, la connessione Internet tra il client e l'host viene interrotta. Tutte le immagini e i collegamenti di una singola pagina ad altre pagine richiedono connessioni separate. Spesso, sono necessarie molte richieste per recuperare tutte le informazioni di una pagina Web. Pagine Web Le informazioni sul World Wide Web sono organizzate in pagine Web. È possibile creare pagine Web mediante varie tecnologie client-side. Una pagina Web può comprendere informazioni diverse: testo, elenchi, moduli per acquisire dati, tabelle per presentare dati, script che eseguono una funzione, contenuto multimediale che anima le pagine e così via. Il browser Web deve elaborare e visualizzare la pagina indipendentemente dal contenuto relativo. 34 Capitolo 2

35 Browser Web Un browser Web è un programma software che risiede su un computer e che viene usato per visualizzare le pagine del World Wide Web e per navigare in Internet. Quando si usa un browser per richiedere una pagina di un sito Web, questo stabilisce una connessione Web ad un server Web. Come detto in precedenza, il browser Web elabora le pagine Web che riceve da un server Web e le visualizza all'utente. A seconda delle funzioni del browser, si può essere in grado di riprodurre file multimediali, visualizzare applet Java e interagire con essi, leggere la posta elettronica o usare altre funzioni avanzate. Alcuni dei browser Web attualmente più diffusi sono Microsoft Internet Explorer, Netscape Navigator e Mozilla. Sfortunatamente, allo stato attuale la maggior parte dei browser analizza le pagine Web in modo diverso. I designer Web devono prestare particolare attenzione al funzionamento di un browser, altrimenti gli utenti potrebbero non vedere le pagine come si aspettavano i designer. I designer Web devono quindi provare le pagine su più browser prima di pubblicarle sul sito Web. HTML Gli autori di pagine Web creano file di testo semplice usando l'hypertext Markup Language. Questo linguaggio, noto con l'acronimo HTML, consiste in una serie di tag di facile apprendimento che è possibile usare per contrassegnare una pagina di testo. I tag possono indicare elementi della pagina, la struttura, la formattazione, i collegamenti ipertestuali ad altri punti e così via. I browser Web leggono i tag HTML e formattano il testo e gli stili visualizzati sullo schermo del computer. In genere, i tag HTML sono composti da un tag iniziale e uno finale che delimitano il testo a cui si riferiscono. Il tag iniziale attiva una funzione (intestazione, grassetto e così via), mentre il tag finale la disattiva. Il nome di tutti i tag finali è preceduto da una barra (/). La maggior parte dei tag HTML ha la seguente struttura: <NomeTag>testo</NomeTag> Il nome del tag è sempre delimitato da parentesi angolari (<>) e non fa distinzione tra lettere maiuscole e minuscole, ovvero è possibile specificare il nome del tag tutto in maiuscolo, minuscolo o con una combinazione di maiuscole e minuscole. Nella maggior parte dei browser Web è possibile visualizzare il codice di origine della pagina HTML. In genere, questa opzione è inclusa in un menu o in un pulsante. JavaScript Gli sviluppatori di siti Web scrivono in JavaScript per creare piccoli programmi eseguiti nel browser. JavaScript è uno dei linguaggi di script client-side attualmente più usati. È supportato da quasi tutti i browser disponibili sul mercato. Gli sviluppatori di siti Web usano JavaScript per effettuare le seguenti operazioni: Convalidare le azioni dell'utente Creare messaggi scorrevoli nella barra di stato del browser Animare testo e immagini Tecnologie e applicazioni Web 35

36 Il codice JavaScript può essere inserito nel file HTML. Il tag <script> segnala al browser che la parte di testo successiva, delimitata dal tag di chiusura </script>, non è codice HTML ma uno script da elaborare. Anche se l'uso di JavaScript può apparire simile all'inserimento di tag HTML, è più difficile apprendere il linguaggio JavaScript che l'html. Per ulteriori informazioni su JavaScript, consultare qualsiasi manuale del linguaggio. ActionScript URL Gli sviluppatori di Macromedia Flash scrivono in ActionScript per controllare l'interazione e la riproduzione in Flash Player. La sintassi e lo stile del linguaggio ActionScript sono molto simili a quelli di JavaScript. ActionScript è il linguaggio di script client dinamico attualmente più diffuso ed è stato parte integrante del processo di programmazione di Flash fin dalla versione 4 di Flash Player. Gli sviluppatori Flash usano ActionScript per alcune funzioni, tra cui le seguenti: Creazione di interfacce utente interattive Controllo di grafica, testo ed elementi multimediali Caricamento ed elaborazione dei dati dal server, inclusi XML ed elementi multimediali (JPG, MP3, video) Per ulteriori informazioni sul linguaggio ActionScript, consultare la Guida in linea di Flash. Ogni informazione sul World Wide Web ha un indirizzo unico. Questo indirizzo è detto URL (Uniform Resource Locator). Un URL è un puntatore ad alcuni bit di dati sul Web. Queste informazioni possono comprendere un documento Web, un file di un sito FTP o addirittura un indirizzo . Inoltre, si ricorre a URL speciali per inviare la posta elettronica e per usare il programma Telnet. Gli URL contengono le seguenti informazioni: Modalità di ottenimento delle informazioni, ovvero protocollo da usare: FTP, HTTP e così via Nome dell'host Internet da contattare, ad esempio, hostlocale/miosito o ftp.miosito.com Cartella o altra posizione in cui trovare le informazioni richieste Applicazioni Web Un'applicazione Web è un sito Web che contiene pagine memorizzate in un server Web e il cui contenuto è indeterminato in tutto o in parte. Il contenuto finale di una pagina Web viene stabilito solo quando l'utente richiede la pagina dal server Web. Poiché il contenuto finale della pagina varia a seconda delle richieste in base alle azioni dell'utente, questo tipo di pagina è detto pagina dinamica. Le applicazioni Web sono create per rispondere ad esigenze e problemi diversi. Questa sezione spiega gli usi comuni delle applicazioni Web e fornisce un semplice esempio. 36 Capitolo 2

37 Usi comuni delle applicazioni Web Le applicazioni Web hanno molteplici impieghi per gli utenti e gli sviluppatori, tra cui i seguenti: Consentire agli utenti di trovare le informazioni in modo semplice e rapido in un sito Web ricco di contenuti. Questo tipo di applicazione Web permette agli utenti di cercare, organizzare e consultare il contenuto in base alle loro preferenze. Alcuni esempi sono le Intranet aziendali, Microsoft MSDN (http://www.msdn.microsoft.com) e Amazon.com (http://www.amazon.com). Raccogliere, salvare e analizzare i dati forniti dagli utenti. In passato, i dati immessi nei moduli HTML venivano inviati sotto forma di messaggi agli impiegati dell'azienda o alle applicazioni CGI per essere elaborati. Un'applicazione Web può salvare i dati dei moduli direttamente in un database, nonché estrarli e creare rapporti basati sul Web per analizzarli. Tra gli esempi di questo tipo vi sono le pagine di online banking, pagine di pagamento dei negozi online, sondaggi e moduli per conoscere l'opinione dei visitatori. Aggiornare i siti Web il cui contenuto varia in continuazione. Un'applicazione Web evita al designer Web di aggiornare continuamente il codice HTML del sito. I provider di contenuti come le agenzie stampa trasmettono il contenuto all'applicazione Web e l'applicazione Web aggiorna il sito automaticamente. Tra gli esempi di questo tipo vi sono l'economist (http://www.economist.com) e CNN (http://www.cnn.com). Esempio di applicazione Web Claudio è un designer e sviluppatore Web professionale responsabile di mantenere i siti Intranet e Internet di aziende di media grandezza di impiegati. Un giorno, Giovanna del dipartimento Risorse umane (RU) gli sottopone un problema. Il dipartimento gestisce un programma di attività fisica per gli impiegati che assegna loro punti per ogni chilometro percorso a piedi, in bicicletta o di corsa. Ogni impiegato deve comunicare a Giovanna, tramite , il chilometraggio mensile totale. Al termine del mese, Giovanna raccoglie tutti i messaggi , calcola il numero di punti per tutti gli impiegati e riconosce loro piccoli premi monetari in base al punteggio totale. Il problema di Giovanna è che il programma di attività fisica ha riscosso un successo nettamente superiore alle aspettative. Il numero di impiegati che vi partecipa è talmente elevato che Giovanna è sommersa da al termine di ogni mese. Giovanna chiede quindi a Claudio se può escogitare una soluzione basata sul Web. Claudio propone un'applicazione Web basata su Internet che effettua le seguenti operazioni: Consente agli impiegati di immettere il chilometraggio in una pagina Web mediante un semplice modulo HTML Memorizza il chilometraggio degli impiegati in un database Calcola i punti di attività fisica in base al chilometraggio Consente agli impiegati di vedere la loro situazione mensile Consente a Giovanna di accedere tramite un solo clic ai punteggi totali al termine di ogni mese Tecnologie e applicazioni Web 37

38 Claudio realizza l'applicazione in pochissimo tempo mediante Macromedia Dreamweaver MX, che dispone degli strumenti necessari per creare questo tipo di applicazione in modo semplice e rapido. Decide di usare un database piccolo ma potente per memorizzare le informazioni su ogni impiegato e ColdFusion MX per elaborare le relative pagine dinamiche. Oltre alle funzioni elencate in precedenza, l'applicazione comprende un insieme di pagine di ricerca e di risultati, per cui Giovanna e gli altri impiegati possono cercare record specifici nel database. Comprende inoltre una pagina di dettaglio per ogni impiegato, che contiene ulteriori informazioni come l'interno telefonico, la posizione e la durata di partecipazione al programma di attività fisica. Nel corso dell'anno successivo, il programma di attività fisica dell'azienda riscuote un tale successo da ricevere il riconoscimento dalla comunità locale. Il presidente della società decide di aggiungere al sito Internet dell'azienda delle pagine interattive sul programma. Chiede a Claudio di sviluppare un'applicazione che consenta agli utenti di effettuare le seguenti operazioni: Visualizzare in modo selettivo le informazioni sulla cronologia del programma di attività fisica in una parte dello schermo Cercare le informazioni sul programma in un'altra parte dello schermo Comunicare con il direttore del programma di attività fisica tramite un messaggio immediato Visualizzare clip video di diversi esercizi fisici del programma Claudio informa il presidente che è possibile eseguire tutte queste operazioni mediante un'applicazione Internet dinamica. Mediante Macromedia Flash MX, Claudio crea una nuova interfaccia che raccoglie tutte le informazioni necessarie in un'unica pagina Web. Inoltre amplia la logica server in Macromedia ColdFusion MX e trasferisce la nuova applicazione raccogliendo tutte le risorse dell'applicazione in Dreamweaver MX e pubblicando i nuovi file sul server dell'azienda. I visitatori del sito Internet dell'azienda possono ora visualizzare molte nuove informazioni sul programma di attività fisica in una schermata. Inoltre, ogni volta che un utente interagisce con una parte specifica della pagina, solo tale sezione dell'interfaccia viene aggiornata nella finestra del browser. Termini usati di frequente in riferimento ad applicazioni Web I seguenti termini sono usati di frequente in riferimento ad applicazioni Web. Un server applicazioni è il software che consente ad un server Web di elaborare pagine Web contenenti script o tag server-side. Quando una pagina di questo tipo viene richiesta al server, il server Web passa la pagina al server per applicazioni che provvederà ad elaborarla prima di inviarla al browser. Per ulteriori informazioni, vedere Modalità di funzionamento delle applicazioni Web a pagina 40. Esempi di server applicazioni comuni sono Macromedia ColdFusion Server, Macromedia JRun Server, Microsoft.NET Framework, IBM WebSphere e Apache Tomcat. 38 Capitolo 2

39 Un database è un insieme di dati memorizzati in tabelle. Ogni riga di una tabella contiene un record di dati, mentre ogni colonna rappresenta un campo del record, nel seguente modo: Campi (colonne) Numero Cognome Nome Ruolo Reti Record (righe) Un driver di database è un software che funge da interprete tra un'applicazione Web e un database. I dati del database sono raccolti in un formato proprietario. Un driver di database consente all'applicazione Web di leggere e modificare dati altrimenti indecifrabili. Un sistema di gestione del database (DBMS o sistema di database) è un software usato per creare e modificare database. Esempi di sistemi di database comuni sono Microsoft Access, Oracle 9i e MySQL. Una query di database è l'operazione che estrae un recordset da un database. Una query è un criterio di ricerca espresso in un linguaggio di database detto SQL (Structured Query Language). Ad esempio, la query può specificare che solo determinate colonne o certi record vengano inclusi nel recordset. Una pagina statica è una pagina Web personalizzata in fase di esecuzione da un server applicazioni prima di essere inviata al browser. Per ulteriori informazioni, vedere Modalità di funzionamento delle applicazioni Web a pagina 40. Un recordset è un sottoinsieme di dati che vengono estratti da una o più tabelle di un database, come nel seguente esempio: Numero Cognome Nome Ruolo Reti Tabella database Cognome Nome Ruolo Tabella recordset Tecnologie e applicazioni Web 39

40 Un database relazionale è un database contenente due o più tabelle che condividono dati. Il seguente database è relazionale perché le due tabelle condividono la colonna ID reparto. Una tecnologia server è la tecnologia che un server applicazioni usa per modificare le pagine dinamiche in fase di esecuzione. Una pagina statica è una pagina Web che non viene modificata in fase di esecuzione da un server applicazioni prima di essere inviata al browser. Per ulteriori informazioni, vedere Elaborazione di pagine Web statiche a pagina 41. Un'applicazione Web è un sito Web che contiene pagine memorizzate in un server Web e il cui contenuto è indeterminato in tutto o in parte. Il contenuto finale di queste pagine viene stabilito solo quando l'utente le richiede dal server Web. Un server Web è un software che rende disponibili le pagine Web in risposta alle richieste dei browser Web. Una richiesta di pagina viene generata quando l'utente fa clic su un collegamento di una pagina Web aperta nel browser, sceglie un segnalibro nel browser o immette un URL nella casella dell'indirizzo del browser e fa clic su Vai. Esempi di server Web diffusi sono Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server e iplanet Web Server. Modalità di funzionamento delle applicazioni Web Un applicazione Web è una raccolta di pagine statiche e dinamiche. Una pagina Web statica non cambia quando un utente la richiede: il server Web invia la pagina al browser Web che ne ha fatto richiesta senza modificarla. Al contrario, una pagina Web dinamica viene modificata dal server prima di essere inviata al browser che ne ha fatto richiesta. Proprio per la sua natura mutevole, la pagina è detta dinamica. Ad esempio, è possibile progettare una pagina per visualizzare i risultati dell'attività fisica e fare in modo che alcune informazioni (come il nome dell'impiegato e i risultati) vengano stabilite quando un impiegato richiede la pagina. Le seguenti sezioni illustrano le modalità di elaborazione delle pagine Web, nonché di sviluppo del contenuto Web dinamico mediante Macromedia Dreamweaver MX, Macromedia Flash MX e ColdFusion MX. 40 Capitolo 2

41 Elaborazione di pagine Web statiche Un sito Web comprende un insieme di pagine e file HTML correlati, domiciliati su un computer comprendente un server Web. Un server Web è un software che visualizza pagine Web in risposta alle richieste dei browser. Una richiesta di pagina viene generata quando l'utente fa clic su un collegamento di una pagina Web aperta nel browser, sceglie un segnalibro nel browser o immette un URL nella casella dell'indirizzo del browser e fa clic su Vai. Il contenuto finale di una pagina Web statica dipende dal designer e non cambia quando la pagina viene richiesta. Ad esempio: <html> <head> <title>chiamare il dipartimento</title> </head> <body> <strong>chiamare il dipartimento</strong><br> Parlare con qualcuno delle vendite. </body> </html> Ogni riga del codice HTML della pagina viene scritto dal designer prima di essere messa sul server. Questo tipo di pagina è detta statica poiché il relativo HTML non cambia dopo che la pagina è stata messa sul server. Nota: una pagina statica può non essere affatto statica. Ad esempio, può essere animata da un'immagine rollover o da un filmato Macromedia Flash. Tuttavia, in questo manuale si definiscono statiche tutte quelle pagine che vengono inviate al browser senza essere modificate. Quando il server Web riceve la richiesta di una pagina statica, la legge, trova la pagina e la invia al browser che ne ha fatto richiesta, come mostrato nella seguente figura: Passaggio 1: il browser Web richiede la pagina statica. Richiesta Browser Web Risposta Passaggio 3: il server Web invia la pagina al browser che ne ha fatto richiesta. SERVER WEB Passaggio 2: il server Web trova la pagina. <HTML> <p>hi </HTML> Pagina statica Tecnologie e applicazioni Web 41

42 Nel caso delle applicazioni Web, che contengono pagine Web dinamiche e statiche, alcune righe di codice risultano indeterminate quando l'utente richiede la pagina. Queste righe devono essere determinate da qualche funzione prima che la pagina venga inviata al browser. La funzione viene spiegata nella sezione successiva. Elaborazione di pagine Web dinamiche Quando un server Web riceve la richiesta di una pagina Web statica, invia la pagina al browser che ne ha fatto richiesta, senza eseguire ulteriori operazioni. Il server Web reagisce diversamente quando riceve la richiesta di una pagina dinamica: trasmette la pagina ad un'estensione software specifica, responsabile del relativo completamento. Questo software specifico è detto server applicazioni. Un esempio di server applicazioni è Macromedia ColdFusion MX, che si può installare dal CD-ROM di Macromedia Studio MX per eseguirlo con un server Web. Per ulteriori informazioni sull'installazione di ColdFusion MX, vedere Capitolo 16, Installazione della Developer Edition di Macromedia ColdFusion MX Server, a pagina 391. Il server applicazioni legge il codice della pagina, completa la pagina in base alle istruzioni del codice, quindi ne elimina il codice. Il risultato è una pagina statica che il server applicazioni ritrasmette al server Web, che a sua volta la invia al browser che ne ha fatto richiesta. Alla ricezione della pagina, il browser legge solo HTML puro. Ecco una panoramica del processo: Passaggio 1: il browser Web richiede la pagina dinamica. Richiesta Browser Web Risposta Passaggio 5: il server Web invia la pagina finita al browser che ne ha fatto richiesta. SERVER WEB Passaggio 2: il server Web trova la pagina e la trasmette al server applicazioni. <HTML> <code> </HTML> <HTML> <p>hi </HTML> Passaggio 4: il server applicazioni ritrasmette la pagina finita al server Web. Passaggio 3: il server applicazioni cerca le istruzioni nella pagina e la completa. Server applicazioni 42 Capitolo 2

43 Accesso ad un database Un server applicazioni consente di usare risorse server-side, come i database. Ad esempio, una pagina dinamica può comunicare al server applicazioni di estrarre i dati da un database e inserirli nel codice HTML della pagina. L'istruzione di estrazione dei dati da un database è detta query di database. Una query è un criterio di ricerca espresso in un linguaggio di database detto SQL (Structured Query Language). La query SQL è scritta negli script o nei tag server-side della pagina. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Guida introduttiva ai database. Un server applicazioni non può comunicare direttamente con un database, poiché il formato proprietario del database rende i dati indecifrabili, così come lo è un documento Word aperto in Blocco note. Il server applicazioni può comunicare solo tramite un driver di database, ovvero un software che funge da interprete tra il server applicazioni e il database. Dopo che il driver ha stabilito la comunicazione, l'origine dati viene sottoposta a query e viene creato un recordset contenente i risultati della query. Un recordset è un sottoinsieme di dati che vengono estratti da una o più tabelle di un database. Il recordset viene ritrasmesso al server applicazioni e i dati vengono usati nella pagina dinamica. Qui di seguito è riportata una query di database semplice, scritta in SQL: SELECT cognome, nome, punteggio FROM impiegati Questa istruzione crea un recordset a tre colonne e lo compila con righe contenenti il cognome, il nome e i punti di attività fisica di tutti gli impiegati inclusi nel database. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Cenni al linguaggio SQL. Tecnologie e applicazioni Web 43

44 La seguente figura illustra il processo di esecuzione delle query in un database e la restituzione dei dati al browser: Browser Web Passaggio 1: il browser Web richiede la pagina dinamica. Richiesta Risposta Passaggio 2: il server Web trova la pagina e la trasmette al server applicazioni. <HTML> <code> </HTML> SERVER WEB <HTML> <p>hi </HTML> Passaggio 9: il server Web invia la pagina finita al browser che ne ha fatto richiesta. Passaggio 3: il server applicazioni cerca le istruzioni nella pagina. Server applicazioni Passaggio 8: il server applicazioni inserisce i dati nella pagina, che poi trasmette al server Web. Passaggio 4: il server applicazioni invia la query al driver di database. Query Recordset Passaggio 7: il driver trasmette il recordset al server applicazioni. Driver del database Passaggio 5: il driver esegue la query sul database. Passaggio 6: viene restituito il recordset al driver. Database Mediante l'applicazione Web è possibile usare quasi tutti i database, a condizione di disporre dei driver corretti. Se si prevede di creare delle applicazioni di piccole dimensioni ed economiche, è possibile usare un database basato su file (ad esempio, un database creato in Microsoft Access). Se si prevede di creare applicazioni stabili e di importanza fondamentale per l'azienda, è possibile usare un database basato su server (ad esempio, un database di Microsoft SQL Server, Oracle 9i o MySQL). Se il database si trova in un sistema diverso dal server Web, verificare di disporre di una connessione rapida tra i due sistemi affinché l'applicazione Web possa funzionare in modo rapido ed efficiente. 44 Capitolo 2

45 Programmazione di pagine dinamiche La programmazione di una pagina dinamica consiste nello scrivere dapprima il codice HTML, quindi nell'aggiungervi script o tag server-side per rendere dinamica la pagina. Quando si visualizza il codice risultante, il linguaggio appare incorporato nell'html della pagina. Di conseguenza, si parla di linguaggio di programmazione incorporato in HTML. Nel seguente esempio si usa il CFML (ColdFusion Markup Language): <html> <body> <b>chiamare il dipartimento</b><br> <!--- qui iniziano le istruzioni incorporate ---> <cfset dipartimento="vendite"> <cfoutput> Parlare con qualcuno del #dipartimento#. </cfoutput> <!--- qui finiscono le istruzioni incorporate ---> </body> </html> Le istruzioni incorporate nella pagina effettuano le seguenti operazioni: Creano la variabile Dipartimento e le assegnano la stringa Vendite. Scrivono il valore della stringa della variabile, Vendite, nel codice HTML. Il server applicazioni restituisce la seguente pagina al server Web: <html> <body> <b>chiamare il dipartimento</b><br> Parlare con qualcuno delle vendite. </body> </html> Il server Web invia la pagina al browser Web che ne ha fatto richiesta e che la visualizza nel seguente modo: Chiamare il dipartimento Parlare con qualcuno delle vendite. Sviluppo di applicazioni Internet dinamiche Con Macromedia Flash MX, gli sviluppatori dispongono di un nuovo modello di sviluppo strutturato e di un insieme di tecnologie server-side per la creazione di applicazioni Internet dinamiche più veloci, potenti ed estremamente flessibili. Disponendo di strumenti per l'integrazione di server applicazioni e nuove funzionalità di comunicazione, Flash MX consente agli sviluppatori di realizzare applicazioni completamente nuove che superano il tradizionale modello di applicazione Internet descritto nelle sezioni precedenti. Gli sviluppatori Flash MX possono usare queste nuove soluzioni per creare applicazioni della nuova generazione come un calendario che sincronizza automaticamente i dati quando gli utenti sono connessi, una lavagna condivisa che consente ad un gruppo di utenti di scambiare le proprie idee da qualsiasi parte del mondo e un'applicazione di apprendimento elettronico che permette ai docenti di istruire più partecipanti contemporaneamente. Tecnologie e applicazioni Web 45

46 Il metodo più rapido ed efficace di comunicazione tra Flash MX e server applicazioni e servizi Web è tramite Flash AMF (Action Message Format), un protocollo ottimizzato ad elevate prestazioni, che viene eseguito in HTTP e consente ad ActionScript di richiamare e usare i dati e la logica domiciliati su un server applicazioni o un servizio Web XML su Internet. AMF supporta la trasmissione dei tipi di dati semplici e complessi tra Flash ActionScript e qualsiasi linguaggio di programmazione server-side. AMF viene attivato da Flash Remoting, un nuovo componente server incluso in ColdFusion MX e disponibile per altri server J2EE e.net. La stretta integrazione tra Flash MX e ColdFusion MX consente ad ActionScript di richiamare i metodi e le funzioni ColdFusion. Nell'illustrazione precedente, un utente interagisce con un filmato Flash incorporato in una pagina HTML. Il file SWF usa AMF per comunicare con il server ColdFusion, dove i servizi ColdFusion definiti in precedenza ottengono i dati dal database e restituiscono i risultati a Flash Player. Flash MX dispone di un nuovo modello di componente per includere il comportamento e i dati associati alle interfacce visive. Questo modello di componente è implementato come ColdFusion Components (CFC), un nuovo componente lato server di ColdFusion MX per incorporare script e dati. È possibile combinare i componenti Flash con ColdFusion per realizzare interazioni clientserver dinamiche. Per ulteriori informazioni, visitare il centro risorse di Macromedia Flash ColdFusion all'indirizzo 46 Capitolo 2

47 CAPITOLO 3 Flusso di lavoro di sviluppo di siti Web Questo capitolo spiega come i singoli componenti di Macromedia Studio MX (Dreamweaver, Flash, Fireworks, FreeHand e ColdFusion) interagiscono per rendere disponibile a designer e sviluppatori di siti Web un ambiente di sviluppo delle applicazioni e di progettazione ottimale. Poiché Internet continua ad evolversi rapidamente, gli utenti si aspettano applicazioni, comunicazioni e un contenuto più dinamico. Contemporaneamente, i designer e gli sviluppatori richiedono sempre più strumenti che consentano loro di creare applicazioni e contenuto in modo più semplice ed economico, permettendo agli utenti di usare Internet in modo più stimolante. Gli strumenti di Macromedia Studio MX costituiscono insieme un ambiente completo che consente la progettazione e lo sviluppo di interfacce client-side di applicazioni e contenuto complessi, nonché di logica server-side per applicazioni trasferite con client HTML e Flash, ColdFusion e numerose altre tecnologie server. In genere, un flusso di lavoro di sviluppo di siti Web si articola nelle seguenti fasi: Pianificazione del sito, che comprende la definizione della strategia e degli obiettivi del sito, di un pubblico di destinatari e dei requisiti di origine dati del sito. Impostazione dell'ambiente di sviluppo, che comprende la selezione dei server Web e di applicazioni e la definizione delle origini dati. Pianificazione della progettazione della pagina e dello schermo, che comprende la mappatura delle pagine e delle interfacce dell'applicazione con uno strumento di disegno mediante FreeHand e la definizione del layout delle pagine in HTML mediante Dreamweaver MX. Creazione delle risorse del contenuto, tra cui immagini e contenuto multimediale dinamico con Flash MX, Fireworks MX e FreeHand. Creazione delle risorse dell'applicazione, tra le quali la creazione di pagine dinamiche e di applicazioni Internet dinamiche con Dreamweaver MX e FreeHand MX. Assemblaggio, prova e trasferimento del sito, che comprende la compilazione delle risorse, il soddisfacimento dei requisiti di accessibilità, la verifica del codice e la pubblicazione del sito in un server con Dreamweaver MX. Macromedia Studio MX comprende tutti gli strumenti necessari per eseguire questa procedura dall'inizio alla fine. La combinazione di Dreamweaver, Flash, Fireworks, FreeHand e ColdFusion consente di creare, trasferire e gestire facilmente applicazioni e siti Web dinamici impegnativi negli ambienti di codifica e di progettazione. Il risultato finale saranno interfacce utente più dinamiche che aumentano l'efficienza delle transazioni e una logica delle applicazioni più potente che si integra con numerosi sistemi back-end. 47

48 Questo capitolo spiega il flusso di lavoro di sviluppo di siti Web di esempio. Vengono suggeriti metodi per sfruttare al meglio gli sforzi di progettazione e di sviluppo, senza però voler rappresentare l'unico flusso di lavoro possibile. Il flusso di lavoro adottato dal team di sviluppo dipenderà dalle risorse, dalle personali abitudini lavorative e dalle specifiche esigenze del sito Web. Scopo di questo capitolo è fornire le idee e le soluzioni migliori per progettare e sviluppare siti Web e applicazioni mediante Macromedia Studio MX. Per ulteriori informazioni sui singoli prodotti Macromedia Studio MX, consultare i capitoli da 4 a 17 del presente manuale oppure la Guida in linea di ogni prodotto (? > Uso di Dreamweaver,? > Uso di Flash e così via). Pianificazione del sito Web La pianificazione e l'organizzazione del sito non si limita a stabilire l'aspetto del sito e la posizione dei file: per pianificare il sito, è necessario esaminarne gli obiettivi, i requisiti di pagine statiche e dinamiche e i profili dei potenziali visitatori. Inoltre, è opportuno considerare anche aspetti tecnici quali le modalità di accesso degli utenti e le limitazioni legate a browser, plug-in o ad operazioni di scaricamento. Un'attenta pianificazione prima di iniziare lo sviluppo del sito consentirà di risparmiare molto tempo in futuro. Determinazione degli obiettivi del sito e del tipo di visitatori Stabilire gli obiettivi del sito è la prima operazione da eseguire quando si crea un sito Web. Porre a se stessi e al cliente domande sul sito, scrivere gli obiettivi in modo da ricordarli nel corso del processo di progettazione. Uno specifico elenco di obiettivi aiuterà a concentrarsi sul sito Web e a realizzarlo secondo le esigenze particolari. Dalla complessità degli obiettivi dipendono la navigazione, gli elementi multimediali usati e persino l'aspetto del sito. Un sito Web di informazioni e notizie avrà un aspetto e una modalità di navigazione molto diversi da un sito tramite il quale si vendono prodotti. Analogamente, un sito con applicazioni e contenuto dinamici avrà un aspetto molto diverso da un sito in cui vengono visualizzati dati dinamici mediante metodi più tradizionali basati sull'html. Dopo aver stabilito l'obiettivo del sito Web, è necessario stabilire quale sarà la tipologia di utenza. Benché possa sembrare una questione inutile (è piuttosto frequente che si desideri che tutti visitino il proprio sito), è tuttavia difficile creare un sito che sia utilizzabile e visitabile da chiunque. I visitatori usano browser diversi, si collegano a velocità diverse, possono disporre o meno di plug-in multimediali e usare diversi tipi di dispositivi per visualizzare il contenuto Internet. Poiché tutti questi fattori possono influire sull'utilizzo del sito, stabilirne il pubblico di riferimento è un passo fondamentale durante la fase iniziale della pianificazione del sito Web. È opportuno riflettere sul tipo di persone che potenzialmente verranno attratte dal sito Web; i tipi di computer che verranno usati; la piattaforma prevalente (Macintosh, Windows, Linux e così via); la velocità di connessione media (un modem a 33,6 kbps o una linea DSL); i tipi di browser, risoluzione dello schermo e altri dispositivi usati; l'eventuale creazione di un sito Intranet in cui tutti i visitatori useranno lo stesso sistema operativo e lo stesso browser. Tutti questi fattori possono influire notevolmente sul modo in cui la pagina Web verrà visualizzata dai visitatori e sulla modalità di prova del sito dopo la creazione. 48 Capitolo 3

49 Determinazione dei requisiti di origini dati e creazione di un database Indipendentemente dal fatto che si sviluppi un'applicazione Internet complessa con Macromedia Flash MX o una più tradizionale applicazione Web basata sull'html con Macromedia Dreamweaver MX, probabilmente si userà un database per memorizzare le informazioni che il sito Web renderà disponibili ai visitatori. Prima di creare il database, è però necessario stabilire i requisiti di origini dati per il sito Web: il tipo di dati dinamici che si desidera visualizzare sulle pagine Web e il relativo motivo; i tipi di domande che gli utenti che interagiscono con l'interfaccia porranno all'applicazione e le informazioni che vorranno recuperare dal database. Per quanto concerne gli obiettivi del sito e il pubblico di riferimento, è necessario avere un'idea precisa dei requisiti di origini dati prima di iniziare a sviluppare il sito Web. Dopo aver stabilito i requisiti di origini dati, pensare a come strutturare un database che trasmetta in modo ottimale agli utenti le informazioni memorizzate. È possibile decidere la struttura del database prima di iniziare a concepire il layout delle pagine o mentre si sviluppa l'interfaccia di applicazione. Dalle specifiche esigenze del flusso di lavoro dipenderanno la modalità e i tempi precisi di creazione del database. La prima operazione consiste nello scegliere le tabelle del database. Una tabella di database comprende un insieme di entità correlate, come persone, oggetti o eventi, strutturate in righe e colonne. Nella terminologia dei database, ciascuna colonna rappresenta un campo e ciascuna riga un record. Campi (colonne) Numero Cognome Nome Ruolo Reti Record (righe) Dopo aver deciso il numero e i tipi di tabelle che formeranno il database, scegliere le colonne per ogni tabella. Le colonne indicano le proprietà di ogni entità o record della tabella. Ad esempio, la tabella di database Giocatori può contenere informazioni sui componenti di una squadra di calcio. La tabella Giocatori può comprendere una colonna per ogni informazione dei componenti della squadra: nome, cognome, posizione, numero di reti e così via (vedere l'immagine sopra). Ogni riga della tabella Giocatori rappresenta il record di ogni singolo componente della squadra, così come una figurina contiene informazioni su una particolare persona. Verificare che ogni tabella abbia una colonna che funga da chiave principale, ovvero che contenga valori unici per ogni riga della tabella. In tal modo è possibile selezionare una riga precisa quando si esegue una ricerca nel database. Nella maggior parte dei casi, la colonna chiave primaria contiene numeri di identificazione, ma è possibile usare altri tipi di chiavi primarie, come i codici fiscali o i codici articolo. Per ulteriori informazioni, consultare la documentazione fornita dal produttore del database. Flusso di lavoro di sviluppo di siti Web 49

50 Schematizzazione della navigazione del sito in FreeHand e presentazione del piano in HTML Dopo aver stabilito gli obiettivi del sito, il pubblico di riferimento e i requisiti di origini dati, è possibile iniziare a concepire lo schema di navigazione del sito. La navigazione del sito è una mappa che indica le relazioni tra le pagine Web. In particolare, mostra il modo in cui gli utenti si sposteranno nel sito facendo clic sui collegamenti e interagiranno con le interfacce dell'applicazione. Per concepire lo schema di navigazione del sito, è possibile usare Macromedia FreeHand. FreeHand consente di creare immagini vettoriali in modo rapido ed efficiente e dispone di elementi di interfaccia utente comuni che permettono di integrare facilmente Macromedia Flash MX e Fireworks MX nel flusso di lavoro di sviluppo di siti Web. Ad esempio, il pannello Strumenti è una delle numerose funzioni di interfaccia utente condivisa da questi prodotti Macromedia Studio MX. Contiene gli strumenti che permettono di selezionare, disegnare e modificare gli oggetti, applicarvi i colori e creare testi. Dopo aver schematizzato la navigazione del sito, è possibile presentare il piano preliminare al cliente o ai componenti del proprio team di sviluppo. FreeHand consente di convertire i disegni in pagine HTML in un unico semplice passaggio. La funzione Pubblica HTML converte il documento in HTML e apre l'immagine direttamente nella finestra di un browser. 50 Capitolo 3

51 Per ulteriori informazioni, in FreeHand scegliere? > Uso di FreeHand, Concetti fondamentali di FreeHand e Creazione di grafica e animazione per il Web. Impostazione dell'ambiente di sviluppo Indipendentemente dal fatto che si sviluppi il progetto da soli o in collaborazione con altre persone, è necessario impostare un ambiente di sviluppo prima di iniziare ad usare Macromedia Studio MX per creare il sito Web. A livello elementare, l'ambiente di sviluppo consisterà di un server Web, un server applicazioni e un sito Dreamweaver MX. Impostazione dei server applicazioni e Web Un server Web è un software che rende disponibili i file in risposta alle richieste da parte di un browser Web. Quando il server Web riceve la richiesta di una pagina HTML statica, la legge, trova la pagina e la invia al browser che ne ha fatto richiesta. Tra i server Web più comuni vi sono Microsoft IIS (Internet Information Server), Netscape Enterprise Server, iplanet Web Server e Apache HTTP Server. Per ulteriori informazioni, vedere Tecnologie e applicazioni Web a pagina 33. Scegliere un server Web e installarlo sul computer locale o su un computer in rete. Per ulteriori informazioni, consultare la documentazione del produttore del server o rivolgersi all'amministratore del sistema. Per eseguire applicazioni Internet dinamiche o basate su HTML, il server Web deve interagire con un server applicazioni. Un server applicazioni è un software che consente al server Web di elaborare le pagine dinamiche prima che vengano inviate ai browser che ne hanno fatto richiesta dal server Web. Il server applicazioni legge il codice della pagina dinamica, riproduce la pagina in base alle istruzioni del codice, quindi elimina il codice. Nel caso di un'applicazione basata su HTML, il risultato è una pagina statica di HTML che il server applicazioni ritrasmette al server Web, che a sua volta la invia al browser che ne ha fatto richiesta. Nel caso di un'applicazione Internet dinamica, il risultato è un filmato Flash che restituisce le variabili richieste dal browser. La scelta del server applicazioni dipenderà da numerosi fattori, tra cui i vincoli di bilancio, la tecnologia server che si desidera usare e la scelta del server Web. I server Macromedia ColdFusion MX e JRun sono soluzioni economiche e facilmente gestibili. Grazie alla migliorata integrazione con Flash MX e Dreamweaver MX, ColdFusion MX è la scelta ideale per creare e trasferire potenti applicazioni Internet. I server applicazioni usano tecnologie diverse. Dreamweaver MX supporta cinque tecnologie server: ColdFusion, ASP.NET, ASP, JSP e PHP. La seguente figura illustra i server applicazioni comuni disponibili per queste cinque tecnologie server. Tecnologia del server ColdFusion ASP.NET ASP JSP PHP Server applicazioni Macromedia ColdFusion MX Microsoft IIS 5 con.net Framework Microsoft IIS o PWS Sun Chili!Soft ASP Macromedia JRun IBM WebSphere Jakarta Tomcat BEA WebLogic Server PHP Flusso di lavoro di sviluppo di siti Web 51

52 Verificare che il server applicazioni che si desidera usare funzioni con il server Web. Ad esempio,.net Framework funziona solo con Microsoft IIS. Quando i server applicazioni e Web sono attivi, creare una cartella principale per l'applicazione del computer che esegue il server Web. Verificare che la cartella venga pubblicata dal server Web, ovvero che il server Web possa rendere disponibile qualsiasi file della cartella e di tutte le relative sottocartelle in risposta ad una richiesta HTTP da un browser Web. Ad esempio, su un computer con PWS o IIS, tutti i file della cartella Inetpub/wwwroot e delle relative sottocartelle possono essere resi disponibili ad un browser Web. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Impostazione di server applicazioni. Definizione del sito in Dreamweaver MX In Dreamweaver MX, il termine sito può essere riferito ad un sito Web o ad un'area di archiviazione locale dei documenti appartenenti ad un sito Web, che deve essere impostata prima di iniziare a creare il sito Web. Un sito Dreamweaver MX organizza tutti i documenti associati al sito Web e consente di registrare e gestire collegamenti e file, condividere file e inviare tramite FTP i file del sito ad un server Web. Dreamweaver MX funziona correttamente solo se si definisce un sito. La procedura preferibile per la creazione di un sito Web mediante Dreamweaver MX consiste nel creare e modificare le pagine sul disco locale e nel caricare le copie dei file del sito su un server Web remoto per renderle pubblicamente disponibili. La finestra Definizione del sito (Sito > Nuovo sito) di Dreamweaver MX consente di definire le informazioni locali e remote sul sito, mentre il pannello Sito permette di gestire il sito. Il pannello Sito consente di scegliere una di quattro viste: Locale, Remoto, Server di prova e Mappa. La vista Locale visualizza i file del sito Web memorizzati sul sistema locale. La vista Remoto visualizza i file pubblicati sul server Web. Se si sviluppa un'applicazione Web, la cartella remota è la cartella principale creata per l'applicazione Web sul server Web. 52 Capitolo 3

53 La vista Server di prova visualizza la struttura delle directory del server di prova. In genere, si tratta della cartella principale creata per l'applicazione Web sul server Web. La vista Mappa visualizza una mappa grafica del sito, basata sul modo in cui i documenti sono collegati l uno all altro. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Definizione di un sito Dreamweaver. Determinazione delle origini dati ColdFusion Un'origine dati ColdFusion è un identificatore composto da una parola, ad esempio Acme, che punta al database e contiene tutte le informazioni necessarie a connettervisi. Le origini dati ColdFusion sono simili ai nomi delle origini dati Windows (DSN) poiché comprendono automaticamente tutti i DSN impostati sul computer Windows su cui si esegue ColdFusion. Diversamente dai DSN però, le origini dati per i database vengono create mediante provider OLE DB (Object Linking and Embedding DataBase) o driver nativi. I DSN possono puntare a database solo se si usano i driver ODBC (Open DataBase Connectivity) installati su un computer Windows. È possibile creare un'origine dati mediante ColdFusion Administrator. Se su un computer Windows si usa un driver ODBC, è inoltre possibile impostare un DSN. I DSN di sistema vengono automaticamente considerati come origini dati ColdFusion. Quando si apre una pagina ColdFusion in Dreamweaver, le origini dati ColdFusion vengono visualizzate nel pannello Database (Finestra > Database). È possibile modificare tali origini dati direttamente nell'area di lavoro di Dreamweaver MX. Facendo clic sul pulsante Modifica origini dati nell'angolo superiore destro del pannello Database, viene avviato automaticamente ColdFusion Administrator. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Connessioni di database per sviluppatori di ColdFusion. Per ulteriori informazioni sulla connettività di database ASP.NET, ASP, JSP e PHP, in Dreamweaver scegliere? > Uso di Dreamweaver, quindi Connessioni di database per sviluppatori di ASP.NET, Connessioni di database per sviluppatori di ASP, Connessioni di database per sviluppatori di JSP e Connessioni di database per sviluppatori di PHP. Flusso di lavoro di sviluppo di siti Web 53

54 Definizione di un sistema di controllo dell'origine in Dreamweaver MX Se si lavora in gruppo, è possibile usare il sistema di deposito/ritiro dei file da server locali e remoti. Ritirare un file equivale a segnalare agli altri utenti che non è disponibile. Quando si ritira un file, Dreamweaver MX visualizza nel pannello Sito il nome della persona che ha eseguito l'operazione mediante un segno di spunta rosso (se nessun componente del proprio team ha ritirato il file) o verde (se l'operazione è stata eseguita dal proprio team) di fianco all'icona del file. Quando viene depositato, un file torna ad essere disponibile per gli altri utenti, che possono quindi ritirarlo e modificarlo. Quando si deposita un file dopo averlo modificato, di fianco alla versione locale appare l'icona di un lucchetto, ad indicare che il file è di sola lettura. In tal modo si evita di apportare modifiche ad un file che non si è estratto. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Impostazione del sistema di deposito/ritiro. Pianificazione della progettazione della pagina e dello schermo Un progetto Web inizia con la conversione di storyboard e diagrammi di flusso in pagine di esempio da parte di designer e sviluppatori. È possibile usare Macromedia Studio MX per creare pagine di esempio di modelli strutturali mentre si elabora il progetto finale. In genere i modelli strutturali descrivono il layout, i componenti tecnici, i temi e i colori, le immagini e altri elementi multimediali delle pagine. Il modello strutturale deve avere lo stesso aspetto di uno schema da seguire quando si progetta il sito. Quando si dispone di una linea guida visiva dell'aspetto desiderato delle pagine, è possibile iniziare a pianificare i layout delle pagine in Dreamweaver. 54 Capitolo 3

55 Creazione di modelli strutturali di pagina mediante FreeHand per stabilire l'aspetto del sito La pianificazione del layout e della struttura della pagina prima di iniziare effettivamente a creare le pagine Web consentirà di risparmiare molto tempo nel processo di sviluppo. È importante mantenere la coerenza del layout e della struttura delle pagine affinché queste siano simili nell'aspetto, nella combinazione di colori, nella modalità di navigazione e così via. In tal modo si evita di confondere gli utenti rendendo il sito maggiormente fruibile. Macromedia FreeHand è ideale per schematizzare un progetto preliminare per le pagine principali del sito Web. Gli eccezionali strumenti di progettazione di FreeHand consentono di sfruttare al meglio le capacità creative e di progettare sofisticate figure vettoriali. Lo strumento Penna di FreeHand ha lo stesso aspetto e funziona esattamente come lo strumento Penna di Macromedia Flash MX e Fireworks MX, consentendo il passaggio ottimale da un'applicazione all'altra. Anche i modelli e le interfacce di selezione del colore di FreeHand hanno lo stesso aspetto e funzionano esattamente come in Flash, Fireworks e Dreamweaver. Flusso di lavoro di sviluppo di siti Web 55

56 Creazione di modelli strutturali di schermate Flash È inoltre possibile usare Macromedia FreeHand per creare modelli strutturali di interfacce di applicazioni Internet complesse e animazioni Flash. FreeHand è la scelta ideale per creare modelli strutturali di schermate Flash grazie alla stretta integrazione con Macromedia Flash MX. FreeHand comprende tutti i tradizionali strumenti di Bézier normalmente presenti in un pacchetto di disegno professionale e potenzia l'integrazione creativa con Flash, grazie alle complesse funzionalità di modifica delle immagini vettoriali. La funzione Prova filmato consente di vedere l'aspetto che avrà l'immagine FreeHand una volta importata in Flash. Dopo aver creato i modelli strutturali di schermate, importare l'immagine FreeHand direttamente in Flash. Le immagini FreeHand diventano i blocchi costitutivi dei filmati Flash; in tal modo si evita di ricreare risorse di filmato in Flash. È possibile mantenere i livelli, i blocchi di testo, i simboli di libreria e le pagine FreeHand e scegliere la serie di pagine da importare. Per ulteriori informazioni, in FreeHand scegliere? > Uso di FreeHand > Esportazione di filmati Flash; oppure in Flash scegliere? > Uso di Flash > Importazione di file FreeHand. 56 Capitolo 3

57 Creazione di layout di pagina in Dreamweaver MX Il layout di pagina è uno degli elementi più importanti della progettazione Web. Il termine layout di pagina si riferisce all'aspetto finale della pagina visualizzata nel browser, ad esempio alla posizione dei menu, delle immagini e dei filmati Flash. Macromedia Dreamweaver consente di creare e controllare il layout delle pagine Web in molti modi. Un metodo comunemente usato per la creazione di un layout di pagina consiste nel ricorrere a tabelle HTML per posizionare gli elementi. Le tabelle possono essere però di difficile impiego, poiché la loro funzione originale non è contribuire al layout delle pagine Web, bensì di visualizzare i dati. Per ottimizzare l'impiego delle tabelle per il layout di pagina, Dreamweaver dispone della vista Layout, che consente di usare le tabelle come struttura sottostante per progettare la pagina, evitando i tradizionali inconvenienti legati al loro impiego. Ad esempio, è possibile disegnare facilmente delle celle nella pagina e successivamente spostarle nella posizione desiderata. Il layout può avere una larghezza fissa o può ingrandirsi automaticamente fino a coprire l'intera finestra del browser. Quando si torna alla vista Standard, la pagina comprende le celle e le colonne di tabella che corrispondono alle celle di layout inserite nella pagina. Aprire un nuovo file Dreamweaver (File > Nuovo) per iniziare a pianificare la pagina Web. Nella vista Layout (Visualizza > Vista tabella > Vista Layout), creare il layout della pagina prima di aggiungere il contenuto. Disegnare le celle del layout che conterranno la grafica dell'intestazione, le barre di navigazione, i filmati Flash e altre risorse. Flusso di lavoro di sviluppo di siti Web 57

58 Quando si disegna una cella di layout esterna alla tabella di layout, viene automaticamente creata una tabella di layout, che funge da contenitore della cella. Non possono esistere celle di layout esterne ad una tabella di layout. È possibile creare il layout di pagina mediante diverse celle di layout all'interno di una tabella di layout (modalità più comune per il layout delle pagine Web) oppure usare più tabelle di layout per ottenere layout più sofisticati. L'uso di più tabelle di layout isola le sezioni del layout, affinché non vengano influenzate da modifiche apportate ad altre sezioni. È inoltre possibile nidificare le tabelle di layout inserendo una nuova tabella di layout in una tabella esistente. Questa ossatura consente di semplificare la struttura della tabella quando le righe o le colonne di una parte del layout non sono allineate alle righe o alle colonne di un'altra parte. Ad esempio, mediante le tabelle di layout nidificate, è possibile creare facilmente un layout a due colonne con quattro righe nella colonna sinistra e tre in quella destra. In seguito è possibile aggiungere testo, immagini e altro contenuto alle celle di layout proprio come nella vista Standard. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Creazione del layout delle pagine nella vista Layout. Creazione delle risorse del contenuto Una volta definito il futuro aspetto della struttura e del layout, è possibile creare e raccogliere le risorse necessarie. Le risorse possono essere costituite da elementi quali immagini, testo, filmati Flash o altri elementi multimediali. Il pannello Risorse di Dreamweaver MX (Finestra > Risorse) visualizza tutte le risorse del sito consentendone l'accesso. Creazione di immagini in FreeHand e Fireworks MX Per creare immagini per il sito Web è possibile usare sia Macromedia FreeHand che Fireworks MX. Macromedia FreeHand è un'applicazione di disegno vettoriale. FreeHand consente di creare illustrazioni grafiche per la stampa e il Web, come loghi e banner pubblicitari. FreeHand è utile anche per trasformare opere di disegno e illustrazione in animazioni Flash. L'area di lavoro e il pannello Strumenti di FreeHand sono coerenti con quelli di altri prodotti Macromedia Studio MX. L'uso di FreeHand per effettuare lo storyboarding di un sito Web, la creazione di un'animazione Flash o di un'applicazione Internet dinamica è spiegato in un'altra parte del manuale. Per ulteriori informazioni, vedere Pianificazione della progettazione della pagina e dello schermo a pagina 54. Macromedia Fireworks MX è lo strumento ideale per la progettazione e la produzione professionale di immagini per il Web. Si tratta del primo ambiente di produzione per risolvere le particolari sfide poste ai designer e agli sviluppatori di grafica per il Web. Mediante l'opzione Effetti dal vivo di Fireworks, è possibile migliorare la grafica applicando effetti conici, il rilievo, le ombre, le luci e altri effetti ad oggetti vettoriali, bitmap e testo. Gli Effetti dal vivo sono reversibili, ovvero possono essere modificati in qualsiasi momento. Fireworks genera inoltre JavaScript, semplificando la creazione di rollover, pulsanti e menu a comparsa; le sue funzioni di ottimizzazione riducono le dimensioni del file delle immagini per il Web senza compromettere la qualità. 58 Capitolo 3

59 Fireworks consente di creare, modificare, animare la grafica Web, di aggiungere interattività avanzata e di ottimizzare le immagini. È possibile modificare facilmente le impostazioni di ottimizzazione nella finestra di dialogo Anteprima esportazione (File > Anteprima esportazione). Fireworks MX dispone di strumenti di modifica sia bitmap che vettoriale. In Fireworks, tutti gli elementi possono essere modificati in qualsiasi momento. Inoltre, è possibile automatizzare le operazioni del flusso di lavoro per rispondere alle necessità di aggiornamenti e modifiche. Come FreeHand, Fireworks si integra con altri prodotti Macromedia Studio MX in modi avanzati che consentono di ottimizzare il flusso di lavoro. Una volta create le immagini ed incluse nel sito, è possibile avviare, modificare e usare Fireworks senza dover chiudere le aree di lavoro di Dreamweaver o Flash. Creazione di elementi multimediali dinamici con Flash MX I filmati Flash sono immagini, testo, animazione e applicazioni per siti Web; sono principalmente composti da grafici vettoriali, ma possono anche contenere video, audio e grafici bitmap importati. I filmati Flash possono comprendere l'interattività per consentire l'input da parte dei visitatori ed è possibile creare filmati non lineari che interagiscono con altre applicazioni Web. I filmati Flash usano immagini vettoriali compatte, che è possibile scaricare rapidamente e scalare in base alle dimensioni dello schermo del visitatore. Probabilmente si è avuto modo di vedere filmati Flash e di interagire con essi in numerosi siti Web. Milioni di utenti Web hanno ricevuto Flash Player in dotazione con il computer, il browser o il software di sistema; altri lo hanno scaricato dal sito Web di Macromedia. Flash Player risiede sui computer locali, dove consente di riprodurre filmati in un browser o come applicazione autonoma. La visualizzazione di un filmato Flash in Flash Player è simile alla visualizzazione di un DVD mediante un lettore DVD: Flash Player è il dispositivo usato per visualizzare i filmati creati nell'applicazione di programmazione Flash. Flusso di lavoro di sviluppo di siti Web 59

60 I documenti Flash, con estensione.fla, contengono tutte le informazioni richieste per sviluppare, progettare e provare il contenuto interattivo, ma non sono i filmati visualizzati in Flash Player. Tuttavia, si pubblicano i documenti FLA come filmati Flash, il cui nome file ha l'estensione.swf, che contengono solo informazioni necessarie per la visualizzazione del filmato. Flash consente di animare gli oggetti spostandoli da una parte all'altra dello stage e modificandone la forma, le dimensioni, il colore, l'opacità, la rotazione e altre proprietà. È possibile creare animazioni di un fotogramma alla volta, per le quali si specifica un'immagine distinta per ogni fotogramma, o animazioni interpolate, per le quali si imposta il primo e l'ultimo fotogramma dell'animazione e si comanda a Flash di creare i fotogrammi intermedi. Inoltre, Flash comprende vari metodi per creare immagini originali o importarle da altre applicazioni. È possibile creare oggetti con gli strumenti di disegno e colorazione, così come modificare gli attributi di oggetti esistenti. È inoltre possibile importare video, immagini vettoriali e bitmap da altre applicazioni (come FreeHand e Fireworks) e modificare le immagini importate in Flash. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Operazioni in Flash. 60 Capitolo 3

61 Creazione di modelli e librerie per il reimpiego delle risorse I modelli e le librerie di Dreamweaver consentono di creare pagine Web strutturalmente coerenti. Il loro uso facilita la gestione del sito Web, poiché permettono di riprogettare il sito e modificare centinaia di pagine in pochi secondi. Un modello è un documento che può essere usato per creare più pagine con lo stesso layout. Quando si crea un modello, è possibile indicare quali elementi di una pagina devono rimanere costanti (non modificabili o bloccati) nei documenti basati su tale modello e quali elementi possono essere modificati. Se si pubblica una rivista in linea, ad esempio, è probabile che la testata e il layout generale rimangano invariati da un numero all altro e anche da un articolo all altro, mentre il titolo e il contenuto di ogni articolo saranno differenti. Un designer può creare il layout di una pagina di articolo inserendo un testo segnaposto nelle posizioni occupate dal titolo e dal contenuto dell articolo, contrassegnare queste aree come modificabili e salvare questo layout come modello. Per realizzare un nuovo numero della rivista sarà sufficiente creare una nuova pagina basata sul modello e sostituire il testo segnaposto con il titolo e il testo effettivo del nuovo articolo. È possibile modificare un modello anche dopo averlo usato per creare dei documenti. Quando si modifica un modello, le aree bloccate (non modificabili) dei documenti basati su di esso vengono aggiornate in modo da riflettere le modifiche del modello. I modelli sono utili quando si desidera applicare un layout uniforme ad un gruppo di pagine. Mediante i modelli, infatti, è possibile definire il layout finale delle pagine prima di aggiungere il relativo contenuto. Se le pagine devono semplicemente avere le stesse intestazioni e gli stessi piè di pagina, ma possono avere layout differenti, si consiglia di usare le voci di libreria. Le voci di libreria sono elementi di pagina, come immagini, testo, filmati Flash e altri elementi multimediali, che possono essere riutilizzati o aggiornati più volte in tutto il sito Web. Come nel caso dei modelli, è possibile aggiornare tutte le pagine per le quali si usa una voce di libreria quando si modifica il contenuto della voce. Ad esempio, si supponga di dover creare un sito di grandi dimensioni per un'azienda. L azienda ha deciso di inserire uno slogan su tutte le pagine del sito, ma l ufficio marketing non ha ancora definito i dettagli dello slogan. In questo caso è possibile creare una voce di libreria che contenga lo slogan e inserirla su tutte le pagine. Quando l ufficio marketing fornisce la versione definitiva dello slogan, è sufficiente modificare la voce di libreria e aggiornare automaticamente tutte le pagine che la usano. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Gestione di risorse del sito, librerie e modelli. La libreria Flash MX consente di riutilizzare facilmente le risorse. La libreria di un documento Flash memorizza i simboli creati in Flash, oltre ai file importati come clip video, brani audio, bitmap e immagini vettoriali. Il pannello Libreria visualizza un elenco a scorrimento contenente i nomi di tutti gli elementi della libreria, consentendo di visualizzare e organizzare tali elementi mentre si lavora. È possibile aprire la libreria di qualsiasi documento Flash mentre si usa Flash per creare le voci di libreria da tale file disponibile per il documento corrente. È possibile creare le librerie permanenti personalizzate che saranno disponibili quando si avvia Flash oppure usare una qualsiasi delle numerose librerie di esempio fornite con Flash. Le librerie di esempio contengono pulsanti, immagini, clip filmato e suoni che è possibile aggiungere ai propri documenti Flash. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso della libreria. Flusso di lavoro di sviluppo di siti Web 61

62 Creazione di risorse dell'applicazione Un aspetto estremamente interessante dello sviluppo delle applicazioni Web dinamiche è la possibilità di visualizzare in un formato Web le informazioni memorizzate nel database. I prodotti Macromedia Studio MX consentono di creare tali applicazioni in modo semplice e rapido e comprendono numerose funzioni che permettono di aumentare la produttività degli sviluppatori, dai componenti e modelli preimpostati ad un flusso di lavoro integrato e un'interfaccia utente condivisa. Con Macromedia Studio MX, i designer e gli sviluppatori possono creare interattive applicazioni Internet dinamiche o basate su HTML, che integrano la funzionalità di tradizionali soluzioni client/server alla portata estesa e al trasferimento economico delle applicazioni Web. Creazione di pagine dinamiche in Dreamweaver MX Un importante vantaggio di Macromedia Dreamweaver MX è la possibilità di creare siti Web dinamici senza dover essere esperti di linguaggi di programmazione. Gli strumenti visivi di Dreamweaver consentono di sviluppare siti Web dinamici senza dover inserire manualmente la complessa logica di programmazione necessaria per creare un sito che supporti la visualizzazione del contenuto dinamico memorizzato in un database. Dreamweaver consente di creare siti Web dinamici scegliendo tra numerosi e diffusi linguaggi di programmazione Web e tecnologie server, tra cui ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP) e PHP. Ai codificatori, Dreamweaver MX offre un codice runtime migliorato e un'area di lavoro specificamente progettata per l'immissione del codice derivata da Macromedia ColdFusion Studio e Macromedia HomeSite+. È possibile lavorare nelle viste Codice, Struttura o Codice e struttura, che consente di vedere il codice e le interfacce mentre si sviluppano le applicazioni e le pagine dinamiche. Ora il codice ColdFusion generato automaticamente da Dreamweaver per le pagine dinamiche è di maggiore comprensione ed è più simile a quello che si scriverebbe a mano. Il codice sarà familiare a chiunque abbia appreso le tecniche ColdFusion da manuali a grande diffusione o esercitazioni in linea. Per i siti Web dinamici è necessaria un'origine del contenuto da cui estrarre i dati prima di visualizzarli in una pagina Web. In Dreamweaver, tali origini dati possono essere database, variabili di richiesta o di server, variabili di moduli o procedure memorizzate. Prima di poter usare queste origini di contenuto in una pagina Web, è necessario effettuare le seguenti operazioni: Creare una connessione all'origine del contenuto dinamico (come un database) e al server applicazioni che elabora la pagina. Specificare le informazioni del database che si desidera visualizzare o le variabili da includere nella pagina. Usare l'interfaccia a puntamento e clic di Dreamweaver per selezionare e inserire nella pagina selezionata elementi a contenuto dinamico. Dreamweaver consente di connettersi facilmente ad un database e di creare un recordset da cui estrarre il contenuto dinamico. Un recordset è il risultato di una query di database. Estrae le informazioni richieste dall'utente per visualizzarle in una pagina specifica. Si definisce il recordset in base alle informazioni contenute nel database e il contenuto che si desidera visualizzare. 62 Capitolo 3

63 Per creare un recordset in Dreamweaver, si usa la finestra di dialogo Recordset. Per avviare la finestra di dialogo Recordset, usare il pannello Applicazione della barra di inserimento o fare clic sul pulsante Più (+) del pannello Associazioni e scegliere Recordset (query). La finestra di dialogo Recordset semplice consente di selezionare una connessione di database esistente e di creare una query di database selezionando la tabella o le tabelle di cui si desidera includere i dati nel recordset. È addirittura possibile usare la sezione Filtro della finestra di dialogo per creare semplici criteri di ricerca e restituzione per la query. È possibile provare la query dalla finestra di dialogo Recordset ed effettuare tutte le regolazioni necessarie prima di aggiungerla al pannello Associazioni. Una volta stabilita la connessione di database e definito un recordset, questo appare nel pannello Associazioni. Flusso di lavoro di sviluppo di siti Web 63

64 Da qui è possibile importare le origini dati in qualsiasi pagina Web nel sito definito. Per inserire qualsiasi valore mostrato nel pannello Associazioni in una pagina Web, selezionare la voce e fare clic sul pulsante Inserisci nella parte inferiore del pannello. In alternativa, è possibile selezionare una voce e trascinarla sulla pagina, come nel caso di qualsiasi immagine o elemento multimediale del pannello Risorse. Nell'illustrazione precedente è possibile vedere i segnaposto dinamici dei titoli e delle relative descrizioni che sono stati trascinati nella pagina dal pannello Associazioni. Davanti al file Dreamweaver, è possibile vedere l'output generato quando un utente visualizza la pagina in una finestra del browser. Il file Dreamweaver comprende il comportamento del server Area ripetuta, che consente di visualizzare più record in una singola pagina; in questo caso visualizza i primi tre record del database. Inoltre contiene un segnaposto per un'immagine dinamica, che l'utente vede come punto elenco a forma triangolare, ripetuto per ogni voce di notizia. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Creazione di pagine dinamiche. Oltre a visualizzare dati dinamici, grazie a Dreamweaver MX è possibile creare set di pagine che consentono agli utenti di cercare, inserire, eliminare e aggiornare i record del database. Ad esempio, è possibile sviluppare rapidamente una potente applicazione che consentirà di inviare un elenco di impiegati all'intranet aziendale, eseguire ricerche nella cartella mediante parametri personalizzati (nome, dipartimento e così via), aggiungere ed eliminare record da un elenco e modificarli nel database. È possibile eseguire tutte queste operazioni senza dover digitare una riga di codice. Gli utenti più esperti possono usare l'avanzato ambiente di immissione del codice di Dreamweaver MX. 64 Capitolo 3

65 Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Sviluppo rapido delle applicazioni. Creazione di risorse di applicazioni Internet dinamiche con Flash MX Macromedia Flash MX comprende numerose capacità di progettazione multimediale e sviluppo di applicazioni Internet dinamiche in un unico prodotto. Gli sviluppatori possono creare applicazioni Internet dinamiche sfruttando le capacità multimediali di Flash e i relativi sofisticati strumenti, tra cui un potente editor ActionScript, un eccezionale debugger e componenti predefiniti Flash. Flash MX costituisce una struttura aperta per lo sviluppo delle applicazioni con server.net e J2EE; grazie alla migliorata integrazione con ColdFusion MX, gli sviluppatori dispongono dello strumento più rapido per creare applicazioni Internet dinamiche. Il supporto esteso comprende gli esempi di codice e il materiale di riferimento, connettività ad elevate prestazioni, il supporto di un linguaggio comune tra Dreamweaver, Flash e ColdFusion, un'integrazione ottimale con componenti Flash e un set di strumenti integrato per unire la logica back-end alle interfacce utente Flash. Prima di creare le applicazioni Internet dinamiche Flash/ColdFusion si creano servizi Flash in ColdFusion. I servizi Flash consentono di interfacciare, con tutte le sue funzionalità, Coldfusion MX a Flash MX. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di ColdFusion > Creazione di servizi Flash. In seguito, si creano le interfacce dell'applicazione Flash usando immagini FreeHand realizzate in precedenza oppure elementi della pagina realizzati in Flash. Flash MX dispone di strumenti di progettazione migliorati, come lo strumento Trasformazione libero. È possibile allineare facilmente bitmap, linee e riempire con precisione lo stage ai limiti dei pixel. I miglioramenti del Mixer colori in Flash MX semplificano più che mai la miscelazione di colori e la creazione di campioni di colore. Per sviluppare le applicazioni Internet complesse, è possibile usare i componenti dell'interfaccia utente Flash, tra cui le barre di scorrimento, i campi rich text, i pulsanti di input e di scelta, le caselle di controllo, di riepilogo e combinate. Questi componenti garantiscono un'uniformità d'uso delle applicazioni Internet dinamiche create con Flash MX. È inoltre possibile creare componenti personalizzati e riutilizzabili per rispondere alle necessità di diversi progetti. La funzione Anteprima dal vivo fornisce un riscontro immediato delle interfacce utente create con i componenti, grazie ad un rendering in linea e dal vivo dell'aspetto che i componenti avranno nel filmato pubblicato. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso dei componenti. Flusso di lavoro di sviluppo di siti Web 65

66 I vantaggi dello sviluppo di applicazioni Internet dinamiche in Flash sono numerosi. Grazie alle applicazioni Internet dinamiche è possibile comunicare con milioni di utenti riducendo il carico del server e il tempo di scaricamento del contenuto; includere animazione, audio, video e messaggistica a due vie in un'unica interfaccia; fornire contenuto completamente accessibile ad utenti disabili; fornire contenuto dinamico immediato, indipendentemente dalla velocità di connessione; sviluppare il sito per diversi standard di dispositivi (come telefoni senza fili, TV via Internet e console di gioco), consentendo a chiunque di visualizzare applicazioni e contenuto complesso. Le informazioni scambiate tra Flash Player e il server applicazioni non richiedono l'aggiornamento della pagina completa e di conseguenza riducono i costi dell'ampiezza di banda, aumentano l'efficienza degli utenti migliorando l'uso complessivo. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Sviluppo delle applicazioni in Flash e il Centro risorse di Flash e ColdFusion all'indirizzo coldfusion/resources/flash_coldfusion/. Assemblaggio, prova e trasferimento L'ultima fase del processo di sviluppo del sito Web è l'assemblaggio delle risorse create, la prova delle pagine Web e il trasferimento del sito su un server affinché sia visibile a tutti. Macromedia Studio MX comprende varie funzioni per ottimizzare questo processo. Assemblaggio delle risorse in Dreamweaver MX Mediante Dreamweaver MX, è possibile aggiungere facilmente alle pagine Web molti tipi di contenuto. È possibile aggiungere risorse ed elementi, ad esempio testo, immagini, colori, filmati, suoni e altre forme di comunicazione. Il pannello Risorse (Finestra > Risorse) consente di organizzare facilmente le risorse di un sito e di trascinarle direttamente in un documento Dreamweaver. 66 Capitolo 3

67 Oltre a trascinare le risorse salvate nella pagina dal pannello Risorse, è possibile effettuare le seguenti operazioni: Digitare i testi direttamente in un documento di Dreamweaver oppure importarli da altri documenti, quindi formattare il testo mediante la finestra di ispezione Proprietà di Dreamweaver o il pannello Stili HTML. È possibile inserire immagini, tra cui le immagini rollover, le mappe immagine e le porzioni di immagine di Fireworks. Gli strumenti di allineamento semplificano il posizionamento delle immagini nella pagina. È possibile inserire altri tipi di elementi multimediali in una pagina Web, ad esempio i filmati, i suoni o le applet Flash, Shockwave e QuickTime. Aggiungere contenuto negli editor di codice di Dreamweaver. Usare la vista Codice o la finestra di ispezione Codice di Dreamweaver per scrivere il codice HTML o JavaScript. Creare collegamenti HTML standard (tra cui i collegamenti con ancoraggi o i collegamenti e- mail) e impostare facilmente dei sistemi di navigazione grafica, ad esempio i menu di collegamento e le barre di navigazione. Applicare contenuto riutilizzabile in tutto il sito mediante i modelli e le voci di libreria Dreamweaver. È possibile creare nuove pagine da un modello e successivamente aggiungere o modificare il contenuto delle aree modificabili. Una volta assemblate le risorse, è possibile modificarle direttamente nell'area di lavoro di Dreamweaver. È possibile avviare Fireworks per modificare le immagini inserite in un documento di Dreamweaver selezionando l'immagine e facendo clic sul pulsante Modifica di Fireworks nella finestra di ispezione Proprietà. Quando si avvia e modifica un'immagine o una sua porzione che sia parte di una tabella di Fireworks, viene avviato Fireworks e il file PNG da cui è stata esportata l'immagine. Flusso di lavoro di sviluppo di siti Web 67

68 La finestra del file PNG indica che è in corso la modifica dell'immagine da Dreamweaver. Dopo aver terminato le modifiche e chiuso il file PNG, le modifiche salvate vengono visualizzate nell'immagine nel documento Dreamweaver (GIF, JPG e così via) selezionato per la modifica. Analogamente, per modificare i file Flash, selezionare il segnaposto del filmato Flash nel documento Dreamweaver e fare clic sul pulsante Modifica di Flash nella finestra di ispezione Proprietà. Viene aperto il file Flash file (FLA) e tutte le modifiche ivi apportate vengono salvate nel file SWF. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver quindi Operazioni con Dreamweaver e Fireworks e Operazioni con Dreamweaver e Flash. Uso di Dreamweaver MX e Flash MX per garantire l'accessibilità Macromedia supporta gli sforzi per rendere i siti e i prodotti Web accessibili a persone con disturbi visivi, uditivi, motori e di altro tipo. Flash MX e Dreamweaver MX comprendono strumenti per semplificare la creazione di contenuto accessibile. Tra gli esempi di funzioni di accessibilità per siti Web vi sono il supporto di programmi di lettura delle finestre, etichette e descrizioni delle immagini, scelte rapide da tastiera, colori di visualizzazione ad alto contrasto e così via. Inoltre, Dreamweaver comprende funzioni che rendono il prodotto software accessibile ai disabili. Nello specifico, Dreamweaver supporta i programmi di lettura delle finestre, le funzioni di accessibilità del sistema operativo e la navigazione tramite tastiera. Per rendere le informazioni accessibili ai programmi di lettura delle finestre e agli utenti del sito Web, Dreamweaver supporta le didascalie degli elementi grafici, compresi i pulsanti, i controlli, le immagini e le tabelle. In tal modo è possibile aggiungere etichette e descrizioni agli elementi affinché un programma di lettura delle finestre possa leggerli all'utente. Ad esempio, è possibile aggiungere al documento la descrizione Giubbotto rosso da uomo, taglia large all'immagine di un prodotto. Quando l'immagine viene visualizzata in una pagina per un utente con difetti di vista, il programma di lettura delle finestre legge la descrizione e l'utente sa quale prodotto è visualizzato sullo schermo. Il contenuto accessibile dei filmati Flash è supportato da Flash Player 6. Per sfruttare il contenuto accessibile di Flash, gli utenti devono disporre di una versione di Windows che supporti l'accessibilità di Flash, nonché dell'adeguato programma di lettura delle finestre (compreso Flash Player 6). Flash fornisce diverse funzionalità per la creazione di codice accessibile che vanno oltre la semplice assegnazione di nomi agli oggetti. È possibile fornire una descrizione del testo, dei campi di testo, dei pulsanti o dei clip filmato e delle scelte rapide da tastiera per i campi di testo di input o per i pulsanti, nonché disattivare il comportamento di etichettatura automatica del filmato, che impedisce la lettura delle stringhe di testo da parte dei programmi di lettura delle finestre. Inoltre, è possibile nascondere uno specifico oggetto ai programmi di lettura delle finestre, ad esempio clip filmato animati se si ritiene che la descrizione verbale non migliori la versione accessibile del filmato. È possibile scegliere di nascondere gli oggetti accessibili contenuti in un clip filmato o in un filmato e sottoporre ai programmi di lettura delle finestre solo il clip filmato o il filmato stesso. 68 Capitolo 3

69 Tenere presente che la tecnologia dei programmi di lettura delle finestre è stata progettata principalmente per trasmettere le informazioni alle interfacce utente statiche. Rendere il filmato Flash accessibile sarà estremamente utile se si riduce il contenuto dinamico al minimo e si mettono in risalto le funzioni di testo e interfaccia utente. Per aumentare l'accessibilità, è possibile selezionare gli oggetti di un filmato da sottoporre ad un programma di lettura delle finestre e omettere le animazioni e i clip filmato con effettivi visivi. La progettazione di siti Web accessibili richiede la comprensione dei requisiti di accessibilità e numerose decisioni soggettive che non possono essere effettuate da uno strumento di sviluppo. Ad esempio, un requisito di accessibilità è la non comunicazione del significato tramite il colore. L'unico modo per garantire che un sito Web sia accessibile è tramite la pianificazione, lo sviluppo, la prova e la valutazione specifica. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Dreamweaver e accessibilità; in Flash scegliere? > Uso di Flash > Creazione di contenuto accessibile. Per ulteriori informazioni sulla creazione di contenuto Web che soddisfi i requisiti di accessibilità governativi, è inoltre possibile visitare il Centro risorse sull'accessibilità di Macromedia all'indirizzo Prova e convalida di HTML e JavaScript in Dreamweaver MX È possibile usare la convalida di Dreamweaver per stabilire se il codice contiene tag o errori di sintassi. La convalida supporta molti linguaggi basati sui tag, tra cui HTML 2.0, HTML 3.2, HTML 4.0, XHTML 1.0 Strict, le estensioni di Internet Explorer 3.0 e 4.0, le estensioni di Netscape Navigator 3.0 e 4.0, ColdFusion, ColdFusion 3.0, ColdFusion 3.1, ColdFusion 4.0, ColdFusion 4.5, ColdFusion 5.0, Synchronized Multimedia Integration Language 1.0, Wireless Markup Language e tag di JavaServer Page. È inoltre possibile convalidare un documento come documento XML (o XHTML). Il debugger JavaScript consente di isolare gli errori nel codice JavaScript client-side. È possibile scrivere il codice nella vista Codice (o nella finestra di ispezione Codice), quindi avviare il debugger per rilevare eventuali errori logici e di sintassi nel codice. Se la pagina contiene uno o più errori di sintassi, il browser visualizza un messaggio di errore; se la pagina contiene un errore logico, la pagina funziona in modo errato ma il browser non visualizza un messaggio di errore. Il debugger ricerca prima gli eventuali errori di sintassi, quindi, in esecuzione parallela al browser, guida l'utente alla rilevazione di eventuali errori logici. Se sono presenti errori logici, la finestra del debugger JavaScript consente di esaminare le variabili e le proprietà del documento durante l'esecuzione del programma. È possibile inserire nel codice dei punti di interruzione (simili a messaggi di avvertimento), per arrestare l esecuzione del programma e visualizzare in un elenco di variabili i valori degli oggetti e delle proprietà JavaScript. Inoltre, si può passare all esecuzione dell istruzione successiva o di una chiamata di funzione per osservare il cambiamento dei valori delle variabili. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver, quindi Convalida dei tag e Uso del debugger JavaScript. Flusso di lavoro di sviluppo di siti Web 69

70 Debug di pagine dinamiche in Dreamweaver MX Mentre si sviluppano applicazioni in Macromedia ColdFusion, è possibile configurare ColdFusion in modo da visualizzare le informazioni in un browser per semplificare il debug dell'applicazione. Ad esempio, se una pagina contiene un errore, ColdFusion visualizza le cause possibili dell'errore nella parte inferiore di una pagina ColdFusion quando si apre la pagina in un browser. È possibile visualizzare queste informazioni e correggere la pagina senza uscire dall'area di lavoro di Dreamweaver. Nota: questa funzione non è supportata in Macintosh. In Macintosh gli sviluppatori possono usare il comando Visualizza anteprima del browser o premere F12 per aprire una pagina ColdFusion in un browser distinto. Se la pagina contiene errori, le informazioni sulle cause possibili vengono visualizzate nella parte inferiore della pagina. Per eseguire il debug di una pagina ColdFusion senza uscire dall'area di lavoro di Dreamweaver, aprire la pagina ColdFusion in Dreamweaver e fare clic sull'icona Debug server della barra degli strumenti del documento oppure scegliere Visualizza > Debug server. L'icona Debug server Dreamweaver richiede il file dal server di ColdFusion MX e lo visualizza in una finestra interna di Internet Explorer. Se la pagina contiene errori, le cause possibili vengono visualizzate nella parte inferiore della pagina. Contemporaneamente viene visualizzato il pannello Debug server. Il pannello contiene molte informazioni utili, come tutte le pagine elaborate dal server per rendere la pagina, tutte le query SQL eseguite sulla pagina e tutte le variabili del server con gli eventuali valori relativi. Il panello comprende inoltre un riepilogo dei tempi di esecuzione. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Uso del debugger di ColdFusion. 70 Capitolo 3

71 Debug dei filmati Flash Il debugger di Flash consente di trovare errori in un filmato mentre viene riprodotto in Flash Player. È possibile usare il debugger in modalità di prova con file locali oppure per provare i file su un server Web in una postazione remota. Il Debugger consente di impostare punti di interruzione in ActionScript per arrestare Flash Player e scorrere le righe del codice in esecuzione. È quindi possibile tornare agli script e modificarli per ottenere i risultati desiderati. Per attivare il debugger in modalità di prova, scegliere Controllo > Debug filmato. Viene avviato il debugger e aperto il filmato in modalità di prova. Una volta attivato, il debugger visualizza l'url o il percorso del file locale del filmato nella barra di stato, segnala se è in esecuzione in modalità di prova o da una postazione remota e mostra una vista dal vivo dell'elenco di visualizzazione di clip filmato. Quando si aggiungono o rimuovono degli elementi dal filmato, l'elenco di visualizzazione viene immediatamente aggiornato con le modifiche. Per modificare le dimensioni dell'elenco, è sufficiente spostare la barra di divisione orizzontale. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso del Debugger. Se si creano complesse interazioni client-side con ActionScript, si consiglia di leggere e contribuire all'elenco crescente di indicazioni per sfruttare al meglio ActionScript, disponibile al Centro per designer e sviluppatori di Flash MX all'indirizzo Prova del sito in Dreamweaver MX Prima di caricare il sito su un server e considerarlo pronto per la visualizzazione, è consigliabile provarlo a livello locale. In effetti, è buona norma provare spesso il funzionamento del sito durante la costruzione, per individuare i problemi per tempo ed evitare di ripeterli. Occorre controllare che nei browser di destinazione le pagine abbiano l aspetto e il funzionamento desiderati, che non siano presenti collegamenti interrotti e che il tempo di scaricamento delle pagine non sia eccessivamente lungo. Inoltre, è possibile eseguire un rapporto per controllare l intero sito prima di pubblicarlo. Flusso di lavoro di sviluppo di siti Web 71

72 Le seguenti linee guida consentiranno di realizzare un sito gradevole e funzionale per i visitatori: Creare delle anteprime delle pagine con il maggior numero possibile di browser e piattaforme, al fine di verificare le eventuali differenze di layout, colori, dimensioni di caratteri e dimensioni predefinite delle finestre dei browser che non possono essere previste in un controllo basato solo sui browser di destinazione. Controllare che le pagine funzionino nel modo previsto all interno dei browser per i quali sono state progettate e che negli altri browser, pur non potendo garantire gli stessi risultati, non creino problemi particolari. Questo significa che le pagine devono essere leggibili e funzionali anche nei browser che non supportano stili, livelli, plug-in o il linguaggio JavaScript. Se con browser meno recenti le pagine perdono gran parte delle proprie caratteristiche, è consigliabile usare il comportamento Controlla browser in Dreamweaver per reindirizzare automaticamente i visitatori ad un altra pagina. Verificare la presenza di eventuali collegamenti interrotti e risolverli, poiché anche i siti a cui essi si riferiscono vengono sottoposti a modifiche e riorganizzazioni e le pagine collegate potrebbero essere state spostate o eliminate. Per generare un elenco dei collegamenti ai siti esterni, eseguire un controllo dei collegamenti in Dreamweaver. In alternativa, si può eseguire un rapporto completo del sito, per controllare i collegamenti esterni e generare un rapporto di quelli non validi. Controllare le dimensioni delle pagine e il tempo necessario al loro scaricamento, considerando ad esempio che le pagine composte da un unica tabella di grandi dimensioni non vengono visualizzate fino al completo caricamento della tabella. Considerare la possibilità di suddividere le tabelle più lunghe; qualora ciò non fosse possibile, può essere una buona idea inserire una piccola parte di contenuto, ad esempio un messaggio di benvenuto o un inserzione pubblicitaria, al di fuori della tabella e all'inizio della pagina, in modo che gli utenti possano visualizzare tale materiale durante lo scaricamento della tabella. È possibile rilevare la presenza di problemi quali documenti senza titolo, tag vuoti e tag nidificati superflui eseguendo rapporti sul sito in Dreamweaver. L esecuzione di questi rapporti prima della pubblicazione del sito significa dover affrontare meno problemi in seguito. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Prova di un sito. Trasferimento dei file del sito su un server con Dreamweaver MX A questo punto si è creato un sito Web funzionale. Il prossimo passaggio consiste nel pubblicarlo caricando i file su un server Web remoto. Prima di poter continuare, è necessario disporre dell'accesso ad un server Web remoto (ad esempio il server del proprio provider Internet, un server di proprietà del cliente per il quale si sta lavorando o un server Intranet dell'azienda). Se non si dispone dell'accesso a tale server, rivolgersi al provider Internet o al cliente. Il comando Carica di Dreamweaver copia i file dal sito locale a quello remoto, solitamente senza modificarne lo stato di ritiro. Le situazioni più comuni in cui si può usare Carica anziché Deposita sono due: Quando non si lavora in gruppo e non si usa il sistema di deposito/ritiro dei file. Quando si desidera caricare sul server la versione corrente del file ma si continuerà a modificarlo. 72 Capitolo 3

73 Per caricare un file su un server remoto, scegliere Carica dal pulsante Gestione file dopo aver salvato il file nella finestra del documento. In alternativa, è possibile fare clic sul pulsante Carica della barra degli strumenti del pannello Sito oppure scegliere Sito > Carica per caricare il file. Se il file non è stato salvato, è possibile che venga visualizzata una finestra di dialogo (in base alle impostazioni specificate nel pannello Sito della finestra di dialogo Preferenze) che consente di salvare il file prima di caricarlo sul server remoto. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Caricamento dei file su un server remoto. Gestione e aggiornamento del proprio sito Dopo che la maggior parte del sito è stata pubblicata, è necessario continuare l'aggiornamento e la gestione. La pubblicazione del sito, cioè il trasferimento su un server e l'attivazione, è un processo dinamico. La finestra Sito di Dreamweaver comprende molti strumenti utili per la gestione del sito, il trasferimento da e ad un server remoto, la definizione di procedure di deposito e ritiro per impedire la sovrascrittura dei file e la sincronizzazione dei file presenti sui siti locali e remoti. La definizione e l'implementazione di un sistema di controllo della versione, sia con gli strumenti di Dreamweaver MX sia con un'applicazione di controllo esterna, è un processo importante. Ulteriori informazioni sono disponibili nei forum di discussione relativi a Macromedia Dreamweaver sul sito Web di Macromedia. Questi forum costituiscono un'importante fonte di informazioni su diversi browser, piattaforme, suggerimenti di progettazione, domande inerenti il codice e così via. Flusso di lavoro di sviluppo di siti Web 73

74 Ulteriori informazioni Per ulteriori informazioni su qualsiasi strumento Macromedia Studio MX, compresi la documentazione, le esercitazioni, le note tecniche e altre fonti di consultazione, visitare il Centro di supporto di ogni prodotto: Dreamweaver: Flash: Fireworks: FreeHand: ColdFusion: 74 Capitolo 3

75 Parte III Dreamweaver MX Parte III I capitoli della terza parte presentano Macromedia Dreamweaver MX, illustrano tre esercitazioni e descrivono il funzionamento di Dreamweaver all interno della famiglia di prodotti Studio MX. Questa parte è costituita dai seguenti capitoli: Capitolo 4, Dreamweaver MX Capitolo 5, Esercitazioni di Dreamweaver MX Capitolo 6, Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX

76

77 CAPITOLO 4 Dreamweaver MX Macromedia Dreamweaver MX è un editor HTML professionale per la progettazione, la codifica e lo sviluppo di siti, pagine e applicazioni Web. Con Dreamweaver, è possibile scegliere se inserire manualmente il codice HTML o lavorare in un ambiente di modifica visiva. La nuova versione di Dreamweaver integra ed espande tutte le funzioni di Macromedia UltraDev, facilitando la creazione di applicazioni di database Web dinamiche in linguaggi server quali CFML (ColdFusion Markup Language), ActionScript, Microsoft ASP (Active Server Pages), ASP.NET, Sun JSP (JavaServer Pages) e PHP. Novità in Dreamweaver MX Dreamweaver offre una vasta gamma di nuove funzionalità, come i nuovi modelli, che facilitano la progettazione visiva, e molte nuove funzioni per l inserimento del codice. Dreamweaver integra ora anche tutte le funzioni per lo sviluppo di applicazioni di Dreamweaver UltraDev 4 e molte altre inedite, tra cui un area di lavoro specificamente progettata per l inserimento del codice, derivata da Macromedia ColdFusion Studio, un miglior codice di runtime e il supporto delle più avanzate tecnologie per applicazioni Web. Pieno controllo del codice e della progettazione con Dreamweaver MX Per la creazione del sito è possibile usare gli strumenti di progettazione di Dreamweaver o il ricco ambiente per l immissione del codice. Il nuovo layout dell area di lavoro (solo nella versione per Microsoft Windows) offre un ambiente di lavoro familiare con un interfaccia a documenti multipli (MDI), pannelli agganciabili e finestre dei documenti a schede La gestione dei pannelli in Dreamweaver è analoga a quella di Macromedia Flash MX e Fireworks MX. È possibile raggruppare pannelli ridimensionabili e agganciabili, espandendoli o riducendoli a seconda delle necessità, per garantire un flusso di lavoro regolare e altamente configurabile. I componenti Web di esempio predefiniti comprendono layout di qualità professionale che costituiscono un ottimo punto di partenza per la progettazione, oltre a librerie di funzioni JavaScript che consentono di accedere a sofisticati contenuti interattivi client-side senza dover leggere centinaia di pagine di manuali. I modelli Dreamweaver consentono ora agli autori del contenuto di impostare regole sofisticate senza compromettere la progettazione del sito. L ereditarietà dei modelli permette di personalizzare maggiormente il controllo del layout, mentre le aree modificabili consentono una maggiore flessibilità agli autori del contenuto. 77

78 La Definizione guidata del sito consente di impostare un sito in modo semplice e rapido, indipendentemente dal fatto che si stia creando un sito dinamico per la prima volta o impostando un account con un ISP. I Suggerimenti per il codice consentono di accedere facilmente a menu personalizzati che mostrano gli attributi dei tag, le proprietà dei metodi, i parametri delle funzioni e gli stili CSS (Cascading Style Sheet) appropriati mentre si apportano le modifiche nella vista Codice. Una barra di inserimento personalizzabile e completamente estendibile consente di accedere rapidamente ad oggetti e comportamenti in Dreamweaver. Ora è possibile personalizzare la barra degli strumenti Documento per adattarla alle proprie esigenze e preferenze, usando JavaScript. Il pannello Sito dispone di una funzione di gestione file integrata, che consente di cercare risorse e file sul desktop e nei volumi di rete senza dover chiudere Dreamweaver per usare il programma nativo di ricerca del sistema operativo. Il pannello Risposte consente di collegarsi direttamente alle risorse in linea messe a disposizione dal Centro di supporto Macromedia. È possibile recuperare i nuovi contenuti in qualsiasi momento, per avere a disposizione sempre i suggerimenti più aggiornati. Grazie alle migliorate funzioni di modifica e manipolazione delle tabelle il codice generato quando si modificano le tabelle nelle viste Layout e Standard è ora di qualità superiore; di conseguenza viene semplificata la gestione degli attributi e garantita la massima compattezza dei layout senza compromettere la compatibilità con più browser. È possibile creare menu a cascata in Java Script direttamente in Dreamweaver, una funzionalità prima disponibile solo in Fireworks. La colorazione della sintassi può essere completamente configurata e personalizzata in base alle esigenze. La barra degli strumenti Standard consente di accedere rapidamente ai comandi di esecuzione delle operazioni più comuni sui file (Apri, Salva e Nuovo) e di gestione degli Appunti. La funzione di stampa dalla vista Codice consente di stampare il codice sorgente, applicandovi la formattazione appropriata. Stabile supporto in Dreamweaver MX delle più recenti tecnologie server Con Dreamweaver MX è possibile creare rapidamente applicazioni Web dinamiche basate su database mediante l'inserimento manuale del codice o l'uso di oggetti e comportamenti visivi. Le librerie di codice server per ColdFusion, ASP, ASP.NET, JSP e PHP consentono di creare visivamente siti Web dinamici avvalendosi di tutte le più avanzate tecnologie server-side. In un unico ambiente di sviluppo è possibile integrare molti diversi siti e tecnologie back-end. Il pannello Snippet consente di memorizzare qualunque porzione di codice per riutilizzarla in seguito. È dunque possibile riutilizzare codice, funzioni e layout complessi. L editor delle librerie di tag comprende un database integrato di tag dove memorizzare i dati relativi ai tag nativi e a quelli personalizzati. È possibile modificare le proprietà dei tag esistenti e importarne di nuovi. Centinaia di editor di tag consentono di modificare rapidamente nella vista Codice gli attributi di specifici tag in HTML, CFML e ASP.NET. 78 Capitolo 4

79 Il supporto dei tag ASP.NET personalizzati consente di importare controlli server ASP.NET personalizzati (tag personalizzati) in pagine ASP.NET e di visualizzarne la struttura e gli attributi nel selettore tag, nei suggerimenti sul codice e nella finestra di ispezione dei tag. I tag per moduli Web ASP.NET vengono ora riprodotti sia su sistemi Windows che Macintosh, consentendo sofisticate operazioni di visualizzazione e di modifica. I tag per moduli Web consentono di scrivere rapidamente moduli Web ASP.NET mediante controlli di convalida e server-side. È possibile creare facilmente in Dreamweaver gli oggetti ASP.NET DataGrid e DataList per eseguire complesse operazioni di visualizzazione e modifica dei dati. Il pannello Database integrato consente di visualizzare rapidamente la struttura e il contenuto dei database e di eseguire ricerche in tabelle, procedure memorizzate e viste prima di creare le query. Il Selettore tag mostra la struttura di tutti i tag disponibili in Dreamweaver, compresi quelli personalizzati importati tramite l'editor delle librerie di tag. È possibile usarlo per collocare e modificare rapidamente i tag nelle pagine e per visualizzare informazioni di riferimento sui singoli tag. Un database di tag XML personalizzabile memorizza le informazioni sulla struttura di tutti i tag disponibili. Questo metodo di archiviazione centrale dei dati consente l'interazione di funzioni come i Suggerimenti per il codice, il Selettore tag e la Finestra di ispezione dei tag con i tag nativi o i tag personalizzati importati. La rilevazione di ColdFusion MX consente la configurazione automatica di un sito ColdFusion in Impostazione guidata sito mediante una copia di Macromedia ColdFusion MX Developer Edition installata localmente. Il pannello Debug server per ColdFusion MX semplifica il processo di debug di ColdFusion MX visualizzando l'output di debug direttamente in Dreamweaver. Mediante questo pannello è possibile visualizzare dati sulle variabili, informazioni sulle query e altre statistiche chiave relative alla pagina e saltare direttamente alle aree in cui si è verificato il problema, il tutto senza lasciare l ambiente di sviluppo. L'attuale codice di runtime ColdFusion generato dai comportamenti e dagli oggetti server di Dreamweaver è più orientato ai tag e difficilmente distinguibile dal codice che uno sviluppatore scriverebbe manualmente. Il supporto di RDS consente di trasferire i file in un senso e nell'altro, nonché consultare la struttura dei database su server ColdFusion usando connessioni RDS. Le librerie di tag JSP semplificano il lavoro degli sviluppatori separando la logica server dalle pagine JSP. Dreamweaver può importare dati di librerie di tag JSP da file TLD (descrittore della libreria di tag) e renderli disponibili in Suggerimenti per il codice, nel Selettore tag e nella Finestra di ispezione dei tag. La piena introspezione dei JavaBean consente di visualizzare i metodi getproperty e setproperty dei JavaBean nel pannello Associazioni, nonché di visualizzare tutti i metodi e le proprietà di un JavaBean nel pannello Componenti server, per consentire agli sviluppatori di integrare pienamente i JavaBean alle proprie applicazioni JSP. Oggetti modulo dinamici consentono di creare elenchi di selezione basati su database e altri elementi di moduli semplicemente selezionando l oggetto modulo appropriato dalla barra di inserimento. Dreamweaver MX 79

80 La finestra di dialogo Creazione comportamenti server di UltraDev 4 è stata migliorata per consentire agli utenti di creare comportamenti server con elementi di interfaccia utente più complessi, come caselle di controllo, gruppi di pulsanti di scelta e menu di connessione. Inclusa e pienamente integrata in Dreamweaver viene fornita una versione con licenza di Macromedia HomeSite+, la combinazione di ColdFusion Studio and HomeSite 5. Facilità di accesso agli standard più recenti in Dreamweaver MX Dreamweaver MX consente di creare siti Web compatibili con i più recenti standard, compresi XML e i servizi Web, e permette agli sviluppatori di rimanere aggiornati con tecnologie di sviluppo all avanguardia. L introspezione dei servizi Web per.net, ColdFusion e Java consente di esaminare e interagire con i più recenti servizi Web XML in tutte le principali tecnologie server. È possibile incorporare funzionalità complesse nelle proprie applicazioni Web usando la funzione di introspezione di Dreamweaver. La funzione di modifica e controllo XML consente di importare DTD (Definizioni di tipi di documento, Document Type Definitions) e schemi e assicura la correttezza formale dei documenti. Un migliore supporto dei CSS, compresa l integrazione di TopStyle, semplifica la creazione di siti compatibili con i più recenti standard CSS (Cascading Style Sheets). Il pannello CSS di Dreamweaver è stato migliorato e può visualizzare stili definiti sia internamente che esternamente, oltre a consentire l'uso dei fogli di stile in fase di progettazione. Vengono anche supportati molti costrutti di CSS2. Il supporto di XHTML permette di assicurare la conformità dei propri siti con gli standard più recenti della progettazione HTML, configurando Dreamweaver in modo che il codice generato sia compatibile con XHTML. È anche possibile convertire rapidamente file HTML in XHTML mediante il convertitore XHTML. Il rapporto sull accessibilità del sito della sezione 508 consente di meglio stabilire se il sito rispetta i criteri di accessibilità e di evidenziare i problemi in modo semplice e rapido. Le informazioni di riferimento sull accessibilità integrate nel pannello Riferimenti illustrano le ragioni alla base delle procedure più adatte, normalmente adottate quando si progetta un sito che deve risultare accessibile. L opzione di accessibilità per la generazione di codice conforme nella fase di modifica garantisce che i contenuti in corso di creazione rispettino le linee guida di accessibilità. È possibile configurare Dreamweaver in modo che suggerisca specifici attributi di accessibilità quando nella pagina si inseriscono determinati tag e oggetti. Il supporto dei componenti ColdFusion consente una maggiore modularità e portabilità della logica server rendendone modificabili le proprietà mediante il CFML. Dreamweaver supporta anche l introspezione, la creazione e la modifica di componenti ColdFusion. La convalida del codice assicura che i documenti rispettino gli standard appropriati, consentendo di generare un rapporto di convalida per profili di browser specifici o per una specifica versione di uno standard, compresi l XHTML transitorio e l HTML 4.0. Le funzioni di avvio e modifica di Macromedia Flash MX e Fireworks MX accelerano la modifica di immagini, animazioni e HTML tra Macromedia Flash MX, Dreamweaver e Fireworks MX, consentendo di avviare l applicazione e modificare il contenuto direttamente da Dreamweaver. 80 Capitolo 4

81 Una Finestra di ispezione tag per la visualizzazione di XML, HTML e CFML consente di esaminare la struttura di un documento in modo semplice e rapido. È possibile individuare ed eliminare rapidamente nidificazioni e relazioni principale/secondario non corrette senza dover esaminare il codice sorgente. La funzione di accesso FTP protetto si integra con MacSSH e PUTTY per Windows, consentendo un trasferimento protetto via SSH delle informazioni di accesso dal client FTP integrato in Dreamweaver. Il pieno supporto del set di caratteri UTF-8 in tutte le lingue consente di creare e trasformare le pagine usando la codifica UTF-8. Il pieno supporto di Mac OS X e Windows XP consente di eseguire Dreamweaver alla massima velocità nei più recenti sistemi operativi, supportando nel contempo tutti i più recenti miglioramenti all interfaccia utente. L integrazione con Macromedia Sitespring consente di adottare le migliori pratiche per la produzione e la gestione dei client nell area di lavoro di Dreamweaver. Apprendimento di Dreamweaver Dreamweaver comprende molte risorse che consentono di orientarsi rapidamente all interno del programma e di acquisire dimestichezza con la creazione di pagine e siti Web. Tali risorse comprendono tra le altre una Guida in linea e alcune esercitazioni. Inoltre, nel Centro di supporto di Dreamweaver del sito Web Macromedia sono disponibili suggerimenti, note tecniche, esempi e informazioni sempre aggiornate. Esercitazioni di Dreamweaver MX Le nozioni fondamentali sull impostazione di un sito Web e sulla modifica del codice sono esposte nel Capitolo 5, Esercitazioni di Dreamweaver MX, a pagina 85. Se si conoscono già le funzioni di progettazione di Dreamweaver ma si desiderano ulteriori informazioni sulla creazione di applicazioni Web, è possibile iniziare da Dreamweaver Esercitazione 3: Creazione di un applicazione Web a pagina 124, che insegna come creare pagine interattive collegate a database. Guida in linea di Dreamweaver La Guida in linea di Dreamweaver fornisce informazioni esaustive su tutte le funzioni di Dreamweaver, ottimizzate per la lettura in linea. La Guida in linea di Dreamweaver appare nell'apposito visualizzatore del sistema operativo: Guida HTML di Microsoft (Windows) o Aiuti Apple (Macintosh). Su entrambe le piattaforme, è possibile trovare le informazioni necessarie in 4 modi: Il sommario elenca tutte le informazioni suddivise per argomento. Fare clic sulle voci principali per visualizzare gli argomenti attinenti. L'indice, come un tradizionale indice analitico stampato, consente di cercare termini o concetti specifici. La funzione Cerca consente di trovare la stringa desiderata nel testo della Guida in linea. Dreamweaver MX 81

82 La guida sensibile al contesto consente di accedere agli argomenti correlati da ogni finestra di dialogo, panello e finestra di ispezione. Per visualizzare la guida sensibile al contesto, fare clic sul pulsante? in una finestra di dialogo, oppure scegliere? dal menu Opzioni nella barra del titolo di un gruppo di pannelli o ancora fare clic sull icona del punto interrogativo in una finestra di ispezione o in un altro tipo di finestra. Fare clic qui per aprire la Guida in linea Ciascun argomento della Guida in linea comprende dei pulsanti che consentono di spostarsi da un argomento all'altro. I pulsanti freccia destra e sinistra consentono di passare all argomento precedente o successivo all interno della stessa sezione (seguendo l ordine definito nel sommario). Estensione di Dreamweaver La Guida in linea Estensione di Dreamweaver fornisce informazioni sul modello DOM (Document Object Model) e sulle API (Application Programming Interfaces) di Dreamweaver per consentire agli sviluppatori JavaScript e C di creare estensioni per Dreamweaver. Centro di supporto di Dreamweaver Per sfruttare al meglio tutte le potenzialità di Dreamweaver, è possibile consultare un Centro di supporto sul Web. Il sito Web del Centro di supporto di Dreamweaver all indirizzo viene aggiornato regolarmente per fornire le informazioni più recenti su Dreamweaver, consigli di utenti esperti, esempi, suggerimenti, aggiornamenti e informazioni su argomenti più complessi. Si consiglia di visitare spesso il sito Web per consultare le informazioni più aggiornate su Dreamweaver e su come sfruttarne al meglio tutte le potenzialità. Forum in linea di Dreamweaver I forum in linea di Dreamweaver consentono di condividere informazioni utili e discutere di problemi tecnici con gli altri utenti del programma. Per informazioni sulla modalità di accesso ai forum, visitare il sito Web Macromedia all indirizzo dreamweaver_newsgroup. 82 Capitolo 4

83 Risorse di tecnologie Web e HTML Di seguito vengono elencate alcuni utili risorse disponibili sul Web: HTML 4.01 Specification(http://www.w3.org/TR/REC-html40/). Specifica ufficiale del World Wide Web Consortium per l'html. Index DOT HTML (http://www.blooberry.com/indexdot/html/). Elenco completo di tag, attributi e valori HTML con indicazione della compatibilità con i vari browser. XHTML 1.0 (http://www.w3.org/tr/xhtml1/). Specifica ufficiale del linguaggio XHTML (Extensible HyperText Markup Language). O Reilly XML.com (http://www.xml.com/). Sito che comprende informazioni, esercitazioni e suggerimenti sul linguaggio XML (Extensible Markup Language) e su altre tecnologie Web. Cascading Style Sheets, level 1 (CSS1) (http://www.w3.org/tr/rec-css1) e level 2 (CSS2) (http://www.w3.org/tr/rec-css2/). Specifiche ufficiali del World Wide Web Consortium per i fogli di stile. WebReview.com s Style Sheet Reference Guide (http://www.webreview.com/style/index.shtml). Guida agli stili CSS e alla compatibilità con i vari browser, a cura di Web Review. Panoramica ASP di Microsoft (http://msdn.microsoft.com/workshop/server/asp/aspover.asp). Fornisce informazioni sulla tecnologia ASP (Active Server Pages). Pagina dedicata ad ASP.NET da Microsoft (http://www.asp.net/). Fornisce informazioni su ASP.NET. Pagina dedicata a JSP da Sun (http://java.sun.com/products/jsp/). Fornisce informazioni sulla tecnologia JSP (JavaServer Pages). Pagine di PHP (http://www.php.net/). Forniscono informazioni sulla tecnologia PHP: Hypertext Preprocessor. Sito di MySQL (http://www.mysql.com/). Fornisce informazioni su MySQL. Tabella dei nomi delle entità(http://www.bbsinc.com/iso8859.html) Elenca i nomi di entità usati nella norma ISO (Latin-1). DHTML Events (http://msdn.microsoft.com/workshop/author/dhtml/reference/ events.asp#om40_event). Fornisce informazioni sugli eventi di Microsoft Internet Explorer. Pagina di Macromedia ColdFusion Server (http://www.macromedia.com/software/coldfusion/). Fornisce informazioni su ColdFusion Server. Pagina di Macromedia JRun Server (http://www.macromedia.com/software/jrun/). Fornisce informazioni su JRun Server. Pagina di IBM WebSphere (http://www.ibm.com/software/webservers/appserv/). Fornisce informazioni sul server applicazioni IBM WebSphere. Pagina di Chili!Soft (http://www.chilisoft.com/products/). Fornisce informazioni sul server applicazioni Sun Chili!Soft ASP. JavaScript Bible di Danny Goodman (IDG Books). Volume che tratta in modo esauriente il linguaggio JavaScript 1.2. JavaScript: The Definitive Guide di David Flanagan (O Reilly & Associates). Fornisce informazioni di riferimento su tutte le funzioni, gli oggetti, i metodi, le proprietà e i gestori di eventi JavaScript. Dreamweaver MX 83

84 CGI Scripts for Fun and Profit (http://www.hotwired.lycos.com/webmonkey/99/26/ index4a.html). Articolo del sito Hotwired Webmonkey sull integrazione di script CGI (Common Gateway Interface) esistenti nelle proprie pagine Web. The CGI Resource Index (http://www.cgi-resources.com/). Archivio di tutto il materiale relativo all interfaccia CGI, ad esempio script predefiniti, documentazione, libri e perfino servizi di programmazione a pagamento. The Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/). Costituisce un'introduzione all'interfaccia CGI. 84 Capitolo 4

85 CAPITOLO 5 Esercitazioni di Dreamweaver MX Le tre esercitazioni contenute in questo capitolo costituiscono un ottimo strumento per acquisire dimestichezza con le operazioni fondamentali dello sviluppo per il Web in Macromedia Dreamweaver MX. Le esercitazioni illustrano le seguenti attività: Creazione di un sito Web Uso degli strumenti di immissione del codice per integrare l ambiente di sviluppo visivo di Dreamweaver Creazione di un applicazione Web dinamica basata su un database Il modo migliore per usare queste esercitazioni è svolgerle in sequenza, affinando le proprie capacità man mano che si acquista familiarità con il flusso di lavoro dello sviluppo per il Web e con gli strumenti di Dreamweaver. Dreamweaver Esercitazione 1: Creazione di un sito Web Questa esercitazione è costituita da una serie di brevi lezioni che illustrano la creazione di un semplice sito Web statico tramite gli strumenti visivi di programmazione di Macromedia Dreamweaver MX. Per ulteriori informazioni sull uso degli strumenti codifica manuale in Dreamweaver, vedere Dreamweaver Esercitazione 2: Modifica del codice a pagina 114; per ulteriori informazioni su come creare un applicazione Web dinamica basata su un database, vedere Dreamweaver Esercitazione 3: Creazione di un applicazione Web a pagina 124. L ordine delle lezioni all'interno dell'esercitazione illustra uno dei possibili flussi di lavoro per la creazione di un sito. Nel creare i propri siti è comunque possibile seguire il flusso di lavoro preferito. Per creare un sito Web statico: 1 Pianificazione e preparazione (vedere Impostazione di un sito locale a pagina 86 e Aggiunta di risorse al proprio sito a pagina 90). 2 Creazione delle pagine (vedere Creazione e salvataggio di una nuova pagina a pagina 91). 3 Struttura e impostazione delle pagine (vedere Correzione del layout a pagina 93 e Impostazione di un titolo di pagina a pagina 98). 4 Aggiunta di contenuti alle pagine (vedere Aggiunta di testo formattato a pagina 99 e Aggiunta di immagini a pagina 103). 85

86 5 Creazione di collegamenti tra le pagine (vedere Aggiunta di collegamenti testuali tra le pagine a pagina 108 e Creazione di rollover per i collegamenti grafici a pagina 109). 6 Pubblicazione del sito (vedere Anteprima nel browser a pagina 111 e Impostazione di un sito remoto e pubblicazione a pagina 112). Impostazione di un sito locale La procedura più comune per la creazione di un sito Web con Dreamweaver consiste nel creare e modificare le pagine sul disco rigido locale, per poi caricarne una copia su un server Web remoto. È anche possibile usare Dreamweaver in modo diverso (per esempio usare un server Web sul sistema locale, o caricare i file su un server alternativo, oppure usare un disco collegato come se fosse il disco locale); nell'ambito delle lezioni di questa esercitazione, comunque, si presume di lavorare sul disco rigido locale e di caricare poi i file su un server remoto. In Dreamweaver, la parola sito può riferirsi a uno qualsiasi dei seguenti elementi: Un sito Web: una serie di pagine residenti su un server, visualizzabili dai visitatori del sito mediante un browser. Un sito remoto: i file sul server che costituiscono un sito Web, considerati dal punto di vista dell autore piuttosto che da quello dei visitatori. Un sito locale: i file sul disco locale che corrispondono ai file sul sito remoto. L autore modifica i file sul disco locale, quindi li carica sul sito remoto. Una definizione di sito di Dreamweaver: una serie di caratteristiche che definiscono un sito locale, oltre a informazioni sulla corrispondenza tra sito locale e sito remoto. Per creare un sito Web, si inizia normalmente dalla sua pianificazione: si stabilisce il numero delle pagine, il contenuto di ciascuna pagina, il modo in cui le pagine sono collegate tra loro. Il sito oggetto di questa lezione, tuttavia, è molto semplice e non richiede un grande lavoro di pianificazione: sarà costituito infatti solo da due pagine Web, collegate tra loro. Per questo sito, dunque, è possibile saltare la fase di pianificazione e passare direttamente alla creazione di una definizione del sito, attraverso la finestra di dialogo Definizione del sito. È possibile visualizzare due versioni di questa finestra di dialogo: Generali o Avanzate. Se si sceglie la versione Generali, la finestra di dialogo guiderà l utente passo dopo passo nel processo di impostazione del sito. Se invece si preferisce modificare i dati del sito senza alcun aiuto, fare clic sulla scheda Avanzate. La procedura che segue descrive come impostare le opzioni nella versione Generali della finestra di dialogo, detta anche Definizione guidata del sito. Per ulteriori informazioni sull impostazione delle opzioni nella versione Avanzate, fare clic sulla scheda Avanzate, quindi scegliere il pulsante?. Per definire un sito: 1 Scegliere Sito > Nuovo sito. (ovvero scegliere Nuovo sito dal menu Sito) Viene visualizzata la finestra di dialogo Definizione del sito. 2 Se viene visualizzata la scheda Avanzate della finestra di dialogo, fare clic su Generali. Viene aperta la prima schermata della Definizione guidata del sito, con la richiesta di digitare il nome del sito. 86 Capitolo 5

87 3 Nella casella di testo, digitare un nome che identifichi il sito all interno di Dreamweaver. Usare un nome a piacere, per esempio Global Car Rental. 4 Fare clic su Avanti per il passaggio successivo. Nella schermata successiva della procedura guidata all'utente viene richiesto se intende usare una tecnologia server. 5 Selezionare l opzione No per indicare che al momento si tratta di un sito statico, senza pagine dinamiche. Per creare un applicazione Web, sarebbe necessario scegliere un tipo di documento dinamico, come Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP) o PHP: Hypertext Preprocessor (PHP), e fornire quindi le informazioni relative al server dell'applicazione (per ulteriori informazioni, vedere Dreamweaver Esercitazione 3: Creazione di un applicazione Web a pagina 124). 6 Fare clic su Avanti per il passaggio successivo. Nella schermata successiva della procedura guidata viene richiesto all'utente come intende lavorare sui file. 7 Selezionare l opzione Modificando le copie locali sul proprio computer, caricando i file sul server quando sono pronti (consigliato). Anche se nella fase di sviluppo del sito è possibile lavorare sui file anche in numerosi altri modi, ai fini di questa lezione scegliere questa opzione. Esercitazioni di Dreamweaver MX 87

88 8 La casella di testo consente di specificare una cartella sul disco locale in cui memorizzare la versione locale dei file del sito. Per non commettere errori, si consiglia di cercare la cartella anziché digitarne il percorso; quindi, fare clic sull icona della cartella accanto alla casella di testo. Verrà visualizzata la finestra di dialogo Scegliere la cartella Root locale per il sito. 9 Nella finestra di dialogo Scegliere la cartella Root locale per il sito, individuare una cartella sul disco locale in cui archiviare tutti i siti. Non scegliere ancora OK. Nota: Nella cartella saranno contenuti più siti; si consiglia quindi di non scegliere come cartella principale locale la cartella del sito. Si apprenderà in seguito come creare una cartella principale locale per un sito specifico all interno della cartella dei siti. Se non si dispone già di una cartella dei siti, crearne una (utilizzando il pulsante di creazione cartelle nella finestra di dialogo Scegliere la cartella principale locale per il sito). Assegnare alla cartella il nome Sites. La posizione consigliata per la cartella dei siti dipende dal sistema operativo: In Windows, se non si dispone già di una cartella in cui archiviare i siti, crearla all'interno della cartella principale dell'unità C e assegnarle il nome Sites. Il percorso della cartella sarà dunque C:\Sites. In Mac OS 9, se non si dispone già di una cartella in cui archiviare i siti, crearne una all'interno della cartella principale dell unità disco denominata Sites. In Mac OS X, la cartella principale (/Users/nomeutente) contiene una cartella denominata Documents. Ricercare tale cartella, quindi creare al suo interno una cartella denominata Sites. 10 Dalla finestra di dialogo Scegliere la cartella Root locale per il sito, creare una nuova cartella all interno della cartella Siti. Denominare la nuova cartella GettingStarted, quindi scegliere OK per chiudere la finestra di dialogo Scegliere la cartella principale locale per il sito. La nuova cartella è la cartella principale locale del sito. 88 Capitolo 5

89 11 Fare clic su Avanti per il passaggio successivo. Nella schermata successiva della procedura guidata viene richiesto all'utente la modalità di connessione al server remoto. 12 Per il momento, scegliere Nessuna dal menu a comparsa. Fare clic su Avanti per il passaggio successivo. Viene visualizzata la schermata successiva della procedura guidata, che contiene un riepilogo delle impostazioni. 13 Fare clic su Fine per terminare. È possibile impostare in un secondo tempo le informazioni relative al sito remoto (vedere Impostazione di un sito remoto e pubblicazione a pagina 112); per il momento, le informazioni relative al sito locale sono sufficienti per iniziare a creare una pagina. Verrà visualizzato un messaggio di avvertimento, che informa che verrà creata una cache del sito. La cache del sito è un metodo per l archiviazione dei dati relativi al sito, per velocizzare varie operazioni eseguite a livello del sito. 14 Fare clic su OK per procedere alla creazione della cache del sito. Nel pannello Sito vengono ora visualizzate la nuova cartella principale locale del sito corrente e un'icona che consente di visualizzare tutti i dischi locali in una struttura ad albero gerarchica. L icona è denominata Desktop (Windows) o Computer (Macintosh). Il pannello Sito mostra solitamente tutti i file e le cartelle del sito, ma al momento il sito non contiene file o cartelle. Quando il sito contiene dei file, l elenco nel pannello Sito può essere usato per la gestione dei file, consentendo di copiare, incollare, eliminare, spostare e aprire i file come dal desktop del computer. Se si dispone già di una serie di file HTML locali che si desidera usare per creare un sito Web, è possibile avvalersi delle funzioni di gestione file del pannello Sito per copiarli nella cartella del sito appena creata. È tuttavia possibile completare le lezioni di questa guida usando i file forniti insieme a Dreamweaver, prima di iniziare a usare i propri. Se si dispone già di un sito Web su un server remoto e si desidera modificarlo con Dreamweaver, in Dreamweaver scegliere? > Uso di Dreamweaver. Esercitazioni di Dreamweaver MX 89

90 Aggiunta di risorse al proprio sito Dopo aver creato un sito locale, se si dispone già di risorse create per il sito (immagini o altri contenuti), collocarle in una cartella all interno della cartella principale locale del sito. Quando si inizierà ad aggiungere contenuti alle pagine, sarà possibile usare le risorse. Le immagini e i file con il testo per il sito Global Car Rental sono in dotazione con Dreamweaver. Se si stanno creando le pagine Global Car Rental, è necessario copiare le immagini per il sito nella cartella principale locale del sito. A questo scopo è possibile usare il pannello Sito. Le risorse si trovano in una cartella chiamata Design. Per semplicità e per garantire l uniformità con le altre parti della presente Guida introduttiva, copiare l intera cartella Design nel proprio sito e lavorare all interno di essa. Per copiare una cartella di immagini nella cartella principale locale del sito: 1 Se il pannello Sito non è già aperto, aprirlo scegliendo Finestra > Sito. Viene visualizzato il pannello Sito. Se il pannello Sito era già aperto, è possibile che non venga visualizzato. Se il pannello Sito non viene visualizzato, scegliere nuovamente Finestra > Sito. 2 Nel pannello Sito, espandere l icona Desktop (Windows) o Computer (Macintosh) per visualizzare i dischi disponibili. 3 Se necessario, espandere le cartelle fino a raggiungere la cartella dell applicazione Dreamweaver. 4 Espandere la cartella Samples. 5 Espandere la cartella GettingStarted nella cartella Samples. 6 Selezionare la cartella Design nella cartella GettingStarted, quindi premere Ctrl+C (Windows) o Comando+C (Macintosh) per copiarla. All interno della cartella Design si trova una cartella chiamata Assets, contenente varie risorse collegate al sito, tra cui una sottocartella di immagini. 7 Sempre dal pannello Sito, individuare la cartella principale locale del sito (creata durante la definizione del sito) e selezionarla. Premere quindi Ctrl+V (Windows) o Comando+V (Macintosh) per incollare una copia della cartella Design nel sito. 90 Capitolo 5

91 Creazione e salvataggio di una nuova pagina Dopo aver impostato il sito, è possibile creare le pagine Web che lo compongono. All avvio di Dreamweaver, è stato automaticamente creato un documento HTML vuoto. Prima di procedere, chiudere tale documento. Per chiudere il documento vuoto predefinito: Scegliere File > Chiudi. Per creare una nuova pagina: 1 Scegliere File > Nuovo. Viene aperta la finestra di dialogo Nuovo documento. 2 Dall elenco Categoria a sinistra selezionare la categoria Strutture di pagina. L'elenco della colonna centrale della finestra di dialogo assume il nome di Strutture di pagina. Viene visualizzato un elenco di strutture di pagina predefinite. 3 Scorrere l elenco Strutture di pagina e scegliere la voce Testo: Articolo D con navigazione. Nota: Nell'elenco è compresa un'altra voce con un nome simile. Fare attenzione a non selezionare la vocetesto: Articolo D, che non dispone di barra di navigazione. Esercitazioni di Dreamweaver MX 91

92 Una piccola anteprima della pagina viene visualizzata sul lato destro della finestra di dialogo. È eventualmente possibile usare una delle altre strutture predefinite per creare la pagina, oppure creare una pagina senza una struttura predefinita, scegliendo la relativa voce dalla categoria Pagina di base. Il resto di questa lezione si basa sul presupposto che si stia usando la struttura di pagina Testo: Articolo D con navigazione. 4 Accertarsi che il pulsante di scelta Documento nella parte inferiore destra della finestra di dialogo sia selezionato. 5 Fare click su Crea. All'interno di nuova finestra Documento, viene visualizzata una nuova pagina con il layout selezionato. La pagina contiene il testo segnaposto Lorem ipsum, che mostra la struttura finale della pagina dopo l'aggiunta del testo desiderato. 6 Salvare il documento. 92 Capitolo 5

93 Per salvare la nuova pagina: 1 Scegliere File > Salva. 2 Nella finestra di dialogo Salva con nome, individuare la cartella Design all interno della cartella principale del sito. Promemoria: la cartella principale del sito è la cartella creata durante l impostazione del sito in Impostazione di un sito locale a pagina Digitare il nome del file index.htm. 4 Fare clic su Salva. Il nome del file è ora visualizzato nella barra del titolo della finestra Documento, tra parentesi, dopo le parole Documento senza titolo. Correzione del layout Le pagine predefinite costituiscono un punto di partenza, ma è improbabile che il layout corrisponda esattamente a quello pensato dall'autore. Per modificare il layout di una pagina, usare gli strumenti di layout di Dreamweaver. Questa esercitazione illustra l uso di alcuni di questi strumenti; per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver. Innanzitutto, eliminare gli elementi del layout non necessari. Per creare il layout della pagina Global Car Rental, eliminare le numerose tabelle e celle non necessarie (vedere la sezione successiva). Aggiungere quindi i segnaposto immagine e regolare opportunamente la larghezza delle colonne delle tabelle (usando la vista Layout didreamweaver). Vedere Aggiunta di un segnaposto immagine a pagina 96 e Ridimensionamento automatico di una colonna a pagina 97. Eliminazione degli elementi non necessari In ogni struttura di pagina predefinita vi sono probabilmente elementi non necessari per la pagina finale. È possibile selezionare tali elementi ed eliminarli. Gli elementi della struttura di pagina predefinita che seguono non sono necessari per la pagina Global Car Rental: Due collegamenti di navigazione nella parte superiore della pagina L'area del titolo e dell'intestazione sopra la colonna del testo principale Una piccola casella accanto al titolo nella colonna della barra laterale La barra del copyright nella parte inferiore della pagina La procedura generale per l eliminazione di un elemento prevede di selezionarlo e di premere quindi il tasto BACKSPACE (Windows) o Elimina (Macintosh). Le seguenti procedure illustrano come selezionare ed eliminare gli elementi superflui. Al termine dell'operazione, controllare di aver eliminato tutti gli elementi da rimuovere e salvare il documento. Esercitazioni di Dreamweaver MX 93

94 Per eliminare i collegamenti di navigazione: 1 Scegliere Visualizza > Vista tabella > Vista standard per garantire che le tabelle siano visualizzate in vista standard. 2 Nella barra di navigazione del documento, trascinare il puntatore dalla cella della tabella con il collegamento Sic Amet alla cella con il collegamento Consectetur. Entrambe le celle sono evidenziate per indicare che sono selezionate. 3 Premere BACKSPACE (Windows) o Elimina (Macintosh). Le celle della tabella vengono eliminate. Le altre celle (con i collegamenti Lorem, Ipsum e Dolor ) si allargano automaticamente fino a occupare l intera larghezza della tabella. Per eliminare il titolo delle colonne di testo: 1 Nella parte superiore delle colonne di testo, fare clic sulla parola Title. 2 Nel selettore di tag nella parte inferiore della finestra Documento, fare clic sul tag <table> più a sinistra, visualizzato immediatamente a destra del tag <body>. (Se il tag <body> non è visualizzato nell area di lavoro mobile, allargare la finestra Documento). 3 Premere BACKSPACE (Windows) o Elimina (Macintosh) per eliminare la tabella che contiene il titolo. Nota: Nel selettore di tag sono presenti due tag <table>, poiché l area del titolo è costituita da una tabella nidificata all interno di un altra tabella. In questo caso, occorre eliminare la tabella esterna, indicata dal tag <table> più a sinistra. 94 Capitolo 5

95 Per rimuovere la casella superflua nell intestazione della barra laterale: 1 Nella colonna destra, a sinistra della parola News, fare clic nella casella contenente il punto esclamativo. 2 Nel selettore di tag, fare clic sul tag <td> più a destra per selezionare la casella intorno al punto esclamativo. 3 Premere BACKSPACE (Windows) o Elimina (Macintosh). Per rimuovere la barra del copyright: 1 Scorrere la pagina fino in fondo. Fare clic in un punto qualsiasi della barra del copyright nella parte inferiore della pagina. 2 Nel selettore di tag, fare clic sul tag <table> più a sinistra, visualizzato immediatamente a destra del tag <body>. Premere quindi Elimina per rimuovere la tabella contenente le informazioni sul copyright. Per controllare e salvare la pagina: 1 Esaminare la pagina per accertarsi di aver eliminato gli elementi superflui. La pagina dovrebbe ora avere un aspetto simile a quello della figura seguente. 2 Salvare il documento. Esercitazioni di Dreamweaver MX 95

96 Aggiunta di un segnaposto immagine Creare adesso un segnaposto per l immagine da aggiungere in seguito. Per aggiungere un segnaposto immagine: 1 Fare clic all inizio della colonna di testo principale, nella parte superiore sinistra del testo, vicino alla prima parola in grassetto. Premere quindi Invio per inserire una riga vuota prima del testo. Fare clic sulla riga vuota appena creata. Il punto di inserimento dovrebbe ora trovarsi su una riga separata. In caso contrario, collocare il punto di inserimento sulla riga vuota. 2 Scegliere Inserisci > Segnaposto immagine. 3 Nella finestra di dialogo Segnaposto immagine, digitare un nome per il segnaposto, per esempio ImmagineSplash, e i valori relativi a larghezza e altezza. Per la pagina Global Car Rental, digitare 523 per la larghezza e 220 per l altezza. Nota: I nomi dei segnaposto devono iniziare con una lettera e possono contenere solo lettere e numeri. 4 Fare clic su OK. Viene visualizzato una casella di colore grigio delle dimensioni specificate. Si tratta di un segnaposto per un immagine, usato per impostare il layout delle pagine prima di disporre delle immagini finali. 5 Potrebbe essere necessario allargare la finestra di documento per visualizzare la colonna di testo a destra. 96 Capitolo 5

97 Ridimensionamento automatico di una colonna Nella pagina index.htm, la colonna di testo della barra laterale sulla destra è a larghezza fissa. Per fare in modo che la larghezza della colonna cambi quando il visitatore ridimensiona la finestra del browser, impostare il ridimensionamento automatico per la colonna. Regolare quindi la larghezza della colonna contenente il segnaposto immagine. Per rendere automaticamente ridimensionabile la colonna a sinistra: 1 Se la barra Inserisci non è visibile, scegliere Finestra > Inserisci per visualizzarla. 2 Nella barra Inserisci, fare clic sulla scheda Layout. 3 Fare clic sul pulsante Vista Layout per passare alla vista Layout 4 Leggere quanto visualizzato nella finestra di dialogo informativa, quindi fare clic su OK. Nell angolo superiore sinistro della tabella viene visualizzata una scheda verde per ciascuna tabella della pagina. La scheda è denominata Tabella di layout. 5 Nella finestra Documento, fare clic sulla scheda Tabella di layout sopra e a sinistra del segnaposto immagine inserito, per selezionare la tabella che contiene entrambe le colonne di testo. Su ciascuna delle due colonne di testo viene visualizzata un intestazione che mostra la larghezza di ciascuna colonna. 6 Se necessario, allargare la finestra Documento per visualizzare l intera colonna a destra. Anche dopo aver allargato la finestra Documento, è possibile che altre schede Tabella di layout impediscano di visualizzare il numero che indica la larghezza della tabella nell intestazione a destra. Non fare clic su queste schede. 7 Fare clic con attenzione sull intestazione della colonna di destra. Accertarsi di fare clic sopra le schede verdi Tabella di layout nella colonna a destra. Viene visualizzato un menu a comparsa. 8 Nel menu a comparsa, scegliere Imposta ridimensionamento automatico colonna Viene visualizzata la finestra di dialogo Scegli immagine spaziatore; all'utente viene richiesto di scegliere un elemento spaziatore. Nota: Se si è già scelto un elemento spaziatore, questa finestra di dialogo non verrà visualizzata; in tal caso, la colonna di destra è ora a ridimensionamento automatico. Se non si apre la finestra di dialogo, passare direttamente alla fine della procedura. Esercitazioni di Dreamweaver MX 97

98 9 Nella finestra di dialogo Scegli immagine spaziatore, selezionare l opzione Usa un file di immagine spaziatore esistente, quindi fare clic su OK. Viene visualizzata la finestra di dialogo Seleziona file immagine spaziatore 10 Nella finestra di dialogo Seleziona file immagine spaziatore, individuare la cartella Assets nella cartella principale locale. Aprire quindi la cartella Images e selezionare spacer.gif, quindi fare clic su OK (Windows) o Apri (Macintosh). La colonna di destra è ora a ridimensionamento automatico; in un browser, la larghezza della colonna di destra sarà la maggiore possibile, mentre la larghezza della colonna di sinistra rimarrà fissa. Per regolare la larghezza della colonna di testo principale: 1 Fare clic sull intestazione della colonna di sinistra e scegliere Pareggia larghezza celle dal menu a comparsa visualizzato. La colonna di sinistra è ora a larghezza fissa (pari alla larghezza dell immagine più i margini delle celle e la spaziatura tra le celle). 2 Fare clic sul pulsante Vista standard nella barra Inserisci per tornare alla vista Standard. 3 Salvare il documento. Impostazione di un titolo di pagina È possibile impostare numerose proprietà per una pagina, tra cui il titolo, il colore di sfondo, il colore del testo e così via. Per impostare le proprietà della pagina, scegliere Elabora > Proprietà di pagina. Se invece si desidera semplicemente impostare il titolo della pagina (visualizzato nella barra del titolo del browser), è possibile farlo nella barra degli strumenti Documento. Per impostare un titolo di pagina per il documento: 1 Se la barra degli strumenti Documento non è visibile, scegliere Visualizza > Barre degli strumenti > Documento. Viene visualizzata la barra degli strumenti Documento di Dreamweaver. Nell area di lavoro integrata, per impostazione predefinita la barra viene visualizzata nella parte superiore dell area del documento; nell area di lavoro mobile, viene visualizzata come parte della finestra Documento. Mostra vista Codice Mostra vista Struttura Titolo del documento Gestione file Anteprima/debug nel browser Riferimenti Vista Live Data Mostra viste Codice e Struttura Opzioni di visualizzazione Navigazione codice Aggiorna vista Design 98 Capitolo 5

99 2 Nella casella di testo Titolo, contenente la dicitura Documento senza titolo, digitare un titolo per la pagina, per esempio Global Car Rental Home Page. Quindi premere Invio per aggiornare il titolo della pagina nella barra del titolo della finestra Documento. 3 Salvare il documento. Aggiunta di testo formattato È possibile digitare testo nella finestra Documento, oppure copiarlo da un altra fonte (come un file di Microsoft Word) e incollarlo. Per ulteriori informazioni, vedere la sezione seguente. È quindi possibile formattare il testo mediante il pannello Stili CSS (vedere Aggiunta di stili al testo a pagina 100). Prima di inserire il testo, accertarsi che sia impostata la vista Struttura scegliendo Visualizza > Struttura. Aggiunta di testo Durante l'inserimento e la formattazione del testo nella vista Struttura, Dreamweaver crea il codice HTML corrispondente. Per digitare direttamente il codice, usare la vista Codice. Per ulteriori informazioni sulla vista Codice, in Dreamweaver scegliere? > Uso di Dreamweaver > Modifica del codice in Dreamweaver. Le pagine predefinite fornite con Dreamweaver contengono il testo segnaposto Lorem ipsum ; se la pagina creata si basa su un modello predefinito, sarà necessario sostituire il testo segnaposto con il testo desiderato nella fase di aggiunta del contenuto. Può essere utile lasciare il testo segnaposto fino al termine delle fasi di progettazione e impostazione del layout, in modo da poter esaminare il layout senza essere distratti dal testo. Per aggiungere testo alla pagina: 1 Fare triplo clic sul testo segnaposto in grassetto nella parte superiore della colonna sinistra (sotto il segnaposto immagine) per selezionare l intero paragrafo in grassetto. 2 Digitare Safety Tips (o un'intestazione a piacere). 3 Selezionare i tre paragrafi di testo segnaposto al di sotto del filetto orizzontale. 4 Digitare il testo che segue (o un testo a piacere): The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch! 5 Nella colonna di destra, fare triplo clic sulla parola News, quindi digitare Globe-Trotter Promotions per sostituirla. Esercitazioni di Dreamweaver MX 99

100 6 Nel pannello Sito, individuare il file promotions.txt nella cartella Assets. Fare doppio clic sull icona del file per aprirlo. Questo file contiene una copia delle promozioni speciali di Global Car Rentals. Nota: In questo sito di esempio, il file contenente la copia è un file di testo. In altri casi, potrebbero essere disponibili documenti HTML generati con Microsoft Word, che è possibile importare, ottimizzandone il codice tramite il comando Importa HTML di Word di Dreamweaver. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver. Il file di testo viene visualizzato in una nuova finestra Documento con una barra scura lungo il lato sinistro. Questa finestra è in vista Codice; non è possibile passare alla vista Struttura poiché non si tratta di un file HTML. Nota: È eventualmente possibile usare un testo a piacere invece di quello fornito. 7 Nella finestra Documento promotions.txt, premere Ctrl+A (Windows) o Comando+A (Macintosh) per selezionare tutto il testo, quindi scegliere Modifica > Copia per copiare il testo. 8 Nella finestra Documento index.htm, selezionare tutto il testo segnaposto nella cella inferiore della colonna di destra, quindi scegliere Modifica > Incolla. Il testo viene incollato nella tabella 9 Fare clic subito prima della parola Rent (il secondo paragrafo del testo appena incollato), quindi scegliere Inserisci > Filetto orizzontale per inserire una linea orizzontale tra le due promozioni. 10 Salvare il documento. 11 Passare al file promotions.txt. Chiuderlo scegliendo File > Chiudi. Aggiunta di stili al testo Vi sono diversi modi per applicare uno stile al testo in HTML. È possibile per esempio usare i CSS (Cascading Style Sheets) per associare una formattazione specifica a specifici tag HTML. Questa lezione illustra come creare un semplice foglio di stile CSS da un foglio di stile predefinito, applicando quindi il nuovo foglio di stile al testo e modificandone gli stili. Per creare un foglio di stile CSS: 1 Scegliere File > Nuovo. 2 Nella finestra di dialogo Nuovo documento, selezionare la categoria Fogli di stile CSS dall elenco delle categorie a sinistra. Il nome della colonna centrale della finestra di dialogo viene modificato in Fogli di stile CSS. Viene visualizzato un elenco di fogli di stile predefiniti. 100 Capitolo 5

101 3 Dall elenco Fogli di stile CSS, selezionare un foglio di stile. Per il sito Global Car Rental, selezionare Base: Verdana, che ridefinisce i tag body, td e th specificandone il tipo di carattere. Quindi fare clic su Crea. In Dreamweaver viene creato un nuovo file di testo contenente un piccolo gruppo di stili CSS predefiniti. 4 Scegliere File > Salva per salvare il nuovo file CSS. Salvarlo nella cartella Assets del sito; assegnare al file il nome testo.css (o qualsiasi altro nome). 5 Scegliere File > Chiudi per chiudere il file CSS. Per formattare il testo usando gli stili CSS: 1 Dal menu Finestra scegliere un file HTML (come index.htm). Nota: Se tra le preferenze di sistema è impostata la non visualizzazione delle estensioni dei file, il file index.htm viene visualizzato nel menu Finestra con il nome index. 2 Per visualizzare il pannello Stili CSS, scegliere Finestra > Stili CSS. 3 Nella parte superiore del pannello Stili CSS, fare clic sul pulsante di scelta Modifica stili per visualizzare gli stili disponibili. Se in precedenza non si sono definiti stili per questo documento, non vi sono stili disponibili. 4 Nella parte inferiore del pannello Stili CSS, fare clic sul pulsante Associa foglio di stile. Viene visualizzata la finestra di dialogo Collega foglio di stile esterno. 5 Nella finestra di dialogo Collega foglio di stile esterno, fare clic su Sfoglia per ricercare un foglio di stile. 6 Nella finestra di dialogo Seleziona file foglio di stile, ricercare e selezionare il nuovo foglio di stile creato nella cartella Assets, quindi fare clic su OK (Windows) o Scegli (Macintosh) per associare il foglio di stile. Esercitazioni di Dreamweaver MX 101

102 7 Nella finestra di dialogo Collega foglio di stile esterno, fare clic su OK per associare il foglio di stile. Il nome e il contenuto del foglio di stile appaiono nel pannello Stili CSS. Gli stili definiti nel foglio di stile vengono applicati al testo nel documento HTML. Per esempio, il corpo del testo viene visualizzato in Verdana. 8 Salvare il documento. Per modificare gli stili nel foglio di stile: 1 Nella parte superiore del pannello Stili CSS, fare clic sul pulsante di scelta Modifica stili per visualizzare gli stili disponibili. 2 Selezionare il nome del file CSS nel pannello Stili CSS, quindi fare clic sul pulsante Modifica fogli di stile nella parte inferiore del pannello Stili CSS. Viene visualizzata una finestra di dialogo contenente i nomi degli stili del foglio di stile. 3 Selezionare uno degli stili (per esempio body), quindi fare clic su Modifica. Viene visualizzata la finestra di dialogo Definizione stile CSS. 4 Digitare una dimensione per il testo, per esempio 13 pixel. Regolare a piacere le altre opzioni. 5 Fare clic su OK per ridefinire lo stile. 6 Modificare gli altri stili. Per creare gli stili usati nel sito Global Car Rental, impostare una dimensione di 13 pixel per gli stili body, td e th. 7 Terminata l'operazione di modifica degli stili, fare clic sul pulsante Salva per salvare le modifiche e chiudere la finestra di dialogo del foglio di stile. Gli stili modificati vengono applicati al documento. Per esempio, il corpo del testo viene visualizzato in Verdana da 13-pixel. 102 Capitolo 5

103 Aggiunta di immagini In questa lezione verrà illustrato come aggiungere immagini a una pagina. Se si dispone di immagini proprie, è possibile usarle; tuttavia, durante il primo tentativo di aggiunta di un immagine, si consiglia di usare una delle immagini fornite insieme al sito di esempio di Dreamweaver. Se non si è già seguita la procedura descritta in Aggiunta di risorse al proprio sito a pagina 90 per copiare le risorse del sito Global Car Rental nella cartella principale locale del proprio sito, farlo ora. Per aggiungere un immagine al documento: 1 Salvare il documento, se non lo si è già fatto. È possibile inserire un immagine in un documento non salvato; in tal caso verrà visualizzata una finestra di dialogo, per indicare che l URL usato per l immagine sarà l intero percorso locale dell immagine. Se si adotta questa procedura, Dreamweaver corregge gli URL nel momento in cui il documento viene salvato; è comunque più semplice salvare il documento prima di aggiungere le immagini. 2 Per sostituire un immagine a un segnaposto immagine esistente, fare doppio clic sul segnaposto. Per inserire per esempio il logo aziendale nella parte superiore sinistra della pagina Global Car Rental, fare doppio clic sul segnaposto denominato immagine (100 x 50). Viene visualizzata la finestra di dialogo Seleziona file di origine immagine. 3 Nella parte inferiore della finestra di dialogo, accertarsi che il menu a comparsa Relativo a sia impostato su Documento. Per ulteriori informazioni sugli URL relativi a un documento e relativi alla cartella principale, in Dreamweaver MX scegliere? > Uso di Dreamweaver. 4 Individuare un immagine nella cartella Assets (per esempio, logo.jpg). 5 Fare clic su OK o Seleziona (Windows) oppure Apri o Scegli (Macintosh) per inserire l immagine. Nella finestra Documento, l immagine viene visualizzata nella posizione del segnaposto. 6 Fare clic sul segnaposto immagine più grande creato in Aggiunta di un segnaposto immagine a pagina 96 per selezionarlo. Non fare doppio clic. È possibile adottare la procedura appena descritta per sostituire anche questo segnaposto con un immagine, ma esiste un metodo alternativo. 7 Accertarsi che il pannello Sito e la finestra di ispezione Proprietà siano entrambi visibili (in caso contrario scegliere Finestra > File del sito e Finestra > Proprietà). Esercitazioni di Dreamweaver MX 103

104 8 Nella finestra di ispezione Proprietà, trascinare il mouse dall icona Scegli file della casella di testo Orig nel pannello Sito. Accertarsi di iniziare il trascinamento dall icona Scegli file accanto alla casella di testo Orig, non da quella accanto alla casella di testo Collegamento. Se la cartella Assets è chiusa, spostare il cursore sulla cartella tenendo premuto il pulsante del mouse per aprire la cartella. Continuando a tenere premuto il pulsante del mouse, spostare il cursore sulla cartella Images e aprirla. Continuare a tenere premuto il pulsante del mouse finché il puntatore non si trova sul file vintage.jpg. Rilasciare il pulsante del mouse per selezionare vintage.jpg. Nella finestra Documento, l immagine viene visualizzata nella posizione del segnaposto. Se viene non visualizzata l immagine desiderata, controllare il nome del file nella casella di testo Orig; se era stato selezionato il file errato, ripetere il trascinamento dell icona Scegli-file. 9 Per inserire le immagini in assenza di segnaposto, fare clic in vista Struttura dove si desidera inserire l immagine, quindi scegliere Inserisci > Immagine. Se si inserisce un file immagine che non si trova all interno della cartella principale locale del sito, in Dreamweaver è possibile copiare automaticamente l immagine nel sito. 10 Salvare il documento. Impostazione dei colori di sfondo Nelle pagine predefinite fornite con Dreamweaver, i colori di sfondo delle celle delle tabelle sono per lo più impostati sul grigio; per la maggior parte dei siti, sarà necessario cambiare i colori per armonizzarli con lo schema dei colori del sito. Per impostare il colore di sfondo di una cella di tabella: 1 Se la finestra di ispezione Proprietà non è già aperta, scegliere Finestra > Proprietà per aprirla. 2 Se la finestra di ispezione Proprietà è compressa (è visibile solo la barra del titolo), fare clic sulla freccia nella barra del titolo per espanderla. 3 Se nella finestra di ispezione Proprietà non sono visibili tutte le proprietà, fare clic sulla freccia nell angolo inferiore destro per visualizzarle. 4 Fare clic su una cella tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh) per selezionarla. Nella pagina Global Car Rental, per esempio, fare clic sulla cella contenente l immagine del logo aziendale dell autonoleggio tenendo premuto il tasto Ctrl o Comando. Nella metà inferiore della finestra di ispezione Proprietà vengono visualizzate le proprietà della cella. Se la parte inferiore della finestra di ispezione Proprietà non è visibile, fare clic sulla freccia nell angolo inferiore destro della finestra di ispezione per visualizzare tutte le proprietà. 104 Capitolo 5

105 5 Nella finestra di ispezione Proprietà, fare clic sul pulsante Colore di sfondo accanto all'etichetta Sf più in basso. Viene visualizzata il selettore colore e il puntatore prende la forma di un contagocce. 6 Selezionare un colore. È possibile selezionare un colore nella tavolozza del selettore colore, oppure fare clic in qualsiasi punto dello schermo per selezionarne il colore. Per esempio, fare clic sullo sfondo del logo Global per uniformare il colore di sfondo della cella a quello dell immagine. Il colore di sfondo della cella assume il colore selezionato. 7 Ripetere la procedura per ciascuna cella di cui si desidera modificare il colore di sfondo. Nella pagina Global Car Rental, modificare il colore di sfondo di tutte le celle della barra di navigazione e della cella di intestazione nella seconda colonna di testo (la cella che contiene il testo Globe-Trotter Promotions ), per uniformarle al colore di sfondo del logo Global. 8 Salvare il documento. Visualizzazione del codice È ora possibile esaminare brevemente le operazioni eseguite automaticamente in Dreamweaver quando si aggiungono contenuti a una pagina. Durante l'aggiunta di testo, immagini e altri contenuti, in Dreamweaver viene generato il corrispondente codice HTML. In Dreamweaver è possibile visualizzare il documento in due modi: in vista Struttura, in cui il documento ha un aspetto molto simile a come apparirà nel browser, e in vista Codice, che mostra il codice HTML sottostante. È anche possibile usare una vista combinata delle due precedenti. Esercitazioni di Dreamweaver MX 105

106 Per visualizzare il codice HTML del documento: 1 Se la barra degli strumenti Documento non è visibile, scegliere Visualizza > Barre degli strumenti > Documento. 2 Nella barra degli strumenti Documento, fare clic sul pulsante Mostra viste Codice e Struttura La finestra si suddivide in due parti, mostrando il codice di origine HTML. È possibile modificare il codice in vista Codice. Le modifiche apportate al codice non compaiono nella vista Struttura finché non si aggiorna la vista. Per far sì che le modifiche apportate al codice si riflettano sulla vista Struttura, effettuare una delle seguenti operazioni: Fare clic in un punto qualsiasi in vista Struttura. Fare clic sul pulsante Aggiorna nella barra degli strumenti Documento. Dreamweaver offre molte funzioni avanzate che agevolano l immissione del codice in vista Codice; per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Modifica del codice in Dreamweaver. Durante la modifica delle pagine, è possibile usare la vista preferita. Per il resto di questa esercitazione si ipotizzerà l uso della vista Struttura. Per visualizzare soltanto la vista Struttura: 1 Se la barra degli strumenti Documento non è visibile, scegliere Visualizza > Barre degli strumenti > Documento. 2 Nella barra degli strumenti Documento, fare clic sul pulsante Vista Struttura. 106 Capitolo 5

107 Creazione di una seconda pagina In questa lezione verrà illustrata la creazione di una seconda pagina per il proprio sito; nella lezione successiva, Aggiunta di collegamenti testuali tra le pagine a pagina 108, verrà illustrato come creare collegamenti tra le pagine. Per la creazione di una seconda pagina è possibile usare diversi metodi. In questa lezione, la seconda pagina verrà creata facendo una copia della prima, in modo che il layout sia lo stesso per entrambe. Nota: Se invece si desidera creare un proprio layout da zero, usare gli strumenti di modifica delle tabelle di Dreamweaver o la vista Layout. Il layout può anche contenere fotogrammi e livelli, che tuttavia non sono illustrati nel corso della lezione. In un sito più complesso, l'uso di un modello rappresenta il modo migliore per assicurare che il layout sia lo stesso per tutte le pagine. Per ulteriori indicazioni bibliografiche sulla modifica delle tabelle, sulla vista Layout, sui fotogrammi, sui livelli e sui modelli, vedere Ulteriori informazioni a pagina 113. La seconda pagina da creare nel sito Global Car Rental è relativa all assistenza clienti. Per creare la pagina dell assistenza clienti verrà fatta una copia della pagina principale (index.htm), eliminandone i contenuti superflui e quindi aggiungendo contenuti nuovi. Per ulteriori informazioni sull aggiunta e sulla formattazione di testo, vedere Aggiunta di testo formattato a pagina 99. Per creare una copia della prima pagina (index.htm): 1 Nel pannello Sito, fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sul nome del file della prima pagina creata, index.htm (o qualunque nome si sia assegnato alla pagina). 2 Dal menu di scelta rapida, scegliere Duplica. Viene visualizzata una copia del file. Suggerimento: Se la copia non viene visualizzata immediatamente, fare clic sul pulsante Aggiorna nel pannello Sito. 3 Selezionare il nuovo file duplicato. Attendere qualche secondo, quindi fare nuovamente clic per rendere modificabile il nome del file; si tratta della stessa tecnica usata in Esplora Risorse di Windows e nel Finder di Macintosh. 4 Assegnare un nuovo nome al file appena creato, per esempio customerservice.htm. Per rimuovere i contenuti non necessari dalla nuova pagina: 1 Aprire la nuova pagina facendo doppio clic sul file nel pannello Sito. Controllare la barra del titolo della finestra Documento per accertarsi che il file sia effettivamente customerservice.htm. Nella barra del titolo deve comparire la dicitura Global Car Rental Home Page, seguita dal nome di una cartella e dal nome del file, che sarà in questo caso customerserve.htm, o il nome assegnato al file nel corso della procedura precedente. 2 Nella pagina customerservice.htm, fare clic sull'immagine più grande, che riproduce l automobile nella colonna di testo principale, per selezionarla. 3 Nel selettore di tag, fare clic sul tag <td>. Esercitazioni di Dreamweaver MX 107

108 4 Premere BACKSPACE (Windows) o Elimina (Macintosh). Tutto ciò che si trova nella cella, immagini e testo, viene eliminato. 5 Salvare il documento. Per aggiungere testo alla nuova pagina: 1 Nel pannello Sito, individuare il file custservinfo.htm nella cartella Assets. Fare doppio clic sull icona del file per aprirlo. Il contenuto del file va aggiunto alla pagina del servizio clienti. I contenuti da aggiungere sono predefiniti ai fini della lezione; nel caso di creazione di un vero sito, a questo punto verrebbero aggiunti i contenuti desiderati. 2 Nella finestra Documento del file custservinfo.htm, scegliere Visualizza > Codice per visualizzare il codice HTML. 3 Sempre nella finestra Documento del file custservinfo.htm, premere Ctrl+A o Comando+A (Macintosh) per selezionare l intero contenuto del file. Se non è attiva la vista Codice, potrebbe essere necessario premere ripetutamente Ctrl+A o Comando+A per selezionare l intero contenuto; se il punto di inserimento si trova all interno di una cella, scegliendo Seleziona tutto inizialmente viene selezionato solo il contenuto della cella. Per semplicità, passare alla vista Codice prima di effettuare la selezione. 4 Premere Ctrl+C (Windows) o Comando+C (Macintosh) per copiare l intero contenuto del file. 5 Tornare al documento customerservice.htm. Fare clic all interno della colonna di testo principale (la colonna larga sulla sinistra), che ora è vuota. 6 Scegliere Modifica > Incolla HTML. Il codice HTML copiato dal file custservinfo.htm viene incollato nel documento corrente. Scegliendo Modifica > Incolla anziché Modifica > Incolla HTML, il codice HTML viene incollato in vista Struttura come se si trattasse di testo normale. Se dopo questo passaggio il codice HTML viene visualizzato in vista Struttura, scegliere Modifica > Annulla e riprovare. Il foglio di stile testo.css è già associato alla pagina; pertanto il testo viene formattato automaticamente. Aggiunta di collegamenti testuali tra le pagine È possibile creare dei collegamenti in qualunque fase della creazione del sito. Se si stanno seguendo nell ordine le lezioni di questa guida, si sono già create le pagine e i contenuti; in questa lezione verrà spiegato come creare collegamenti tra le pagine. Di seguito vengono illustrati altri due metodi generali per la creazione di collegamenti in un sito: Creare una serie di pagine fittizie, collegarle tra loro e infine aggiungere dei contenuti. Durante la creazione di una pagina, specificare collegamenti a pagine non esistenti, che verranno create in seguito con i nomi di file indicati nei collegamenti. 108 Capitolo 5

109 Per creare un collegamento dalla pagina dell assistenza ai clienti a index.htm: 1 Passare alla pagina dell assistenza ai clienti, se non è già la pagina corrente. Se la pagina non è aperta, fare doppio clic sulla relativa icona nel pannello Sito. 2 Nella parte inferiore della colonna di testo più larga sul lato sinistro, selezionare le parole Home Page. Se alla colonna di sinistra della pagina non è stato aggiunto testo al momento della sua creazione, digitare le parole Home Page nella colonna di testo e selezionarle. 3 Se la finestra di ispezione Proprietà non è già aperta, scegliere Finestra > Proprietà per aprirla. 4 Fare clic sull icona della cartella accanto alla casella di testo Collegamento nella finestra di ispezione Proprietà. Individuare il file index.htm nella cartella principale locale del sito. Creazione di rollover per i collegamenti grafici Un rollover è un'immagine che si modifica quando un visitatore del sito posiziona il puntatore del mouse su di essa. È ad esempio possibile fare in modo che il pulsante su una pagina sembri illuminarsi quando il visitatore lo seleziona. Un immagine rollover è costituita da due immagini: quella visualizzata quando la pagina viene caricata nel browser e quella che appare quando si sposta il puntatore sull immagine originale. Nota: Quando si crea un rollover, accertarsi che le due immagini abbiano le stesse dimensioni. Per creare un rollover: 1 Passare alla pagina principale (index.htm), se non è già la pagina corrente. Se la pagina non è aperta, fare doppio clic sulla relativa icona nel pannello Sito. 2 Nella finestra del documento, spostare il punto di inserimento nella posizione in cui visualizzare l immagine rollover. Nella pagina principale Global Car Rental, per esempio, fare doppio clic sulla cella della barra di navigazione con la dicitura Lorem, quindi premere BACKSPACE (Windows) o Elimina (Macintosh) per eliminare il testo, lasciando il punto di inserimento all interno della cella. 3 Scegliere Inserisci > Immagini interattive >Immagine rollover. 4 Nella finestra di dialogo Inserisci immagine rollover digitare un nome per l immagine, per esempio ImmagineHopePage, nella casella di testo Nome immagine. In questo modo si assegna all immagine un nome univoco che la rende facilmente identificabile nel codice HTML. Esercitazioni di Dreamweaver MX 109

110 5 Nella casella di testo Immagine originale, fare clic su Sfoglia; quindi individuare il file btnhome.jpg nella cartella Images del sito, all interno della cartella Assets. Verificare che il menu a comparsa Relativo a, nella parte inferiore della finestra di dialogo, sia impostato su Documento, quindi fare clic su OK o Seleziona (Windows) o Apri o Scegli (Macintosh). La casella di testo Immagine originale indica l immagine da visualizzare quando la pagina viene caricata nel browser. 6 Nella casella di testo Immagine rollover, fare clic su Sfoglia; quindi ricercare btnhome_on.jpg nella cartella Images del sito. Verificare che il menu a comparsa Relativo a, nella parte inferiore della finestra di dialogo, sia impostato su Documento, quindi fare clic su OK o Seleziona (Windows) o Apri o Scegli (Macintosh). La casella di testo Immagine rollover indica l immagine da visualizzare quando il puntatore si sposta sull immagine nel browser. 7 Verificare che l opzione Pre-carica immagine di rollover sia selezionata, in modo che le immagini rollover vengano aperte nel browser insieme alla pagina e per garantire una transizione rapida tra le immagini quando l utente muove il puntatore sopra l immagine originale. 8 Nella casella di testo Dopo un clic, accedi all URL, fare clic sul pulsante Sfoglia e individuare il file index.htm. Index.htm è il file che si sta modificando; pertanto questo passaggio crea un collegamento tra l'immagine rollover e la pagina in cui la si vuol collocare. Può sembrare superfluo avere un collegamento alla stessa pagina in cui si trova il collegamento, ma la stessa serie di rollover di navigazione verrà usata anche su altre pagine, cosicché il collegamento consentirà ai visitatori di tornare alla pagina index.htm dalle altre pagine che contengono la stessa barra di navigazione. 9 Fare clic su OK per chiudere la finestra di dialogo. L immagine originale specificata viene visualizzata nel documento. 10 Salvare il documento. Nota: Le immagini di rollover non cambiano quando si passa il puntatore su di esse nella finestra Documento di Dreamweaver; le immagini di rollover funzionano solo in un browser. Per accertarsi che le immagini di rollover funzionino, è necessario visualizzare in anteprima il documento in un browser. Per ulteriori informazioni sulla visualizzazione in anteprima, vedere Anteprima nel browser a pagina 111. Per il sito Global Car Rental, creare altri due rollover nelle altre due celle della barra di navigazione (con la dicitura Ipsum e Dolor ): il primo userà le immagini btncustomer Service.jpg e btncustomerservice_on.jpg, e sarà collegato a customerservice.htm, mentre il secondo userà le immagini btnlocations.jpg e btnlocations_on.jpg, e sarà collegato a locations.htm. Si noti che il file locations.htm non è ancora stato creato; limitarsi a digitare il nome del file nella casella di testo Dopo un clic, accedi all URL nella finestra di dialogo Inserisci immagine di rollover. 110 Capitolo 5

111 Copia della barra di navigazione Dopo aver creato una barra di navigazione funzionante, è possibile riutilizzarla in tutte le pagine. In questa lezione verrà illustrato come copiare celle della barra di navigazione e come incollarle nella seconda pagina. Esistono vari altri modi di riutilizzare i contenuti all'interno di Dreamweaver, comprese le voci di libreria, i modelli e gli snippet. Per copiare la barra di navigazione in un altra pagina: 1 Nel file index.htm, fare clic nella cella che contiene l immagine rollover Home. 2 Nel selettore di tag, fare clic sul tag <tr> più a destra. Viene selezionata la riga della tabella contenente i tre rollover della barra di navigazione. 3 Scegliere Modifica > Copia. 4 Passare al file customerservice.htm. 5 Fare clic nella cella della barra di navigazione con la dicitura Lorem. 6 Nel selettore di tag, fare clic sul tag <tr> più a destra. 7 Scegliere Modifica > Incolla. Le immagini di rollover della barra di navigazione vengono incollate al posto delle celle esistenti. 8 Salvare il documento. Anteprima nel browser La vista Struttura da solo un idea approssimativa di quale sarà l aspetto della pagina nel browser; l'unico modo per essere sicuri dell aspetto della pagina è visualizzarla in anteprima in un browser. Ogni versione di ciascun browser presenta caratteristiche proprie; anche se in Dreamweaver il codice HTML tenta di riprodurre la pagina in modo il più possibile simile su tutti i browser, a volte le differenze sono inevitabili. È per questa ragione che in Dreamweaver non viene visualizzata direttamente un anteprima, in quanto è impossibile riprodurre i diversi comportamenti di ogni browser. L'opzione Anteprima nel browser mostra quale sarà l aspetto delle pagine dopo la pubblicazione. Per visualizzare in anteprima le pagine: 1 Passare a index.htm, se non è già il documento corrente. Se non è aperto, aprirlo ora. 2 Premere il tasto F12. Se non è già in esecuzione, viene avviato il browser primario. Viene visualizzata la pagina index.htm. Nota: In Dreamweaver il browser primario dovrebbe essere identificato automaticamente e utilizzato per l anteprima. Se l anteprima non viene visualizzata, o se il browser non è quello previsto, tornare a Dreamweaver (se necessario) e scegliere File > Anteprima nel browser > Modifica elenco browser. Nella finestra di dialogo Preferenze Anteprima nel browser, che viene visualizzata, aggiungere il browser corretto all elenco. Per ulteriori informazioni, fare clic sul pulsante? nella finestra di dialogo Preferenze. 3 Spostare il puntatore del mouse sulle immagini di rollover per verificarne le modifiche. Fare clic sui collegamenti per accertarsi che funzionino. Esercitazioni di Dreamweaver MX 111

112 Impostazione di un sito remoto e pubblicazione Si è così creato un sito Web piccolo ma funzionale. Il prossimo passaggio consiste nel pubblicarlo caricando i file su un server Web remoto. Prima di poter procedere, è necessario avere accesso a un server Web remoto (come il server dell ISP, o il server del cliente per cui si sta lavorando, o un server Intranet all interno dell azienda, oppure ancora un server IIS o PWS su un computer Windows). Se non si dispone già dell accesso a uno di questi server, contattare l ISP, il cliente o l amministratore di sistema. La seguente procedura funziona al meglio se la cartella principale remota è vuota. Se il sito remoto contiene già dei file, creare una cartella vuota nel sito remoto (sul server) e usarla come cartella principale remota. La procedura che segue presuppone che si sia creato un sito locale. Per ulteriori informazioni, vedere Impostazione di un sito locale a pagina 86. Per collegarsi a un sito remoto: 1 Scegliere Sito > Modifica siti. 2 Selezionare un sito, per esempio Global Car Rental, e fare clic su Modifica. 3 Fare clic sulla scheda Generali nella parte superiore della finestra di dialogo. 4 Le prime opzioni della scheda Generali sono già state definite quando si è configurato il sito locale, perciò fare clic su Avanti finché non viene evidenziato il passaggio Condivisione dei file nella parte superiore della procedura guidata. 5 Nel menu a comparsa con l'etichetta Come viene effettuata la connessione con il server remoto?, scegliere un metodo di collegamento al server remoto. Il metodo più comune per la connessione a un server su Internet è FTP, il metodo più comune per la connessione a un server su una intranet è Locale/rete. Se si hanno dei dubbi su quale sia il metodo corretto, consultare l amministratore di sistema del server. 112 Capitolo 5

113 6 Se si sceglie FTP, digitare le seguenti opzioni: Digitare il nome host del server (per esempio ftp.macromedia.com). Nella casella di testo relativa al nome della cartella contenente i file, digitare il percorso sul server dalla cartella principale FTP alla cartella principale del sito remoto. In caso di dubbi, rivolgersi all amministratore di sistema. In molti casi è preferibile lasciare vuota questa casella. Digitare il nome utente e la password nelle relative caselle di testo, quindi fare clic su Connessione di prova. Se la connessione non riesce, rivolgersi all amministratore di sistema. 7 Se si sceglie Locale/Rete, fare clic sull icona della cartella accanto alla casella di testo e individuare la cartella principale del sito remoto. 8 Fare clic su Avanti. 9 Non abilitare il deposito e il ritiro dei file per questo sito. Se si sta lavorando a un sito di maggiori dimensioni insieme ad altri, la funzione di deposito e ritiro dei file evita di sovrascrivere i file di altri. Per questo sito, tuttavia, tale funzione non è necessaria. 10 Fare clic su Avanti. 11 Fare clic su Fine per terminare l impostazione del sito remoto. 12 Fare nuovamente clic su Fine per terminare la modifica del sito. Per caricare le pagine su un server remoto: 1 Nel pannello Sito, selezionare la cartella principale locale del sito. 2 Fare clic sul pulsante Carica file. Tutti i file del sito vengono caricati sul sito remoto. 3 Aprire il sito remoto in un browser per accertarsi che il caricamento sia avvenuto completamente e in modo corretto. Ulteriori informazioni Dreamweaver è un applicazione complessa, con decine di potenti funzioni. Questa esercitazione ne illustra solo gli aspetti fondamentali. Per ulteriori informazioni sugli argomenti trattati in questa esercitazione, in Dreamweaver selezionare? > Uso di Dreamweaver. Questa esercitazione verte sull uso della vista Struttura per la creazione di un sito statico. Per ulteriori informazioni sulla vista Codice e sull inserimento manuale del codice in Dreamweaver, vedere Dreamweaver Esercitazione 2: Modifica del codice a pagina 114. Per informazioni generali sulla creazione di un applicazione Web basata su un database, vedere Dreamweaver Esercitazione 3: Creazione di un applicazione Web a pagina 124. Esercitazioni di Dreamweaver MX 113

114 Dreamweaver Esercitazione 2: Modifica del codice Mentre gli sviluppatori Web possono beneficiare dei ricchi strumenti visivi offerti da Macromedia Dreamweaver MX, molti usano anche gli strumenti di immissione del codice per completare il lavoro. Dreamweaver MX dispone di molte nuove funzioni per offrire agli sviluppatori l ambiente professionale di inserimento del codice di cui hanno bisogno. Questa esercitazione esamina brevemente il nuovo ambiente professionale di inserimento del codice di Dreamweaver MX. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Inserimento del codice in Dreamweaver. Passaggio all area di lavoro per l inserimento del codice Se non lo si è già fatto durante l installazione, è possibile uniformare l aspetto dell area di lavoro a quello di diffusissimi ambienti per l immissione di codice come Macromedia Home Site e Macromedia ColdFusion Studio. Nota: Per gli utenti Macintosh non è possibile modificare l area di lavoro. Per adottare la nuova area di lavoro: 1 Scegliere Modifica > Preferenze, quindi scegliere Generali dall elenco di categorie a sinistra. Viene visualizzata la categoria Generali. 114 Capitolo 5

115 2 Fare clic sul pulsante Cambia area di lavoro. Viene visualizzata la finestra di dialogo Configurazione area di lavoro. 3 Selezionare l opzione Area di lavoro di Dreamweaver MX, quindi l opzione HomeSite/Stilecodifica. 4 Fare clic su OK due volte per chiudere la finestra di dialogo Preferenze. 5 Chiudere Dreamweaver, quindi riavviarlo. Copia di una cartella nel sito Prima di iniziare le lezioni, è necessario impostare un sito e copiare una cartella al suo interno. La funzione di gestione file integrata nel pannello Sito consente di esaminare il contenuto del disco locale e della rete. Tale funzione può essere utile quando si lavora con file che non si trovano nel sito correntemente visualizzato nel pannello Sito. Per copiare le pagine sul sito: 1 Se il pannello Sito non è già aperto, scegliere Finestra > Sito per aprirlo. 2 Nel pannello Sito, dal menu a comparsa Sito selezionare il nome del sito definito nel corso della prima esercitazione di questo capitolo. Se non si è ancora definito un sito, vedere Impostazione di un sito locale a pagina 86. Prima di continuare è necessario definire un sito. Quando si seleziona il nome del sito dal menu a comparsa, Dreamweaver visualizza i file del sito. 3 Espandere l icona Desktop (Windows) o Computer (Macintosh) per visualizzare i dischi disponibili. 4 Espandere le cartelle fino a giungere alla cartella dell applicazione di Dreamweaver, quindi espandere la cartella Samples. 5 Nella cartella Samples, espandere la cartella GettingStarted, quindi selezionare la cartella Code e premere Ctrl+C (Windows) o Comando+C (Macintosh) per copiarla. 6 Tornare in cima al pannello Sito, quindi selezionare la cartella del sito. 7 Premere Ctrl+V (Windows) o Comando+V (Macintosh) per incollare una copia della cartella nel sito. Esercitazioni di Dreamweaver MX 115

116 Visualizzazione delle pagine completate Prima di iniziare, è possibile visualizzare le pagine completate per controllarne l aspetto. Naturalmente, le pagine possono essere diverse. Per visualizzare le pagine completate: 1 Se il pannello Sito non è già aperto, scegliere Finestra > Sito per aprirlo. 2 Espandere l icona Desktop (Windows) o Computer (Macintosh) per visualizzare i dischi disponibili. 3 Espandere le cartelle fino a giungere alla cartella dell applicazione di Dreamweaver, quindi espandere la cartella Samples. 4 Nella cartella Samples, espandere la cartella GettingStarted, quindi espandere la cartella FinalSite. 5 Nella cartella FinalSite, fare doppio clic su index.html per aprirlo, quindi fare doppio clic su location_comp.htm. DreamweaverLe pagine vengono visualizzate nella finestra Documento. 6 Al termine chiudere il browser. Apertura di più pagine Usare il pannello Sito per aprire le pagine necessarie per questa lezione. Per aprire le pagine: 1 Se il pannello Sito non è già aperto, scegliere Finestra > Sito per aprirlo. 2 Nel sito, espandere la cartella Code. 3 Fare doppio clic su index.htm per aprirlo, quindi fare doppio clic su location_start.htm. Sono questi i due file necessari per questa lezione. 4 Nella finestra Documento, fare clic sul pulsante Mostra vista Codice. 5 Per passare rapidamente da una pagina all altra, premere Ctrl + Tab o fare clic sul simbolo della tabulazione nella parte inferiore della pagina (solo Windows) Nota: È necessario ingrandire la pagina per vedere le schede. 116 Capitolo 5

117 Aggiunta di un immagine mediante trascinamento In questa lezione verrà illustrato come aggiungere alla pagina principale un pulsante per la pagina Locations, simili ai pulsanti per le pagine Home e Customer Service. È possibile digitare il codice direttamente sulla pagina, fare clic sull icona dell immagine nella barra Inserisci, oppure usare l editor di tag immagine (IMG); selezionare l immagine, fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl in Macintosh, quindi scegliere Modifica tag. È anche possibile trascinare l immagine dalla sua cartella. Per aggiungere un immagine trascinandola: 1 Aprire index.htm in vista Codice, se non è già aperto. 2 Nel gruppo di pannelli Files, aprire il pannello Risorse (Finestra > Risorse). 3 Selezionare il file di immagine btnlocations.jpg. 4 Trascinare il file di immagine sul codice relativo alla terza cella della prima tabella. Suggerimento: Cercare il codice relativo ai pulsanti Home e Customer Service. Rilasciare l immagine Locations prima del tag /td di chiusura della cella della tabella che segue le due celle dei pulsanti. Dreamweaver inserisce nel punto di inserimento il codice per la creazione dell immagine. 5 Scegliere File > Salva. Aggiunta di un collegamento con il Selettore tag Verrà ora illustrato come collegare il pulsante alla pagina Locations. Oltre a digitare manualmente il codice per un collegamento e a usare la barra Inserisci per aggiungere un collegamento, è possibile usare il Selettore tag. Per scrivere il codice con l aiuto del Selettore tag: 1 Aprire index.htm in vista Codice, se non è già aperto. 2 Nel codice per la prima tabella, individuare e selezionare il codice relativo al pulsante Location inserito nell ultima sezione. Nota: Accertarsi di evidenziare l intero tag <img>. 3 Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sul testo selezionato e scegliere Inserisci tag dal menu a comparsa. Viene aperto il Selettore tag. 4 Scegliere Tag HTML, Elementi di pagina, Generali, quindi selezionare A nel riquadro di destra. Nota: È anche possibile scegliere Tag HTML e selezionare direttamente il tag A nel riquadro di destra, senza selezionare prima Elementi di pagina e Generali. Esercitazioni di Dreamweaver MX 117

118 5 Fare clic su Inserisci. Viene visualizzato un editor di tag per il tag di ancoraggio (<a>). 6 Nella casella di testo HREF, digitare location_start.htm oppure fare clic sul pulsante Sfoglia per individuare il file. Nota: Se si desidera creare un collegamento a una pagina Web, digitare l URL della pagina. 7 Fare clic su OK per chiudere l editor di tag. 8 Fare clic su Chiudi per chiudere il Selettore tag. Dreamweaver inserisce nella pagina il codice necessario per la creazione del collegamento. 9 Nella finestra Documento, scegliere File > Salva. 118 Capitolo 5

119 Modifica di un tag La finestra di ispezione Tag verrà ora usata per trovare un tag specifico nella pagina Locations e modificarlo rapidamente. Per modificare un tag usando la finestra di ispezione Tag: 1 Aprire location_start.htm in vista Codice, se non è già aperto. 2 Eseguire una delle seguenti operazioni per aprire la finestra di ispezione Tag, se non è già aperta: Scegliere Finestra > Finestra di ispezione Tag. Nel gruppo di pannelli Codice, fare clic sulla scheda Finestra di ispezione Tag. La finestra di ispezione Tag mostra una rappresentazione strutturata di tutti i tag della pagina. Visualizza inoltre gli attributi di ciascun tag. 3 Nella finestra Documento in vista Codice, individuare il testo relativo all intestazione Rental Locations. 4 Selezionare lo spazio unificatore ( ) tra i tag di paragrafo che seguono l intestazione: <p><font SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p> <p> </p> Esercitazioni di Dreamweaver MX 119

120 5 Scegliere Inserisci > Tabella, quindi fare clic su OK nella finestra di dialogo Inserisci tabella per accettare i valori predefiniti. Dreamweaver inserisce il codice relativo alla tabella. 6 Fare clic sul pulsante Aggiorna sulla barra degli strumenti. La finestra di ispezione Tag viene aggiornata e viene evidenziato il tag di tabella appena inserito. Al di sotto del tag viene visualizzato un elenco di attributi. 7 Nella finestra Documento, fare clic su alcuni tag differenti per vedere come cambiano i tag e gli attributi visualizzati nella finestra di ispezione Tag, quindi fare nuovamente clic sul tag di tabella in modo che i suoi attributi vengano nuovamente visualizzati nella finestra di ispezione Tag. 8 Nel pannello della finestra di ispezione Tag, fare clic nella casella di testo vuota accanto all attributo align. Viene visualizzata la freccia di un menu a comparsa. 9 Fare clic sulla freccia del menu a comparsa, quindi scegliere Centro Il codice nella finestra Documento cambia. 10 Fare clic sul pulsante Mostra vista Struttura sulla barra degli strumenti o scegliere Vista > Struttura per visualizzare la tabella. 11 Nella finestra Documento, scegliere File > Salva. Ricerca di informazioni relative a un tag Per informazioni sugli attributi di un tag e sui valori degli attributi, è possibile fare riferimento a Dreamweaver. Per ricercare le informazioni relative a un tag: 1 Aprire location_start.htm in vista Codice, se non è già aperto. 2 Nella finestra Documento, selezionare il testo bgcolor nel tag body. 3 Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sul testo selezionato e scegliere Riferimenti dal menu a comparsa. Si apre il pannello Riferimenti, contenente le informazioni sull attributo bgcolor. Nota: È anche possibile scegliere Finestra > Riferimenti per accedere al pannello Riferimenti. Tale pannello è integrato nell ambiente di sviluppo, nel gruppo di pannelli Codice. 120 Capitolo 5

121 4 Per informazioni su uno specifico attributo del tag, selezionarlo dal menu a comparsa. Aggiunta di un'immagine mediante i Suggerimenti per il codice In questa lezione verrà illustrato come aggiungere un logo alla pagina Locations. Per aggiungere manualmente il codice alla pagina, è sufficiente fare clic nella finestra Documento e iniziare a digitare. È anche possibile usare la nuova funzione Suggerimenti per il codice di Dreamweaver per velocizzare il lavoro. Per scrivere il codice con l aiuto dei Suggerimenti per il codice: 1 Aprire location_start.htm in vista Codice, se non è già aperto. 2 Individuare il codice relativo alla riga della tabella che contiene il testo The International Car Rental Specialists, selezionare lo spazio unificatore ( ) nel codice relativo alla cella che precede il testo: <td rowspan="2" bgcolor="#424973"> </td> 3 Digitare la parentesi di apertura (<) del tag di immagine. Nel punto di inserimento viene visualizzato un elenco di tag. Nota: È possibile impostare la lunghezza del ritardo selezionando Modifica > Preferenze oppure Dreamweaver > Preferenze (Mac OS X), quindi selezionando Suggerimenti per il codice dall elenco delle categorie a sinistra. Per visualizzare i Suggerimenti per il codice premere la barra spaziatrice; per chiudere i Suggerimenti, premere il tasto Esc. 4 Selezionare il tag img dall elenco, quindi premere Invio per inserire il tag. Suggerimento: Per passare rapidamente a un tag, digitarne la prima lettera. 5 Premere la barra spaziatrice per visualizzare un elenco degli attributi del tag. 6 Digitare src, quindi premere Invio. Al di sotto del codice appena inserito viene visualizzato un pulsante Sfoglia. Esercitazioni di Dreamweaver MX 121

122 7 Fare clic sul pulsante Sfoglia per ricercare il file di immagine, oppure digitarne il percorso (Assets/images/logo.jpg). 8 Premere la barra spaziatrice, selezionare l attributo alt, quindi premere Invio. 9 Digitare Logo, quindi spostare il cursore alla destra delle virgolette che seguono la parola Logo. 10 Premere la barra spaziatrice, selezionare l attributo align, quindi premere Invio. Viene visualizzata una lista di valori noti per l attributo align. 11 Selezionare top dall elenco, quindi premere Invio. 12 Digitare una parentesi di chiusura (>) per completare il tag. 13 Nella finestra Documento, scegliere File > Salva. Per aggiungere un attributo a un tag esistente, collocare il punto di inserimento subito prima della parentesi di chiusura del tag (>), quindi premere la barra spaziatrice. Verrà visualizzato un elenco di attributi. Aggiungere l attributo e specificarne l'eventuale valore. Controllo delle modifiche Dopo aver modificato il codice, è possibile verificare immediatamente il risultato delle modifiche. Per ottenere una rappresentazione visiva del codice, effettuare una delle seguenti operazioni: Fare clic sul pulsante Mostra vista Struttura sulla barra degli strumenti o selezionare Visualizza > Struttura. Visualizzare la pagina in un browser Web premendo F12. Per chiudere il browser e tornare al codice, premere Alt-F4 (solo Windows). Aggiunta di un collegamento tramite la barra Inserisci Verrà ora illustrato come aggiungere un collegamento all immagine del logo inserita, in modo che l home page venga visualizzata al clic dell'utente. Per creare il collegamento è possibile semplicemente collocare un tag di ancoraggio (<a>) intorno al tag di immagine nel codice e impostare gli attributi del tag di ancoraggio, eventualmente con l aiuto dei Suggerimenti per il codice. Un altro modo per aggiungere il collegamento è usare la barra Inserisci. Per scrivere il codice con l aiuto della barra Inserisci: 1 Aprire location_start.htm in vista Codice, se non è già aperto. 2 Evidenziare il codice relativo all immagine logo.jpg inserita Nota: Accertarsi di evidenziare l intero tag <img>. 122 Capitolo 5

123 3 Nella scheda Comuni della barra Inserisci, fare clic sul pulsante Collegamento ipertestuale. Viene visualizzata la finestra di dialogo Collegamento ipertestuale con il tag di immagine già inserito. 4 Nella casella di testo Collegamento, digitare index.htm o fare clic sull icona della cartella per individuarlo. Nota: Per creare un collegamento a una pagina Web, digitare l URL della pagina. 5 Fare clic su OK. Nella pagina viene inserito automaticamente il codice necessario per la creazione del collegamento intorno all immagine. 6 Scegliere File > Salva. Stampa del codice È possibile stampare il codice per modificarlo offline, archiviarlo o distribuirlo. Per stampare il codice: 1 Aprire una pagina in vista Codice. 2 Scegliere File > Stampa codice. Suggerimento: Per stampare anche i numeri di riga, scegliere Visualizza > Opzioni vista codice > Numeri di riga prima di stampare. Ulteriori informazioni Per informazioni sulle funzioni di inserimento manuale del codice di Dreamweaver e sull accesso al codice mentre si lavora nell ambiente di progettazione visiva, in Dreamweaver scegliere? > Uso di Dreamweaver. Esercitazioni di Dreamweaver MX 123

124 Dreamweaver Esercitazione 3: Creazione di un applicazione Web La presente esercitazione mostra come usare Macromedia Dreamweaver MX per iniziare rapidamente lo sviluppo di applicazioni Web dinamiche basate su database. Un aspetto interessante delle applicazioni Web dinamiche è la possibilità di presentare in formato Web i dati contenuti in un database. Nel corso di questa lezione verrà spiegato come integrare nel proprio sito le informazioni contenute in un database. Verranno sviluppate delle applicazioni Web per il sito Global Car Rental, usando un database esistente contenente tre tabelle di dati Locations, Comments e Regions. Verrà inoltre usato Dreamweaver per creare una semplice query SQL per estrarre i dati dal database. In questa lezione, verranno create le seguenti pagine dinamiche: Una pagina di inserimento che consentirà ai visitatori del sito di inviare commenti all azienda Una pagina di dettaglio che elencherà i commenti del cliente e le relative informazioni di contatto Prima di iniziare Prima di eseguire questa esercitazione, è necessario aver completato le operazioni di configurazione elencate nella sezione che segue, in modo da poter lavorare con le pagine ColdFusion di esempio fornite insieme a Dreamweaver MX. Gli elenchi di verifica dell impostazione illustreranno il processo di installazione e configurazione di un server Web e di ColdFusion MX Server Developer Edition, contenuti nel CD-ROM di Macromedia Studio MX (solo versione Windows). È anche possibile scaricare la Developer Edition dal sito Queste procedure descrivono uno dei possibili metodi di impostazione dell applicazione di esempio se si sta usando ColdFusion con Microsoft Internet Information Server (IIS) o Personal Web Server (PWS). Per ulteriori informazioni su questi server Web, in Dreamweaver scegliere? > Uso di Dreamweaver > Installazione di un server Web in Windows. Se si sta usando ColdFusion MX con un server Web diverso, in Dreamweaver scegliere? > Uso di Dreamweaver > Impostazione di un applicazione Web. Le schermate di esempio in questa esercitazione mostrano le finestre di dialogo di Macromedia ColdFusion. È però possibile completare le lezioni di questo capitolo in tutti gli altri modelli server supportati da Dreamweaver MX: PHP, ASP.NET, ASP e JSP. Per ulteriori informazioni sull'utilizzo di questi modelli, in Dreamweaver scegliere?. Il processo di impostazione di un applicazione Web è costituito da tre passaggi. Innanzitutto è necessario configurare il sistema. Quindi occorre definire un sito Dreamweaver. Infine, è necessario connettersi al database. Questa guida all installazione segue la stessa impostazione. 124 Capitolo 5

125 Elenchi di verifica dell impostazione per sviluppatori ColdFusion Per impostare un applicazione Web è necessario configurare il proprio sistema, definire un sito Dreamweaver e connettersi a un database. Questa sezione contiene degli elenchi di verifica per ciascuna operazione. Le procedure vengono descritte nel resto del capitolo. Configurazione del sistema 1 Accertarsi di disporre di un server Web. 2 Installare ColdFusion MX Server Developer Edition. Per i requisiti e le istruzioni di installazione, vedere Capitolo 16, Installazione della Developer Edition di Macromedia ColdFusion MX Server, a pagina Creare una cartella principale. Definizione di un sito Dreamweaver 1 Copiare i file di esempio in una cartella sul disco rigido. 2 Definire la cartella come cartella locale Dreamweaver. 3 Definire una cartella sul server Web come cartella remota Dreamweaver 4 Specificare una cartella per l elaborazione delle pagine dinamiche. 5 Caricare sul server Web i file di esempio. Connessione al database 1 Se si dispone di una configurazione del server remoto, copiare il database di esempio sul computer remoto. 2 Creare un'origine dati ColdFusion in ColdFusion Administrator. 3 Visualizzare la connessione in Dreamweaver Esercitazioni di Dreamweaver MX 125

126 Configurazione del sistema In questa sezione verranno fornite istruzioni relative a due configurazioni di sistema molto diffuse: una prevede l'installazione di Microsoft IIS o PSW sul disco rigido locale; la seconda l'installazione di IIS o PWS su un computer Windows remoto. Se non si desidera usare tali configurazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Impostazione di un applicazione Web. È anche possibile usare il server Web autonomo installato insieme a ColdFusion MX Developer Edition. Vedere Installazione di Macromedia ColdFusion MX Server su Windows a pagina 392. L illustrazione seguente mostra le due configurazioni descritte in questa sezione: Configurazione locale (solo per utenti Windows) Configurazione server remoto (per utenti Macintosh o Windows) PC WINDOWS PC MACINTOSH o WINDOWS Dreamweaver MX Dreamweaver MX PWS o IIS Server ColdFusion MX Cartella principale del sito Web c:\inetpub\wwwroot\ Accesso alla rete o all'ftp SERVER WINDOWS PWS o IIS Server ColdFusion MX Cartella principale del sito Web c:\inetpub\wwwroot\ 1 Accertarsi di disporre di un server Web. Vedere Controllo del server Web a pagina Installare il server per applicazioni ColdFusion (vedere Capitolo 16, Installazione della Developer Edition di Macromedia ColdFusion MX Server, a pagina 391). 3 Creare una cartella principale (vedere Creazione di una cartella principale a pagina 127). Nota: L installazione del server Web e del server per applicazioni sono operazioni che si eseguono una sola volta. 126 Capitolo 5

127 Controllo del server Web Per poter sviluppare e provare pagine Web dinamiche è necessario disporre di un server Web. Un server Web è un software che fornisce pagine Web in risposta alle richieste dei browser. Accertarsi che Microsoft IIS o PWS sia installato e in esecuzione sul disco rigido locale o su un computer Windows remoto. Per gli utenti Macintosh sarà necessario installare Microsoft IIS o PWS su un computer Windows remoto. Un modo rapido per controllare se PWS o IIS è installato su un sistema è esaminare la struttura delle cartelle. Se questa contiene una cartella C:\Inetpub o d:\inetpub, significa che PWS/IIS è installato, in quanto tale cartella viene creata durante l installazione. Se PWS o IIS non è installato sul sistema, installarlo ora. Per informazioni sulla procedura, in Dreamweaver scegliere? > Uso di Dreamweaver > Installazione di un server Web in Windows. Installazione del server di ColdFusion MX Per poter elaborare le pagine Web dinamiche, è necessario disporre di un server per applicazioni. Un server per applicazioni è un software che consente a un server Web di elaborare le pagine contenenti script o tag server-side. Quando una pagina di questo tipo viene richiesta al server, il server Web passa la pagina al server per applicazioni che provvederà a elaborarla prima di inviarla al browser. Per i requisiti di sistema e le istruzioni di installazione, vedere Capitolo 16, Installazione della Developer Edition di Macromedia ColdFusion MX Server, a pagina 391. Al termine dell installazione, seguire le istruzioni contenute in Conferma dell'installazione e gestione ColdFusion MX Server a pagina 393 per verificare che ColdFusion MX sia installato e in esecuzione. Il passaggio successivo consiste nella creazione di una cartella principale per l applicazione Web. Creazione di una cartella principale Una volta installato il software server, creare una cartella principale per l applicazione Web sul sistema che esegue Microsoft PWS o IIS, accertandosi che la cartella disponga delle necessarie autorizzazioni. 1 Creare una cartella chiamata MySampleApp sul sistema che esegue PWS o IIS. Si consiglia di creare la cartella in C:\Inetpub\wwwroot\. Per impostazione predefinita, il server Web PWS o IIS è installato nella cartella Inetpub\wwwroot. Il server Web fornirà tutte le pagine contenute in questa cartella e nelle sue sottocartelle in risposta a una richiesta HTTP da parte di un browser Web. Esercitazioni di Dreamweaver MX 127

128 2 Verificare che per la cartella siano abilitate le autorizzazioni di lettura e di script. Se si sta usando PWS, lanciare Personal Web Manager facendo doppio clic sull icona del server Web sulla barra delle applicazioni. L icona rappresenta una mano e una pagina Web. In Personal Web Manager, fare clic sull icona Avanzate. Viene visualizzata la finestra di dialogo Opzioni avanzate. Selezionare Home e fare clic su Modifica proprietà. Viene visualizzata la finestra di dialogo per la modifica della directory. Verificare che siano abilitate le opzioni di lettura e di script. Per ragioni di protezione, non selezionare l opzione Esegui. Se si sta usando IIS, avviare lo strumento di amministrazione IIS; in Windows XP, selezionare Avvio > Pannello di controllo > Manutenzione prestazioni > Strumenti di amministrazione > Internet Information Services. In Siti Web > Sito Web predefinito, fare clic con il pulsante destro del mouse sulla cartella MySampleSite e scegliere Proprietà dal menu di scelta rapida. Nella casella di testo Esegui autorizzazione, accertarsi che sia selezionata l opzione Script. Per ragioni di protezione, non selezionare l opzione Scripts ed eseguibili. Il server Web è ora configurato per fornire le pagine Web contenute nella cartella principale in risposta alle richieste HTTP da parte di browser Web. Dopo aver configurato il sistema, occorre definire un sito Dreamweaver. Definizione di un sito Dreamweaver Dopo aver configurato il sistema, è necessario copiare i file di esempio in una cartella locale e definire un sito Dreamweaver per la gestione dei file. 1 Copiare i file di esempio in una cartella sul disco rigido (vedere Copia dei file di esempio a pagina 128). 2 Definire la cartella come cartella locale Dreamweaver (vedere Definizione di una cartella locale a pagina 129). 3 Definire la cartella principale sul server Web come cartella remota Dreamweaver (vedere Definizione di una cartella remota a pagina 129). 4 Specificare una cartella per l elaborazione delle pagine dinamiche (vedere Definizione di una cartella per l elaborazione delle pagine dinamiche a pagina 130). 5 Trasferire i file di esempio sul server Web (vedere Caricamento dei file di esempio a pagina 131). Copia dei file di esempio Se non fosse ancora stato fatto, copiare i file di esempio dalla cartella dell applicazione Dreamweaver in una cartella sul disco rigido. 1 Creare una nuova cartella chiamata Sites sul disco rigido, per esempio C:\Sites (Windows) o Hard Drive:Documents:Sites (Macintosh). 2 Individuare la cartella GettingStarted nella cartella dell applicazione Dreamweaver sul disco rigido. Il percorso della cartella è il seguente: \Macromedia\Dreamweaver MX\Samples\GettingStarted\ 3 Copiare la cartella GettingStarted nella cartella Sites. Dopo aver copiato la cartella GettingStarted, definire la cartella come cartella locale Dreamweaver. 128 Capitolo 5

129 Definizione di una cartella locale Dopo aver copiato la cartella GettingStarted, definire la cartella contenente i file di esempio ColdFusion come cartella locale Dreamweaver. 1 In Dreamweaver, selezionare Sito > Nuovo sito. Viene visualizzata la finestra di dialogo Definizione del sito. 2 Se la procedura guidata è visibile, fare clic sulla scheda Avanzate. 3 Nella casella di testo Nome del sito, digitare GlobalCar - ColdFusion. Il nome identifica il sito all interno di Dreamweaver. 4 Nella casella di testo Cartella principale locale, specificare la cartella nella cartella GettingStarted che contiene i file di esempio ColdFusion. È possibile fare clic sull icona della cartella accanto alla casella di testo e selezionare la cartella. In Windows, la cartella dovrebbe essere la seguente: C:\Sites\GettingStarted\Develop\coldfusion Su Macintosh, la cartella dovrebbe essere la seguente: Hard Drive:Documents:Sites:GettingStarted:Develop:coldfusion Lasciare aperta la finestra di dialogo Definizione del sito. È quindi necessario definire una cartella sul server Web come cartella remota Dreamweaver. Definizione di una cartella remota Dopo aver definito una cartella locale, definire una cartella del server Web come cartella remota Dreamweaver. 1 Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Informazioni su remoto dall elenco Categoria. Viene visualizzata la schermata Informazioni su remoto. 2 Nella casella di testo Accesso, scegliere la modalità di spostamento dei file da e verso il server: diretta (opzione Locale/rete) o tramite FTP. 3 Digitare il percorso o le impostazioni FTP della cartella del server Web creata in Creazione di una cartella principale a pagina 127. La cartella può trovarsi sul disco rigido locale o su un computer remoto. Anche se la cartella è stata creata sul disco rigido locale, resta la cartella remota valida. Se per esempio si sceglie l accesso Locale/rete: Cartella remota: c:\inetpub\wwwroot\mysampleapp Per ulteriori informazioni sull FTP, in Dreamweaver scegliere? > Uso di Dreamweaver > Impostazione delle opzioni per l accesso FTP di Informazioni su remoto. Lasciare aperta la finestra di dialogo Definizione del sito. È quindi necessario definire una cartella per l elaborazione delle pagine dinamiche. Esercitazioni di Dreamweaver MX 129

130 Definizione di una cartella per l elaborazione delle pagine dinamiche Dopo aver definito la cartella remota Dreamweaver, seguire la procedura descritta in questa sezione per specificare una cartella per l elaborazione delle pagine dinamiche. Dreamweaver usa questa cartella per visualizzare le pagine dinamiche e collegarle al database nella fase di sviluppo. 1 Nella scheda Avanzate della finestra di dialogo Definizione del sito, selezionare Server di prova dall elenco Categoria. Viene visualizzata la schermata Server di prova. In Dreamweaver è necessario un server di prova per generare e visualizzare il contenuto dinamico delle pagine nella fase di sviluppo. Il server di prova può essere il computer locale, un server di sviluppo, un server alternativo o un server di produzione, purché in grado di elaborare le pagine ColdFusion. In questo caso è possibile usare le stesse impostazioni della categoria Informazioni su remoto (vedere Definizione di una cartella remota a pagina 129), poiché si riferiscono a un server in grado di elaborare le pagine ColdFusion. 2 Selezionare ColdFusion come tecnologia server. 3 Nella casella di testo Accesso, scegliere il metodo (Locale/rete o FTP) specificato per l accesso alla cartella remota. Le impostazioni specificate vengono inserite nella categoria Informazioni su remoto. Non modificare le impostazioni. 4 Nella casella di testo Prefisso URL, digitare l URL principale, da inserire in un browser per richiedere una pagina dell applicazione Web. Per visualizzare dati dinamici nella pagina in fase di sviluppo, in Dreamweaver un file temporaneo viene creato e copiato nella cartella principale del sito Web, quindi viene effettuato il tentativo di richiesta tramite il prefisso URL. Il prefisso URL viene dedotto dalle informazioni fornite nella finestra di dialogo Definizione del sito. Se per esempio la cartella specificata nella casella di testo Cartella remota è c:\inetpub\wwwroot\mysampleapp, il prefisso URL dovrebbe essere il seguente: Suggerimento: Il prefisso URL non dovrebbe mai indicare una pagina particolare del sito. È tuttavia possibile che il prefisso URL suggerito non sia corretto. Se il prefisso URL suggerito non è esatto, correggerlo o inserire un nuovo prefisso. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Il prefisso URL. 5 Fare clic su OK e quindi su Fine. Dopo aver definito una cartella per l elaborazione delle pagine dinamiche, caricare i file di esempio sul server Web. 130 Capitolo 5

131 Caricamento dei file di esempio Dopo aver definito una cartella per l elaborazione delle pagine dinamiche, caricare i file di esempio sul server Web seguendo la procedura descritta in questa sezione. È necessario eseguire il caricamento dei file anche se il sito Web viene eseguito sul computer locale. Se non si procede al caricamento dei file, è possibile che alcune funzioni come la vista Live Data e Anteprima nel browser non funzionino correttamente con le pagine dinamiche. Per esempio i collegamenti delle immagini potrebbero non funzionare in vista Live Data perché i file delle immagini non si trovano ancora sul server. Analogamente, se si fa clic sul collegamento di una pagina di dettaglio mentre si visualizza in anteprima la pagina principale in un browser, si verificherà un errore se la pagina di dettaglio non si trova sul server. 1 Nel pannello Sito (Finestra > Sito), selezionare la cartella principale nel riquadro File locali. La cartella principale dovrebbe essere la prima cartella dell elenco. 2 Fare clic sulla freccia in alto di colore blu sulla barra degli strumenti. Tutti i file vengono copiati nella cartella del server Web definita in Definizione di una cartella remota a pagina 129. La definizione del sito Dreamweaver è completata. Il passaggio successivo consiste nel connettersi al database di esempio installato con Dreamweaver. Connessione al database di esempio Durante l installazione, un database Microsoft Access di esempio viene copiato sul disco rigido. Questa sezione descrive come creare una connessione al database di esempio. Nota: Per connettersi a un altro database, in Dreamweaver scegliere? > Uso di Dreamweaver > Connessioni a database per sviluppatori ColdFusion. 1 Se si dispone di una configurazione del server remoto, copiare il database di esempio sul computer remoto (vedere Impostazione del database (configurazione del server remoto) a pagina 131). 2 Creare un origine dati ColdFusion in ColdFusion Administrator (vedere Creazione di un origine dati ColdFusion a pagina 132). 3 Visualizzare la connessione in Dreamweaver (vedere Connessione al database di esempio a pagina 132). Impostazione del database (configurazione del server remoto) Fare riferimento a questa sezione solo se si dispone di una configurazione di server remoto, se cioè il server Web è in esecuzione su un computer remoto. Se il server Web è in esecuzione sullo stesso computer di Dreamweaver, passare a Creazione di un origine dati ColdFusion a pagina 132. Prima di tentare di connettersi al database di esempio, copiarlo sul disco rigido del computer remoto. Il file del database, global mdb si trova sul disco rigido locale, nella cartella \Macromedia\Dreamweaver MX\Samples\Database\global.mdb È possibile collocare il file in qualsiasi cartella del computer remoto, o in una cartella appositamente creata. Una volta che il database si trova nella posizione indicata, creare un origine dati ColdFusion in ColdFusion Administrator. Esercitazioni di Dreamweaver MX 131

132 Creazione di un origine dati ColdFusion In ColdFusion Administrator creare un origine dati denominata connglobal e collegata al file del database di esempio. 1 In Dreamweaver, aprire una pagina ColdFusion. 2 Nel pannello Database (Finestra > Database), fare clic sull icona Modifica origini dati (la seconda icona a partire da destra sulla barra degli strumenti del pannello). ColdFusion Administrator viene visualizzato in una finestra di browser. 3 Accedere a ColdFusion Administrator e creare un origine dati denominata connglobal e collegata al file del database global.mdb. Se ColdFusion è in esecuzione sul computer locale, creare un origine dati collegata al file di database nella cartella c:\program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb Se ColdFusion è in esecuzione sul computer remoto, creare un origine dati collegata al file di database caricato sul computer remoto in Impostazione del database (configurazione del server remoto) a pagina 131. Per ulteriori informazioni, in Dreamweaver MX selezionare? > Uso di Dreamweaver > Uso di ColdFusion. Dopo aver creato l origine dati ColdFusion, è possibile connettersi al database in Dreamweaver. Connessione al database di esempio Dopo aver creato l origine dati ColdFusion, è possibile usarla per connettersi al database in Dreamweaver. Aprire una pagina ColdFusion in Dreamweaver, quindi aprire il pannello Database (Finestra > Database). Nel pannello vengono visualizzate le origini dati ColdFusion. Se l'origine dati appena creata non viene visualizzata nel pannello, effettuare una delle seguenti operazioni: -Ricontrollare i parametri della connessione in ColdFusion Administrator. Controllare le impostazioni della cartella usata per l elaborazione delle pagine dinamiche (vedere Definizione di una cartella per l elaborazione delle pagine dinamiche a pagina 130). In Dreamweaver scegliere? > Uso di Dreamweaver > Risoluzione dei problemi di connessione a database. Se l origine dati connglobal viene visualizzata nel pannello, l impostazione dell applicazione ColdFusion di esempio per questa esercitazione è terminata. 132 Capitolo 5

133 Inizio dell esercitazione È ora possibile creare un applicazione Web basata su un database. Apertura del documento da modificare Per iniziare lo sviluppo di un applicazione di database, si consiglia di creare un elenco dei record contenuti nel database. Nell applicazione che si sta creando in questo capitolo, verranno elencati i dati contenuti nella tabella Comments del database. In seguito verrà creata una pagina Web dinamica che consente ai clienti di inserire commenti o domande direttamente nel database. Si procederà ora a individuare i documenti da utilizzare per la creazione di queste pagine. 1 Effettuare una delle seguenti operazioni per aprire il pannello Sito: Nel gruppo di pannelli File fare clic sulla freccia per visualizzare il pannello Sito. Scegliere Finestra > Sito. Premere F8. Viene visualizzato il pannello Sito. 2 Dal menu a comparsa Sito, selezionare il sito Global Car definito per le pagine server. 3 Nel pannello Sito, fare doppio clic sul file customercomment per aprirlo. Il documento viene aperto nella finestra del documento. 4 Se è attiva la vista Codice per la visualizzazione del documento, fare clic sul pulsante Mostra vista struttura o sul pulsante Mostra viste Codice e Struttura nella barra delle applicazioni Documento, in modo che sia possibile usare le schermate di esempio fornite come riferimento mentre si porta a termine la lezione. Si procederà ora a modificare la pagina completata parzialmente. Esercitazioni di Dreamweaver MX 133

134 Definizione di un recordset Verrà ora illustrato come creare un recordset per selezionare i dati da visualizzare. Un recordset è un sottoinsieme di dati estratti da un database da parte di una query del database. In ASP.NET, un recordset è detto DataSet. Una query del database è costituita da criteri di ricerca, che definiscono il contenuto del recordset. Le informazioni estratte dal database verranno poi usate come origine dati per le pagine dinamiche. In Dreamweaver MX è disponibile un interfaccia di facile uso per la creazione di semplici query SQL, non è quindi necessario conoscere l SQL per creare un recordset in Dreamweaver. Verrà ora illustrato come creare un recordset che selezioni tutti i valori della tabella COMMENTS del database Global. 1 In Dreamweaver, aprire la finestra di dialogo Recordset o DataSet (ASP.NET) effettuando una delle seguenti operazioni: Nella scheda Applicazione della barra Inserisci, fare clic sul pulsante Recordset o DataSet (ASP.NET). Scegliere Finestra > Associazioni per aprire il pannello Associazioni, quindi fare clic sul pulsante più (+) e selezionare Recordset o DataSet (ASP.NET). Fare clic sulla freccia del gruppo di pannelli Applicazione, quindi nel pannello Associazioni fare clic sul pulsante più (+) e selezionare Recordset o DataSet (ASP.NET). Viene visualizzata la finestra di dialogo Recordset o DataSet. Se la finestra di dialogo visualizzata è più complessa di quella raffigurata sotto, fare clic sul pulsante Semplice. 2 Nella casella di testo Nome, digitare rscomments. 134 Capitolo 5

135 3 Nel menu a comparsa Origine Dati (ColdFusion) o Connessione (altri tipi di pagine server), selezionare connglobal. La finestra di dialogo Recordset o DataSet viene aggiornata con i dati del database. Nel menu a comparsa Tabella, COMMENTS è già selezionato. Nelle casella Colonne, è selezionato Tutte. 4 Accettare il valore predefinito per richiedere il recordset completo. 5 Dal menu a comparsa Ordinamento, selezionare LAST_NAME; dal secondo menu a comparsa selezionare Ascendente. I dati dei record recuperati vengono elencati in ordine alfabetico in base al cognome del cliente. Esercitazioni di Dreamweaver MX 135

136 6 Fare clic su Prova per eseguire una verifica del recordset o del dataset. I record del database che soddisfano i criteri di selezione del recordset o del dataset vengono visualizzati nella finestra Esegui test istruzione SQL. 7 Fare clic su OK per chiudere la finestra Esegui test istruzione SQL. 8 Fare clic su OK per chiudere la finestra di dialogo Recordset o Dataset. Il recordset viene visualizzato nel pannello Associazioni. Suggerimento: Se non vengono visualizzati tutti i campi del recordset, fare clic sul pulsante più (+) di fronte a Recordset (rscomments) per espandere la visualizzazione del recordset. 136 Capitolo 5

137 Visualizzazione dei record del database Verrà ora illustrato come creare una pagina che elenchi i record attualmente esistenti nella tabella COMMENTS. Anziché immettere manualmente le informazioni, la pagina verrà generata dinamicamente. Verrà innanzitutto creata una tabella per definire la struttura dell elenco dei dati. 1 Nel documento customercomment, collocare il punto di inserimento dopo Customer Comments, quindi premere Invio per definire il punto di inserimento della tabella. 2 Inserire una tabella effettuando una delle seguenti operazioni: Nella barra Inserisci, fare clic sulla scheda Comuni, quindi fare clic sul pulsante Tabella o trascinarla sul documento. Nella barra Inserisci, fare clic sulla scheda Layout, quindi fare clic sul pulsante Tabella o trascinarla sul documento. Selezionare Inserisci > Tabella. Viene visualizzata la finestra di dialogo Inserisci tabella. 3 Nella finestra di dialogo, impostare le seguenti opzioni: Nella casella Righe, digitare 2. Nella casella Margine celle, digitare 2.. Nella casella Colonne, digitare 4.. Nella casella Spaziatura celle, digitare 2. Nella casella Larghezza, digitare 80. Al termine, la finestra di dialogo dovrebbe essere analoga a quella che segue: Esercitazioni di Dreamweaver MX 137

138 4 Fare clic su OK. La tabella viene inserita nel documento. 5 Nella prima riga della tabella aggiungere le etichette per le voci della tabella: Nella prima cella della tabella, digitare First Name. Nella cella successiva, digitare Last Name. Nella cella successiva, digitare Address. Nell ultima cella, digitare Comments. 6 Salvare il documento scegliendo File > Salva. Aggiunta di campi dinamici alla tabella È ora possibile aggiungere i campi del recordset alla tabella. 1 Aprire il pannello Associazioni, se non è già aperto, effettuando una delle seguenti operazioni. Scegliere Finestra > Associazioni. Fare clic sulla freccia del gruppo di pannelli Applicazione, quindi selezionare il pannello Associazioni. 2 Aggiungere il campo FIRST_NAME alla tabella, effettuando una delle seguenti operazioni: Collocare il punto di inserimento nella cella della tabella al di sotto dell etichetta First Name, quindi selezionare FIRST_NAME nel pannello Associazioni e fare clic su Inserisci. Trascinare FIRST_NAME dal pannello Associazioni nella cella della tabella. 3 Ripetere il passaggio 2 per aggiungere LAST_NAME, e COMMENTS alla tabella. L aspetto della pagina dovrebbe essere simile dovrebbe essere simile al seguente: 4 Salvare il documento. 138 Capitolo 5

139 Impostazione di un area ripetuta La tabella appena creata contiene solo una riga per i dati. Per visualizzare tutti i record la riga della tabella verrà impostata come area ripetuta. La pagina verrà ripetuta con i record di data per ciascun record che soddisfa i criteri di ricerca del recordset. 1 Nella finestra Documento, selezionare la riga inferiore della tabella effettuando una delle seguenti operazioni: Collocare il puntatore nella prima cella, quindi trascinare il mouse verso destra per selezionare tutte le celle della riga. Fare clic in una delle celle, quindi nel selettore tag fare clic sul tag <tr>. Posizionare il puntatore a sinistra della riga della tabella; quando si trasforma in una freccia fare clic sul bordo della riga della tabella per selezionare la tabella. 2 Impostare un'area ripetuta effettuando una delle seguenti operazioni: Nel pannello Comportamenti server, fare clic sul pulsante più (+), quindi selezionare Area ripetuta. Nella scheda Applicazione della barra Inserisci, fare clic sul pulsante Area ripetuta. Selezionare Inserisci > Oggetti applicazione > Area ripetuta. Si apre la finestra di dialogo Area ripetuta. 3 Nella finestra di dialogo, accettare l impostazione predefinita, facendo clic su OK. Un bordo a schede appare intorno all area ripetuta. 4 Salvare il documento. Esercitazioni di Dreamweaver MX 139

140 Visualizzazione delle pagine Verrà ora spiegato come salvare le pagine e poi visualizzarle per verificare il funzionamento dell applicazione che si sta sviluppando. Per visualizzare l aspetto delle pagine dopo l elaborazione da parte del server, è possibile usare la vista Live Data. 1 Con customercomment ancora selezionato, effettuare una delle seguenti operazioni per visualizzare i dati nelle pagine: Nella barra degli strumenti Documento, fare clic sul pulsante Vista Live Data. Selezionare Visualizza > Live Data. La pagina viene aggiornata con un elenco di dati relativi ai clienti estratti dal database. Creazione di un modulo di inserimento record. La prossima pagina che verrà creata per il sito Web Global è una pagina di commenti dei clienti. I commenti dei clienti dovranno essere inseriti direttamente nel database. La pagina verrà connessa alla tabella Comments del database Global. In Dreamweaver sono compresi vari oggetti applicazione che consentono di creare pagine di applicazioni Web rapidamente e con facilità. Verrà usato un oggetto applicazione per creare la pagina di inserimento. L oggetto applicazione Inserisci record crea un modulo HTML, alcuni campi di dati collegati (o associati) al database e gli script server necessari per la creazione di una pagina dinamica. Aggiunta di un oggetto applicazione Modulo inserimento record È possibile usare un oggetto applicazione Modulo inserimento record per creare un modulo collegato ai campi di un database. L'oggetto applicazione consente di selezionare quali campi includere nel modulo, assegnare un etichetta ai campi e selezionare il tipo di oggetti modulo da inserire. Quando un utente inserisce i dati nei campi del modulo e fa clic sul pulsante Invia, un nuovo record viene inserito nel database. È anche possibile impostare l apertura di una pagina quando l invio di un record è riuscito, in modo da informare il mittente che il database è stato aggiornato. 140 Capitolo 5

141 1 Nel pannello Sito, ricercare il file customerinsert e fare doppio clic per aprirlo. Il documento viene aperto nella finestra Documento. 2 Collocare il punto di inserimento nel documento dopo la parola possible, quindi premere Invio per impostare il punto in cui inserire l oggetto applicazione. 3 Effettuare una delle seguenti operazioni per inserire un oggetto di inserimento record: Nella scheda Applicazione della barra Inserisci, fare clic sul pulsante Modulo inserimento record. Scegliere inserisci > Oggetti applicazione > Modulo inserimento record. Viene visualizzata la finestra di dialogo Modulo inserimento record. 4 Dal menu a comparsa Origine dati (ColdFusion) o Connessione, scegliere connglobal. 5 Nel menu a comparsa Tabella, accertarsi che COMMENTS sia già selezionato. 6 Nella casella Dopo l inserimento, vai a o Se l esito è positivo, vai a (ASP.NET), fare clic su Sfoglia. 7 Nella finestra di dialogo visualizzata, selezionare il file insertok, quindi fare clic su OK per chiudere la finestra di dialogo. È stata così selezionata una pagina da visualizzare per confermare la ricezione delle informazioni inviate dai visitatori del sito. Esercitazioni di Dreamweaver MX 141

142 Creazione del modulo di inserimento Nella sezione Campi modulo della finestra di dialogo Modulo inserzione record, viene definito il modulo per l'inserimento di dati da parte dei visitatori. 1 Nella finestra di dialogo Modulo inserimento record, rimuovere i campi che non si desidera includere nel modulo effettuando le seguenti operazioni: Selezionare COMMENT_ID, quindi fare clic sul pulsante meno (-). Selezionare TELEPHONE, quindi fare clic sul pulsante meno (-). Selezionare SUBMIT_DATE, quindi fare clic sul pulsante meno (-). Selezionare ANSWERED, quindi fare clic sul pulsante meno (-). 2 Se si sta creando una pagina per ASP.NET, modificare l ordine alfabetico dei campi del modulo effettuando le seguenti operazioni: Nell elenco Colonna, selezionare COMMENTS, quindi fare clic sulla freccia in basso per posizionare COMMENTS sotto LAST_NAME. Nell elenco Colonna, selezionare , quindi fare clic sulla freccia in basso per posizionarlo sotto LAST_NAME. 3 Nell elenco Campi modulo, selezionare FIRST_NAME per specificare la modalità di visualizzazione del campo nel modulo. 4 Nella casella di testo Etichetta, digitare First Name. Questa è l etichetta che verrà visualizzata nel modulo HTML accanto al campo di testo. 5 Impostare il tipo di oggetto modulo per il campo effettuando una delle seguenti operazioni: Se si sta usando ASP.NET, in Visualizza come accettare il valore predefinito Campo di testo; nel menu a comparsa Invia come modificare il valore predefinito da Wchar a VARCHAR. Se si stanno usando altri tipi di pagine server, in Visualizza come accettare il valore predefinito Campo di testo e in Invia come accettare il valore predefinito Testo. 6 Nel campo Valore predefinito, digitare Enter your first name per impostare il testo iniziale del campo, che indica all utente il tipo di informazioni da fornire. Al termine la voce FIRST_NAME dovrebbe essere simile quella illustrata qui sotto. 142 Capitolo 5

143 7 Ripetere i passaggi da 3 a 6 per i campi modulo LAST_NAME e . Nella casella di testo Valore predefinito, digitare il testo iniziale che apparirà nel campo quando questo verrà visualizzato nel modulo. 8 Selezionare COMMENTS per impostare i valori relativi a questo campo. 9 Nel campo Etichetta, digitare Commenti. 10 Impostare i valori per il campo modulo Comments effettuando una delle seguenti operazioni: Se si sta usando ASP.NET, nel menu a comparsa Visualizza come selezionare Area di testo; nel menu a comparsa Invia come, selezionare VARCHAR. Se si stanno usando altri tipi di pagine server, nel menu a comparsa Visualizza come selezionare Area di testo; nel menu a comparsa Invia come, accettare il valore predefinito Testo. 11 Nella casella di testo Valore predefinito, digitare il testo da visualizzare in questo campo del modulo, oppure lasciare vuoto il campo. Al termine la finestra di dialogo dovrebbe essere simile quella illustrata qui sotto. Esercitazioni di Dreamweaver MX 143

144 12 Fare clic su OK per chiudere la finestra di dialogo. L oggetto applicazione Modulo inserimento record viene inserito nel documento. 13 Salvare il documento. Copia dei file sul server Verrà ora spiegato come salvare le modifiche e copiare i file aggiornati sul server. Verrà inoltre illustrato come visualizzare la pagina di inserimento record, aggiungere un commento o una domanda e inviare i dati per provare l applicazione. 1 Nel pannello Sito, selezionare customerinsert, quindi fare clic sul pulsante Carica il/i file (freccia in alto di colore blu) per copiare il file locale sul server. 2 Quando viene richiesto se si desidera copiare i file dipendenti sul server, scegliere Sì. Nota: Per alcuni modelli di server, in Dreamweaver viene creata automaticamente una cartella Connections nella cartella locale. Perché l applicazione Web funzioni, è necessario copiare anche tale cartella sul server remoto. Nel pannello Sito, selezionare la cartella Connections, quindi fare clic sul pulsante Carica il/i file per copiare la cartella sul server. 3 Con customerinsert selezionato, scegliere File > Anteprima nel browser o premere F12 (Windows) per visualizzare il documento. 4 Immettere i dati di prova nel modulo, quindi fare clic sul pulsante Inserisci record nel documento per inviare i dati. Le informazioni del database vengono aggiornate e viene visualizzata la pagina insertok. 144 Capitolo 5

145 Visualizzazione dell aggiornamento Verrà ora spiegato come visualizzare le modifiche apportate al database. Per visualizzare le modifiche è possibile aprire il documento customercomment creato nella prima parte di questa lezione, oppure visualizzare il database. Nel pannello Sito di Dreamweaver, fare doppio clic sul documento denominato customercomment, quindi scegliere File > Anteprima nel browser, quindi selezionare un browser in cui visualizzare la pagina. Il record immesso viene visualizzato nell elenco Customer Comments. Nel pannello Database di Dreamweaver (Finestra > Database), ricercare l icona del database connglobal, fare clic sul pulsante più (+) accanto a Tabelle per visualizzare l elenco delle tabelle del database. Fare clic con il pulsante destro del mouse (Windows) o premere Ctrl e fare clic (Macintosh) sulla tabella COMMENTS, quindi selezionare Visualizza dati. Viene visualizzato un elenco dei record del database; il commento appena inserito viene visualizzato come l'ultima voce della tabella. Ulteriori informazioni Per ulteriori informazioni sugli argomenti trattati nella presente esercitazione, in Dreamweaver scegliere?, quindi consultare i seguenti argomenti: Archiviazione e recupero dei dati per la pagina Definizione delle origini dei dati dinamici Aggiunta di contenuto dinamico alle pagine Web Creazione dei collegamenti di navigazione recordset Creazione rapida di una pagina di inserimento Creazione di una pagina di inserimento in blocchi separati Esercitazioni di Dreamweaver MX 145

146 146 Capitolo 5

147 CAPITOLO 6 Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX Macromedia Fireworks MX e Macromedia Flash MX sono potenti strumenti di sviluppo per il Web, progettati per creare grafica e filmati SWF visualizzabili nelle pagine Web. La stretta integrazione di Macromedia Dreamweaver MX con tali strumenti consente di semplificare il flusso di lavoro della progettazione per il Web. Per garantire l integrazione tra Macromedia Flash MX, Dreamweaver MX e Fireworks MX è necessario abilitare le Design Notes quando si definiscono i propri siti Dreamweaver. Per impostazione predefinita, questa opzione è già selezionata nella procedura di definizione del sito. Per ulteriori informazioni sull abilitazione delle Design Notes, in Dreamweaver scegliere? > Uso di Dreamweaver > Abilitazione e disabilitazione delle Design Notes. Quando si esportano file da Macromedia Flash MX o Fireworks MX ad un sito definito in Dreamweaver, le Design Notes che contengono riferimenti al PNG o al file FLA di Macromedia Flash vengono automaticamente esportate sul sito insieme ai file pronti per il Web (GIF, JPEG o SWF). È possibile inserire facilmente immagini o tabelle di Fireworks e filmati di Macromedia Flash in un documento di Dreamweaver. È anche possibile avvalersi delle funzioni di integrazione tra Macromedia Flash MX, Fireworks MX e Dreamweaver MX per apportare modifiche a un immagine o a un filmato dopo averli inseriti in un documento di Dreamweaver. Mentre si lavora in Dreamweaver MX, è anche possibile avviare il processo di produzione della grafica inserendo e poi aggiornando un segnaposto per immagini. Per informazioni sui segnaposto per immagini, in Dreamweaver scegliere? > Uso di Dreamweaver > Inserimento di un segnaposto per immagini. Dopo aver inserito un segnaposto per immagini in Dreamweaver MX, è possibile avviare Fireworks MX per creare una nuova grafica. In Fireworks, è possibile progettare la grafica e aggiungere punti attivi, comportamenti o qualsiasi altro elemento si desideri. È quindi possibile salvare la grafica come PNG ed esportarla in uno o più formati grafici pronti per il Web, come GIF o JPEG. È possibile esportare una porzione di tabella come HTML e come immagine. Quando si ritorna in Dreamweaver MX, l immagine o la tabella di Fireworks vengono aggiornate nel documento. 147

148 Integrazione tra Fireworks MX e Macromedia Flash MX La modifica roundtrip e le Design Notes consentono di integrare Dreamweaver MX con Fireworks MX e Macromedia Flash MX. La modifica roundtrip garantisce il trasferimento corretto degli aggiornamenti del codice tra Dreamweaver MX e le altre applicazioni preservando ad esempio i comportamenti dei rollover o i collegamenti ad altri file mentre le Design Notes consentono a Dreamweaver MX di individuare il documento sorgente appropriato per i file di immagine o i filmati esportati. Per ulteriori informazioni sull uso delle Design Notes in Dreamweaver MX, in Dreamweaver scegliere? > Uso di Dreamweaver > Uso delle Design Notes in Fireworks e Flash con Dreamweaver. Oltre alla posizione, le Design Notes contengono altre informazioni relative ai file esportati. Quando ad esempio si esporta una tabella di Fireworks, Fireworks MX crea una Design Note per ciascun file di immagine della tabella che viene esportato. Se il file esportato contiene punti attivi o rollover, il documento HTML esportato da Fireworks MX contiene il codice JavaScript per i punti attivi o i rollover. Per ottenere i migliori risultati, quando si creano grafica e filmati da pubblicare sul Web, salvare il file sorgente e i file pronti per il Web di Fireworks MX e Macromedia Flash MX in un sito definito in Dreamweaver. In questo modo tutti gli utenti che condividono il sito potranno trovare il documento sorgente quando si modifica un immagine di Fireworks o un filmato SWF lavorando in Dreamweaver. Per assicurare l integrazione tra queste applicazioni, è essenziale innanzitutto impostare l ambiente di lavoro. Per informazioni su come impostare l ambiente di lavoro di Dreamweaver e di Fireworks MX, vedere Uso di Dreamweaver e Macromedia Fireworks MX a pagina 148. Per informazioni su come impostare l ambiente di lavoro di Dreamweaver e di Macromedia Flash MX, vedere Uso di Dreamweaver MX e Macromedia Flash MX a pagina 158. Uso di Dreamweaver e Macromedia Fireworks MX Dreamweaver MX e Fireworks MX riconoscono e condividono molte delle stesse funzioni di modifica file, tra cui le modifiche ai collegamenti, le mappe immagini e le porzioni di tabelle. Insieme, queste due applicazioni consentono di modificare, ottimizzare e collocare nelle pagine HTML la grafica Web in maniera semplice ed efficiente. Per impostare un ambiente di lavoro integrato, è necessario completare alcune operazioni preliminari, come definire un sito locale in Dreamweaver e verificare che le Design Notes siano abilitate per il sito. Le Design Notes sono automaticamente abilitate, a meno che non si modifichino le impostazioni predefinite. Occorre anche impostare Fireworks MX come editor di immagini esterno principale per Dreamweaver, per facilitare l avvio di Fireworks MX. Per informazioni su come impostare Fireworks MX come editor esterno, in Dreamweaver scegliere? > Uso di Dreamweaver > Uso di un editor di immagini esterno. Per garantire un integrazione appropriata tra le due applicazioni per il lancio e la modifica dei file, quando si è pronti ad esportare i file HTML e grafici di Fireworks, esportarli nella cartella del sito Dreamweaver. Quando si esportano file GIF o JPEG da Fireworks MX alla cartella di un sito Dreamweaver, Fireworks MX crea una cartella chiamata _notes nella stessa cartella. Tale cartella contiene le Design Notes, dei file di piccole dimensioni con l estensione dei file di Macromedia Note (.mno). 148 Capitolo 6

149 Le Design Notes contengono informazioni sui file grafici esportati da Fireworks MX. Quando si lancia e si modifica un immagine o una tabella di Fireworks in Dreamweaver, Dreamweaver usa tali informazioni per individuare il PNG di origine. Per ulteriori informazioni su come impostare il lancio automatico del file PNG da parte di Dreamweaver quando questo è disponibile, vedere Impostazione delle preferenze di lancio e modifica per i file sorgente di Fireworks MX a pagina 149. Quando in un documento di Dreamweaver si seleziona un immagine esportata da Fireworks MX di cui è disponibile il corrispondente file MNO, nella finestra di ispezione Proprietà verrà visualizzata l icona di Fireworks MX e il percorso del file di origine. Impostando Fireworks MX come editor di immagini esterno per Dreamweaver MX è possibile passare senza sforzo da Dreamweaver MX a Fireworks MX e viceversa quando occorre modificare un immagine. Nelle preferenze di Dreamweaver, impostare Fireworks MX come editor principale per i tipi di file grafici - GIF, PNG e JPEG. Per ulteriori informazioni su come impostare un editor di immagini, in Dreamweaver MX scegliere? > Uso di Dreamweaver > Uso di un editor di immagini esterno oppure Impostazione delle preferenze per l editor di immagini esterno. Impostazione delle preferenze di lancio e modifica per i file sorgente di Fireworks MX Le preferenze di lancio e modifica di Fireworks MX consentono di specificare come gestire i file sorgente PNG quando si lanciano file di Fireworks da un altra applicazione, come Dreamweaver. Quando si lancia e si ottimizza un immagine di Fireworks, Dreamweaver MX riconosce le preferenze di lancio e modifica di Fireworks MX solo in alcuni casi. Più precisamente, l immagine che viene lanciata e ottimizzata non deve far parte di una tabella di Fireworks, e le sue Design Notes non devono contenere il percorso corretto di un file PNG sorgente. In tutti gli altri casi, ogni volta che si lanciano e si modificano immagini di Fireworks, Dreamweaver lancia automaticamente il file PNG sorgente, richiedendo all utente di indicarne la posizione se non lo trova. Per specificare le preferenze di lancio e modifica per Fireworks: 1 In Fireworks, scegliere Modifica > Preferenze o Fireworks > Preferenze (Mac OS X). 2 Fare clic sulla scheda Lancia e modifica (Windows) o scegliere Lancia e modifica dal menu a comparsa (Macintosh). 3 Specificare le opzioni delle varie preferenze da usare quando si modificano o ottimizzano immagini di Fireworks collocate in un applicazione esterna: Usa sempre PNG sorgente lancia automaticamente il file PNG di Fireworks definito nella Design Note come origine dell immagine. Gli aggiornamenti vengono effettuati sia sul PNG di origine sia sull immagine inserita corrispondente. Non usare mai PNG sorgentelancia automaticamente l immagine di Fireworks inserita, indipendentemente dalla presenza del file PNG. Gli aggiornamenti vengono effettuati solo sull immagine inserita. Richiedi al lancio consente di specificare di volta in volta se lanciare o no il file PNG sorgente. Quando si modifica o si ottimizza un immagine inserita, Fireworks MX visualizza un messaggio, richiedendo cosa si desidera fare. Da questa finestra di messaggio è anche possibile specificare preferenze di lancio e modifica globali. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 149

150 Inserimento di un immagine di Fireworks MX in un documento di Dreamweaver MX Vi sono numerosi modi per inserire la grafica di Fireworks in Dreamweaver. È possibile inserire elementi grafici esportati da Fireworks direttamente in un documento di Dreamweaver mediante il comando Inserisci immagine, oppure è possibile creare un nuovo elemento grafico di Fireworks da un segnaposto per immagini di Dreamweaver. Per inserire un immagine di Fireworks MX in un documento di Dreamweaver: 1 Nel documento, portare il cursore nel punto in cui si desidera creare l immagine ed effettuare una delle seguenti operazioni: Scegliere Inserisci > Immagine. Nella categoria Comuni della barra Inserisci, fare clic sul pulsante Immagine o trascinarlo nel documento. 2 Ricercare il file di Fireworks esportato che si desidera inserire, quindi fare clic su OK (Windows) o su Apri (Macintosh). Nota: Se il file di Fireworks non si trova nel sito corrente di Dreamweaver, verrà richiesto se si desidera copiare il file nella cartella principale. Fare clic su Sì. Aggiornamento di un segnaposto per immagini di Dreamweaver MX in Fireworks MX È possibile creare un segnaposto per immagini in un documento di Dreamweaver e poi lanciare Fireworks MX per creare un immagine grafica o una tabella di Fireworks per sostituire il segnaposto. Per ulteriori informazioni sull inserimento di un segnaposto per immagini, in Dreamweaver scegliere? > Uso di Dreamweaver > Inserimento di un segnaposto per immagini. Per creare una nuova immagine da un segnaposto per immagini, è necessario che Dreamweaver MX e Fireworks MX siano entrambe installate nel sistema. Se in Dreamweaver sono state effettuate delle impostazioni relative al segnaposto per immagini, Fireworks MX è in grado di riconoscere le seguenti: Dimensioni immagine, collegato alle dimensioni dell area di lavoro di Fireworks MX ID Immagine, usato da Fireworks MX come nome predefinito del documento per il file di origine e per il file di esportazione. Allineamento testo Comportamenti riconosciuti da Fireworks MX, come Immagine di scambio, Menu a comparsa, Barra di navigazione e Imposta testo Fireworks riconosce inoltre i collegamenti del segnaposto per immagini aggiunti in Dreamweaver. Nota: Anche se non è possibile visualizzare in Fireworks i collegamenti aggiunti ad un segnaposto per immagini, questi vengono comunque preservati. Se si disegna un punto attivo e si aggiunge un collegamento in Fireworks MX, il collegamento aggiunto al segnaposto per immagini in Dreamweaver non verrà eliminato. Se però si estrae una porzione in Fireworks e la si inserisce nella nuova immagine, il collegamento nel documento di Dreamweaver verrà eliminato quando si sostituisce il segnaposto per immagini. Poiché non vengono riconosciute da Fireworks, le seguenti impostazioni sono disabilitate nella finestra di ispezione Proprietà del segnaposto per immagini: allineamento immagine, colore, Vspace e Hspace e mappe. 150 Capitolo 6

151 Quando si crea una nuova immagine in Fireworks per sostituire un segnaposto per immagini in Dreamweaver, Fireworks MX richiede di salvare il file come file PNG (documento sorgente) e di esportarlo in un formato pronto per il Web come GIF, JPEG, o in caso di porzioni di immagine, come HTML e immagini. La nuova immagine o tabella di Fireworks sostituisce immediatamente il segnaposto per immagini nel documento di Dreamweaver. Per modificare un segnaposto per immagini di Dreamweaver in Fireworks MX: 1 Accertarsi di aver già impostato Fireworks MX come editor di immagini per i file PNG. Per ulteriori informazioni, in Dreamweaver scegliere? > Uso di Dreamweaver > Impostazione delle preferenze per l editor di immagini esterno. 2 Nella finestra Documento, fare clic sul segnaposto per immagini per selezionarlo. 3 Effettuare una delle seguenti operazioni per lanciare Fireworks MX in modalità Modifica: Nella finestra di ispezione Proprietà, fare clic su Crea. Tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh), fare doppio clic sul segnaposto per immagini. Fare clic con il pulsante destro del mouse sul segnaposto per immagini, quindi scegliere Crea immagine in Fireworks. Viene avviato Fireworks in modalità Modifica da Dreamweaver. 4 Usare le opzioni di Fireworks per impostare l immagine. 5 Al termine, fare clic su Fatto. Viene visualizzata la finestra di dialogo Salva con nome. Fireworks richiede di salvare il file PNG. 6 Nel campo Salva in, scegliere la cartella definita come cartella del sito locale in Dreamweaver. Se si era assegnato un nome al segnaposto per immagini al momento del suo inserimento nel documento di Dreamweaver, Fireworks inserisce già tale nome nel campo Nome file. Se lo si desidera, è possibile modificare il nome. 7 Per salvare il file PNG, fare clic su Salva. Verrà visualizzata la finestra di dialogo Esporta. Usare questa finestra di dialogo per esportare l immagine come GIF. 8 Nella finestra di dialogo, nel campo Salva in scegliere la cartella locale del sito di Dreamweaver. 9 Nel campo di testo Nome viene automaticamente inserito lo stesso nome usato per il file PNG. Se lo si desidera, è possibile modificare il nome. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 151

152 10 In Salva come tipo, selezionare il tipo di file che si desidera esportare ad esempio Solo immagini o HTML e immagini. 11 Fare clic su Salva. Il file è ora stato salvato, e il controllo viene restituito a Dreamweaver. Nel documento di Dreamweaver, il file o la tabella di Fireworks esportati sostituiscono il segnaposto per immagini. Modifica di un immagine o di una tabella di Fireworks MX È possibile lanciare Fireworks per modificare immagini inserite in un documento di Dreamweaver. Quando si lancia e si modifica un immagine o una porzione di immagine che fanno parte di una tabella di Fireworks, Dreamweaver lancia Fireworks e il file PNG da cui l immagine o la tabella è stata esportata. Quando l immagine fa parte della tabella di Fireworks, è possibile lanciare l intera tabella di Fireworks per le modifiche, purché nel codice HTML sia inserito il commento <!--fw table-->. Se il PNG sorgente è stato esportato da Fireworks ad un sito Dreamweaver, usando l impostazione HTML e immagini ottimizzati per Dreamweaver, il commento della tabella di Fireworks viene inserito automaticamente nel codice HTML. Per lanciare e modificare un immagine di Fireworks inserita in Dreamweaver: 1 In Dreamweaver, scegliere Finestra > Proprietà per aprire la finestra di ispezione Proprietà, se non è già aperta. 2 Fare clic sull immagine o sulla porzione di immagine per selezionarla. La finestra di ispezione Proprietà identifica la selezione come un immagine o una tabella di Fireworks a seconda dell elemento selezionato, e visualizza il nome del file PNG sorgente. 3 Per lanciare Fireworks in modalità Modifica, effettuare una delle seguenti operazioni: Nella finestra di ispezione Proprietà, fare clic su Modifica. Fare doppio clic sull immagine selezionata tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh). Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sull immagine selezionata e scegliere Modifica con Fireworks dal menu di scelta rapida. Fireworks lancia e apre il file PNG associato in modalità Modifica. Nota: Se non è possibile trovare il file sorgente, viene richiesto all utente di indicarne la posizione. Quando si lavora sul file sorgente di Fireworks, le modifiche vengono salvate sia nel file sorgente che in quello esportato; negli altri casi, solo il file esportato viene aggiornato. 4 In Fireworks, modificare il PNG sorgente. 5 Al termine, fare clic su Fatto. Fireworks salva le modifiche nel file PNG, esporta l immagine aggiornata (o il codice HTML e le immagini), quindi restituisce il controllo a Dreamweaver. In Dreamweaver viene visualizzata l immagine o la tabella aggiornata. 152 Capitolo 6

153 Apertura di un menu a comparsa di Fireworks MX in Dreamweaver MX Fireworks supporta menu a comparsa collegati a immagini e a codice HTML. Dreamweaver supporta solo menu a comparsa collegati a codice HTML. In Dreamweaver, è possibile aprire un menu a comparsa di Fireworks e modificare tutte le proprietà delle voci del menu tranne le immagini di sfondo dei menu a comparsa collegati a immagini. Il comportamento Mostra menu a comparsa in Dreamweaver consente di modificare o aggiornare il contenuto di un menu a comparsa collegato a codice HTML di Fireworks. È possibile aggiungere, eliminare o modificare le voci del menu, modificarne la disposizione e impostare la posizione nella pagina del menu. Per ulteriori informazioni sull impostazione o la modifica di menu a comparsa, in Dreamweaver scegliere? > Uso di Dreamweaver > Mostra menu a comparsa. Se il menu a comparsa che si desidera modificare è collegato a un immagine e si desidera preservare gli sfondi delle celle collegati all immagine, si consiglia di modificare il menu a comparsa in Fireworks invece che in Dreamweaver. Per modificare le immagini di sfondo in un menu a comparsa collegato a immagini: Selezionare l immagine che si desidera aggiornare, quindi fare clic su Modifica. Per ulteriori informazioni sulla modifica di un immagine Fireworks, vedere Modifica di un immagine o di una tabella di Fireworks MX a pagina 152. Per aprire il menu a comparsa di Fireworks: 1 Nel documento Dreamweaver, selezionare il punto attivo o l immagine che determina la comparsa del menu. 2 Aprire il pannello Comportamenti (MAIUSC+F3), se non è già aperto, quindi nell elenco Azioni fare doppio clic su Mostra menu a comparsa. Viene visualizzata la finestra di dialogo Mostra menu a comparsa. 3 Apportare le modifiche desiderate al menu a comparsa. 4 Al termine fare clic su OK. Lancio di Fireworks MX per l ottimizzazione di un immagine È possibile lanciare Fireworks da Dreamweaver per apportare veloci modifiche al file di esportazione di immagini e animazioni Fireworks, come ridimensionare un immagine o modificare il tipo di file. Fireworks consente di apportare modifiche alle impostazioni di ottimizzazione, alle impostazioni di animazione e alle dimensioni e all area dell immagine esportata. Per modificare le impostazioni di ottimizzazione per un immagine di Fireworks inserita in Dreamweaver: 1 In Dreamweaver, selezionare l immagine desiderata e scegliere Comandi > Ottimizza immagine in Fireworks. 2 Se viene richiesto, specificare se si desidera lanciare un file sorgente di Fireworks per l immagine inserita. 3 In Fireworks, apportare le modifiche desiderate nella finestra di dialogo Ottimizzazione: Per modificare le impostazioni di ottimizzazione, fare clic sulla scheda Opzioni. Per ulteriori informazioni, in Fireworks scegliere?. Per modificare le dimensioni e l area dell immagine esportata, fare clic sulla scheda File. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 153

154 4 Al termine, fare clic su Aggiorna. L immagine viene esportata applicando le nuove impostazioni di ottimizzazione e l immagine GIF o JPEG inserita in Dreamweaver viene aggiornata; se era stato selezionato un file sorgente, viene salvato il file PNG. Se è stato cambiato il formato dell immagine, la funzione di controllo dei collegamenti di Dreamweaver richiede di aggiornare i riferimenti all immagine. Ad esempio, se è stato modificato il formato di un immagine chiamata mia_immagine da GIF a JPEG, facendo clic su OK alla visualizzazione della richiesta, tutti i riferimenti a mia_immagine.gif del sito verranno trasformati in riferimenti a mia_immagine.jpg. Inserimento di codice HTML di Fireworks MX in un documento di Dreamweaver MX Il comando Esporta in Fireworks consente di esportare e salvare file HTML e di immagine ottimizzati nella cartella del sito di Dreamweaver desiderato. Sarà quindi possibile inserire il file in Dreamweaver. Per ulteriori informazioni sull esportazione di file di Fireworks in formato HTML, in Fireworks scegliere?. Dreamweaver consente di inserire codice HTML generato da Fireworks, completo delle immagini, delle porzioni e del codice JavaScript associato in un documento. Tale funzione facilita la creazione di elementi strutturali in Fireworks e la loro integrazione in un documento di Dreamweaver esistente. Per inserire l HTML di Fireworks in un documento di Dreamweaver: 1 In Dreamweaver, collocare il punto di inserimento nel documento, dove si desidera che inizi il codice HTML di Fireworks. 2 Eseguire una delle operazioni descritte: Scegliere Inserisci > Immagini interattive > HTML di Fireworks. Nella categoria Comuni della barra Inserisci, fare clic sul pulsante Inserisci HTML di Fireworks. 3 Nella finestra di dialogo visualizzata, fare clic su Sfoglia per selezionare il file HTML di Fireworks desiderato. 4 Selezionare l opzione Cancella il file dopo l inserimento per spostare il file HTML di Fireworks originale nel Cestino una volta completata l operazione. Selezionare questa opzione se non si ha più bisogno del file HTML di Fireworks dopo averlo inserito. Questa opzione non incide sul file PNG sorgente associato al file HTML. Nota: Se il file HTML si trova su un unità di rete, esso viene cancellato in modo permanente, anziché essere spostato nel Cestino. 5 Fare clic su OK per inserire il codice HTML, insieme con le immagini, le porzioni e il codice JavaScript associato nel documento di Dreamweaver. 154 Capitolo 6

155 Copia e incolla di HTML di Fireworks MX in Dreamweaver MX Un modo rapido per inserire immagini e tabelle generate con Fireworks in Dreamweaver consiste nel copiare è incollare il codice HTML direttamente nel documento di Dreamweaver. Per copiare e incollare codice HTML di Fireworks in Dreamweaver: 1 In Fireworks, scegliere Modifica > Copia codice HTML. 2 Seguire le istruzioni dell esportazione guidata di HTML e immagini. Quando viene richiesto, specificare la cartella del sito Dreamweaver come destinazione per le immagini esportate. Le immagini vengono esportate nella destinazione specificata e il codice HTML viene copiato negli Appunti. 3 In Dreamweaver, collocare il punto di inserimento nel documento, dove si desidera incollare il codice HTML di Fireworks, quindi scegliere Modifica > Incolla. Tutto il codice HTML e JavaScript associato ai file di Fireworks esportati viene copiato nel documento di Dreamweaver, e tutti i collegamenti alle immagini vengono aggiornati. Per esportare e incollare codice HTML di Fireworks in Dreamweaver: 1 In Fireworks, scegliere File > Esporta. 2 Nella finestra di dialogo Esporta, specificare la cartella del sito Dreamweaver come destinazione per le immagini esportate. 3 Dal menu a comparsa Salva come, scegliere HTML e immagini. 4 Nel menu a comparsa HTML, scegliere Copia negli Appunti, quindi fare clic su Salva. 5 In Dreamweaver, collocare il punto di inserimento nel documento, dove si desidera incollare il codice HTML esportato, quindi scegliere Modifica > Incolla. Tutto il codice HTML e JavaScript associato ai file di Fireworks esportati viene copiato nel documento di Dreamweaver, e tutti i collegamenti alle immagini vengono aggiornati. Aggiornamento del codice HTML di Fireworks MX inserito in Dreamweaver MX È anche possibile usare il comando File > Aggiorna HTML in Fireworks per aggiornare i file di Fireworks inseriti in Dreamweaver. Con Aggiorna HTML, è possibile modificare un immagine sorgente PNG in Fireworks ed aggiornare automaticamente tutto il codice HTML e i file di immagine esportati inseriti in un documento di Dreamweaver. Questo comando consente di aggiornare i file di Dreamweaver anche quando Dreamweaver non è in esecuzione. Per aggiornare l HTML di Fireworks inserito in Dreamweaver: 1 In Fireworks, aprire il PNG sorgente ed apportare le modifiche desiderate. 2 Scegliere File > Salva. 3 In Fireworks, scegliere File > Aggiorna HTML. 4 Ricercare il file di Dreamweaver contenente l HTML che si desidera aggiornare, quindi fare clic su Apri. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 155

156 5 Ricercare la cartella di destinazione in cui si desidera collocare i file di immagine aggiornati, quindi fare clic su Seleziona (Windows) o Scegli (Macintosh). Fireworks aggiorna il codice HTML e JavaScript nel documento di Dreamweaver. Fireworks esporta anche le immagini aggiornate associate all HTML e colloca le immagini nella cartella di destinazione specificata. Se Fireworks non riesce a trovare il codice HTML corrispondente da aggiornare, verrà chiesto all utente se desidera inserire nuovo codice HTML nel documento di Dreamweaver. Fireworks colloca la sezione JavaScript del nuovo codice all inizio del documento e la tabella HTML o il collegamento all immagine alla fine. Creazione di un album fotografico Web in Dreamweaver MX Il comando Crea album fotografico Web in Dreamweaver consente di generare automaticamente un sito Web che mostra un album delle immagini contenute in una determinata cartella. Questo comando usa JavaScript per effettuare una chiamata a Fireworks, che crea una miniatura e un immagine di grande formato per ciascuna delle immagini della cartella. Dreamweaver crea quindi una pagina Web contenente tutte le miniature, oltre ai collegamenti alle immagini di grande formato. Per usare la funzione Crea album fotografico Web, occorre che nel sistema siano installati Dreamweaver e Fireworks versione 4 o successiva. Prima di iniziare, collocare tutte le immagini per l album fotografico in un unica cartella. (Non occorre che la cartella faccia parte di un sito). Accertarsi inoltre che le estensioni dei file di immagini siano tra quelle riconosciute dal comando Crea album fotografico Web (.gif,.jpg,.jpeg,.png,.psd,.tif, or.tiff). Le immagini con estensioni non riconosciute non sono incluse nell album fotografico. Per creare un album fotografico Web: 1 In Dreamweaver, scegliere Comandi > Crea album fotografico Web. 2 Nella casella di testo Titolo album fotografico digitare un titolo. Il titolo verrà visualizzato in un rettangolo grigio nella parte superiore della pagina contenente le miniature. Se lo si desidera, è possibile digitare fino a due righe di testo aggiuntive che verranno visualizzate al di sotto del titolo, nelle caselle di testo Informazioni sottotestata e Altre informazioni. 3 Scegliere la cartella contenente le immagini sorgente facendo clic sul pulsante Sfoglia accanto alla casella di testo Cartella immagini sorgente. Fare quindi clic sul pulsante Sfoglia accanto alla casella di testo Cartella di destinazione per scegliere (o creare) una cartella di destinazione in cui collocare tutte le immagini e i file HTML esportati. È necessario che la cartella di destinazione non contenga già un album fotografico altrimenti, se qualcuna delle nuove immagini avesse lo stesso nome delle immagini usate in precedenza, i file e le immagini esistenti potrebbero essere sovrascritti. 4 Specificare le opzioni di visualizzazione per le miniature: Scegliere la dimensione delle miniature dal menu a comparsa Dimensioni miniatura. Le immagini vengono scalate per adattarle alle dimensioni in pixel indicate. Per visualizzare il nome file di ciascuna immagine originale al di sotto della miniatura corrispondente, selezionare Mostra nome file. Specificare il numero di colonne per la tabella in cui sono visualizzate le miniature. 156 Capitolo 6

157 5 Scegliere il formato delle miniature dal menu a comparsa Formato miniatura. GIF WebSnap 128 crea miniature GIF che usano una tavolozza adattata Web fino a 128 colori. GIF WebSnap 256 crea miniature GIF che usano una tavolozza adattata Web fino a 256 colori. JPEG Migliore qualità crea miniature JPEG di qualità relativamente superiore e dimensioni del file maggiori. JPEG Minori dimensioni file crea miniature JPEG di qualità relativamente inferiore e dimensioni del file minori. 6 Scegliere un formato per le immagini di grandi dimensioni dal menu a comparsa Formato fotografia. Per ciascuna delle immagini originali viene creata un immagine di grandi dimensioni del formato specificato. Per le immagini di grandi dimensioni è possibile specificare un formato diverso da quello delle miniature. Nota: Il comando Crea album fotografico Web non consente di usare i file di immagine originali come immagini di grande formato, perché le immagini originali in formati diversi da GIF e JPEG potrebbero non essere visualizzate correttamente in tutti i browser. Si noti che se le immagini originali sono file JPEG, le dimensioni o la qualità delle immagini generate possono differire da quelle dei file originali. 7 Scegliere una percentuale di dimensionamento per le immagini di grandi dimensioni. Impostare Scala al 100% per creare immagini di grande formato che abbiano le stesse dimensioni degli originali. La percentuale di dimensionamento viene applicata a tutte le immagini; se le immagini originali non sono tutte delle stesse dimensioni, è possibile che il risultato non sia quello desiderato. 8 Selezionare Crea pagina di navigazione per ciascuna fotografia per creare una pagina Web per ciascuna immagine sorgente, contenente tre collegamenti di navigazione chiamati Indietro, Home e Avanti. Se si seleziona questa opzione, le miniature saranno collegate alle pagine di navigazione. Se non si seleziona questa opzione, le miniature saranno collegate direttamente alle immagini di grandi dimensioni. 9 Fare clic su OK per creare il codice HTML e i file di immagine per l album fotografico Web. Viene lanciato Fireworks (se non è già in esecuzione), che crea le miniature e le immagini di grande formato. Se il numero di file di immagine da elaborare è elevato, l operazione può richiedere diversi minuti. Al termine dell elaborazione, il controllo passa nuovamente a Dreamweaver, che crea le pagine contenenti le miniature. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 157

158 10 Viene visualizzata una finestra di dialogo con il messaggio Album creato. Fare clic su OK. Sarà necessario attendere alcuni secondi prima che venga visualizzata la pagina dell album fotografico. Le miniature sono visualizzate in ordine alfabetico, in base al nome del file. Nota: Se si fa clic sul pulsante Annulla nella finestra di dialogo di Dreamweaver dopo che l elaborazione ha avuto inizio, il processo di creazione dell album fotografico non verrà interrotto; tuttavia non verrà visualizzata la pagina principale dell album fotografico. Uso di Dreamweaver MX e Macromedia Flash MX È possibile inserire facilmente un filmato di Macromedia Flash (file SWF) in un documento di Dreamweaver. Sarà quindi possibile usare la finestra di ispezione Proprietà per impostare le opzioni di riproduzione e di visualizzazione sul Web per il file SWF. Per ulteriori informazioni sulla procedura di inserimento di un filmato di Macromedia Flash in Dreamweaver, in Dreamweaver scegliere? > Inserimento di filmati Flash. La funzione di controllo dei collegamenti in Dreamweaver consente di modificare facilmente i collegamenti dei file inseriti in un documento di Dreamweaver, compresi i filmati di Macromedia Flash. È possibile aggiornare il collegamento nel filmato SWF, quindi riportare la modifica nel file FLA di Macromedia Flash. Per informazioni, vedere Aggiornamento dei collegamenti in un file SWF di Flash MX on page 160. Se si dispone di Macromedia Flash MX e Dreamweaver MX, è anche possibile aggiornare un filmato inserito in un documento di Dreamweaver. Quando entrambe le applicazioni sono installate sul computer e si seleziona un filmato SWF nel documento di Dreamweaver, nella finestra di ispezione Proprietà viene visualizzato un pulsante Modifica attivo. Se non si dispone di Macromedia Flash MX, il pulsante Modifica è disabilitato. Quando si fa clic su Modifica, Dreamweaver lancia Macromedia Flash MX per trovare il file FLA di Macromedia Flash per il file SWF selezionato. Se le Design Notes sono abilitate per il sito di Dreamweaver, le informazioni relative al file sorgente originale vengono archiviate automaticamente in una Design Note per il file SWF quando lo si esporta in un sito di Dreamweaver. Se Macromedia Flash MX non è in grado di trovare il file FLA di Macromedia Flash, verrà chiesto all utente di indicarne la posizione. Non è possibile aggiornare direttamente un file SWF occorre modificare il file sorgente, quindi esportarlo come file di filmato SWF. 158 Capitolo 6

159 Dopo aver lanciato un documento sorgente da modificare, è possibile lavorare in Macromedia Flash MX per apportare delle modifiche ad un filmato. Al termine, Macromedia Flash MX aggiorna il file FLA di Macromedia Flash, esporta nuovamente il file del filmato, si chiude e restituisce il controllo al documento di Dreamweaver. È possibile visualizzare l SWF aggiornato nel documento. Per ulteriori informazioni, vedere la sezione successiva e Aggiornamento dei collegamenti in un file SWF di Flash MX a pagina 160. Modifica di un filmato di Macromedia Flash MX da Dreamweaver MX Non è possibile modificare direttamente un file SWF in Dreamweaver. Se si desidera apportare delle modifiche a un SWF esportato, è necessario selezionare il segnaposto per filmati di Macromedia Flash nel documento di Dreamweaver e lanciare Flash MX per modificare il filmato. Per lanciare e modificare un filmato di Macromedia Flash (file SWF) inserito da Dreamweaver: 1 In Dreamweaver, scegliere Finestra > Proprietà per aprire la finestra di ispezione Proprietà, se non è già aperta. 2 Nel documento di Dreamweaver, effettuare una delle seguenti operazioni: Fare clic sul segnaposto per filmati di Macromedia Flash per selezionarlo; quindi, nella finestra di ispezione Proprietà, fare clic su Modifica. Tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh), fare doppio clic sul segnaposto del filmato che si desidera modificare. Fare clic con il pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sul filmato desiderato, quindi scegliere Modifica con Flash dal menu di scelta rapida. Dreamweaver lancia Macromedia Flash MX ed apre il file FLA per la modifica. Se Dreamweaver non è in grado di trovare il file FLA, verrà richiesto all utente di aprirlo. Nota: Se il file FLA o SWF è bloccato, Dreamweaver chiede se si desidera ritirare il file, annullare la richiesta o visualizzare il file. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 159

160 3 In Macromedia Flash MX, modificare il filmato. La finestra Documento indica che si sta modificando un filmato da Dreamweaver. 4 Al termine, fare clic su Fatto. Le modifiche apportate al file sorgente FLA vengono salvate, e il file SWF viene aggiornato. 5 Eseguire una delle operazioni descritte: Per visualizzare il file SWF aggiornato nel documento, fare clic su Riproduci nella finestra di ispezione Proprietà. Per visualizzare un anteprima della pagina in una finestra del browser, premere F12. Aggiornamento dei collegamenti in un file SWF di Flash MX È possibile aggiornare un collegamento in un file SWF usando la vista Mappa del sito. Per ulteriori informazioni sulla vista Mappa del sito, in Dreamweaver selezionare? > Uso di Dreamweaver > Uso della mappa del sito. Prima che sia possibile creare una mappa del sito, è necessario impostare una home page per il sito. Nella vista Mappa del sito, è necessario visualizzare i file dipendenti per aggiornare un link in un file SWF. Per impostazione predefinita, la mappa del sito non visualizza i file dipendenti. Per ulteriori informazioni sulla visualizzazione dei file dipendenti, in Dreamweaver scegliere? > Uso di Dreamweaver > Visualizzazione e occultamento dei file della mappa del sito. Tutti i link aggiornati da Dreamweaver nel file SWF sono trasferiti al documento sorgente FLA quando questo viene lanciato e modificato. Dreamweaver registra automaticamente tutte le modifiche ai collegamenti del file SWF nelle Design Notes. Quando Macromedia Flash MX passa le modifiche al file FLA, Dreamweaver le elimina dalle Design Notes. 160 Capitolo 6

161 Per aggiornare il collegamento a un URL in un file SWF: 1 Impostare un home page per il sito, se non lo si è già fatto. 2 Aprire la vista Mappa del sito. 3 Per visualizzare i file dipendenti, scegliere Visualizza > Mostra file dipendenti (Windows) oppure Sito > Vista mappa del sito > Mostra file dipendenti (Macintosh). Il collegamento appare al di sotto del file SWF. 4 Per modificare il link effettuare una delle seguenti operazioni: Per modificare il collegamento nell SWF selezionato, fare clic con il pulsante destro del mouse, quindi scegliere Cambia collegamento. Nella casella di testo URL della finestra di dialogo che viene visualizzata, digitare il percorso della nuova URL. Per aggiornare tutte le istanze del collegamento, scegliere Sito > Cambia tutti i collegamenti del sito. Nella finestra di dialogo che viene visualizzata, nella casella di testo Cambia tutti i collegamenti a, ricercare o digitare il percorso del collegamento che si sta modificando, e nella casella di testo In collegamenti a ricercare o digitare il percorso della nuova URL. 5 Fare clic su OK. Integrazione di Dreamweaver MX con la famiglia di prodotti Macromedia Studio MX 161

162 162 Capitolo 6

163 Parte IV Flash MX Parte IV I capitoli della quarta parte presentano Macromedia Flash MX, illustrano un esercitazione e descrivono il funzionamento di Flash MX all interno della famiglia di prodotti Studio MX. Questa parte è costituita dai seguenti capitoli: Capitolo 7, Macromedia Flash MX Capitolo 8, Esercitazione di Flash MX Capitolo 9, Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX

164

165 CAPITOLO 7 Macromedia Flash MX Macromedia Flash MX è lo strumento standard professionale per la creazione di codice per esperienze Web di grande impatto. La potenza e la flessibilità di Flash rappresentano un mezzo ideale per liberare la fantasia nella creazione di logo animati, controlli di navigazione per i siti Web, animazioni lunghe, interi siti Web e applicazioni Web. Macromedia Flash MX aumenta la creatività fornendo ai designer modelli e librerie predefiniti. Usando i simboli e le librerie condivise, è possibile creare immagini potenti pur mantenendo ridotte le dimensioni dei file. I miglioramenti della linea temporale facilitano ulteriormente la creazione di immagini animate, mentre il miglior supporto video consente di aggiungere clip di filmati alle proprie creazioni. Gli utenti e le aziende Internet si aspettano di più dai loro investimenti nella tecnologia Internet, e la possibilità di offrire vero valore agli utenti sta costringendo molte aziende a ricercare modelli di applicazioni Web più completi che combinino la potenza del desktop tradizionale con la distribuzione e la ricchezza di contenuti delle applicazioni Web. Le aziende prevedono anche una crescita dell utilizzo di servizi Web; secondo tali previsioni, si sta andando verso un mondo in cui le applicazioni avranno bisogno di condividere funzionalità e dati su molti tipi di client. Queste tendenze stanno spingendo il settore verso i rich-client del futuro. Macromedia Flash MX e Macromedia Flash Player stanno guidando questa nuova ondata di innovazioni nei contenuti e nelle applicazioni Internet client-side. La sezione seguente descrive come le nuove funzionalità di Macromedia Flash MX abilitano i componenti cruciali delle tecnologie rich-client. Novità di Macromedia Flash MX I creatori di contenuto che richiedono un elevato livello di controllo e integrazione con gli strumenti di progettazione standard dispongono ora di un'applicazione creativa senza paragoni per la produzione di contenuti ricchi di media. Le nuove potenti funzioni consentono agli sviluppatori di applicazioni di accedere a nuove funzionalità che rendono Macromedia Flash MX un ambiente di sviluppo applicativo affidabile e stimolante. I componenti predefiniti forniscono elementi di interfaccia a trascinamento riutilizzabili per il contenuto Macromedia Flash, come caselle di riepilogo, pulsanti di scelta e barre di scorrimento. Gli sviluppatori possono lavorare con strumenti di scripting e debug avanzati e riferimenti al codice incorporato per la distribuzione rapida di complesse applicazioni Web. 165

166 Per tutti gli utenti di Macromedia Flash MX La possibilità di salvare documenti Macromedia Flash MX in formato Flash 5 consente di aggiornare l'applicazione e continuare a collaborare con progettisti che lavorano su progetti Flash 5. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Salvataggio di documenti Flash. Il contenuto accessibile che può essere visto e ascoltato da persone disabili è ora facile da sviluppare, con conseguente espansione del numero di fruitori dei filmati e delle applicazioni Flash. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Creazione di contenuto accessibile. Il supporto per il coreano e il cinese consente di raggiungere gli utenti in più aree geografiche del mondo. Caratteristiche quali i campi di testo verticali e il supporto di Unicode semplificano la creazione di contenuti in lingue asiatiche. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Creazione di testo. Per i creatori di contenuti di Macromedia Flash MX Macromedia Flash MX migliora la creatività fornendo ai creatori di contenuti un maggiore controllo e funzioni di integrazione estese con una serie completa di strumenti di progettazione. Le nuove funzioni consentono ai creatori di contenuti di creare rapidamente un'ampia gamma di contenuti. Anziché concentrarsi sul funzionamento di Flash, ora possono dedicare più attenzione ai progetti in lavorazione. I miglioramenti della linea temporale, quali cartelle per organizzare i livelli, risposta del puntatore migliorata e la possibilità di ridimensionare, tagliare e incollare più fotogrammi rendono più semplice l'uso della linea temporale, consentendo di lavorare più rapidamente e agevolmente. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Informazioni sulla linea temporale. La funzione migliorata di modifica dei simboli in posizione semplifica la creazione dei documenti consentendo ai creatori di contenuti di lavorare sui simboli nel contesto dei filmati. Nuovi controlli sullo stage semplificano ulteriormente la modifica dei simboli in posizione. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Modifica dei simboli. I miglioramenti della libreria eliminano le fasi critiche della produzione semplificando la creazione e la gestione dei simboli della libreria. Spostare i simboli o le cartelle da un documento Macromedia Flash all'altro o creare nuovi simboli di libreria è ora facile grazie alla funzione di trascinamento. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Uso di librerie comuni. La nuova finestra di dialogo Risolvi il conflitto tra librerie semplifica le operazioni di aggiunta dei simboli di libreria a un documento con un simbolo di libreria con lo stesso nome. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Risoluzione dei conflitti tra gli elementi di una libreria. Gli elementi di librerie condivise ottimizzano la creazione dei filmati Macromedia Flash consentendo di condividere gli elementi delle librerie con altri documenti Macromedia Flash durante la creazione e la riproduzione di un filmato in Macromedia Flash Player. Le librerie runtime condivise consentono di creare file di dimensioni inferiori e di aggiornare facilmente più filmati allo stesso tempo, consentendo di visualizzare nel filmato simboli di libreria e oggetti condivisi memorizzati su un'intranet o su Internet. Le librerie authortime condivise ottimizzano i tempi di lavoro consentendo di rintracciare, aggiornare e scambiare i simboli contenuti in qualsiasi documento Macromedia Flash disponibile sul computer o sulla rete. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso di elementi di una libreria condivisi. 166 Capitolo 7

167 I miglioramenti dell'area di lavoro rendono l'uso di Flash MX più semplice e intuitivo per i creatori di contenuti principianti e per quelli più esperti. Le funzioni di uso più comune sono ora disponibili in un'unica finestra di ispezione Proprietà sensibile al contesto, eliminando la necessità di aprire altri pannelli e finestre di dialogo. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Pannelli e finestra di ispezione Proprietà. Altre funzioni di uso comune sono ora raccolte in pannelli di facile ridimensionamento che possono essere agganciati e sganciati secondo le proprie necessità per aumentare lo spazio disponibile sullo schermo. I creatori di contenuti possono anche salvare layout di pannelli personalizzati per adeguare l'area di lavoro Macromedia Flash alle proprie esigenze. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso dei pannelli. I nuovi modelli per principianti inclusi con Macromedia Flash MX semplificano la creazione di nuovi documenti eliminando molte delle comuni operazioni necessarie per la creazione di un nuovo documento. Per ulteriori informazioni in Flash scegliere? > Using Flash > Creazione di un nuovo documento. È anche possibile creare modelli personalizzati a partire da documenti. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Salvataggio di documenti Flash. I miglioramenti della funzione Mixer colori rendono la creazione, la modifica e l'uso dei colori e delle sfumature ancora più facile. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Uso dei colori uniformi e del riempimento sfumato del pannello Tavolozza. Lezioni complete per l'uso delle nuove funzioni di Macromedia Flash MX consentono di acquisire familiarità con i suoi strumenti e con le sue potenti funzioni. Per iniziare le lezioni, in Flash scegliere? > Lezioni > Introduzione a Flash. Il supporto video espande le possibilità creative per i filmati Macromedia Flash consentendo di importare clip video in numerosi formati. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Importazione di video. Lo strumento Trasformazione libera apre nuove possibilità all'espressione creativa consentendo di eseguire varie trasformazioni di un oggetto in un unico passaggio. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Trasformazione libera di oggetti. Il modificatore Involucro facilita la creazione di oggetti grafici, altrimenti difficili da realizzare, perché consente all'utente di deformare e distorcere la forma del relativo riquadro di limitazione. Per ulteriori informazioni in Flash scegliere? > Modifica di forme con il modificatore Involucro. La modifica a livello di pixel aggiunge precisione e accuratezza al lavoro consentendo di allineare gli oggetti con una precisione a livello di pixel nei documenti Macromedia Flash. È possibile posizionare con esattezza gli oggetti o i punti degli oggetti nel punto in cui si desidera che appaiano nel filmato finale. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Agganciamento ai pixel. La funzione Dividi consente di apportare facilmente modifiche creative a singoli caratteri di testo senza dover convertire i testi in simboli, semplificando così la creazione di animazioni e progetti complessi. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Informazioni sulla trasformazione del testo. Il comando Distribuisci sui livelli distribuisce rapidamente e automaticamente il numero desiderato di oggetti selezionati sui rispettivi livelli. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Distribuzione degli oggetti sui livelli per l'animazione interpolata. Macromedia Flash MX 167

168 I livelli maschera del clip filmato consentono di creare maschere animate posizionando un clip filmato su un livello maschera. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso dei livelli maschera. È anche possibile usare ActionScript per creare una maschera animata con un clip filmato. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso di clip filmato come maschere. Il controllo audio avanzato ottimizza la qualità della produzione dei filmati consentendo di sincronizzare gli eventi del filmato con l'inizio o la fine dei clip audio. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Informazioni sull evento onsoundcomplete. Per gli sviluppatori di Macromedia Flash MX Il sofisticato ambiente di Macromedia Flash MX include strumenti di scripting e debug migliorati, riferimenti al codice incorporato e componenti predefiniti usabili per sviluppare rapidamente complesse applicazioni Web. Il linguaggio di scripting ActionScript migliorato consente di eseguire il caricamento dinamico di file JPEG e di file audio MP3 e di aggiornare i file in qualsiasi momento senza dover ripubblicare il filmato. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Inserimento di immagini in Flash e Importazione dell audio. I punti di ancoraggio ottimizzano la navigazione nei filmati Flash mediante l'uso dei pulsanti Avanti e Indietro dei browser per passare da un punto di ancoraggio all'altro. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso degli ancoraggi con nome. L'editor ActionScript migliorato consente ai principianti e ai più esperti di sfruttare tutto il potenziale degli ActionScript senza difficoltà. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Informazioni sulla creazione di script in ActionScript. I suggerimenti sul codice velocizzano lo sviluppo del contenuto di ActionScript rilevando automaticamente il comando digitato dall'utente e offrendo suggerimenti per individuare la sintassi corretta del comando. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso dei suggerimenti per il codice. I componenti di Macromedia Flash accelerano lo sviluppo di applicazioni Web fornendo elementi di interfaccia a trascinamento riusabili per il contenuto Flash, ad esempio caselle di riepilogo, pulsanti di scelta e barre di scorrimento. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Uso dei componenti. Il Debugger ottimizzato riunisce le funzioni di debug già presenti nel Debugger di ActionScript perché consente di impostare punti di interruzione e passi singoli nel codice mentre viene eseguito. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Prova di un filmato. Il modello a oggetti integra clip filmato, pulsanti e campi di testo nel linguaggio di scripting ActionScript. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Uso di clip filmato e pulsanti e Controllo del testo con ActionScript. Il modello a eventi potenzia le capacità di gestione degli eventi di ActionScript e ne semplifica l'uso. Il modello a eventi offre ora un controllo più sofisticato sugli eventi causati dall'utente, quali lo spostamento del mouse e l'immissione di dati dalla tastiera. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Controllo dell esecuzione di ActionScript. La funzione Anteprima dal vivo dei componenti consente di visualizzare in modo attivo le modifiche ai componenti dell'interfaccia utente nell'ambiente di creazione. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Anteprima dal vivo dei componenti. 168 Capitolo 7

169 Il supporto di testo avanzato consente di gestire nel modo desiderato ogni proprietà di un oggetto di testo, inclusi la formattazione, le dimensioni e il layout mediante ActionScript. Per ulteriori informazioni in Flash scegliere? > Uso di Flash > Uso del testo. La nuova interfaccia API per il disegno ottimizza le potenzialità di programmazione orientata agli oggetti di ActionScript offrendo un insieme di funzioni per il disegno di forme mediante l'oggetto MovieClip che consentono il controllo programmatico sul modulo di rendering di Macromedia Flash MX. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Informazioni sull oggetto MovieClip. Le istruzioni Strict Equality e Switch consentono una definizione concisa di istruzioni per il controllo del flusso quali if, then e else, migliorando ulteriormente il supporto di ActionScript per ECMA-262. Per ulteriori informazioni in Flash scegliere Guida > Dizionario di ActionScript, quindi consultare le rispettive voci. Le funzioni setinterval e clearinterval consentono ai creatori di contenuti di impostare una routine generica richiamata a intervalli regolari per tutta la durata di un filmato. Per ulteriori informazioni, in Flash scegliere? > Dizionario di ActionScript, quindi consultare le rispettive voci. La conversione degli oggetti String, Array e XML in oggetti nativi migliora le prestazioni ottimizzando gli oggetti Number, Boolean, Object, String, Array e XML di ActionScript. Le prestazioni di Macromedia Flash Player risultano in tal modo centuplicate. Per ulteriori informazioni, in Flash scegliere? > Dizionario di ActionScript, quindi consultare le rispettive voci. La compressione SWF usa il codice di compressione Z-lib esistente per ottimizzare i tempi di scaricamento di contenuti Macromedia Flash complessi. Per ulteriori informazioni, in Flash scegliere? > Uso di Flash > Pubblicazione. Offerta di intensi contenuti Web con Macromedia Flash Player Macromedia Flash Player è un ambiente di runtime ad alte prestazioni per l elaborazione di codice, contenuti grafici e audio e comunicazioni di dati. Il suo funzionamento è indipendente dal sistema operativo, dall architettura dei chip e dal browser Web e supporta tutti i più diffusi ambienti per desktop e workstation. Oltre il 98% degli utenti online hanno Macromedia Flash Player installato, e sono sempre più i dispositivi, come PDA e smart phone, che lo supportano. Questo fa di Macromedia Flash Player lo strumento più usato dagli sviluppatori per offrire contenuti complessi nel modo più efficiente al maggior numero di utenti. Le avanzate risorse tecniche di Macromedia Flash MX e di Macromedia Flash Player si uniscono per offrire agli utenti il più potente ambiente di sviluppo Web e le più avanzate funzionalità oggi disponibili. Tra queste funzioni è possibile ricordare: La grafica vettoriale consente di ridurre di molto le dimensioni dei file, aumentare la velocità di trasmissione e scalare più facilmente l output per un gran numero di formati e di dispositivi. L uso della tecnologia streaming consente di caricare immediatamente i primi fotogrammi del contenuto, migliorando sia le prestazioni reali dell applicazione, sia quelle percepite. Il caching dei file, compresi i dati audio e video, consente il caricamento immediato di un applicazione quando l utente vi ritorna durante una sessione. Macromedia Flash MX 169

170 Gli oggetti condivisi sul computer client memorizzano dati complessi per poterli riutilizzare nel corso di una o più sessioni applicative. Le transizioni visive dinamiche caricano i nuovi elementi di interfaccia in fase di esecuzione senza aggiornare l intera schermata o pagina. I componenti e i comportamenti dell interfaccia utente personalizzati consentono di creare controlli di interfaccia e di aggiungervi comportamenti e dati dinamici mediante ActionScript. La comunità degli sviluppatori di Macromedia Flash mette a disposizione centinaia di componenti di interfaccia gratuiti. I servizi Web di Macromedia Flash possono ora essere sviluppati in Macromedia ColdFusion MX, Sun Java e Microsoft.Net per richiamare logica e ottenere dati da servizi creati con ActionScript o CMFL server-side e usati su Macromedia ColdFusion MX Server, oltre a servizi creati con Java Servlets, Java Classes, EJBs, e oggetti.net standard. Il supporto di base dell integrazione dati è ora disponibile grazie al comando LoadVariables, insieme ad un migliore supporto del caricamento e dell uso di documenti XML. Macromedia Flash MX può trattare dati generati da quasi tutti gli ambienti applicativi server-side. Possibilità di eseguire applicazioni Macromedia Flash MX autonome offline fornendo l applicazione, i dati e Macromedia Flash Player. Apprendimento di Macromedia Flash MX Il pacchetto Macromedia Flash MX contiene una varietà di media che consentono di apprendere rapidamente l'uso del programma e di acquisire esperienza nella creazione di filmati Macromedia Flash. Questi media includono una versione elettronica del manuale, un pannello relativo alla Guida di riferimento di ActionScript, lezioni interattive e un sito Web regolarmente aggiornato. Inoltre, i creatori di contenuti e gli sviluppatori hanno a loro disposizione numerose risorse di altri produttori. I manuali stampati ed elettronici di Macromedia Flash MX Le informazioni contenute nella versione stampata di Uso di Flash sono rivolte principalmente agli utenti che hanno iniziato l apprendimento di Macromedia Flash MX da 3-6 mesi, e riguardano l uso degli strumenti e dei comandi di Macromedia Flash MX. Le lezioni e le esercitazioni in linea integrano tali informazioni. I capitoli su ActionScript illustrano come scrivere istruzioni e creare interazioni con il linguaggio di scripting di Macromedia Flash. Uso della Guida di Macromedia Flash Macromedia Flash MX dispone di due Guide in linea: Uso di Flash e il Dizionario di ActionScript. Per usare al meglio la Guida in linea di Macromedia Flash, si consiglia di usare Netscape Navigator versione 4.0 o superiore oppure Microsoft Internet Explorer versione 4.0 o superiore in Windows, e Netscape Navigator versione 4.0 o superiore oppure Microsoft Internet Explorer 4.5 o superiore in Macintosh. Dalle versioni 3.0 dei browser, tutti i contenuti dei filmati e della Guida di Macromedia Flash sono comunque accessibili, ma alcune opzioni, come ad esempio la funzione Trova, non saranno operative. L esecuzione contemporanea di Macromedia Flash MX e della Guida di Macromedia Flash su un Macintosh può richiedere fino a 32 MB di memoria, a seconda dei requisiti di memoria del browser. 170 Capitolo 7

171 Per usare la Guida di Macromedia Flash: 1 Scegliere una delle guide in linea disponibili nel menu?. 2 Per spostarsi tra gli argomenti della guida, avvalersi di una delle seguenti funzioni: Il sommario organizza le informazioni per argomento. Fare clic sulle voci principali per visualizzare gli argomenti attinenti. L indice analitico organizza le informazioni come un tradizionale indice stampato. Fare clic su un termine per passare ad un argomento correlato. La funzione di ricerca trova qualsiasi stringa di caratteri in tutto il testo degli argomenti. Questa funzione richiede un browser 4,0 o versioni successive abilitato per Java. Per cercare una frase, digitare la frase nella casella di immissione testo. Per individuare i file che contengono due parole chiave, ad esempio livelli e stile, separare i due termini con un segno più (+). Per cercare file contenenti una frase completa, separare le parole con uno spazio. I pulsanti Precedente e Successivo consentono di spostarsi attraverso gli argomenti di una sezione. L icona di Macromedia Flash MX consente di collegarsi al sito Web del Centro di supporto Flash. Macromedia Flash MX 171

172 Uso delle lezioni e delle esercitazioni di Macromedia Flash MX Le lezioni di Macromedia Flash MX forniscono istruzioni interattive rapide che introducono le funzioni principali di Macromedia Flash MX, consentendo di esercitarsi su esempi isolati. Se è la prima volta che si usa Macromedia Flash MX o se si è usato solo un gruppo limitato di funzioni del programma, iniziare con le lezioni. Le esercitazioni di Macromedia Flash MX forniscono approfondite istruzioni interattive che aiutano ad acquisire familiarità con Macromedia Flash MX e ad usare al meglio alcune potenti funzioni di Macromedia Flash MX. L'esercitazione Introduzione a Flash MX introduce il flusso di lavoro di Macromedia Flash MX illustrando come creare un semplice filmato. Il contenuto dell'esercitazione presuppone che si siano compresi gli argomenti trattati nelle lezioni. L'esercitazione Introduzione a ActionScript fornisce le nozioni fondamentali di ActionScript, il linguaggio orientato agli oggetti usato da Macromedia Flash MX per aumentare l'interattività dei filmati. L'esercitazione Introduzione ai componenti è destinata agli utenti di Macromedia Flash MX meno esperti o di livello intermedio e illustra l'uso dei componenti per creare rapidamente una semplice applicazione. Prima di passare a questa esercitazione, è opportuno completare le lezioni di Macromedia Flash MX, l'esercitazione Introduzione a Macromedia Flash MX e l'esercitazione Introduzione a ActionScript per acquisire familiarità con ActionScript. Per iniziare le lezioni: Scegliere? > Lezioni > Introduzione a Flash. Per iniziare un'esercitazione, eseguire una delle operazioni descritte: Scegliere? > Esercitazioni > Introduzione a Flash MX. Scegliere? > Esercitazioni > Introduzione a ActionScript. Scegliere? > Esercitazioni > Introduzione ai componenti. La prima esercitazione è anche disponibile nel capitolo 8 di questo manuale, Introduzione all esercitazione di Macromedia Flash MX. Uso di altre risorse Macromedia Il sito Web del Centro di supporto Flash viene aggiornato regolarmente con le più recenti informazioni su Macromedia Flash, consigli di utenti esperti, argomenti avanzati, esempi, suggerimenti e altri aggiornamenti. Per reperire le ultime notizie su Flash e usare al meglio il programma, visitare regolarmente il sito Web all indirizzo flash. Il pannello della Guida di riferimento di ActionScript fornisce informazioni dettagliate sulla sintassi e l'uso di ActionScript. La struttura gerarchica delle informazioni consente di trovare facilmente le informazioni desiderate. Per visualizzare il pannello della Guida di riferimento di ActionScript: Scegliere Finestra > Riferimenti. 172 Capitolo 7

173 Risorse di altri produttori Macromedia consiglia diversi siti Web che si collegano a risorse di altri produttori su Macromedia Flash MX. Siti della comunità di Macromedia Flash: Pubblicazioni su Macromedia Flash: Nozioni di programmazione orientata agli oggetti: Macromedia Flash MX 173

174 174 Capitolo 7

175 CAPITOLO 8 Esercitazione di Flash MX L'esercitazione illustra la procedura per ottenere, attraverso Macromedia Flash MX, un'esperienza Web veramente stimolante. Completando l'esercitazione si apprenderà come progettare un filmato, dall'apertura di un nuovo documento alla pubblicazione del filmato per la riproduzione sul Web. L esercitazione richiede circa tre ore, in base al grado di esperienza dell utente, e prende in esame la procedura di esecuzione delle seguenti operazioni: Analisi di un filmato finale Definizione delle proprietà del documento e creazione di una sfumatura Creazione di un disegno vettoriale e applicazione di maschere Interpolazione di effetti bitmap all'interno di un clip filmato Caricamento di testo dinamico Elaborazione di pulsanti e aggiunta di funzioni di navigazione Inserimento di suoni evento e audio in streaming Prova e pubblicazione del filmato Si consiglia di eseguire in sequenza le otto sezioni che compongono l'esercitazione; in alternativa, è possibile scegliere soltanto le sezioni che risultano di interesse. Nel caso si intendesse completare l'esercitazione non in sequenza, tenere presente che le sezioni successive presuppongono l'acquisizione delle abilità illustrate in quelle precedenti. Conoscenze preliminari Prima di procedere con l'esercitazione, completare le sette lezioni incluse nella Guida di Flash. Queste lezioni interattive, create con Macromedia Flash MX, presentano all'utente i concetti necessari per completare l'esercitazione. Gli argomenti delle lezioni sono i seguenti: Guida introduttiva di Flash Illustrazione in Flash Aggiunta e modifica del testo Creazione e modifica di simboli Livelli Creazione di pulsanti Creazione di animazioni interpolate Per eseguire una lezione, scegliere? > Lezioni, quindi selezionarla dall'elenco. 175

176 Visualizzazione del filmato finale È possibile aprire una versione parzialmente completata del filmato di esercitazione per comprendere meglio quale sarà l'aspetto del filmato finale. Vengono illustrate le seguenti operazioni: Analisi del filmato finale mediante la finestra di ispezione Proprietà ed Esplora filmato. Esame di un clip filmato e del suo rapporto con il filmato principale Visualizzazione dei tipi di risorse incluse nel filmato 1 Nella cartella principale di Flash, individuare la cartella Tutorials/FlashIntro e fare doppio clic sul file stiletto.swf per visualizzare il filmato finale nel lettore Flash Player autonomo. I filmati Flash pubblicati hanno estensione SWF; i documenti nell'ambiente di programmazione hanno estensione FLA. 2 All'apertura del filmato, osservare le tre viste che mostrano la dissolvenza in entrata e in uscita dell'auto. La creazione dell'animazione avverrà tramite interpolazione degli effetti bitmap all'interno di un clip filmato. 3 Ascoltare il suono riprodotto continuamente durante l'esecuzione del filmato. È un esempio di audio in streaming: 4 Passare il cursore sopra i tre pulsanti lungo il margine inferiore sinistro della finestra per visualizzare l'effetto rollover e per riprodurre i suoni evento associati a ciascun pulsante. 5 Fare clic su un pulsante per visualizzare il collegamento associato, quindi chiudere la finestra di browser che viene aperta e tornare al file SWF. 6 Dopo aver visualizzato il filmato, fare clic sulla relativa casella di chiusura. 176 Capitolo 8

177 Analisi del file stiletto.fla Può risultare utile analizzare il file FLA finale per esaminare le modalità di progettazione del documento. Per analizzare il file, è possibile visualizzare le proprietà dell'oggetto, visualizzare la linea temporale e lo Stage, esaminare le risorse della libreria oppure usare Esplora filmato. 1 In Macromedia Flash, scegliere File > Apri. Dalla cartella principale di Flash, aprire il file Tutorials/FlashIntro/stiletto.fla. All'interno dell'ambiente di programmazione verrà visualizzato il filmato finale dell'esercitazione. Trascinare la barra di separazione tra lo Stage e la linea temporale. 2 Per visualizzare tutti i livelli della linea temporale principale, trascinare la barra di separazione tra questa e lo Stage. 3 Nella linea temporale, sbloccare il livello Copia e il livello Immagini. Esercitazione di Flash MX 177

178 Visualizzazione delle proprietà documento La finestra di ispezione Proprietà consente di visualizzare le specifiche degli oggetti selezionati. Tali specifiche dipendono dal tipo di oggetto selezionato. Selezionando un oggetto di testo, per esempio, verranno visualizzate le impostazioni per visualizzare e modificare gli attributi del testo. 1 Se la finestra di ispezione Proprietà non è già aperta, scegliere Finestra > Proprietà per visualizzarla. 2 Sullo stage, se necessario scorrere verso il basso per selezionare il blocco rettangolare nel quale, all'interno del file SWF completo, era visualizzato il testo descrittivo. Il testo, che viene caricato in un campo di testo dinamico da un file TXT esterno, non è visualizzato nel file FLA. Casella di testo Nella finestra di ispezione Proprietà è possibile visualizzare, tra gli altri, gli attributi relativi alle dimensioni, allo stile e al colore del testo. Se la finestra di ispezione Proprietà non è visualizzata completamente, fare clic sul triangolo bianco nell'angolo inferiore destro. 3 Selezionare l'auto nello Stage. Le impostazioni del clip filmato sostituiranno le impostazioni del testo. I clip filmato sono simboli con linee temporali indipendenti. È possibile considerarli come filmati all'interno di altri filmati. 178 Capitolo 8

179 Visualizzazione del clip filmato Si procederà ora all'attivazione della modalità di modifica dei simboli, per visualizzare la linea temporale di un clip filmato. 1 Nello Stage, fare doppio clic sul clip filmato dell'auto. Come appreso nella lezione dedicata alla creazione di animazioni interpolate, le modifiche a un'animazione vengono definite all'interno di fotogrammi chiave. Esaminando la linea temporale, notare quali livelli comprendono fotogrammi chiave e quali fotogrammi sono fotogrammi chiave. I fotogrammi chiave iniziali e intermedi che hanno un contenuto sono indicati nella linea temporale da cerchi pieni, mentre i fotogrammi chiave finali vengono visualizzati come piccoli rettangoli punteggiati. 2 Nella linea temporale, selezionare l'indicatore di riproduzione e trascinarlo lentamente sopra i fotogrammi. Controllare la corrispondenza tra le modifiche sullo Stage e nella linea temporale. Durante il trascinamento dell'indicatore di riproduzione, il filmato viene riprodotto in modo sequenziale. È possibile aggiungere ai filmati codice ActionScript, il linguaggio di script Macromedia Flash, per fare in modo che l'indicatore di riproduzione si sposti su fotogrammi specifici. 3 Al termine del clip filmato, scegliere una delle seguenti opzioni per tornare al filmato principale: Scegliere Modifica > Modifica Documento. Fare clic sul pulsante Indietro. Fare clic sulla Scena 1 sopra lo stage. Visualizzazione delle risorse della libreria Il pannello Libreria contiene i simboli e gli oggetti importati nel documento. 1 Se il pannello Libreria non è già aperto, scegliere Finestra > Libreria per visualizzarlo. 2 Se necessario, trascinare il pannello Libreria per allargarlo e visualizzare gli oggetti all'interno della Libreria. 3 Se necessario, fare doppio clic sulla cartella Illustrazioni per allargarla e visualizzare gli oggetti contenuti in essa. 4 Fare clic su view1.png per visualizzare l'immagine nell area di anteprima nella parte superiore del pannello Libreria. 5 Allargare le altre cartelle nel pannello Libreria per visualizzare le risorse del documento, come pulsanti e clip filmato. Esercitazione di Flash MX 179

180 6 Dopo aver visualizzato le risorse, chiudere il pannello Libreria. Analisi della struttura del filmato mediante Esplora filmato. Esplora filmato consente di disporre, individuare e modificare oggetti multimediali. Grazie alla sua struttura gerarchica ad albero, Esplora filmato fornisce informazioni sull'organizzazione e il flusso di un filmato, particolarmente utili quando si analizza un filmato creato da altri. 1 Se la finestra Esplora filmato non è già aperta, scegliere Finestra > Esplora filmato. 2 Se necessario, allargare Esplora filmato per visualizzare la struttura ad albero all'interno del riquadro. I pulsanti di filtro di Esplora filmato visualizzano o nascondono le diverse informazioni. 180 Capitolo 8

181 3 Fare clic sul menu a comparsa nella barra del titolo di Esplora filmato per verificare che le opzioni Mostra elementi filmato e Mostra definizioni simboli siano selezionate. 4 Deselezionare il pulsante Mostra i fotogrammi e i livelli nella parte superiore di Esplora filmato. Verificare che gli unici pulsanti di filtro selezionati siano Mostra il testo, Mostra i pulsanti, i clip filmato e i grafici; Mostra codice ActionScript; Mostra il video, i suoni e le bitmap. 5 Esaminare la lista per visualizzare alcune delle risorse del filmato e il loro rapporto con le altre risorse. 6 Per espandere un oggetto o una categoria, fare clic sul pulsante Più (+) a sinistra del nome. 7 Selezionare il pulsante di filtro Mostra i fotogrammi e i livelli. Scorrere verso il basso fino alla categoria Definizioni simboli. Visualizzare completamente la categoria e fare doppio clic sul filmato Animazione auto. È ora attiva la modalità di modifica dei simboli per il clip filmato. Esercitazione di Flash MX 181

182 8 In Esplora filmato, dopo aver selezionato e visualizzato completamente la categoria Animazione auto, espandere l'icona Dissolvenza Vista 3, quindi fare doppio clic sul fotogramma 60. Nella linea temporale del clip filmato, l'indicatore di riproduzione si sposta sul fotogramma 60 del livello Dissolvenza Vista 3. Per visualizzare un oggetto presente nella struttura gerarchica, fare clic sull'icona corrispondente. Facendo clic su un'icona di fotogramma, l'indicatore di riproduzione si sposta su quel fotogramma nella linea temporale. Facendo clic su una risorsa, per esempio un'immagine bitmap, nella finestra di ispezione Proprietà vengono visualizzate le impostazioni dell'immagine. Facendo doppio clic su un'icona che rappresenta un simbolo, viene attivata la modalità di modifica dei simboli. 9 Chiudere Esplora filmato. Scegliere File > Chiudi per chiudere il documento. Non salvare eventuali modifiche apportate al file. Definizione delle proprietà di un nuovo documento e creazione di uno sfondo sfumato Per informazioni su come creare un filmato in Macromedia Flash, è opportuno iniziare dalla prima operazione del processo: l'apertura di un nuovo file. Successivamente, completando la sezione, si apprenderà come effettuare le operazioni seguenti: Apertura di un nuovo file e definizione delle proprietà del documento Creazione e trasformazione di uno sfondo sfumato Apertura di un nuovo file Verrà ora creata una versione personalizzata del filmato dell'esercitazione. 1 Scegliere File > Nuovo. 2 Scegliere File > Salva con nome. 3 Assegnare al file il nome mystiletto.fla e salvarlo nella sottocartella Tutorials/FlashIntro/ My_Stiletto all'interno della cartella di applicazione di Flash. Nota: Mentre si procede nell'esercitazione, ricordarsi di salvare il lavoro di frequente. 182 Capitolo 8

183 Definizione delle proprietà dei documenti Nella programmazione, la configurazione delle proprietà di un documento è normalmente il primo passaggio. È possibile usare la finestra di ispezione Proprietà e la finestra di dialogo Proprietà documento per specificare le impostazioni relative all'intero filmato, quali la velocità di riproduzione, espressa in fotogrammi per secondo (f/s), le dimensioni dello stage e il colore di sfondo. 1 Se la finestra di ispezione Proprietà non è già aperta, scegliere Finestra > Proprietà per visualizzarla. Nella finestra di ispezione Proprietà, verificare che la casella di testo Frequenza fotogrammi riporti il valore 12. Il filmato verrà riprodotto a 12 fotogrammi al secondo, una frequenza fotogrammi ottimale per la riproduzione di animazioni sul Web. Nota: Se la finestra di ispezione Proprietà non è visualizzata completamente, fare clic sul triangolo bianco nell'angolo inferiore destro. 2 La casella Colore sfondo indica il colore dello stage. Fare clic sulla freccia rivolta verso il basso nella casella Colore sfondo, quindi spostare lo strumento Contagocce sui campioni di colore per visualizzare i valori esadecimali corrispondenti nella relativa casella di testo. 3 Individuare e fare clic sul campione di colore grigio con valore esadecimale Casella di testo Esadecimale Selezionare questa tonalità di grigio 4 Per ridimensionare lo stage, fare clic sul pulsante Dimensioni, che indica le dimensioni dello stage. Nella finestra di dialogo Proprietà documento, digitare 640 px nella prima casella di testo Dimensioni e 290 px nella seconda. Verificare che nel menu a comparsa sia selezionato Pixel, quindi fare clic su OK. Le dimensioni dello stage vengono modificate in base alle nuove impostazioni (640 x 290 pixel). Esercitazione di Flash MX 183

184 Specificazione delle impostazioni della griglia Sullo stage è possibile allineare oggetti lungo le linee orizzontali e verticali della griglia. È inoltre possibile agganciare oggetti alla griglia anche quando essa non è visibile. Si procederà ora alla modifica della distanza tra le linee della griglia orizzontali e verticali e alla creazione di una griglia allineata lungo i bordi dello stage. 1 Scegliere Visualizza > Griglia > Modifica griglia. 2 Nella finestra di dialogo Griglia, digitare 10 px nella casella di testo relativa alla larghezza della griglia e 10 px nella casella di testo relativa all'altezza della griglia. 3 Selezionare Griglia calamitata e verificare che non sia selezionata l'opzione Mostra Griglia. Gli oggetti verranno quindi agganciati alla griglia, anche se questa non è visibile. 4 Verificare che nell'opzione Precisione di aggancio sia selezionato Normale, quindi fare clic su OK. L'opzione consente di determinare quale vicinanza deve esserci tra un oggetto e una griglia perché l'oggetto sia agganciato a essa. Creazione di uno sfondo sfumato Le sfumature visualizzano sottili variazioni di colore o transizioni tra due o più colori. Nel file di esercitazione finale, lo sfondo è una sfumatura che fonde nero e blu scuro, con un'area trasparente che consente la visualizzazione di parte del colore grigio dello stage. Tale effetto viene ottenuto mediante il Mixer colori. Nota: Sebbene le sfumature consentano di ottenere effetti interessanti nei filmati, farne un uso eccessivo può incidere negativamente sulla velocità di elaborazione del processore e diminuire la velocità di riproduzione dell'animazione. Nella progettazione di un filmato, per ottimizzare l'uso delle sfumature è opportuno considerare sia le esigenze artistiche che di prestazione. Disegno di un rettangolo In una sezione precedente dell'esercitazione è stata creata una griglia allineata allo stage, per poi agganciare a essa degli oggetti. Si procederà ora a disegnare un rettangolo agganciato all'area della griglia che delimita lo stage. 184 Capitolo 8

185 1 Nel menu a comparsa sopra il lato destro dello stage, digitare 75% per visualizzare completamente lo stage. L'impostazione indica l'attuale visualizzazione, ingrandita o ridotta, dello stage. L'impostazione non ha effetto sulle dimensioni effettive dello stage nel filmato, specificate nella finestra di dialogo Proprietà documento. 2 Selezionare lo strumento Rettangolo dalla casella degli strumenti. 3 Fare clic sul controllo Colore tratto nella casella degli strumenti. Selezionare Nessun tratto (il pulsante con la linea diagonale rossa sopra la tavolozza di colori). Il colore di riempimento per la forma non è importante, perché verrà modificato in un momento successivo. 4 Partendo dall angolo superiore sinistro dello stage, trascinare fino all'angolo inferiore destro per disegnare un rettangolo che copra lo stage. Quando si rilascia il puntatore, il rettangolo viene agganciato ai bordi dello stage, lungo la griglia nascosta. Nota: Durante il completamento dell'esercitazione, potrebbe rendersi necessario annullare un cambiamento già apportato. In Flash è possibile annullare numerose tra le modifiche più recenti, in base al numero di annullamenti impostato in Preferenze. Per annullare un'operazione, scegliere Modifica > Annulla oppure premere Ctrl+Z (Windows) o Comando+P (Macintosh). Analogamente, è possibile ripristinare l'operazione annullata scegliendo Modifica > Ripeti oppure premendo Ctrl+Y (Windows) o Comando+Y (Macintosh). Esercitazione di Flash MX 185

186 Specificazione di un colore per la sfumatura. Il blu scuro sarà il primo colore aggiunto alla sfumatura. 1 Selezionare lo strumento Freccia dalla casella degli strumenti. Sullo stage, fare clic all'interno del rettangolo per selezionare il riempimento. Quando si è disegnato il rettangolo, nella finestra di ispezione Proprietà erano visualizzate le proprietà dello strumento Rettangolo. Quando si seleziona una forma già creata, nella finestra di ispezione Proprietà vengono visualizzate le relative proprietà. 2 Se necessario, scegliere Finestra > Mixer colori per aprire il Mixer colori. 3 Per visualizzare completamente il Mixer colori, fare clic sulla freccia di colore bianco nella barra del titolo del pannello. Fare clic qui per allargare il pannello. 4 Se il Mixer colori non è visualizzato completamente, fare clic sulla freccia nella parte inferiore destra del pannello. 5 Selezionare Radiale dal menu a scomparsa Stile riempimento. 186 Capitolo 8

187 6 Fare clic sul cursore a sinistra della barra della sfumatura per selezionarlo. Barra sfumatura Cursore sfumatura 7 Fare clic sulla casella del colore nell'angolo superiore sinistro della finestra per aprire la tavolozza dei colori Usare uno dei seguenti metodi per selezionare il blu scuro: Nella casella di testo del valore esadecimale, digitare , quindi, premere Invio. Spostare il contagocce sui campioni colore fino a individuare il blu scuro, con valore esadecimale , quindi fare clic sul campione per selezionarlo. Fare clic su questa sfumatura di blu Modifica del valore alfa Nel Mixer colori, la casella di testo Alfa indica la trasparenza del colore, da 0%, che corrisponde a un colore completamente trasparente, a 100%, che corrisponde a un colore completamente opaco. Verrà specificato un valore alfa pari a 0% per creare una sfumatura che includa nero e blu scuro, insieme al colore grigio dello stage, visualizzato nelle aree trasparenti della sfumatura. Nel Mixer colori, digitare 0 nella casella di testo Alfa e premere Invio; oppure spostare il cursore alfa su 0. Esercitazione di Flash MX 187

188 Aggiunta di un secondo colore sfumato Alla sfumatura verrà ora aggiunto il colore nero. 1 Nel Mixer colori, fare clic sul cursore sfumatura a destra della barra sfumatura per selezionarlo. 2 Fare clic sulla casella del colore per aprire la tavolozza dei colori e selezionare il nero, con valore esadecimale pari a Tenere presente che è possibile sia digitare il valore esadecimale nella relativa casella di testo e premere Invio; oppure individuare e selezionare il campione di colore con lo stesso valore esadecimale. Trasformazione del riempimento sfumato È possibile trasformare un oggetto ruotandolo, ridimensionandolo o inclinandolo. Per trasformare un riempimento, è possibile usare lo strumento Trasformazione riempimento. 1 Selezionare lo strumento Trasformazione riempimento dalla casella degli strumenti. Fare clic in un qualsiasi punto all'interno del rettangolo nello stage. Intorno allo stage verrà visualizzata un'ellissi che indica la forma e la posizione della sfumatura. L'ellisse contiene controlli relativi alla posizione, alla larghezza, alla scala e alla rotazione della sfumatura radiale. Posizionamento al centro Larghezza Scala Rotazione 188 Capitolo 8

189 2 Trascinare il controllo di centratura a sinistra dello stage fino a circa 1/3 della distanza dal margine sinistro della finestra, come illustrato nella figura seguente. Modificando forma e posizione dell'ellisse, la forma e la posizione delle transizioni di colore nello stage si modificano di conseguenza. 3 Trascinare la maniglia quadrata sull'ellisse, che controlla la larghezza della sfumatura, verso sinistra per ridurre la larghezza; la forma approssimativa dell'ellisse è illustrata nella figura seguente. Esercitazione di Flash MX 189

190 4 Trascinare la maniglia circolare al centro dell'ellisse, che controlla le dimensioni della sfumatura, verso destra per aumentare la larghezza, come illustrato nella figura seguente. 5 Trascinare la maniglia circolare inferiore dell'ellisse, che controlla la rotazione della sfumatura, verso sinistra per ruotare l'ellisse approssimativamente dell'angolazione indicata nella figura seguente. 190 Capitolo 8

191 Assegnazione di un nome e blocco di un livello La forma sfumata viene visualizzata nel livello 1 della linea temporale, che attualmente è l'unico livello del documento. In preparazione delle operazioni di aggiunta e di spostamento di oggetti aggiuntivi nello stage, si procederà a rinominare e a bloccare il livello. Nella prossima sezione dell esercitazione verrà creato un nuovo livello. Come appreso nella lezione Livelli, bloccando un livello si è certi che nessun utente possa modificarne inavvertitamente gli oggetti. 1 Nella linea temporale, fare doppio clic sul nome del Livello 1 e digitare Sfondo per rinominare il livello. 2 Fare clic in un punto esterno al nome del livello, quindi sull'icona a forma di lucchetto per bloccare il livello. Creazione di un disegno vettoriale e applicazione di maschere La creazione di un disegno in Macromedia Flash corrisponde alla creazione di un'immagine vettoriale, ovvero una rappresentazione in termini matematici delle linee, delle curve e della posizione dell'immagine. Le immagini vettoriali sono indipendenti dalla risoluzione: è possibile ridimensionarle rispetto a qualsiasi scala e visualizzarle in qualsiasi risoluzione senza per questo perdere chiarezza. Inoltre, lo scaricamento delle immagini vettoriali è più rapido rispetto a quello di immagini bitmap analoghe. Oltre alla sfumatura, il file completo contiene forme sullo sfondo. Verrà ora usato lo strumento Ovale per creare le forme. In particolare, nella presente sezione si apprenderà come completare le operazioni seguenti: Aggiunta di un livello Creazione e ritaglio di forme Applicazione di una maschera al livello contenente le forme Per completare la sezione, è possibile continuare a lavorare sul file mystiletto.fla oppure individuare la cartella principale di Flash e aprire il file Tutorials/FlashIntro/stiletto2.fla. In quest'ultimo caso salvare il file con un nuovo nome nella cartella My_Stiletto, in modo da conservare una versione non modificata del file originale. Aggiunta di un livello Anziché creare le forme nel livello Sfondo, si procederà ora all'aggiunta di un nuovo livello nel quale sarà possibile disegnare le forme. 1 Scegliere Inserisci > Livello per aggiungere un nuovo livello, oppure fare clic sul pulsante Inserisci livello. Attribuire al nuovo livello il nome Forme. Pulsante Inserisci livello Esercitazione di Flash MX 191

192 2 Selezionare lo strumento Ovale dalla casella degli strumenti. 3 Nella finestra di ispezione Proprietà, selezionare Sottile dal menu a comparsa Stile tratto. Fare clic sul controllo Colore tratto. Nella tavolozza dei colori, selezionare il colore grigio con valore esadecimale Tenere presente che è possibile sia digitare il valore esadecimale nella relativa casella di testo, sia individuare e selezionare il campione di colore con lo stesso valore esadecimale. 4 Se il Mixer colori non è aperto, scegliere Finestra > Mixer colori. Selezionare Uniforme dal menu a comparsa Stile riempimento. Fare clic sul controllo Colore di riempimento per selezionarlo. Nel campo R (rosso), digitare 109. Nelle caselle di testo V (verde) e B (blu), digitare 45 e premere Invio. I valori specificati riguardano la quantità di rosso, verde e blu in un colore. 5 Nella linea temporale, verificare che il livello Forme sia selezionato. Nello Stage, trascinare l'ovale tenendo premuto il tasto Maiusc fino a trasformarlo in un cerchio, che si estenda dall'area di lavoro sopra la finestra Stage fino all'area di lavoro sotto di essa. Nota: Se si commette un errore, scegliere Modifica > Annulla e riprovare. 6 Selezionare lo strumento Freccia dalla casella degli strumenti e fare doppio clic sul cerchio nello stage per selezionare contemporaneamente il riempimento e il tratto. 7 Se il pannello Trasforma non è già aperto, scegliere Finestra > Trasforma per visualizzarlo. 192 Capitolo 8

193 8 Per ingrandire il pannello Trasforma, fare clic sulla freccia bianca nell'angolo superiore sinistro. Selezionare Inclina e digitare 20,0 nella casella di testo Inclina orizzontalmente, quindi premere Invio. Il cerchio si trasforma in un ovale inclinato. Creazione e trasformazione di una forma duplicata Si procederà ora alla creazione e alla trasformazione di un ovale duplicato. 1 Con il tratto e il riempimento dell'ovale ancora selezionati nello stage, scegliere Modifica > Duplica. Esercitazione di Flash MX 193

194 2 Nella finestra di ispezione Proprietà, usare il controllo Colore di riempimento per selezionare il colore nero. 3 Selezionare lo strumento Trasformazione libera dalla casella degli strumenti. Intorno all'ovale duplicato viene visualizzata una guida con maniglie. 4 Spostare il puntatore sopra una maniglia agli angoli, finché non viene visualizzato un indicatore diagonale con frecce a entrambe le estremità. Trascinare la maniglia d angolo verso l'interno per ridurre le dimensioni dell'ovale. Verificare che il tratto dell'ovale interno non tocchi il tratto dell'ovale esterno. 194 Capitolo 8

195 5 Spostare il puntatore sopra la maniglia d'angolo finché il puntatore si trasforma in un indicatore di rotazione circolare. Trascinare l'indicatore di rotazione verso sinistra per ruotare l'ovale approssimativamente nella posizione indicata nella figura seguente. Creazione di un ritaglio con il duplicato Quando si crea una forma sopra un'altra all'interno dello stesso livello e le due forme sono di colori diversi e non sono separate, la forma soprastante ritaglia l'area dell'altra. Si procederà ora a eliminare l'ovale duplicato per visualizzare l'effetto di ritaglio. 1 Con la guida dello strumento Trasformazione libera intorno all'ovale duplicato, fare clic in un qualsiasi punto dello stage o dell'area di lavoro, purché esterno alle forme, quindi fare clic sul riempimento dell'ovale interno. Fare clic sul tasto Canc per eliminare il riempimento. L'ovale è ora dotato di un tratto interno e di un tratto esterno. Esercitazione di Flash MX 195

196 2 Con lo strumento Freccia, fare clic sul tratto più esterno dell'ovale per selezionarlo, quindi fare clic tenendo premuto il tasto Maiusc per selezionare anche il tratto più interno. Trascinare i tratti leggermente a destra del riempimento, come indicato nella figura seguente. A ciascuna area del colore di riempimento all'interno dell'area divisa dal tratto, che rappresenta ora un segmento separato, è possibile attribuire un colore diverso. 3 Selezionare un'area del riempimento della forma e usare il Mixer colori per modificare il colore di riempimento in una sfumatura di marrone con valore di rosso (R) di 117, un valore di verde (V) di 78 e un valore di blu (B) di 53. Ripetere eventualmente questo passaggio per modificare il colore di un'altra area di riempimento nella tonalità di marrone più chiaro, come indicato nella figura seguente: 196 Capitolo 8

197 4 Selezionare lo strumento Trasformazione libera. Trascinare intorno alle forme di sfondo dell'ovale per selezionare tutte le forme, quindi trascinare la maniglia dell'angolo destro della guida per ingrandirle, come indicato nella figura seguente. 5 Trascinare le forme nello stage in modo che la relativa parte della curva sia visualizzata nell'angolo superiore sinistro e sul lato destro dello stage. Nota: Mentre si procede nell'esercitazione, ricordarsi di salvare il file di frequente. Esercitazione di Flash MX 197

198 Creazione di una maschera L'immagine creata nel livello Forme si estende oltre lo stage, all'interno dell'area di lavoro. Anche se la zona dell'area di lavoro non apparirà nel filmato, una volta pubblicato, l'immagine oltre lo stage può rappresentare un elemento di disturbo all'interno dell'ambiente di programmazione. Anche se è possibile eliminare la parte delle forme che si estende all'interno dell'area di lavoro, una soluzione migliore è costituita dall'applicazione di una maschera allo stage, in modo che solo l'area sotto la maschera, in questo caso l'intera finestra, rimanga visibile. In questo modo, se si desidera tornare alle forme per modificarle, esse saranno inalterate. 1 Con il livello Forme selezionato, aggiungere un nuovo livello alla linea temporale e denominarlo Maschera. 2 Selezionare lo strumento Rettangolo dalla casella degli strumenti e disegnare un rettangolo che si estenda dall'angolo superiore sinistro all'angolo inferiore destro dello stage. Tale rettangolo rappresenta la forma della maschera. Tutti gli elementi sotto il rettangolo saranno visibili. 198 Capitolo 8

199 3 Fare clic con il pulsante destro (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) sul nome del livello Maschera nella linea temporale e scegliere Maschera dal menu di scelta rapida. Il livello verrà convertito in un livello maschera, indicato da un'icona a forma di freccia rivolta verso il basso. Il livello immediatamente inferiore è collegato al livello maschera e il suo contenuto viene visualizzato tramite l'area riempita sulla maschera. Al nome del livello con maschera viene applicato un rientro e la relativa icona si trasforma in una freccia rivolta verso destra. L'immagine nell'area di lavoro non sarà più visibile sullo stage. Per poter visualizzare l'effetto maschera, è necessario che i livelli maschera siano bloccati. Per modificare le forme, è possibile sbloccare i livelli Forme di sfondo e Maschera. Terminate le modifiche all'immagine, bloccare di nuovo i livelli per attivare l'applicazione della maschera. 4 Salvare il file. Esercitazione di Flash MX 199

200 Interpolazione di effetti bitmap all'interno di un clip filmato Oltre a creare immagini vettoriali in Macromedia Flash, è possibile importare nel filmato Flash immagini bitmap, che usano i pixel per visualizzare gli elementi grafici, e applicare numerosi effetti di colore. Nella sezione vengono illustrate le seguenti operazioni: Importazione di immagini bitmap Modifica della compressione bitmap Creazione e modifica del simbolo di un clip filmato Interpolazione di effetti bitmap per ottenere la dissolvenza in entrata e in uscita delle viste dell'auto. Per completare la sezione, è possibile continuare a lavorare sul file mystiletto.fla oppure individuare la cartella principale di Flash e aprire il file Tutorials/FlashIntro/stiletto3.fla. In quest'ultimo caso, salvare il file con un nuovo nome nella cartella My_Stiletto in modo da conservare una versione non modificata del file originale. Importazione di immagini nella libreria Quando si importa un file in Macromedia Flash, è possibile procedere importando direttamente il file nella libreria. 1 Aggiungere un nuovo livello alla linea temporale e denominarlo Immagini. 2 Scegliere File > Importa nella libreria. Se si seleziona Importa nella libreria anziché Importa, è necessario che le immagini siano collocate nello stage per essere visualizzate. 3 Individuare la cartella Tutorials/FlashIntro/Assets nella cartella principale di Flash e selezionare il file view1.png, quindi fare clic tenendo premuto il tasto Maiusc per aggiungere alla selezione view2.png e view3.png. Fare clic su Apri. 4 Nella finestra di dialogo Impostazioni di importazione immagini PNG di Fireworks, fare clic sull'opzione che consente di importare l'immagine come singola immagine bitmap appiattita, quindi fare clic su OK. Le tre immagini sono ora incluse nella libreria 200 Capitolo 8

201 Modifica della compressione bitmap Importando un'immagine è possibile verificarne e modificarne le impostazioni di compressione. La compressione dell'immagine riduce le dimensioni del file del filmato, ma può influenzare negativamente la qualità dell'immagine; l'ideale è arrivare a un buon compromesso tra la qualità dell immagine e le impostazioni di compressione. 1 Se il pannello Libreria non è già aperto, scegliere Finestra > Libreria per visualizzarlo. Se necessario, ingrandire la finestra per visualizzare i tre file importati. 2 Fare doppio clic sul file view1.png. Per impostazione predefinita è selezionata la compressione JPEG. 3 Dal menu a comparsa Compressione, selezionare Senza perdita (PNG/GIF) per una qualità dell'immagine elevata. 4 Per verificare l'aspetto dell'immagine a seguito della nuova impostazione, fare clic su Prova. Se necessario, trascinare l'auto nella vista della finestra di anteprima. Una volta terminata la visualizzazione in anteprima dell'immagine, fare clic su OK. 5 Tornare al pannello Libreria. Fare doppio clic sul file view2.png e ripetere il passaggio 3, quindi fare clic su OK. 6 Nel pannello Libreria, fare doppio clic sul file vista3.png e selezionare Senza perdita (PNG/ GIF); quindi fare clic su OK. Esercitazione di Flash MX 201

202 Creazione del simbolo di un clip filmato Nel file finale sono presenti tre viste che mostrano la dissolvenza in entrata e in uscita dell'auto nella scena iniziale. L'effetto è ottenuto creando un simbolo del clip filmato con una linea temporale indipendente da quella principale. Successivamente, viene interpolata la trasparenza alfa tra le tre viste dell'auto per creare un effetto di dissolvenza in entrata e in uscita. Il primo passo per ottenere l'effetto è la creazione del clip filmato. 1 Con il livello Immagini ancora selezionato nella linea temporale, trascinare l'oggetto view1.png dal pannello Libreria nello stage, collocando l'auto nel punto dell'area dove lo sfondo sfumato è più chiaro. 2 Scegliere Inserisci > Converti in simbolo, oppure premere F8. 3 Nella finestra di dialogo Converti in simbolo, denominare il simbolo Animazione auto. Verificare che il clip filmato e il quadrato centrale nell'indicatore Registrazione siano selezionati, quindi fare clic su OK. Le immagini bitmap, come qualsiasi altro oggetto Macromedia Flash, includono punti di registrazione usati per posizionarle e trasformarle. Quando si procede all'allineamento delle tre viste dell'auto all'interno del clip filmato, tutte e tre le viste dovrebbero allinearsi rispetto a un punto di registrazione centrale. Punto di registrazione 202 Capitolo 8

203 Modifica di un simbolo Per visualizzare la linea temporale del clip filmato, è necessario che la modalità di modifica dei simboli sia attiva. Per attivarla, fare doppio clic sul simbolo nello stage o nel pannello Libreria. 1 Nello stage, fare doppio clic sull'auto per attivare la modalità di modifica dei simboli. Il nome del simbolo viene visualizzato sopra l'area di lavoro, insieme a un collegamento alla Scena 1 che riporta al filmato principale. In modalità di modifica dei simboli, viene ora visualizzata la linea temporale del clip filmato anziché del filmato principale. 2 Ridenominare il livello 1 Dissolvenza Vista 1. 3 L'auto visualizzata nello stage è un'immagine bitmap, non un simbolo, all'interno del simbolo Animazione auto. Per rendere l'auto un simbolo, selezionarla nello stage e premere F8. 4 Nella finestra di dialogo Converti in simbolo, denominare il simbolo Auto Vista 1 e verificare che il clip filmato sia selezionato. 5 Verificare che nell'indicatore Registrazione sia selezionato il quadrato centrale e fare clic su OK. 6 Scorrere in orizzontale lungo la linea temporale fino al fotogramma 105; selezionare il fotogramma e scegliere Inserisci > Fotogramma, oppure premere F6 per aggiungere un fotogramma. L'indicatore Fotogramma corrente visualizza il fotogramma selezionato. Fotogramma corrente 7 Aggiungere fotogrammi chiave ai fotogrammi 25 e Aggiungere un fotogramma chiave al fotogramma 34, fare clic in un punto qualsiasi del livello tra il fotogramma 36 e il fotogramma 104, quindi premere il tasto Canc. In corrispondenza del fotogramma 35 apparirà un fotogramma chiave vuoto e l'auto non verrà visualizzata nello stage a partire dal fotogramma 35. Nota: Se si inseriscono dei fotogrammi chiave errati e si desidera eliminarli, selezionare uno o più fotogrammi e fare clic col pulsante-destro del mouse (Windows) oppure premere Ctrl e fare clic (Macintosh), quindi scegliere Cancella fotogramma chiave dal menu di scelta rapida. Esercitazione di Flash MX 203

204 Interpolazione di effetti bitmap I procedimenti di creazione dell'interpolazione di un effetto bitmap e dell'interpolazione di un movimento lineare sono simili: è necessario specificare le impostazioni relative all'inizio e alla fine dei fotogrammi chiave, quindi l'interpolazione per i relativi fotogrammi e per quelli intermedi. Macromedia Flash crea l'animazione di transizione dal primo all'ultimo fotogramma chiave nell'animazione. 1 Nella linea temporale Animazione auto, selezionare il fotogramma 34, quindi fare clic sull'auto Vista 1 nello stage in modo che le proprietà del clip filmato vengano visualizzate nella finestra di ispezione Proprietà. 2 Selezionare Alfa dal menu a comparsa Colore della finestra di ispezione Proprietà. Nel menu a-comparsa Valore trasparenza alfa, digitare 0% nella casella di testo e premere Invio, oppure usare il cursore a comparsa per selezionare 0%. Rettangolo di delimitazione 3 Nella linea temporale, selezionare un fotogramma a scelta tra il 25 e il 34. Nella finestra di ispezione Proprietà, selezionare Movimento dal menu a comparsa Interpolazione. Verrà visualizzata una freccia con una linea piena che si estenderà sui fotogrammi chiave interpolati. Una linea punteggiata tra i fotogrammi chiave indica che l'interpolazione non è implementata correttamente; questo spesso avviene quando un fotogramma chiave iniziale o finale è mancante. Dissolvenza in entrata della seconda auto In coincidenza con la dissolvenza in uscita dell'auto Vista 1, dovrebbe verificarsi la dissolvenza in entrata di un'altra vista dell'auto. 1 Aggiungere un nuovo livello alla linea temporale Animazione auto e denominarlo Dissolvenza Vista 2. 2 Aggiungere un fotogramma chiave al fotogramma 25 nel livello Dissolvenza Vista 2. 3 Con l'indicatore di riproduzione ancora sul fotogramma 25, trascinare il file view2.png dal pannello Libreria allo stage. 204 Capitolo 8

205 4 Se il pannello Info non è già aperto, scegliere Finestra > Info per visualizzarlo. Verificare che nell'indicatore Registrazione sia selezionato il quadrato centrale, quindi digitare 0 nella casella di testo relativa alla coordinata X e 0 nella casella di testo relativa alla coordinata Y. Premere Invio. Anche la finestra di ispezione Proprietà contiene caselle di testo X e Y; tuttavia, tali coordinate si riferiscono a un punto di registrazione nell'angolo superiore sinistro del clip filmato. 5 Nello stage, selezionare il file view2.png e premere F8 per trasformarlo in un simbolo. Nella finestra di dialogo Converti in simbolo, denominare il simbolo Auto Vista 2. Verificare che sia selezionato Clip filmato, quindi fare clic su OK. 6 Selezionare Alfa dal menu a comparsa Colore della finestra di ispezione Proprietà del clip filmato e digitare 0% nella casella di testo Valore trasparenza alfa. 7 Aggiungere un fotogramma chiave al fotogramma 35 nel livello Dissolvenza Vista 2. 8 Nello stage, fare clic all'interno del rettangolo di delimitazione dell'auto trasparente. Nella finestra di ispezione Proprietà, digitare 100% nella casella Valore trasparenza alfa. 9 Nel livello Dissolvenza Vista 2, selezionare qualsiasi fotogramma tra il 25 e il 34. Nella finestra di ispezione Proprietà, selezionare Movimento dal menu a comparsa Interpolazione. Dissolvenza in uscita della seconda auto Si procederà ora alla creazione dell'animazione che determina la dissolvenza in uscita della seconda auto. 1 Aggiungere un fotogramma chiave al fotogramma 60 nel livello Dissolvenza Vista 2. 2 Aggiungere un fotogramma chiave al fotogramma 70 e un altro al fotogramma 69 nel livello Dissolvenza Vista 2. 3 Selezionare il fotogramma chiave al fotogramma 69 nel livello Dissolvenza Vista 2. Selezionare Auto Vista 2 nello Stage e selezionare un valore trasparenza alfa pari a 0% dalla finestra di ispezione Proprietà. Esercitazione di Flash MX 205

206 4 Nel livello Dissolvenza Vista 2, selezionare un fotogramma a scelta compreso tra i fotogrammi 60 e 68. Nella finestra di ispezione Proprietà, selezionare Movimento dal menu a comparsa Interpolazione. 5 Nel livello Dissolvenza Vista 2, selezionare un fotogramma a scelta tra il 71 e il 105, quindi premere Canc. Nota: Mentre si procede nell'esercitazione, ricordarsi di salvare il lavoro di frequente. Dissolvenza in entrata della terza auto In coincidenza con la dissolvenza in uscita della seconda auto, dovrebbe verificarsi la dissolvenza in entrata della terza. Questa animazione verrà creata ora. 1 Con il livello Dissolvenza Vista 2 selezionato, aggiungere un nuovo livello alla linea temporale e denominarlo Dissolvenza Vista 3. 2 Aggiungere un fotogramma chiave al fotogramma 60 nel livello Dissolvenza Vista 3. 3 Con il fotogramma 60 ancora selezionato, trascinare il file view3.png dal pannello Libreria allo stage. Usare il pannello Info (scegliere eventualmente Finestra > Info per visualizzarlo) per specificare il valore 0 per entrambe le coordinate X e Y e per verificare che il punto di registrazione sia centrato, come per il file view2.png. 4 Sullo stage, selezionare il file view3.png e premere F8 per trasformarlo in un simbolo. Nella finestra di dialogo Converti in simbolo, denominare il simbolo Auto Vista 3. Verificare che sia selezionato Clip filmato, quindi fare clic su OK. 5 Selezionare Alfa dal menu a comparsa Colore della finestra di ispezione Proprietà e digitare 0% nella casella di testo Valore trasparenza alfa. 6 Aggiungere un fotogramma chiave al fotogramma 70 nel livello Dissolvenza Vista 3. 7 Sullo stage, fare clic all'interno del rettangolo di delimitazione dell'auto Vista 3. Nella finestra di ispezione Proprietà, digitare 100% nella casella Valore trasparenza alfa. 8 Nel livello Dissolvenza Vista 3, selezionare un fotogramma a scelta compreso tra i fotogrammi 60 e 69. Nella finestra di ispezione Proprietà, selezionare Movimento dal menu a comparsa Interpolazione. 206 Capitolo 8

207 Dissolvenza in uscita della terza auto Si procederà ora alla creazione dell'animazione che determina la dissolvenza in uscita della terza auto. 1 Aggiungere un fotogramma chiave ai fotogrammi 95 e 105 nel livello Dissolvenza Vista 3. 2 Con il fotogramma 105 selezionato nel livello Dissolvenza Vista 3, selezionare Auto Vista 3 nella finestra e selezionare un valore trasparenza alfa pari a 0% tramite la finestra di ispezione Proprietà. 3 Nel livello Dissolvenza Vista 3, selezionare un fotogramma a scelta compreso tra i fotogrammi 95 e 104. Nella finestra di ispezione Proprietà, selezionare Movimento dal menu a comparsa Interpolazione. Dissolvenza in entrata della prima auto In coincidenza con la dissolvenza in uscita della terza auto, per completare l'animazione deve verificarsi la dissolvenza in entrata della prima. 1 Aggiungere un fotogramma chiave al fotogramma 95 nel livello Dissolvenza Vista 1. 2 Con il fotogramma 95 ancora selezionato, trascinare il clip filmato Auto Vista 1 (anziché il file view1.png) dal pannello Libreria nello stage. 3 Nel pannello Info, digitare 0 nella casella di testo relativa alla coordinata X e 0 nella casella di testo relativa alla coordinata Y. Premere Invio. 4 Selezionare Alfa dal menu a comparsa Colore della finestra di ispezione Proprietà e digitare 0% nella casella di testo Valore trasparenza alfa. 5 Selezionare il fotogramma 104 nel livello Dissolvenza Vista 1. 6 Sullo stage, fare clic all'interno del rettangolo di delimitazione del clip filmato Auto Vista 1. Nella finestra di ispezione Proprietà, digitare 100% nella casella Valore trasparenza alfa. 7 Nel livello Dissolvenza Vista 1, selezionare un fotogramma a scelta compreso tra i fotogrammi 95 e 104. Nella finestra di ispezione Proprietà, selezionare Movimento dal menu a comparsa Interpolazione. Nota: Mentre si procede nell'esercitazione, ricordarsi di salvare il lavoro di frequente. Prova del filmato È possibile effettuare una prova di riproduzione del filmato come file SWF in qualsiasi momento durante la programmazione. 1 Salvare il filmato e scegliere Controlli > Prova filmato. Macromedia Flash esporta una copia in formato SWF del filmato. Nel filmato SWF, l'animazione viene automaticamente riprodotta in ripetizione continua. 2 Dopo aver visualizzato il filmato, chiudere il file SWF facendo clic sulla relativa casella di chiusura. Nel documento Flash, scegliere Modifica > Modifica documento oppure fare clic sulla Scena 1 per tornare alla linea temporale principale. Esercitazione di Flash MX 207

208 Caricamento di testo dinamico in fase di esecuzione Nella lezione Aggiunta e modifica del testo l'utente ha potuto esercitarsi nell'inserimento di testo direttamente nello stage. È inoltre possibile progettare il filmato in modo che comprenda testo contenuto in file esterni. Uno dei modi più semplici per effettuare questa operazione è usare l'azione loadvariables per il caricamento di testo da un file di testo in un campo di testo dinamico in fase di esecuzione. Nel file FLA è possibile specificare attributi di testo quali stile del carattere, dimensioni e colore per il campo di testo dinamico. Uno dei vantaggi di conservare il testo in file esterno è il fatto che, per modificarlo, è possibile usare il file di testo anziché il file FLA. Nella presente sezione vengono illustrate le seguenti operazioni: Importazione e allineamento di un logo Creazione di un campo di testo dinamico Uso della finestra di ispezione Proprietà per l'assegnazione di un nome di variabile di testo. Uso dell'azione loadvariables per il caricamento di un testo da un file esterno. Per completare la sezione, è possibile continuare a lavorare sul file mystiletto.fla oppure cercare la cartella principale di Flash e aprire il file Tutorials/FlashIntro/stiletto4.fla. In quest'ultimo caso, salvare il file con un nuovo nome nella cartella My_Stiletto in modo da conservare una versione non modificata del file originale. Importazione del logo Prima di creare un campo di testo dinamico, si procederà all'importazione del logo, un file Macromedia FreeHand per il quale nella linea temporale verrà aggiunto automaticamente un livello. Per modificare il documento originale prima di usarlo in Flash, è possibile copiarlo e incollarlo negli Appunti oppure trascinarlo da Macromedia FreeHand, migliorando così il flusso di lavoro. 1 Selezionare il livello Immagini nella linea temporale e aggiungere un nuovo livello sopra di esso. Attribuire al nuovo livello il nome Copia. 2 Con il livello Copia selezionato, scegliere File > Importa. In una fase precedente dell esercitazione, nella libreria sono stati importati degli oggetti. Si procederà ora all'importazione del logo visualizzato nello stage. 3 Nella cartella di applicazione di Flash, selezionare la cartella Tutorials/FlashIntro/Assets e aprire il file logo.fh Capitolo 8

209 4 Verificare che le opzioni relative alle scene, ai livelli e alla selezione di tutte le pagine siano selezionate nella finestra di dialogo Importazione da FreeHand. Verificare inoltre che siano selezionate le opzioni Includi livello di sfondo e Mantieni testo come blocchi, quindi fare clic su OK. 5 Nella linea temporale verrà creato un livello denominato Logo. Trascinare il nome Logo per spostare il livello sotto il livello Copia. 6 È possibile specificare le coordinate del logo rispetto allo stage. Nella finestra di ispezione Proprietà, con il logo selezionato, digitare 10 nella casella di testo relativa alla coordinata X e 20 nella casella di testo relativa alla coordinata Y, quindi premere Invio. 7 Nella linea temporale, bloccare il livello Logo. Creazione di un campo di testo dinamico Si procederà ora alla creazione di un campo di testo dinamico. Anziché digitare il testo nel campo, verrà specificata la variabile di testo per il caricamento del campo in fase di esecuzione. 1 Nella linea temporale, selezionare il livello Copia. Selezionare lo strumento Testo dalla casella degli strumenti. Nella finestra di ispezione Proprietà, selezionare Testo dinamico dal menu a comparsa Tipo di testo. 2 Dal menu a comparsa Carattere, selezionare _sans. Si tratta di un carattere dispositivo adatto a testi di piccole dimensioni, da visualizzare su più piattaforme. Per ulteriori informazioni sui caratteri dispositivi, vedere? > Uso di Flash > Uso dei caratteri dispositivi (solo testo con orientamento orizzontale). Esercitazione di Flash MX 209

210 3 Nella casella di testo Dimensione in punti, digitare Fare clic sulla casella Colore testo (riempimento) e selezionare il colore giallo, con valore esadecimale FFCC00. 5 Dal menu a comparsa Tipo linea selezionare l'opzione Multiriga, adatta a un testo con più righe. Menu a comparsa Tipo testo Menu a comparsa Carattere Casella di testo Dimensione in punti Menu a comparsa Tipo linea 6 Fare clic sotto il logo nello stage. Trascinare il puntatore per creare un campo di testo di larghezza pari al testo del logo e di profondità pari approssimativamente alla linea verticale collegata al logo, come indicato nella figura seguente. 7 Nella finestra di ispezione Proprietà, digitare textfield nella casella di testo Var. Nel file di testo caricato nel campo testo dinamico, come illustrato nella figura seguente, è incluso il testo che assegna il nome alla variabile. textfield=. Digitando il nome nella casella di testo Var, si denomina la variabile che dovrà essere caricata dal filmato. 210 Capitolo 8

211 Uso dell'azione loadvariables per il caricamento di un testo. L'azione loadvariables comprende un parametro per specificare il percorso del testo della variabile. Il testo è incluso in un file denominato copy.txt nella cartella Tutorials/FlashIntro/Assets. 1 Aggiungere un nuovo livello alla linea temporale e denominarlo Azioni. Se necessario, trascinare il livello Azioni nella parte superiore della linea temporale. È buona norma tenere le azioni nel livello superiore della linea temporale. 2 Se il pannello Azioni non è aperto, scegliere Finestra > Azioni per visualizzarlo. Se necessario, ingrandire il pannello Azioni facendo clic sulla freccia di colore bianco nella barra del titolo per espandere la finestra, e trascinando l'angolo inferiore destro del pannello per visualizzare la casella degli strumenti Azioni e il riquadro Script. Il tipo di pannello Azioni visualizzato dipende dall'oggetto al quale si sta aggiungendo l'azione. Se è stato selezionato un fotogramma, per esempio, nel pannello Azioni verranno visualizzate le azioni per i fotogrammi. Se è stato selezionato un pulsante, nel pannello Azioni verranno visualizzate le azioni per i pulsanti. 3 Fare clic sul triangolo nell'angolo superiore destro della barra del titolo del pannello per visualizzare il menu a comparsa. Verificare che sia selezionata la modalità normale (non la modalità esperto). La modalità esperto comprende funzioni utili a utenti che hanno già familiarità con ActionScript. Nella modalità normale, i campi e i controlli dei parametri aiutano l'utente nella creazione di ActionScript. Pulsante di menu Opzioni Casella degli strumenti Azioni Riquadro dello script Esercitazione di Flash MX 211

212 4 Nella casella degli strumenti Azioni, scegliere Azioni > Browser/Rete, quindi fare doppio clic su loadvariable. ActionScript verrà aggiunto al riquadro dello script. I parametri per l azione verranno visualizzati sopra il riquadro. 5 Nella casella di testo URL, digitare il percorso del file di testo.../assets/copy.txt. Prova del filmato Salvare il filmato e scegliere Controlli > Prova filmato. È inoltre possibile premere Ctrl+Invio (Windows) o Comando+Invio (Macintosh). 212 Capitolo 8

213 Aggiunta di animazioni e navigazione ai pulsanti Quando si specifica che un nuovo simbolo è un pulsante, viene creata la linea temporale per gli stati del pulsante. Nella lezione relativa alla creazione di pulsanti, si è appreso come modificare il colore di riempimento di una forma all'interno dello stato di un pulsante. Nella presente sezione vengono presentate ulteriori informazioni sulla modifica dei pulsanti, compresa l'aggiunta di animazioni. In particolare, nella presente sezione si apprenderà come completare le operazioni seguenti: Importazione di una libreria da un altro file FLA Allineamento dei pulsanti Aggiunta di animazioni allo stato di un pulsante Aggiunta di funzioni di navigazione a un pulsante per effettuare un collegamento a un sito Web Uso della funzione Attiva pulsanti semplici. Aggiunta di funzioni di navigazione ai pulsanti Per completare la sezione, è possibile continuare a lavorare sul file mystiletto.fla oppure individuare la cartella principale e aprire il file Tutorials/FlashIntro/stiletto5.fla. In quest'ultimo caso, salvare il file con un nuovo nome nella cartella My_Stiletto in modo da conservare una versione non modificata del file originale. Importazione della libreria da un altro file FLA I pulsanti da usare nel filmato si trovano nella libreria di un altro file FLA. Per usarli, aprire il file FLA che li contiene come una libreria. 1 Con il pannello Libreria aperto, scegliere File > Apri come libreria. Nella cartella di applicazione di Flash, selezionare la cartella Tutorials/FlashIntro/Assets e fare doppio clic sul file buttons.fla. La libreria per il file buttons.fla verrà visualizzata insieme alla libreria del documento. Esercitazione di Flash MX 213

214 Allineamento dei pulsanti È possibile allineare i tre pulsanti rispetto all'asse orizzontale e verticale usando il pannello Allinea. 1 Con il livello Copia selezionato nella linea temporale, aggiungere un nuovo livello e denominarlo Pulsanti. Bloccare tutti i livelli eccetto il livello Pulsanti. 2 Nel menu a comparsa Vista stage, a destra sopra la finestra Stage, digitare 150% per visualizzare completamente la finestra. Scorrere quindi fino alla parte inferiore destra dello stage. 3 Trascinare il pulsante 1 dal pannello Libreria del file buttons.fla e collocarlo sotto l'angolo inferiore destro del campo di testo dinamico. Trascinando il pulsante dal pannello Libreria del file buttons.fla, esso diventerà parte della libreria del documento. 4 Trascinare il pulsante 2 e il pulsante 3 dal pannello Libreria del file pulsanti.fla, collocandoli a sinistra del pulsante 1. 5 Con lo strumento Freccia, trascinare per selezionare i tre pulsanti. 214 Capitolo 8

215 6 Per aprire il pannello Allinea, scegliere Finestra > Allinea. Verificare che l'opzione Allo stage non sia selezionata: lo scopo dell'operazione, infatti, non è allineare i pulsanti rispetto allo stage. Fare clic su Allineamento verticale rispetto al centro e quindi su Distribuzione orizzontale rispetto al centro. Allineamento verticale rispetto al centro Allo stage Distribuzione orizzontale rispetto al centro I pulsanti vengono allineati rispetto allo stage. Attiva pulsanti semplici Quando la funzione Attiva pulsanti semplici è attiva, è possibile riprodurre i suoni collegati ai pulsanti 2 e 3 e visualizzare i colori usati per gli stati dei pulsanti. Non verranno invece riprodotti elementi di progettazione di pulsanti di maggiore complessità, come le animazioni. 1 Scegliere Controlli > Attiva pulsanti semplici, quindi passare il cursore e fare clic su ciascun pulsante. Il pulsante 1 a destra non è completo. Si procederà alla sua modifica in un momento successivo. 2 Una volta terminato il controllo dei pulsanti, scegliere Controlli > Attiva pulsanti semplici per disattivare la funzione. Modifica dello stato di un pulsante Si procederà alla creazione di clip filmato all'interno dello stato Sopra del pulsante 1, per poi creare un'interpolazione di forma all'interno del clip formato. L'interpolazione di forma crea un effetto che modifica il colore da grigio a rosso. 1 Sullo stage, fare doppio clic sul pulsante 1, a desta, per attivare la modalità di modifica dei simboli. 2 Nella linea temporale del pulsante 1, nascondere tutti i livelli eccetto Colori. Nel livello Colori, selezionare il fotogramma chiave Sopra. 3 Sullo stage, selezionare la forma ovale di colore nero per il pulsante a destra. Premere F8 per trasformare l'ovale in un simbolo. Nella finestra di dialogo Converti in simbolo, denominare il simbolo Animazione pulsante. Selezionare Clip filmato e fare clic su OK. 4 Sullo stage, fare doppio clic sul simbolo Animazione pulsante per attivare la modalità di modifica dei simboli. 5 Ridenominare il livello 1 Modifica colori e aggiungere un fotogramma chiave al fotogramma Con l'indicatore di riproduzione ancora sul fotogramma 15, selezionare la forma del pulsante nello stage e scegliere una tonalità chiara di rosso dal menu a comparsa Colore di riempimento della casella degli strumenti. Esercitazione di Flash MX 215

216 7 Nella linea temporale, fare clic su un fotogramma a scelta tra il 1 e il 13. Nella finestra di ispezione Proprietà, selezionare Forma dal menu a comparsa Interpolazione. Trascinare l'indicatore di riproduzione dal fotogramma 1 al 15 per osservare la modifica di colore. Aggiunta di azioni ai pulsanti Quando l'utente fa clic sul pulsante e viene riprodotta l'animazione interpolata, si desidera che l'indicatore di riproduzione si sposti alla fine della linea temporale dell'animazione pulsante, per poi terminare. Per controllare il movimento dell'indicatore di riproduzione in una linea temporale, si usa ActionScript, il linguaggio di script Macromedia Flash. 1 Aggiungere un nuovo livello alla linea temporale animazione pulsante e denominarlo Azioni. 2 Aggiungere un fotogramma chiave al fotogramma 15 nel livello Azioni. 3 Se il pannello Azioni non è aperto, scegliere Finestra > Azioni per visualizzarlo. Se necessario, allargare il pannello per visualizzare la casella degli strumenti Azioni e il riquadro Script. 4 Con il fotogramma 15 del livello Azioni selezionato, passare alla categoria Azioni > Controllo filmato della casella degli strumenti Azioni e fare doppio clic su stop. L'azione stop consente di fare in modo che l'indicatore di riproduzione si arresti una volta raggiunto il fotogramma Capitolo 8

217 Nella linea temporale Animazione pulsante, nel fotogramma 15 del livello Azioni viene ora visualizzata una piccola a che indica che al fotogramma è associata un'azione. Nota: Mentre si procede nell'esercitazione, ricordarsi di salvare il lavoro di frequente. Aggiunta di funzioni di navigazione ai pulsanti Per aggiungere funzioni di navigazione a un pulsante che apre un sito Web, utilizzare l'azione geturl. 1 Scegliere Modifica > Modifica documento oppure fare clic sulla Scena 1 per tornare al filmato principale. 2 Fare clic sul pulsante 1 a destra nello stage. 3 Nel pannello Azioni, scegliere Azioni > Browser/Rete, quindi fare doppio clic su geturl. 4 Nella casella di testo URL digitare un URL completo, per esempio 5 Nel menu a comparsa Finestra, selezionare _blank per aprire una nuova finestra del browser quando l'utente preme il pulsante 1. Esercitazione di Flash MX 217

218 6 Salvare il file e scegliere Controlli > Prova filmato. Fare clic sul pulsante 1 per collegarsi al sito Web specificato al passaggio 4. 7 Chiudere il browser e il file SWF, quindi tornare all'ambiente di programmazione di Macromedia Flash. È eventualmente possibile selezionare il Pulsante 2 nella finestra stage, ripetere i passaggi da 3 a 7 per effettuare il collegamento a un diverso sito Web e quindi ripeterli di nuovo per il Pulsante 3. Inserimento di suoni evento e audio in streaming Quando si sta scaricando un filmato da un sito Internet, è possibile avviare la riproduzione di un suono nel momento in cui inizia lo scaricamento di un file audio. Questo tipo di audio è particolarmente adatto per i suoni di sottofondo riprodotti in modo ciclico. I suoni evento, che devono essere scaricati completamente e caricati nella RAM prima di essere riprodotti, sono particolarmente utili per i pulsanti. Nella presente sezione vengono illustrate le seguenti operazioni: Aggiunta di audio in streaming al filmato Aggiunta di un suono evento a un pulsante Per completare la sezione, è possibile continuare a lavorare sul file mystiletto.fla oppure individuare la cartella principale di Flash e aprire il file Tutorials/FlashIntro/stiletto6.fla. In quest'ultimo caso, salvare il file con un nuovo nome nella cartella My_Stiletto in modo da conservare una versione non modificata del file originale. Aggiunta di audio in streaming È possibile includere un suono nel filmato trascinandolo nello stage. Si procederà all'aggiunta di una musica di sottofondo che viene riprodotta continuamente per un numero di volte specificato. 1 Con il livello Pulsanti selezionato nella linea temporale, aggiungere un nuovo livello e denominarlo Audio. 2 Scegliere File > Importa. Nella cartella di applicazione di Flash, selezionare la cartella Tutorials/FlashIntro/Assets e fare clic sul file track1.mp3. Fare clic tenendo premuto Ctrl (Windows) o Comando (Macintosh) per aggiungere il file ping.mp3 alla selezione, quindi fare clic su Apri. I file vengono importati nella libreria 3 Con il livello Audio selezionato, trascinare il file track1.mp3 dal pannello Libreria nello stage. All'interno della linea temporale, nel fotogramma viene visualizzata una piccola rappresentazione delle onde sonore. 4 Nella linea temporale, selezionare il primo fotogramma del livello Audio. Nella finestra di ispezione Proprietà, digitare 999 nella casella di testo Ciclo per specificare quante volte il suono verrà riprodotto senza interruzione. 218 Capitolo 8

219 Prova del filmato 1 Salvare il file e scegliere Controlli > Prova filmato per riprodurre il suono. 2 Dopo aver riprodotto il filmato, fare clic sulla casella di chiusura. Aggiunta di un suono evento a un pulsante Oltre a trascinare un suono nello stage, è possibile selezionarlo dalla finestra di ispezione Proprietà. Questo metodo verrà utilizzato per aggiungere un suono evento a un pulsante. Come appreso nella lezione relativa alla creazione di pulsanti, quando si crea un simbolo di pulsante, vengono creati fotogrammi per i diversi stati del pulsante in relazione al puntatore del mouse. Il fotogramma Sopra, per esempio, rappresenta lo stato del pulsante quando il puntatore si trova sopra di esso. Altri fotogrammi o stati del pulsante includono Su, Giù e Area attiva. Si procederà ora all'aggiunta di un suono evento a un pulsante, in modo che il suono venga riprodotto quando il pulsante si trova in stato Sopra. Poiché si sta aggiungendo il suono al simbolo di pulsante nella libreria, non solo a un'istanza del simbolo, il suono verrà riprodotto per ogni istanza del pulsante. 1 Nella pannello Libreria, fare doppio clic sull'istanza del pulsante 1, per attivare la modalità di modifica dei simboli. 2 Nella linea temporale per il pulsante 1, aggiungere un nuovo livello e denominarlo Audio. 3 Selezionare il fotogramma Sopra (fotogramma 2) del livello Audio e scegliere Inserisci > Fotogramma chiave, oppure premere F6. 4 Per definire le proprietà del suono, fare clic sul fotogramma 2 del livello Audio. Nella finestra di ispezione Proprietà, selezionare Ping.mp3 dal menu a comparsa Audio. Verificare che nel menu a-comparsa Sincr. sia selezionato Evento. 5 Salvare il documento e scegliere Controlli > Prova filmato per riprodurre i suoni associati ai pulsanti. Dopo aver visualizzato il file SWF, chiudere la relativa finestra per tornare al documento. Esercitazione di Flash MX 219

220 Organizzazione del pannello Libreria Le risorse presenti attualmente nel pannello Libreria sono limitate. Per fare in modo che siano sempre ben organizzate, facilmente reperibili e divise per tipo, si procederà a spostarle in cartelle appositamente create. Suggerimento: È consigliabile tenere sempre in ordine i pannelli Libreria dei filmati creati, soprattutto per permettere a chi lavora su uno stesso file di individuare con facilità gli elementi in uso. 1 Se il pannello Libreria non è già aperto, scegliere Finestra > Libreria per visualizzarlo. 2 Se necessario, allargare ed espandere la finestra per visualizzare tutte le risorse del pannello Libreria. Nella parte inferiore del pannello Libreria, fare clic sul pulsante Nuova cartella per quattro volte, per creare altrettante nuove cartelle. 3 Fare doppio clic sul nome della cartella 1 senza nome e denominarla Clip filmato animazione auto. 4 Rinominare le altre tre cartelle rispettivamente Audio, Immagini e Pulsanti. 5 Trascinare Auto Vista 1, Auto Vista 2, Auto Vista 3 e Animazione auto nella cartella Clip filmato animazione auto. 220 Capitolo 8

221 6 Trascinare ping.mp3 e track1.mp3 nella cartella Audio. 7 Trascinare view1.png, view2.png, e view3.png nella cartella Immagini. 8 Trascinare i simboli relativi al pulsante 1, al pulsante 2 e al pulsante 3 nella cartella Pulsanti. Con la cartella Pulsanti selezionata, fare nuovamente clic su Nuova cartella per creare una sottocartella per Pulsanti. 9 Denominare la nuova cartella Clip filmato pulsanti e trascinare le rimanenti risorse del clip filmato pulsante dentro di essa. 10 Chiudere il pannello Libreria e salvare il documento. Esercitazione di Flash MX 221

222 Prova delle prestazioni di scaricamento e pubblicazione del filmato Per completare il documento verrà usato il comando Pubblica, per creare un filmato compatibile con il Web, con estensione SWF. Se si usa il comando Pubblica con le impostazioni predefinite, il file verrà preparato per il Web. Il file SWF verrà pubblicato e verrà creato un file HTML con i tag necessari per la sua visualizzazione. Una volta definite le necessarie opzioni delle impostazioni di pubblicazione, è possibile esportare contemporaneamente in tutti i formati selezionati scegliendo File > Pubblica. Le impostazioni di pubblicazione specificate vengono memorizzate insieme al documento, in modo che ogni filmato contenga le proprie impostazioni. Nella presente sezione vengono illustrate le seguenti operazioni: Uso del Profilo ampiezza banda per controllare le prestazioni di scaricamento del filmato Pubblicazione del filmato in unico passaggio Esame e modifica delle impostazioni di pubblicazione Visualizzazione del filmato in un browser Web Per completare la sezione, è possibile continuare a lavorare sul file myostiletto.fla oppure individuare la cartella principale di Flash e aprire il file Tutorials/FlashIntro/stiletto7.fla. In quest'ultimo caso, salvare il file con un nuovo nome nella cartella My_Stiletto in modo da conservare una versione non modificata del file originale. Prova delle prestazioni di scaricamento del filmato Per la corretta riproduzione di un filmato Macromedia Flash su Internet, è necessario che ogni fotogramma sia stata scaricato prima di poter essere visualizzato nel filmato. Se il filmato arriva a un fotogramma non ancora scaricato, si arresta fino all'arrivo dei dati. I file Macromedia Flash con ampiezza di banda ridotta garantiscono una maggiore velocità di scaricamento. È possibile usare Profilo ampiezza banda per controllare il filmato e verificare dove potrebbero verificarsi delle interruzioni. Il Profilo ampiezza banda fornisce una rappresentazione grafica della quantità di dati inviati da ciascun fotogramma del filmato, in base alla velocità di connessione selezionata. 1 Salvare il documento e scegliere Controlli > Prova filmato. 2 Dal menu Debug, selezionare una velocità di connessione per determinare la velocità di scaricamento che verrà simulata. È inoltre possibile scegliere Personalizza e inserire direttamente la velocità di scaricamento desiderata. 222 Capitolo 8

223 3 Scegliere Visualizza > Profilo ampiezza banda per visualizzare il file SWF tramite un grafico che rappresenta le prestazioni di scaricamento. La barra ombreggiata rappresenta il primo (e unico) fotogramma del filmato principale. Per i filmati con più fotogrammi saranno visualizzate più barre ombreggiate. L'altezza della barra rappresenta la dimensione del fotogramma espressa in byte e in kilobyte. Le barre che si estendono al di sopra la linea rossa, in particolare se non corrispondono al primo fotogramma, indicano che potrebbero verificarsi interruzioni nella riproduzione del filmato. Il filmato può essere ottimizzato per ottenere uno scaricamento più rapido. Per ulteriori informazioni, vedere? > Uso di Flash > Ottimizzazione dei filmati. 4 Una volta terminata la visualizzazione del Profilo ampiezza banda, scegliere Visualizza > Profilo ampiezza banda per disattivare la funzione. Chiudere la finestra del file SWF per tornare all'ambiente di programmazione. Uso del comando Pubblica È possibile pubblicare un documento Macromedia Flash per la riproduzione sul Web in un unico passaggio. Dopo aver salvato il documento, scegliere File > Pubblica. Il filmato verrà pubblicato tramite la creazione di un file SWF ed eventualmente di altri file aggiuntivi, in base agli attributi della finestra di dialogo Impostazioni pubblicazione. I file pubblicati, per impostazione predefinita, si trovano nella stessa cartella in cui è stato salvato il file FLA. Esercitazione di Flash MX 223

224 Visualizzazione delle impostazioni di pubblicazione Mediante la finestra di dialogo Impostazioni pubblicazione è possibile riconfigurare con facilità le modalità di pubblicazione del file. 1 Per visualizzare le impostazioni di pubblicazione, scegliere File > Impostazioni pubblicazione. Macromedia Flash è configurato, per impostazione predefinita, per la creazione di un file HTML di supporto nel quale viene visualizzato il filmato Flash. Quando viene selezionato un formato che richiede impostazioni aggiuntive, viene visualizzata una nuova scheda. 2 Nella scheda Formati, verificare che siano selezionate le opzioni Flash (.swf). e HTML (.html). Fare clic sulla scheda Flash. Per impostazione predefinita, il filmato viene pubblicato in Flash Player. Il processo di pubblicazione applica la compressione anche al filmato e ai file JPEG. 3 Fare clic sulla scheda HTML. Per impostazione predefinita, il processo di pubblicazione crea un documento HTML che inserisce il file SWF in una finestra di browser. Le modalità di visualizzazione del filmato nel browser dipendono dalle impostazioni della scheda HTML nella finestra di dialogo Impostazioni pubblicazione. 224 Capitolo 8

225 Modifica delle impostazioni di pubblicazione Per impostazione predefinita, al file SWF viene attribuito lo stesso nome del file FLA, ma è comunque possibile modificarlo. 1 Deselezionare l'opzione Usa nomi predefiniti nella scheda Formati della finestra di dialogo Impostazioni pubblicazione. 2 Nella casella di testo HTML (.html), selezionare il testo esistente e digitare un nuovo nome, per esempio stilettoelectric.html, quindi fare clic su Pubblica. Alla chiusura della finestra di stato Pubblicazione, fare clic su OK nella finestra di dialogo Impostazioni pubblicazione. Visualizzazione del filmato pubblicato in un browser È possibile visualizzare nel browser il file HTML e il file SWF appena pubblicati. 1 Aprire il browser, quindi il file HTML creato. Per impostazione predefinita, il file HTML si trova nella stessa cartella del file FLA. All'apertura del file HTML, il filmato SWF viene riprodotto all'interno del browser. 2 All'interno del browser è possibile usare un comando come Visualizza > Origine pagina oppure Visualizza > Origine per visualizzare il codice HTML. I tag OBJECT e EMBED assicurano che il filmato SWF venga visualizzato all'interno del browser. Per ulteriori informazioni sui modelli HTML di Macromedia Flash, vedere? > Uso di Flash > Informazioni sui modelli di pubblicazione HTML. Esercitazione di Flash MX 225

226 Altre operazioni Completando tutte le otto sezioni dell'esercitazione, si è appreso molto sulla creazione di filmati Macromedia Flash, e in particolare sulle operazioni che seguono: Analisi di un filmato finale Definizione delle proprietà del documento e creazione di una sfumatura Creazione di un disegno vettoriale e applicazione di maschere Interpolazione di effetti bitmap all'interno di un clip filmato Caricamento di testo dinamico Elaborazione di pulsanti e aggiunta di funzioni di navigazione Inserimento di suoni evento e audio in streaming Prova e pubblicazione di un filmato Per ulteriori informazioni sulle potenzialità di Macromedia Flash, eseguire l'esercitazione Introduzione ad ActionScript, reperibile alla voce? > Esercitazioni. Pensata per l'utente privo di grande familiarità con ActionScript, l'esercitazione presenta i principi dello script e consente di creare un gioco di pazienza usando le azioni. È inoltre possibile effettuare una ricerca degli articoli e delle Tech Notes relative a Flash presso il pluri-premiato Centro di supporto Macromedia. È possibile accedere al sito collegandosi all'indirizzo e facendo clic su Assistenza. 226 Capitolo 8

227 CAPITOLO 9 Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX La potenza e la flessibilità di Macromedia Flash MX includono le potenzialità di integrazione con la suite Macromedia Studio MX. Ogni attività, dalla semplice creazione di elementi grafici ai più complessi progetti applicativi e di sviluppo e trasferimento di siti Web beneficeranno della facilità con la quale è possibile sfruttare la potenza dei prodotti Studio MX. Nelle sezioni seguenti vengono evidenziate le numerose funzioni disponibili per ottenere il massimo dalla suite Studio MX, per la semplificazione dei flussi di lavoro, la creazione di elementi di interfaccia e per usare senza problemi tutti i formati grafici più diffusi sul Web. Macromedia Dreamweaver MX Macromedia Dreamweaver MX offre tutto il necessario per creare un sito Web professionale, sia che si desideri lavorare con i già noti strumenti di layout visivo sia che si richieda il controllo di un solido ambiente di modifica di testo. L'intuitiva interfaccia utente di Macromedia consente di creare e gestire facilmente ogni sito. L'unione tra Macromedia Flash MX e Dreamweaver MX consente di creare, trasferire e gestire con facilità contenuti e siti Web dinamici e impegnativi. Dreamweaver MX Funzioni di integrazione con Flash MX Viene di seguito illustrato un riepilogo delle funzioni utilizzabili per assicurare facilmente la piena integrazione dei contenuti Macromedia Flash MX in un sito Dreamweaver. Pulsanti di Macromedia Flash MX È possibile aggiungere pulsanti di navigazione di Macromedia Flash direttamente in Dreamweaver MX. Tramite la tavolozza Oggetto, è possibile selezionare stili di pulsanti, inserire testi e specificare la destinazione di un URL, il tutto all'interno di Dreamweaver MX. È possibile creare stili in Macromedia Flash MX oppure scaricarli dal sito Web Dreamweaver Exchange. Testi di Macromedia Flash MX È possibile inserire testo con antialiasing da Macromedia Flash MX direttamente in Dreamweaver MX. Il tipo di carattere verrà visualizzato correttamente nel browser, indipendentemente dal fatto che sia installato sul sistema dell utente. 227

228 Oggetti e comportamenti personalizzati di Macromedia Flash MX Sul sito Web Dreamweaver Exchange sono disponibili numerosi oggetti e comportamenti personalizzati di Macromedia Flash, che consentono di dotare i file Macromedia Flash in Dreamweaver MX di opzioni specifiche. Parametri di Macromedia Flash MX Quando si inserisce un file di Macromedia Flash in Dreamweaver MX, è possibile definire qualsiasi set di parametri per il file, utilizzando la finestra di ispezione Proprietà quando il file viene selezionato nella pagina di Dreamweaver. Se l'opzione necessaria della finestra di ispezione Proprietà non è visibile, usare il pulsante Parametri nella parte inferiore destra della finestra di ispezione per aggiungere i parametri e i valori desiderati. Coppie nome/valore di Macromedia Flash MX In Macromedia Flash MX è possibile passare in modo dinamico coppie nome/valore a un filmato tramite l'url di caricamento del filmato. Attraverso questa tecnica è possibile, per esempio, creare un filmato da usare come elemento di navigazione all'interno di un sito HTML. Le variabili passate indicano al filmato di navigazione di Macromedia Flash la posizione dell'utente all'interno del sito e di conseguenza le sezioni di menu da evidenziare. Caratteri speciali di Macromedia Flash MX Se si stanno utilizzando caratteri speciali nell'url di accesso a Macromedia Flash, è possibile evitare la conversione dei caratteri, da parte di Dreamweaver MX, in stringhe codificate sotto forma di URL. È sufficiente disattivare le opzioni relative alla codifica dei caratteri speciali negli URL nelle Preferenze. Kit di integrazione JavaScript di Macromedia Flash Disponibile attraverso il sito Web Dreamweaver Exchange, il Kit di integrazione JavaScript di Macromedia Flash fornisce alcune funzioni essenziali: I controlli di Macromedia Flash Player forniscono controlli simili a quelli di un VCR per le animazioni di Macromedia Flash. I comportamenti di Dreamweaver consentono di aggiungere facilmente controlli di riproduzione, arresto, avvolgimento veloce, riavvolgimento e zoom a qualsiasi oggetto HTML sulla pagina. Le convalide di moduli avanzate consentono di usare Dreamweaver MX per aggiungere convalide di moduli avanzate predefinite client-side ai moduli di Macromedia Flash. Gli script browser per Macromedia Flash consentono di fare riferimento con facilità a una libreria JavaScript comune in ActionScript di Macromedia Flash. Gli script browser per Macromedia Flash forniscono codice JavaScript incorporato per l'uso di cookie, l'interazione con moduli HTML, l'apertura di nuove finestre e il controllo delle immagini. Il Deployment Kit di Macromedia Flash è uno strumento completo, che consente di trasferire in modo coerente e con facilità siti Web di Macromedia Flash. Gli strumenti disponibili includono esempi, script, modelli e istruzioni guidate per implementare il rilevamento della presenza di Macromedia Flash Player in qualsiasi sito Web. Il Dispatcher Behavior di Macromedia Flash è uno strumento di rilevamento composto da diversi file, inclusi nel Deployment Kit di Macromedia Flash, finalizzati al rilevamento della presenza di una versione idonea di Macromedia Flash Player all'interno del browser dell'utente. È anche possibile indirizzare l'utente ai contenuti appropriati in base a tali informazioni. 228 Capitolo 9

229 Anteprima di file di Macromedia Flash MX in Dreamweaver MX È possibile riprodurre file di Macromedia Flash MX in Dreamweaver MX durante la loro programmazione. Il pulsante Riproduci/Stop nella finestra di ispezione Proprietà di Macromedia Flash consente di visualizzare un'anteprima dell'oggetto Macromedia Flash nella finestra del documento Dreamweaver MX in fase di programmazione. Fare clic sul pulsante verde Riproduci per vedere l oggetto in modalità di esecuzione; fare clic sul pulsante rosso Stop per arrestare la riproduzione dell oggetto e, se necessario, modificarlo. Anteprima di file di Macromedia Flash MX con azione Controlla Shockwave o Flash L'azione Controlla Shockwave o Flash consente di riprodurre, interrompere o riavvolgere un filmato di Macromedia Flash, oppure passare a un fotogramma specifico. Per applicare il comportamento, selezionare un ancoraggio o un'immagine, quindi selezionare il comportamento Controlla Shockwave o Macromedia Flash dal pannello Comportamenti. Per ulteriori informazioni sull'integrazione tra Macromedia Flash MX e Dreamweaver MX, visitare il sito Web di Macromedia all indirizzo resources/integration/. Aggiornamento dei filmati di Macromedia Flash MX per Dreamweaver MX Se nel sistema è installato Dreamweaver MX, è possibile esportare i file dei filmati di Macromedia Flash (SWF) direttamente in un sito Dreamweaver. Per ulteriori informazioni sull'uso di Dreamweaver MX, vedere la guida dell'applicazione. In Dreamweaver MX è possibile aggiungere alla pagina un filmato di Macromedia Flash. Basta un semplice clic del mouse per aggiornare il documento di Macromedia Flash (file FLA) relativo al filmato di Flash esportato e per riesportare automaticamente il filmato aggiornato in Dreamweaver. Per aggiornare un filmato di Macromedia Flash per Dreamweaver MX: 1 In Dreamweaver MX, aprire la pagina HTML contenente il filmato di Macromedia Flash. 2 Eseguire una delle operazioni descritte di seguito: Selezionare il filmato di Macromedia Flash e fare clic su Modifica nella finestra di ispezione Proprietà. In vista Struttura, fare doppio clic sul filmato di Macromedia Flash tenendo premuto Ctrl (Windows) o Comando (Macintosh). In vista Struttura, fare clic con il pulsante destro del mouse (Windows) o premere Ctrl e fare clic (Macintosh) sul filmato di Macromedia Flash, quindi scegliere Modifica con Flash dal menu di scelta rapida. Nel pannello Sito, fare clic con il pulsante destro del mouse (Windows) o premere Ctrl (Macintosh) e fare clic sul filmato di Macromedia Flash in vista Struttura, quindi scegliere Apri con Flash dal menu di scelta rapida. Viene avviata l'applicazione Macromedia Flash. 3 Se il documento di Macromedia Flash (FLA) relativo al filmato esportato non si apre, verrà visualizzata una finestra di dialogo per l'individuazione del file. Individuare il file FLA nella finestra di dialogo Apri file e fare clic su Apri. Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX 229

230 4 Se in Dreamweaver MX è stata usata la funzione Cambia tutti i collegamenti del sito, viene visualizzato un messaggio di avvertenza. Fare clic su OK per applicare le modifiche ai collegamenti al filmato di Macromedia Flash. Se si desidera che il messaggio non venga più visualizzato quando si aggiorna il filmato di Macromedia Flash, fare clic sulla casella Non visualizzare questo messaggio in futuro. 5 Aggiornare il documento di Macromedia Flash (FLA) come desiderato, in Macromedia Flash MX. 6 Per salvare il documento di Macromedia Flash (FLA) e riesportare il filmato in Dreamweaver MX, eseguire una delle operazioni seguenti: Per aggiornare il file e chiudere Macromedia Flash MX, fare clic sul pulsante Fine sopra l'angolo superiore sinistro dello stage. Per aggiornare il file senza chiudere Macromedia Flash MX, scegliere File > e l'opzione Aggiorna per Dreamweaver. Macromedia FreeHand La combinazione Macromedia Flash MX/FreeHand è pensata per creare, con sforzi ridotti, materiale di stampa di qualità elevatissima ed esperienze Web di grande effetto. Macromedia FreeHand e Macromedia Flash MX forniscono strumenti di pubblicazione potenti e utilizzabili su vari supporti, in grado di trasmettere con efficacia la visione creativa e il messaggio dell'autore. Funzioni di integrazione di Macromedia FreeHand con Macromedia Flash MX Viene di seguito illustrato un riepilogo delle funzioni utilizzabili per assicurare con facilità la piena integrazione di Macromedia Flash MX con FreeHand. Illustrazione in FreeHand Lo storyboarding di un sito Macromedia Flash rappresenta una parte essenziale del processo di progettazione che FreeHand rende possibile, attraverso la stretta integrazione con Macromedia Flash MX e l'ampia gamma delle sue funzioni creative. FreeHand fornisce tutti i tradizionali strumenti di Bézier normalmente presenti in un pacchetto di disegno professionale. Contiene inoltre cinque funzioni essenziali che estendono la relazione creativa con Macromedia Flash MX: La trasparenza vettoriale consente di creare in FreeHand splendidi effetti che è poi possibile stampare senza problemi e trasferire in Macromedia Flash come oggetti trasparenti. Iniziare la creazione di trasparenze in FreeHand consente di creare immagini stampabili di elevata qualità con un maggiore livello di flessibilità nella scelta del mezzo di output. La funzione Rilascio a livelli consente di creare rapidamente quattro diversi tipi di animazioni da fusioni, testo o gruppi in qualsiasi livello di FreeHand, da usare poi per la creazione di animazioni di Macromedia Flash. Il rilascio di una fusione ai livelli determina lo spostamento delle fasi della fusione sui singoli livelli, per creare un'animazione fotogramma per fotogramma della fusione. Il rilascio di testo ai livelli determina lo spostamento di ciascun carattere su un livello separato. Nel caso di un gruppo, ciascun oggetto viene rilasciato su un nuovo livello in base all'ordine di sovrapposizione. 230 Capitolo 9

231 La libreria di simboli Macromedia consente di memorizzare gli oggetti FreeHand di uso frequente in una libreria di simboli in FreeHand, analoga alla libreria di Macromedia Flash. Quando si modifica un simbolo della libreria, tutte le istanze all'interno del file vengono aggiornate automaticamente, analogamente a quanto avviene in Macromedia Flash. Se si importa o si copia un file di FreeHand in Macromedia Flash, vengono mantenuti tutti i simboli originali della libreria di simboli di FreeHand. Questo velocizza il flusso di lavoro, ottimizzando le dimensioni del file del filmato di Macromedia Flash. La funzione Prova filmato consente di visualizzare in anteprima l'aspetto delle illustrazioni e dei layout una volta esportati nel formato di file di Macromedia Flash. Questa modalità, in FreeHand, utilizza il motore di visualizzazione di Macromedia Flash. Le griglie prospettiva offrono possibilità creative illimitate per la creazione e l'importazione di grafica vettoriale 3D, statica o animata, direttamente in Macromedia Flash. In precedenza, era necessario disegnare le griglie direttamente sui livelli di sfondo, per poi disegnare i relativi oggetti in prospettiva sopra di esse, nascondendo i livelli prima dell'output finale. Flessibilità di progettazione con FreeHand FreeHand è lo strumento ideale per iniziare la creazione di un sito Macromedia Flash, grazie agli strumenti di illustrazione professionale e alle potenti funzioni di produzione, quali pagine multiple, stili e funzioni di ricerca e sostituzione di immagini. La funzione Pagine multiple di FreeHand offre la flessibilità necessaria consentendo di effettuare le seguenti operazioni: Effettuare lo storyboarding su un intero sito di Macromedia Flash. Creare una brochure multipagina, con contenuti complessi, e riutilizzarla in Macromedia Flash MX. Dare diversi aspetti alle scene e verificarne l'effetto. Applicare gli stili a testo e immagini per effettuare modifiche rapide. Eseguire operazione di ricerca e sostituzione per modificare rapidamente immagini e testo all'interno di un documento, in base ai criteri desiderati. Comunicazione con FreeHand In FreeHand sono supportati numerosi formati di output in altrettanti tipi di media, il che rende possibile presentare il proprio messaggio a un pubblico estremamente vasto. È possibile progettare layout di stampa e creare documenti stampati con FreeHand, per poi esportarli come file di Macromedia Flash, attivando l'opzione alta qualità di stampa per le applicazioni di stampa native per il Web. Con l'aiuto delle funzioni che seguono, è possibile produrre uno storyboard FreeHand come file di Macromedia Flash interattivo, inviarlo via al cliente oppure utilizzarlo come parte di una presentazione su schermo: Il pannello Navigazione di FreeHand consente la creazione di collegamenti a pagine per aggiungere funzioni interattive di base ai file di Macromedia Flash. Gli oggetti trasparenti in FreeHand si mantengono tali anche in Macromedia Flash. Gli elementi ripetuti vengono correttamente convertiti in simboli, in modo da mantenere ridotte le dimensioni dei file. I livelli e le pagine di FreeHand possono essere convertiti in animazioni fotogramma per fotogramma Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX 231

232 Con FreeHand è possibile produrre materiali di stampa PostScript di qualità elevata: È possibile stampare materiali e adattarli facilmente al Web con Macromedia Flash. FreeHand è ideale per stampare gli storyboard di siti di Macromedia Flash. Le presentazioni stampate di livello professionale create in FreeHand possono essere utilizzate in Macromedia Flash MX dopo l'approvazione del cliente. Le funzioni che seguono consentono di importare facilmente in Macromedia Flash MX il lavoro eseguito con FreeHand. Le pagine possono essere mappate su scene o fotogrammi. I livelli vengono mantenuti o possono essere mappati su fotogrammi. I simboli e le istanze denominate vengono mantenuti, in modo da conservare i file organizzati e in dimensioni ridotte. Le lenti trasparenti vengono convertite in trasparenze di colore alfa in Macromedia Flash MX. Importazione di file di FreeHand in Macromedia Flash MX È possibile importare direttamente file di FreeHand (versione 10 o precedenti) in Macromedia Flash MX. FreeHand è la soluzione ottimale per la creazione di immagini vettoriali da importare in Macromedia Flash MX, poiché consente di conservare i livelli, i blocchi di testo, i simboli della libreria e le pagine di FreeHand e di scegliere un intervallo di pagina da importare. Se il file di FreeHand importato è in modalità colore CMYK, Macromedia Flash MX converte il file in RGB. Attenersi alle seguenti istruzioni durante l'importazione di file di FreeHand: Quando si importa un file contenente oggetti sovrapposti, che si desidera mantenere come elementi separati, posizionare gli oggetti su livelli separati in FreeHand e selezionare Livelli nella finestra di dialogo Importa da Freehand in Macromedia Flash MX. Se si importano in Macromedia Flash MX oggetti sovrapposti su un solo livello, le forme sovrapposte verranno separate in corrispondenza dei punti di intersezione, come accade con gli oggetti sovrapposti creati in Macromedia Flash. Quando si importano file con riempimenti sfumati, Macromedia Flash MX supporta fino a un massimo di otto colori in un riempimento. Se in un file di FreeHand è incluso un riempimento sfumato con più di otto colori, Macromedia Flash MX crea dei tracciati di clipping che simulano l'aspetto del riempimento sfumato. Tali tracciati possono determinare un aumento della dimensione del file. Per ridurla al minimo, è consigliabile usare in FreeHand riempimenti sfumati con non più di otto colori. Quando si importano file contenenti fusioni, Macromedia Flash MX importa ciascuna fase di una fusione come un tracciato separato. Di conseguenza, maggiore è il numero delle fasi di una fusione nel file di FreeHand, maggiore sarà la dimensione del file importato in Macromedia Flash MX. Se i file importati contengono tratti con estremità squadrate, in Macromedia Flash MX esse vengono convertite in estremità arrotondate. Quando si importano file contenenti immagini in scala di grigio, in Macromedia Flash MX tali immagini vengono convertite in RGB. La conversione può incrementare la dimensione del file importato. 232 Capitolo 9

233 Per importare file contenenti immagini EPS, è necessario selezionare l'opzione Converti file EPS modificabili importati nelle preferenze di importazione di FreeHand, prima di inserire l'immagine EPS in FreeHand. Se non si seleziona questa opzione, non sarà possibile visualizzare l'immagine EPS quando importata in Macromedia Flash MX. Inoltre, in Macromedia Flash MX non è possibile visualizzare le informazioni relative alle immagini EPS importate (indipendentemente dalle impostazioni nelle Preferenze di FreeHand). Per importare un file di FreeHand: 1 Scegliere File > Importa. 2 Nella finestra di dialogo Importa, scegliere FreeHand dal menu a comparsa Tipo file (Windows) o Mostra (Macintosh). 3 Individuare il file di FreeHand e selezionarlo. 4 Eseguire una delle operazioni descritte di seguito: In Windows o Mac OS X o versioni successive, fare clic su Apri. In Mac OS 9.X o versioni precedenti, fare clic su Aggiungi per aggiungere il file selezionato all'elenco Importa, quindi fare clic su Importa per importare il file o i file in elenco. 5 Nella finestra di dialogo delle impostazioni di importazione da FreeHand, selezionare un'impostazione per la mappatura delle pagine: Scene consente di convertire ogni pagina del documento di FreeHand in una scena del documento di Macromedia Flash. Fotogrammi consente di convertire ogni pagina del documento di FreeHand in un fotogramma del documento di Macromedia Flash. 6 Impostare la mappatura dei livelli scegliendo una delle seguenti opzioni: Livelli consente di convertire ogni livello del documento di FreeHand in un livello del documento di Macromedia Flash. Fotogrammi consente di convertire ogni livello del documento di FreeHand in un fotogramma del documento di Macromedia Flash. Unisci consente di convertire tutti i livelli del documento di FreeHand in un unico livello del documento di Macromedia Flash. 7 Per Pagine, scegliere una delle opzioni seguenti: Scegliere Tutto per importare tutte le pagine dal documento FreeHand. Immettere i numeri delle pagine in Da e A per importare un intervallo di pagine dal documento FreeHand. 8 Per Opzioni, scegliere una delle seguenti impostazioni: Includi livelli invisibili consente di importare tutti i livelli, visibili e nascosti, dal documento di FreeHand. Includi livelli di sfondo consente di importare il livello di sfondo insieme al documento di FreeHand. Mantieni blocchi di testo consente di conservare il testo del documento di FreeHand come testo modificabile nel documento di Macromedia Flash. 9 Fare clic su OK. Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX 233

234 Macromedia Fireworks MX Macromedia Fireworks MX consente una straordinaria efficienza nella produzione della grafica Web, consentendo di creare rapidamente pulsanti, animazioni e comp di pagina. Ogni elemento rimane modificabile, compresi i file creati nelle principali applicazioni grafiche. Il pannello Cronologia, la funzione di creazione guidata pulsanti e la libreria consentono di risparmiare tempo durante la produzione. Fireworks è l'unica applicazione che consente di creare lo script dell'intera applicazione per automatizzare il flusso di lavoro. Produzione efficiente di grafica Web in Macromedia Fireworks MX Attraverso Macromedia Flash MX e Fireworks MX, sviluppatori e progettisti possono creare un flusso di lavoro nei due sensi tra l'ambiente del proprio strumento di produzione bitmap e Macromedia Flash MX. La stretta integrazione tra Macromedia Flash MX e Fireworks MX rende quest'ultima applicazione lo strumento produttivo ideale per la combinazione tra immagini bitmap ottimizzate e siti Web di Macromedia Flash a base vettoriale. In Fireworks è inoltre possibile esportare documenti HTML personalizzati per molti tra i più diffusi editor HTML. Le funzionalità di Macromedia Flash MX illustrate di seguito rendono ancora più semplice combinare le potenzialità dei due strumenti. Avvio e modifica con Fireworks Dal menu di scelta rapida di un'immagine bitmap memorizzata nella libreria di Flash, è possibile aprire e modificare direttamente qualsiasi bitmap all'interno di Fireworks. Una volta modificata e salvata l'immagine, la voce di libreria in Macromedia Flash MX viene aggiornata automaticamente. È possibile modificare gli oggetti grafici o l'immagine sorgente originale. Importazione di file PNG di Fireworks È possibile impostare direttamente file PNG nativi di Fireworks in Macromedia Flash MX. È inoltre possibile importare immagini bitmap su un unico livello. Una volta importati i file in Macromedia Flash MX, è possibile aggiungere sofisticate funzioni interattive, effetti e animazioni. È possibile importare file PSD di Adobe Photoshop in Fireworks e salvarli come file PNG a livelli per l'importazione in Macromedia Flash MX. Esportazione di filmati di Macromedia Flash da Fireworks Fireworks supporta i filmati di Macromedia Flash nativi (file SWF), che è quindi possibile pubblicare direttamente da Fireworks. È possibile inoltre creare banner pubblicitari animati ed esportarli come filmati di Macromedia Flash, ottenendo file compatti e di dimensioni limitate. Importazione di file PNG di Fireworks in Macromedia Flash MX È possibile importare i file PNG di Fireworks in Macromedia Flash MX come immagini su un unico livello o oggetti modificabili. Quando si importa un file PNG come immagine su un unico livello, l'intero file, incluse eventuali immagini vettoriali, viene rasterizzato o convertito in un'immagine bitmap. Se il file PNG viene importato come insieme di oggetti modificabili, le immagini vettoriali del file vengono mantenute in formato vettoriale. È inoltre possibile scegliere di conservare bitmap, testo e livelli guida nel file PNG quando si importa il file come insieme di oggetti modificabili. Se il file PNG viene importato come immagine su un unico livello, sarà possibile avviare Fireworks dall'interno di Macromedia Flash MX e modificare il file PNG originale, compresi i dati vettoriali. Vedere in Flash? > Uso di Flash > Modifica delle bitmap con un editor esterno 234 Capitolo 9

235 Quando si importano più file PNG in un batch, è necessario scegliere le impostazioni di importazione una sola volta. In Macromedia Flash MX verranno utilizzate le stesse impostazioni per tutti i file inclusi nel batch. Nota: È possibile modificare le immagini bitmap in Macromedia Flash MX convertendole in immagini vettoriali oppure suddividendole in più parti. Vedere Conversione di bitmap in grafici vettoriali e Divisione di una bitmap scegliendo in Flash? > Uso di Flash. Per importare un file PNG di Fireworks: 1 Scegliere File > Importa. 2 Nella finestra di dialogo Importa, scegliere Immagine PNG dal menu di scelta rapida Tipo file (Windows) o Mostra (Macintosh). 3 Individuare l'immagine PNG di Fireworks e selezionarla. 4 Eseguire una delle operazioni descritte di seguito: In Windows o Mac OS X o versioni successive, fare clic su Apri. In Mac OS 9.X o versioni precedenti, fare clic su Aggiungi per aggiungere il file selezionato all'elenco Importa, quindi fare clic su Importa per importare il file o i file in elenco. 5 Nella finestra di dialogo Impostazioni di importazione immagini PNG di Fireworks, nella struttura dei file, selezionare una delle seguenti opzioni: Le opzioni Importazione come clip filmato e Mantieni livelli consentono di importare il file PNG come clip filmato e di mantenerne livelli e fotogrammi invariati all'interno del simbolo del clip. L'opzione Importa nel nuovo livello nella scena corrente consente di importare il file PNG nel documento di Macromedia Flash corrente in un nuovo livello unico nella posizione più elevata all'interno dell'ordine di sovrapposizione. I livelli di Fireworks verranno così ridotti a un unico livello. I fotogrammi Fireworks saranno contenuti nel nuovo livello. 6 In Oggetti, scegliere una delle seguenti opzioni: L'opzione Rasterizza se necessario per mantenere aspetto consente di preservare i riempimenti, i tratti e gli effetti di Fireworks in Macromedia Flash MX. L'opzione Mantieni tutti i tracciati modificabili consente di conservare tutti gli oggetti sotto forma di tracciati vettoriali modificabili. Alcuni dei riempimenti, dei tratti e degli effetti di Fireworks andranno persi durante l'importazione. 7 Per Testo, selezionare una delle seguenti opzioni: L'opzione Rasterizza se necessario per mantenere aspetto consente di preservare i riempimenti, i tratti e gli effetti di Fireworks nei testi importati in Macromedia Flash MX. L'opzione Mantieni tutti i tracciati modificabili consente di modificare il testo. Alcuni dei riempimenti, dei tratti e degli effetti di Fireworks andranno persi durante l'importazione. 8 Selezionare l'opzione per l'importazione come unico livello per ridurre il file PNG a un'unica immagine bitmap. Se questa opzione è selezionata, tutte le altre saranno deselezionate. 9 Fare clic su OK. Integrazione di Macromedia Flash MX con la suite di prodotti Macromedia Studio MX 235

236 Macromedia ColdFusion MX Server Macromedia ColdFusion rappresenta il modo più rapido di creare e trasferire potenti applicazioni Internet. Utilizzato da centinaia di sviluppatori in tutto il mondo, semplifica e velocizza lo sviluppo di contenuti per i sistemi di pubblicazione, di soluzioni di business intelligence, di applicazioni indipendenti e altro ancora. Gli sviluppatori che utilizzando Macromedia Flash troveranno ColdFusion MX, comprensivo di supporto al server applicazioni Microsoft.NET e J2EE, il più potente e insieme il più semplice ambiente server-side per lo sviluppo di applicazioni dinamiche. Macromedia ColdFusion MX Server e Macromedia Flash MX Macromedia ColdFusion MX, grazie alla sua accessibilità e alle funzioni di sviluppo rapido, l'integrazione semplice ma potente con un'ampia gamma di sistemi back-end e il solido supporto XML, rappresenta l'ambiente ideale per la creazione di applicazioni di Macromedia Flash MX. Per essere davvero interessante, un'applicazione dinamica deve essere in grado di scambiare dati con vasto numero di sistemi back-end. ColdFusion MX offre connettività incorporata e assolutamente semplice con un set completo di sistemi back-end, compresi tutti i principali database, server di posta elettronica, server di file, directory aziendali e interfacce di componenti multi-piattaforma. ColdFusion MX comprende driver di database a prestazioni elevate per tutti i principali database, semplificando e velocizzando l'impostazione di origini dati tramite un'intuitiva interfaccia basata sul Web. Gli sviluppatori ColdFusion potranno facilmente inviare e recuperare messaggi dai server di posta elettronica, connettersi alle directory aziendali e trasferire documenti da e verso server di file. Inoltre, ColdFusion fornisce connettività alle applicazioni esistenti tramite interfacce di componenti COM, CORBA o EJB. ColdFusion MX supporta inoltre lo scambio di dati basati su XML con Flash Player. Tramite lo scambio di dati dinamici strutturati con ColdFusion MX, gli sviluppatori di applicazioni Macromedia Flash MX dinamiche potranno, senza alcuna difficoltà, sfruttare appieno la potente logica di elaborazione e la connettività back-end fornita da ColdFusion MX. La parte VIII del volume fornisce una panoramica del concetto di sviluppo Web dinamico e una presentazione della Developer Edition di ColdFusion MX, disponibile sul CD-ROM di Macromedia Studio MX oppure sul sito Web di Macromedia, all'indirizzo Per ulteriori informazioni su come sfruttare al meglio le funzionalità di integrazione tra Macromedia Flash MX e ColdFusion MX, visitare la pagina Risorse di Macromedia Flash e ColdFusion all indirizzo flash_coldfusion/. 236 Capitolo 9

237 Parte V Fireworks MX Parte V I capitoli della quinta parte presentano Macromedia Fireworks MX, illustrano un esercitazione e descrivono il funzionamento di Fireworks MX all interno della famiglia di prodotti Macromedia Studio MX. Questa parte è costituita dai seguenti capitoli: Capitolo 10, Benvenuti in Macromedia Fireworks MX Capitolo 11, Esercitazioni di Fireworks Capitolo 12, Integrazione di Macromedia Fireworks MX con la suite di prodotti Macromedia Studio MX

238

239 CAPITOLO 10 Benvenuti in Macromedia Fireworks MX Macromedia Fireworks MX è la soluzione professionale per la progettazione e la produzione di immagini per il Web. Si tratta del primo ambiente di produzione che consente di affrontare e risolvere tutte le specifiche sfide poste ai progettisti e agli sviluppatori di grafica Web. È possibile usare Fireworks per creare, modificare e animare le immagini Web, aggiungere funzioni interattive avanzate e ottimizzare immagini in un ambiente professionale. Nonché di creare e modificare immagini bitmap e vettoriali in un'unica applicazione. Tutti gli elementi sono modificabili in qualsiasi momento. Inoltre, è possibile automatizzare il flusso di lavoro per rispondere alla necessità di effettuare aggiornamenti e modifiche particolarmente complessi. L'integrazione di Fireworks con gli altri prodotti Macromedia Studio MX fornisce una soluzione Web veramente integrata. È possibile esportare facilmente immagini di Fireworks con codice personalizzato JavaScript e HTML per l'editor HTML utilizzato. Novità di Fireworks MX Le nuove funzioni di Fireworks MX lo rendono un'applicazione sempre più accessibile, con potenza superiore di creazione di immagini e funzioni interattive con i siti Web. Fireworks MX massimizza la produttività dei progettisti Web più esperti e consumati, degli sviluppatori HTML che lavorano anche con la grafica e degli sviluppatori Web emergenti, che necessitano di sviluppare pagine Web interattive e ricche di immagini, pur avendo una conoscenza limitata o nulla del linguaggio JavaScript o del codice. Fireworks MX è stato migliorato in modo essenziale, attraverso un'interfaccia utente semplificata, più potenti funzioni di creazione di menu a comparsa e di pulsanti e intuitivi strumenti vettoriali e bitmap. L'integrazione con le altre applicazioni Macromedia e con le applicazioni di terzi semplificano l'importazione in Fireworks di numerosi altri formati di file e l'esportazione in altre applicazioni, con la massima facilità d'uso. Un'altra novità di Fireworks è la possibilità di creare comandi JavaScript, presenti in Fireworks MX sotto forma di pannelli o finestre di dialogo, con Macromedia Flash MX. 239

240 Facilità d'uso delle funzioni di Fireworks MX Un ambiente di lavoro funzionale e intuitivo, comprensivo di una finestra di ispezione Proprietà e di strumenti professionali, rende Fireworks MX un'applicazione di uso semplice e immediato. Fireworks MX ha un nuovo aspetto, meglio organizzato e più coerente con le altre applicazioni di Macromedia MX Studio. I miglioramenti apportati allagestione Pannelli comprendono la possibilità di raggruppare i pannelli, per poi ridurre i gruppi in modo che solo la barra del titolo del gruppo sia visibile fino a quando non sia necessario usare i pannelli stessi. È possibile agganciare i gruppi di pannelli in un'area di aggancio pannelli per organizzare l'area di lavoro, oppure trascinare gruppi o singoli pannelli in qualsiasi punto dell'area di lavoro. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks >Organizzazione di pannelli e gruppi di pannelli. La finestra di ispezione Proprietà è un pannello dinamico con numerose opzioni che si modificano nelle diverse fasi del lavoro. Quando si apre un documento, nella finestra di ispezione Proprietà vengono visualizzate le relative proprietà, come dimensioni e colore dell'area di lavoro. Scegliere uno strumento dal pannello Strumenti per visualizzare le relative opzioni nella finestra di ispezione Proprietà. Scegliere un oggetto vettoriale per visualizzare le informazioni relative a riempimento e tratto. È possibile modificare queste e altre opzioni, inclusi effetti dal vivo, modalità di fusione e opacità, direttamente dalla finestra di ispezione Proprietà, anziché aprire o attivare ogni singolo pannello utilizzando il mouse. La finestra di ispezione Proprietà, già nota agli utenti di Macromedia Flash e di Dreamweaver, riduce il numero di pannelli nell'area di lavoro. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Uso della finestra di ispezione Proprietà. La modifica vettoriale e bitmap senza modalità elimina la necessità di tenere costantemente sotto controllo le modalità bitmap e vettoriali. La scelta di uno strumento o la selezione di un tipo di oggetto determina automaticamente se si procederà alla creazione e alla modifica di testo, di immagini vettoriali o di bitmap. I miglioramenti apportati alle funzioni di modifica di bitmap forniscono intuitive funzionalità di creazione di bitmap tramite taglia e incolla, di spostamento dei perimetri di selezione tra le immagini bitmap e di rifinitura delle immagini attraverso un nuovo gruppo di strumenti per il ritocco grafico. Inoltre, i tradizionali comandi di selezione sono organizzati in un nuovo menu Selezione. Le sezioni del pannello Strumenti che separano gli strumenti utilizzati per la creazione e la modifica di immagini bitmap, immagini vettoriali e oggetti Web offrono riferimenti per scegliere intuitivamente lo strumento più adatto e per ottenere i risultati creativi desiderati. Altri strumenti e relative funzioni sono raggruppate nelle categorie Seleziona, Colori e Visualizza. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Uso del pannello Strumenti. Il pulsante Esportazione rapida visualizza le opzioni adatte per l'esportazione di una varietà di formati di file o di stili HTML, o per l'avvio di altri prodotti Macromedia dalla finestra del documento, l'eliminazione dei tempi di impostazione e la semplificazione del flusso di lavoro. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Uso del pulsante Esportazione rapida. 240 Capitolo 10

241 Il testo sullo schermo consente di integrare visivamente testo e immagini senza l'uso dell'editor di testo. È sufficiente selezionare lo strumento Testo, fare clic nell'area di lavoro e iniziare a digitare. Nella finestra di ispezione Proprietà è inoltre possibile impostare gli attributi del testo per lo strumento Testo, prima di iniziare la digitazione; oppure è possibile evidenziare il testo esistente e applicare la formattazione desiderata. Fireworks MX include una gamma di nuovi controlli per la formattazione di testo e di paragrafi. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Uso del testo. L'ingrandimento variabile consente di trascinare lo strumento Ingrandisci per determinare l'esatto valore di ingrandimento. Dopo l'ingrandimento del documento, il relativo valore viene visualizzato nella casella di testo Imposta ingrandimento nella parte inferiore del documento. La compatibilità con Windows XP e Mac OS X consente di sfruttare al meglio i vantaggi offerti dai più recenti sistemi operativi. Fireworks MX supporta completamente tutti i miglioramenti apportati all'interfaccia utente di OS X. L'esportazione XHTML consente di esportare, aggiornare e ed eseguire il roundtrip di tag XHTML negli stessi stili disponibili in Fireworks per il linguaggio HTML. È possibile esportare/ reimportare documenti convertiti in XHTML in Dreamweaver MX. Il pannello Risposte, una nuova funzione di Fireworks MX, Macromedia Dreamweaver MX e Macromedia Flash MX, è un collegamento aggiornabile a contenuti Web, opportunamente collocati nello spazio di lavoro di Fireworks. Quando è attiva una connessione a Internet, è possibile scaricare informazioni di riferimento aggiornate da Macromedia, oppure ricercare documentazione all'interno di database online, come le Tech Notes, facendo clic sul pulsante Aggiorna. Il controllo ortografico ricerca in ogni blocco di testo del documento eventuali parole scritte non correttamente. Quando viene individuata una parola non riconoscibile, la funzione fornisce dei suggerimenti per la correzione o consente di aggiungerla al dizionario dell'utente. La memorizzazione nella cache di caratteri multi-piattaforma facilita la condivisione di file tra gruppi di lavoro e client senza i problemi normalmente legati ai caratteri multi-piattaforma. Fireworks conserva inalterato l'aspetto del testo di un documento su sistemi non dotati dei caratteri presenti nel documento. Funzioni di Fireworks MX per una maggiore produttività Fireworks MX include una serie di potenti nuove funzioni creative e di automazione, delle quali i progettisti Web emergenti apprezzeranno la semplicità d'uso e gli sviluppatori più esperti la potenza. Tali funzioni rendono Fireworks una parte essenziale del processo di progettazione e sviluppo Web, dal progetto all'integrazione. L'Autocomposizione grafica basata su dati consente di assegnare variabili a testo, immagini, punti attivi e porzioni, generando quindi documenti multipli basati sull'originale, ciascuno con informazioni univoche derivate da un file di database XML o CSV. La funzione di Creazione barra di navigazione del menu Comandi automatizza la procedura di creazione rapida delle barre di navigazione, utilizzando i simboli dei pulsanti appropriati di Fireworks MX. È possibile selezionare un'istanza di un simbolo di pulsante, scegliendo quindi il numero di copie da effettuare, l'orientamento (verticale o orizzontale) e la spaziatura, e assegnando pulsanti etichette e URL in una finestra di dialogo integrata. Benvenuti in Macromedia Fireworks MX 241

242 I miglioramenti apportati all'editor menu a comparsa consentono un maggior controllo, a livello creativo, della più apprezzata tra le nuove funzioni di Fireworks 4. È ora possibile creare un menu a comparsa orizzontale o verticale, determinando le caratteristiche del bordo, la spaziatura e le dimensioni delle celle, indipendentemente dalla dimensione del testo. È inoltre possibile impostare la posizione dei menu rispetto all'oggetto di attivazione così come la posizione dei sottomenu in relazione all'opzione di menu di attivazione o al menu a comparsa principale. In Fireworks il codice JavaScript viene generato automaticamente e i menu esportati sono pienamente compatibili con Dreamweaver MX. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Creazione di menu a comparsa. La funzione di modifica di simboli dei pulsanti a livello di istanza consente di creare un simbolo di pulsante e quindi di differenziare facilmente i singoli pulsanti attraverso testo univoco, URL e destinazioni, utilizzando la finestra di ispezione Proprietà. È inoltre possibile modificare altre caratteristiche grafiche a livello di simboli, estendendo le modifiche a tutte le istanze del pulsante senza modificare le proprietà a livello di istanza. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Creazione di simboli di pulsante. Funzioni relative al flusso di lavoro aperto in Fireworks MX Il flusso di lavoro degli altri utenti non deve rappresentare un limite. L'uso di Fireworks MX consente di integrare la produzione di immagini nel processo di sviluppo dell'utente, con un flusso di lavoro aperto ed efficiente, che riconosce e supporta i formati di file, le applicazioni e gli standard utilizzati. I comandi JavaScript con interfaccia SWF portano la creazione di comandi JavaScript a un livello ancora più elevato. Gli sviluppatori potranno creare ed eseguire comandi complessi per estendere e automatizzare Fireworks MX, unendo l'api di estendibilità JavaScript di Fireworks con le interfacce sviluppate in Macromedia Flash MX tramite componenti e ActionScript. Per ulteriori informazioni, vedere la sezione Estensione di Fireworks MX disponibile in formato PDF sul CD di installazione di Macromedia Fireworks. Il supporto a Macromedia Exchange offre, anche a chi non sia interessato alla creazione di comandi JavaScript, la possibilità di scaricare da Exchange comandi creati dagli utenti. I comandi vengono visualizzati nell'area di lavoro di Fireworks MX sotto forma di pannelli o finestre di dialogo di semplice utilizzo. Il menu Comandi di Fireworks MX contiene numerosi comandi creati dagli utenti, così come il pannello Allinea del menu Finestra. I controlli di layout di tabella delle porzioni consentono di definire e ottimizzare i layout di tabella delle porzioni tramite trascinamento delle guide delle porzioni. In Fireworks le porzioni associate vengono automaticamente ridimensionate, aggiungendo ed eliminandole secondo le esigenze dell'utente. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Spostamento delle guide delle porzioni per la modifica delle porzioni. La funzione Ricostituisci tabella crea immediatamente un nuovo file PNG sorgente di Fireworks alla selezione di qualsiasi file HTML contenente tabelle con porzioni di immagini. I comportamenti di Macromedia Fireworks e Dreamweaver, quali rollover di immagini e menu a comparsa, vengono importati e associati alle relative porzioni. La funzione risulta utile quando si lavora su progetti relativi a siti Web esistenti e gli unici file disponibili sono le pagine HTML pubblicate. È possibile importare i file HTML in Fireworks e creare da essi file PNG sorgente. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Creazione di file PNG di Fireworks da file HTML. 242 Capitolo 10

243 La funzione Roundtrip del testo di Photoshop 6 consente di aprire un file di Photoshop 6 o 7 conservando intatto il testo modificabile, in modo che l'immagine possa essere modificata e quindi di nuovo esportata in formato Photoshop, mantenendo però inalterato l'aspetto e la modificabilità del testo. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Informazioni sull'importazione di testo da Photoshop. La funzione di Roundtrip con Microsoft FrontPage è disponibile selezionando il pulsante Esportazione rapida. Le funzioni Avvio e modifica di tabelle vengono applicate al file originale in Fireworks; le tabelle vengono aggiornate in Microsoft FrontPage senza che le modifiche al codice apportate in FrontPage vadano perdute. Per ulteriori informazioni, in Fireworks scegliere? > Uso di Fireworks > Esportazione di codice HTML di Fireworks in FrontPage. L'integrazione con Macromedia Sitespring sfrutta al meglio le funzionalità di produzione e di gestione del client dell'area di lavoro di Fireworks MX. È sufficiente scegliere Finestra > Sitespring per visualizzare la relativa finestra. Per ulteriori informazioni, consultare la documentazione relativa a Sitespring. Visita guidata di Fireworks MX In Macromedia Studio MX sono disponibili numerose risorse per l'apprendimento di Fireworks, compreso una guida in linea accessibile dall'applicazione, una versione in formato PDF della documentazione completa di Fireworks e numerose fonti di informazioni sul Web. La Guida di Fireworks è disponibile ogni volta che l'applicazione è attiva e contiene tutta la documentazione relativa. Le esercitazioni di Fireworks forniscono una presentazione interattiva delle funzioni principali di Fireworks; ciascuna ha la durata di circa un'ora. Esse includono le operazioni più comuni in Fireworks come l'uso degli strumenti di disegno e di modifica, l'ottimizzazione delle immagini e la creazione di elementi interattivi, quali rollover e barre di navigazione. Le esercitazioni sono disponibili presso Capitolo 11, Esercitazioni di Fireworks, a pagina 245. Il pannello Risposte è un punto di riferimento fondamentale, che raccoglie esercitazioni, TechNote e tutte le più aggiornate informazioni su Fireworks. Il pannello Risposte è di tipo dinamico: attraverso un pulsante è possibile ottenere direttamente da Macromedia gli aggiornamenti e le informazioni più recenti su Fireworks. L'applicazione Fireworks contiene già varie finestre di dialogo e descrizioni comandi pensati per aiutare l'utente nell'uso del programma. Le descrizioni comandi vengono visualizzate quando il puntatore del mouse si sofferma su un elemento dell'interfaccia utente. Il file PDF Uso di Fireworks MX è un documento stampabile e nel quale è possibile fare ricerche, che contiene tutta la documentazione relativa a Fireworks. Il file è disponibile sul CD di installazione e sul sito Web di Macromedia, all'indirizzo Il sito Web di Macromedia viene aggiornato regolarmente e include le più recenti informazioni su Fireworks, consigli di utenti esperti, argomenti avanzati, esempi, suggerimenti e altri aggiornamenti. Per reperire le ultime notizie su Fireworks e per usare al meglio il programma, visitare regolarmente il sito Web di Macromedia all indirizzo Il gruppo di discussione dedicato a Fireworks fornisce agli utenti del programma, ai rappresentanti del supporto tecnico e al team di sviluppo di Fireworks la possibilità di scambiarsi opinioni dal vivo. Accedere a news://forums.macromedia.com/macromedia.fireworks utilizzando un programma per la visualizzazione dei newsgroup. Benvenuti in Macromedia Fireworks MX 243

244 Estensione di Fireworks MX comprende informazioni sulla scrittura di codice JavaScript per l'automatizzazione delle operazioni di Fireworks. Ogni comando o impostazione di Fireworks può essere controllata utilizzando particolari comandi JavaScript che Fireworks è in grado di interpretare. Una versione PDF del documento Estensione di Fireworks MX è disponibile sul CD di installazione e sul sito Web di Macromedia, all'indirizzo fireworks/extend.html. 244 Capitolo 10

245 CAPITOLO 11 Esercitazioni di Fireworks Le esercitazioni del presente capitolo illustrano le operazioni fondamentali relative alla progettazione di immagini e all'aggiunta di elementi interattivi a una pagina Web in Macromedia Fireworks MX. Esercitazione di Fireworks 1: Fondamenti della progettazione di immagini L'esercitazione illustra le operazioni fondamentali relative alla progettazione di immagini con Macromedia Fireworks MX, consentendo di fare pratica nell'utilizzo dell'applicazione per la grafica Web leader del settore e apprendendo contemporaneamente i concetti basilari della progettazione grafica. L'utente che fosse già esperto nella progettazione di immagini in Fireworks può passare direttamente a Esercitazione di Fireworks 2: Fondamenti della progettazione Web a pagina 274, che contiene informazioni sulla progettazione di pagine Web con Fireworks. Argomenti trattati Il completamento di questa esercitazione, di durata inferiore a un'ora, consentirà di effettuare le operazioni richieste per creare un messaggio pubblicitario per un'azienda di auto a noleggio usando Fireworks, e comprende le operazioni che seguono: Creazione e salvataggio di un nuovo documento Esplorazione dell'ambiente di lavoro di Fireworks Creazione e modifica di oggetti vettoriali Importazione di un'immagine bitmap e selezione di pixel Aggiunta e modifica di Effetti dal vivo Operazioni con i livelli e gli oggetti Creazione e modifica di una maschera Creazione e modifica del testo Esportazione del documento 245

246 Conoscenze preliminari Malgrado l'esercitazione sia specificatamente concepita per principianti, essa tratta molte nuove funzioni del programma e potrà quindi essere utile anche agli utenti più esperti. Per completare questa esercitazione non è necessario essere un progettista di immagini; è sufficiente possedere conoscenze informatiche di base ed essere in grado di usare le più comuni applicazioni; per esempio sapere come individuare file e cartelle sul disco rigido. Copia della cartella Tutorials Prima di iniziare, effettuare una copia della cartella Tutorials, in modo da poter salvare i risultati del lavoro senza pregiudicare la possibilità di completare l'esercitazione in un momento futuro con i file originali. 1 Individuare la cartella principale di Fireworks sul disco rigido. Nota: Se non è possibile visualizzare la cartella principale dell'applicazione, l'utente potrebbe avere accesso limitato ai file del sistema. È possibile scaricare i file necessari per l'esercitazione dal centro di assistenza Fireworks sul Web, all indirizzo 2 Trascinare una copia della cartella Tutorials sul desktop. Visualizzazione del file finale Visualizzare il file di esercitazione finale, per vedere quale sarà l'aspetto del progetto una volta completato. 1 Avviare il browser Web. 2 Sul disco rigido, individuare la cartella Tutorials copiata sul desktop e selezionare Tutorial1/ Complete. Nota: In alcune versioni di Microsoft Windows le estensioni dei tipi noti di file non sono visualizzate per impostazione predefinita. Se questa impostazione non è stata modificata, le estensioni dei file nella cartella Complete non verranno visualizzate. Quando si utilizzano immagini Web, è preferibile visualizzare le estensioni dei file. Per informazioni su come riattivare le estensioni dei file, consultare la guida in linea di Windows. 3 Selezionare il file final.jpg e trascinarlo nella finestra del browser aperta. In questa esercitazione Fireworks verrà utilizzato per progettare ed esportare una copia del messaggio pubblicitario per un'azienda di auto a noleggio. Nota: La cartella Complete comprende anche il documento di Fireworks dal quale il file JPEG è stato generato. Per visualizzare il documento, fare doppio clic sul file final.png. 246 Capitolo 11

247 Creazione e salvataggio di un nuovo documento Dopo aver visualizzato il file final.png, si può procedere all'avvio del progetto. 1 In Fireworks, scegliere File > Nuovo. Viene visualizzata la finestra di dialogo Nuovo documento. 2 Digitare 480 come valore di larghezza e 214 come valore di altezza. Assicurarsi che entrambe le misure siano espresse in pixel e che il colore dell'area di lavoro sia bianco, quindi fare clic su OK. Viene aperta una finestra di documento, nella cui barra del titolo è presente il titolo Senza titolo-1.png (Windows) oppure Senza titolo-1 (Macintosh). 3 Se la finestra non è visualizzata completamente, ovvero se non copre il centro dello schermo, ingrandirla facendo clic sul pulsante di ridimensionamento (Windows) o nella casella Zoom (Macintosh) nella parte superiore della finestra. Si otterrà così uno spazio adeguato per lavorare. 4 Scegliere File > Salva con nome. Viene visualizzata la finestra di dialogo Salva con nome (Windows) o Salva (Macintosh). 5 Selezionare la cartella Tutorials/Tutorial1 sul desktop. 6 Denominare il file vintage. Esercitazioni di Fireworks 247

248 7 Se non fosse ancora selezionata, scegliere l'opzione Aggiungi estensione del nome di file (solo Macintosh). 8 Fare clic su Salva. Sulla barra del titolo viene visualizzato il nuovo nome di file con estensione PNG. Il formato PNG è il formato di file nativo per Fireworks. Il file PNG rappresenta il file sorgente, che verrà utilizzato in Fireworks. Completando l'esercitazione si apprenderà come esportare il documento in un altro formato, per utilizzarlo sul Web. Mentre si procede nell'esercitazione, ricordarsi di salvare il lavoro di frequente, scegliendo File > Salva. Nota: Durante il completamento dell'esercitazione, potrebbe rendersi necessario annullare un cambiamento già apportato. Fireworks può eseguire numerosi annullamenti delle modifiche più recenti, in base al numero impostato nelle Preferenze. Per annullare la modifica più recente, scegliere Modifica > Annulla. Esplorazione dell'ambiente di lavoro di Fireworks Prima di continuare, esaminare gli elementi che compongono l'ambiente di lavoro di Fireworks: Al centro dello schermo si trova la finestra del documento. Al centro della finestra del documento si trova l'area di lavoro, dove vengono visualizzati il documento di Fireworks e le immagini create. Nella parte superiore della finestra si trova una barra dei menu. La maggioranza dei comandi di Fireworks sono accessibili dalla barra dei menu. 248 Capitolo 11

249 Nella parte sinistra dello schermo si trova il pannello Strumenti. Se il pannello Strumenti non è già aperto, scegliere Finestra > Strumenti per visualizzarlo. Il pannello Strumenti contiene gli strumenti che permettono di selezionare, creare e modificare numerosi elementi grafici e oggetti Web. Nella parte inferiore della finestra si trova la finestra di ispezione Proprietà. Se la finestra di ispezione Proprietà non è già aperta, scegliere Finestra > Proprietà per visualizzarla. Nella finestra di ispezione Proprietà vengono visualizzate le proprietà dell oggetto o dello strumento selezionato. Queste proprietà possono essere modificate. Se non è selezionato alcun oggetto o strumento, nella finestra di ispezione Proprietà sono visualizzate le proprietà del documento. Nella finestra di ispezione Proprietà sono visualizzate due oppure quattro righe di proprietà. Se la finestra di ispezione Proprietà è a metà altezza, ovvero sono visibili solo due righe, fare clic sulla freccia situata nell angolo inferiore destro della finestra per visualizzare tutte le proprietà. Freccia in stato metà altezza Nella parte destra dello schermo sono presenti vari pannelli, come il pannello Livelli e il pannello Ottimizza, cui è possibile accedere dal menu Finestra. Spostare il puntatore sui diversi elementi di interfaccia. Quando il puntatore del mouse si sofferma su un elemento dell'interfaccia utente, viene visualizzata una descrizione comandi. Le descrizioni comandi forniscono informazioni sugli strumenti, i menu, i pulsanti e le altre funzioni di interfaccia di Fireworks e scompaiono quando il puntatore del mouse si sposta dall'elemento di interfaccia identificato. Nel corso dell'esercitazione si apprenderanno ulteriori informazioni su ognuno degli elementi citati. Creazione e modifica di oggetti vettoriali Con Fireworks è possibile creare e modificare due tipi di immagini: oggetti vettoriali e immagini bitmap. Un oggetto vettoriale è una descrizione in termini matematici di una forma geometrica. I tracciati vettoriali sono definiti da punti. La qualità dei tracciati non si riduce quando li si ingrandisce oppure li si ridimensiona. La foglia nell'illustrazione che segue è un insieme di oggetti vettoriali. Si noti l'arrotondamento dei bordi della foglia, visibile anche quando si ingrandisce l'immagine. Esercitazioni di Fireworks 249

250 Al contrario, le immagini bitmap sono composte da pixel colorati. Le immagini caratterizzate da variazioni di colore complesse, come le fotografie, in molti casi sono immagini bitmap. Mentre in molte applicazioni sono disponibili strumenti per la modifica di forme vettoriali o di immagini bitmap, in Fireworks è possibile lavorare su entrambi i tipi di immagini. Nella presente sezione si utilizzeranno immagini vettoriali. Creazione di oggetti vettoriali Si procederà ora alla creazione di due degli elementi grafici del documento. Per prima cosa verrà creato un rettangolo blu, che sarà collocato nella parte inferiore del documento. Quindi, verrà creato un rettangolo che fungerà da bordo per il contenuto dell'area di lavoro. 1 Scegliere lo strumento Rettangolo nella sezione Vettore del pannello Strumenti. 2 Nella finestra di ispezione Proprietà, fare clic sulla casella Colore riempimento. Viene visualizzata la finestra a comparsa Colore riempimento 250 Capitolo 11

251 3 Digitare nella casella di testo nella parte superiore della finestra, quindi premere Invio. In seguito alla modifica, la casella Colore riempimento assume un colore blu scuro. 4 Nella finestra del documento, posizionare il mirino sull'area di lavoro e trascinare verso il basso e verso destra per creare un rettangolo. Il rettangolo può essere disegnato in un qualsiasi punto dell'area di lavoro. Più avanti si procederà a ridimensionarlo e collocarlo nell'esatta posizione. 5 Rilasciando il pulsante del mouse, nell'area definita viene visualizzato un rettangolo di colore blu scuro. Tale rettangolo è selezionato, come indicano i punti angolo di colore blu. A differenza dei rettangoli, la maggioranza degli oggetti vengono anche evidenziati in blu attorno ai bordi esterni. 6 Nell'angolo inferiore sinistro della finestra di ispezione Proprietà, digitare 480 nella casella relativa alla larghezza e 15 in quella relativa all altezza, quindi premere Invio. Il rettangolo viene ridimensionato adattandolo alle dimensioni specificate. 7 Scegliere lo strumento Puntatore nella sezione Selezione del pannello Strumenti. 8 Trascinare il rettangolo in modo che sia collocato nella parte inferiore dell'area di lavoro, come illustrato di seguito. Usare i tasti freccia per trovare la posizione esatta. 9 Scegliere di nuovo lo strumento Rettangolo e disegnare un secondo rettangolo. Le dimensioni e la posizione non sono importanti: proprietà e posizione del rettangolo verranno modificate nella sezione successiva. Esercitazioni di Fireworks 251

252 Impostazione delle proprietà degli oggetti Si procederà ora a modificare dimensioni, posizione e colore del secondo rettangolo nella finestra di ispezione Proprietà. 1 Con il rettangolo selezionato, fare clic nella casella Colore tratto della finestra di ispezione Proprietà e digitare CCCCCC come valore del colore. Premere Invio per applicare la modifica. 2 Impostare le Dimensioni punta su 1 trascinando lo slider a comparsa o digitando 1 nella casella di testo. 3 Nella finestra di ispezione Proprietà, fare clic sulla casella Colore riempimento e quindi sul pulsante Trasparente. 4 Nella finestra di ispezione Proprietà, inserire i valori che seguono nelle caselle relative a larghezza, altezza e coordinate. Quindi fare clic in un punto esterno della finestra di ispezione Proprietà per applicare le modifiche. Larghezza: 480 Altezza: 215 X: 0 Y: 0 Il rettangolo si trasforma in un bordo di colore grigio intorno ai margini dell'area di lavoro. Se il sistema in uso utilizza il grigio come colore di sfondo della finestra, visualizzare il rettangolo potrebbe essere un problema; il rettangolo comunque, anche se non visibile, è sempre presente. 5 Scegliere lo strumento Puntatore e fare clic in un qualsiasi punto esterno al rettangolo per deselezionarlo. Le proprietà nella finestra di ispezione Proprietà si modificano. Poiché non è selezionato alcun oggetto, sono ora visualizzate le proprietà del documento anziché dell'oggetto. 252 Capitolo 11

253 Importazione di un'immagine bitmap e selezione di pixel Nella prossima fase, si procederà all'importazione di un'immagine bitmap e alla creazione di una selezione mobile a partire dai pixel dell'immagine. Importazione di un'immagine Si procederà ora alla modifica dell immagine di un'auto classica. Per prima cosa è necessario importare l'immagine: 1 scegliere File > Importa e individuare la cartella Tutorials sul desktop. Selezionare la cartella Tutorial1/Assets. 2 Selezionare il file car.jpg e fare clic su Apri. 3 Allineare il puntatore di inserimento all'angolo superiore sinistro dell'area di lavoro e fare clic, come illustrato nella figura seguente. Nell'area di lavoro viene visualizzata l'immagine, selezionata. 4 Fare clic in qualunque punto esterno all'immagine selezionata per deselezionarla. Creazione di una selezione di pixel Si procederà ora alla selezione dei pixel che compongono l'auto nell'immagine importata, per poi copiarli e incollarli come nuovo oggetto. 1 Scegliere lo strumento Zoom nella sezione Visualizza del pannello Strumenti. strumento Zoom 2 Fare clic una volta sull'immagine. La visualizzazione viene ingrandita fino al 150%. L'ingrandimento consente di vedere e controllare meglio la selezione. Esercitazioni di Fireworks 253

254 3 Fare clic e tenere premuto il pulsante del mouse sullo strumento Lazo nella sezione Bitmap del pannello Strumenti. Selezionare lo strumento Lazo poligonale dal menu a comparsa visualizzato. Lo strumento Lazo poligonale consente di disegnare una selezione intorno ai pixel utilizzando una serie di linee rette. Lo strumento Lazo poligonale verrà utilizzato per selezionare i pixel che compongono l'immagine dell'automobile. 4 Nella finestra di ispezione Proprietà, impostare l'opzione Bordo su Antialiasing 5 Far clic con il puntatore dello strumento Lazo poligonale sul bordo superiore dell'auto, quindi fare clic ripetutamente intorno al bordo dell'auto per continuare la selezione. 6 Completare la selezione spostando il puntatore sopra il punto di inizio della selezione stessa. Accanto alla strumento Lazo poligonale viene visualizzato un piccolo quadrato di colore grigio, che indica che è possibile completare la selezione. Fare clic per completare la selezione. Intorno ai pixel selezionati viene selezionato il bordo di un perimetro di selezione. 7 Scegliere Modifica > Copia. La selezione viene copiata negli Appunti. 254 Capitolo 11

255 8 Scegliere Modifica > Incolla. L'immagine dell'auto viene incollata nel documento come nuovo oggetto bitmap. 9 Scegliere lo strumento Puntatore e fare doppio clic in un qualsiasi punto esterno all'immagine bitmap, per deselezionarla. 10 Fare clic sul menu a comparsa Imposta l'ingrandimento nella parte inferiore della finestra del documento per tornare alla visualizzazione al 100%. Aggiunta e modifica di Effetti dal vivo La procedura seguente illustra l'applicazione degli Effetti dal vivo all'immagine bitmap originale. La tonalità e la saturazione dell'immagine verranno modificate e verrà applicata una sfocatura. 1 Fare clic in un qualsiasi punto dell'immagine che raffigura il deserto, evitando di fare clic sull'automobile. 2 Nella finestra di ispezione Proprietà, fare clic sul pulsante Aggiungi effetti, con il segno più (+). Pulsante Elimina effetti Pulsante Aggiungi effetti 3 Scegliere Regola colore > Tonalità/Saturazione dal menu a comparsa Effetti. Viene visualizzata la finestra di dialogo Tonalità/Saturazione. Esercitazioni di Fireworks 255

256 4 Scegliere l'opzione Colorizza e fare clic su OK. L'immagine diventa colorata all'interno dell'area di lavoro e l'effetto viene aggiunto alla lista degli Effetti dal vivo nella finestra di ispezione Proprietà. Gli Effetti dal vivo sono modificabili; è sempre possibile aggiungere, eliminare o modificare uno o più effetti. 5 Fare doppio clic sull'effetto Tonalità/Saturazione per modificarlo. Suggerimento: In alternativa, fare clic sul pulsante Info accanto all'effetto. Viene visualizzata di nuovo la finestra di dialogo Tonalità/Saturazione. 6 Modificare il valore della Tonalità in 25 e il valore della Saturazione in 20 e fare clic su OK. I livelli di tonalità e di saturazione dell'immagine cambieranno e verrà visualizzato un effetto seppia, come in una vecchia fotografia. 7 Fare di nuovo clic sul pulsante Aggiungi effetti per aggiungere un secondo Effetto dal vivo. 8 Scegliere Sfocatura > Ulteriore sfocatura dal menu a comparsa Effetti. Ai pixel dell'immagine bitmap selezionata viene applicata una sfocatura e il nuovo effetto viene aggiunto alla lista degli Effetti dal vivo nella finestra di ispezione Proprietà. Operazioni con i livelli e gli oggetti I livelli dividono un documento di Fireworks in piani separati. Un documento può essere composto da diversi livelli, ciascuno dei quali può contenere vari oggetti. In Fireworks, il pannello Livelli contiene l'elenco dei livelli e degli oggetti contenuti in ogni livello. Utilizzando il pannello Livelli, è possibile denominare, nascondere, visualizzare e modificare l'ordine di sovrapposizione di livelli o oggetti, unire immagini bitmap e applicare maschere di bitmap. È inoltre possibile aggiungere ed eliminare livelli utilizzando il pannello Livelli. In questa parte dell'esercitazione, il pannello Livelli verrà utilizzato per unire due immagini bitmap, per poi assegnare un nome agli oggetti nel documento. Si utilizzerà inoltre il pannello Livelli per modificare l ordine di sovrapposizione degli oggetti. In una parte successiva dell'esercitazione, il pannello Livelli verrà utilizzato per applicare una maschera all'immagine unita. 256 Capitolo 11

257 Fusione di immagini bitmap Dopo aver applicare alcuni effetti dal vivo all'immagine di sfondo, si procederà ora a unirla con l'immagine dell'auto in scala di grigio per creare un'unica bitmap. 1 Se il pannello Livelli non è già aperto o è ridotto a icona, fare clic sulla freccia oppure scegliere Finestra > Livelli. Freccia 2 Fare clic sulla miniatura dell'immagine dell'auto in scala di grigio nel pannello Livelli. 3 Con l'immagine dell'auto selezionata, fare clic sul menu a comparsa Opzioni nella parte superiore destra del pannello Livelli. icona del menu a comparsa Opzioni 4 Scegliere Unisci a sottostante. Nel pannello Livelli, le due immagini bitmap si uniscono in un solo oggetto. Nella finestra di ispezione Proprietà, la lista degli Effetti dal vivo non contiene altri effetti. Questo perché l'operazione di unione combina i pixel di ciascun bitmap e li rende non modificabili come immagini separate. Gli Effetti dal vivo applicati a un oggetto o a un'immagine bitmap non sono più modificabili dopo l'esecuzione di un'operazione di unione con un'altra immagine bitmap. Esercitazioni di Fireworks 257

258 Denominazione di oggetti È sempre consigliabile assegnare agli oggetti un nome per poterli facilmente identificare. Quando le dimensioni di un documento aumentano ed esso contiene diversi oggetti, può essere difficile gestirli se non hanno nomi univoci. Si procederà ora ad assegnare nomi agli oggetti del documento utilizzando sia il pannello Livelli che la finestra di ispezione Proprietà. 1 Fare doppio clic sulla parola Bitmap accanto alla miniatura dell'immagine nel pannello Livelli. Viene visualizzata una casella di testo. 2 Digitare Classic Car nella casella di testo e premere Invio. Il nuovo nome viene applicato all'oggetto bitmap. 3 Nella finestra del documento, selezionare il rettangolo grigio che circonda i bordi del documento. Se il rettangolo fosse difficilmente visualizzabile nell'area di lavoro, selezionarlo nel pannello Livelli. Si procederà ora ad assegnare un nome a un oggetto utilizzando la finestra di ispezione Proprietà: 4 Digitare Border nella casella Nome oggetto della finestra di ispezione Proprietà e premere Invio. Il nome digitato viene visualizzato anche accanto alla miniatura dell'oggetto nel pannello Livelli. 5 Inserire un nome per l'oggetto rettangolo rimanente, utilizzando il pannello Livelli oppure la finestra di ispezione Proprietà. Usare un nome a piacere, purché significativo per la successiva identificazione e gestione degli oggetti nel documento. 258 Capitolo 11

259 Modifica dell ordine di sovrapposizione degli oggetti L'immagine bitmap unita si sovrappone all'oggetto bordo e al rettangolo di colore blu. Poiché il bordo e il rettangolo blu devono rimanere in alto, si utilizzerà il pannello Livelli per modificare l ordine di sovrapposizione degli oggetti nel documento. 1 Fare clic sulla miniatura del rettangolo blu nel pannello Livelli per selezionarlo. 2 Trascinarlo nella parte superiore del Livello 1, sopra la miniatura denominata Auto classica. Nota: Il livello situato più in alto nel pannello Livelli è sempre il livello Web. Per ulteriori informazioni sul livello Web, vedere Esercitazione di Fireworks 2: Fondamenti della progettazione Web a pagina 274. Durante l'operazione, il puntatore si modifica per indicare che è in corso il trascinamento di un oggetto (solo Windows). Una linea scura nel pannello Livelli indica la posizione in cui l'oggetto verrà collocato se si rilascia il pulsante del mouse in quel momento. 3 Rilasciare il pulsante del mouse. Il rettangolo blu viene collocato proprio sopra l'oggetto bitmap nel pannello Livelli. Nell'area di lavoro si modifica anche l'ordine di sovrapposizione degli oggetti. Il rettangolo blu è ora sovrapposto all'oggetto bitmap e all'oggetto bordo. 4 Per fare in modo che l'oggetto bordo sia quello situato più in alto, selezionare la relativa miniatura e trascinarla nella parte superiore del pannello Livelli, sopra il rettangolo blu. Esercitazioni di Fireworks 259

260 Creazione e modifica di una maschera Dopo aver apportato varie modifiche all'immagine dell'auto classica, si effettuerà ora un'ultima procedura per fare in modo che l'immagine diventi gradualmente trasparente. Con Fireworks è possibile applicare due tipi di maschere: maschere vettoriali e maschere bitmap. In questa esercitazione si applicherà all'immagine dell'auto una semplice maschera bitmap, per poi modificarla utilizzando un riempimento sfumato. I pixel della maschera determineranno la visualizzazione o meno dell'immagine dell'auto, in base al relativo valore della scala di grigi. Applicazione di una maschera Per prima cosa si applicherà all'immagine dell'auto una maschera bitmap vuota, di colore bianco. Una maschera di colore bianco mostra l'oggetto o l'immagine selezionata, mentre i pixel neri di una maschera nascondono l'oggetto o l'immagine selezionata. Si procederà inoltre a disegnare sulla maschera per applicare una dissolvenza verso lo sfondo all'immagine dell'auto. 1 Selezionare l'immagine bitmap con lo strumento Puntatore. 2 Fare clic sul pulsante Aggiungi maschera nella parte inferiore del pannello Livelli. Una maschera vuota e trasparente viene aggiunta all'immagine selezionata, come indicato dalla relativa miniatura nel pannello Livelli. L'evidenziazione in giallo intorno alla miniatura della maschera indica che essa è selezionata. Miniatura della maschera Oggetto maschera 260 Capitolo 11

261 Modifica della maschera Si procederà ora a fornire all'immagine bitmap un aspetto trasparente, aggiungendo un riempimento sfumato alla maschera. 1 Con la miniatura della maschera selezionata nel pannello Livelli, fare clic e tenere premuto il pulsante del mouse sullo strumento Secchio Di Vernice nella sezione Bitmap del pannello Strumenti. Scegliere lo Strumento Sfumatura dal menu a comparsa visualizzato. 2 Nella finestra di ispezione Proprietà, fare clic sulla casella Colore riempimento. Viene visualizzata la finestra a comparsa Modifica sfumatura. 3 Scegliere Nero, bianco dalla parte inferiore del menu a comparsa Preimpostazione. La gamma colori e i campioni colore si modificano in base alla nuova impostazione. I campioni colore situati sotto la gamma colori consentono di modificare i colori della sfumatura. Gamma colori Campioni colore 4 Trascinare verso destra il campione colore (bianco) a sinistra per circa 1/4 della distanza, in modo da regolare la sfumatura. 5 Fare clic in un punto esterno della finestra a comparsa Modifica sfumatura per chiuderla. 6 Nell'area di lavoro, trascinare il puntatore Sfumatura sull'immagine bitmap, come illustrato nella figura seguente. Durante il trascinamento sullo schermo viene visualizzata una risposta visiva, che consente di definire l'angolo e la distanza di applicazione del gradiente. Esercitazioni di Fireworks 261

262 7 Rilasciare il pulsante del mouse. La maschera viene modifica con il riempimento sfumato appena creato. La maschera modifica l'immagine dell'auto applicandole un effetto di trasparenza graduale. La miniatura della maschera nel pannello Livelli visualizza il riempimento sfumato applicato. 8 Scegliere lo strumento Puntatore e fare clic sulla miniatura della maschera nel pannello Strumenti. La finestra di ispezione Proprietà mostra che la maschera è stata applicata utilizzando l'aspetto della relativa scala di grigi. I pixel più scuri della maschera nascondono l'immagine dell'auto, mentre quelli più chiari ne determinano la visualizzazione. Creazione e modifica del testo La procedura seguente illustra come aggiungere testo al documento e applicarne le proprietà utilizzando la finestra di ispezione Proprietà. Verranno creati quattro blocchi di testo, due per il titolo del messaggio pubblicitario e due per il testo principale. Creazione del testo del titolo Si procederà anzitutto alla creazione del testo del titolo per il messaggio pubblicitario. 1 Scegliere lo Strumento Testo nella sezione Vettoriale del pannello Strumenti e spostare il puntatore sopra la finestra di documento. Il puntatore assume l'aspetto di una I e nella finestra di ispezione Proprietà vengono visualizzate le proprietà del testo. Dimensioni Colore riempimento Carattere Pulsanti stile Interlinea Scala orizzontale Pulsanti di allineamento 262 Capitolo 11

263 2 Nella finestra di ispezione Proprietà, effettuare le operazioni che seguono: Scegliere Times New Roman dal menu a comparsa Carattere. Digitare 85 come dimensione del carattere. Fare clic sulla casella Colore riempimento. Il puntatore assume la forma di un contagocce. Fare clic con il contagocce sul rettangolo blu nell'area di lavoro. La finestra a comparsa del colore viene chiusa e la casella Colore riempimento si modifica in base al colore scelto. Assicurarsi che nessun pulsante di stile (Grassetto, Corsivo, Sottolineato) sia selezionato. Fare clic sul pulsante Allineamento a sinistra. 3 Con il puntatore a I, fare clic una volta al centro dell'area di lavoro. Viene creato un blocco di testo vuoto. Il cerchio vuoto nell'angolo superiore destro del blocco di testo indica che le sue dimensioni si modificano automaticamente. La larghezza di un blocco di testo di questo tipo, in Fireworks, si modifica in base alla riga di testo più lunga del blocco. Indicatore di ridimensionamento automatico 4 Digitare Vintage nel blocco di testo. La larghezza del blocco di testo aumenta durante la digitazione. 5 Fare clic una volta in un punto esterno al blocco di testo per applicare l'inserimento di testo. Il blocco di testo e lo strumento Testo restano selezionati. Il cerchio vuoto nel blocco di testo non è più visibile. L'indicatore è infatti visibile solo in fase di inserimento o modifica del testo. Esercitazioni di Fireworks 263

264 6 Scegliere lo strumento Puntatore e trascinare il testo nella posizione indicata dalla figura seguente. 7 Fare clic all'esterno del blocco di testo per deselezionarlo e scegliere di nuovo lo strumento Testo. 8 Nella finestra di ispezione Proprietà scegliere Arial come carattere e 12 come dimensione. 9 Fare clic di nuovo sull'area di lavoro, in un qualunque punto accanto al blocco del testo appena creato, e digitare CLASSIC RENTALS in lettere maiuscole. 10 Scegliere lo strumento Puntatore per applicare l'inserimento di testo. Passando a un altro strumento nel pannello Strumento gli inserimenti e le modifiche al testo vengono applicati, come avviene facendo clic all'esterno di un blocco di testo. Lo stesso risultato si ottiene premendo il tasto Esc. 11 Trascinare il nuovo blocco di testo per collocarlo accanto al blocco di testo Vintage, come indicato nella figura seguente. 12 Fare clic in qualunque punto esterno al blocco di testo per deselezionarlo. 264 Capitolo 11

265 Creazione del testo principale Si procederà alla creazione dei due blocchi di testo che compongono il testo principale del banner. 1 Scegliere lo strumento Testo. 2 Questa volta, anziché fare semplicemente clic all'interno dell'area di lavoro, trascinare per disegnare un perimetro di selezione con il puntatore a I, come illustrato nella figura seguente. Viene visualizzato un blocco di testo. Il quadrato vuoto nell'angolo superiore destro indica che il blocco di testo ha larghezza fissa, definita dal perimetro di selezione disegnato. I blocchi di testo a larghezza fissa mantengono la larghezza specificata indipendentemente dal testo digitato. La maniglia d'angolo vuota è un oggetto di attivazione. Facendo doppio clic su di essa, il blocco di testo passa da larghezza fissa ad auto-dimensionamento e viceversa. 3 Digitare il testo che segue senza inserire interruzioni di riga: Regalati un viaggio in una classica auto Vintage, completa di autista, per andare ovunque desideri. Il testo scorre nel blocco di testo creato dall'utente. Le dimensioni del blocco di testo crescono in verticale ma non in orizzontale. 4 Scegliere lo strumento Puntatore e fare clic in un qualsiasi punto esterno al blocco di testo per deselezionarlo, quindi scegliere di nuovo lo strumento Testo. 5 Nella finestra di ispezione Proprietà, fare clic sulla casella Colore riempimento e scegliere bianco come colore del testo. 6 Fare clic nell'angolo inferiore sinistro dell'area di lavoro. Viene visualizzato un nuovo blocco di testo nella parte superiore del rettangolo blu. Esercitazioni di Fireworks 265

266 7 Digitare il testo che segue in lettere maiuscole, senza inserire interruzioni di riga: SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROADSTER 8 Scegliere lo strumento Puntatore e ricollocare il blocco di testo come illustrato di seguito. Fireworks consente di modificare il testo come all'interno di un normale programma di elaborazione testi. Per modificare il testo, fare doppio clic su un blocco di testo con lo strumento Puntatore, evidenziare il testo da modificare e digitare il testo desiderato. In alternativa, fare clic con il puntatore in un qualsiasi punto del blocco di testo per aggiungere nuovo testo. Impostazione delle proprietà del testo Dopo aver creato i blocchi di testo, si utilizzerà la finestra di ispezione Proprietà per modificarne le varie proprietà. 1 Selezionare il blocco di testo Vintage. Le proprietà del blocco di testo vengono visualizzate nella finestra di ispezione Proprietà. Tali proprietà sono analoghe a quelle visualizzate quando è selezionato lo strumento Testo. 2 Nella finestra di ispezione Proprietà, effettuare le operazioni che seguono: Se non è già selezionato, scegliere Antialiasing attenuato dal menu a comparsa Livello antialiasing. L'antialiasing smussa i bordi del testo in modo da rendere i caratteri del testo più chiari e leggibili. In generale, i caratteri serif come il Times New Roman con dimensioni superiori a 45 punti hanno un aspetto migliore se impostati su antialiasing attenuato. Analogamente, i caratteri sans serif come l'arial con dimensioni superiori a 32 punti hanno un aspetto migliore se impostati su antialiasing attenuato. Suggerimento: Il termine serif fa riferimento alle piccole linee (spesso definite piedini ) presenti nei caratteri come il Times New Roman. L'Arial è considerato un carattere sans serif perché i relativi caratteri di testo non contengono serif. Impostare l'opzione Scala orizzontale nella finestra di ispezione Proprietà su 89% e premere Invio. I caratteri del blocco di testo Vintage diventano più sottili. L'opzione Scala orizzontale allunga o riduce in orizzontale i caratteri del testo selezionato. L'impostazione predefinita è 100%. Qualsiasi elemento più grande determinerà l'allungamento del testo in orizzontale, qualsiasi elemento più piccolo ne determinerà una riduzione in larghezza. 266 Capitolo 11

267 3 Trascinare il blocco di testo Vintage in modo che sia posizionato come indicato nella figura seguente. 4 Selezionare il blocco di testo Noleggi classici. 5 Nella finestra di ispezione Proprietà, effettuare le operazioni che seguono: Fare clic sulla casella Colore riempimento, digitare FF6600 come valore del colore e premere Invio. Fare clic sul pulsante Grassetto. Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing. In generale, i caratteri sans serif come l'arial con dimensioni tra i 12 e i 18 punti hanno un aspetto migliore se impostati su antialiasing netto. Analogamente, i caratteri serif come con dimensioni tra i 24 e i 32 punti hanno un aspetto migliore se impostati su antialiasing netto. 6 Trascinare il blocco di testo per ricollocarlo come illustrato di seguito. 7 Selezionare il blocco di testo Regalati. Esercitazioni di Fireworks 267

268 8 Nella finestra di ispezione Proprietà, effettuare le operazioni che seguono: Impostare la dimensione del carattere su 13. Scegliere il nero come colore del testo. Fare clic sul pulsante Allineamento a destra. Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing. Impostare l'opzione Scala orizzontale su 88%. Impostare l'opzione Interlinea su 150% e premere Invio. L'interlinea imposta lo spazio tra le righe di testo. Il valore normale di interlinea è 100%. Un valore superiore al 100% aumenta lo spazio tra le righe; un valore inferiore avvicina le righe tra loro. 9 Trascinare una delle maniglie d'angolo del blocco di testo per ridimensionarlo, in modo che il testo scorra come illustrato di seguito. Se necessario, trascinare l'intero blocco di testo per ricollocarlo. 10 Selezionare il blocco di testo nella parte inferiore del documento. 11 Nella finestra di ispezione Proprietà, effettuare le operazioni che seguono: Impostare la dimensione del carattere su 13. Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing. Impostare l'opzione Scala orizzontale su 75% e premere Invio. 12 Se necessario, ricollocare il blocco di testo. 268 Capitolo 11

269 Aggiunta di un'ombra È possibile applicare al testo degli Effetti dal vivo. Si procederà ora all'aggiunta di un'ombra al testo Vintage utilizzando i controlli Effetti dal vivo nella finestra di ispezione Proprietà. 1 Selezionare il blocco di testo Vintage. 2 Fare clic sul pulsante Aggiungi effetti nella finestra di ispezione Proprietà. Scegliere Ombra e luce > Ombra dal menu a comparsa Effetti. Le opzioni relative al nuovo effetto vengono visualizzate in una finestra a comparsa. 3 Digitare 5 come valore di Distanza e 60% come valore di Opacità. Fare clic in un punto esterno della finestra a comparsa per chiuderla. Un effetto ombra viene aggiunto al blocco di testo Vintage. 4 Fare clic su una zona vuota della finestra di documento per deselezionare il blocco di testo. Esportazione del documento Dopo aver creato un oggetto vettoriale e averne modificato le proprietà, importato un'immagine bitmap e apportato modifiche ai pixel dell'immagine, creato un testo e applicato a esso delle formattazioni, si procederà ora a ottimizzare ed esportare il documento. Ottimizzazione dell'immagine Prima di esportare un documento da Fireworks, è sempre opportuno ottimizzarlo: L'ottimizzazione assicura che un'immagine venga esportata con il migliore equilibrio possibile tra compressione e qualità. 1 Effettuare una delle operazioni che seguono per aprire il pannello Ottimizza nel caso in cui non fosse già visualizzato: Scegliere Finestra > Ottimizza. Se il pannello è ridotto a icona nella parte destra dello schermo, fare clic sulla freccia per visualizzarlo completamente. Esercitazioni di Fireworks 269

270 2 Scegliere JPEG Qualità migliore dal menu a comparsa Impostazioni. Le opzioni del pannello si modificano in base alla nuova impostazione. Queste impostazioni possono essere modificate, ma nell'esercitazione verranno utilizzate quelle predefinite. 3 Fare clic sulla scheda Anteprima accanto alla parte superiore della finestra di documento. La scheda Anteprima visualizza l'aspetto del documento quando sarà esportato con le impostazioni correnti. Dimensioni del file Tempo di scaricamento Nella parte superiore destra della finestra, viene visualizzata la dimensione del file una volta esportato e il tempo stimato necessario per visualizzare l'immagine sul Web. 270 Capitolo 11

271 Esportazione dell'immagine Dopo aver ottimizzato l'immagine, si può procedere a esportarla come file JPEG. 1 Scegliere File > Esporta. Viene visualizzata la finestra di dialogo Esporta. Il nome di file in elenco ha estensione JPG. Questo formato di file è stato scelto in quanto selezionato dall'utente nel pannello Ottimizza. 2 Passare alla cartella Tutorials sul desktop e aprire Tutorial1/Export. 3 Assicurarsi che nel menu a comparsa Salva come tipo (Windows) o Salva con nome (Macintosh) sia visualizzata l'opzione Solo immagini e fare clic su Salva. Il file JPEG viene esportato nella posizione specificata. Tenere presente che il file PGN è il file sorgente o file di lavoro. Sebbene il documento sia stato esportato in formato JPEG, è necessario salvare anche il file PNG, in modo che eventuali modifiche si riflettano anche nel file sorgente. 4 Scegliere File > Salva per le modifiche nel file PNG. 5 Scegliere File > Chiudi. Esercitazioni di Fireworks 271

272 Visualizzazione del documento esportato Il nuovo file creato durante la procedura di esportazione è inserito nella cartella specificata dall'utente. 1 In Fireworks, scegliere File > Apri e individuare la cartella Export. In questa posizione è stato creato un file denominato vintage.jpg. 2 Selezionare il file vintage.jpg e fare clic su Apri. L'immagine viene aperta in una nuova finestra di documento in Fireworks. Nel pannello Livelli, tutti gli oggetti sono stati uniti in un unico livello. Quando questo avviene, gli oggetti vengono uniti in un oggetto unico e non sono più modificabili come oggetti separati. Nella finestra di ispezione Proprietà vengono visualizzate le proprietà di un'immagine bitmap. Tutti gli Effetti dal vivo e gli altri attributi applicati utilizzando la finestra di ispezione Proprietà non sono più disponibili per l'immagine bitmap selezionata. Il documento ha questo aspetto perché è stato necessario ridurre l'immagine e tutte le sue proprietà in un unico livello, quando si è scelto di esportarla in formato JPEG. Tuttavia, è ancora disponibile il file sorgente PNG: quindi, se è necessario apportare ulteriori modifiche, è sempre possibile aprire il file PNG e modificarne gli oggetti. 3 Scegliere File > Apri e selezionare il file vintage.png nella cartella Tutorial1. Fare clic su Apri. Nel pannello Livelli, tutti gli oggetti sono ancora disponibili come oggetti separati. Ciascuno è modificabile, insieme alle relative proprietà. 4 Fare clic su ciascun oggetto. Nella finestra di ispezione Proprietà sono visualizzate le diverse opzioni per ciascun oggetto selezionato. 272 Capitolo 11

273 5 Selezionare il testo Vintage nell'area di lavoro. L'effetto dal vivo Ombra per l'oggetto di testo viene visualizzato nella finestra di ispezione Proprietà. È ora possibile rendersi conto dei vantaggi dell'uso di un file PNG di Fireworks come file sorgente. È possibile effettuare modifiche a un documento e mantenerlo modificabile, anche quando si scelga di esportarlo in un altro formato, come il JPEG. Per approfondire Sono state completate le operazioni necessarie per creare immagini in Fireworks. Si è appreso come creare e salvare un nuovo documento e come aggiungere oggetti vettoriali e immagini bitmap al documento. Inoltre, si sono aggiunti Effetti dal vivo, si sono utilizzati livelli, creata una maschera e aggiunto testo. Infine si è appreso come esportare l'immagine finale. Per informazioni dettagliate sugli argomenti trattati nella presente esercitazione e per informazioni su ulteriori funzioni di Fireworks, consultare l'indice del manuale Uso di Fireworks o effettuare una ricerca negli argomenti della Guida in linea Fireworks. Altre esercitazioni di Fireworks sono disponibili presso il sito Web di Macromedia all'indirizzo È possibile inoltre visitare il pluri-premiato Centro di assistenza Macromedia all'indirizzo Per apprendere come usare Fireworks per creare pagine Web interattive, vedere l'esercitazione successiva. L'immagine JPEG esportata nel documento verrà utilizzata e importata in una pagina Web. Si apprenderà inoltre come creare elementi Web interattivi quali pulsanti, rollover e menu a-comparsa. Esercitazioni di Fireworks 273

274 Esercitazione di Fireworks 2: Fondamenti della progettazione Web L'esercitazione illustra le operazioni fondamentali della progettazione di immagini Web e di elementi interattivi con Macromedia Fireworks MX, consentendo di fare pratica nell'uso dell'applicazione per la grafica Web leader del settore, apprendendo inoltre i concetti basilari della progettazione Web. Argomenti trattati L'esercitazione consiste nella ricostruzione del tipico flusso di lavoro di produzione di Fireworks per la progettazione di una pagina Web e comprende le operazioni che seguono: Apertura del file sorgente Importazione di un'immagine Divisione di un documento in porzioni Creazione di un rollover di trascinamento Creazione e modifica di pulsanti per creare una barra di navigazione Creazione e modifica di un menu a comparsa Ottimizzazione del documento Esportazione di codice HTML Verifica del file finale Conoscenze preliminari Per effettuare l'esercitazione, è opportuno avere familiarità con la progettazione di immagini in Fireworks o in altre applicazioni per la creazione di immagini bitmap. È consigliabile essere in possesso delle abilità essenziali illustrate nell'esercitazione 1. In particolare, è opportuno essere in grado di effettuare le operazioni che seguono in Fireworks: Salvataggio di un documento Selezione di oggetti Modifica delle proprietà degli oggetti Visualizzazione e uso dei pannelli Operazioni con i livelli e gli oggetti Creazione e modifica del testo Esportazione di un'immagine 274 Capitolo 11

275 Copia della cartella Tutorials Prima di iniziare, effettuare una copia della cartella Tutorials, in modo da poter salvare i risultati del lavoro senza pregiudicare la possibilità di completare l'esercitazione in un momento futuro con i file originali. Nota: Nel caso si sia completato l'esercitazione relativa ai fondamenti della progettazione di immagini, una copia della cartella è già stata effettuata, quindi si può passare al passaggio successivo. 1 Individuare la cartella principale di Fireworks sul disco rigido. Nota: Se non è possibile visualizzare la cartella principale dell'applicazione, l'utente potrebbe avere accesso limitato ai file del sistema. È possibile scaricare i file necessari per l'esercitazione dal centro di assistenza Fireworks sul Web, all indirizzo 2 Trascinare una copia della cartella Tutorials sul desktop. Visualizzazione della pagina Web finale Verrà visualizzato il file di esercitazione finale, per vedere quale sarà l'aspetto del progetto una volta esportato come file HTML. 1 Avviare il browser Web. 2 Sul disco rigido, individuare la cartella Tutorials copiata sul desktop e selezionare Tutorial2/ Complete. Nota: In alcune versioni di Microsoft Windows le estensioni dei tipi noti di file non sono visualizzate per impostazione predefinita. Se questa impostazione non è stata modificata, le estensioni dei file nella cartella Complete non verranno visualizzate. Quando si utilizzano immagini e pagine Web, è preferibile visualizzare le estensioni dei file. Per informazioni su come riattivare le estensioni dei file, consultare la guida in linea di Windows. 3 Selezionare il file final.htm e trascinarlo nella finestra del browser aperta. In questa esercitazione, verrà completata una versione non definitiva della pagina di Global, una società di noleggio auto. 4 Spostare il puntatore sopra l'immagine Vintage. Quando il puntatore passa sopra l'immagine, un'altra immagine nella pagina si modifica. Questa operazione è detta rollover disgiunto. 5 Spostare il puntatore sopra la barra di navigazione e lungo la parte superiore della pagina Web. I pulsanti si modificano al passaggio del puntatore. Fare clic sul pulsante Tariffe per verificare il collegamento. La destinazione del collegamento è la pagina di Fireworks all'indirizzo durante l'esercitazione l'utente inserirà l'url desiderato e altri elementi. 6 Fare clic sul pulsante Indietro del browser per ritornare alla pagina final.htm. 7 Spostare il puntatore sopra l'immagine Worldwide Airports. Viene visualizzato un menu a comparsa Passare il puntatore sopra ciascuna opzione di menu, compresa la prima, che contiene un sottomenu. 8 Fare clic sul pulsante Stati Uniti per verificare il collegamento, quindi tornare alla pagina final.htm. 9 Terminata la visualizzazione della pagina Web, il file può rimanere aperto per riferimento durante l'esercitazione oppure è possibile chiuderlo. Nota: La cartella Complete comprende anche il documento di Fireworks dal quale è stato generato il file HTML. Per visualizzare il documento, fare doppio clic sul file final.png. Esercitazioni di Fireworks 275

276 Apertura del file sorgente Dopo aver visualizzato il file finale.html in un browser, si può procedere all'avvio del progetto. 1 In Fireworks, scegliere File > Apri. 2 Selezionare la cartella Tutorials sul desktop. Selezionare la cartella Tutorial2/Start e aprire il file global.png. Nota: Mentre si procede nell'esercitazione, ricordarsi di salvare il lavoro di frequente, scegliendo File > Salva. Importazione di un'immagine Dopo aver aperto il progetto non completo per la pagina Web di Global, si procederà all'importazione di un'immagine. Sarà possibile usare l'immagine JPEG eventualmente creata durante l'esercitazione di Fireworks relativa ai fondamenti della progettazione di immagini. Nel caso non si fosse effettuata l'esercitazione, verrà fornita un'immagine già pronta. 1 Scegliere File > Importa ed effettuare una delle seguenti operazioni: Se è stata completata l'esercitazione relativa ai fondamenti della progettazione di immagini, passare alla cartella Tutorial1/Export. In caso contrario, passare alla cartella Tutorial2/Assets. 2 Selezionare il file vintage.jpg e fare clic su Apri. 3 Fare clic in un qualsiasi punto della zona bianca vuota dell'area di lavoro. L'immagine viene visualizzata ed è selezionata. 4 Trascinare l'immagine in modo che sia collocata come indicato nella figura seguente. 276 Capitolo 11

277 Divisione di un documento in porzioni I progettisti Web utilizzano una procedura denominata divisione in porzioni per dividere i documenti Web in parti più piccole; questa operazione è utile per vari motivi. Le immagini di minori dimensioni vengono scaricate più rapidamente sul Web, quindi l'utente può visualizzare il progressivo caricamento della pagina, anziché attendere a lungo lo scaricamento di un'immagine di grandi dimensioni. Inoltre, la divisione in porzioni consente di ottimizzare in modi diversi le varie parti di un documento. È un'operazione necessaria anche per aggiungere elementi interattivi. Si procederà ora alla creazione di porzioni per alcuni degli elementi grafici della pagina Web. In seguito, a tali porzioni verranno aggiunti elementi interattivi e si procederà alla definizione delle relative impostazioni di ottimizzazione e di compressione. 1 Con l'immagine Vintage ancora selezionata, scegliere Modifica > Inserisci > Porzione. Nella parte superiore dell'immagine viene inserita una porzione. Per impostazione predefinita, le porzioni hanno una sovrapposizione di colore verde. 2 Fare clic in qualunque punto esterno alla porzione per deselezionarla. Le guide rosse delimitano la porzione, in base alla larghezza e all'altezza del documento. Quando si crea la porzione, il resto del documento viene automaticamente diviso in porzioni. Nota: Se le guide rosse della porzione non sono visibili, scegliere Visualizza > Guide porzione. 3 Fare clic tenendo premuto il tasto Maiusc sull'immagine Worldwide Airports e sull'immagine Great Weekend Rates nella parte sinistra del documento per selezionarle entrambe. Esercitazioni di Fireworks 277

278 4 Scegliere Modifica > Inserisci > Porzione. Nella casella di messaggio visualizzata, scegliere Multipli. Questo consente di inserire più porzioni contemporaneamente. Le porzioni vengono inserite sopra ognuna delle immagini selezionate. L'aggiunta di ulteriori porzioni determina la modifica della disposizione delle porzioni inserite automaticamente nel resto del documento. 5 Fare clic in qualunque punto esterno alle porzioni per deselezionarle. Tra la porzione Vintage e Great Weekend Rates è presente uno spazio. Si tratta di una sottile porzione inserita automaticamente. 6 Collocare il puntatore sopra la guida della porzione sinistra dell'immagine Vintage. Il puntatore assume l'aspetto un puntatore di movimento della guida, indicando che è possibile fare clic sulla guida di porzione e trascinarla. È possibile modificare la forma di una porzione trascinandone una guida. 278 Capitolo 11

279 7 Trascinare la guida verso sinistra fino alla guida di destra sull'immagine Great Weekend Rates, come mostrato nella figura seguente. 8 Rilasciare il pulsante del mouse. La porzione Vintage copre ora l'intero spazio fino al margine della porzione Great Weekend Rates e la porzione inserita automaticamente viene eliminata. Le porzioni sono paragonabili alle celle di una tabella all'interno di un foglio di calcolo o di un'applicazione di elaborazione testi. Trascinando le guide di porzione per ridimensionare una porzione si determina il ridimensionamento delle altre porzioni così come, in una tabella, trascinando i bordi di una cella le altre celle vengono ridimensionate. Se si trascina una guida porzione sopra e oltre le porzioni inserite automaticamente, le guide si uniscono e le porzioni non necessarie vengono eliminate. 9 Se il pannello Livelli non è già aperto o è ridotto a icona, fare clic sulla freccia oppure scegliere Finestra > Livelli. Nella parte superiore del pannello si trova il livello Web, che contiene tutti gli oggetti Web del documento. Le tre porzioni sono ora incluse nel pannello. Il livello Web è sempre quello situato più in alto in qualsiasi documento e non può essere spostato, rinominato o eliminato. Esercitazioni di Fireworks 279

280 Creazione di un rollover di trascinamento Dopo aver diviso il documento in porzioni, si può procedere all'aggiunta di elementi interattivi. Verranno utilizzate due delle porzioni inserite nel passaggio precedente per creare un rollover di trascinamento. Esistono due tipi di rollover: rollover semplici e rollover disgiunti. Un rollover semplice mostra un'immagine che cambia quando il cursore passa sopra di essa in un browser Web. Un rollover disgiunto mostra un'immagine che cambia in una diversa parte dello schermo quando il cursore passa sopra di essa. Si procederà ora alla creazione di un rollover disgiunto. 1 Selezionare la porzione relativa all'immagine Vintage. L'icona rotonda al centro della porzione è detta maniglia di comportamento e consente di aggiungere comportamenti, o elementi interattivi, a una porzione. L'utente che avesse già utilizzato i comportamenti di Macromedia Dreamweaver ne ritroverà molti in Fireworks. Maniglia di comportamento I comportamenti possono essere applicati anche utilizzando il pannello Comportamenti. Tuttavia, per elementi interattivi semplici come i rollover, l'uso di una maniglia è un metodo più rapido e semplice. 280 Capitolo 11

281 2 Trascinare la maniglia sulla porzione del file Great Weekend Rates e rilasciare il tasto del mouse. Una linea di comportamento di colore blu si estende dalla maniglia all'angolo della porzione e viene visualizzata la finestra di dialogo Scambia immagine. 3 Assicurarsi che il fotogramma 2 sia selezionato nel menu a comparsa Immagine di scambio da, quindi fare clic su OK. Quando il puntatore passa sopra la porzione dell'immagine Vintage in un browser, un'immagine nel fotogramma 2 sostituisce l'immagine del file Great Weekend Rates. L'immagine Vintage è l'elemento di attivazione per l'effetto rollover, mentre l'immagine di sostituzione è l'immagine di scambio. 4 Se il pannello Fotogrammi non è già aperto o è ridotto a icona, fare clic sulla freccia per il gruppo di pannelli Fotogrammi e Cronologia e fare clic sulla scheda Fotogrammi, oppure scegliere Finestra> Fotogrammi. Nel pannello Fotogrammi appaiono i fotogrammi disponibili nel documento corrente. Attualmente, nel documento è presente un solo fotogramma. Il pannello Fotogrammi è generalmente utilizzato per l'animazione. Nel caso dei rollover, viene utilizzato per contenere le immagini di scambio. Esercitazioni di Fireworks 281

282 5 Fare clic sul pulsante Fotogramma nuovo/duplicato nella parte inferiore del pannello. Nel pannello Fotogrammi viene creato un nuovo fotogramma, denominato Fotogramma 2. L'area di lavoro è ora vuota, fatta eccezione per le porzioni inserite. Il pannello Livelli non contiene alcun oggetto, fatta eccezione per il contenuto del livello Web. Questo perché i livelli in Fireworks non sono condivisi tra tutti i fotogrammi, per impostazione predefinita, fatta eccezione per il livello Web, che è sempre condiviso. Gli oggetti del livello Web vengono visualizzati in ogni fotogramma del documento, quindi ogni modifica apportata agli oggetti Web, come le porzioni, influenza tutti i fotogrammi. 6 Scegliere File > Importa e passare alla cartella Tutorial2/Risorse. Selezionare il file rates.gif e fare clic su Apri. 7 Collocare il puntatore di inserimento sopra la porzione dov'era collocata l'immagine Great Weekend Rates all'interno del fotogramma 1. Allineare il puntatore rispetto all'angolo superiore sinistro della porzione. 282 Capitolo 11

283 8 Fare clic per inserire l'immagine. Viene visualizzata l'immagine Vintage Classic Rates. 9 Fare clic sulla scheda Anteprima nella parte superiore della finestra di documento e nascondere le porzioni facendo clic sul pulsante Nascondi porzioni e punti attivi nella sezione Web del pannello Strumenti. Spostare il puntatore sopra l'immagine Vintage. L'immagine Great Weekend Rates si modifica quando il puntatore passa sopra l'immagine Vintage. Suggerimento: Se l'immagine non sembra stabile o la transizione tra le immagini non è sufficientemente uniforme, regolare la posizione dell'immagine di scambio nel fotogramma 2 in visualizzazione Originale. Per collocare l'immagine in modo preciso, attivare l'opzione Tecnica Onion skin nel pannello Fotogrammi o verificare nella finestra di ispezione Proprietà che le coordinate X e Y delle due immagini siano le stesse. Terminata l'operazione, tornare al Fotogramma 1 e disattivare eventualmente l'opzione Tecnica Onion skin. Per ulteriori informazioni su queste opzioni, vedere l'indice del manuale Uso di Fireworks oppure effettuare una ricerca nella Guida in linea dell'applicazione. 10 Terminata l'operazione, fare clic sulla scheda Originale nella parte superiore della finestra di documento per tornare alla visualizzazione normale e riattivare le porzioni facendo clic sul pulsante Mostra porzioni e punti attivi nel pannello Strumenti. È stato creato un rollover disgiunto. La procedura di creazione dei rollover semplici è analoga: quando si trascina una maniglia di comportamento della porzione (vedere il passaggio 2), è sufficiente trascinarla sulla stessa porzione. In genere, i progettisti Web aggiungono un effetto rollover a un'immagine per suggerire agli utenti che è possibile fare clic su di essa. Se il sito Web di Global fosse realmente presente su Internet, probabilmente le immagini Vintage e Rates sarebbero collegate ad altre pagine, a scopo informativo. Per gli scopi di questa esercitazione, il rollover disgiunto non verrà ulteriormente modificato. Nella prossima sezione verranno illustrati numerosi esempi di aggiunta di collegamenti ad altri oggetti Web. Esercitazioni di Fireworks 283

284 Creazione e modifica di pulsanti per creare una barra di navigazione I pulsanti sono oggetti Web che fanno da collegamento ad altre pagine Web. In genere, il loro aspetto si modifica in base ai movimenti o ad altre azioni che l'utente fa con il mouse, come il clic, suggerendo visivamente la presenza di un elemento interattivo. Un pulsante, ad esempio, può visualizzare un diverso effetto rollover quando il puntatore passa sopra di esso o quando viene fatto clic su di esso. Una barra di navigazione è costituita da una serie di pulsanti visualizzati su una o più pagine di un sito Web. In genere, tutti i pulsanti di una barra di navigazione sono uguali, fatta eccezione per il relativo testo. Si procederà ora alla creazione di una barra di navigazione per il sito Web di Global. Creazione di un simbolo di pulsante L'immagine e il testo iniziale di un pulsante sono già stati creati. Si procederà ora a convertire l'immagine in un simbolo di pulsante. 1 In Fireworks, selezionare l'immagine del pulsante (con l'etichetta BUTTON TEXT) nell angolo superiore sinistro del documento. 2 Scegliere Elabora > Simbolo > Converti in simbolo. Viene visualizzata la finestra di dialogo Proprietà simbolo. 3 Nella casella di testo Nome digitare My Buttone, quindi scegliere Pulsante come tipo di simbolo e fare clic su OK. Nella parte superiore dell'immagine del pulsante viene visualizzata una porzione e a sinistra della porzione viene visualizzata un'icona di scelta rapida. Questo indica che la selezione nell'area di lavoro è un'istanza del simbolo appena creato. I simboli sono simili a copie master delle immagini. Quando si modifica un simbolo, tutte le istanze di quel simbolo nel documento vengono modificate automaticamente. I simboli sono memorizzato nella libreria. 284 Capitolo 11

285 4 Se il pannello Libreria non è già aperto o è ridotto a icona, fare clic sulla freccia per il gruppo di pannelli Risorse e quindi sulla scheda Libreria, oppure scegliere Finestra> Libreria. Il simbolo è presente nel pannello Libreria. Creazione di stati del pulsante A questo punto si procederà alla creazione di vari stati per il simbolo di pulsante. Gli stati dei pulsanti rappresentano i diversi modi di visualizzazione di un pulsante quando il puntatore del mouse passa sopra di esso o quando viene selezionato in un browser Web. 1 Fare doppio clic sull istanza di pulsante creata. Suggerimento: In alternativa, fare doppio clic sull'anteprima del pulsante nel pannello Libreria o sull'icona del simbolo accanto a esso nella lista dei simboli del pannello. Viene visualizzato l'editor dei pulsanti, con l'immagine del pulsante nell'area di lavoro. Esercitazioni di Fireworks 285

286 2 Fare clic sulle schede nella parte superiore dell'editor dei pulsanti. Le prime quattro schede rappresentano gli stati del pulsante. L'ultima,denominata Area attiva, rappresenta l'area attiva del pulsante, dove l'utente deve fare clic oppure passare il puntatore per attivare gli stati. L'area attiva rappresenta inoltre l'area di scambio del pulsante, che si modifica in corrispondenza di ciascuno stato. Al momento, l'unico stato del simbolo del pulsante è lo stato Su, relativo alla condizione del pulsante prima che venga selezionato oppure che il puntatore del mouse passi sopra di esso. 3 Fare clic sulla scheda Sopra nella parte superiore dell'editor dei pulsanti, quindi sul pulsante Copia grafico su. L'immagine del pulsante viene copiata dalla scheda Su. Lo stato Sopra del pulsante ne rappresenta l'aspetto quando il puntatore si trova sopra di esso. Per fornire agli utenti una risposta visiva, verrà modificato il colore del rettangolo dietro il testo. 4 Selezionare il rettangolo. Assicurarsi di selezionare il rettangolo e non il testo; verificare eventualmente nel pannello Livelli l'elemento selezionato. 5 Fare clic nella casella Colore riempimento della finestra di ispezione Proprietà e scegliere il colore nero. Il rettangolo ha assunto il colore nero. 6 Fare clic sulla scheda Giù nella parte superiore dell'editor dei pulsanti, quindi sul pulsante Copia grafico Sopra. L'immagine del pulsante viene copiata dalla scheda Sopra. Lo stato Giù del pulsante ne rappresenta l'aspetto dopo il clic dell'utente. Il colore del rettangolo verrà lasciato inalterato. 7 Fare clic su Completato nell'editor dei pulsanti per applicare le modifiche ai collegamenti al simbolo del pulsante. 8 Fare clic sulla scheda Anteprima nella finestra di documento e verificare gli stati del pulsante. Disattivare eventualmente le porzioni. Terminata l'operazione, fare clic sulla scheda Originale e riattivare le porzioni. Creazione di istanze multiple del pulsante Si procederà a questo punto alla creazione di altre istanze del simbolo del pulsante. 1 Se non fosse già selezionato, selezionare il pulsante nell'area di lavoro. 2 Scegliere Modifica > Clona. Una nuova istanza del pulsante viene visualizzata sovrapposta al pulsante originale. 286 Capitolo 11

287 3 Tenere premuto il tasto Maiusc premendo ripetutamente il tasto Freccia destra per spostare la nuova istanza verso destra. L'istanza si muove a intervalli di 10 pixel. Se necessario, usare i tasti freccia per spostare la selezione di un pixel per volta. Collocare l'istanza immediatamente a destra dell'istanza originale, senza sovrapporle, come indicato nella figura seguente. 4 Clonare altre due istanze del pulsante e collocare ciascuna a destra della precedente. Suggerimento: Usare il collegamento Alt (Windows) o Opzione (Macintosh) mentre si trascina l'istanza selezionata con il puntatore per effettuarne una copia. Dopo aver collocato la nuova istanza immediatamente a destra della precedente, scegliere Modifica > Ripeti duplicato per creare e posizionare automaticamente un'altra copia dell'istanza. Modifica del testo dell'istanza del pulsante Dopo avere creato tutti i pulsanti della barra di navigazione, è necessario assegnare a ciascuno un testo univoco. Il testo di un'istanza di pulsante può essere facilmente modificato utilizzando la finestra di ispezione Proprietà. 1 Selezionare l'istanza del pulsante più a sinistra. Le proprietà dell'istanza del pulsante vengono visualizzate nella finestra di ispezione Proprietà. A eccezione del menu a comparsa Impostazioni esportazione, le proprietà vengono applicate solo all'istanza selezionata. Le eventuali modifiche non influenzeranno il simbolo originale del pulsante nella libreria. 2 Nella finestra di ispezione Proprietà, sostituire il testo della casella Testo con la parola HOME in lettere maiuscole. Premere Invio. Il testo del pulsante si modifica in modo da rispecchiare l'inserimento. 3 Per i tre pulsanti rimanenti, modificare il testo del pulsante rispettivamente in VEHICLES, RATES e CONTACT US. Esercitazioni di Fireworks 287

288 Assegnazione di URL ai pulsanti Si procederà ora all'assegnazione di un URL (o collegamento) univoco a ciascuna istanza di un pulsante. Un URL (Universal Resource Locator) è l'indirizzo o posizione di una pagina sul Web. È possibile assegnare facilmente URL ai pulsanti utilizzando la finestra di ispezione Proprietà. 1 Selezionare l'istanza di pulsante con etichetta Home. 2 Digitare index.htm nella casella di testo Collega nella finestra di ispezione Proprietà. Facendo clic sul pulsante Home, l'utente verrà trasferito a una pagina denominata index.htm. Il motivo per il quale il pulsante Home è stato collegato a questa pagina verrà chiarito in una fase successiva dell'esercitazione. 3 Selezionare l'istanza di pulsante Vehicles e inserire un URL a piacere nella casella di testo Collega della finestra di ispezione Proprietà. Per gli scopi di questa esercitazione, è possibile inserire qualsiasi URL valido. Nel caso di un sito Web reale, verrebbe inserito l'url della pagina alla quale il pulsante Vehicles dovrebbe trasferire l'utente. Nota: Assicurarsi di inserire l'url di un sito Web esistente, in modo da poter successivamente verificare i collegamenti dei pulsanti. 4 Assegnare un URL a ciascuna delle istanze rimanenti. Anche in questo caso, inserire un qualsiasi URL valido. 5 Scegliere File > Anteprima nel browser > Anteprima in [browser utilizzato]. Per verificare i collegamenti dei pulsanti, è necessario visualizzare un anteprima del documento in un browser. Nota: Se il browser utilizzato non è in elenco, selezionarne uno scegliendo File > Anteprima nel browser > Imposta browser primario. Quando il documento viene visualizzato nel browser, verificare i pulsanti creati. Fatta eccezione per il pulsante Home, che presenta un collegamento a un file non ancora creato, ciascun pulsante dovrebbe trasferire alla pagina specificata in Fireworks. Modifica del simbolo di pulsante Si procederà ora a modificare il simbolo di pulsante originale. Le modifiche effettuate si rifletteranno immediatamente a tutte le istanze dei pulsanti della barra di navigazione. Per visualizzare l'aspetto del simbolo di pulsante originale dopo la modifica del testo di alcune delle sue istanze, procedere come segue: 1 fare doppio clic su una delle istanze di pulsante nell'area di lavoro. Viene visualizzato l'editor dei pulsanti, con il simbolo di pulsante originale e il testo visualizzato nell'area di lavoro. Il simbolo di pulsante originale è rimasto inalterato e mostra il testo originale. 288 Capitolo 11

289 Quando il testo di ciascun pulsante nell'area di lavoro è stato modificato, a essere modificate sono state solo le singole istanze dei pulsanti. Se ora si apporta una modifica al rettangolo o all'aspetto del testo, si starà modificando il simbolo originale, quindi le modifiche si rifletteranno in tutte le istanze nell'area di lavoro. 2 Fare clic sulla scheda Sopra. 3 Selezionare il rettangolo nero. 4 Fare clic nella casella Colore riempimento della finestra di ispezione Proprietà e digitare FF6633 come valore del colore. Premere Invio per applicare la modifica al colore. Il rettangolo è ora di colore arancione. 5 Fare clic su Completato nell'editor dei pulsanti per applicare la modifica al simbolo del pulsante. 6 Fare clic sulla scheda Anteprima nella finestra di documento e verificare i pulsanti. Lo stato Sopra di ciascun pulsante è ora di colore arancione. Solo il simbolo di pulsante è stato modificato, ma la modifica è stata applicata a tutte le istanze dei pulsanti della barra di navigazione. 7 Fare clic sulla scheda Originale e doppio clic su una delle istanze di pulsante nell'area di lavoro. Si procederà ora alla modifica del testo nel simbolo del pulsante. 8 Selezionare il testo del pulsante nell'editor dei pulsanti e scegliere Arial come carattere nella finestra di ispezione Proprietà. Ripetere questa operazione per ciascun stato di pulsante. 9 Fare doppio clic sul blocco di testo nell'editor dei pulsanti ed eliminare la parola BUTTON. 10 Fare clic su Sì nella finestra di messaggio che richiede se si desidera modificare il testo negli altri stati del pulsante. Esaminare i diversi stati nell'editor Pulsanti. Le modifiche del testo in uno stato si riflettono in tutti gli stati del pulsante. Quando si è modificato il carattere, invece, è stato necessario effettuare modificare in ogni stato: è infatti possibile applicare attributi grafici e di testo diversi a ogni stato del pulsante. Questo risulta utile, per esempio, se si desidera modificare il colore del testo quando l'utente passa sopra il pulsante con il puntatore. Esercitazioni di Fireworks 289

290 11 Fare clic su Completato per uscire dall'editor dei pulsanti. Il carattere di ciascuna istanza di pulsante si modifica in modo da rispecchiare la selezione del nuovo carattere, ma il testo rimane inalterato. Le istanze dei pulsante riflettono solo le modifiche apportate all'aspetto grafico di un simbolo di pulsante, compresi gli attributi di testo, ma non le modifiche effettuate al testo stesso. I simboli di pulsante rendono possibile modificare rapidamente l'aspetto grafico di tutte le istanze dei pulsanti in una barra di navigazione, conservando però il testo univoco di ciascuna. Creazione e modifica di un menu a comparsa Un menu a comparsa viene visualizzato quando si sposta il puntatore sopra un'immagine di attivazione in un browser. Esso contiene un elenco di opzioni che fanno da collegamento ad altre pagine Web. Si procederà ora alla creazione e alla modifica di un menu a comparsa che contiene le diverse filiali di Global presso gli aeroporti. Creazione delle voci di elenco di un menu a comparsa Si procederà anzitutto alla creazione delle voci di elenco del menu a comparsa utilizzando l'editor menu a comparsa. 1 Selezionare la porzione relativa all'immagine Worldwide Airports. 2 Scegliere Elabora > Menu a comparsa > Aggiungi menu a comparsa. Viene visualizzato l'editor menu a comparsa. 3 Fare doppio clic sulla casella di testo nell'angolo superiore sinistro (solo Windows). 290 Capitolo 11

291 4 Digitare North America nella casella di testo e premere Invio. La successiva casella di testo, evidenziata, è immediatamente utilizzabile per la creazione di un'altra voce. 5 Digitare Europa e premere Invio. 6 Creare altre tre voci per Africa, Medio Oriente, e Asia/Pacifico. 7 Fare doppio clic nella casella di testo Collega per la voce Nord America. 8 Inserire un URL valido a piacere e premere Invio. Per gli scopi di questa esercitazione, è possibile inserire qualsiasi URL valido. Assicurarsi di inserire un URL esistente, in modo da poter successivamente verificare i collegamenti. 9 Inserire gli URL per le voci rimanenti. Nota: Nella parte inferiore dell'elenco di voci del Editor menu a comparsa è sempre presente una riga in più, in modo da poter aggiungere facilmente nuove voci senza che sia necessario fare clic sul pulsante Aggiungi menu. Esercitazioni di Fireworks 291

292 10 Fare clic su Completato per chiudere l'editor menu a comparsa. Nell'area di lavoro, attorno al menu a comparsa collegato alla porzione viene visualizzato un bordo. 11 Per verificare il menu a comparsa, scegliere File > Anteprima nel browser > Anteprima in [browser utilizzato] per visualizzare un'anteprima del documento nel browser. Nota: È necessario visualizzare in anteprima i menu a comparsa in un browser; essi infatti non sono visibili tramite la scheda Anteprima di Fireworks. Quando il documento viene aperto nel browser, spostare il puntatore sopra l'immagine Worldwide Airports. Viene visualizzato il menu a comparsa appena creato. Fare clic su ogni voce per eseguire una verifica dei collegamenti. Personalizzazione del menu a comparsa Si procederà ora alla modifica dell'aspetto del menu a comparsa utilizzando il relativo Editor. 1 In Fireworks, fare doppio clic sulla struttura del menu a comparsa. Viene visualizzato l'editor menu a comparsa con le voci create dall'utente. 2 Fare clic sul pulsante Successivo. Viene visualizzata la scheda Aspetto, utilizzata per modificare i colori e i caratteri utilizzati nei -menu a comparsa. 3 Scegliere HTML come tipo di cella e Menu verticale come allineamento. 4 Scegliere Arial, Helvetica, sans-serif come carattere e 12 come dimensioni del carattere. 292 Capitolo 11

293 5 Nella sezione Stato Su, impostare il colore del testo su nero, se non ancora selezionato. Fare clic sulla casella Colore cella. Se CCCCCC non è già visualizzato nella casella di testo nella parte superiore della finestra a comparsa del colore, digitare CCCCCC e premere Invio. Questi valori di colore rappresentano i colori predefiniti selezionati nell'editor menu a comparsa quando si crea il primo menu. Una volta modificati, saranno utilizzati ogni volta che si crea un menu a comparsa, fino a quando non vengano selezionati altri colori. 6 Nella sezione Stato Sopra, impostare il colore del testo su Bianco, se non ancora selezionato, e fare clic sulla casella Colore cella. Fare clic con il contagocce sul rettangolo blu nell'area di lavoro che circonda l'immagine Worldwide Airports, come illustrato di seguito. 7 Fare clic sul pulsante Successivo. Viene visualizzata la scheda Avanzate. La scheda Avanzate consente di modificare numerose proprietà delle celle e del bordo, per esempio aumentando la larghezza della cella e quindi del menu a comparsa. 8 Scegliere Pixel dal menu a comparsa Larghezza cella, per attivare la relativa casella. 9 Digitare 137 come larghezza della cella. Esercitazioni di Fireworks 293

294 10 Scegliere Automatica dal menu a comparsa Altezza cella e fare clic sul pulsante Successivo. Viene visualizzata la scheda Posizione, utilizzata per specificare la posizione sullo schermo nella quale viene visualizzato il menu-a comparsa. Le coordinate 0,0 indicano che l'angolo superiore sinistro del menu a comparsa verrà allineato al corrispondente angolo della porzione che attiva il menu. È inoltre possibile scegliere tra varie posizioni preimpostate. 11 Inserire 3 nelle caselle Posizione menu X e Y, quindi fare clic su Completato. Nota: È anche possibile riposizionare un menu a comparsa trascinandone la struttura all'interno dell'area di lavoro. 12 Visualizzare l anteprima delle modifiche del menu a comparsa in un browser. Spostare il puntatore sopra l'immagine Worldwide Airports. Il menu a comparsa è collocato in un'altra posizione e appare più largo. Passare con il puntatore sopra ciascuna voce del menu per visualizzare le modifiche di colore. Modifica del menu a comparsa Si procederà ora all'aggiunta di un'altra voce al menu a comparsa utilizzando il relativo Editor. Verrà inoltre modificato l'ordine delle voci e aggiunto un sottomenu. 1 In Fireworks, fare doppio clic sulla struttura del menu a comparsa. 2 Fare clic sulla voce Europe per selezionarla. 3 Fare clic sul pulsante Aggiungi menu sopra l elenco delle voci. Viene inserita una riga vuota. 294 Capitolo 11

295 4 Fare doppio clic sul campo Testo della nuova voce e digitare Latin/South America. Fare clic in un punto esterno al campo Testo per applicare l'inserimento di testo. Le due parti del continente americano non appaiono insieme nell'elenco. 5 Trascinare la voce Latin/South America portandola una riga sopra e rilasciare il pulsante del mouse. Durante l'operazione, una linea scura indica la posizione in cui la voce verrà collocata nel caso si rilasci il tasto del mouse in quel momento. La voce viene collocata nella posizione specificata. 6 Selezionare la voce North America e fare clic sul pulsante Aggiungi menu. 7 Fare doppio clic sul campo Testo della nuova voce e digitare United States, quindi fare clic in qualunque punto all esterno dei campi delle voci, facendo attenzione a non selezionare un'altra voce. 8 Selezionare la voce United States, se non ancora selezionata, e fare clic sul pulsante Menu rientrato. Alla voce viene applicato un rientro sotto la voce North America. Esercitazioni di Fireworks 295

296 9 Fare di nuovo clic sul pulsante Aggiungi menu e creare una nuova voce per il Canada. Si è appena creato un sottomenu che verrà visualizzato quando il puntatore del mouse passerà sopra la voce North America in un browser. 10 Assegnare un URL a tutte le nuove voci. È eventualmente possibile eliminare il collegamento per la voce North America, in quanto gli utenti utilizzeranno il relativo sottomenu per la selezione delle voci. 11 Fare clic su Completato per chiudere l'editor menu a comparsa e visualizzare l'anteprima delle modifiche apportate al menu a comparsa. in un browser. Ottimizzazione del documento Il documento è quasi pronto per la pubblicazione sul Web. Prima di procedere all'esportazione, però, è necessario ottimizzarlo. Prima di esportare un documento da Fireworks, è sempre opportuno ottimizzarlo: l'ottimizzazione assicura che l'immagine venga esportata con il migliore equilibrio possibile tra compressione e qualità. Quando un documento contiene diversi tipi di immagini, è consigliabile scegliere un formato di file e delle impostazioni di compressione appropriate per ciascun tipo. La pagina Web di Global è composta da numerosi elementi: oggetti vettoriali, immagini bitmap e testo. 1 Se il pannello Ottimizza non è già aperto o è ridotto a icona, fare clic sulla freccia oppure scegliere Finestra > Ottimizza. In Fireworks il formato GIF è il formato di file di esportazione predefinito, mentre la tavolozza di colori predefinita è Adattata WebSnap. Tali impostazioni sono adatte per la maggioranza delle immagini della pagina Web di Global Rental Cars. L'immagine bitmap Vintage, però, contiene una fotografia e una sfumatura. A causa delle sue complesse variazioni di colore, è più opportuno esportarla in un altro formato. 296 Capitolo 11

297 2 Fare clic sulla scheda di anteprima 2-alto nella finestra di documento. La scheda 2-alto consente di visualizzare i risultati delle impostazioni di ottimizzazione e di confrontarli con l'originale. La sovrapposizione porzione di colore bianco che appare quando si visualizza una delle schede Anteprima evidenzia l'area da ottimizzare. 3 Fare clic sulla porzione relativa all'immagine Vintage nell'anteprima a destra. La sovrapposizione porzione scompare, consentendo di visualizzare l'immagine sotto la porzione. Nella parte inferiore dell'anteprima viene visualizzato il formato di file di esportazione per la porzione selezionata, la dimensione stimata del file di esportazione e il tempo necessario per scaricarlo dal Web. Suggerimento: Se necessario, scegliere lo strumento Mano nella sezione Visualizza del pannello Strumenti per visualizzare completamente l'immagine. 4 Nascondere temporaneamente le porzioni facendo clic sul pulsante Nascondi porzioni e punti attivi della sezione Web del pannello Strumenti. Questo consente di confrontare l'anteprima con l'originale visualizzando la differenza tra le due immagini. La sfumatura dell'anteprima, a destra, contiene delle strisce. 5 Attivare di nuovo le porzioni e fare clic sull'immagine Vintage con lo strumento Puntatore. Esercitazioni di Fireworks 297

298 6 Nel pannello Ottimizza, scegliere JPEG File più piccoli dal menu a comparsa Impostazioni. Le strisce nella sfumatura non sono più presenti e le dimensioni del file si sono ridotte notevolmente: le fotografie e le immagini caratterizzate da variazioni complesse di colore, infatti, vengono ottimizzate e compresse al meglio come JPEG anziché come GIF. Riducendo le dimensioni del file, però, l'immagine ha perso in definizione. 7 Per migliorarne l'aspetto, trascinare lo slider Qualità nel pannello Ottimizza fino al valore 77 e impostare l'opzione Attenuazione su 0. L'immagine bitmap è ora molto più definita, ma la dimensione del file è aumentata. Si tratta comunque di un miglioramento, rispetto alle dimensioni del file dopo l'ottimizzazione in formato GIF. 8 Fare clic sulla scheda Originale per tornare alla visualizzazione normale. 298 Capitolo 11

Guida introduttiva di Fireworks MX

Guida introduttiva di Fireworks MX Guida introduttiva di Fireworks MX macromedia Marchi Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain,

Dettagli

Layout dell area di lavoro

Layout dell area di lavoro Layout dell 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

Dettagli

02 web. designer. info. certificazioni. specializzazioni avanzate

02 web. designer. info. certificazioni. specializzazioni avanzate info durata: 10 mesi inizio: novembre 2010 frequenza: 4 ore a settimana software: Adobe Illustrator, Photoshop, Flash, Dreamweaver certificazioni Adobe Certified Expert (ACE) per i software: Illustrator,

Dettagli

Programma corso Adobe Flash CS3

Programma corso Adobe Flash CS3 Programma corso Adobe Flash CS3 PCAcademy Via Capodistria 12 www.pcacademy.it info@pcacademy.it Informazioni generali Il corso di Flash viene affrontato sulla nuova release Cs3 (Adobe Flash Cs3 Professional);

Dettagli

SOMMarIO INIZIARE. iii. Adobe dreamweaver CS5 ClASSroom in A book

SOMMarIO INIZIARE. iii. Adobe dreamweaver CS5 ClASSroom in A book SOMMarIO INIZIARE XI Informazioni su questo libro................................xi Prerequisiti.................................................xi Installare il programma....................................

Dettagli

CORSO DI WEB DESIGN 40 ORE

CORSO DI WEB DESIGN 40 ORE CORSO DI WEB DESIGN 40 ORE Adobe Photoshop CS5 Unità didattica 1: Grafica bitmap ed introduzione all utilizzo di photoshop Concetti fondamentali di Photoshop Immagini bitmap e grafica vettoriale Dimensioni

Dettagli

Rich Media Communication Using Flash CS5

Rich Media Communication Using Flash CS5 Rich Media Communication Using Flash CS5 Dominio 1.0 Impostare i requisiti del progetto 1.1 Individuare lo scopo, i destinatari e le loro esigenze per i contenuti multimediali. 1.2 dentificare i contenuti

Dettagli

Programma del corso Web Design

Programma del corso Web Design Programma del corso Web Design Il corso mira a formare professionisti in grado di realizzare siti web efficaci in termini di comunicazione ed indicizzazione nei motori di ricerca. Introduzione La figura

Dettagli

Guida introduttiva di Dreamweaver

Guida introduttiva di Dreamweaver Guida introduttiva di Dreamweaver Marchi di fabbrica 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database

Dettagli

Programma del corso. Web Design e SEO. ScuolaSi di CIP.SA s.a.s. 84124 Salerno (Sa) Via del Carmine, 127 P.IVA C.F. 04485840658 info: 800 03 51 41

Programma del corso. Web Design e SEO. ScuolaSi di CIP.SA s.a.s. 84124 Salerno (Sa) Via del Carmine, 127 P.IVA C.F. 04485840658 info: 800 03 51 41 ScuolaSi di CIP.SA s.a.s. 84124 Salerno (Sa) Via del Carmine, 127 P.IVA C.F. 04485840658 info: 800 03 51 41 Programma del corso Web Design e SEO Programmi oggetto d'insegnamento: HTML CSS Wordpress Adobe

Dettagli

CAPITOLO 2 Concetti fondamentali di Flash

CAPITOLO 2 Concetti fondamentali di Flash 2 CAPITOLO 2 Concetti fondamentali di Flash... I filmati Flash sono grafici e animazioni per siti Web. I filmati sono principalmente composti da grafici vettoriali, ma possono anche contenere audio e grafici

Dettagli

Benvenuti in Corel VideoStudio Pro X5

Benvenuti in Corel VideoStudio Pro X5 Guida introduttiva Sommario Benvenuti in Corel VideoStudio Pro X5............................ 2 Nuove funzioni e miglioramenti................................. 4 Conoscere l'area di lavoro......................................

Dettagli

Uso di Flash. macromedia

Uso di Flash. macromedia Uso di Flash macromedia Marchi Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive

Dettagli

Esercitazioni di Flash MX

Esercitazioni di Flash MX Esercitazioni di Flash MX macromedia Marchi Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware

Dettagli

CREARE PRESENTAZIONI CON POWERPOINT

CREARE PRESENTAZIONI CON POWERPOINT CREARE PRESENTAZIONI CON POWERPOINT Una presentazione è un documento multimediale, cioè in grado di integrare immagini, testi, video e audio, che si sviluppa attraverso una serie di pagine chiamate diapositive,

Dettagli

GFI Product Manual. ReportPack

GFI Product Manual. ReportPack GFI Product Manual ReportPack http://www.gfi.com info@gfi.com Le informazioni contenute nel presente documento sono soggette a modifiche senza preavviso. Salvo se indicato diversamente, le società, i nomi

Dettagli

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

Dettagli

Indice generale Introduzione...xi Capitolo 1 Che cos è Flash...1

Indice generale Introduzione...xi Capitolo 1 Che cos è Flash...1 Indice generale Introduzione... xi Capitolo 1 Che cos è Flash...1 Le novità di Flash CS4... 2 Animazione basata su oggetti... 2 Tracciati in movimento... 3 Trasformazione 3D... 3 Pittura ed animazione

Dettagli

Adobe GoLive cs2. Authoring professionale di contenuti per il Web e i dispositivi mobili

Adobe GoLive cs2. Authoring professionale di contenuti per il Web e i dispositivi mobili Adobe GoLive cs2 Authoring professionale di contenuti per il Web e i dispositivi mobili FUNZIONI Panoramica sul prodotto Sfruttate le potenzialità del formato CSS grazie a strumenti visivi intuitivi, trasferite

Dettagli

File Leggimi di Adobe Contribute CS3

File Leggimi di Adobe Contribute CS3 File Leggimi di Adobe Contribute CS3 Benvenuti in Adobe Contribute CS3. Questo documento contiene informazioni recenti sul prodotto, aggiornamenti e consigli di risoluzione dei problemi non affrontati

Dettagli

Benvenuti alla Guida introduttiva - Utilità

Benvenuti alla Guida introduttiva - Utilità Benvenuti alla Guida introduttiva - Utilità Sommario Benvenuti alla Guida introduttiva - Utilità... 1 Performance Toolkit... 3 Guida introduttiva al Kit prestazioni... 3 Installazione... 3 Guida introduttiva...

Dettagli

FormatChecker for Microsoft Word

FormatChecker for Microsoft Word FormatChecker for Microsoft Word 2006 STAR AG Tutti i diritti riservati. L'uso dei testi e delle immagini senza previa autorizzazione scritta di STAR AG non è consentito ai sensi della legge sul diritto

Dettagli

Utilizzo di ADOBE FIREWORKS CS5

Utilizzo di ADOBE FIREWORKS CS5 Utilizzo di ADOBE FIREWORKS CS5 Informazioni legali Informazioni legali Per gli avvisi legali, vedete http://help.adobe.com/it_it/legalnotices/index.html. iii Sommario Capitolo 1: Novità Prestazioni migliorate,

Dettagli

Liceo Classico Scientifico Isaac NEWTON via Paleologi 22 - Chivasso

Liceo Classico Scientifico Isaac NEWTON via Paleologi 22 - Chivasso Liceo Classico Scientifico Isaac NEWTON via Paleologi 22 - Chivasso Mod. 50 Rev. 0 01.09.2011 Documento PROGRAMMA SVOLTO Disciplina COMUNICAZIONE MULTIMEDIALE Anno scolastico 2011-2012 Libro di testo Linguaggi

Dettagli

Guida introduttiva di Dreamweaver MX

Guida introduttiva di Dreamweaver MX Guida introduttiva di Dreamweaver MX macromedia Marchi di fabbrica Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware

Dettagli

Utilizzo di FileMaker Pro con Microsoft Office

Utilizzo di FileMaker Pro con Microsoft Office Guida Pratica Utilizzo di FileMaker Pro con Microsoft Office Integrare FileMaker Pro con Office pagina 1 Sommario Introduzione... 3 Prima di iniziare... 4 Condivisione di dati tra FileMaker Pro e Microsoft

Dettagli

VERITAS Backup Exec 9.1 for Windows Servers Manuale di installazione rapida

VERITAS Backup Exec 9.1 for Windows Servers Manuale di installazione rapida VERITAS Backup Exec 9.1 for Windows Servers Manuale di installazione rapida N109548 Dichiarazione di non responsabilità Le informazioni contenute nella presente pubblicazione sono soggette a modifica senza

Dettagli

CORSO DI INFORMATICA DI BASE - 1 e 2 Ciclo 2013-2014. Programma del Corso Sistemi Microsoft Windows

CORSO DI INFORMATICA DI BASE - 1 e 2 Ciclo 2013-2014. Programma del Corso Sistemi Microsoft Windows CORSO DI INFORMATICA DI BASE - 1 e 2 Ciclo 2013-2014 Programma del Corso Sistemi Microsoft Windows CORSO BASE DI INFORMATICA Il corso di base è indicato per i principianti e per gli autodidatti che vogliono

Dettagli

Adobe GoLive Strumenti integrati per progettare e creare siti Web di grande effetto

Adobe GoLive Strumenti integrati per progettare e creare siti Web di grande effetto cs Adobe GoLive Strumenti integrati per progettare e creare siti Web di grande effetto Adobe GoLive cs Ottimizzazione del flusso di lavoro Integrazione con gli altri software Adobe Aprite, modificate e

Dettagli

Le novità di QuarkXPress 2015

Le novità di QuarkXPress 2015 Le novità di QuarkXPress 2015 INDICE Indice Le novità di QuarkXPress 2015...3 Nuove funzionalit...4 Applicazione a 64 bit...4 Variabili di contenuti...4 Tabelle in linea...5 Note a piè di pagina e note

Dettagli

Uso di UltraDev. macromedia

Uso di UltraDev. macromedia Uso di UltraDev macromedia Marchi di fabbrica Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware

Dettagli

CAPITOLO 3 Pianificazione e impostazione del sito

CAPITOLO 3 Pianificazione e impostazione del sito 3 CAPITOLO 3 Pianificazione e impostazione del sito... Un sito Web comprende una serie di documenti collegati e dotati di attributi condivisi, come argomenti correlati, struttura simile o scopo comune.

Dettagli

Introduzione a VMware Fusion

Introduzione a VMware Fusion Introduzione a VMware Fusion VMware Fusion per Mac OS X 2008 2012 IT-000933-01 2 Introduzione a VMware Fusion È possibile consultare la documentazione tecnica più aggiornata sul sito Web di VMware all'indirizzo:

Dettagli

PREPARAZIONE CON ADOBE PHOTOSHOP USO DELLE SEZIONI E SALVATAGGIO PER WEB

PREPARAZIONE CON ADOBE PHOTOSHOP USO DELLE SEZIONI E SALVATAGGIO PER WEB PREPARAZIONE CON ADOBE PHOTOSHOP USO DELLE SEZIONI E SALVATAGGIO PER WEB Le sezioni Le sezioni sono classificate in base al tipo di contenuto: Tabella Immagine - Nessuna immagine e al modo in cui sono

Dettagli

Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo

Che cos'è un modulo? pulsanti di opzione caselle di controllo caselle di riepilogo Creazione di moduli Creazione di moduli Che cos'è un modulo? Un elenco di domande accompagnato da aree in cui è possibile scrivere le risposte, selezionare opzioni. Il modulo di un sito Web viene utilizzato

Dettagli

Manuale di Nero MediaStreaming per MCE

Manuale di Nero MediaStreaming per MCE Manuale di Nero MediaStreaming per MCE Nero AG Informazioni sul copyright e sui marchi Questo manuale e il contenuto dello stesso sono protetti da copyright e sono di proprietà di Nero AG. Tutti i diritti

Dettagli

Software della stampante

Software della stampante Software della stampante Informazioni sul software della stampante Il software Epson comprende il software del driver per stampanti ed EPSON Status Monitor 3. Il driver per stampanti è un software che

Dettagli

Personalizzare l area di lavoro

Personalizzare l area di lavoro 1 Personalizzare l area di lavoro Panoramica della lezione In questa lezione conoscerai l interfaccia del programma Dreamweaver CS6 (Creative Suite 6) e imparerai come: Passare fra le viste documento Gestire

Dettagli

Manuale di Palm Reader

Manuale di Palm Reader Manuale di Palm Reader Copyright 2000-2002 Palm, Inc. Tutti i diritti riservati. Graffiti, HotSync, il logo Palm e Palm OS sono marchi registrati di Palm, Inc. Il logo HotSync e Palm sono marchi di Palm,

Dettagli

TESINA INFORMATICA Prof. De Feo. GOLIVE e FETCH. Nicolò Andrea Pineri. Corso Psicologia Clinica e di Comunità. Matricola 301681

TESINA INFORMATICA Prof. De Feo. GOLIVE e FETCH. Nicolò Andrea Pineri. Corso Psicologia Clinica e di Comunità. Matricola 301681 TESINA INFORMATICA Prof. De Feo GOLIVE e FETCH Nicolò Andrea Pineri Corso Psicologia Clinica e di Comunità Matricola 301681 Programma GoLive Adobe GoLive è un editor HTML e un'applicazione per il controllo

Dettagli

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/ MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http:///ecdl/powerpoint/ INTERFACCIA UTENTE TIPICA DI UN SOFTWARE DI PRESENTAZIONE APERTURA E SALVATAGGIO DI UNA PRESENTAZIONE

Dettagli

AXIS Camera Station Guida all'installazione rapida

AXIS Camera Station Guida all'installazione rapida AXIS Camera Station Guida all'installazione rapida Copyright Axis Communications AB Aprile 2005 Rev. 1.0 Numero parte 23794 1 Indice Informazioni sulle normative............................. 3 AXIS Camera

Dettagli

Marzo 2011 708P89953. Xerox FreeFlow Print Server v. 8.0. SP Pacchetto di benvenuto per i clienti di Xerox Color 800/1000 Press

Marzo 2011 708P89953. Xerox FreeFlow Print Server v. 8.0. SP Pacchetto di benvenuto per i clienti di Xerox Color 800/1000 Press Marzo 2011 708P89953 Xerox FreeFlow Print Server v. 8.0. SP Pacchetto di benvenuto per i clienti di Xerox Color 800/1000 Press 2011 Xerox Corporation. Tutti i diritti riservati. Xerox e il design della

Dettagli

Creazione e lettura dei dischi SecurDisc. SecurDisc - la tecnologia 2

Creazione e lettura dei dischi SecurDisc. SecurDisc - la tecnologia 2 T U Creazione e lettura dei dischi SecurDisc T O R I A L SecurDisc - la tecnologia 2 Requisiti 2 Creazione dei dischi SecurDisc : Nero Express 2 Lettura dei dischi SecurDisc : InCD o InCD Reader 3 Lettura

Dettagli

GUIDA DELL'UTENTE PER IL SOFTWARE P-TOUCH EDITOR. PJ-623/PJ-663 Stampante mobile. Versione 0 ITA

GUIDA DELL'UTENTE PER IL SOFTWARE P-TOUCH EDITOR. PJ-623/PJ-663 Stampante mobile. Versione 0 ITA GUIDA DELL'UTENTE PER IL SOFTWARE P-TOUCH EDITOR PJ-6/PJ-66 Stampante mobile Versione 0 ITA Introduzione Le stampanti mobili Brother, modelli PJ-6 e PJ-66 (con Bluetooth), sono compatibili con numerose

Dettagli

Installazione e utilizzo di Document Distributor 1

Installazione e utilizzo di Document Distributor 1 1 Il software Document Distributor comprende i pacchetti server e client. Il pacchetto server deve essere installato su sistemi operativi Windows NT, Windows 2000 o Windows XP. Il pacchetto client può

Dettagli

Conferencing. Novell. Conferencing 1.0. novdocx (it) 6 April 2007 AVVIARE IL CLIENT CONFERENCING: ACCESSO. Luglio 2007

Conferencing. Novell. Conferencing 1.0. novdocx (it) 6 April 2007 AVVIARE IL CLIENT CONFERENCING: ACCESSO. Luglio 2007 Guida di riferimento rapido per Conferencing Novell Conferencing novdocx (it) 6 April 2007 1.0 Luglio 2007 GUIDA RAPIDA www.novell.com Conferencing Novell Conferencing si basa sulla tecnologia Conferencing.

Dettagli

CyberLink. PowerDVD Mobile. Guida per l'utente

CyberLink. PowerDVD Mobile. Guida per l'utente CyberLink PowerDVD Mobile Guida per l'utente Copyright e limitazioni Tutti i diritti riservati. Non è consentito riprodurre nessuna porzione della presente pubblicazione, memorizzarla in un sistema di

Dettagli

Monitor Wall 4.0. Manuale d'installazione ed operativo

Monitor Wall 4.0. Manuale d'installazione ed operativo Monitor Wall 4.0 it Manuale d'installazione ed operativo Monitor Wall 4.0 Sommario it 3 Sommario 1 Introduzione 4 1.1 Informazioni sul manuale 4 1.2 Convenzioni utilizzate nel manuale 4 1.3 Requisiti

Dettagli

CAPITOLO 13 Creazione di punti attivi e mappe immagine

CAPITOLO 13 Creazione di punti attivi e mappe immagine 13 CAPITOLO 13 Creazione di punti attivi e mappe immagine... La home page della maggior parte dei siti Web contiene una mappa immagine. Per mappa immagine si intende un grafico o gruppo di grafici che

Dettagli

Modulo 8. Strumenti di produzione Strumenti. Gli strumenti più utilizzati per produrre pagine Web sono essenzialmente due:

Modulo 8. Strumenti di produzione Strumenti. Gli strumenti più utilizzati per produrre pagine Web sono essenzialmente due: Pagina 1 di 6 Strumenti di produzione Strumenti Gli strumenti più utilizzati per produrre pagine Web sono essenzialmente due: 1. Netscape Composer, gratuito e scaricabile da netscape.org assieme al browser

Dettagli

Corsi Informatica 2009/10

Corsi Informatica 2009/10 Corsi Informatica 2009/10 Partner: Power Point Excel Ai Illustrator W Word ID Indesign Dw Dreamweaver Office Automation Grafica Computer Web Design.com Corsi di formazione a distanza Segui i corsi comodamente

Dettagli

Capitolo 12 Creare pagine web

Capitolo 12 Creare pagine web Guida introduttiva Capitolo 12 Creare pagine web Salvare documenti come file HTML Copyright Il presente documento è rilasciato sotto Copyright 2005-2008 dei collaboratori elencati nella sezione Autori.

Dettagli

HP Capture and Route (HP CR) Guida utente

HP Capture and Route (HP CR) Guida utente HP Capture and Route (HP CR) Guida utente HP Capture and Route (HP CR) Guida utente Numero riferimento: 20120101 Edizione: marzo 2012 2 Avvisi legali Copyright 2012 Hewlett-Packard Development Company,

Dettagli

Benvenuti! Novità di PaperPort 10

Benvenuti! Novità di PaperPort 10 Benvenuti! ScanSoft PaperPort è un pacchetto software per la gestione di documenti che consente di acquisire, organizzare, accedere, condividere e gestire i documenti cartacei e digitali sul personal computer.

Dettagli

FileMaker Server 11. Guida alla configurazione dell'installazione in rete

FileMaker Server 11. Guida alla configurazione dell'installazione in rete FileMaker Server 11 Guida alla configurazione dell'installazione in rete 2007-2010 FileMaker, Inc. Tutti i diritti riservati. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 FileMaker

Dettagli

Manuale utente. Software Content Manager per HP ipaq 310 Series Travel Companion. Italiano Dicembre 2007. Part number: 467721-061

Manuale utente. Software Content Manager per HP ipaq 310 Series Travel Companion. Italiano Dicembre 2007. Part number: 467721-061 Manuale utente Software Content Manager per HP ipaq 310 Series Travel Companion Italiano Dicembre 2007 Part number: 467721-061 Copyright Note legali Il prodotto e le informazioni riportate nel presente

Dettagli

Utilizzo di ADOBE PHOTOSHOP LIGHTROOM 4

Utilizzo di ADOBE PHOTOSHOP LIGHTROOM 4 Utilizzo di ADOBE PHOTOSHOP LIGHTROOM 4 Note legali Note legali Per le note legali, consultate http://help.adobe.com/it_it/legalnotices/index.html. iii Sommario Capitolo 1: Installare, registrare e impostare

Dettagli

Getting Started Guide Italiano

Getting Started Guide Italiano Getting Started Guide Italiano Sommario La tecnologia di PrintShop Mail 2 Requisiti di sistema per PrintShop Mail. 4 Panoramica dei contenuti del CD-ROM.. 5 Installazione di PrintShop Mail (Windows)...

Dettagli

2007 Adobe Systems Incorporated. Tutti i diritti riservati. Adobe Fireworks Uso di Fireworks Se il presente documento viene distribuito con software

2007 Adobe Systems Incorporated. Tutti i diritti riservati. Adobe Fireworks Uso di Fireworks Se il presente documento viene distribuito con software GUIDA UTENTE 2007 Adobe Systems Incorporated. Tutti i diritti riservati. Adobe Fireworks Uso di Fireworks Se il presente documento viene distribuito con software che include un contratto per l'utente finale,

Dettagli

Installazione e guida introduttiva. Per WebReporter 2012

Installazione e guida introduttiva. Per WebReporter 2012 Per WebReporter 2012 Ultimo aggiornamento: 13 settembre, 2012 Indice Installazione dei componenti essenziali... 1 Panoramica... 1 Passo 1 : Abilitare gli Internet Information Services... 1 Passo 2: Eseguire

Dettagli

Manuale dell'utente di Avigilon Control Center Server

Manuale dell'utente di Avigilon Control Center Server Manuale dell'utente di Avigilon Control Center Server Versione 4.10 PDF-SERVER-D-Rev1_IT Copyright 2011 Avigilon. Tutti i diritti riservati. Le informazioni qui presenti sono soggette a modifiche senza

Dettagli

Esercitazioni su ADOBE DIGITAL PUBLISHING SUITE

Esercitazioni su ADOBE DIGITAL PUBLISHING SUITE Esercitazioni su ADOBE DIGITAL PUBLISHING SUITE Note legali Note legali Per le note legali, consultate http://help.adobe.com/it_it/legalnotices/index.html. iii Sommario Configurazione delle esercitazioni.....................................................................................

Dettagli

Manuale di Nero ImageDrive

Manuale di Nero ImageDrive Manuale di Nero ImageDrive Nero AG Informazioni sul copyright e sui marchi Il manuale di Nero ImageDrive e il contenuto dello stesso sono protetti da copyright e sono di proprietà di Nero AG. Tutti i diritti

Dettagli

X-Sign Basic Manuale Utente

X-Sign Basic Manuale Utente X-Sign Basic Manuale Utente Copyright Copyright 2015 di BenQ Corporation. Tutti i diritti riservati. Nessuna parte della presente pubblicazione può essere riprodotta, trasmessa, trascritta, salvata in

Dettagli

XnView. Visualizzatore/Convertitore di formato per immagini. Guida di riferimento alle funzionalità principali

XnView. Visualizzatore/Convertitore di formato per immagini. Guida di riferimento alle funzionalità principali XnView Visualizzatore/Convertitore di formato per immagini Guida di riferimento alle funzionalità principali Questa guida è stata realizzata dall'aiuto in linea di XnView ed ha lo scopo di essere un riferimento

Dettagli

GUIDA DI INSTALLAZIONE DEL SOFTWARE... 3 SISTEMA MULTIFUNZIONALE DIGITALE INFORMAZIONI SUL SOFTWARE... 2 PRIMA DELL'INSTALLAZIONE...

GUIDA DI INSTALLAZIONE DEL SOFTWARE... 3 SISTEMA MULTIFUNZIONALE DIGITALE INFORMAZIONI SUL SOFTWARE... 2 PRIMA DELL'INSTALLAZIONE... GUIDA DI INSTALLAZIONE DEL SOFTWARE SISTEMA MULTIFUNZIONALE DIGITALE Pagina SOMMARIO... 1 INFORMAZIONI SUL SOFTWARE... 2 PRIMA DELL'INSTALLAZIONE... 2 INSTALLAZIONE DEL SOFTWARE... 3 COLLEGAMENTO AD UN

Dettagli

Manuale TeamViewer Manager 6.0

Manuale TeamViewer Manager 6.0 Manuale TeamViewer Manager 6.0 Revisione TeamViewer 6.0-954 Indice 1 Panoramica... 2 1.1 Informazioni su TeamViewer Manager... 2 1.2 Informazioni sul presente Manuale... 2 2 Installazione e avvio iniziale...

Dettagli

Personalizzazione del PC

Personalizzazione del PC È la prima volta che utilizzi Windows 7? Anche se questa versione di Windows è molto simile a quella precedente, potrebbero tornarti utili alcune informazioni per partire a razzo. Questa Guida contiene

Dettagli

Installazione del software - Sommario

Installazione del software - Sommario Guida introduttiva Installazione del software - Sommario Panoramica sulla distribuzione del software CommNet Server Windows Cluster Windows - Virtual Server CommNet Agent Windows Cluster Windows - Virtual

Dettagli

QuarkXPress 9.5.2 - Leggimi

QuarkXPress 9.5.2 - Leggimi QuarkXPress 9.5.2 - Leggimi INDICE Indice QuarkXPress 9.5.2 - Leggimi...4 Requisiti di sistema...5 Requisiti di sistema: Mac OS...5 Requisiti di sistema: Windows...5 Installazione: Mac OS...7 Esecuzione

Dettagli

NetSpot Console Manuale dell'utente

NetSpot Console Manuale dell'utente NetSpot Console Manuale dell'utente NetSpot Console Prefazione Questo manuale contiene le descrizioni di tutte le funzioni e delle istruzioni operative per NetSpot Console. Si consiglia di leggerlo con

Dettagli

CAPITOLO 13 Creazione di filmati stampabili

CAPITOLO 13 Creazione di filmati stampabili 13 CAPITOLO 13 Creazione di filmati stampabili... Dopo avere creato interattività nel filmato Flash, è possibile definire come stampabili determinati fotogrammi del filmato Flash affinché altri utenti

Dettagli

Benvenuti in SnagIt. Questa Guida introduttiva è stata realizzata utilizzando SnagIt, l'editor di SnagIt e SnagIt Studio. Guida Introduttiva

Benvenuti in SnagIt. Questa Guida introduttiva è stata realizzata utilizzando SnagIt, l'editor di SnagIt e SnagIt Studio. Guida Introduttiva Guida Introduttiva Benvenuti in Grazie per avere acquistato. è l'applicazione primaria da utilizzare per tutte le esigenze di cattura dello schermo. Tutto quello che appare sullo schermo può essere catturato

Dettagli

L ACCESSIBILITÀ DEI DOCUMENTI ELETTRONICI - parte terza

L ACCESSIBILITÀ DEI DOCUMENTI ELETTRONICI - parte terza L ACCESSIBILITÀ DEI DOCUMENTI ELETTRONICI - parte terza CREARE FILE PDF ACCESSIBILI E FLESSIBILI di Livio Mondini Questi semplici documenti non pretendono di essere un manuale esaustivo per la creazione

Dettagli

Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Quinta lezione) Unitre Pavia a.a.

Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Quinta lezione) Unitre Pavia a.a. Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Quinta lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 Adobe Dreamweaver http://www.adobe.com/it/products/dreamweaver/features/?view=topnew

Dettagli

Adobe è un marchio registrato di Adobe Systems Incorporated negli Stati Uniti e negli altri paesi.

Adobe è un marchio registrato di Adobe Systems Incorporated negli Stati Uniti e negli altri paesi. Guida introduttiva Le informazioni contenute nel presente documento, inclusi URL e altri riferimenti a siti Web Internet, sono soggette a modifiche senza preavviso. Se non specificato diversamente, ogni

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Macromedia Flash. Realizzato da Emanuela Scionti

Macromedia Flash. Realizzato da Emanuela Scionti Macromedia Flash Realizzato da Emanuela Scionti Introduzione Utilizzato per creare applicazioni interattive sofisticate per il Web Utilizzato per creare CD-ROM Mezzo ideale per liberare la propria fantasia

Dettagli

Manuale dell utente Ulead Systems, Inc. Gennaio 2005. DVD MovieFactory

Manuale dell utente Ulead Systems, Inc. Gennaio 2005. DVD MovieFactory Manuale dell utente Ulead Systems, Inc. Gennaio 2005 DVD MovieFactory Ulead DVD MovieFactory versione 4 2000-2005 Ulead Systems, Inc. Tutti i diritti riservati. Non è possibile riprodurre o trasmettere

Dettagli

Caratteristiche principali Supporto nativo per videocamere RED ora disponibile*

Caratteristiche principali Supporto nativo per videocamere RED ora disponibile* Caratteristiche principali Supporto nativo per videocamere RED ora disponibile* Il nuovo plug-in RED crea il flusso di lavoro più veloce, più flessibile e della migliore qualità possibile per la produzione

Dettagli

FileMaker Pro 13. Guida alla configurazione dell installazione in rete

FileMaker Pro 13. Guida alla configurazione dell installazione in rete FileMaker Pro 13 Guida alla configurazione dell installazione in rete 2007-2013 FileMaker, Inc. Tutti i diritti riservati. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 Stati Uniti

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

unità di misura usata in informatica

unità di misura usata in informatica APPUNTI PER UTILIZZARE WINDOWS SENZA PROBLEMI a cura del direttore amm.vo dott. Nicola Basile glossario minimo : terminologia significato Bit unità di misura usata in informatica byte Otto bit Kilobyte

Dettagli

QL-500 QL-560 QL-570 QL-650TD QL-1050

QL-500 QL-560 QL-570 QL-650TD QL-1050 QL-500 QL-560 QL-570 QL-650TD QL-1050 Guida di installazione del software Italiano LB9155001 Introduzione Caratteristiche P-touch Editor Driver stampante P-touch Address Book (solo Windows ) Consente di

Dettagli

TeamViewer 9 Manuale Manager

TeamViewer 9 Manuale Manager TeamViewer 9 Manuale Manager Rev 9.1-03/2014 TeamViewer GmbH Jahnstraße 30 D-73037 Göppingen teamviewer.com Panoramica Indice Indice... 2 1 Panoramica... 4 1.1 Informazioni su TeamViewer Manager... 4 1.2

Dettagli

Nuovo documento Anteprima di stampa Collegamento Zoom. Apri Controllo ortografico Annulla Sorgente dati. Salva Controllo automatico Ripristina Gallery

Nuovo documento Anteprima di stampa Collegamento Zoom. Apri Controllo ortografico Annulla Sorgente dati. Salva Controllo automatico Ripristina Gallery Writer è il programma per l'elaborazione di testi della suite OpenOffice.org che ti consente di creare documenti, lettere, newsletter, brochures, grafici, etc. Gli elementi dello schermo: Di seguito le

Dettagli

Componenti multimediali per il Web. Modulo 14

Componenti multimediali per il Web. Modulo 14 Componenti multimediali per il Web Modulo 14 Obiettivi Valutare e usare strumenti di utilità e produzione grafica anche animata per inserire e modificare componenti multimediali (immagini, immagini animate,

Dettagli

Utilizzo di ADOBE DEVICE CENTRAL CS5 e CS5.5

Utilizzo di ADOBE DEVICE CENTRAL CS5 e CS5.5 Utilizzo di ADOBE DEVICE CENTRAL CS5 e CS5.5 Informazioni legali Informazioni legali Per le informazioni legali, vedete http://help.adobe.com/it_it/legalnotices/index.html. iii Sommario Capitolo 1: Novità

Dettagli

Guida di riferimento rapido Benvenuti in ScanSoft PDF Converter Professional

Guida di riferimento rapido Benvenuti in ScanSoft PDF Converter Professional Guida di riferimento rapido Benvenuti in ScanSoft PDF Converter Professional ScanSoft PDF Converter Professional 3 offre la funzionalità completa per la gestione dei file PDF (Portable Document Format).

Dettagli

Capitolo 16 Creare pagine web:

Capitolo 16 Creare pagine web: Guida introduttiva Capitolo 16 Creare pagine web: salvare documenti in formato HTML OpenOffice.org Copyright Il presente documento è rilasciato sotto Copyright 2005 dei collaboratori elencati nella sezione

Dettagli

Requisiti di sistema. Risorse per imparare a usare Fireworks. Installazione e avvio di Fireworks

Requisiti di sistema. Risorse per imparare a usare Fireworks. Installazione e avvio di Fireworks INTRODUZIONE Fireworks 3 è la soluzione per la progettazione e la realizzazione di grafici Web di qualità professionale. Si tratta del primo ambiente di produzione in grado di risolvere i problemi specifici

Dettagli

PaperPort 12 comprende molte nuove e utili funzioni che consentono di gestire i documenti.

PaperPort 12 comprende molte nuove e utili funzioni che consentono di gestire i documenti. Benvenuti! Nuance PaperPort è un pacchetto software desktop per la gestione di documenti che consente di acquisire, organizzare, accedere, condividere e gestire i documenti cartacei e digitali sul personal

Dettagli

3. La schermata principale

3. La schermata principale 3. La schermata principale 3.1 Schermata principale Dopo avere acceso il dispositivo, è visualizzata la schermata principale bloccata. La schermata è bloccata per impostazione predefinita. Per sbloccare

Dettagli

Manuale dell'utente di Norton AntiVirus per Mac

Manuale dell'utente di Norton AntiVirus per Mac Manuale dell'utente Prendersi cura dell'ambiente è la cosa giusta da fare. Per ridurre l'impatto sull'ambiente dei nostri prodotti, Symantec ha rimosso la copertina di questo manuale. Questo manuale è

Dettagli

FileMaker Server 13. Guida alla configurazione dell'installazione in rete

FileMaker Server 13. Guida alla configurazione dell'installazione in rete FileMaker Server 13 Guida alla configurazione dell'installazione in rete 2007-2013 FileMaker, Inc. Tutti i diritti riservati. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 Stati

Dettagli

Funzioni principali di Dropbox

Funzioni principali di Dropbox ICT Rete Lecco Generazione Web - Progetto FARO Dropbox "Un luogo per tutti i tuoi file, ovunque ti trovi" Dropbox è il servizio di cloud storage più popolare, uno tra i primi a fare la sua comparsa nel

Dettagli