Guida Introduttiva Di FW MX

macromedia

™

®

Guida introduttiva diFireworks MX

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 ed Xtra sono marchi di Macromedia, Inc. e possono essere registrati negli Stati Uniti o presso altre giurisdizioni, anche a livello internazionale. Altri nomi di prodotti, logo, progetti, titoli, parole o frasi riportati in questa pubblicazione possono essere marchi, nomi di servizi o denominazioni commerciali di Macromedia, Inc. o di altre società registrati presso alcune giurisdizioni, anche a livello internazionale.

Questo manuale contiene collegamenti ai siti Web di terze parti che non sono sotto il controllo di Macromedia. Macromedia non potrà quindi essere ritenuta responsabile per i contenuti di qualsiasi sito collegato. Qualora si decida di accedere a un sito Web di terze parti menzionato in questo documento, lo si farà sotto la propria completa responsabilità e a proprio rischio. Macromedia fornisce questi collegamenti solo per comodità dell’utente e l’inclusione del collegamento non implica che Macromedia sottoscriva o accetti qualsiasi responsabilità per i contenuti di tali siti di terze parti.

Limitazioni di responsabilità Apple

LA APPLE COMPUTER, INC. NON FORNISCE ALCUNA GARANZIA, ESPLICITA O IMPLICITA, RIGUARDO AL PAC-CHETTO SOFTWARE ACCLUSO, ALLA SUA COMMERCIABILITÀ O ALLA SUA IDONEITÀ PER SCOPI SPECIFICI. L’ESCLUSIONE DELLE GARANZIE IMPLICITE NON È CONSENTITA IN ALCUNI STATI. TALE ESCLUSIONE PUÒ NON RIFERIRSI AL CASO SPECIFICO. LA PRESENTE GARANZIA ASSICURA ALL’UTENTE ALCUNI DIRITTI LEGALI SPECIFICI. L’UTENTE PUÒ GODERE DI ALTRI DIRITTI CHE VARIANO DA STATO A STATO.

Fireworks è una creazione della Macromedia, Inc. © 2002. Tutti i diritti riservati. Brevetti U.S.A 5.353.396, 5.361.333, 5.434.959, 5.467.443, 5.500.927, 5.594.855 e 5.623.593. Parti del software concesse in licenza con il brevetto U.S.A. n. 4,558,302 e controparti straniere. Altri brevetti in corso. Copyright parziale 1988, 2000 Aladdin Enterprises. Tutti i diritti riservati. Questo software è basato in parte sul lavoro dell’Independent JPEG Group. Copyright parziale 1998 Soft Horizons. Tutti i diritti riservati. Nessuna parte del presente manuale, singola o completa, può essere copiata, fotocopiata, riprodotta, tradotta o convertita in forma elettronica o leggibile da apparecchiature apposite senza previa autorizzazione scritta da parte di Macromedia, Inc. Numero di parte ZFW60M100IT

Riconoscimenti

Scritto da Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price

Editor: Rosana Francescato

Gestione progetto di Stuart Manning

Produzione di Caroline Branch, John Francis, Patrice O'Neill

Responsabile produzione versioni localizzate: Masayo Noda

Responsabile di localizzazione: Sami Kaied

Project manager di localizzazione: Gloria Figueroa

Fotografia di Chris Basmajian

Multimedia: Aaron Begley

Prima edizione: giugno 2002

Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

SOMMARIO

INTRODUZIONE

Guida introduttiva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Requisiti di sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Installazione di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Nuove funzionalità di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

CAPITOLO 1

Esercitazione di progettazione grafica di base . . . . . . . . . . . . . . . . . . . . . . . . 13Argomenti trattati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13È bene sapere che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Copia del file Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Visualizzazione del file dell’esercitazione nella sua forma completa . . . . . . . . . . . . . . . . 14Creazione e salvataggio di un nuovo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Introduzione all’ambiente di lavoro di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Creazione e modifica di oggetti vettoriali. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Importazione di una bitmap e selezione di pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Aggiunta e modifica di effetti dal vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Operazioni con livelli e oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Creazione e modifica di una maschera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Creazione e modifica di un testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Esportazione del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Argomenti successivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

CAPITOLO 2

Esercitazione di progettazione grafica Web . . . . . . . . . . . . . . . . . . . . . . . . . . 41Argomenti trattati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41È bene sapere che . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Copia del file Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Vista della pagina Web completata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Apertura del file di origine. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Importazione di un’immagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Suddivisione in porzioni di un documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Creazione di un rollover trascina e rilascia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Creazione e modifica di pulsanti per la creazione di una barra di navigazione . . . . . . . . 50Creazione e modifica di un menu a comparsa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Ottimizzazione del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Esportazione HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Test del file completato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Argomenti successivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

3

CAPITOLO 3

Informazioni di base su Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Informazioni sulla grafica vettoriale e bitmap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Informazioni sulle operazioni in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Creazione di un nuovo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Apertura e importazione dei file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Salvataggio dei file di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Lo spazio di lavoro di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Modifica dell’area di lavoro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

CAPITOLO 4

Uso di Fireworks con altre applicazioni. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Operazioni con Macromedia Dreamweaver MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Operazioni con Macromedia Flash MX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Operazioni con Macromedia FreeHand. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Operazioni con Macromedia Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Operazioni con Macromedia HomeSite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Operazioni con Microsoft FrontPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133Operazioni con Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136Informazioni sulle operazioni con Adobe GoLive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Informazioni sulle operazioni con gli editor di HTML . . . . . . . . . . . . . . . . . . . . . . . . 140

INDICE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Sommario4

INTRODUZIONE

Guida introduttiva

Macromedia Fireworks MX è la soluzione per la progettazione e la realizzazione di elementi grafici Web di qualità professionale. Si tratta del primo ambiente di produzione in grado di affrontare e risolvere i problemi specifici dei Web designer e degli sviluppatori.

Fireworks permette infatti di creare, modificare e animare gli elementi grafici per il Web, aggiungere interattività avanzata e ottimizzare le immagini in un ambiente professionale. In Fireworks è possibile creare e modificare immagini di grafica bitmap e vettoriale utilizzando un’unica applicazione. In Fireworks, qualsiasi elemento è modificabile, in ogni momento. Inoltre si può automatizzare il flusso di lavoro per rispondere alle esigenze degli aggiornamenti e delle modifiche.

Fireworks si integra con gli altri prodotti Macromedia come Dreamweaver, Flash, FreeHand e Director, nonché altre diffuse applicazioni grafiche ed editor di HTML, per fornire una soluzione Web realmente integrata. È possibile esportare agevolmente gli elementi grafici di Fireworks con codice personalizzato per l’editor HTML in uso e JavaScript.

Requisiti di sistema Prima di installare Fireworks, accertarsi che il computer soddisfi i seguenti requisiti hardware e software.

Per Microsoft Windows™

• Processore Intel ® Pentium ® II a 300 MHz

• Windows 98 SE, ME, NT® 4 (con Service Pack 6), 2000 o XP

• 64 MB di RAM (consigliati 128 MB) più 80 MB di spazio disponibile su disco

• Risoluzione 800 x 600 pixel, monitor con 256 colori o migliore

• Adobe Type Manager® Versione 4 o versione successiva per l’uso dei caratteri Type 1

• Unità CD-ROM

Per Macintosh®

• Processore Power Macintosh G3, con OS 9.1 o versione successiva o OS X versione 10.1 o versione successiva

• 64 MB di RAM (consigliati 128 MB) più 80 MB di spazio disponibile su disco

• Risoluzione 800 x 600 pixel, monitor con 256 colori o migliore

• Adobe Type Manager 4 o versione successiva per l’uso dei caratteri Type 1 (solo OS 9.x)

• Unità CD-ROM

5

Installazione di Fireworks Leggere il documento Leggimi nel CD-ROM di Fireworks per mettersi al corrente sulle informazioni e istruzioni più recenti.

Per installare Fireworks:

1 Inserire il CD-ROM di Fireworks nell’unità CD-ROM del computer.

2 Eseguire una delle seguenti procedure:

• In Windows, il programma di installazione di Fireworks si avvia in genere automaticamente. In caso contrario, scegliere Start > Esegui. Fare clic su Sfoglia e scegliere il file Setup.exe sul CD di Fireworks. Fare clic su OK nella finestra di dialogo Esegui.

• In ambiente Macintosh, fare doppio clic sull’icona del programma di installazione di Fireworks.

3 Seguire le istruzioni a video.

Il programma di installazione richiederà di immettere le informazioni necessarie.

4 Se richiesto, riavviare il computer.

Esecuzione di Fireworks su sistemi connessi in rete

Macromedia utilizza la funzione di rilevamento delle licenze di rete per impedire l’esecuzione di copie di Fireworks con lo stesso numero di serie supiù sistemi collegati in rete locale.

Se si tenta di eseguire Fireworks quando un numero di utenti maggiore di quello consentito dalla licenza sta eseguendo Fireworks sulla stessa rete, si riceverà un messaggio che informa sulla limitazione della licenza.

Se si ritiene che tale messaggio sia stato ricevuto per errore, oppure si desidera richiedere licenze supplementari per il prodotto, contattare l’assistenza tecnica Macromedia all’indirizzo http://www.macromedia.com/it/support/email/cs/.

Visualizzazione dei file installati con Fireworks

A un certo punto può risultare necessario visualizzare o accedere ai file installati con Fireworks. Durante l’installazione, Fireworks colloca i file in varie ubicazioni del sistema. È importante capire dove tali file risiedono e il motivo. Per ulteriori informazioni, consultare la guida in linea di Fireworks selezionando Guida > Uso di Fireworks. In Mac OS X, scegliere Guida > Guida Fireworks).

Gli utenti Macintosh devono prestare particolare attenzione al nuovo formato adottato da Fireworks per memorizzare l’applicazione e i relativi file di configurazione predefiniti. Per ulteriori informazioni, consultare la Guida Fireworks.

Apprendimento di Fireworks

Per imparare a usare Fireworks sono disponibili numerose risorse, fra cui il manuale rapido su supporto cartaceo (Guida introduttiva di Fireworks MX), un sistema di guida in linea che può essere lanciato dall’applicazione, una versione PDF della documentazione completa di Fireworks e diverse fonti di informazione basate sul Web.

La guida in linea di Fireworks è disponibile quando l’applicazione è attiva e contiene la documentazione completa del programma. Per aprire la guida in linea di Fireworks, scegliere Guida > Uso di Fireworks. In Mac OS X, scegliere Guida > Guida Fireworks.

Introduzione6

Le esercitazioni di Fireworks sono un’introduzione interattiva alle funzionalità principali di Fireworks, che richiedono circa un’ora di tempo ciascuna. Includono le operazioni maggiormente utilizzate di Fireworks come l’uso di strumenti di disegno e di editing, l’ottimizzazione delle immagini e la creazione di elementi interattivi come rollover e barre di navigazione.

Nel pannello Risposte è possibile trovare in un’unica ubicazione le esercitazioni, le Note tecniche e le informazioni più aggiornate su Fireworks. Il pannello Risposte è dinamico: con un semplice clic su un pulsante è possibile visualizzare gli aggiornamenti e le informazioni più recenti su Fireworks direttamente da Macromedia.

L’applicazione Fireworks contiene molte finestre di dialogo e descrizioni comandi progettate specificamente per assistere l’utente nell’utilizzo del programma. Le descrizioni comandi vengono visualizzate quando si arresta il puntatore su uno degli elementi dell’interfaccia utente.

Guida introduttiva di Fireworks MX è composto da una serie di capitoli che riguardano le funzioni base di Fireworks.

Il PDF Uso di Fireworks MX è un documento contenente la documentazione completa di Fireworks, che può essere stampato e permette la ricerca. Il PDF è disponibile sul CD di installazione e sul sito Web Macromedia all’indirizzo http://www.macromedia.com/it/.

Il sito Web Macromedia viene aggiornato regolarmente per rendere sempre disponibili le ultime informazioni su Fireworks, oltre a consigli di utenti esperti, argomenti avanzati, esempi, suggerimenti e aggiornamenti. Entrare nel sito Web Macromedia per reperire notizie su Fireworks e su come sfruttare al massimo le funzionalità offerte dal programma all’indirizzo http://www.macromedia.com/it/support/.

Il gruppo di discussione su Fireworks consente di scambiare informazioni con gli utenti di Fireworks, i rappresentanti dell’assistenza tecnica e il team di sviluppo di Fireworks. Avvalersi di un lettore di newsgroup e accedere all’indirizzo news://forums.macromedia.com/macromedia.fireworks.

Il documento Extending Fireworks MX comprende informazioni su come scrivere codice JavaScript per automatizzare le operazioni in Fireworks. È possibile controllare ogni comando o impostazione di Fireworks con speciali comandi JavaScript che Fireworks è in grado di interpretare. Una versione PDF di Extending Fireworks MX è disponibile sul CD e sul sito Web Macromedia all’indirizzo http://www.macromedia.com/support/fireworks/extend.html.

Registrazione di Fireworks

Per ottenere assistenza Macromedia supplementare, è consigliabile registrare la propria copia di Macromedia Fireworks, elettronicamente o per posta.

Con la registrazione si verrà inseriti nella lista di priorità, che consentirà di ricevere informazioni in tempo reale riguardanti gli aggiornamenti e i nuovi prodotti Macromedia. Si riceveranno informazioni tempestive via E-mail sugli aggiornamenti ai prodotti e sulle novità visualizzate presso i siti www.macromedia.com e www-euro.macromedia.com.

Per registrare la propria copia di Fireworks, eseguire una delle seguenti procedure:

• Scegliere Guida > Registrazione in linea e compilare il modulo elettronico.

• Scegliere Guida > Stampa registrazione, stampare il modulo e inviarlo all’indirizzo indicato su di esso.

Guida introduttiva 7

Nuove funzionalità di Fireworks Grazie alle nuove funzionalità presenti, Fireworks MX risulta sempre più un’applicazione user-friendly dotata di maggiori potenzialità per la creazione di elementi grafici e interattività per i siti Web. Fireworks MX consente la massima produttività ai designer del Web più esperti, agli sviluppatori HTML che lavorano anche con elementi grafici e agli sviluppatori del Web alle prime armi, i quali necessitano di realizzare pagine Web interattive e ricche di immagini grafiche, pur avendo una scarsa conoscenza della codifica e del linguaggio JavaScript.

Fireworks MX è stato sottoposto a un radicale intervento di perfezionamento, con un’interfaccia utente semplificata, pulsanti e menu a comparsa più potenti e strumenti bitmap e vettoriali intuitivi. L’integrazione con altre applicazioni Macromedia, oltre che con applicazioni di terze parti, consente di riportare agevolmente in Fireworks file di formati diversi e di inviarli facilmente ad altre applicazioni mentre si lavora. Un’altra novità di Fireworks è rappresentata dalla capacità di creazione di comandi JavaScript con Macromedia Flash, che appaiono in Fireworks MX come pannelli o finestre di dialogo.

Funzionalità di facile utilizzo

Grazie ad un ambiente semplice e intuitivo, composto da una finestra di ispezione Proprietà e da strumenti le cui funzioni corrispondono esattamente alle esigenze dei professionisti, Fireworks MX risulta un’applicazione semplice e rapida da imparare e da utilizzare. Fireworks MX si presenta con un aspetto rinnovato, meglio organizzato e più coerente con le altre applicazioni di Macromedia MX Studio.

Il miglioramento della gestione pannelli comprende la capacità di collocare i pannelli in gruppi e quindi di comprimere i gruppi in modo che sia visibile solo la barra del titolo del gruppo di pannelli, finché sarà necessario utilizzare i pannelli. È possibile agganciare il gruppo di pannelli a un’apposita area di aggancio per organizzare lo spazio di lavoro, oppure trascinare gruppi o singoli pannelli da un punto all’altro dello spazio di lavoro. Per ulteriori informazioni, consultare “Organizzazione dei gruppi di pannelli e dei pannelli” a pagina 86.

La finestra di ispezione Proprietà è un pannello dinamico contenente numerose opzioni che variano a seconda delle operazioni eseguite. Aprendo un documento, la finestra di ispezione Proprietà visualizza le proprietà del documento in oggetto, come ad esempio il colore e le dimensioni dell’area di lavoro. Scegliendo uno strumento del pannello Strumenti, la finestra di ispezione Proprietà visualizza le opzioni dello strumento. Selezionando un oggetto vettoriale, essa visualizza informazioni di tratto e riempimento.

È possibile modificare tali opzioni ed altre, tra cui gli effetti dal vivo, le modalità di fusione e l’opacità, direttamente dalla finestra di ispezione Proprietà, anziché dover fare clic per aprire o attivare un pannello dopo l’altro. La finestra di ispezione Proprietà, già conosciuta dagli utenti di Macromedia Dreamweaver e Flash, riduce il numero di pannelli presenti nello spazio di lavoro. Per ulteriori informazioni, consultare “Uso della finestra di ispezione Proprietà” a pagina 84.

La modifica bitmap e vettoriale indipendente dalla modalità elimina la necessità di passare costantemente tra modalità bitmap e modalità vettoriale. Scegliendo uno strumento o selezionando un tipo di oggetto, il programma stabilisce automaticamente se verranno creati e modificati vettori, bitmap o testo.

I miglioramenti della modifica bitmap consentono di usufruire di funzionalità intuitive per la creazione di immagini bitmap mediante le funzioni di taglio o di copia e incolla, per lo spostamento di selezioni perimetro tra le bitmap e per la messa a punto delle immagini con un nuovo gruppo di strumenti di ritocco. Inoltre, i tradizionali comandi di selezione sono organizzati in un nuovo menu Selezione.

Introduzione8

Le sezioni del pannello Strumenti, che separano gli strumenti utilizzati per la creazione e la modifica di bitmap, vettori e oggetti per il Web, offrono suggerimenti per la scelta intuitiva dello strumento più appropriato e per ottenere risultati creativi senza imprevisti. Altri strumenti e funzioni sono raggruppati nelle categorie Seleziona, Colori e Visualizza. Per ulteriori informazioni, consultare “Uso del pannello Strumenti” a pagina 83.

Il pulsante Esportazione rapida consente di visualizzare pratiche opzioni per l’esportazione in una serie di formati di file o stili HTML, oppure per lanciare altri prodotti Macromedia dalla finestra del documento, eliminando i tempi di configurazione e semplificando le operazioni. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Il testo a video consente di integrare visivamente testo ed elementi grafici senza dover utilizzare l’Editor di testo. È sufficiente selezionare lo strumento Testo, fare clic sull’area di lavoro e iniziare a digitare. Nella finestra di ispezione Proprietà, è possibile impostare gli attributi del testo per lo strumento Testo prima di iniziare a digitare, oppure evidenziare il testo esistente e formattarlo. Fireworks MX dispone di una serie di nuovi comandi di testo e paragrafo che consentono di formattare il testo. Per ulteriori informazioni, consultare la guida in linea di Fireworks.

Lo zoom variabile permette di trascinare lo strumento Ingrandimento in modo da determinare la precisa entità dell’ingrandimento. Dopo aver trascinato lo strumento per ingrandire il documento, l’entità dell’ingrandimento viene visualizzata nella casella di testo Imposta ingrandimento nella parte inferiore del documento.

La compatibilità con Windows XP e Macintosh OS X sfrutta i sistemi operativi più recenti. Fireworks MX è specificamente ottimizzato per supportare tutti i miglioramenti dell’interfaccia utente OS X.

L’esportazione XHTML consente di esportare, aggiornare e reimportare XHTML con gli stessi stili offerti da Fireworks per HTML. È possibile gestire documenti legacy che sono stati convertiti in XHTML in Dreamweaver MX.

Il pannello Risposte, una nuova funzione di Fireworks MX, Dreamweaver MX e Flash MX, è un link aggiornabile in base al contenuto del Web, collocato nello spazio di lavoro di Fireworks per una maggiore praticità. È possibile fare clic sul pulsante Aggiorna quando si è in linea e scaricare le più recenti informazioni di riferimento da Macromedia, oppure ricercare all’interno di database in linea documentazioni come Note tecniche.

Il controllo ortografico permette di ricercare all’interno di ogni blocco di testo del documento parole con ortografia errata. Se viene individuata una parola non riconosciuta, il programma propone suggerimenti per correggerla o permette di aggiungerla al proprio dizionario personale.

La memorizzazione nella cache dei caratteri di più piattaforme agevola la condivisione di file tra gruppi di lavoro e client, senza doversi preoccupare dei problemi derivanti dall’uso di caratteri di vari sistemi. Fireworks mantiene inalterato l’aspetto di tutto il testo di un documento nei sistemi in cui non sono installati i caratteri all’interno del documento.

Funzionalità potenziate

Fireworks MX dispone di una serie di nuove e potenti funzioni di creatività e automatizzazione di grande utilità sia per i nuovi Web designer che per gli sviluppatori più esperti. Grazie a tali funzioni, Fireworks risulta essenziale per il lavoro del designer del Web e dello sviluppatore, dalla fase di concetto alla fase di integrazione.

La procedura guidata per la grafica basata sui dati consente di assegnare variabili a testo, immagini, punti attivi e porzioni e quindi di generare documenti multipli basati sull’originale, ciascuno con informazioni esclusive ricavate da un file delimitato da una virgola o da un file di database XML.


La funzione di creazione di barre di navigazione nel menu Comandi permette di automatizzare il processo di creazione rapida delle barre di navigazione con l’uso di pratici simboli di pulsanti di Fireworks MX. È possibile selezionare un esempio di simbolo di pulsante e quindi scegliere il numero di copie da realizzare, l’orientamento verticale o orizzontale e la spaziatura, quindi assegnare etichette di pulsanti e indirizzi URL in una finestra di dialogo integrata.

I miglioramenti apportati all’Editor menu a comparsa hanno permesso di aggiungere un controllo creativo alle nuove e più comuni funzioni di Fireworks 4. Ora è possibile creare un menu a comparsa orizzontale o verticale e determinare le caratteristiche dei margini, la spaziatura e le dimensioni delle celle indipendentemente dalla dimensione del testo. È possibile inoltre impostare il posizionamento dei menu in base all’oggetto di innesco, nonché il posizionamento dei sottomenu in base alla voce di menu di innesco o al menu a comparsa principale. Fireworks genera automaticamente il codice JavaScript; i menu esportati sono completamente compatibili con Dreamweaver MX. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

La modifica dei simboli dei pulsanti a livello di istanza consente di creare un simbolo di pulsante e quindi di differenziare facilmente tra un pulsante e l’altro con l’inserimento di testo esclusivo, URL e obiettivi mediante la finestra di ispezione Proprietà. Allo stesso tempo, è possibile modificare altre caratteristiche grafiche a livello di simbolo e fare in modo che le modifiche vengano apportate a tutte le istanze di pulsanti senza compromettere le proprietà a livello istanza. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Flusso di lavoro aperto

È importante non essere vincolati dal flusso di lavoro di altri utenti. Con Fireworks MX, è possibile integrare la produzione grafica nel processo di sviluppo grazie a 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 fanno sì che la creazione dei comandi JavaScript raggiunga livelli più elevati. Gli sviluppatori possono creare ed eseguire comandi complessi in modo da estendere ed automatizzare Fireworks MX combinando l’API di estensibilità JavaScript di Fireworks con interfacce sviluppate in Flash MX utilizzando componenti e ActionScript. Per ulteriori informazioni, consultare Extending Fireworks MX, disponibile in formato PDF sul CD di installazione e all’indirizzo http://www.macromedia.com/support/fireworks/extend.html.

Il supporto Macromedia Exchange indica che è possibile scaricare comandi creati dagli utenti da Exchange, anche se non si è interessati alla creazione di comandi JavaScript. I comandi appaiono nello spazio di lavoro di Fireworks MX come pannelli o finestre di dialogo di semplice utilizzo. Fireworks MX viene fornito con numerosi comandi creati dall’utente nel menu Comandi e un pannello Allineamento creato dall’utente nel menu Finestra.

I comandi di layout delle tabella di porzioni consentono di definire e ottimizzare i layout delle tabelle di porzioni trascinando le guide porzione. Fireworks ridimensiona automaticamente le porzioni collegate, aggiungendo ed eliminando porzioni a seconda delle necessità. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

La funzione Ricostituisci tabella crea immediatamente un nuovo file sorgente PNG di Fireworks ogni volta che si orienta il puntatore su un qualsiasi file HTML contenente tabelle con porzioni di immagini. I comportamenti di Macromedia Fireworks e Dreamweaver come i rollover immagini e i menu a comparsa vengono importati e collegati alle porzioni appropriate.

Introduzione10

Questa funzione risulta di particolare utilità quando si lavora su progetti di siti Web già esistenti e i soli file disponibili sono le pagine HTML disponibili online. È possibile portare i file HTML in Fireworks e creare file sorgente PNG da essi. Per ulteriori informazioni, consultare “Creazione di file PNG di Fireworks da file HTML” a pagina 77.

La piena compatibilità e modificabilità del testo di Photoshop 6 permette di aprire un file di Photoshop 6 o 7 lasciando intatto il testo modificabile. In tal modo è possibile modificare e quindi riesportare gli elementi grafici nel formato Photoshop, pur mantenendo l’aspetto corretto del testo e la sua piena modificabilità. Per ulteriori informazioni, consultare “Informazioni sull’importazione di testo da Photoshop” a pagina 137.

La piena compatibilità con Microsoft FrontPage è disponibile con un semplice clic sul pulsante Esportazione rapida. Le tabelle di avvio e modifica intervengono sul file originale in Fireworks: le tabelle vengono aggiornate in FrontPage senza che le modifiche di codici apportate in FrontPage vadano perdute. Per ulteriori informazioni, consultare “Esportazione dell’HTML di Fireworks a FrontPage” a pagina 134.

L’integrazione di Macromedia Sitespring consente di introdurre nello spazio di lavoro di Fireworks MX le migliori pratiche di produzione e gestione dei clienti. È sufficiente scegliere Finestra > Sitespring per aprire la finestra Sitespring. Per ulteriori informazioni, consultare la documentazione Sitespring.


Introduzione12

CAPITOLO 1

Esercitazione di progettazione grafica di base

Questa esercitazione guida l’utente nell’applicazione delle funzioni base della progettazione grafica con Macromedia Fireworks MX. Con l’uso dell’applicazione leader nel settore della grafica Web l’utente acquista esperienza pratica e apprende i concetti base di progettazione grafica.

Se si è già in possesso di una certa esperienza con la progettazione grafica di Fireworks, è possibile passare al capitolo “Esercitazione di progettazione grafica Web” a pagina 41, attraverso il quale si apprenderà a disegnare pagine Web con Fireworks.

Argomenti trattatiL’esercitazione insegna, in meno di un’ora, ad eseguire le operazioni necessarie per creare con Fireworks un messaggio pubblicitario per il noleggio di auto d’epoca. L’utente apprenderà ad eseguire le seguenti operazioni:

• Copia del file Tutorials

• Visualizzazione del file dell’esercitazione nella sua forma completa

• Creazione e salvataggio di un nuovo documento

• Introduzione all’ambiente di lavoro di Fireworks

• Creazione e modifica di oggetti vettoriali

• Importazione di una bitmap e selezione di pixel

• Aggiunta e modifica di effetti dal vivo

• Operazioni con livelli e oggetti

• Creazione e modifica di una maschera

• Creazione e modifica di un testo

• Esportazione del documento

È bene sapere chePur essendo destinata ai nuovi utenti di Fireworks, l’esercitazione tratta numerose nuove funzioni del programma quindi può essere di vantaggio anche agli utenti già esperti di Fireworks. Per seguire questa esercitazione non occorre essere graphic designer professionisti, tuttavia è necessario essere in possesso delle capacità di base nell’uso del computer e delle comuni applicazioni desktop. Con questo si intende essere in grado di eseguire ricerche di file e cartelle nel disco fisso.

13

Copia del file TutorialsPrima di iniziare si raccomanda di copiare la cartella Tutorials, in modo da poter di volta in volta salvare i risultati del proprio lavoro e mantenere la possibilità per sè stessi e altri di completare il lavoro in un momento successivo sui file originali.

1 Portarsi sulla cartella dell’applicazione Fireworks sul disco fisso del computer.

Nota: Se la cartella dell’applicazione Fireworks non è visualizzata è possibile che l’utente abbia accesso limitato ai file sul sistema. I file necessari per eseguire questa esercitazione possono essere scaricati dal sito Fireworks Support Center all’indirizzo http://www.macromedia.com/it/support/.

2 Trascinare sul desktop una copia della cartella Tutorials.

Visualizzazione del file dell’esercitazione nella sua forma completaVisualizzare il file dell’esercitazione nella sua forma completa per osservare l’aspetto che avrà il progetto una volta ultimato.

1 Aprire il browser Web.

2 Portarsi sulla cartella dell’applicazione Fireworks copiata sul deskktop e selezionare Tutorial1/Complete.

Nota: Alcune versioni di Microsoft Windows non visualizzano, per impostazione predefinita, le estensioni per alcuni tipi di file comuni. Se questa impostazione non è stata modificata, l’estensione dei file nella cartella Complete non verrà visualizzata. Quando si opera in grafica Web, è consigliabile poter visualizzare l’estensione dei file. Per informazioni su come ripristinare la visualizzazione dell’estensione dei file consultare la Guida di Windows.

3 Selezionare il file final.jpg e trascinarlo sulla finestra aperta del browser.

Nel corso di questa esercitazione si utilizzerà Fireworks per disegnare ed esportare una copia del messaggio pubblicitario per il noleggio di auto d’epoca.

Nota: La cartella Complete comprende anche il documento Fireworks dal quale questo file JPEG file è stato generato. Per visualizzare il documento, fare doppio clic su final.png.

Creazione e salvataggio di un nuovo documentoA questo punto, dopo aver visualizzato il file final.jpg, si è pronti a iniziare il progetto.

1 In Fireworks, scegliere File > Nuovo.

Si aprirà la finestra di dialogo Nuovo documento.

Capitolo 114

2 Immettere 480 per la larghezza e 214 per l’altezza. Controllare che entrambe le misure siano espresse in pixel e che il colore dell’area di lavoro sia bianco, quindi premere OK.

Si aprirà una finestra documento, nella quale la barra del titolo riporta Senza titolo-1.png (Windows) o Senza titolo-1 (Macintosh).

3 Se la finestra del documento non è visualizzata nella dimensione massima, vale a dire se la finestra non ricopre totalmente lo schermo, ingrandire la finestra facendo clic sul pulsante di ingrandimento (Windows) o sulla casella zoom (Macintosh) nella parte superiore della finestra documento. In questo modo si disporrà di un ampio spazio sul quale lavorare.

4 Scegliere File > Salva con nome.

Si aprirà la finestra di dialogo Salva con nome (Windows) oppure la finestra Salva (Macintosh).

5 Portarsi sulla cartella Tutorials/Tutorial1 sul proprio desktop.

6 Denominare il file vintage.

7 Se non ancora selezionata, scegliere l’opzione Aggiungi estensione nome file (solo Macintosh).

8 Fare clic su Salva.

La barra del titolo visualizza il nuovo nome file con estensione PNG. PNG è il formato nativo di Fireworks. Il file PNG sarà il file sorgente, dove verranno eseguite tutte le operazioni con Fireworks. Alla fine di questa esercitazione, si apprenderà come esportare il documento in un altro formato per l’uso sul Web.

Durante la sessione di esercitazione, si consiglia di salvare il lavoro di frequente, selezionando File > Salva.

Nota: Durante l’esercitazione, può risultare utile annullare alcune modifiche apportate. Fireworks consente di annullare diverse modifiche eseguite di recente, a seconda del numero di operazioni di annullamento impostato nelle Preferenze. Per annullare l’ultima modifica apportata, scegliere Modifica > Annulla.

Esercitazione di progettazione grafica di base 15

Introduzione all’ambiente di lavoro di FireworksPrima di continuare, esaminare le funzioni dell’ambiente di lavoro di Fireworks:

• Al centro dello schermo si trova la finestra documento. Al centro della finestra documento si trova l’area di lavoro. L’area di lavoro è il punto in cui vengono visualizzati il documento di Fireworks e i disegni creati.

• Sulla parte superiore dello schermo si trova la barra del menu. La maggior parte dei comandi di Fireworks sono accessibili dalla barra dei menu.

• Sul lato sinistro dello schermo si trova il pannello Strumenti. Se il pannello Strumenti non è visualizzato, scegliere Finestra > Strumenti. Il pannello Strumenti contiene gli strumenti per selezionare, creare e modificare gli elementi grafici nonché gli oggetti per il Web.

• Nella parte inferiore dello schermo si trova la finestra di ispezione Proprietà. Se la finestra di ispezione Proprietà non è visualizzata scegliere Finestra > Proprietà. La finestra di ispezione Proprietà visualizza le proprietà di un oggetto o uno strumento selezionato, modificabili a piacere. Se non sono selezionati oggetti o strumenti, la finestra di ispezione Proprietà visualizza le proprietà del documento.

La finestra di ispezione Proprietà visualizza due o quattro righe di proprietà. Se la finestra di ispezione Proprietà è visualizzata a metà, vale a dire se visualizza solo due righe, è possibile fare clic sulla freccia di espansione nell’angolo inferiore destro, per vedere tutte le proprietà.

Freccia di espansione a metà altezza

Capitolo 116

• Sul lato destro dello schermo sono visualizzati un certo numero di pannelli, come il pannello Livelli o il pannello Ottimizza. Questi e gli altri pannelli possono essere aperti dal menu Finestra.

• Spostare il puntatore sui vari elementi dell’interfaccia. Se il puntatore viene tenuto per alcuni secondi su una voce dell’interfaccia, verrà visualizzata la descrizione dell’elemento selezionato. Le descrizioni identificano gli strumenti, i menu, i pulsanti e altre funzioni dell’interfaccia in tutto il programma. Le descrizioni scompaiono quando il puntatore viene allontanato dagli elementi dell’interfaccia che identificano.

Più avanti nel corso dell’esercitazione si apprenderanno ulteriori informazioni su questi elementi.

Creazione e modifica di oggetti vettorialiCon Fireworks è possibile creare e modificare due tipi di elementi grafici: oggetti vettoriali e immagini bitmap.

Un oggetto vettoriale è la rappresentazione matematica di una forma geometrica. I tracciati vettoriali sono definiti mediante punti. I tracciati vettoriali non mostrano un deterioramento della qualità quando si esegue un ingrandimento oppure quando vengono ridimensionati. La foglia illustrata nell’immagine riportata sotto è un insieme di oggetti vettoriali. Si noti l’uniformità dei bordi della foglia anche quando si esegue uno zoom.

Al contrario, una immagine bitmap è composta da una griglia di pixel colorati. Le immagini con variazioni complesse di colore, come le fotografie, sono spesso immagini bitmap.


La maggior parte delle applicazioni permettono di modificare o le forme vettoriali o le immagini bitmap, mentre Fireworks permette di intervenire su entrambi i tipi di elementi grafici. In questa sezione si opererà con la grafica vettoriale.

Creazione di oggetti vettoriali

Si procederà ora con la creazione di due degli elementi grafici necessari per il progetto. Per prima cosa si creerà un rettangolo blu che verrà collocato in fondo al documento. Quindi si creerà un rettangolo che racchiuderà come un bordo 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.

Si apre la finestra a comparsa Colore riempimento.

3 Immettere 333366 nella casella di testo nella parte superiore della finestra, quindi premere INVIO.

La casella Colore riempimento cambia dal blu scuro al colore scelto.

4 Nella finestra documento, collocare il puntatore sull’area di lavoro e trascinare verso il basso a destra per creare un rettangolo. Il rettangolo può essere trascinato in qualsiasi punto dell’area di lavoro. Più avanti nel corso dell’esercitazione il rettangolo verrà ridimensionato e collocato nella posizione corretta.

Capitolo 118

5 Quando si rilascia il pulsante del mouse, compare nell’area definita un rettangolo blu selezionato.

Un oggetto selezionato si riconosce dai punti di angolo evidenziati in blu. La maggior parte degli oggetti sono evidenziati in blu anche intorno ai bordi esterni, ma i rettangoli costituiscono un’eccezione.

6 Nell’angolo sinistro inferiore della finestra di ispezione Proprietà, digitare 480 nella casella della larghezza e 15 nella casella dell’altezza, quindi premere INVIO.

Il rettangolo viene ridimensionato alle dimensioni specificate.

7 Scegliere lo strumento Puntatore nella sezione Seleziona del pannello Strumenti.

8 Trascinare il rettangolo in modo che risulti collocato in fondo all’area di lavoro, come indicato sotto. Per una collocazione più precisa usare i tasti freccia.

9 Selezionare di nuovo lo strumento Rettangolo e disegnare un secondo rettangolo. Trascinarlo in un punto qualsiasi dell’area di lavoro e specificare le dimensioni desiderate. Nella sezione successiva dell’esercitazione si modificheranno le proprietà e la posizione del rettangolo.

Impostazione delle proprietà di un oggetto

In questa sezione dell’esercitazione si eseguiranno modifiche sul secondo rettangolo creato, cambiandone la dimensione, la posizione e il colore dalla finestra di ispezione Proprietà.

1 Con il rettangolo ancora selezionato, fare clic sulla casella Colore tratto nella finestra di ispezione Proprietà e digitare CCCCCC come valore del colore. Premere INVIO per applicare la modifica.

2 Impostare Dimensioni punta su 1 trascinando il cursore a comparsa oppure digitando 1 nella casella di testo.


3 Fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà e fare clic sul pulsante Trasparente.

4 Nella finestra di ispezione Proprietà, immettere i seguenti valori nelle caselle dell’altezza, della larghezza, e delle coordinate. Quindi fare clic all’esterno della finestra di ispezione Proprietà per applicare le modifiche.

• Larghezza: 480

• Altezza: 215

• X: 0

• Y: 0

Il rettangolo diventa un bordo grigio che circonda l’area di lavoro.

Se il sistema usa il colore grigio come colore per lo sfondo della finestra, potrebbe risultare difficile vedere chiaramente il rettangolo a questo punto della procedura. Tuttavia, anche se non chiaramente visibile, il rettangolo è presente.

5 Selezionare lo strumento Puntatore e fare clic in un punto qualunque fuori dal rettangolo per deselezionarlo.

Le proprietà nella finestra di ispezione Proprietà risultano modificate. Poichè non vi sono oggetti selezionati, la finestra mostra le proprietà del documento.

Importazione di una bitmap e selezione di pixelIn questa sezione si procederà ad importare una immagine bitmap e a creare una selezione flottante dai suoi pixel.

Importazione di una immagine

Modifica dell’immagine di una auto d’epoca. Per prima cosa occorre importare l’immagine.

1 Scegliere File > Importa e portarsi sulla cartella Esercitazioni del computer. Portarsi sulla cartella Tutorial1/Assets.

2 Selezionare car.jpg e fare clic su Apri.

Capitolo 120

3 Allineare il puntatore di inserzione all’angolo superiore sinistro dell’area di lavoro e fare clic, come mostrato nell’illustrazione seguente.

L’immagine compare selezionata sull’area di lavoro.

4 Fare clic all’esterno dell’immagine selezionata per deselezionarla.

Creazione di una selezione di pixel

Si procederà ora a selezionare i pixel che compongono l’automobile nell’immagine importata e a copiarli e incollarli come un nuovo oggetto.

1 Scegliere lo strumento Ingrandisci nella sezione Visualizza del pannello Strumenti.

2 Fare clic sull’immagine.

La vista viene ingrandita al 150%. L’ingrandimento della vista consente di vedere meglio quanto selezionato e consente un controllo più preciso sulla selezione.

3 Fare clic e tenere premuto il pulsante del mouse sullo strumento Lazo nella sezione Bitmap del pannello Strumenti. Scegliere lo strumento Lazo poligonale dal menu a comparsa visualizzato.

Lo strumento Lazo poligonale consente di disegnare una selezione intorno ai pixel usando una serie di linee diritte. Usare lo strumento Lazo poligonale per selezionare i pixel che compongono l’immagine dell’auto.

4 Nella finestra di ispezione Proprietà, impostare l’opzione Bordo su Antialiasing.

Strumento Ingrandisci


5 Fare clic con lo strumento Lazo poligonale sul bordo superiore dell’auto, quindi fare clic ripetutamente attorno al bordo dell’auto per continuare la selezione.

6 Completare la selezione spostando il puntatore sul punto in cui si è iniziata la selezione. Di fianco al puntatore Lazo poligonale compare un quadratino grigio che indica che la selezione sta per essere completata. Fare clic per completare la selezione.

Un bordo perimetrale compare attorno ai pixel selezionati.

7 Scegliere Modifica > Copia.

La selezione viene copiata negli Appunti.

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 qualunque punto esterno alla bitmap per deselezionarla.

10 Fare clic sul menu a comparsa Imposta ingrandimento nella parte inferiore della finestra documento e riportare la vista al 100%.

Capitolo 122

Aggiunta e modifica di effetti dal vivo Si procederà ora ad applicare effetti dal vivo all’immagine bitmap originale. Si modificherà la tonalità e la saturazione dell’immagine e si applicherà una sfumatura.

1 Fare clic in un punto qualunque dell’immagine. (Prestare attenzione a non fare clic sull’auto).

2 Nella finestra di ispezione Proprietà, fare clic sul pulsante Aggiungi effetti (il pulsante con il segno più (+)).

3 Selezionare Regola colore > Tonalità/Saturazione dal menu a comparsa Effetti.

Si aprirà la finestra di dialogo Tonalità/Saturazione.

4 Scegliere l’opzione Colorizza e fare clic su OK.

L’immagine sull’area di lavoro si colora e l’effetto viene aggiunto all’elenco Effetti dal vivo nella finestra di ispezione Proprietà. Gli effetti dal vivo possono essere aggiunti, modificati o eliminati dall’elenco.

Pulsante Elimina effetti

Pulsante Aggiungi effetti


5 Fare doppio clic sull’effetto Tonalità/Saturazione per modificarlo.

Suggerimento: In alternativa, è possibile fare clic sul pulsante Info di fianco all’effetto.

Si aprirà di nuovo la finestra di dialogo Tonalità/Saturazione.

6 Cambiare la tonalità in 25 e la saturazione in 20, quindi fare clic su OK.

I livelli di tonalità e saturazione dell’immagine cambiano e l’immagine si mostra con un colore seppia, come da vecchia fotografia.

7 Fare di nuovo clic sul pulsante Aggiungi effetti per aggiungere un altro effetto dal vivo all’elenco.

8 Scegliere Sfocatura > Ulteriore sfocatura dal menu a comparsa Effetti.

I pixel della bitmap selezionata diventano sfocati e il nuovo effetto viene aggiunto all’elenco Effetti dal vivo nella finestra di ispezione Proprietà.

Operazioni con livelli e oggettiI livelli suddividono il documento di Fireworks in piani non visibili. Un documento può essere formato da molti livelli e ciascun livello può contenere a sua volta molti oggetti. In Fireworks, il pannello Livelli contiene un elenco dei livelli e degli oggetti contenuti in ogni livello.

Usando il pannello Livelli, è possibile denominare, nascondere, mostrare e modificare l’ordine di impilamento di livelli e di oggetti, nonchè unire bitmap e applicare maschere bitmap. Il pannello Livelli consente inoltre di aggiungere ed eliminare Livelli.

In questa parte dell’esercitazione si userà il pannello Livelli per unire due immagini bitmap. Quindi si assegnerà un nome agli oggetti del documento. Il pannello Livelli verrà usato anche per modificare l’ordine di impilamento degli oggetti.

Più avanti nel corso dell’esercitazione il pannello Livelli verrà usato per applicare una maschera ad una immagine unita.

Capitolo 124

Unione di bitmap

Dopo aver applicato gli effetti dal vivo all’immagine di sfondo, questa verrà unita all’immagine dell’auto in scala dei grigi per creare una unica bitmap.

1 Se il pannello Livelli è minimizzato o non è visibile, fare clic sulla freccia di espansione oppure scegliere Finestra > Livelli.

2 Fare clic sulla miniatura dell’immagine dell’auto in scala dei grigi nel pannello Livelli.

3 Con l’immagine dell’auto selezionata, fare clic sull’icona del menu a comparsa Opzioni nella parte superiore destra del pannello Livelli.

4 Scegliere Unisci a sottostante

I due oggetti bitmap nel pannello Livelli si uniscono in una sola bitmap.

Nella finestra di ispezione Proprietà non sono più presenti effetti nell’elenco degli effetti dal vivo. Ciò risulta perché l’unione ad un oggetto sottostante combina i pixel di ciascuna bitmap e le rende non modificabili come immagini separate. Gli effetti dal vivo applicati ad un oggetto o ad una bitmap non sono più modificabili dopo aver eseguito l’unione ad un’altra bitmap sottostante.

Freccia di espansione

Icona del menu a comparsa Opzioni


Denominazione di oggetti

È consigliabile definire un nome per gli oggetti per facilitarne l’uso e il riconoscimento. Se il documento contiene numerosi oggetti, può risultare complicato gestirlo se gli oggetti non hanno ciascuno un nome esclusivo.

A questo punto si provvederà a denominare gli oggetti del documento usando sia il pannello Livelli che la finestra di ispezione Proprietà.

1 Fare doppio clic sul termine Bitmap di fianco alla vista in miniatura nel pannello Livelli.

Comparirà 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 contorna il documento. Se non è facilmente identificabile nell’area di lavoro, selezionarlo nel pannello Livelli.

Ora si denominerà l’oggetto usando la finestra di ispezione Proprietà.

4 Digitare Border nella casella di testo Nome oggetto della finestra di ispezione Proprietà e premere INVIO.

Il nome digitato viene visualizzato anche di fianco alla miniatura dell’oggetto nel pannello Livelli.

5 Immettere un nome per il restante oggetto rettangolo tramite il pannello Livelli o la finestra di ispezione Proprietà. Ê possibile usare un nome qualunque ma è consigliabile usare un nome significativo, tale da poter in futuro identificare e gestire facilmente l’oggetto nel documento.

Capitolo 126

Modifica dell’ordine di impilamento degli oggetti

L’immagine bitmap unita si sovrappone all’oggetto bordo e al rettangolo blu. Per poter usare il pannello Livelli e cambiare l’ordine di impilamento degli oggetti nel documento, il rettangolo che costituisce il bordo e il rettangolo blu devono trovarsi al livello superiore.

1 Fare clic sulla miniatura del rettangolo blu nel pannello Livelli per selezionarlo.

2 Trascinare sul livello 1, al di sopra della miniatura dell’auto d’epoca (Classic Car).

Nota: Il livello superiore nel pannello livelli è sempre il livello Web. Ulteriori informazioni sul livello Web sono contenute in “Esercitazione di progettazione grafica di base” a pagina 13.

Mentre si trascina la miniatura, il puntatore cambia per indicare che si sta trascinando un oggetto (solo Windows). Una linea scura nel pannello Livelli indica il punto in cui l’oggetto verrà rilasciato quando si rilascia il pulsante del mouse.

3 Rilasciare il pulsante del mouse.

Il rettangolo blu viene rilasciato sopra l’oggetto bitmap nel pannello Livelli. Anche l’ordine di impilamento degli oggetti nell’area di lavoro cambia. ll rettangolo blu si trova ora sovrapposto all’oggetto bitmap e all’oggetto bordo.

4 Per avere l’oggetto bordo al livello superiore, selezionare la sua miniatura e trascinarla nella parte superiore del pannello Livelli, sopra il rettangolo blu.


Creazione e modifica di una mascheraDopo aver eseguito varie modifiche all’immagine dell’auto d’epoca, si eseguirà l’ultima procedura per conferirle gradatamente l’aspetto di trasparenza.

In Fireworks è possibile applicare due tipi di maschere: maschere vettoriali e maschere bitmap. In questa esercitazione, si applicherà una semplice maschera bitrmap all’immagine dell’auto. L’immagine verrà modificata aggiungendole un riempimento sfumato. A seconda del valore della scala dei grigi, i pixel della maschera faranno si che l’immagine dell’auto sia visibile o nascosta.

Applicazione di una maschera

Per prima cosa si applica una maschera bitmap bianca e vuota all’immagine dell’auto. Una maschera bianca mostra l’oggetto o l’immagine selezionata, mentre una maschera di pixel neri li nasconde.

Alla maschera verrà inoltre applicato colore per far sì che l’auto appaia sfumata nello sfondo.

1 Selezionare l’immagine bitmap con lo strumento Puntatore.

2 Fare clic sul pulsante Aggiungi maschera in fondo al pannello Livelli.

All’immagine selezionata viene aggiunta una maschera trasparente vuota. Osservando la miniatura nel pannello Livelli si può capire che è stata aggiunta la maschera. L’evidenziazione in giallo della miniatura indica che la maschera è selezionata.

Modifica di una maschera

Si conferisce ora l’aspetto trasparenza alla maschera, aggiungendo un riempimento sfumato.

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 Sfumato dal menu a comparsa.

Miniatura della maschera

Oggetto maschera

Capitolo 128

2 Fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà.

Si apre la finestra a comparsa Modifica sfumatura.

3 Scegliere Bianco, Nero in fondo al menu a comparsa Preimpostazione.

La gamma dei colori e dei campioni cambia riflettendo la nuova impostazione. I campioni di colore che si trovano sotto la gamma consentono di modificare i colori nella sfumatura.

4 Trascinare per circa un 1/4 del percorso verso destra il campione di colore di sinistra (bianco), per regolare la sfumatura.

5 Fare clic all’esterno della finestra a comparsa Modifica sfumatura per chiuderla.

6 Nell’area di lavoro, trascinare il puntatore Sfumatura attraverso l’immagine bitmap, come mostrato nella illustrazione seguente. Mentre si trascina compare a schermo un segnale visivo che consente di definire l’angolo e la distanza alla quale viene applicata la sfumatura.


La maschera è stata modificata con il riempimento sfumato creato. La maschera modifica l’immagine dell’auto fornendole un aspetto di trasparenza. La miniatura della maschera nel pannello Livelli visualizza il riempimento sfumato applicato.

Gamma colori

Campioni colore


8 Scegliere lo strumento Puntatore e fare clic sulla miniatura della maschera nel pannello Livelli.

La finestra di ispezione Proprietà indica che la maschera è stata applicata con l’aspetto scala dei grigi. I pixel più scuri della maschera nascondono l’immagine dell’auto mentre i pixel chiari la lasciano trasparire.

Creazione e modifica di un testoSi provvederà ora ad aggiungere testo ad un documento e ad applicare le proprietà di testo tramite la finestra di ispezione Proprietà. Si creeranno quattro blocchi di testo, dei quali due per il titolo del messaggio pubblicitario e due per il corpo del messaggio pubblicitario.

Creazione del testo del titolo

Per prima cosa si crea il testo per il titolo del messaggio pubblicitario.

1 Scegliere lo strumento Testo nella sezione Vettore del pannello Strumenti e spostare il puntatore nella finestra del documento.

Il puntatore assume la forma di una I e la finestra di ispezione Proprietà visualizza le proprietà di testo.

2 Nella finestra di ispezione Proprietà, eseguire quanto segue:

• Scegliere Times New Roman dal menu a comparsa Carattere.

• Immettere 85 come dimensione del carattere.

• Fare clic sulla casella Colore riempimento. Il puntatore si trasforma in un contagocce. Fare clic con il contagocce nel rettangolo blu nell’area di lavoro.

La finestra a comparsa del colore si chiude e la casella colore riflette il colore scelto.

Carattere

Dimensioni

Colore riempimento

Pulsanti stile

Pulsanti di allineamento

Interlinea

Scala orizzontale

Capitolo 130

• Controllare che non siano selezionati gli attributi dello stile come Grassetto, Corsivo e Sottolineato.

• Fare clic sul pulsante di Allineamento a sinistra.

3 Con il puntatore ad I, fare clic una volta al centro dell’area di lavoro.

Si crea un blocco di testo vuoto.

Il circoletto vuoto nell’angolo superiore destro del blocco di testo indica che il blocco di testo si dimensiona automaticamente. Un blocco di testo a dimensionamento automatico in Fireworks regola la propria larghezza basandosi sulla linea di testo più lunga del blocco.

4 Digitare Vintage nel blocco di testo.

Il blocco di testo si espande in larghezza man mano che si immette del testo.

5 Fare clic una volta all’esterno del blocco di testo per applicare il testo.

Il blocco di testo rimane selezionato e lo strumento selezionato è ancora lo strumento Testo. Il circoletto vuoto nel blocco di testo a questo punto non è più visibile. L’indicatore è visibile solo quando si sta immettendo o modificando un testo.

6 Scegliere lo strumento Puntatore e trascinare il testo nella posizione indicata nella seguente illustrazione.

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 del carattere.

Indicatore di ridimensionamento automatico


9 Fare clic di nuovo nell’area di lavoro, in qualche punto sotto il blocco di testo creato e digitare CLASSIC RENTALS in lettere maiuscole.

10 Scegliere lo strumento Puntatore per applicare il testo.

Cambiando lo strumento nel pannello Strumenti, i testi vengono applicati e modificati nello stesso modo in cui avviene quando si fa clic all’esterno del blocco di testo. Gli stessi risultati si ottengono premendo il tasto Esc.

11 Trascinare il nuovo blocco di testo per collocarlo proprio sotto il blocco di testo Vintage, come indicato nella illustrazione seguente.

12 Fare clic all’esterno del blocco di testo per deselezionarlo.

Creazione del testo del corpo del messaggio

Si proceda a creare ora due blocchi di testo che compongono il corpo del messaggio pubblicitario.

1 Scegliere lo strumento Testo.

2 Questa volta, anzichè fare solo clic nell’area di lavoro, trascinare per disegnare un perimetro con il puntatore a I, come mostrato nella illustrazione seguente.

Comparirà un blocco di testo. Il quadratino vuoto nell’angolo superiore sinistro indica che il blocco di testo ha dimensione fissa definita dal perimetro disegnato. I blocchi di testo a larghezza fissa mantengono la larghezza specificata qualunque sia la lunghezza del testo immesso. La maniglia d’angolo ha la funzione di commutazione. Per cambiare la proprietà da ridimensionamento automatico del blocco di testo in lunghezza fissa è necessario fare doppio clic.

Capitolo 132

3 Immettere il seguente testo senza inserire interruzioni di linea:

Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you to any destination.

Suggerimento: Se l’esercitazione viene eseguita in linea, è possibile copiare e incollare direttamente il testo nel blocco di testo di Fireworks.

Il testo scorre all’interno del blocco di testo creato. Il blocco di testo incrementa in senso verticale ma non in senso orizzontale.

4 Scegliere lo strumento Puntatore e fare clic all’esterno del blocco di testo per deselezionalo. 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.

Compare un nuovo blocco di testo in cima al rettangolo blu.

7 Digitare il seguente testo in lettere maiuscole senza interruzioni di linea:

SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROADSTER

Suggerimento: Se l’esercitazione viene eseguita in linea è possibile copiare e incollare direttamente il testo sopra.

8 Scegliere lo strumento Puntatore e riposizionare il blocco di testo come mostrato sotto:

Qualunque testo creato in Fireworks può essere modificato come in un normale editor di testi. Per modificare un testo, fare doppio clic su un blocco di testo con lo strumento Puntatore, evidenziare il testo che si desidera modificare e digitare il nuovo testo. Oppure fare clic con il puntatore a I in un punto qualunque del blocco di testo, per aggiungere nuovo testo.


Impostazione delle proprietà di testo

Ora che sono stati creati i blocchi di testo, si userà la finestra di ispezione Proprietà per cambiare varie proprietà di testo.

1 Selezionare il blocco di testo Vintage.

Le proprietà del blocco di testo compaiono nella finestra di ispezione Proprietà. Queste proprietà sono simili alle opzioni disponibili quando viene selezionato lo strumento Testo.


• Se non ancora selezionato, scegliere Antialiasing attenuato dal menu a comparsa Livello antialiasing. L’antialiasing attenua i bordi del testo in modo da rendere i caratteri più chiari e leggibili.

In generale, i caratteri serif come Times New Roman impostati con l’opzione Antialiasng attenuato appaiono migliori se la dimensione è maggiore di 45 punti. Allo stesso modo i caratteri sans serif come Arial impostati con Antialiasing attenuato appaiono migliori se la loro dimensione è superiore a 32 punti.

Suggerimento: Il termine serif si riferisce alle sottili linee (a cui si fa spesso riferimento come “piedi”) fissate ai caratteri di testo di tipi di caratteri come Times New Roman. Arial è considerato un carattere sans serif perché i suoi caratteri di testo non contengono serif.

• Impostare l’opzione Scala orizzontale nella finestra di ispezione Proprietà su 89% e premere INVIO.

I caratteri nel blocco di testo Vintage si assottigliano. L’opzione Scala orizzontale allunga o restringe orizzontalmente i caratteri nel testo selezionato. L’impostazione predefinita è 100%. Qualunque impostazione superiore allunga il testo in orizzontale, mentre le impostazioni inferiori ne accorciano la lunghezza.

3 Trascinare il blocco di testo Vintage in modo da posizionarlo come illustrato nella figura seguente.

4 Selezionare il blocco di testo Classic Rentals.


• Fare clic sulla casella Colore riempimento, immettere FF6600 per il valore del colore e premere INVIO.

Capitolo 134

• Fare clic sul pulsante Grassetto.

• Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing.

In generale i caratteri sans serif come Arial impostati con Antialiasing netto appaiono migliori se la loro dimensione è compresa tra 12 e 18 punti. Allo stesso modo i caratteri serif impostati con Antialiasing netto appaiono migliori se la loro dimensione è compresa tra 24 e 32 punti.

6 Trascinare il blocco di testo per riposizionarlo come indicato sotto.

7 Selezionare il blocco di testo Indulge.


• Impostare la dimensione del carattere a 13.

• Selezionare nero come colore del testo.

• Fare clic sul pulsante Allineamento a destra.


• Impostare l’opzione Scala orizzontale all’89%.

• Impostare l’opzione Interlinea al 150% e premere INVIO. Interlinea imposta lo spazio tra le linee di testo. L’interlinea normale per il testo è 100%. I valori superiori al 100% aumentano lo spazio tra le linee, i valori inferiori lo diminuiscono.

9 Trascinare una delle maniglie d’angolo del blocco di testo per ridimensionare il blocco, in modo che il testo scorra come mostrato sotto. Se necessario, trascinare l’intero blocco di testo.


10 Selezionare il blocco di testo in fondo al documento.


• Impostare la dimensione del carattere a 13.


• Impostare l’opzione Scala orizzontale a 89% e premere INVIO.

12 Se necessario riposizionare il blocco di testo.

Aggiunta di un’ombra

In Fireworks è possibile applicare Effetti dal vivo anche ai testi. Si provvederà ora ad aggiungere un’ombra al testo Vintage usando i comandi 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 disponibili per il nuovo effetto appaiono in un menu a comparsa.

3 Immettere 5 per la Distanza e 60% per Opacità. Fare clic all’esterno della finestra a comparsa per chiuderla.

Un effetto ombra viene aggiunto al blocco di testo Vintage.

4 Fare clic in un area vuota della finestra del documento per deselezionare il blocco di testo.

Esportazione del documentoÊ stato creato un oggetto vettoriale, ne sono state modificate le proprietà quindi è stata importata una immagine bitmap, sono state apportate modifiche ai pixel, creato e formattato un testo. Si è ora pronti per ottimizzare ed esportare il documento.

Ottimizzazione dell’immagine grafica

Prima di esportare un documento da Fireworks, si raccomanda di ottimizzarlo. L’ottimizzazione assicura l’esportazione dell’immagine grafica con il massimo equilibrio di compressione e qualità.

1 Se non ancora aperto, eseguire una delle seguenti procedure per aprire il pannello Ottimizza:

• Scegliere Finestra > Ottimizza.

• Se il pannello è minimizzato a destra dello schermo, fare clic sulla freccia di espansione per visualizzare il pannello intero.

Capitolo 136

2 Scegliere JPEG - Qualità migliore dal menu a comparsa Impostazioni.

Le opzioni nel pannello cambiano per riflettere la nuova impostazione.

Queste impostazioni possono essere modificate, ma per questa esercitazione si useranno le impostazioni predefinite.

3 Fare clic sulla scheda Anteprima in cima alla finestra del documento.

La finestra di Anteprima visualizza l’aspetto che avrà il documento una volta esportato, sulla base delle impostazioni correnti.

Nella parte superiore destra della finestra, Fireworks visualizza la dimensione del file per l’esportazione e il tempo stimato necessario per visualizzare l’immagine sul Web.

Dimensione file

Tempo di scaricamento


Esportazione di una immagine grafica

Dopo aver ottimizzato l’immagine, si è pronti a esportarla come file JPEG.

1 Scegliere File > Esporta.

Si apre la finestra di dialogo Esporta.

Il nome file ha estensione .jpg. Fireworks sceglie questo formato perché è stato selezionato precedentemente nel pannello Ottimizza.

2 Portarsi sulla cartella Tutorials sul pc, quindi scegliere Tutorial1/Export.

3 Accertarsi che il menu a comparsa Salva come tipo (Windows) oppure Salva con nome (Macintosh) indichino Solo immagini, quindi fare clic su Salva.

Il file JPEG viene esportato nella ubicazione specificata.

Si rammenti che il file PNG è il file sorgente, o il file di lavoro. Malgrado si sia esportato il documento in un formato JPEG, occorre sempre salvare il PNG in modo che le modifiche eseguite vengano riflesse anche nel file sorgente.

4 Scegliere File > Salva per salvare le modifiche apportate al file PNG.

5 Scegliere File > Chiudi.

Visualizzazione del documento esportato

Il nuovo file creato durante il processo di esportazione viene collocata nella cartella specificata.

1 In Fireworks, scegliere File > Apri e selezionare la cartella Esporta.

Fireworks ha creato in questa collocazione un file denominato vintage.jpg.

Capitolo 138

2 Selezionare vintage.jpg e fare clic su Apri.

L’immagine si apre in una nuova finestra di documento in Fireworks. Nel pannello Livelli tutti gli oggetti sono stati appiattiti. Quando gli oggetti vengono appiattiti vengono uniti in un unico oggetto e non sono più modificabili come oggetti separati.

La finestra di ispezione Proprietà visualizza le proprietà per una bitmap. Tutti gli effetti dal vivo e altri attributi applicati tramite la finestra di ispezione Proprietà non sono più disponibili per la bitmap selezionata.

Il documento appare in questo modo perché Fireworks ha appiattito l’immagine e tutte le sue proprietà, quando è stata eseguita l’esportazione nel formato JPEG. Tuttavia il file di origine PNG è sempre disponibile. Pertanto, se occorre apportare altre modifiche al disegno, è sempre possibile aprire il file PNG, nel quale tutti gli oggetti sono ancora modificabili.

3 Scegliere File > Apri e selezionare vintage.png nella cartella Tutorial1. Fare clic su Apri.

Nel pannello Livelli, tutti gli oggetti sono di nuovo disponibili come oggetti separati. Ciascun oggetto è modificabile, così come tutte le proprietà.

4 Fare clic su ciascun oggetto.

La finestra di ispezione Proprietà visualizza le varie opzioni per ciascun oggetto selezionato.

5 Selezionare il testo Vintage nell’area di lavoro.

L’effetto dal vivo Ombra per questo oggetto di testo compare nella finestra di ispezione Proprietà.

Il vantaggio dell’uso del file PNG di Fireworks come file di origine è quindi evidente. Ê infatti possibile eseguire modifiche ad un documento, che resta modificabile anche se si sceglie di esportare il documento ad un altro formato come JPEG.


Argomenti successiviA questo punto si sono completate tutte le operazioni necessarie per creare immagini grafiche con Fireworks. Si è appreso come creare e salvare un nuovo documento e come aggiungere oggetti vettoriali e immagini bitmap ad un documento. Sono stati applicati effetti dal vivo, sono state eseguite operazioni con i livelli, si è creata una maschera e sono stati aggiunti testi. Infine si è appreso ad esportare l’immagine completata.

Per informazioni dettagliate sulle funzioni trattate in questa esercitazione e altre funzioni di Fireworks, fare riferimento all’indice di Uso di Fireworks oppure consultare gli argomenti della Guida Fireworks. Per altre esercitazioni di Fireworks, visitare il sito Web Macromedia all’indirizzo http://www.macromedia.com/it/. Si consiglia di visitare inoltre l’acclamato sito Centro di supporto di Macromedia all’indirizzo http://www.macromedia.com/it/support/.

Per apprendere l’uso di Fireworks nella creazione di pagine Web interattive, consultare “Esercitazione di progettazione grafica di base” a pagina 13. Nel corso dell’esercitazione si utilizzerà l’immagine JPEG esportata in questo documento e la si importerà in una pagina Web. Si apprenderà inoltre a creare elementi Web interattivi quali pulsanti, rollover e menu a comparsa.

Capitolo 140

CAPITOLO 2

Esercitazione di progettazione grafica Web

Questa esercitazione guida l’utente attraverso le operazioni di base della progettazione grafica Web e interattività con Macromedia Fireworks MX. Con l’uso dell’applicazione leader nel settore della grafica Web, l’utente acquista esperienza pratica e apprende i concetti base della progettazione grafica.

Argomenti trattatiGrazie all’esercitazione, sarà possibile ricostruire il workflow di produzione tipico di Fireworks per la realizzazione di una pagina Web. L’utente apprenderà ad eseguire le seguenti operazioni:

• Copia del file Tutorials

• Vista della pagina Web completata

• Apertura del file di origine

• Importazione di un’immagine

• Suddivisione in porzioni di un documento

• Creazione di un rollover trascina e rilascia

• Creazione e modifica di pulsanti per la creazione di una barra di navigazione

• Creazione e modifica di un menu a comparsa

• Ottimizzazione del documento

• Esportazione HTML

• Test del file completato

È bene sapere chePer eseguire questa esercitazione occorre avere esperienza di progettazione grafica con Fireworks o con altre applicazioni di grafica vettoriale e bitmap. Ê consigliabile avere dimestichezza con le funzioni base trattate in “Esercitazione di progettazione grafica di base” a pagina 13. In particolare occorre saper eseguire le seguenti operazioni in Fireworks:

• Salvataggio di un documento

• Selezione di oggetti

• Modifica delle proprietà degli oggetti

• Visualizzazione ed uso dei pannelli

• Operazioni con livelli e oggetti

• Creazione e modifica di testi

• Esportazione di una immagine grafica

41

Copia del file TutorialsPrima di iniziare, occorre copiare la cartella Tutorials, in modo da poter salvare i risultati del proprio lavoro e consentire a sé stessi o ad un altro utente di completare il lavoro in un momento successivo sui file originali.

Se è stata completata l’esercitazione di base di progettazione grafica e la copia della cartella Tutorials è già stata eseguita, questo punto della procedura può essere tralasciato.

1 Portarsi sulla cartella dell’applicazione Fireworks sul disco fisso del computer.

Nota: Se la cartella dell’applicazione Fireworks non è visualizzata è possibile che l’utente abbia accesso limitato ai file sul sistema. I file necessari per eseguire questa esercitazione possono essere scaricati dal sito del Centro di supporto di Fireworks all’indirizzo http://www.macromedia.com/it/support.

2 Trascinare sul desktop una copia della cartella Tutorials.

Vista della pagina Web completataPrima di iniziare l’esercitazione, visualizzare il file dell’esercitazione nella sua forma completa per osservare l’aspetto che avrà il progetto una volta ultimato ed esportato come file HTML.

1 Apertura del browser Web.

2 Portarsi sulla cartella dell’applicazione Fireworks copiata sul desktop e selezionare Tutorial2/Complete.

Nota: Per impostazione predefinita, alcune versioni di Microsoft Windows non visualizzano le estensioni per alcuni tipi di file comuni. Se questa impostazione non è stata modificata, l’estensione dei file nella cartella Complete non verrà visualizzata. Quando si opera in grafica Web, è consigliabile poter visualizzare l’estensione dei file. Per informazioni su come ripristinare la visualizzazione dell’estensione dei file, consultare la Guida di Windows.

3 Selezionare il file Final.htm e trascinarlo nella finestra di un browser aperto.

Nel corso dell’esercitazione, si procederà a completare la versione parziale della pagina per la Global, società per il noleggio di auto.

4 Portare il puntatore sull’immagine Vintage.

Quando il puntatore si sposta sull’immagine Vintage, l’immagine sulla pagina cambia. Questo è dovuto all’effetto di un rollover disgiunto.

5 Portare il puntatore sulla barra di navigazione lungo la parte superiore della pagina Web. Si noti come i pulsanti si modificano quando vengono attraversati dal puntatore del mouse. Fare clic sul pulsante dei valori delle velocità per testare il collegamento.

Il collegamento porta alla pagina Fireworks nel sito http://www.macromedia.com/it/, ma l’utente dovrà selezionare la propria URL per questo ed altri elementi nel corso dell’esercitazione.

6 Utilizzare il pulsante Back (Indietro) del browser per tornare alla pagina final.htm.

7 Portare il puntatore sull’immagine Worldwide Airports. Si apre un menu a comparsa. Attraversare con il puntatore ciascuna voce del menu, compresa la prima, contenente un menu secondario.

8 Fare clic su United States per testare il collegamento, quindi ritornare alla pagina final.htm.

9 Dopo aver visualizzato la pagina Web, si può chiuderla o lasciarla aperta come riferimento durante l’esecuzione dell’esercitazione.

Nota: La cartella Complete include anche il documento di Fireworks dal quale è stato generato il file HTML. Per visualizzare il documento, fare doppio clic su final.png.

Capitolo 242

Apertura del file di origineA questo punto, dopo aver visualizzato il file final.jpg nel browser si è pronti a iniziare il progetto.

1 In Fireworks, scegliere File > Apri.

2 Portarsi sulla cartella Tutorials copiata sul desktop. Portarsi su Tutorial2/Start ed aprire il file global.png.

Nota: Durante la sessione di esercitazione, si consiglia di salvare il lavoro di frequente, selezionando File > Salva.

Importazione di un’immagineDopo aver aperto il disegno non finito per la pagina Web della Global, si procede ad importare una immagine grafica.

Se l’esercitazione di base di progettazione grafica è già stata completata, si utilizzerà l’immagine JPEG. Se l’esercitazione di base non è stata eseguita, l’utente troverà in questa esercitazione una immagine completata.

1 Scegliere File > Importa ed eseguire una delle seguenti operazioni:

• Se è stata completata l’esercitazione di base di progettazione grafica, portarsi sulla cartella Tutorial1/Export.

• Se al contrario non è stata completata l’esercitazione di base di progettazione grafica, portarsi sulla cartella Tutorial2/Assets.

2 Selezionare vintage.jpg e fare clic su Apri.

3 Fare clic in un punto vuoto e bianco dell’area di lavoro.

L’immagine compare sullo schermo selezionata.

4 Trascinare l’immagine per collocarla come mostrato nell’illustrazione seguente.

Esercitazione di progettazione grafica Web 43

Suddivisione in porzioni di un documentoPer esigenze varie di progettazione, i grafici Web usano un procedimento chiamato suddivisione in porzioni, per separare i documenti Web in porzioni più piccole. Le immagini di dimensioni più piccole richiedono infatti un tempo di scaricamento più breve, e questo permette agli utenti di visualizzare parzialmente gli elementi della pagina durante il caricamento, senza dover attendere il caricamento completo di una immagine di dimensioni molto grandi. La suddivisione in porzioni consente inoltre di ottimizzare differentemente le varie parti di un documento. La suddivisione in porzioni è necessaria anche per l’aggiunta di elementi interattivi.

Si provvederà ora a creare suddivisioni in porzioni per alcuni degli elementi grafici della pagina Web. In seguito, durante l’esercitazione si aggiungeranno gli elementi interattivi alle porzioni, insieme alle impostazioni per l’ottimizzazione e la compressione di tali elementi.

1 Con l’immagine Vintage ancora selezionata, scegliere Modifica > Inserisci > Porzione.

Sull’immagine viene inserita una porzione. Per impostazione predefinita le porzioni presentano una sovrapposizione verde.

2 Fare clic all’esterno della porzione per deselezionarla.

La porzione è definita da guide di colore rosso, che si estendono per tutta la larghezza e la lunghezza del documento. Al momento della creazione della porzione, Fireworks sottopone automaticamente a suddivisione il resto del documento.

Nota: Se le guide rosse 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, alla sinistra del documento, per selezionare contemporaneamente entrambe le immagini.

Capitolo 244

4 Scegliere Modifica > Inserisci > Porzione. Nella finestra messaggio che compare, scegliere Multiplo. Questa funzione consente di inserire più porzioni contemporaneamente.

Le porzioni vengono inserite sulle immagini selezionate. L’aggiunta di porzioni modifica il lay-out delle porzioni automatiche nel resto del documento.

5 Fare clic in un punto qualsiasi all’esterno delle porzioni per deselezionarle.

Si crea uno spazio tra la porzione Vintage e la porzione Great Weekend Rates. Questo spazio rappresenta una sottile porzione automatica.

6 Portare il puntatore sulla guida sinistra dell’immagine Vintage.

Il puntatore si trasforma in puntatore di movimento guida, indicando che è possibile catturare la guida porzione e trascinarla. Trascinando una guida porzione è possibile modificare la forma della relativa porzione.

7 Trascinare la guida porzione a sinistra fino a che non si aggancia alla guida destra sull’immagine Great Weekend Rates, come mostrato nell’illustrazione sotto riportata.



La porzione Vintage si estende lungo tutto il bordo della porzione Great Weekend Rates e il sottile spazio della porzione automatica viene cancellato. Ê opportuno considerare le porzioni come celle di una tabella di un foglio di calcolo o di un word processor. Trascinando le guide per ridimensionare una porzione in Fireworks si causa il ridimensionamento di altre porzioni esattamente come succede in una tabella, quando il trascinamento dei bordi di una cella causa il ridimensionamento di altre celle. Se si trascina una guida sopra e oltre le porzioni automatiche, le guide si uniscono e le porzioni automatiche non necessarie vengono eliminate.

9 Se il pannello Livelli non è visibile, fare clic sulla freccia di espansione oppure scegliere Finestra > Livelli.

Nella parte superiore del pannello è localizzato il Livello Web, che contiene tutti gli oggetti Web di un documento. Le tre porzioni create sono elencate in questo livello. In qualsiasi documento il Livello Web è sempre il livello superiore e non può essere spostato, ridenominato o eliminato.

Creazione di un rollover trascina e rilasciaDopo aver suddiviso in porzioni il documento si è pronti ad aggiungere gli elementi interattivi. Si utilizzeranno due delle porzioni inserite precedentemente per creare un rollover drag-and-drop.

Esistono due tipi di rollover, semplici e disgiunti. Un rollover semplice visualizza una immagine diversa quando il puntatore lo attraversa in un browser. Un rollover disgiunto fa sì che un altra immagine cambi in un’altra parte dello schermo quando il puntatore lo attraversa. In questa esercitazione, si creerà un rollover disgiunto.

Capitolo 246

1 Selezionare la porzione che copre l’immagine Vintage.

Il cerchietto al centro della porzione è la maniglia del comportamento. Consente di aggiungere comportamenti o elementi interattivi ad una porzione. Se si ha una certa esperienza con i comportamenti di Macromedia Dreamweaver, si riconosceranno in Fireworks molti degli stessi comportamenti.

I comportamenti possono essere applicati usando il pannello Comportamenti. Per elementi interattivi semplici come i rollover, la maniglia del comportamento di una porzione è uno dei metodi più rapidi e semplici di applicazione di un comportamento.

2 Trascinare la maniglia del comportamento sulla porzione Great Weekend Rates e rilasciare il pulsante del mouse.

Una linea blu si estende dalla maniglia all’angolo della porzione e compare la finestra di dialogo Scambia immagine.

Maniglia del comportamento


3 Assicurarsi che nel menu a comparsa Immagine di scambio da, sia selezionato Fotogramma 2 e fare clic su OK.

Quando nel browser il puntatore passa attraverso la porzione Vintage, l’immagine del Fotogramma 2 sostituisce l’immagine Great Weekend Rates. L’immagine Vintage è quella che innesca l’effetto rollover mentre l’immagine che sostituisce l’immagine Great Weekend Rates è considerata l’immagine di scambio.

4 Se il pannello Fotogrammi non è visibile, fare clic sulla freccia di espansione del gruppo Fotogrammi e Cronologia e fare clic sulla scheda Fotogrammi, oppure scegliere Finestra > Fotogrammi.

Il pannello Fotogrammi elenca i fotogrammi disponibili nel documento corrente. Attualmente nel documento è presente un solo fotogramma. Il pannello Fotogrammi è usato generalmente per l’animazione. Nel caso dei rollover, il pannello è utilizzato per contenere le immagini di scambio.

5 Fare clic sul pulsante Fotogramma nuovo/duplicato in fondo al pannello.

Nel pannello Fotogrammi viene creato un nuovo fotogramma denominato Fotogramma 2. L’area di lavoro è ora vuota, con l’eccezione delle porzioni inserite.

Nessun oggetto è elencato nel pannello Livelli, ad eccezione degli elementi contenuti nel Livello Web. Questo avviene perché, per impostazione predefinita, i livelli in Fireworks non sono condivisi tra tutti i fotogrammi, con l’eccezione del Livello Web, che è sempre condiviso. Gli oggetti nel Livello Web appaiono in ogni fotogramma del documento, pertanto le modifiche che si eseguono ad oggetti Web come le porzioni, interessano tutti i fotogrammi.

Capitolo 248

6 Scegliere File > Importa e portarsi sulla cartella Tutorial2/Assets. Selezionare il file denominato rates .gif e fare clic su Apri.

7 Collocare il puntatore di inserzione sulla porzione in cui era collocata l’immagine Great Weekend Rates nel Fotogramma 1. Allineare il puntatore di inserzione all’angolo superiore sinistro della porzione.

8 Fare clic per inserire l’immagine.

Compare l’immagine Vintage Classic Rates.

9 Fare clic sulla scheda Anteprima in cima alla finestra del documento e nascondere le porzioni nel documento facendo clic sul pulsante Nascondi porzioni e punti attivi nella sezione Web del pannello Strumenti.

Spostare il puntatore sull’immagine Vintage. L’immagine Great Weekend Rates cambia quando il puntatore passa sopra l’immagine Vintage.

Suggerimento: Se l’immagine non sembra ferma oppure se la transizione da una immagine all’altra non è uniforme, regolare la posizione dell’immagine di scambio nel Fotogramma 2 sulla vista Originale. Per un posizionamento di precisione, attivare l’opzione Onion skin nel pannello Fotogrammi oppure verificare che le coordinate X e Y dell’immagine Vintage Classic Rates siano le stesse dell’immagine Great Weekend Rates nella finestra di ispezione Proprietà. Conclusa questa operazione, ritornare al Fotogramma 1 e disattivare, se necessario, l’opzione Onion skin. Per informazioni dettagliate su queste opzioni, fare riferimento all’indice di Uso di Fireworks oppure consultare gli argomenti della Guida di Fireworks.

10 Fare clic sulla scheda Originale in cima alla finestra del documento per ritornare alla vista normale, quindi riportare indietro le porzioni facendo clic sul pulsante Mostra porzioni e punti attivi nel pannello Strumenti.

In questo modo, con la massima rapidità, si è creato un rollover disgiunto. I rollover semplici vengono creati in modo simile: quando si trascina la maniglia del comportamento di una porzione, come si è appena fatto al punto 2, la si riporta direttamente sulla stessa porzione.


Normalmente l’effetto rollover viene aggiunto ad una immagine per indicare agli utenti che è possibile fare clic sull’immagine. Se il sito Global fosse un sito Internet reale, sarebbe utile un collegamento dalle immagini Vintage e Rates ad altre pagine di approfondimento delle informazioni. Ai fini di questa esercitazione, non è necessario modificare il rollover disgiunto. Nella sezione successiva di questa esercitazione si avranno altre opportunità di aggiungere collegamenti ad altri oggetti Web.

Creazione e modifica di pulsanti per la creazione di una barra di navigazione

I pulsanti sono oggetti Web che si collegano ad altre pagine Web. L’aspetto dei pulsanti cambia secondo il movimento o il clic del mouse e rappresenta una indicazione visiva dell’interattività. Ad esempio, il pulsante visualizza un effetto rollover diverso se viene attraversato dal puntatore o se viene selezionato con il clic del mouse.

La barra di navigazione è un gruppo di pulsanti che compaiono su uno o più pagine di un sito Web. Generalmente i pulsanti delle barre di navigazione sono identici, ad eccezione del testo in essi contenuto.

Si provvederà ora a creare una barra di navigazione per il sito Web Global.

Creazione di un simbolo di pulsante

L’immagine iniziale e il testo per un pulsante sono già stati creati per l’esercitazione. L’immagine creata verrà convertita in un simbolo di pulsante.

1 In Fireworks, selezionare l’immagine del pulsante (con etichetta BUTTON TEXT) nell’angolo sinistro superiore del documento.

2 Scegliere Modifica > Simbolo > Converti in simbolo.

Compare la finestra di dialogo Proprietà simbolo.

3 Immettere My Button nel campo Nome, scegliere Pulsante come tipo di simbolo e fare clic su OK.

Comparirà una porzione sopra l’immagine del pulsante e una icona di scelta rapida a sinistra della porzione. Ciò indica che la selezione nell’area di lavoro è un’istanza del simbolo appena creato. I simboli sono copie master dell’immagine. Quando si cambia un simbolo tutte le istanze di quel simbolo nel documento cambiano automaticamente. I simboli sono contenuti nella libreria.

Capitolo 250

4 Se il pannello Libreria non è visibile, fare clic sulla freccia di espansione del gruppo Assets e sulla scheda Libreria oppure scegliere Finestra > Libreria.

Il simbolo viene incluso nel pannello Libreria.

Creazione di stati dei pulsanti.

Si creeranno ora vari stati per il simbolo del pulsante. Gli stati dei pulsanti sono i vari modi in cui un pulsante compare quando il mouse lo attraversa o lo seleziona in un browser Web.

1 Fare doppio clic sull’istanza del pulsante creata.

Suggerimento: In alternativa è possibile fare doppio clic sull’anteprima del pulsante nel pannello Libreria oppure sull’icona del simbolo nell’elenco dei simboli del pannello Libreria.

Si aprirà l’Editor di pulsanti con l’immagine del pulsante visualizzata nello spazio di lavoro.


2 Fare clic sulle schede dell’Editor di pulsanti.

Le prime quattro schede rappresentano gli stati dei pulsanti. L’ultima scheda, Area attiva, rappresenta l’area sensibile del pulsante o il punto in cui l’utente deve fare clic o attraversare con il mouse per attivare gli stati del pulsante. L’area attiva è anche l’area che cambia con ciascun stato del pulsante. Attualmente non ci sono altri stati per il pulsante se non lo stato Su, corrispondente all’aspetto del pulsante prima che l’utente faccia clic su di esso o vi passi sopra il puntatore.

3 Fare clic sulla scheda Sopra in cima all’Editor di pulsanti, quindi fare clic sul pulsante Copia grafico Su.

L’immagine del pulsante viene copiata dalla scheda Su. Lo stato Sopra corrisponde all’aspetto del pulsante quando il puntatore è su di esso. Per consentire all’utente la visualizzazione occorre cambiare il colore del rettangolo dietro il testo.

4 Selezionare il rettangolo. Accertarsi di selezionare solo il rettangolo e non il testo. Se non si è sicuri di questo, controllare nel pannello Livelli quale livello risulta selezionato.

5 Fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà e scegliere il colore nero.

Il rettangolo ora si presenta nero.

6 Fare clic sulla scheda Giù dell’Editor di pulsanti, quindi sul pulsante Copia grafico Sopra.

L’immagine del pulsante viene copiata dalla scheda Sopra. Lo stato Giù corrisponde all’aspetto assunto dal pulsante quando si è fatto clic su di esso. In questa esercitazione il colore del rettangolo non verrà cambiato.

7 Fare clic su Completato nell’Editor di pulsanti per applicare le modifiche al simbolo del pulsante.

8 Fare clic sulla scheda Anteprima nella finestra del documento e provare gli stati del pulsante. Se necessario disattivare le porzioni. A operazione conclusa, fare clic sulla scheda Originale e riportare indietro le porzioni.

Creazione di più istanze di un pulsante

In questa sezione si creeranno più istanze di un simbolo di pulsante.

1 Se non ancora selezionato, selezionare il pulsante nello spazio di lavoro.

2 Scegliere Modifica > Clona.

Sopra il pulsante originale compare una nuova istanza del pulsante.

Capitolo 252

3 Premere ripetutamente il tasto MAIUSC insieme al tasto freccia destra, per spostare a destra la nuova istanza.

L’istanza si sposta con incrementi di 10 pixel. Se necessario, usare i tasti freccia da soli per spostare la selezione di un pixel alla volta. Posizionare l’istanza immediatamente a destra dell’istanza originale, ma non sovrapposta, come mostrato nell’illustrazione riportata sotto.

4 Clonare altre due istanze del pulsante e collocarle entrambe a destra dell’istanza precedente.

Suggerimento: Come scelta rapida, premere Alt (Windows) o Opzione (Macintosh), trascinando l’istanza selezionata con il puntatore per farne una copia. Dopo aver posizionato la nuova istanza all’immediata destra della precedente istanza, scegliere Modifica > Ripeti duplica, per creare e collocare automaticamente un’altra copia dell’istanza.

Modifica del testo di un’istanza del pulsante

Dopo aver creato tutti i pulsanti della barra di navigazione è necessario fornire un singolo testo a ciascun pulsante. Il testo su una istanza di pulsante può essere modificato in modo semplice dalla finestra di ispezione Proprietà.

1 Selezionare l’ultima istanza verso sinistra.

Le proprietà per l’istanza del pulsante vengono visualizzate nella finestra di ispezione Proprietà. Con l’eccezione del menu a comparsa Esporta impostazioni, queste proprietà si applicano solo all’istanza selezionata. Le modifiche eseguite qui non interessano il simbolo originale del pulsante nella Libreria.

2 Nella finestra di ispezione Proprietà, sostituire il testo presente nella casella Testo con la parola HOME in maiuscolo, quindi premere INVIO.

Il testo sul pulsante cambia e riflette la nuova immissione.

3 Per i rimanenti tre pulsanti, modificare rispettivamente il testo in VEHICLES, RATES e CONTACT US.


Assegnazione di URL ai pulsanti

Si provvederà ad assegnare ora una URL esclusiva, o collegamento, a ciascuna istanza del pulsante. URL, acronimo di Uniform Resource Locator, è l’indirizzo di una pagina Web. È possibile assegnare URL ai pulsanti usando la finestra di ispezione Proprietà.

1 Selezionare l’istanza del pulsante con l’etichetta Home.

2 Immettere index.htm nella casella di testo Collegamento della finestra di ispezione Proprietà.

Premendo il pulsante Home in un browser Web, si apre una pagina denominata index.htm. Si osserverà più avanti nell’esercitazione perché il pulsante Home è stato collegato a questa pagina.

3 Selezionare l’istanza del pulsante Vehicles ed inserire la URL preferita nella casella di testo Collegamento della finestra di ispezione Proprietà.

Ai fini di questa esercitazione non è importante scegliere una URL specifica. Se la creazione del sito fosse reale, a questo punto si dovrebbe digitare la URL alla quale far collegare il pulsante Vehicles.

Nota: Immettere comunque una URL esistente, in modo da poter provare successivamente il collegamento del pulsante.

4 Assegnare una URL a ciascuna delle rimanenti istanze del pulsante. Come per la prima, assegnare una URL indefinita.

5 Scegliere File > Anteprima nel browser > Anteprima in [browser preferito]. Per provare i collegamenti dei pulsanti, visualizzare in anteprima il documento nel browser.

Nota: Se il browser prescelto non è elencato, occorre prima selezionare un browser scegliendo File > Anteprima nel browser > Imposta browser primario.

Quando il documento si apre nel browser, testare i pulsanti creati. Ad eccezione del pulsante Home, che si collega ad un file non ancora creato, ciascun pulsante dovrebbe passare al collegamento specificato in Fireworks.

Modifica del simbolo di un pulsante

Si vedrà ora come modificare il simbolo originale di un pulsante. Le modifiche verranno apportate automaticamente a tutte le istanze del pulsante nella barra di navigazione.

Per osservare come risulta il simbolo originale del pulsante dopo che ne è stato modificato il testo su molte delle sue istanze,

1 Fare doppio clic su una istanza qualunque nello spazio di lavoro.

Si aprirà l’Editor di pulsanti con il simbolo originale e il testo visualizzato nello spazio di lavoro. Il simbolo originale del pulsante è rimasto invariato e visualizza il testo originale.

Quando è stato cambiato il testo di ciascun pulsante nello spazio di lavoro, sono state modificate soltanto le istanze del pulsante. Se si eseguono ora modifiche al rettangolo o all’aspetto del testo, si interviene sul simbolo originale, in modo che le modifiche vengano applicate a tutte le istanze nello spazio di lavoro.

Capitolo 254

2 Fare clic sulla scheda Sopra.

3 Selezionare il rettangolo nero.

4 Con il rettangolo ancora selezionato, fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà e immettere FF6633 come valore del colore. Premere INVIO per applicare la modifica del colore.

Il rettangolo ora si presenta di colore arancio.

5 Fare clic su Completato nell’Editor di pulsanti per applicare la modifica al simbolo del pulsante.

6 Fare clic sulla scheda Anteprima nella finestra del documento e provare il pulsante.

Lo stato Sopra di ciascun pulsante è ora di colore arancio. Ê stato modificato solo il simbolo del pulsante, ma la modifica è stata applicata a tutte le istanze del pulsante nella barra di navigazione.

7 Fare clic sulla scheda Originale e doppio clic su una qualsiasi istanza nello spazio di lavoro. Ora si cambierà il testo nel simbolo del pulsante.

8 Selezionare il testo del pulsante nell’Editor di pulsanti e scegliere il carattere Arial nella finestra di ispezione Proprietà. Ripetere per ognuno degli stati del pulsante.

9 Fare doppio clic sul blocco di testo nell’Editor di pulsanti e cancellare la parola BUTTON.

10 Fare clic su Sì nella finestra di messaggio dove si chiede all’utente di modificare il testo negli altri stati del pulsante.

Esaminare i vari stati del pulsante nell’Editor di pulsanti. Le modifiche di testo in uno stato del pulsante si riflettono su tutti gli altri stati del pulsante. Osservare la differenza con la modifica applicata al carattere; in quell’occasione è stato necessario modificare tutti gli stati. Questo avviene perché sia possibile applicare attributi grafici e di testo diversi ad ognuno degli stati del pulsante. Questa funzione risulta utile se si desidera che il colore del testo cambi quando, ad esempio, si passa con il mouse su un pulsante.

11 Fare clic su Completato per uscire dall’Editor di pulsanti.

Il carattere su ciascuna istanza del pulsante cambia e riflette la nuova selezione di carattere ma il testo è rimasto identico. Le istanze dei pulsanti riflettono solo le modifiche applicate all’aspetto grafico di un simbolo di pulsante, inclusi i suoi attributi di testo, ma non le modifiche apportate al testo stesso.

I simboli di pulsante consentono di modificare rapidamente l’aspetto grafico di tutte le istanze del pulsante nella barra di navigazione, mantenendo il testo unico di ciascuna istanza.


Creazione e modifica di un menu a comparsa Il menu a comparsa è un menu che compare quando si sposta il puntatore sopra una immagine di innesco in un browser. Contiene un elenco degli elementi che collegano ad altre pagine Web.

Si procederà a creare e a modificare un menu a comparsa che riporta l’elenco delle sedi Global degli aeroporti.

Creazione degli elementi di un elenco del menu a comparsa

Per prima cosa si creeranno gli elementi di un elenco di un menu a comparsa tramite l’Editor menu a comparsa.

1 Selezionare la porzione che copre l’immagine Worldwide Airports.

2 Scegliere Modifica > Menu a comparsa > Aggiungi menu a comparsa.

Si apre l’Editor menu a comparsa.

3 Fare doppio clic sulla casella di testo nell’angolo superiore sinistro (solo Windows).

4 Immettere North America nella casella di testo e premere INVIO.

La casella di testo successiva si evidenzia ed è disponibile per creare una nuova voce.

Capitolo 256

5 Digitare Europe e premere INVIO.

6 Creare altre voci per Africa, Middle East e Asia/Pacific.

7 Fare doppio clic sulla casella di testo Collega per la nuova voce North America.

8 Immettere un URL esistente e premere INVIO.

Ai fini di questa esercitazione non è importante scegliere una URL specifica. Immettere comunque un URL esistente, in modo da poter provare successivamente il collegamento del pulsante.

9 Immettere gli URL per gli elementi restanti.

Nota: In fondo all’elenco degli elementi nell’Editor dei menu a comparsa rimane sempre un riga vuota. Ê disponibile per l’aggiunta di nuovi elementi senza dover fare clic sul pulsante Aggiungi menu.

10 Fare clic su Completato per chiudere l’Editor menu a comparsa.

Nello spazio di lavoro compare un profilo del menu a comparsa, attaccato alla porzione.

11 Per testare il menu creato, scegliere File > Anteprima nel browser > Anteprima in (browser favorito) in modo da visualizzare il documento nel browser.

Nota: I menu a comparsa devono essere visualizzati in anteprima nel browser; in Fireworks non sono visibili tramite la scheda Anteprima.

Quando il documento si apre nel browser, spostare il puntatore sull’immagine Worldwide Airports. Compare il menu a comparsa creato. Fare clic su ciascuno degli elementi per testare i collegamenti.


Personalizzazione di un menu a comparsa

Tornare all’Editor menu a comparsa per modificare l’aspetto del menu a comparsa.

1 In Fireworks, fare doppio clic sul profilo del menu a comparsa.

Si apre l’Editor menu a comparsa che visualizza le voci inserite.

2 Fare clic sul pulsante Successivo.

Compare la scheda Aspetto. La scheda Aspetto consente di modificare i colori e i caratteri utilizzati nei menu a comparsa.

3 Scegliere HTML per il tipo di cella e Menu verticale per l’allineamento.

4 Scegliere Arial, Helvetica, sans-serif come carattere e 12 come dimensione del carattere.

5 Nella sezione Stato Su, impostare, se non ancora selezionato, il colore nero. Quindi fare clic sulla casella Colore cella. Se CCCCCC non è già visualizzato nella casella di testo in cima alla finestra a comparsa colori, inserire CCCCCC e premere INVIO.

Se non è mai stato creato prima un nuovo menu a comparsa, questi sono i valori predefiniti del colore selezionati nell’Editor menu a comparsa, Una volta modificati, questi colori verranno utilizzati ogni volta che si crea un nuovo menu a comparsa, fino a che non si scelgono colori diversi.

Capitolo 258

6 Nella sezione Stato Sopra impostare il colore del testo su Bianco e fare clic sulla casella Colore cella. Fare clic con il contagocce nel rettangolo blu che circonda l’immagine Worldwide Airports nell’area di lavoro, come mostrato sotto.

7 Fare clic sul pulsante Successivo.

Compare la scheda Avanzate. La scheda Avanzate consente di modificare varie proprietà delle celle e del bordo. Consente inoltre di incrementare la larghezza della cella e quindi del menu a comparsa.

8 Scegliere Pixel dal menu Larghezza cella.

Si apre la finestra Larghezza cella.

9 Immettere 137 per la larghezza della cella.


10 Scegliere Automatica dal menu a comparsa Altezza cella e fare clic sul pulsante Successivo.

Compare la scheda Posizione. La scheda Posizione consente di specificare la posizione di comparsa del menu sullo schermo. Le coordinate 0,0 indicano che l’angolo superiore sinistro del menu a comparsa verrà allineato all’angolo superiore sinistro della porzione che lo attiva. In questa scheda sono disponibili altre posizioni di impostazione.

11 Immettere 3 nelle caselle Posizioni menu X e Y, quindi fare clic su Completato.

Nota: Il menu a comparsa può essere riposizionato anche trascinandone il contorno nello spazio di lavoro.

12 Visualizzare in anteprima in un browser le modifiche apportate al menu a comparsa.

Spostare il puntatore sull’immagine Worldwide Airports. Il menu a comparsa si apre in una altra posizione e risulta più grande. Attraversare ciascuna voce del menu con il puntatore per osservare come cambiano i colori.

Modifica del menu a comparsa

Si utilizzerà nuovamente l’Editor menu a comparsa per aggiungere un’altra voce al menu a comparsa. Si cambierà anche l’ordine delle voci e si aggiungerà un menu secondario.

1 In Fireworks, fare doppio clic sul profilo del menu a comparsa.

2 Fare clic sulla voce Europe per selezionarla.

3 Fare clic sul pulsante Aggiungi menu in cima all’elenco delle voci.

Viene inserita una riga vuota.

Capitolo 260

4 Fare doppio clic sul campo Testo della nuova voce ed immettere Latin/South America. Fare clic all’esterno del campo Testo per confermare la voce.

Si noti che America Settentrionale e meridionale sono due voci distinte dell’elenco.

5 Trascinare la voce Latin/South America una riga sopra e rilasciare il pulsante del mouse. Mentre si trascina, una linea nera indica il punto di rilascio della voce nel momento in cui si rilascia il pulsante del mouse.

La voce viene rilasciata dove specificato.

6 Selezionare la voce North America e fare clic sul pulsante Aggiungi menu.

7 Fare doppio clic sul campo Testo della nuova voce ed immettere United States, quindi fare clic all’esterno dei campi delle voci. Prestare attenzione a non selezionare un’altra voce.

8 Selezionare la voce United States, se non ancora selezionata e fare clic sul pulsante Menu rientrato.

La voce rientra al di sotto della voce North America.


9 Fare clic di nuovo sul pulsante Aggiungi menu e creare una nuova voce per il Canada.

Ê stato creato un menu secondario che comparirà quando nel browser si passa con il mouse sulla voce North America.

10 Assegnare URL a tutte le nuove voci. Ê possibile anche eliminare il collegamento per la voce North America, perché gli utenti hanno ora la possibilità di selezionare le voci dal menu secondario.

11 Fare clic su Completato per chiudere l’Editor menu a comparsa quindi visualizzare in anteprima nel browser le modifiche apportate al menu a comparsa.

Ottimizzazione del documentoIl documento è a questo punto quasi pronto per la pubblicazione sul Web. L’unica operazione che resta prima di esportarlo è l’ottimizzazione per il Web. Prima di esportare un documento da Fireworks, si raccomanda di eseguire la procedura di ottimizzazione. L’ottimizzazione assicura l’esportazione dell’immagine grafica con il massimo equilibrio di compressione e qualità.

Quando il documento contiene diversi tipi di immagini è consigliabile scegliere un formato di file appropriato e le impostazioni di compressione più opportune per ciascun tipo. La pagina Web Global è composta da numerosi elementi: bitmap, oggetti vettoriali e testo.

1 Se il pannello Ottimizza non è visibile, fare clic sulla freccia di espansione oppure scegliere Finestra > Ottimizza.

Capitolo 262

Fireworks seleziona GIF come formato di file di esportazione predefinito e Websnap Adaptive come tavolozza colori predefinita. Queste impostazioni sono idonee alla maggior parte delle immagini create per la pagina Web Global Rental Cars. L’immagine bitmap Vintage contiene, tuttavia, una fotografia e una sfumatura. A causa delle complesse variazioni di colore è preferibile esportarla in un altro formato.

2 Fare clic sulla scheda di anteprima 2-alto nella finestra del documento.

La scheda 2-alto consente di visionare i risultati dell’ottimizzazione e di confrontarli all’originale. A questo punto si sarà probabilmente notata la presenza della porzione bianca sovrapposta ogni volta che si visualizza una delle schede Anteprima. La sovrapposizione consente di concentrare l’attenzione sull’area da ottimizzare.

3 Fare clic sulla porzione per l’immagine Vintage nell’anteprima a destra.

La sovrapposizione della porzione scompare e rende visibile l’immagine. In fondo all’anteprima è visualizzato il formato del file di esportazione per la porzione selezionata, oltre alla dimensione stimata del file e il tempo di download stimato.

Suggerimento: Usare lo strumento Mano nella sezione Visualizza del pannello Strumenti per vedere una parte maggiore dell’immagine se questa non è completamente visibile.

4 Nascondere temporaneamente le porzioni facendo clic sul pulsante Nascondi porzioni e punti attivi nella sezione Web del pannello Strumenti.

Ciò consente di confrontare l’anteprima all’originale e di osservare le differenze tra le due immagini. L’anteprima a destra mostra delle strisce nella sfumatura.

5 Riattivare le porzioni e fare clic sull’immagine Vintage con lo strumento Puntatore.


6 Nel pannello Ottimizza scegliere JPEG - File più piccoli dal menu a comparsa Impostazioni.

Le strisce sono scomparse e la dimensione del file risulta significativamente diminuita. Questo avviene perché le fotografie e le immagini con variazioni complesse del colore risultano ottimizzate e compresse meglio come immagini JPEG che come immagini GIF.

Con la riduzione della dimensione del file l’immagine risulta meno dettagliata.

7 Per migliorare l’aspetto della bitmap, trascinare sul valore 77 il cursore Qualità nel pannello Ottimizza e impostare l’opzione Attenuazione su 0.

La bitmap è molto più chiara, tuttavia la dimensione del file è aumentata. La dimensione del file è comunque inferiore alla dimensione del file quando l’immagine viene ottimizzata come GIF.

8 Fare clic sulla scheda Originale per ritornare alla vista normale.

Capitolo 264

Esportazione HTMLHTML, o HyperText Markup Language, è il principale metodo utilizzato in Internet per creare e visualizzare pagine Web. Non occorre comprendere il linguaggio HTML per utilizzare Fireworks, ma giova ricordare che le porzioni di Fireworks all’esportazione diventano celle di una tabella HTML.

L’esercitazione prevede ora l’esportazione e la visualizzazione del documento finito nel browser Web. Si esaminerà inoltre il codice HTML esportato da Fireworks.

Impostazione delle preferenze HTML

Prima di esportare il documento occorre impostare le preferenze di esportazione.

1 Scegliere File > Imposta HTML.

Si apre la finestra di dialogo Imposta HTML. Le opzioni impostate in questa finestra di dialogo modificano tutti i futuri documenti Fireworks, con l’eccezione delle opzioni nella scheda Specifico del documento.

2 Nella scheda Generale scegliere uno stile HTML.

Se si usa un editor HTML come Macromedia Dreamweaver o Microsoft FrontPage, selezionarli dal menu a comparsa. Questo consente di aprire e modificare il file esportato nell’editor HTML selezionato. Se non si usa un editor HTML particolare oppure se l’editor che si usa non è compreso nell’elenco, scegliere HTML generico.

3 Scegliere .htm come estensione file.


4 Fare clic sulla scheda Tabella.

La scheda Tabella consente di modificare le proprietà della tabella HTML.

5 Nel menu a comparsa Spazio con, scegliere Spaziatore trasparente da 1 pixel.

La scelta di questa opzione fa sì che Fireworks esporti un file grafico denominato spacer.gif, che corrisponde ad una immagine trasparente da 1 pixel. Gli spaziatori sono utilizzati dai disegnatori grafici per risolvere i problemi di spazio nel layout di pagina in quanto mantengono aperte le celle HTML vuote. Senza questi spaziatori le celle vuote della tabella HTML andrebbero perse, alterando il layout di pagina progettato. In seguito, durante la visualizzazione dei file esportati, si potrà osservare il file spacer.gif.

A questo punto dell’esercitazione non occorre conoscere il meccanismo degli spaziatori, ma è utile essere a conoscenza di questa opzione, per un eventuale uso futuro.

6 Fare clic sulla scheda Specifico del documento.

Capitolo 266

La scheda Specifico del documento consente di scegliere varie preferenze per il documento, tra cui una convenzione di assegnazione del nome per i file esportati. Si noti che le opzioni impostate in questa scheda si applicano solo al documento Fireworks corrente.

Suggerimento: Le impostazioni della scheda Specifico del documento possono essere applicate a tutti i nuovi documenti facendo clic sul pulsante Imposta predefiniti.

7 Fare clic su OK per confermare le impostazioni nella scheda Specifico del documento e chiudere la finestra di dialogo Imposta HTML.

Esportazione del documento nel formato HTML

Il documento è ora pronto per l’esportazione.


Si apre la finestra di dialogo Esporta.

2 Nella finestra di dialogo Importa, portarsi nella cartella Tutorial2/Export.

3 Verificare che HTML e immagini sia selezionato come tipo file e immettere index.htm come nome file. La denominazione della home page con index.htm è una convezione diffusa nel Web. Molti browser aprono automaticamente la pagina index.htm quando l’URL presenta una ubicazione e non il nome di una pagina.

Inoltre durante l’esercitazione è stato assegnato al pulsante Home la URL di index.htm. Attualmente esiste solo una pagina nel sito Global, pertanto non è opportuno collegare una pagina a sé stessa. Se in realtà si creassero altre pagine per questo sito, sarebbe possibile usare questa barra di navigazione su tutte le pagine, fornendo agli utenti un metodo di navigazione uniforme.

4 Verificare che nel menu a comparsa HTML sia selezionato Esporta file HTML e che nel menu a comparsa Porzioni sia selezionato Esporta porzioni.


5 Selezionare le seguenti opzioni e lasciare tutte le altre non selezionate:

• Includi aree senza porzioni

• Inserisci immagine nella sottocartella

Selezionando questa opzione, Fireworks consente di scegliere una cartella nella quale memorizzare i file grafici esportati. Fireworks crea automaticamente la cartella se questa non esiste ancora. Se non si seleziona una cartella, Fireworks sceglie per impostazione predefinita una cartella denominata images. Per questa esercitazione confermare le impostazioni predefinite.


I file sono stati esportati alla collocazione specificata.

7 Scegliere File > Salva per salvare il file PNG.

Test del file completatoDopo aver concluso le operazioni di esportazione il file è pronto per essere testato.

Visualizzazione dell’elenco dei file esportati

Per prima cosa si esamini l’elenco dei file esportati da Fireworks. I nuovi file creati durante il processo di esportazione compaiono nella cartella Export.

1 Portarsi alla cartella Export e aprirla.

Fireworks ha creato nella cartella Export un file HTML denominato index.htm. Questo file è la home page del sito Global. Ê stato inoltre creato un file denominato mm_menu.js, che contiene il codice necessario per visualizzare i menu a comparsa.

2 Aprire la sottocartella Immagini.

Fireworks ha esportato file grafici per tutte le immagini. Ogni porzione di Fireworks viene esportata sotto forma di un file grafico separato. Sono presenti numerosi file GIF ed un file JPEG. Il file JPEG è l’immagine bitmap ottimizzata precedentemente. Il file spacer.gif è il risultato dell’opzione spaziatura selezionata nella finestra di dialogo Imposta HTML e verrà usato per il layout di pagina.

Capitolo 268

Visualizzazione del file Fireworks HTML nel browser

Dopo aver esaminato i file esportati, è possibile testare la pagina Web nel browser.

1 Dalla cartella Export, trascinare il file index.htm in un browser Web aperto.

2 Nel browser, fare clic sui pulsanti aggiunti per testare i collegamenti, quindi ritornare al file index.htm.

3 Testare anche le altre funzioni aggiunte.

4 La maggior parte dei browser Web permette di visualizzare il codice sorgente per mezzo di un comando come Visualizza > Sorgente. Individuare ed eseguire il comando che consente di visualizzare il codice.

5 Far scorrere il codice sorgente. Gli utenti che hanno esperienza di HTML e JavaScript, riconosceranno il codice creato automaticamente da Fireworks. Chi non ha esperienza di HTML e JavaScript, apprezzerà particolarmente il fatto che Fireworks non richieda di doverne necessariamente apprendere l’uso.


Argomenti successiviA questo punto sono state eseguite tutte le principali operazioni del workflow di produzione per creare una pagina Web con Fireworks. Si è appreso come aprire un documento, come importare in esso immagini grafiche e suddividere in porzioni il documento. Ê stato creato un rollover trascina e rilascia, sono stati creati i pulsanti e un menu a comparsa. Infine si è appreso come ottimizzare ed esportare un documento completato.

Per informazioni dettagliate sulle funzioni trattate in questa esercitazione e altre funzioni di Fireworks, fare riferimento all’indice di Uso di Fireworks oppure consultare gli argomenti della Guida Fireworks. Per altre esercitazioni, visitare il sito http://www.macromedia.com/it/. Si consiglia di visitare inoltre l’acclamato sito Centro di supporto di Macromedia all’indirizzo http://www.macromedia.com/it/support.

Capitolo 270

CAPITOLO 3

Informazioni di base su Fireworks

Macromedia Fireworks è un’applicazione per la progettazione di elementi grafici per il Web. Le sue soluzioni innovative affrontano i principali problemi dei designer di grafica e dei webmaster. Utilizzando la vasta gamma di strumenti di Fireworks, è possibile creare e modificare elementi grafici vettoriali e bitmap all’interno di un solo file.

L’avvento di Fireworks ha liberato i progettisti Web dalla necessità di usare applicazioni diverse per ogni operazione, con frequenti passaggi da una all’altra. I suoi effetti dal vivo non distruttivi eliminano la frustrazione legata alla necessità di ricreare grafici Web da zero dopo ogni semplice modifica. Inoltre, Fireworks genera JavaScript, semplificando la creazione di rollover e le sue efficienti funzioni di ottimizzazione riducono le dimensioni dei file di grafica Web senza sacrificare la qualità.

Per coloro che utilizzano Fireworks per la prima volta, sarebbe utile comprendere i concetti generali di Fireworks come l’apertura, l’importazione e il salvataggio dei file, lo spostamento agevole nell’ambiente Fireworks e l’esecuzione di operazioni con un file. Una volta creato un nuovo file o aperto un file esistente, l’ambiente operativo di Fireworks è disponibile. In Fireworks MX sono stati apportati numerosi miglioramenti allo spazio di lavoro, tra cui la finestra di ispezione Proprietà, un pannello Strumenti segmentato e gruppi di pannelli.

Informazioni sulla grafica vettoriale e bitmapI computer visualizzano le immagini grafiche in formato vettoriale o bitmap. La comprensione della differenza tra i due formati consente di capire il funzionamento di Fireworks, il quale contiene sia strumenti vettoriali che bitmap ed è in grado di aprire o importare entrambi i formati.

Informazioni sulla grafica vettoriale

Gli elementi grafici vettoriali descrivono le immagini utilizzando linee e curve, denominati vettori, che comprendono informazioni di colore e posizione. Ad esempio, l’immagine di una foglia può essere descritta da una serie di punti, il cui risultato è il contorno della foglia. Il colore della foglia è determinato dal colore del contorno, o tratto, e dal colore dell’area in esso racchiusa, o riempimento.

Quando si modifica un elemento grafico vettoriale, si modificano in effetti le proprietà delle linee e delle curve che ne descrivono la forma. Gli elementi grafici vettoriali sono indipendenti dalla risoluzione, il che significa che è possibile spostare, ridimensionare, riformare o modificare il colore di un elemento grafico vettoriale, nonché visualizzarlo su dispositivi di output con varie risoluzioni, senza alterarne la qualità dell’aspetto.

71

Informazioni sulla grafica bitmap

Gli elementi grafici bitmap sono costituiti da puntini, denominati pixel, disposti su una griglia. Lo schermo stesso del computer è costituito da una grande griglia di pixel. In una versione bitmap della foglia, l’immagine sarebbe determinata dalla posizione e dal valore del colore di ciascun pixel della griglia. Ad ogni puntino viene assegnato un colore. Se visualizzati alla risoluzione corretta, i puntini si uniscono come le tessere di un mosaico per formare l’immagine.

Quando si modifica un elemento grafico bitmap, si interviene sui pixel anziché sulle linee e sulle curve. Tali elementi grafici bitmap sono dipendenti dalla risoluzione, in quanto i dati che descrivono l’immagine sono fissati in base a una griglia di una dimensione specifica. Ingrandendo un elemento grafico bitmap, i bordi dell’immagine risultano frastagliati in quanto i pixel vengono ridistribuiti all’interno della griglia. Visualizzando un elemento grafico bitmap su un dispositivo di output con una risoluzione inferiore a quella dell’immagine, anche la qualità dell’immagine stessa ne risulta degradata.

Informazioni sulle operazioni in FireworksFireworks è un’applicazione versatile per la creazione, la modifica e l’ottimizzazione degli elementi grafici per il Web. È possibile creare e modificare immagini bitmap e vettoriali, progettare effetti Web come rollover e menu a comparsa, ritagliare e ottimizzare gli elementi grafici per ridurre la dimensione del file ed evitare la ripetizione automatizzando le operazioni più frequenti. Quando il documento è completo, è possibile esportarlo come file JPEG, GIF o altro formato, insieme a file HTML contenenti tabelle HTML e codici JavaScript, da utilizzare sul Web. È possibile inoltre esportare un tipo di file specifico di un’altra applicazione come Photoshop o Macromedia Flash, se si desidera continuare a lavorare nell’altra applicazione.

Oggetti vettoriali e bitmap

Il pannello Strumenti di Fireworks è composto da sezioni distinte contenenti strumenti di disegno e modifica di vettori e bitmap. In Fireworks MX, lo strumento che si seleziona determina se l’oggetto che viene creato è un oggetto vettoriale o bitmap. Ad esempio, scegliendo lo strumento Penna nella sezione Vettore del pannello Strumenti, è possibile iniziare a disegnare tracciati vettoriali tracciando dei punti. Scegliendo lo strumento Pennello, è possibile trascinare il mouse per dipingere un oggetto bitmap. Scegliendo lo strumento Testo, è possibile iniziare a digitare.

Dopo aver disegnato oggetti vettoriali, oggetti bitmap o testo, è possibile utilizzare una vasta serie di strumenti, effetti, comandi e tecniche per migliorare e completare le immagini grafiche. È possibile utilizzare gli strumenti di Fireworks nell’editor di pulsanti per creare pulsanti di navigazione interattivi.

Gli strumenti di Fireworks possono essere utilizzati inoltre per modificare le immagini grafiche importate. È possibile importare e modificare file in formato JPEG, GIF, PNG, PSD e molti altri formati di file. Una volta importata un’immagine grafica, è possibile regolarne il colore e la tonalità, oltre che ritagliarla, ritoccarla e mascherarla.

Capitolo 372

Elementi grafici interattivi

Le porzioni e i punti attivi sono oggetti per il Web che specificano aree interattive in un’immagine grafica per il Web. Le porzioni tagliano un’immagine in varie sezioni e permettono di applicare comportamenti rollover, animazioni e collegamenti URL (Uniform Resource Locator) a parti dell’immagine complessiva. Le porzioni inoltre consentono di esportare le sezioni utilizzando impostazioni diverse. In una pagina Web, ciascuna porzione appare in una cella di tabella. I punti attivi consentono di assegnare collegamenti URL e comportamenti a un intero elemento grafico o a una parte di esso. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Le porzioni e i punti attivi sono dotati di maniglie rollover trascina e rilascia che consentono di assegnare rapidamente immagini di scambio e comportamenti rollover agli elementi grafici direttamente nell’area di lavoro. L’Editor di pulsanti e l’Editor di menu a comparsa sono pratiche funzioni di Fireworks che consentono di creare speciali elementi grafici interattivi per navigare nei siti Web.

Informazioni sull’ottimizzazione e l’esportazione di elementi grafici

Fireworks è dotato di potenti funzioni di ottimizzazione che consentono di trovare l’equilibrio tra le dimensioni e una qualità accettabile del file nel caso in cui si debbano esportare elementi grafici. In Fireworks è possibile ottimizzare le immagini grafiche Web per ridurre al minimo le dimensioni dei file relativi, in modo che le immagini vengano caricate rapidamente quando si visualizzano i siti Web, mentre si confronta la qualità delle immagini grafiche nella vista Anteprima, 2-alto o 4-alto nello spazio di lavoro.

È possibile dividere un’immagine in parti più piccole e quindi ottimizzare ciascuna di esse nel formato più idoneo per il contenuto. Per una maggiore flessibilità di ottimizzazione, è possibile utilizzare la compressione selettiva JPEG per mettere a fuoco la parte più importante di un file JPEG riducendo al tempo stesso la qualità dello sfondo.

Dopo aver ottimizzato gli elementi grafici, il passaggio successivo consiste nell’esportarli per utilizzarli sul Web. Dal documento PNG sorgente di Fireworks, è possibile esportare in una serie di formati, tra cui JPEG, GIF, GIF animati e tabelle HTML, contenenti immagini porzione in tipi di file multipli. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Creazione di un nuovo documentoScegliendo File > Nuovo, è possibile creare un nuovo documento di Fireworks, nel formato PNG (Portable Network Graphic). PNG è il formato nativo di Fireworks. Con Fireworks, è possibile creare oggetti per il Web, esportabili in altri formati grafici diffusi sul Web, quali JPEG, GIF e GIF animato. È possibile inoltre esportare elementi grafici in molti dei formati più comuni non utilizzati sul Web, come TIFF e BMP. Il file PNG originale di Fireworks può essere sempre modificato in seguito, indipendentemente dalle impostazioni di ottimizzazione ed esportazione prescelte.

Per creare un grafico destinato al Web in Fireworks, occorre prima impostare un nuovo documento o aprirne uno già esistente. Le opzioni di impostazione possono essere modificate in seguito nella finestra di ispezione Proprietà.

Informazioni di base su Fireworks 73

Per creare un nuovo documento:

1 Scegliere File > Nuovo.

Si aprirà la finestra di dialogo Nuovo documento.

2 Immettere i valori di altezza e larghezza dell’area di lavoro in pixel, pollici, o centimetri.

3 Immettere il valore per la risoluzione in pixel per pollice o pixel per centimetro.

4 Selezionare il colore bianco, trasparente o personalizzato per l’area di lavoro.

Nota: Avvalersi del menu a comparsa vaschetta dei colori Personalizza per scegliere un colore personalizzato per l’area di lavoro.

5 Fare clic su OK per creare il nuovo documento.

Per creare un nuovo documento della stessa dimensione di un oggetto esistente negli Appunti:

1 Copiare negli Appunti l’oggetto prescelto proveniente da:

• Un altro documento di Fireworks

• Un browser Web

• Una delle applicazioni riportate in “Incollaggio in Fireworks” a pagina 78

2 Scegliere File > Nuovo.

Si aprirà la finestra di dialogo Nuovo documento, implementando le dimensioni di altezza e larghezza dell’oggetto contenuto negli Appunti.

3 Impostare la risoluzione e il colore dell’area di lavoro, quindi fare clic su OK.

4 Scegliere Modifica > Incolla per incollare nel nuovo documento l’oggetto contenuto negli Appunti.

Capitolo 374

Apertura e importazione dei fileFireworks consente di aprire, importare e modificare facilmente sia immagini vettoriali che bitmap create in altri programmi di grafica. Inoltre si possono importare in Fireworks immagini da scanner o fotocamere digitali.

Per ulteriori informazioni sull’importazione degli elementi grafici da Photoshop, Macromedia FreeHand, CorelDraw, o Illustrator, consultare “Uso di Fireworks con altre applicazioni” a pagina 103.

Per aprire un documento di Fireworks:

1 Scegliere File > Apri.

Comparirà la finestra di dialogo Apri.

2 Selezionare il file e fare clic su Apri.

Suggerimento: Per aprire un file senza sovrascrivere la versione precedente, scegliere Apri come "Senza nome", quindi salvare il file con un altro nome.

Apertura dei documenti chiusi di recente

Il menu File contiene un elenco di un massimo di 10 documenti chiusi di recente nel sottomenu Apri recente.

Per aprire un file chiuso di recente:

1 Scegliere File > Apri recente.

2 Scegliere un file nel sottomenu visualizzato.

Apertura di immagini grafiche create in altre applicazioni

Fireworks permette di aprire file creati con altre applicazioni o di altri formati, tra cui Photoshop, Macromedia FreeHand, Illustrator, CorelDRAW non compressi, WBMP, EPS, JPEG, GIF e GIF animati.

All’apertura di un file di formato diverso da PNG con File > Apri, viene creato un nuovo documento PNG di Fireworks basato sul file aperto. Il nuovo documento è un file PNG, mentre il file originale rimane invariato.

Per ulteriori informazioni sulle operazioni con FreeHand, Photoshop, Illustrator e CorelDraw, consultare “Uso di Fireworks con altre applicazioni” a pagina 103.

GIF animati

Per trasferire in Fireworks i file GIF animati è possibile procedere in due modi:

• È possibile importare un file GIF animato come simbolo di animazione, che consente di modificare e spostare tutti gli elementi dell’animazione come una sola unità e utilizzare il pannello Libreria per creare nuove istanze del simbolo.

Nota: Quando si importa un GIF animato, l’impostazione di ritardo fotogramma assume il valore di default di 7 centesimi di secondo. Se necessario, utilizzare il pannello Fotogrammi per ripristinare l’impostazione di tempo originale.

• È possibile aprire un GIF animato come se si trattasse di un file GIF normale. Ogni elemento del GIF viene collocato come un’immagine separata sul fotogramma di Fireworks corrispondente. Se lo si desidera, è possibile convertire il grafico in un simbolo di animazione.


File EPS

Fireworks consente di aprire la maggior parte dei file EPS, come i file EPS di PhotoShop, come immagini bitmap appiattite, nelle quali tutti gli oggetti sono combinati su un unico livello. Alcuni file EPS esportati da Illustrator, tuttavia, mantengono le proprie informazioni vettoriali.

Quando si apre o si importa la maggior parte dei file EPS, si apre la finestra di dialogo Opzioni file EPS.

Dimensioni immagine definisce le dimensioni dell’immagine e le unità di visualizzazione delle proporzioni dell’immagine. È possibile scegliere tra pixel, percentuali, pollici e centimetri.

Risoluzione indica i pixel per pollice che si desidera impostare per la risoluzione.

Vincola proporzioni apre il file con proporzioni di dimensioni uguali a quelle originali.

Antialiasing smussa i bordi scalettati nel file EPS aperto.

Quando si aprono o si importano file EPS di Illustrator contenenti informazioni vettoriali, si apre la finestra di dialogo Opzioni file vettoriali. Si tratta della stessa finestra di dialogo che appare aprendo o importando file di FreeHand. Per informazioni sulle opzioni di questa finestra di dialogo, consultare “Importazione di elementi grafici di FreeHand in Fireworks” a pagina 123.

File WBMP

Fireworks è in grado di aprire file WBMP, cioè file da 1 bit (monocromi) ottimizzati per dispositivi di calcolo mobili. Questo formato deve essere utilizzato per le pagine WAP (Wireless Application Protocol). È possibile aprire un file WBMP direttamente utilizzando File > Apri o importare un file WBMP utilizzando File > Importa.

Capitolo 376

Creazione di file PNG di Fireworks da file HTML

Fireworks è in grado di aprire e importare un contenuto HTML creato in altre applicazioni. Quando si apre o si importa un file HTML, Fireworks ricostruisce il layout e i comportamenti definiti dal codice HTML, consentendo di ricreare le pagine Web che contengono elementi grafici porzione, pulsanti JavaScript e altri tipi di interattività. In tal modo, è possibile salvare siti Web ereditati anche se non si possiedono i file PNG sorgente. Con questa funzione è possibile aprire o importare rapidamente una pagina Web per aggiornare immagini grafiche, cambiare i layout di documenti o modificare i collegamenti di navigazione, i pulsanti e altri elementi interattivi, senza dover ricostruire la pagina da zero o modificarne lo script.

Poiché Fireworks esporta il contenuto HTML in forma di tabella HTML, esso determina inoltre il layout del documento per il contenuto HTML importato sulla base delle tabelle HTML. Un file HTML deve contenere almeno una tabella affinché Fireworks sia in grado di ricostruirlo. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Per ottenere un contenuto HTML in Fireworks è possibile procedere in vari modi:

• È possibile aprire tutte le tabelle HTML in un file HTML.

• È possibile aprire la prima tabella HTML incontrata da Fireworks in un file HTML.

• È possibile importare la prima tabella HTML incontrata da Fireworks in un documento di Fireworks esistente.

Nota: Fireworks è in grado inoltre di importare documenti che utilizzano la codifica UTF-8 e i documenti scritti in XHTML. In genere i file XHTML hanno estensione .xhtm o .xhtml. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Per aprire tutte le tabelle di un file HTML:

1 Scegliere File > Ricostituisci tabella.

2 Selezionare il file HTML contenente le tabelle che si desidera aprire e fare clic su Apri.

Ciascuna tabella si apre nella propria finestra del documento.

Per aprire solo la prima tabella di un file HTML:

1 Scegliere File > Apri.

2 Selezionare il file HTML contenente la tabella che si desidera aprire e fare clic su Apri.

La prima tabella del file HTML si apre in una nuova finestra del documento.

Per importare la prima tabella di un file HTML in un documento di Fireworks aperto:

1 Scegliere File > Importa.

2 Selezionare il file HTML dal quale si desidera effettuare l’importazione e fare clic su Apri.

3 Fare clic sul puntatore di inserimento nel punto in cui si desidera che appaia la tabella importata.

Inserimento di oggetti in un documento di Fireworks

Nei documenti di Fireworks è possibile importare, trascinare e rilasciare o copiare e incollare oggetti vettoriali, immagini bitmap o testo creati in altre applicazioni. Inoltre si possono importare in Fireworks immagini da scanner o fotocamere digitali.


Trascina e rilascia

In Fireworks si possono trascinare e rilasciare oggetti vettoriali, immagini bitmap o testi provenienti da qualsiasi applicazione che supporti le funzionalità di trascinamento e rilascio:

• FreeHand 7 o versioni successive

• Flash 3 o versioni successive

• Photoshop 4 o versioni successive

• Illustrator 7 o versioni successive

• Microsoft Office 97 o versioni successive

• Microsoft Internet Explorer 3 o versioni successive

• Netscape Navigator 3 o versioni successive

• CorelDRAW 7 o versioni successive

Per trascinare e rilasciare gli elementi prescelti in Fireworks:

Dall’altra applicazione, trascinare e rilasciare l’oggetto o il testo in Fireworks.

Incollaggio in Fireworks

Incollando in Fireworks un oggetto copiato proveniente da un’altra applicazione, l’oggetto viene collocato al centro del documento attivo. È possibile copiare e incollare dagli Appunti un oggetto o un testo nei formati seguenti:

• FreeHand 7 o versioni successive

• Illustrator

• PNG

• PICT (Macintosh)

• DIB (Windows)

• BMP (Windows)

• Testo ASCII

• EPS

• WBMP

• TXT

• RTF

Per incollare gli elementi prescelti in Fireworks:

1 Nell’altra applicazione, copiare l’oggetto o il testo che si desidera incollare.

2 In Fireworks, incollare l’oggetto o il testo nel proprio documento.

Collocazione degli oggetti incollati

Quando si incolla un oggetto in Fireworks, la collocazione dell’oggetto incollato dipende dalla selezione attiva:

Capitolo 378

• Se è selezionato almeno un oggetto su un solo livello, l’oggetto incollato viene collocato davanti all’oggetto selezionato o impilato direttamente sopra di esso sullo stesso livello.

• Se è selezionato il livello e non è selezionato alcun oggetto o sono selezionati tutti gli oggetti, l’oggetto incollato viene collocato davanti all’oggetto superiore o impilato direttamente sopra di esso sullo stesso livello.

• Se sono selezionati due o più oggetti su più di un livello, l’oggetto incollato viene collocato davanti all’oggetto superiore o impilato direttamente sopra di esso sul livello più alto.

• Se è selezionato il livello Web o un oggetto sul livello Web, l’oggetto incollato viene collocato davanti a tutti gli altri oggetti o impilato sopra di essi sul livello inferiore.

Nota: Il livello Web è uno speciale livello che contiene tutti gli oggetti Web e rimane sempre nella parte superiore del pannello Livelli. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Ridefinizione di oggetti incollati

Quando si incolla una bitmap con risoluzione diversa da quella impostata per il documento Fireworks di destinazione, Fireworks richiede se procedere alla sua ridefinizione.

La ridefinizione aggiunge o sottrae pixel dall’immagine ridimensionata in modo da farla corrispondere il più possibile all’aspetto dell’immagine originale. La ridefinizione di una bitmap a una risoluzione superiore causa in genere una perdita ridotta di qualità. La ridefinizione a una risoluzione inferiore causa invece sempre una perdita rilevante di dati e una caduta in termini di qualità.

Per ridefinire un oggetto bitmap mediante incollaggio:

1 Copiare la bitmap negli appunti in Fireworks o in un altro programma.

2 Scegliere Modifica > Incolla in Fireworks.

Se la risoluzione dell’immagine bitmap negli appunti è diversa da quella del documento corrente, viene visualizzata una finestra di dialogo che richiede di scegliere se eseguire o meno la ridefinizione.

3 Scegliere una delle seguenti opzioni:

• Ridefinisci mantiene larghezza e altezza originali della bitmap incollata, aggiungendo o sottraendo pixel se necessario.

• Non ridefinire mantiene tutti i pixel originali, il che potrebbe rendere le dimensioni relative dell’immagine incollata maggiori o minori di quanto previsto.

Importazione di file PNG

È possibile importare file PNG di Fireworks nel livello corrente del documento di Fireworks attivo. Gli oggetti punto attivo e porzione vengono collocati sul Livello Web del documento. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Per importare un file PNG in un livello del documento di Fireworks:

1 Nel pannello Livelli, selezionare il livello in cui si desidera importare il file.

2 Scegliere File > Importa per aprire la finestra di dialogo Importa.

3 Individuare il file da importare e fare clic su Apri.

4 Nell’area di lavoro, posizionare il cursore di importazione nel punto in cui si desidera collocare l’angolo superiore sinistro dell’immagine.


5 Importare il file:

• Fare clic per importare l’immagine completa.

• Trascinare il cursore di importazione per ridimensionare l’immagine mentre viene importata.

Fireworks manterrà le proporzioni dell’immagine.

Importazione da uno scanner o fotocamera digitale Per permettere l’importazione di immagini, uno scanner o una fotocamera digitale devono essere compatibili TWAIN (Windows) o supportare i plug-in di Photoshop Acquire (Macintosh). Le immagini importate in Fireworks da uno scanner o fotocamera digitale vengono aperte sotto forma di un nuovo documento.

Nota: Fireworks non è in grado di importare immagini da scanner o fotocamere digitali, a meno che non siano stati installati i driver software, i moduli e i plug-in appropriati. Per istruzioni specifiche su installazione, impostazioni e opzioni, consultare la documentazione relativa al modulo TWAIN o al plug-in Photoshop Acquire.

In ambiente Macintosh, Fireworks ricerca automaticamente i plug-in di Photoshop Acquire nella cartella Plug-in all’interno della cartella delle applicazioni Fireworks. Se non si desidera collocare i plug-in in questa posizione, occorre indirizzare Fireworks a una collocazione alternativa.

Nota: La collocazione esatta della cartella Plug-in varia a seconda del sistema operativo. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Per indirizzare Fireworks ai plug-in di Photoshop Acquire:

1 In Fireworks, scegliere Modifica > Preferenze.

Nota: In Mac OS X, scegliere Fireworks > Preferenze.

2 Fare clic sulla scheda Cartelle.

3 Scegliere Plug-in Photoshop.

4 Fare clic su Sfoglia se la finestra di dialogo Seleziona la cartella di plug-in Photoshop (Windows) o Scegliere una cartella (Macintosh) non si apre automaticamente.

5 Portarsi sulla cartella contenente i plug-in di Photoshop.

Per importare un’immagine da uno scanner o da una fotocamera digitale, procedere come segue:

1 Collegare lo scanner o la fotocamera al computer.

2 Installare il software che accompagna lo scanner o la fotocamera, se tale operazione non è già stata eseguita.

3 In Fireworks, scegliere File > Scansione e selezionare un modulo TWAIN o il plug-in Photoshop Acquire corrispondente al dispositivo scelto per l’importazione dell’immagine.

Nota: Per la maggior parte dei moduli TWAIN o dei plug-in di Photoshop Acquire, compariranno delle finestre di dialogo aggiuntive che richiedono di impostare altre opzioni.

4 Seguire le istruzioni indicate per procedere alle impostazioni dei parametri desiderati.

L’immagine importata viene aperta sotto forma di un nuovo documento di Fireworks.

Capitolo 380

Salvataggio dei file di FireworksQuando si crea o si apre un documento in Fireworks, il nome del file del documenti ha estensione .png. Ciò accade anche se si apre un file con estensione diversa, come .jpg, .gif o .psd. Il file visualizzato nella finestra del documento di Fireworks diventa il file sorgente o file di lavoro. Qualsiasi modifica apportata viene applicata al file PNG.

L’uso di un file PNG di Fireworks come file sorgente presenta i seguenti vantaggi:

• Il file PNG sorgente è sempre modificabile. È possibile tornare indietro e apportare modifiche ulteriori anche dopo aver esportato il file da utilizzare sul Web.

• Se si apre un file esistente di formato diverso, come JPEG, e quindi vi si apportano modifiche, il file originale è protetto. In effetti, le modifiche vengono apportate a un file PNG di Fireworks, lasciando invariato il file originale.

• Le immagini grafiche complesse possono essere sezionate in pezzi nel file PNG e quindi esportate come file multipli con formati e impostazioni di ottimizzazione diversi.

I documenti di Fireworks vengono sempre salvati in formato PNG. Per salvare le modifiche apportate a un file JPEG, GIF o grafico di altro tipo nel formato originale, occorre esportare il file.

Nota: In ambiente Windows, quando si apre un file non PNG in Fireworks, il file viene ancora identificato con la sua estensione originale nella finestra del documento di Fireworks. Tuttavia, ogni modifica apportata viene effettivamente eseguita sul file PNG di Fireworks.

Per salvare un nuovo documento di Fireworks:

1 Scegliere File > Salva con nome.

Si apre la finestra di dialogo Salva con nome.

2 Ricercare la collocazione desiderata e inserire il nome del file.

Non occorre immettere un’estensione, in quanto Fireworks la propone automaticamente.


Per salvare un documento di Fireworks esistente:

Scegliere File > Salva.

Per salvare (esportare) un documento in un altro formato:

1 Scegliere un formato di file nel pannello Ottimizza.

2 Scegliere File > Esporta per esportare il documento.

Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).


Lo spazio di lavoro di Fireworks Quando si apre un documento in Fireworks MX per la prima volta, viene attivato lo spazio di lavoro, che comprende il pannello Strumenti, la finestra di ispezione Proprietà, i menu e altri pannelli. Il pannello Strumenti, sul lato sinistro dello schermo, è suddiviso in varie categorie, tra cui bitmap, vettore e gruppi di strumenti per il Web. La finestra di ispezione Proprietà appare nella parte inferiore del documento per impostazione predefinita e visualizza inizialmente le proprietà del documento. Essa passa successivamente alla visualizzazione delle proprietà per uno strumento appena selezionato o per l’oggetto correntemente selezionato man mano che si lavora all’interno del documento. I pannelli sono inizialmente agganciati in gruppi sul lato sinistro dello schermo. La finestra del documento appare al centro dell’applicazione.

Capitolo 382

Uso del pannello Strumenti

Il pannello Strumenti è organizzato in sei categorie: Seleziona, Bitmap, Vettore, Web, Colori e Visualizza. Nelle versioni precedenti di Fireworks, occorreva passare dalla modalità vettoriale alla modalità bitmap e viceversa. Ora è sufficiente scegliere uno strumento e iniziare ad utilizzarlo: è l’applicazione ad applicare automaticamente lo strumento in modo appropriato.

Modifica delle opzioni dello strumento

Quando si sceglie uno strumento, la finestra di ispezione Proprietà visualizza le opzioni dello strumento. Alcune opzioni dello strumento rimangono visualizzate mentre si utilizza lo strumento. Per altri strumenti, come Penna, Linea e gli strumenti delle forme di base, la finestra di ispezione Proprietà visualizza le proprietà degli oggetti selezionati. Per ulteriori informazioni sulla finestra di ispezione Proprietà, consultare “Uso della finestra di ispezione Proprietà” a pagina 84.

Per visualizzare le opzioni dello strumento nella finestra di ispezione Proprietà per uno strumento che si sta già utilizzando:

Scegliere Seleziona > Deseleziona per deselezionare tutti gli oggetti.


Per ulteriori informazioni sulle opzioni strumenti specifiche, consultare le sezioni del manuale Uso di Fireworks che presentano i vari strumenti o la guida in linea di Fireworks.

Selezione di uno strumento da un gruppo di strumenti

Un piccolo triangolo nell’angolo inferiore destro di uno strumento del pannello Strumenti indica che esso fa parte di un gruppo di strumenti. Ad esempio, lo strumento Rettangolo fa parte del gruppo di strumenti delle forme di base, che comprende inoltre gli strumenti Rettangolo arrotondato, Ellisse e Poligono.

Per scegliere uno strumento alternativo da un gruppo di strumenti:

1 Fare clic sull’icona dello strumento e tenere premuto il pulsante del mouse.

Appare un menu a comparsa contenente le icone degli strumenti, i nomi degli strumenti e i tasti di scelta rapida. A sinistra del nome dello strumento correntemente selezionato è presente un segno di spunta.

2 Trascinare il puntatore per evidenziare lo strumento desiderato e rilasciare il pulsante del mouse.

Lo strumento appare nel pannello Strumenti, mentre le opzioni dello strumento appaiono nella finestra di ispezione Proprietà.

Uso della finestra di ispezione Proprietà

La finestra di ispezione Proprietà è un pannello sensibile al contesto che visualizza le proprietà della selezione corrente, le opzioni dello strumento corrente o le proprietà del documento. Per impostazione predefinita, la finestra di ispezione Proprietà è agganciata nella parte inferiore dello spazio di lavoro.

La finestra di ispezione Proprietà può essere aperta a metà altezza, visualizzando solo due file di proprietà, o ad altezza completa, visualizzando quattro file. È possibile inoltre comprimere completamente la finestra di ispezione Proprietà pur lasciandola nello spazio di lavoro.

Nota: Nella maggior parte delle procedure contenute nel manuale Uso di Fireworks si presume che la finestra di ispezione Proprietà sia visualizzata ad altezza completa.

Capitolo 384

Per sganciare la finestra di ispezione Proprietà:

Trascinare il dispositivo di aggancio situato nell’angolo superiore sinistro in un altro punto dello spazio di lavoro.

Per agganciare la finestra di ispezione Proprietà alla parte inferiore dello spazio di lavoro (solo Windows):

Trascinare la barra laterale della finestra di ispezione Proprietà nella parte inferiore dello schermo.

Per espandere una finestra di ispezione Proprietà da metà altezza ad altezza completa, rivelando opzioni supplementari:

• Fare clic sulla freccia dell’espansore nell’angolo inferiore destro della finestra di ispezione Proprietà.

• Fare clic sull’icona nella parte superiore destra della finestra di ispezione Proprietà e scegliere Altezza completa nel menu Opzioni della finestra di ispezione Proprietà.

Nota: In ambiente Windows, il menu Opzioni è disponibile solo se la finestra di ispezione Proprietà è agganciata.

Per ridurre la finestra di ispezione Proprietà a metà altezza:

• Fare clic sulla freccia dell’espansore nell’angolo inferiore destro della finestra di ispezione Proprietà.

• Scegliere Metà altezza nel menu Opzioni della finestra di ispezione Proprietà.

Nota: In ambiente Windows, il menu Opzioni è disponibile solo se la finestra di ispezione Proprietà è agganciata.

Per ridurre la finestra di ispezione Proprietà quando è agganciata:

• Fare clic sull’icona dell’espansore o sul titolo della finestra di ispezione Proprietà.

• Scegliere Riduci gruppo pannelli nel menu Opzioni della finestra di ispezione Proprietà agganciata.

Per ulteriori informazioni sulle opzioni specifiche della finestra di ispezione Proprietà, consultare le sezioni appropriate del manuale Uso di Fireworks o la guida in linea di Fireworks.

Uso dei pannelli I pannelli sono comandi flottanti che consentono di modificare vari aspetti di un oggetto selezionato o elementi del documento. I pannelli permettono di lavorare su fotogrammi, livelli, simboli, campioni colore e altro ancora. Ogni pannello può essere trascinato, in modo da consentire il raggruppamento dei pannelli in disposizioni personalizzate.

Il Mixer colori e il pannello Campioni colore gestiscono la tavolozza colori del documento corrente.

I pannelli Livelli e Fotogrammi consentono di organizzare la struttura dei documenti e contengono opzioni per la creazione, l’eliminazione e la manipolazione dei livelli e dei fotogrammi. Il pannello Fotogrammi contiene opzioni per la creazione di animazioni.

Il pannello Info fornisce informazioni sulle dimensioni degli oggetti selezionati e sulle coordinate esatte del puntatore mentre lo si sposta da un punto all’altro dell’area di lavoro.


Il pannello Comportamenti permette di gestire i comportamenti, che determinano cosa avviene quando i punti attivi o le porzioni rispondono al movimento del mouse.

Il pannello Cronologia elenca i comandi utilizzati più di recente, consentendo così di annullarli o ripristinarli con rapidità. È inoltre possibile selezionare più azioni e quindi salvarle e riutilizzarle come comandi. Per ulteriori informazioni, consultare “Uso del pannello Cronologia per annullare e ripristinare operazioni multiple” a pagina 101.

Il pannello Libreria contiene simboli grafici e simboli per pulsanti e animazioni. È possibile trascinare con facilità istanze di questi simboli dal pannello Libreria al documento. È possibile effettuare modifiche globali a tutte le istanze semplicemente modificando il simbolo. Per ulteriori informazioni, consultare la Guida di Fireworks (Guida > Uso di Fireworks).

Il pannello Ottimizza consente di gestire le impostazioni che controllano le dimensioni di un oggetto e il tipo di file e di lavorare con la tavolozza colori del file o della porzione da esportare.

Il pannello Stili consente di memorizzare e riutilizzare le combinazioni di caratteristiche di oggetti oppure scegliere uno stile predefinito.

Il pannello URL consente di creare librerie contenenti URL frequentemente utilizzati.

Il pannello Trova e sostituisci consente di cercare e sostituire elementi come testo, URL, caratteri e colori in uno o più documenti.

Il pannello Log progetti permette di tenere traccia e di controllare le modifiche apportate a più file quando si utilizza la funzione Trova e sostituisci o l’elaborazione batch.

Il pannello Risposte è una nuova risorsa in grado di scaricare dinamicamente ampie e utili informazioni dal sito Web Macromedia. Il pannello è dotato di funzioni di ricerca da tastiera per la ricerca di informazioni basate sul Web da una varietà di risorse.

Organizzazione dei gruppi di pannelli e dei pannelli

Per impostazione predefinita, i pannelli di Fireworks MX sono agganciati in gruppi nell’area di aggancio sul lato destro dello spazio di lavoro. È possibile sganciare i gruppi di pannelli, aggiungere pannelli a un gruppo, sganciare singoli pannelli, riorganizzare l’ordine dei gruppi di pannelli agganciati, nonché ridurre e chiudere i gruppi di pannelli. È possibile inoltre aprire e chiudere singoli pannelli.

Per sganciare o spostare un gruppo di pannelli o un pannello:

Trascinare il dispositivo di aggancio del pannello situato nell’angolo superiore sinistro, allontanandolo dall’area di aggancio del pannello posto sul lato destro dello schermo.

Per agganciare un gruppo di pannelli o un pannello:

Trascinare il dispositivo di aggancio del pannello sull’area di aggancio del pannello.

Mentre si trascina un pannello o un gruppo di pannelli sull’area di aggancio, una riga o un rettangolo di anteprima del posizionamento mostra la sua collocazione tra i gruppi.

Per ridurre o espandere un gruppo di pannelli o un pannello, eseguire una delle seguenti procedure:

• Fare clic sul titolo del gruppo di pannelli o del pannello.

Nota: Quando il gruppo di pannelli o il pannello sono ridotti, la barra del titolo è ancora visibile.

• Fare clic sulla freccia dell’espansore nell’angolo superiore sinistro del gruppo di pannelli o del pannello.

Capitolo 386

Per separare un pannello da un gruppo di pannelli:

Trascinare la scheda del pannello allontanandola dal gruppo di pannelli.

Per aggiungere un pannello a un gruppo di pannelli aperto:

Trascinare il dispositivo di aggancio del pannello sull’area sottostante il nome del gruppo di pannelli.

Per rinominare un gruppo di pannelli:

1 Fare clic sull’icona nella parte superiore destra del gruppo di pannelli e scegliere Rinomina gruppo pannelli nel menu Opzioni.

2 Immettere il nuovo nome.

Per riportare i pannelli alle posizioni predefinite per la risoluzione dello schermo, eseguire una delle seguenti procedure:

• Scegliere Comandi > Impostazioni layout pannelli > 800 x 600.



Per aprire un pannello:

Scegliere il nome del pannello nel menu Finestra.

Suggerimento: Un segno di spunta accanto al nome di un pannello nel menu Finestra indica che il pannello è aperto.

Per chiudere un pannello, eseguire una delle seguenti procedure:

• Scegliere il nome del pannello nel menu Finestra.

• Fare clic sul pulsante Chiudi nella barra del titolo del pannello quando il pannello è sganciato.

Per nascondere tutti i pannelli e la finestra di ispezione Proprietà:

Scegliere Visualizza > Nascondi pannelli. Per visualizzare i pannelli nascosti, scegliere nuovamente Visualizza > Nascondi pannelli.

Nota: I pannelli nascosti nel momento in cui si seleziona Nascondi pannelli rimangono nascosti quando si deseleziona il comando.

Impostazione delle opzioni dei pannelli

In genere, è possibile impostare le opzioni di un pannello utilizzando i menu a comparsa, le tavolozze colori, i dispositivi di scorrimento o di selezione. Ad alcune opzioni sono associate caselle di testo nelle quali è possibile immettere testo o valori.

Per modificare un’opzione utilizzando un menu a comparsa:

1 Fare clic sull’opzione.

2 Modificare il valore:

• Scegliere un’opzione o un campione colore.

• Trascinare il dispositivo di scorrimento o di selezione.

• Digitare la prima lettera dell’opzione che si desidera scegliere e premerla ripetutamente per scorrere tutte le opzioni che iniziano con la lettera digitata (solo per Windows).


Per inserire informazioni in una casella di testo di un pannello:

1 Fare clic nella casella di testo.

2 Digitare un valore.

3 Premere Invio.

Uso di un gruppo di pannelli o del menu Opzioni di un pannello

Ogni pannello o gruppo di pannelli presenta un menu Opzioni contenente un elenco di scelte specifiche per il pannello o gruppo di pannelli attivo. Un menu Opzioni appare inoltre nella finestra di ispezione Proprietà (tranne in Windows quando la finestra di ispezione Proprietà non è agganciata).

Per scegliere un’opzione dal menu Opzioni di un pannello o gruppo di pannelli:

1 Fare clic sull’icona del menu Opzioni nell’angolo superiore destro del pannello o del gruppo di pannelli per aprire il menu.

2 Fare clic per scegliere una voce di menu.

Salvataggio del layout dei pannelli

È possibile salvare il layout dei pannelli utilizzando il menu Comandi. La volta successiva che si apre Fireworks, i pannelli saranno disposti nella stessa posizione.

Per salvare il layout di un pannello:

1 Scegliere Comandi > Salva layout pannelli.

2 Attribuire un nome al layout del pannello e fare clic su OK.

Per aprire il layout salvato di un pannello:

Scegliere Comandi > Impostazioni layout pannelli, quindi scegliere un layout di pannello nel sottomenu.

Capitolo 388

Informazioni sul pulsante Esportazione rapida

Il pulsante Esportazione rapida consente di esportare i file di Fireworks in una serie di applicazioni Macromedia, tra cui Dreamweaver, Flash, Director e FreeHand. Inoltre, è possibile esportare i file in Photoshop, FrontPage, Adobe® GoLive® e Illustrator, oppure visualizzarli in anteprima nel browser prescelto. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Apertura e spostamento delle barre degli strumenti (solo per Windows)

Fireworks MX per Windows comprende due barre degli strumenti contenenti i comandi comuni di Fireworks.

Per visualizzare o nascondere una barra degli strumenti:

Scegliere Finestra > Barre degli strumenti, quindi selezionare una barra degli strumenti.

Per sganciare una barra degli strumenti:

Trascinare la barra degli strumenti allontanandola dalla sua posizione di aggancio.

Nota: Se una barra degli strumenti non è agganciata, è possibile fare clic sul pulsante Chiudi nell’angolo superiore destro della barra del titolo per chiuderla.

Per agganciare una barra degli strumenti:

Trascinare la barra degli strumenti su un’area di aggancio nella parte superiore, inferiore, sinistra o destra della finestra dell’applicazione finché non compare il rettangolo di anteprima del posizionamento.

Spostamento all’interno dei documenti e loro visualizzazione È possibile controllare il rapporto di ingrandimento, il numero di viste e la modalità di visualizzazione del documento. Inoltre, è possibile effettuare una panoramica della vista del documento, che risulta particolarmente utile se, una volta effettuato un ingrandimento, l’intera area di lavoro non risultasse più visibile nella sua interezza.


Zoom e panoramica

Fireworks consente di ingrandire o ridurre un documento a una percentuale di ingrandimento predefinita o stabilita dall’utente.

Per ingrandire utilizzando incrementi preimpostati, eseguire una delle seguenti procedure:

• Scegliere lo strumento Zoom e fare clic all’interno della finestra del documento per definire il nuovo punto centrale. Ad ogni clic l’immagine viene ingrandita alla percentuale preimpostata successiva.

• Scegliere un’impostazione di zoom nel menu a comparsa Imposta l’ingrandimento situato nella parte inferiore della finestra del documento.

• Scegliere Ingrandisci o una percentuale di ingrandimento preimpostata nel menu Visualizza.

Per ridurre utilizzando incrementi preimpostati, eseguire una delle seguenti procedure:

• Scegliere lo strumento Zoom e fare clic all’interno della finestra del documento tenendo premuto il tasto Alt (Windows) o Opzione (Macintosh). Ad ogni clic la vista viene ridotta alla percentuale preimpostata successiva.

Strumento Zoom

Strumento Mano

Menu a comparsa Zoom

Capitolo 390

• Scegliere un’impostazione di zoom nel menu a comparsa Imposta l’ingrandimento situato nella parte inferiore della finestra del documento.

• Scegliere Riduci o una percentuale di ingrandimento preimpostata nel menu Visualizza.

Per ingrandire un’area specifica senza essere vincolati a incrementi di ingrandimento preimpostati:

1 Scegliere lo strumento Zoom.

2 Trascinare il mouse sulla parte dell’immagine che si desidera ingrandire.

La dimensione della casella di selezione dello zoom definisce la percentuale di ingrandimento precisa, visualizzata nella casella di testo Imposta l’ingrandimento.

Nota: Non è possibile immettere una percentuale di ingrandimento nella casella di testo Imposta l’ingrandimento.

Per effettuare una riduzione basata su un’area specifica:

Tenere premuto il tasto ALT (Windows) o OPZIONE (Macintosh) e trascinare un’area di selezione con lo strumento Zoom.

Per ritornare alla percentuale di ingrandimento 100%:

Fare doppio clic sullo strumento Zoom nel pannello Strumenti.

Per effettuare una panoramica all’interno del documento:

1 Scegliere lo strumento Mano.

2 Trascinare il puntatore Mano.

Mentre si esegue la panoramica oltre l’area di lavoro, la vista continua ad eseguire la panoramica consentendo di continuare a lavorare con i pixel sul bordo dell’area di lavoro.

Per adattare il documento alla vista corrente:

Fare doppio clic sullo strumento Mano.

Uso delle modalità di visualizzazione per gestire lo spazio di lavoro

I pulsanti delle modalità di visualizzazione nell’area Visualizza del pannello Strumenti consentono di scegliere tra una delle tre modalità di visualizzazione per controllare il layout dello spazio di lavoro:

La Modalità schermo standard è la vista predefinita della finestra del documento.

La Modalità a tutto schermo con menu è una vista a tutto schermo della finestra del documento impostata su uno sfondo grigio con menu, barre degli strumenti, barre di scorrimento e pannelli visibili.

La Modalità a tutto schermo è una vista a tutto schermo della finestra del documento impostata su uno sfondo nero senza menu, barre degli strumenti o barre del titolo visibili.

Per modificare le modalità di visualizzazione, eseguire una delle seguenti procedure:

• Per passare alla modalità a tutto schermo con menu, fare clic sul pulsante Modalità a tutto schermo con menu nel pannello Strumenti.

• Per passare alla modalità a tutto schermo, fare clic sul pulsante Modalità a tutto schermo nel pannello strumenti.


• Per tornare alla modalità Schermo standard, fare clic col pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto CONTROLLO (Macintosh) nella finestra del documento e selezionare Esci da Modalità a tutto schermo, oppure fare clic sul pulsante Modalità schermo standard nel pannello Strumenti.

Visualizzazione di viste documento multiple

Le viste multiple permettono di vedere contemporaneamente un documento a ingrandimenti differenti. Le modifiche apportate in una vista appariranno automaticamente in tutte le altre viste dello stesso documento.

Per aprire una vista addizionale del documento a una diversa impostazione di zoom:

1 Scegliere Finestra > Nuova finestra.

2 Scegliere un’impostazione di zoom per la nuova finestra.

Per affiancare le viste del documento:

Scegliere Finestra > Affianca in orizzontale o Finestra > Affianca in verticale.

Per chiudere la finestra di una vista del documento:

Fare clic sul pulsante Chiudi della finestra.

Controllo del ridisegno del documento

Le modalità di visualizzazione incidono sulla rappresentazione a video dei documenti, ma non sui dati degli oggetti o sulla qualità dell’output.

Per controllare il ridisegno del documento:

Scegliere Visualizza > Completa.

Quando è selezionato Completa, Fireworks visualizza il documento in tutti i colori disponibili con tutti i dettagli. Se Completa è deselezionato, Fireworks visualizza le tracce con un’ampiezza di 1 pixel senza riempimento e visualizza le immagini barrate da una X.

Modalità di visualizzazione e bozza

Per visualizzare un documento nel modo in cui apparirebbe su una piattaforma diversa:

• In ambiente Windows, scegliere Visualizza > Gamma Macintosh.

Capitolo 392

• In ambiente Macintosh, scegliere Visualizza > Gamma Windows.

Fireworks visualizza in anteprima il modo in cui il documento apparirebbe sulla piattaforma dell’altro computer. Ad esempio, se si lavora sulla piattaforma Windows, è possibile utilizzare questo comando per visualizzare in anteprima il modo in cui un documento apparirebbe sulla piattaforma Macintosh.

Uso del Mini-Launcher

Il Mini-Launcher contiene delle icone per aprire e chiudere i pannelli più frequentemente utilizzati, compresi i pannelli Mixer colori e Info, Ottimizza, Livelli, Libreria, Stili e Comportamenti. Se è attivo, il Mini-Launcher è situato nella parte inferiore della finestra del documento. Per impostazione predefinita il Mini-Launcher non è visibile.

Per visualizzare il Mini-Launcher:

1 Scegliere Modifica > Preferenze.

2 Nella scheda Generale, scegliere Mostra icone schede nella sezione Spazio di lavoro e fare clic su OK.

Per aprire o chiudere un pannello dal Mini-Launcher:

Fare clic sull’icona corrispondente del pannello.

Nota: Lo sfondo dell’icona del pannello è evidenziato mentre il pannello è aperto.

Uso della barra di stato (solo per Windows)

Se è attiva, la barra di stato è visualizzata nella parte inferiore della finestra dell’applicazione di Fireworks. Essa offre utili suggerimenti e informazioni sugli oggetti e gli strumenti selezionati. Per impostazione predefinita la barra di stato è disattivata.

Per attivare o disattivare la barra di stato:

Scegliere Visualizza > Barra di stato.

Per utilizzare la barra di stato:

Selezionare un oggetto o uno strumento, oppure spostare il puntatore su uno strumento nel pannello Strumenti.

Le informazioni sull’oggetto o sull’operazione selezionati vengono visualizzate nella barra di stato.


Modifica dell’area di lavoroQuando si crea per la prima volta un nuovo documento di Fireworks, occorre impostare le caratteristiche del documento. Utilizzando il menu Elabora o la finestra di ispezione Proprietà, è possibile modificare in qualsiasi momento le dimensioni e il colore dell’area di lavoro nonché la risoluzione dell’immagine. Mentre si lavora sul documento, è inoltre possibile ruotare l’area di lavoro e tagliare parti non desiderate di esso.

Modifica delle dimensioni, del colore e della risoluzione dell’area di lavoro

Fireworks semplifica la modifica delle dimensioni e del colore dell’area di lavoro, nonché della risoluzione dell’immagine.

Per modificare le dimensioni dell’area di lavoro:


• Scegliere Elabora > Area di lavoro > Dimensioni area di lavoro.

• Scegliere Seleziona > Deseleziona, fare clic sullo strumento Puntatore per visualizzare le proprietà del documento nella finestra di ispezione Proprietà, quindi fare clic sul pulsante Dimensioni area di lavoro.

2 Immettere le nuove dimensioni nelle caselle di testo Larghezza e Altezza.

3 Fare clic su un pulsante Aggancio per specificare quali lati dell’area di lavoro di Fireworks aggiungere o eliminare, quindi fare clic su OK.

Nota: Per impostazione predefinita, l’aggancio centrale è selezionato, indicando che le modifiche alle dimensioni dell’area di lavoro vengono effettuate su tutti i lati.

Per modificare il colore dell’area di lavoro dal menu Elabora:

1 Scegliere Elabora > Area di lavoro > Colore area di lavoro.

2 Scegliere Bianco, Trasparente o Personalizzato. Se si sceglie Personalizzato, fare clic su un colore nella finestra a comparsa dei campioni colore.

Per selezionare il colore dell’area di lavoro dalla finestra di ispezione Proprietà:

1 Scegliere Seleziona > Deseleziona, fare clic sullo strumento Puntatore per visualizzare le proprietà del documento nella finestra di ispezione Proprietà, quindi fare clic sulla casella Colore area di lavoro.

2 Selezionare un colore nella finestra a comparsa dei campioni colore, oppure fare clic con il contagocce su uno dei colori presenti sullo schermo. Per scegliere un’area di lavoro trasparente, fare clic sul pulsante Nessuno nella finestra a comparsa dei campioni colore.

Per ridimensionare un documento e il relativo contenuto:


• Scegliere Seleziona > Deseleziona, fare clic sullo strumento Puntatore per visualizzare le proprietà del documento nella finestra di ispezione Proprietà, quindi fare clic sul pulsante Dimensioni immagine nella finestra di ispezione Proprietà.

Capitolo 394

• Scegliere Elabora > Area di lavoro > Dimensioni immagine.

Si aprirà la finestra di dialogo Dimensioni immagine.

2 Nelle caselle di testo Dimensioni in pixel, immettere le nuove dimensioni orizzontale e verticale per l’immagine.

È possibile modificare le unità di misura. Se l’opzione Ridefinisci immagine non è selezionata, potranno essere modificati solo la risoluzione o le dimensioni di stampa, ma non le dimensioni in pixel.

3 Immettere i valori nelle caselle di testo Dimensioni di stampa per impostare le nuove dimensioni orizzontali e verticali dell’immagine stampata.

4 Immettere i nuovi valori per la risoluzione dell’immagine nella casella di testo Risoluzione.

È possibile scegliere l’unità pixel/pollice o pixel/cm, oppure selezionare Ridefinisci immagine. Modificando la risoluzione cambiano anche le dimensioni in pixel.


• Per mantenere lo stesso rapporto tra le dimensioni orizzontale e verticale del documento, selezionare Vincola proporzioni.

• Deselezionare invece Vincola proporzioni per ridimensionare larghezza e altezza in modo indipendente.

6 Selezionare Ridefinisci immagine per aggiungere o eliminare pixel durante il ridimensionamento dell’immagine e approssimare così lo stesso aspetto anche con dimensioni diverse.

7 Fare clic su OK.


Informazioni sulla ridefinizione

La ridefinizione in Fireworks differisce dalla maggior parte delle applicazioni di modifica immagini. Fireworks contiene infatti oggetti immagine basati su pixel e oggetti tracciati basati su vettori.

• Durante la ridefinizione della bitmap, è necessario aggiungere o eliminare pixel per ingrandire o ridurre l’immagine.

• Durante la ridefinizione di un vettore, si verifica solo una ridotta perdita di qualità, in quanto il tracciato viene ridisegnato matematicamente nelle dimensioni maggiori o inferiori.

Poiché gli oggetti vettoriali in Fireworks sono composti di pixel, alcuni tratti o riempimenti possono comparire leggermente diversi in seguito alla ridefinizione, in quanto i pixel che compongono il tratto o il riempimento devono essere ridisegnati.

Nota: Durante la modifica delle dimensioni dell’immagine, le guide, gli oggetti punto attivo e gli oggetti porzione vengono anch’essi ridimensionati.

Il ridimensionamento delle immagini bitmap presenta sempre il problema se aggiungere o rimuovere pixel per ridimensionare l’immagine o piuttosto modificare il numero dei pixel per pollice o centimetro.

È possibile modificare le dimensioni di un’immagine bitmap regolando la risoluzione o ridefinendo l’immagine. Regolando la risoluzione, si modificano le dimensioni dei pixel nell’immagine, in modo che in un dato spazio possa essere contenuto un numero maggiore o minore di pixel. Regolando la risoluzione senza effettuare il ridimensionamento non si verifica una perdita di dati.

La ridefinizione con ampliamento, vale a dire l’aggiunta di pixel all’immagine per ingrandirla, può a sua volta produrre una perdita di qualità perché i pixel aggiunti non sempre corrispondono all’immagine originale.

La ridefinizione con riduzione, vale a dire l’eliminazione di pixel per ridurre l’immagine, produce sempre una perdita di qualità, in quanto per ridimensionare l’immagine vengono scartati dei pixel. La perdita di dati nell’immagine è un altro effetto collaterale della ridefinizione con riduzione.

Rotazione dell’area di lavoro

La rotazione dell’area di lavoro è particolarmente utile quando l’immagine importata risulta capovolta o posizionata lateralmente. L’area di lavoro può essere ruotata di 180 gradi oppure di 90 gradi in senso orario e antiorario.

Durante la rotazione dell’area di lavoro, vengono ruotati anche tutti gli oggetti presenti nel documento.

Per ruotare l’area di lavoro, eseguire una delle seguenti procedure:

• Scegliere Elabora > Area di lavoro > Rotazione 180°.

• Scegliere Elabora > Area di lavoro > Rotazione 90° in senso orario.

• Scegliere Elabora > Area di lavoro > Rotazione 90° in senso antiorario.

Capitolo 396

Ritaglio dell’area di lavoro

Se il documento contiene spazio vuoto in eccesso intorno al contenuto dell’area di lavoro, è possibile ritagliare l’area di lavoro. È inoltre possibile rimuovere lo spazio vuoto dell’area di lavoro ritagliando il documento. Per ulteriori informazioni sul ritaglio, consultare “Ritaglio di un documento” a pagina 97.

Originale; Area di lavoro ritagliata

Per ritagliare l’area di lavoro:

Scegliere Elabora > Area di lavoro > Taglia area di lavoro.

Le porzioni dell’area di lavoro che si estendono oltre i pixel più esterni del documento vengono eliminate automaticamente. Ogni bordo dell’area di lavoro è ritagliato in base ai bordi dell’oggetto o degli oggetti del documento. Se il documento è formato da più fotogrammi, il comando Taglia area di lavoro opererà in modo da includere tutti gli oggetti di tutti i fotogrammi e non solo di quello corrente.

Adattamento dell’area di lavoro

È possibile modificare l’area di lavoro espandendola per adattarla agli oggetti che si estendono oltre i suoi margini.

Per adattare l’area di lavoro:

Scegliere Elabora > Area di lavoro > Adatta area di lavoro.

Ritaglio di un documento

Con la funzione di ritaglio è possibile eliminare le porzioni indesiderate di un documento. L’area di lavoro si ridimensiona per adattarsi all’area definita dall’utente.

Per impostazione predefinita, il ritaglio consente di eliminare gli oggetti che si estendono oltre i margini dell’area di lavoro. Per conservare gli oggetti all’esterno dell’area di lavoro, occorre modificare una preferenza prima del ritaglio.


Per ritagliare un documento:

1 Scegliere lo strumento Ritaglio nel pannello Strumenti oppure selezionare Modifica > Ritaglia documento.

2 Trascinare una casella di delimitazione nell’area di lavoro. Regolare le maniglie di ritaglio fino a quando la casella di delimitazione non circonda l’area del documento da conservare.

3 Fare doppio clic all’interno della casella di delimitazione o premere Invio per ritagliare il documento.

L’area di lavoro si ridimensiona in base all’area definita e gli oggetti oltre i bordi dell’area di lavoro vengono cancellati.

Suggerimento: È possibile conservare gli oggetti esterni all’area di lavoro deselezionando Elimina oggetti durante ritaglio nella scheda Modifica della finestra di dialogo Preferenze prima del ritaglio. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Uso di menu di contesto

I menu di contesto permettono di accedere rapidamente ai comandi di rilievo per la selezione corrente.

Per visualizzare un menu di contesto:

Fare clic col pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto CONTROLLO (Macintosh) su un elemento selezionato nella finestra del documento.

Capitolo 398

Uso dei righelli, delle guide e della griglia Per creare un layout il più preciso possibile degli oggetti e agevolare le operazioni di disegno, utilizzare i righelli e le guide. È possibile collocare le guide nel documento e agganciarvi gli oggetti, oppure attivare la griglia di Fireworks e agganciarvi gli oggetti.

Uso dei righelli

I righelli consentono di misurare, organizzare e pianificare il layout del lavoro. Poiché le immagini di Fireworks sono destinate al Web dove gli elementi grafici vengono misurati in pixel, l’unità di misura dei righelli in Fireworks è sempre il pixel, indipendentemente dall’unità di misura utilizzata per creare il documento.

Per visualizzare e nascondere i righelli:

Scegliere Visualizza > Righelli.


Appaiono i righelli verticali e orizzontali lungo i margini della finestra del documento.

Uso delle guide

Le guide sono linee che vengono trascinate dai righelli all’area di lavoro del documento. Esse sono ausili di disegno che agevolano il posizionamento e l’allineamento degli oggetti. Utilizzare le guide per contrassegnare parti importanti del documento, come i margini, il punto centrale e le aree in cui si desidera eseguire operazioni precise.

Per agevolare l’allineamento degli oggetti, Fireworks consente di agganciare questi ultimi alle guide. È possibile prevenire lo spostamento accidentale delle guide bloccandole.

Nota: Le guide non risiedono su un livello o non vengono esportate con un documento. Esse sono unicamente strumenti di disegno.

Fireworks dispone inoltre di guide porzione, che consentono di sezionare un documento da utilizzare sul Web. Tuttavia, le tradizionali guide immagine differiscono dalle guide porzione. Per ulteriori informazioni sulle guide porzione, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Per creare una guida orizzontale o verticale:

1 Fare clic e trascinare il mouse dal righello corrispondente.

2 Posizionare la guida sull’area di lavoro e rilasciare il pulsante del mouse.

Nota: Per riposizionare la guida è possibile trascinarla nuovamente.

Per spostare una guida in una posizione specifica:

1 Fare doppio clic sulla guida.

Capitolo 3100

2 Immettere la nuova posizione nella finestra di dialogo Sposta guida e fare clic su OK.

Per mostrare o nascondere le guide:

Scegliere Visualizza > Guide > Mostra guide.

Per agganciare gli oggetti alle guide:

Scegliere Visualizza > Guide > Aggancia alle guide.

Per modificare i colori delle guide:

1 Scegliere Visualizza > Guide > Modifica guide.

2 Selezionare il nuovo colore della guida dall’apposita finestra a comparsa e fare clic su OK.

Per bloccare o sbloccare tutte le guide:

Scegliere Visualizza > Guide > Blocca guide.

Per rimuovere una guida:

Trascinare la guida all’esterno dell’area di lavoro.

Uso della griglia

La griglia di Fireworks consente di visualizzare un sistema di linee orizzontali e verticali sull’area di lavoro. La griglia è utile per posizionare con precisione gli oggetti. È possibile inoltre visualizzare, modificare, ridimensionare e modificare il colore della griglia.

Nota: La griglia non risiede su un livello o non viene esportata con un documento. Si tratta di un semplice strumento di disegno.

Per visualizzare e nascondere la griglia:

Scegliere Visualizza > Griglia > Mostra griglia.

Per agganciare gli oggetti alla griglia:

Scegliere Visualizza > Griglia > Aggancia alla griglia.

Per modificare il colore della griglia:

1 Scegliere Visualizza > Griglia > Modifica griglia.

2 Selezionare il nuovo colore della griglia dall’apposita finestra a comparsa e fare clic su OK.

Per modificare le dimensioni delle celle della griglia:

1 Scegliere Visualizza > Griglia > Modifica griglia.

2 Immettere i valori appropriati nelle caselle di testo della spaziatura orizzontale e verticale e fare clic su OK.

Uso del pannello Cronologia per annullare e ripristinare operazioni multiple Con il pannello Cronologia è possibile visualizzare, modificare e ripetere le operazioni eseguite per creare il documento. Il pannello Cronologia riporta le operazioni più recenti eseguite in Fireworks, fino al numero specificato nel campo Livelli annullamento della finestra di dialogo Preferenze.


Con il pannello Cronologia è possibile eseguire le seguenti operazioni:

• Annullare e ripristinare rapidamente le azioni recenti.

• Scegliere i comandi eseguiti di recente dal pannello Cronologia e ripeterli.

• Copiare negli Appunti i comandi selezionati come equivalente di testo JavaScript.

• Salvare un gruppo di azioni eseguite di recente come comando personalizzato, quindi scegliere quest’ultimo dal menu Comando per riutilizzare il gruppo come comando unico. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Per annullare e ripetere le azioni:

1 Scegliere Finestra > Cronologia per aprire il pannello Cronologia.

2 Trascinare il marcatore Annulla in alto o in basso.

Per ripetere le azioni:

1 Eseguire le azioni.

2 Nel pannello Cronologia, eseguire una delle seguenti procedure per evidenziare le azioni da ripetere:

• Fare clic su un’azione per evidenziarla.

• Fare clic tenendo premuto il tasto Ctrl (Windows) o il tasto COMANDO (Macintosh) per evidenziare più azioni singole.

• Fare clic tenendo premuto MAIUSC per evidenziare un intervallo continuo di azioni.

3 Fare clic sul pulsante Riproduci nella parte inferiore del pannello Cronologia.

Per salvare le azioni da riutilizzare:

1 Evidenziare le azioni da salvare nel pannello Cronologia.

2 Fare clic sul pulsante Salva nella parte inferiore del pannello.

3 Inserire il nome di un comando e fare clic su OK.

Per usare il comando personalizzato salvato:

Scegliere il nome del comando desiderato dal menu Comandi.

Capitolo 3102

CAPITOLO 4

Uso di Fireworks con altre applicazioni

Macromedia Fireworks MX è un componente essenziale per lo sviluppo di contenuto destinato al Web o multimediale. L’ampia gamma di funzionalità di integrazione di Fireworks permette di snellire la procedura di progettazione e di ottimizzarne l’utilizzo con altre applicazioni.

È possibile esportare elementi grafici di Fireworks in numerose applicazioni, ad inclusione di diversi altri prodotti di Macromedia. Se usato congiuntamente ad altre applicazioni Macromedia, Fireworks offre potenti caratteristiche di integrazione:

• Fireworks può essere lanciato per modificare elementi grafici selezionati dall’interno di numerose applicazioni Macromedia, quali Dreamweaver, Flash, HomeSite, FreeHand e Director.

• I comportamenti di Fireworks sono preservati all’esportazione verso numerose applicazioni Macromedia, permettendo l’esportazione di elementi interattivi quali i pulsanti e i rollover.

• Dreamweaver e Fireworks condividono una funzionalità di integrazione nota come Roundtrip HTML che permette di apportare modifiche al file in un’applicazione e fare in modo che quelle modifiche si riflettano perfettamente nell’altra.

• Fireworks è strettamente integrato anche a Flash. Infatti, è possibile importare file sorgente PNG di Fireworks direttamente in Flash senza che sia necessario passare per nessun altro formato grafico intermedio. Flash offre una varietà di opzioni che permettono di controllare le modalità di importazione degli oggetti e dei livelli di Fireworks.

Inoltre, Fireworks semplifica le attività di collaborazione con le applicazioni non Macromedia. L’applicazione permette di lanciare e modificare facilmente elementi grafici e tabelle in Microsoft FrontPage, per esempio, oppure di importare ed esportare elementi grafici di Photoshop come file completamente modificabili.

Operazioni con Macromedia Dreamweaver MXLe esclusive funzionalità di integrazione offerte semplificano il lavoro sui file garantendo la massima intercambiabilità tra Macromedia Dreamweaver e Macromedia Fireworks. Dreamweaver e Fireworks riconoscono e condividono molte delle stesse modifiche ai file, comprese quelle ai collegamenti, alle mappe immagine, alle porzioni e altre ancora. Se combinate, le due applicazioni garantiscono un flusso di lavoro ideale per la modifica, l’ottimizzazione e la collocazione dei file grafici per il Web nelle pagine HTML.

Se si desidera elaborare le immagini e le tabelle di Fireworks all’interno di un file di Dreamweaver, è possibile lanciare Fireworks per apportare le modifiche, quindi tornare al documento aggiornato in Dreamweaver. Per apportare rapidi interventi di ottimizzazione alle immagini e alle animazioni create con Fireworks, si può lanciare la finestra di dialogo di ottimizzazione di Fireworks e quindi immettere le impostazioni aggiornate. In entrambi i casi, gli aggiornamenti interesseranno sia i file collocati in Dreamweaver, che i file sorgente in Fireworks, qualora questi ultimi siano stati lanciati.

103

Per snellire ulteriormente il workflow del Web design, Dreamweaver consente di creare segnaposto per le immagini future di Fireworks. In seguito, è possibile selezionare questi segnaposto e lanciare Fireworks per creare elementi grafici desiderati nelle dimensioni specificate dalle immagini segnaposto di Dreamweaver. Una volta in Fireworks, le dimensioni dell’immagine possono essere modificate a piacimento.

Collocazione di immagini di Fireworks nei file di Dreamweaver

Esistono due procedure alternative per collocare gli elementi grafici di Fireworks in un documento di Dreamweaver. È possibile collocare un elemento grafico completo di Fireworks utilizzando il menu Inserisci di Dreamweaver, oppure si può creare un nuovo documento di Fireworks da un’immagine segnaposto di Dreamweaver.

Inserimento delle immagini di Fireworks in Dreamweaver

È possibile inserire immagini GIF o JPEG generate da Fireworks direttamente in un documento di Dreamweaver. Per prima cosa è necessario esportare le immagini da Fireworks. Per ulteriori informazioni sull’esportazione di immagini GIF e JPEG, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per inserire un’immagine di Fireworks in un documento di Dreamweaver:

1 Posizionare il punto di inserimento dove si intende far comparire l’immagine nella finestra del documento di Dreamweaver.


• Scegliere Inserisci > Immagine.

• Fare clic sul pulsante Inserisci immagine nella categoria Comune del pannello Oggetti.

3 Passare all’immagine esportata da Fireworks, quindi fare clic su Apri.

Se il file immagine non è nel sito corrente di Dreamweaver, compare un messaggio che richiede se si desidera copiare il file nella cartella del sito.

Creazione di nuovi file di Fireworks dai segnaposto di Dreamweaver

I segnaposto immagine combinano la potenza di Fireworks e Dreamweaver permettendo di sperimentare vari layout della pagina Web prima di creare l’illustrazione finale. I segnaposto immagine permettono di specificare le dimensioni e la posizione di future immagini Fireworks da collocare in Dreamweaver.

Quando si crea un’immagine Fireworks da un segnaposto immagine Dreamweaver, viene creato un nuovo documento Fireworks con un’area di lavoro delle stesse dimensioni del segnaposto selezionato. All’interno di Fireworks, è possibile usare ogni strumento Fireworks per creare l’elemento grafico. I documenti possono essere suddivisi in porzioni e resi interattivi con l’aggiunta di pulsanti, rollover e altri comportamenti.

Nota: Tutti i comportamenti applicati all’interno di Fireworks sono conservati al ritorno a Dreamweaver. Allo stesso modo, la maggior parte dei comportamenti di Dreamweaver applicati a segnaposto immagine sono anch’essi conservati durante il lancio e la modifica con Fireworks. Esiste una eccezione: i rollover disgiunti applicati ai segnaposto immagine di Dreamweaver non vengono conservati durante il lancio e la modifica in Fireworks.

Una volta terminata la sessione di Fireworks e ritornati a Dreamweaver, il nuovo elemento grafico di Fireworks creato prende il posto del segnaposto immagine originariamente selezionato.

Capitolo 4104

Per creare un’immagine di Fireworks da un segnaposto immagine di Dreamweaver:

1 In Dreamweaver, salvare il documento HTML desiderato in una posizione all’interno della cartella sito di Dreamweaver.

2 Posizionare il punto di inserimento nella posizione desiderata del documento e scegliere Inserisci > Segnaposto immagine.

Nel documento Dreamweaver viene inserita un’immagine segnaposto.


• Selezionare l’immagine segnaposto e fare clic su Crea nella finestra di ispezione Proprietà.

• Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic sull’immagine segnaposto.

• Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO (Macintosh) e scegliere Crea immagine in Fireworks.

Dreamweaver lancerà Fireworks, qualora quest’ultimo non sia già aperto. La finestra del documento indica che si sta modificando un’immagine da Dreamweaver.

4 Creare un’immagine in Fireworks, quindi fare clic su Completato una volta ultimata.

5 Specificare un nome e una posizione per il file PNG sorgente nella finestra di dialogo Salva con nome, quindi fare clic su Salva.

Nota: Il nome dell’immagine segnaposto immesso dalla finestra di ispezione Proprietà in Dreamweaver viene usato come nome di file predefinito di Fireworks.

Per ulteriori informazioni sul salvataggio dei file PNG di Fireworks, consultare “Salvataggio dei file di Fireworks” a pagina 81.

6 Specificare un nome per il file immagine esportato nella finestra di dialogo Esportazione. Queste sono le JPEG o le GIF che vengono visualizzate in Dreamweaver.

7 Specificare una posizione per il file o i file immagine esportati. La posizione scelta dovrebbe essere all’interno della cartella del sito di Dreamweaver.

Per ulteriori informazioni sull’esportazione, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Uso di Fireworks con altre applicazioni 105


Quando si ritorna a Dreamweaver, l’immagine segnaposto originariamente selezionata viene sostituita con la nuova immagine o tabella di Fireworks creata dall’utente.

Collocazione del codice HTML di Fireworks in Dreamweaver

Esistono diversi metodi per collocare il codice HTML di Fireworks in Dreamweaver. L’HTML di Fireworks può essere esportato, oppure copiato negli Appunti. Inoltre si può aprire in Dreamweaver un file HTML di Fireworks esportato e copiare e incollare sezioni specifiche del codice. Il codice esportato in Dreamweaver può essere facilmente aggiornato utilizzando il comando Aggiorna HTML in Fireworks. In alternativa, si può anche esportare il codice HTML come elemento della libreria di Dreamweaver.

Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks)

Nota: Prima di esportare, copiare o aggiornare l’HTML di Fireworks per l’uso in Dreamweaver, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Esportazione dell’HTML di Fireworks a Dreamweaver

L’esportazione di file di Fireworks a Dreamweaver è un processo in due fasi. Fireworks permette di esportare i file direttamente in una cartella sito di Dreamweaver, generando un file HTML e i file immagine associati nella posizione specificata. Il codice HTML viene poi collocato in Dreamweaver con la funzionalità Inserisci.

Nota: Prima di esportare, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per esportare il codice HTML di Fireworks:

Esportare il documento in formato HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per inserire in un documento di Dreamweaver il codice HTML creato con Fireworks:

1 In Dreamweaver, salvare il documento in un sito definito.

2 Inserire nel documento il punto iniziale del codice HTML.


• Scegliere Inserisci > Immagini interattive > HTML di Fireworks.

• Fare clic sul pulsante Inserisci HTML di Fireworks nella categoria Comune del pannello Oggetti.

4 Nella finestra di dialogo che comparirà, fare clic su Cerca per scegliere il file HTML di Fireworks.

Capitolo 4106

5 Scegliere Cancella il file dopo l’inserimento per spostare il file HTML nel Cestino (Windows e Macintosh) al termine dell’operazione.

Avvalersi di questa opzione qualora il file HTML di Fireworks non sia più necessario dopo l’inserimento. Questa opzione non ha effetto sul file PNG sorgente associato al file HTML.

Nota: Se il file HTML si trova su un’unità di rete, questo verrà eliminato in modo permanente e non semplicemente spostato nel Cestino.

6 Fare clic su OK per inserire nel documento di Dreamweaver il codice HTML assieme alle immagini, alle porzioni e al JavaScript ad esso associati.

Copia dell’HTML di Fireworks negli Appunti per l’uso in Dreamweaver

Un sistema alternativo per collocare in Dreamweaver il codice HTML di Fireworks consiste nel copiarlo negli Appunti da Fireworks e quindi nell’incollarlo direttamente in un documento di Dreamweaver. Tutto il codice HTML e JavaScript associato con il documento Fireworks viene copiato nel documento Dreamweaver, le immagini vengono esportate in una posizione specificata dall’utente e Dreamweaver aggiorna l’HTML con collegamenti a queste immagini correlati al sito.

Nota: Prima di copiare l’HTML negli appunti, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per copiare il codice HTML di Fireworks negli Appunti per utilizzarlo in Dreamweaver:

Copiare il codice HTML negli Appunti da Fireworks e quindi incollarlo in un nuovo documento di Dreamweaver. Per ulteriori informazioni, consultare la guida di Fireworks.

Copia dell’HTML da un file di Fireworks esportato e incollaggio in Dreamweaver

È possibile aprire in Dreamweaver un file HTML di Fireworks esportato e quindi copiare e incollare manualmente le sole sezioni desiderate in un altro documento di Dreamweaver.

Nota: Prima di eseguire l’esportazione da Fireworks, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per copiare il codice da un file di Fireworks esportato e incollarlo in Dreamweaver:

Esportare un file HTML di Fireworks, quindi copiare e incollare il codice in un documento di Dreamweaver esistente. Per ulteriori informazioni, consultare la guida di Fireworks.

Aggiornamento in Dreamweaver dell’HTML di Fireworks esportato

Il comando Aggiorna HTML di Fireworks permette di modificare un documento HTML precedentemente esportato in Dreamweaver.

Nota: Sebbene Aggiorna HTML possa dimostrarsi utile per aggiornare il codice HTML precedentemente esportato a Dreamweaver, Roundtrip HTML offre vantaggi nettamente superiori. Per ulteriori informazioni, consultare “Modifica dei file di Fireworks da Dreamweaver” a pagina 109.

Con il comando Aggiorna HTML, è possibile modificare un’immagine PNG sorgente in Fireworks, poi aggiornare automaticamente tutto il codice HTML esportato e i file delle immagini collocati all’interno di un documento di Dreamweaver. Questo comando permette di aggiornare i file di Dreamweaver anche qualora questo programma non sia in esecuzione.

Nota: Prima di aggiornare l’HTML di Fireworks, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).


Per aggiornare il codice HTML di Fireworks collocato in Dreamweaver:

1 Apportare modifiche al documento PNG desiderato in Fireworks.

2 Scegliere File > Aggiorna HTML, o fare clic sul pulsante Esportazione rapida e scegliere Aggiorna HTML dal menu a comparsa Dreamweaver.

3 Portarsi nel file di Dreamweaver contenente il codice HTML da aggiornare, quindi fare clic su Apri.

4 Portarsi nella cartella di destinazione in cui si intendono collocare i file delle immagini aggiornati, quindi fare clic su Apri.

Fireworks aggiornerà il codice HTML e JavaScript nel documento di Dreamweaver. Inoltre, Fireworks esporterà le immagini associate al codice HTML e le collocherà nella cartella di destinazione specificata.

Qualora Fireworks non riuscisse a reperire il codice HTML corrispondente da aggiornare, offrirà comunque la possibilità di inserire il nuovo codice HTML nel documento di Dreamweaver. Fireworks colloca la sezione JavaScript del nuovo codice all’inizio del documento, mentre la tabella HTML o il collegamento all’immagine vengono inseriti alla fine del file.

Esportazione dei file di Fireworks nelle librerie di Dreamweaver

Gli elementi della libreria di Dreamweaver semplificano la procedura di modifica e aggiornamento dei componenti più utilizzati del sito Web, quali i logo della società o altri elementi grafici che compaiono in tutte le pagine di un sito. Le voci di libreria costituiscono una parte del file HTML ubicata in una cartella Libreria al livello radice del sito. Le voci di libreria compaiono nella tavolozza Libreria di Dreamweaver. È possibile trascinare una copia dalla tavolozza della Libreria in qualsiasi pagina del sito Web.

È impossibile modificare un elemento della libreria direttamente nel documento di Dreamweaver. Dal documento si può modificare solo l’elemento libreria principale. Successivamente, Dreamweaver può aggiornare ogni copia di quell’elemento presente nell’intero sito Web. Gli elementi della libreria di Dreamweaver sono del tutto simili ai simboli di Fireworks; le modifiche al documento libreria principale (LBI) si riflettono in tutte le istanze della libreria del sito.

Per esportare un documento di Fireworks come elemento della libreria di Dreamweaver:


Capitolo 4108

2 Scegliere Libreria Dreamweaver dal menu a comparsa Salva come tipo.

Scegliere la cartella Libreria nel sito di Dreamweaver come posizione nella quale collocare i file. Se questa cartella non esiste, usare la finestra di dialogo Seleziona cartella per creare o individuare la cartella. La cartella deve avere il nome Libreria, dato che Dreamweaver è sensibile alla differenza fra maiuscole e minuscole.

Nota: Dreamweaver non riconosce il file esportato come elemento di libreria a meno che non sia salvato nella cartella Libreria.

3 Nella finestra di dialogo Esporta, digitare un nome per il file.

4 Se l’immagine contiene delle porzioni, scegliere le opzioni relative. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

5 Selezionare Inserisci immagine nella sottocartella per scegliere una cartella separata per il salvataggio delle immagini.


Modifica dei file di Fireworks da Dreamweaver

Roundtrip HTML è una potente funzionalità che ottimizza l’integrazione tra Fireworks e Dreamweaver. Questa caratteristica permette di apportare modifiche in un’applicazione e fare in modo che queste variazioni si riflettano senza soluzione di continuità anche nell’altra. Roundtrip HTML utilizza la funzione di lancio e modifica integrata per intervenire su immagini e tabelle di Fireworks direttamente dal documento di Dreamweaver in cui sono inserite. Dreamweaver lancia automaticamente il file PNG sorgente di Fireworks per l’immagine o la tabella collocata e permette di apportare le modifiche desiderate all’interno di Fireworks. Gli aggiornamenti effettuati in Fireworks vengono applicati all’immagine o tabella collocata quando il file viene riaperto con Dreamweaver.

Nota: Prima di operare con Roundtrip HTML è necessario eseguire alcune operazioni preliminari. Per ulteriori informazioni, consultare “Impostazione delle opzioni di lancio e modifica” a pagina 115.


Informazioni su Roundtrip HTML

Fireworks riconosce e conserva la maggior parte dei tipi di modifiche apportate a un documento di Dreamweaver, incluse le variazioni dei collegamenti, le mappe immagine modificate, il testo e il codice HTML modificato nelle porzioni HTML, nonché i comportamenti condivisi tra Fireworks e Dreamweaver. La finestra di ispezione Proprietà di Dreamweaver permette di identificare le immagini, le porzioni in tabelle e le tabelle generate da Fireworks e presenti nel documento.

Sebbene Fireworks supporti la maggior parte delle modifiche di Dreamweaver, l’applicazione di variazioni di rilievo alla struttura di una tabella all’interno di Dreamweaver può creare differenze inconciliabili tra le due applicazioni. Se si apportano modifiche di rilievo al layout di tabella di Dreamweaver e poi si tenta di lanciare e modificare la tabella in Fireworks, l’utente viene informato che le modifiche effettuate da Fireworks sovrascriveranno qualsiasi precedente variazione alla tabella eseguita con Dreamweaver. Se si intendono apportare modifiche considerevoli a un layout di tabella, usare la funzionalità di lancio e modifica di Dreamweaver all’interno di Fireworks.

Modifica delle immagini di Fireworks

È possibile lanciare Fireworks per modificare le singole immagini collocate all’interno di un documento di Dreamweaver.

Nota: Prima di modificare gli elementi grafici di Fireworks da Dreamweaver, è necessario eseguire alcune operazioni preliminari. Per ulteriori informazioni, consultare “Impostazione delle opzioni di lancio e modifica” a pagina 115.

Per lanciare e modificare un’immagine di Fireworks collocata in Dreamweaver:

1 In Dreamweaver, scegliere Finestra > Proprietà per aprire la finestra di ispezione Proprietà, se necessario.


• Selezionare l’immagine desiderata. (La finestra di ispezione Proprietà identifica la selezione come immagine di Fireworks e visualizza il nome del file PNG sorgente noto per l’immagine). Quindi fare clic su Modifica nella finestra di ispezione Proprietà.

• Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic sull’immagine da modificare.

• Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO (Macintosh) sull’immagine desiderata e scegliere Modifica con Fireworks dal menu di collegamento.

Dreamweaver lancerà Fireworks, qualora quest’ultimo non sia già aperto.

3 Se richiesto, specificare se individuare un file sorgente di Fireworks per l’immagine collocata. Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare “Salvataggio dei file di Fireworks” a pagina 81.

4 Modificare l’immagine in Fireworks. La finestra del documento indica che si sta modificando un’immagine da Dreamweaver.

Dreamweaver riconosce e mantiene tutte le modifiche applicate a un’immagine in Fireworks.

5 Al termine delle modifiche, fare clic su Fine nella finestra del documento.

L’immagine viene esportata utilizzando le impostazioni di ottimizzazione correnti. Viene aggiornato il file GIF o JPEG utilizzato da Dreamweaver e viene salvato il file PNG sorgente eventualmente selezionato.

Capitolo 4110

Nota: Quando si apre un’immagine nella finestra Sito di Dreamweaver, le funzioni di integrazione di Fireworks descritte in precedenza non sono operative e Fireworks non apre il file PNG originale. Per poter utilizzare le funzioni di integrazione di Fireworks, è necessario aprire le immagini dall’interno della finestra del documento di Dreamweaver.

Modifica delle tabelle di Fireworks

Al lancio e modifica di una porzione di immagine che fa parte di una tabella di Fireworks collocata, Dreamweaver lancia automaticamente il file PNG sorgente per tutta la tabella.

Nota: Prima di modificare le tabelle di Fireworks da Dreamweaver, è necessario eseguire alcune operazioni preliminari. Per ulteriori informazioni, consultare “Impostazione delle opzioni di lancio e modifica” a pagina 115.

Per lanciare e modificare una tabella di Fireworks collocata in Dreamweaver:

1 In Dreamweaver, scegliere Finestra > Proprietà per aprire la finestra di ispezione Proprietà, se necessario.


• Fare clic all’interno della tabella, fare clic sul tag TABLE nella barra di stato per selezionare tutta la tabella. (La finestra di ispezione Proprietà identifica la selezione come immagine di Fireworks e visualizza il nome del file PNG sorgente noto per l’immagine). Quindi fare clic su Modifica nella finestra di ispezione Proprietà

• Fare clic sull’angolo superiore sinistro della tabella per selezionarla, quindi fare clic su Modifica nella finestra di ispezione Proprietà.

• Selezionare un’immagine nella tabella, quindi fare clic su Modifica nella finestra di ispezione Proprietà.

• Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic sull’immagine da modificare.

• Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO (Macintosh) sull’immagine, quindi scegliere Modifica con Fireworks dal menu di collegamento.

Dreamweaver lancerà Fireworks, qualora quest’ultimo non sia già aperto. Nella finestra del documento comparirà il file PNG sorgente per l’intera tabella.

Nota: Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare “Salvataggio dei file di Fireworks” a pagina 81.

3 In Fireworks, apportare le modifiche desiderate.

Dreamweaver riconosce e mantiene tutte le modifiche applicate a un’immagine in Fireworks.


Il codice HTML e i file delle porzioni immagine vengono esportati utilizzando le impostazioni di ottimizzazione correnti. La tabella collocata in Dreamweaver viene aggiornata e il file PNG sorgente viene salvato.


Informazioni sui comportamenti di Dreamweaver

Se un singolo elemento grafico non suddiviso in porzioni di Fireworks viene inserito in un documento di Dreamweaver e gli viene applicato un comportamento di Dreamweaver, al momento del lancio e modifica in Fireworks all’elemento grafico viene sovrapposta una porzione. La porzione non è inizialmente visibile, dato che le porzioni sono automaticamente disattivate quando si lanciano e modificano elementi grafici singoli e non suddivisi ai quali siano stati applicati comportamenti di Dreamweaver. La porzione può essere visualizzata attivandone la visibilità dal livello Web del pannello Livelli.

Quando si visualizzano le proprietà di una porzione di Fireworks dotata di un comportamento di Dreamweaver, la casella di testo del collegamento nella finestra di ispezione Proprietà può visualizzare javascript:;. L’eliminazione di questo testo è assolutamente priva di conseguenze negative. Anche sovrapponendovi un URL, il comportamento rimarrà comunque intatto alla riapertura del file in Dreamweaver.

Dreamweaver supporta tutti i comportamenti applicati a Fireworks, inclusi quelli richiesti per i rollover e i pulsanti. Durante una sessione di lancio e modifica Fireworks supporta i seguenti comportamenti di Dreamweaver:

• Rollover semplice

• Scambio di immagine

• Ripristino di immagini scambiate

• Impostazione del testo della barra di stato

• Impostazione dell’immagine della barra di navigazione

• Menu a comparsa

Ottimizzazione in Dreamweaver di immagini e animazioni di Fireworksr

Dreamweaver permette di lanciare la finestra di dialogo Anteprima esportazione di Fireworks per apportare rapidi ritocchi alle immagini e alle animazioni di Fireworks collocate, come ad esempio la ridefinizione o la modifica del tipo di file. Fireworks permette di modificare le impostazioni di ottimizzazione, le impostazioni di animazione e le dimensioni e l’area dell’immagine esportata.

Per modificare le impostazioni di ottimizzazione per un’immagine di Fireworks collocata in Dreamweaver:

1 In Dreamweaver, selezionare l’immagine desiderata e scegliere Comandi > Ottimizza immagine in Fireworks.

Capitolo 4112

2 Qualora richiesto, specificare se lanciare un file sorgente di Fireworks per l’immagine collocata.

Si apre una finestra di dialogo. Sebbene la barra del titolo non visualizzi questo nome, si tratta della finestra di dialogo Anteprima esportazione di Fireworks.

3 Apportare le modifiche desiderate nella finestra di dialogo Anteprima esportazione:

• Per modificare le impostazioni di ottimizzazione, fare clic sulla scheda Opzioni. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

• Per modificare le dimensioni e l’area dell’immagine esportate, fare clic sulla scheda File e modificare le impostazioni desiderate. Se si modificano le dimensioni dell’immagine in Fireworks, è necessario reimpostare le dimensioni dell’immagine nella finestra di ispezione Proprietà quando si riapre il file in Dreamweaver.

• Per modificare le impostazioni dell’animazione per l’immagine, fare clic sulla scheda Animazione e variare i parametri definiti.

4 Al termine delle modifiche sull’immagine, fare clic su Aggiorna.

L’immagine viene esportata utilizzando le nuove impostazioni di ottimizzazione. Di conseguenza, viene aggiornata l’immagine GIF o JPEG posizionata in Dreamweaver e viene salvato l’eventuale file sorgente PNG.

Se è stato modificato il formato dell’immagine, la funzione Controllo collegamenti di Dreamweaver richiederà di aggiornare i riferimenti all’immagine. Ad esempio, se si è modificato il formato di un’immagine denominata mia_immagine da GIF a JPEG, fare clic su OK quando richiesto per modificare tutti i riferimenti a mia_immagine.gif nel sito e cambiarli in mia_immagine.jpg.


Ridimensionamento delle immagini di Fireworks

Quando si lancia e modifica da Dreamweaver un’immagine creata con Fireworks, è possibile ridimensionare l’immagine e selezionare un’area specifica da esportare.

Nota: Se si modificano le dimensioni dell’immagine in Fireworks, è inoltre necessario reimpostare le dimensioni dell’immagine nella finestra di ispezione Proprietà quando si ritorna a Dreamweaver.

Per specificare le dimensioni dell’immagine esportata:

1 In Fireworks, nella finestra di dialogo Anteprima esportazione, fare clic sulla scheda File.

2 Per scalare l’immagine durante l’esportazione, specificare un valore percentuale oppure immettere i parametri della larghezza e delle altezza desiderate in pixel. Selezionare Vincola per scalare la larghezza e l’altezza in modo proporzionale.

3 Per esportare un’area selezionata dell’immagine, selezionare l’opzione Area di esportazione ed eseguire una delle operazioni seguenti per specificare l’area da esportare:

• Trascinare il bordo punteggiato che compare attorno all’anteprima fino a racchiudere l’area di esportazione desiderata. (Trascinare all’interno dell’anteprima per far rientrare le aree nascoste nel campo visibile).

• Immettere le coordinate in pixel dei confini dell’area di esportazione.

Modifica delle impostazioni dell’animazione

In caso di lancio e ottimizzazione di un’animazione di Fireworks posizionata, è possibile modificare anche le impostazioni di animazione. Le opzioni di animazione disponibili nella finestra di dialogo Anteprima esportazione sono simili a quelle disponibili nel pannello Fotogrammi di Fireworks.

Nota: È impossibile modificare i singoli elementi grafici all’interno di un’animazione di Fireworks durante una sessione di ottimizzazione lanciata da Dreamweaver. Per modificare gli elementi grafici di un’animazione, è necessario lanciare e modificare l’animazione di Fireworks. Per ulteriori informazioni, consultare “Modifica dei file di Fireworks da Dreamweaver” a pagina 109.

Per modificare un’immagine animata:

1 In Fireworks, nella finestra di dialogo Anteprima esportazione, fare clic sulla scheda Animazione.

Capitolo 4114

2 Avvalersi delle tecniche seguenti per visualizzare in anteprima i fotogrammi dell’animazione in qualsiasi momento:

• Per visualizzare un fotogramma singolo, selezionare il fotogramma desiderato dall’elenco sulla sinistra della finestra di dialogo, oppure utilizzare i comandi del fotogramma posti nell’area inferiore destra della finestra di dialogo.

• Per riprodurre l’animazione, fare clic sul comando Esegui/Termina nell’area inferiore destra della finestra di dialogo.

3 Per apportare le modifiche all’animazione:

• Per specificare il metodo di eliminazione, selezionare il fotogramma desiderato dall’elenco e scegliere un’opzione dal menu a comparsa (indicato da un’icona che raffigura un cestino).

• Per impostare il ritardo, selezionare il fotogramma desiderato dall’elenco e immettere il valore del ritardo in centesimi di secondo.

• Per impostare la riproduzione ripetuta dell’animazione, fare clic sul pulsante Ripetizione continua e scegliere il numero di ripetizioni desiderato dal menu a comparsa.

• Scegliere l’opzione Ritaglio automatico per ritagliare ogni fotogramma conferendogli un’area rettangolare, in modo che l’unica area dell’immagine che differisce tra i fotogrammi sia l’output. Selezionando questa opzione è possibile ridurre le dimensioni del file.

• Scegliere l’opzione Differenza automatica per produrre l’output dei soli pixel che cambiano tra i fotogrammi. Selezionando questa opzione si possono ridurre le dimensioni del file.

Impostazione delle opzioni di lancio e modifica

Per usare efficacemente Roundtrip HTML, si dovrebbero eseguire alcune operazioni preliminari, quali la definizione di Fireworks come editor di immagini principale in Dreamweaver e la specifica delle preferenze di lancio e modifica per Fireworks.

Nota: Inoltre si dovrebbe definire un sito locale di Dreamweaver prima di operare con Roundtrip HTML. Per ulteriori informazioni, consultare Using Dreamweaver MX.

Fireworks come principale editor esterno di immagini per Dreamweaver

Dreamweaver fornisce una serie di preferenze per lanciare automaticamente applicazioni specifiche per la modifica di determinati tipi di file. Per avvalersi della funzionalità di lancio e modifica di Fireworks, assicurarsi che questo sia impostato come editor principale per i file GIF, JPEG e PNG all’interno di Dreamweaver.


Le versioni precedenti di Fireworks possono essere comunque utilizzate come editor esterni di immagini, ma offrono funzionalità di lancio e modifica limitate. Quando si opera con Roundtrip HTML, Fireworks 4 non supporta pienamente le modifiche effettuate alle proprietà delle celle delle tabelle di Dreamweaver, né i comportamenti applicati a Dreamweaver. Fireworks 3 non supporta pienamente il lancio e la modifica delle tabelle e le porzioni all’interno di tabelle, mentre Fireworks 2 non supporta il lancio e la modifica dei file PNG sorgente per le immagini collocate in Dreamweaver.

Per impostare Fireworks come principale editor esterno di immagini per Dreamweaver:

1 In Dreamweaver, scegliere Modifica > Preferenze e quindi scegliere Tipi di file/Editor.

2 Nell’elenco Estensioni, selezionare un’estensione per il file Web (.gif, .jpg, o .png).

3 Se Fireworks compare nell’elenco Editor, selezionarlo. Se Fireworks non si trova nell’elenco, fare clic sul pulsante Più (+), individuare l’applicazione Fireworks sul disco rigido, quindi fare clic su Apri.

4 Fare clic su Rendi principale.

5 Ripetere i passaggi da 2 a 4 per impostare Fireworks come editor principale per le altre estensioni dei file immagine Web.

Capitolo 4116

Informazioni sulle note di progettazione e sui file sorgente

Ogni volta che si esporta un file di Fireworks da un sorgente PNG salvato a un sito di Dreamweaver, Fireworks scrive una nota di progettazione (Design Note) contenente informazioni sul file. Ad esempio, quando si esporta una tabella di Fireworks, il programma redige una nota per ogni immagine esportata. Queste note contengono riferimenti al file PNG sorgente da cui sono stati originati i file esportati.

Quando si lancia e modifica da Dreamweaver un’immagine creata con Fireworks, Dreamweaver si avvale della nota di progettazione per individuare il PNG sorgente per il file dell’immagine. Per garantire i migliori risultati, salvare sempre il file PNG sorgente di Fireworks e i file esportati in un sito di Dreamweaver. Questo assicura che tutti gli utenti che condividono il sito siano in grado di individuare il PNG sorgente al lancio di Fireworks da Dreamweaver.

Specifica delle preferenze di lancio e modifica per i file sorgente di Fireworks

Le preferenze di lancio e modifica di Fireworks permettono di specificare le modalità di gestione dei file PNG al lancio dei file di Fireworks da un’altra applicazione.

Dreamweaver riconosce le preferenze di lancio e modifica di Fireworks solo in certi casi. In particolare, è necessario lanciare e ottimizzare un’immagine che non fa parte di una tabella di Fireworks e non contiene un percorso della nota di progettazione verso un file PNG sorgente. In tutti gli altri casi, compresi tutti i casi di lancio e modifica delle immagini di Fireworks, Dreamweaver lancia automaticamente il file PNG sorgente, richiedendo di individuare il file sorgente, qualora non riesca a reperirlo.

Per specificare le preferenze di lancio e modifica per Fireworks:

1 In Fireworks, scegliere Modifica > Preferenze.


2 Fare clic sulla scheda Lancia e modifica (Windows) o scegliere Lancia e modifica dal menu a comparsa (Macintosh).

3 Specificare le opzioni di preferenza da usare per la modifica o l’ottimizzazione delle immagini di Fireworks collocate in un’applicazione esterna:

Usa sempre PNG sorgente lancia automaticamente il file PNG di Fireworks definito nella nota di progettazione come sorgente per l’immagine collocata. In questo caso verranno aggiornati sia il PNG sorgente che l’immagine collocata corrispondente.

Non usare mai PNG sorgente lancia automaticamente l’immagine collocata di Fireworks, indipendentemente dall’eventuale esistenza di un file PNG sorgente. In questo caso verrà aggiornata solo l’immagine collocata.

Richiedi al lancio permette di specificare ogni volta se lanciare o meno il file PNG sorgente. Quando si modifica o ottimizza un’immagine collocata, Fireworks visualizza un messaggio in cui si richiede di operare una scelta per quanto riguarda il lancio e la modifica. Inoltre è possibile specificare preferenze globali di lancio e modifica da questo prompt.


Operazioni con Macromedia Flash MXFireworks si integra alla perfezione con Macromedia Flash. È possibile esportare facilmente elementi grafici vettoriali, bitmap, di animazioni e di pulsanti multistato di Fireworks per utilizzarli in Flash. Inoltre, la funzionalità lancia e modifica semplifica la modifica degli elementi grafici di Fireworks dall’interno di Flash.

Nota: I comportamenti dei pulsanti di Fireworks e altri tipi di interattività non vengono importati in Flash.

Collocazione dai file di Fireworks in Flash

È possibile collocare gli elementi grafici di Fireworks in Flash in numerosi modi diversi. Il metodo migliore consiste nell’importazione di un file PNG di Fireworks. Questo metodo fornisce il massimo controllo sulle modalità di importazione di elementi grafici e animazioni in Flash.

Sebbene questa soluzione offra un controllo inferiore rispetto all’importazione delle PNG, è possibile importare JPEG, GIF, PNG e SWF esportate da Fireworks. Infine, gli elementi grafici di Fireworks possono essere copiati e incollati direttamente in Flash.

Importazione dai file PNG di Fireworks in Flash

I file PNG sorgente di Fireworks PNG possono essere importati direttamente in Flash, senza doverli esportare ad alcun altro formato grafico. Tutti gli elementi grafici vettoriali, bitmap, delle animazioni e dei pulsanti multistato di Fireworks possono essere importati in Flash.

Nota: I comportamenti dei pulsanti di Fireworks e altri tipi di interattività non vengono importati in Flash.

Quando si importa un file PNG di Fireworks in Flash, è possibile scegliere tra una varietà di opzioni di importazione. I livelli e gli oggetti possono essere importati come un unico simbolo di libreria, oppure si può importare tutto il contenuto in un nuovo livello individuale. La modificabilità degli oggetti vettoriali e di testo può essere mantenuta completamente, oppure si può scegliere di conservare solo l’aspetto se agli oggetti sono stati applicati effetti o altre proprietà che non sono disponibili in Flash. Si può anche decidere di trascurare completamente la modificabilità e di importare il file PNG di Fireworks come singola immagine bitmap appiattita.

Per importare un PNG di Fireworks in Flash:

1 Salvare il documento desiderato in Fireworks.

Per ulteriori informazioni sul salvataggio dei file, consultare “Salvataggio dei file di Fireworks” a pagina 81.

2 Passare a un documento aperto di Flash.

3 (Opzionale) Fare clic su fotogramma chiave e livello nel quale importare il contenuto di Fireworks. Ciò risulta necessario solo se si programma di importare il PNG come un simbolo di libreria (clip filmato).

4 Scegliere File > Importa.

Capitolo 4118

5 Passare al file PNG desiderato e selezionarlo dalla finestra di dialogo Importa, quindi fare clic su OK.

Compare la finestra di dialogo Impostazioni di importazione PNG Fireworks.

6 Scegliere un’opzione di Struttura file:

Importa come clip filmato e mantieni livelli importa il file di Fireworks come clip filmato che contiene tutti i livelli e i fotogrammi del file di Fireworks originale. La clip filmato viene inserita nel livello e nel fotogramma chiave corrente. Se non si è selezionato un fotogramma chiave prima dell’importazione, la clip filmato viene collocata nel fotogramma chiave precedente.

Importa in un nuovo livello della scena corrente importa il file di Fireworks in un nuovo livello singolo, con tutti i suoi fotogrammi intatti.

7 Scegliere le modalità di importazione del testo e degli oggetti vettoriali:

Rasterizza se necessario per mantenere aspetto conserva la modificabilità degli oggetti vettoriali, a meno che siano disponibili riempimenti, tratti, o effetti speciali non supportati da Flash. Per conservare l’aspetto di tali oggetti, Flash li converte in immagini bitmap non modificabili.

Mantieni modificabili tutti i tracciati conserva la modificabilità di tutti gli oggetti vettoriali. Se gli oggetti hanno riempimenti, tratti, o effetti speciali non supportati da Flash, queste proprietà vanno perdute.

8 Scegliere le modalità di importazione del testo:

Rasterizza se necessario per mantenere aspetto conserva la modificabilità del testo, a meno che siano presenti riempimenti, tratti, o effetti speciali non supportati da Flash. Per conservare l’aspetto di tale testo, Flash lo converte in un’immagine bitmap non modificabile.

Mantieni modificabile tutto il testo conserva la modificabilità di tutti il testo. Se il testo ha riempimenti, tratti, o effetti speciali non supportati da Flash, queste proprietà vanno perdute.

9 Scegliere l’opzione Importa come bitmap singola appiattita per importare il file come singola immagine bitmap e perdere ogni possibilità di modificarla.

Nota: La selezione di questa opzione rende indisponibili le altre opzioni della finestra di dialogo.

10 Fare clic su OK.

Il file PNG di Fireworks viene importato in Flash usando le opzioni di importazione scelte.


Copia e incollaggio degli elementi grafici di Fireworks in Flash

Un altro rapido sistema per collocare in Flash gli elementi grafici prodotti con Fireworks consiste nel copiarli e incollarli.

Nota: Per copiare elementi grafici in versioni precedenti di Flash, è necessario scegliere Modifica > Copia contorni tracciati.

Quando gli elementi grafici di Fireworks vengono copiati e incollati in Flash, alcuni attributi vanno persi, quali ad esempio gli effetti dal vivo e le texture. Inoltre, Flash supporta solo i riempimenti uniformi, i riempimenti sfumati e i tratti base.

Per copiare e incollare elementi grafici in Flash:

1 Selezionare l’oggetto o gli oggetti da copiare.

2 Scegliere Modifica > Copia o fare clic sul pulsante Esportazione rapida e scegliere Copia dal menu a comparsa Macromedia Flash.

3 In Flash, creare un nuovo documento e scegliere Modifica > Incolla.

Nota: È possibile che si renda necessaria la separazione degli oggetti con Elabora > Separa al fine di renderli modificabili come singoli oggetti vettoriali all’interno di Flash.

Esportazione di immagini di Fireworks in altri formati per Flash

Gli elementi grafici di Fireworks possono essere esportati come JPEG, GIF e PNG, per poi importarli in Flash.

Per ulteriori informazioni sull’esportazione di JPEG e GIF, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per ulteriori informazioni sull’esportazione nel formato PNG, consultare “Esportazione di PNG con trasparenza” a pagina 122. Per ulteriori informazioni sull’importazione di uno di questi formati in Flash, consultare “Importazione in Flash di immagini e animazioni esportate da Fireworks” a pagina 122.

Nota: Sebbene PNG sia il formato di file nativo di Fireworks, i file degli elementi grafici PNG esportati da Fireworks sono differenti dai file sorgente PNG salvati in Fireworks. I file PNG esportati non sono differenti dalle GIF o dai JPEG; contengono solo dati immagine e non contengono alcuna informazioni aggiuntiva quali le porzioni, i livelli, l’interattività, gli effetti dal vivo, o altro contenuto modificabile. Per ulteriori informazioni sui file sorgente PNG, consultare “Salvataggio dei file di Fireworks” a pagina 81.

Esportazione di immagini e animazioni di Fireworks come file SWF

Elementi grafici e animazioni di Fireworks possono essere esportati come file SWF di Flash. È possibile effettuare diverse scelte in merito alle modalità di esportazione degli oggetti.

Se non si sceglie Mantieni aspetto nella finestra di dialogo Opzioni esportazione Flash SWF alcuni dati di formattazione vanno perduti. Vengono mantenuti il colore e le dimensioni dei tratti. La formattazione persa durante l’esportazione al formato SWF include quanto segue:

• Effetti dal vivo

• Categorie tratto e riempimento, texture e bordi ammorbiditi

• Antialiasing sugli oggetti (il lettore Flash applica l’antialiasing a livello del documento, quindi, in fase di esportazione l’antialiasing viene applicato al documento).

• Modalità di opacità e fusione (gli oggetti con opacità diventano provvisti di canale alfa).

• Livelli

• Maschere

Capitolo 4120

• Oggetti porzione, mappe immagine e comportamenti

• Alcune opzioni di formattazione del testo, ad esempio la crenatura e i tratti bitmap

Per esportare un elemento grafico o un’animazione di Fireworks come file SWF:

1 Scegliere File > Esporta o fare clic sul pulsante Esportazione rapida e scegliere Esporta SWF dal menu a comparsa Macromedia Flash.

2 Nella finestra di dialogo Esporta, digitare un nome per il file e scegliere una cartella di destinazione.

3 Scegliere Macromedia Flash SWF dal menu a comparsa Salva con nome.

4 Fare clic sul pulsante Opzioni.

Compare la finestra di dialogo Opzioni esportazione in Macromedia Flash SWF.

5 Nella sezione Oggetti, scegliere una delle opzioni seguenti:

Mantieni tracciati permette di mantenere la modificabilità dei tracciati. Gli effetti e la formattazione andranno perduti.

Mantieni aspetto permette di convertire gli oggetti vettoriali in oggetti bitmap e conservare l’aspetto dei tratti e dei riempimenti applicati. La modificabilità andrà perduta.

6 Nella sezione Testo, scegliere una delle opzioni seguenti:

Mantieni modificabilità permette di mantenere la modificabilità del testo. Gli effetti e la formattazione andranno perduti.

Converti in tracciati per convertire il testo in tracciati e conservare le opzioni di spaziatura e crenatura personalizzate definite in Fireworks. La possibilità di modificarlo come testo va perduta.

7 Impostare la qualità delle immagini utilizzando il dispositivo di scorrimento a comparsa Qualità JPEG.

8 Selezionare i fotogrammi da esportare e la frequenza fotogrammi in secondi.

9 Fare clic su OK.


10 Fare clic su Salva nella finestra di dialogo Esporta.

Per ulteriori informazioni sull’importazione di un file SWF esportato in Flash, consultare “Importazione in Flash di immagini e animazioni esportate da Fireworks” a pagina 122.

Esportazione di PNG con trasparenza

Il formato PNG ammette la trasparenza per le immagini con colori a 32 bit. Il PNG di Fireworks, il formato di file sorgente di Fireworks, supporta anche la trasparenza per le immagini a 32 bit di colore. I file PNG sorgente di Fireworks possono essere importati direttamente in Flash.

Inoltre è possibile creare trasparenze con un PNG a 8 bit. I file PNG a 8 bit di Fireworks possono essere esportati con trasparenze per l’inserimento in Flash.

Per esportare un PNG a 8 bit con trasparenza.

1 In Fireworks, scegliere Finestra > Ottimizza per aprire il pannello Ottimizza qualora non fosse già aperto.

2 Scegliere PNG 8 come formato di file di esportazione e Trasparenza alfa dal menu a comparsa Trasparenza.


4 Selezionare Solo immagini dal menu a comparsa Salva come tipo. Definire il nome del file, quindi fare clic su Salva.

Per ulteriori informazioni sull’importazione di file PNG esportati in Flash, consultare “Importazione in Flash di immagini e animazioni esportate da Fireworks” a pagina 122.

Importazione in Flash di immagini e animazioni esportate da Fireworks

Il comando Importa di Flash viene utilizzato per importare elementi grafici e animazioni che sono state esportate da Fireworks.

Per importare in Flash elementi grafici e animazioni di Fireworks:

1 Creare un nuovo documento in Flash.

2 Scegliere File > Importa e individuare l’elemento grafico o il file animazione.

3 Fare clic su Apri per importare il file.

Uso di Fireworks per modificare immagini importate in Flash

Grazie all’integrazione lancia e modifica, è possibile usare Fireworks per apportare modifiche a un elemento grafico precedentemente importato in Flash. Questo metodo consente di modificare qualsiasi elemento grafico importato, anche se quest’ultimo non è stato esportato da Fireworks.

Nota: I file PNG nativi di Fireworks importati in Flash sono un’eccezione, a meno che si importino i PNG come immagine bitmap appiattita.

Se l’elemento grafico è stato esportato da Fireworks, e si è salvato il file PNG originale assieme al file grafico esportato, è possibile lanciare il file PNG originale in Fireworks dall’interno di Flash per apportare le modifiche. Quando si ritorna a Flash, vengono aggiornati sia il file PNG che il file grafico di Flash.

1 In Flash, fare clic col pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto CONTROLLO (Macintosh) su un elemento grafico selezionato nel pannello Libreria.

Capitolo 4122

2 Scegliere Modifica con Fireworks dal menu a comparsa.

Nota: Se Modifica con Fireworks non compare nel menu a comparsa, scegliere Modifica con e individuare l’applicazione Fireworks.

3 Fare clic su Sì nella casella Trova sorgente se si desidera individuare il file PNG originale per l’elemento grafico Fireworks, quindi fare clic su Apri.

Nota: Se si sono modificate le preferenze di lancio e modifica di Fireworks, questa finestra di dialogo potrebbe non comparire.

Il file si apre in Fireworks e la finestra del documento indica che si sta modificando un file di Flash.

4 Apportare le modifiche all’immagine e fare clic su Completato una volta terminato.

Fireworks esporta un nuovo file grafico a Flash e se si è modificato il file PNG originale, viene salvato anche questo.

Espansione di Fireworks con comandi personalizzati creati in Flash

Grazie a Flash, è possibile creare filmati SWF che contengono codice JavaScript. Questi filmati possono essere usati come comandi di Fireworks, accessibili dal menu Comandi in Fireworks, o come pannelli, accessibili dal menu Finestra.

Per ulteriori informazioni, consultare Extending Fireworks MX, disponibile come PDF dal CD di installazione di Macromedia Fireworks.

Operazioni con Macromedia FreeHandDato che entrambe le applicazioni supportano elementi vettoriali, la grafica vettoriale può essere facilmente condivisa tra Fireworks e Macromedia FreeHand. Tuttavia, l’aspetto di oggetti può differire tra le applicazioni dato che Fireworks e FreeHand non condividono tutte le stesse funzionalità. Per ulteriori informazioni, consultare “Operazioni con altre applicazioni di grafica vettoriale” a pagina 126.

Le procedure fornite nella presente sezione non si applicano solo all’uso di Fireworks con FreeHand ma anche all’uso di Fireworks con altre applicazioni di grafica vettoriale, quali Adobe Illustrator e CorelDraw. Per ulteriori informazioni, consultare “Operazioni con altre applicazioni di grafica vettoriale” a pagina 126.

Collocazione di elementi grafici di FreeHand in Fireworks

Gli elementi grafici di FreeHand possono essere importati in Fireworks in diversi modi. È possibile importarli, copiarli e incollarli, oppure trascinarli e rilasciarli. Fireworks MX supporta gli elementi grafici di FreeHand 7 o delle versioni successive.

Importazione di elementi grafici di FreeHand in Fireworks

Fireworks può importare elementi grafici vettoriali che sono stati creati in FreeHand. È possibile impostare le opzioni seguenti quando si importa un elemento grafico di FreeHand:

Scala specifica la percentuale di scalatura per il file importato.

Larghezza e Altezza specificano la larghezza e l’altezza in pixel, pollici o centimetri del file importato.

Risoluzione specifica la risoluzione del file importato.

Antialiasing attenua gli oggetti importati per evitare la formazione di bordi acuti. È possibile scegliere questa opzione separatamente per i tracciati o il testo.


Nota: Per modificare gli oggetti selezionati in Antialiasing o Bordo rigido, utilizzare Elabora > Modifica tracciato > Riempimento rigido, Riempimento con antialiasing o Riempimento morbido dopo l’importazione.

Conversione file specifica le modalità di gestione dei documenti multipagina all’importazione:

• L’opzione Apri una pagina importa solo la pagina specificata.

• L’opzione Apri pagine come fotogrammi importa tutte le pagine dal documento e le posiziona ognuna su un fotogramma separato.

• L’opzione Ignora livelli importa tutti gli oggetti su un singolo livello.

• L’opzione Ricorda livelli mantiene la struttura dei livelli del file importato.

• L’opzione Converti livelli in fotogrammi colloca ogni livello della pagina importata in un fotogramma diverso.

Includi livelli invisibili importa gli oggetti su livelli che sono stati disattivati. In caso contrario, i livelli invisibili vengono ignorati.

Includi livelli di sfondo importa gli oggetti dal livello di sfondo del documento. In caso contrario, il livello di sfondo viene ignorato.

Rendering come immagini rasterizza gruppi complessi, fusioni o riempimenti a mosaico e li colloca sotto forma di un unico oggetto bitmap in un documento di Fireworks. Immettere un valore nella casella di testo per determinare quanti oggetti possa contenere un gruppo, una fusione o un riempimento affiancato prima della sua rasterizzazione durante l’importazione.

Per importare elementi grafici vettoriali da un file di FreeHand:

1 In Fireworks, scegliere File > Apri per passare al file di FreeHand desiderato, quindi fare clic su Apri.

Compare la finestra di dialogo Opzioni file vettoriali.

2 Scegliere le opzioni desiderate.

3 Fare clic su OK.

Capitolo 4124

Copia/incolla e trascina/rilascia di immagini di FreeHand in Fireworks

Gli elementi grafici di FreeHand possono essere rapidamente collocati in Fireworks copiando e incollando oppure trascinando e rilasciando.

Per copiare e incollare in Fireworks un elemento grafico selezionato di FreeHand:

1 In FreeHand, scegliere Modifica > Copia.

2 Creare un nuovo documento in Fireworks o aprirne uno esistente.

3 Scegliere Modifica > Incolla.

Per trascinare e rilasciare un elemento grafico di FreeHand in Fireworks:

Trascinare l’elemento grafico di FreeHand in un documento aperto di Fireworks.

Collocazione di elementi grafici di Fireworks in FreeHand

I tracciati vettoriali possono essere esportati da Fireworks a FreeHand. Inoltre è possibile copiare e incollare gli elementi grafici vettoriali di Fireworks in FreeHand.

Per esportare un elemento grafico in FreeHand:

1 In Fireworks, scegliere File > Esporta o fare clic sul pulsante Esportazione rapida e scegliere Esporta in FreeHand dal menu a comparsa FreeHand.


3 Scegliere Illustrator 7 dal menu a comparsa Salva.

Nota: Illustrator 7 è il formato di file grafici da usare per le esportazioni da Fireworks verso qualsiasi altra applicazione di grafica vettoriale, incluso Macromedia FreeHand. La maggior parte delle applicazioni vettoriali possono leggere il formato di file Illustrator 7.

4 Fare clic sul pulsante Opzioni.

5 Nella finestra di dialogo Opzioni esportazione Illustrator, scegliere una delle opzioni seguenti:

• Esporta solo fotogramma corrente conserva i nomi dei livelli ed esporta il solo fotogramma corrente.

• Converti fotogrammi in livelli permette di esportare ciascun fotogramma di Fireworks come livello.

6 Scegliere Compatibile con FreeHand per esportare il file per l’uso in FreeHand.

La scelta di Compatibile con FreeHand omette le immagini e converte i riempimenti sfumati in riempimenti uniformi.

7 Fare clic su OK.

8 Fare clic su Salva nella finestra di dialogo Esporta.

Nota: All’esportazione, i bordi degli oggetti di Fireworks sono impostati come rigidi.

9 Passare a un documento aperto di FreeHand.

10 Scegliere File > Apri o File > Importa per passare al file esportato da Fireworks, quindi fare clic su Apri.


Copia e incollaggio degli elementi vettoriali in FreeHand

È possibile usare il comando Copia contorni tracciati per copiare tracciati selezionati di Fireworks in FreeHand. Copia contorni tracciati copia solo i tracciati di Fireworks.

Nota: L’inserimento di elementi vettoriali di Fireworks in altre applicazioni con procedure di copia e incollaggio è utilizzabile non solo con FreeHand ma anche con Illustrator, CorelDraw e Adobe Photoshop.

Per copiare i tracciati selezionati di Fireworks:

1 Scegliere Modifica > Copia contorni tracciati o fare clic sul pulsante Esportazione rapida e scegliere Copia contorni tracciati dal menu a comparsa FreeHand.

2 Passare a un documento aperto di FreeHand.

3 Scegliere Modifica > Incolla per incollare i tracciati.

Operazioni con altre applicazioni di grafica vettoriale

Fireworks può condividere elementi grafici vettoriali con altre applicazioni grafiche vettoriali, fra cui Adobe Illustrator e CorelDRAW. Fireworks permette di esportare e importare elementi grafici vettoriali da queste applicazioni allo stesso modo in cui si esportano e importano elementi grafici da Macromedia FreeHand. Per ulteriori informazioni, consultare “Operazioni con Macromedia FreeHand” a pagina 123.

Caratteristiche non supportate

Dal momento che Fireworks e altre applicazioni grafiche vettoriali non condividono sempre le stesse caratteristiche, l’aspetto degli oggetti differirà tra le applicazioni.

La maggior parte delle altre applicazioni di grafica vettoriale, incluso Macromedia FreeHand, non supportano le seguenti caratteristiche di Fireworks:

• Effetti dal vivo

• Modalità fusione

• Riempimenti texture, Motivo, Dithering Web e sfumati lineari

• Oggetti porzione e mappe immagine

• Diverse opzioni di formattazione del testo

• Guide, griglie e colore dell’area di lavoro

• Immagini bitmap

• Alcuni tratti

Nota: Dal momento che queste caratteristiche non sono supportate dalla maggior parte delle altre applicazioni di grafica vettoriale, Fireworks non le include all’esportazione in queste applicazione.

Allo stesso modo, Fireworks non supporta tutte le funzionalità presenti in altre applicazioni di grafica vettoriale. Per esempio, quando Fireworks importa file di CorelDRAW (CDR), vengono compiute le seguenti modifiche per tenere conto di caratteristiche non supportate:

• I contenuti delle pagine principali sono ripetuti in ogni fotogramma di Fireworks.

• Vengono importati solo i due oggetti finali di una fusione di CorelDRAW. Gli oggetti sono raggruppati dopo l’importazione.

• Le dimensioni vengono convertite in oggetti vettoriali.

Capitolo 4126

• Solo il testo base viene importato. La maggior parte dei parametri relativi a caratteri e paragrafi non sono supportati.

• I colori vengono convertiti in RGB.

Nota: Fireworks non consente di aprire file compressi di CorelDRAW.

Operazioni con Macromedia DirectorÈ possibile integrare le funzionalità di Fireworks e Director. Fireworks consente di esportare elementi grafici e contenuto interattivo in Director. Il processo di esportazione mantiene i comportamenti e le porzioni presenti nell’immagine. Si possono quindi esportare in tutta sicurezza sia le immagini suddivise in porzioni comprensive di rollover che le immagini strutturate in più livelli. Questa funzionalità permette agli utenti di Director di usufruire degli strumenti di progettazione grafica e di ottimizzazione di Fireworks senza compromettere la qualità.

Nota: Se si sta usando Director 8.0 o una versione precedente, occorre effettuare il download e l’installazione dell’Xtra gratuito di importazione da Fireworks per Director, reperibile all’indirizzo http://www.macromedia.com/it/.

Collocazione di file di Fireworks in Director

Director, può importare immagini appiattite di Fireworks, quali ad esempio JPEG e GIF. Le immagini PNG a 32 bit possono inoltre essere importate con trasparenza. Per il contenuto suddiviso in porzioni, interattivo e animato, Director può importare Fireworks HTML.

Per ulteriori informazioni sull’esportazione di immagini di Fireworks appiattite quali JPEG e GIF, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Esportazione di elementi grafici con trasparenza

In Director, la trasparenza può essere ottenuta importando le immagini PNG a 32 bit. Fireworks permette l’esportazione di elementi grafici PNG a 32 bit con trasparenza.

Per esportare una PNG a 32 bit con trasparenza:

1 In Fireworks, scegliere Finestra > Ottimizza, modificare il formato di file di esportazione a PNG 32 e impostare Effetto mat su trasparente.


3 Selezionare Solo immagini dal menu a comparsa Salva come tipo. Definire il nome del file, quindi fare clic su Salva.

Esportazione a Director di contenuto suddiviso in livelli e porzioni

Con l’esportazione delle porzioni di Fireworks a Director, si può esportare contenuto suddiviso in porzioni e interattivo quali le immagini dei pulsanti e dei rollover. L’esportazione dei livelli a Director permette di esportare contenuto di Fireworks suddiviso in livelli quali, ad esempio, le animazioni.

Per esportare file di Fireworks in Director:

1 In Fireworks, scegliere File > Esporta.

Nota: In alternativa, è possibile fare clic sul pulsante Esportazione rapida e scegliere Sorgente come livelli o Sorgente come porzioni dal menu a comparsa Director. Scegliere Sorgente come livelli se si sta esportando un’animazione e Sorgente come porzioni se si sta esportando il contenuto interattivo quali i pulsanti.



3 Scegliere Director dal menu a comparsa Salva con nome.

4 Scegliere un’opzione dal menu a comparsa Sorgente:

Livelli di Fireworks esporta tutti i livelli presenti nel documento. Scegliere questa opzione se si esporta contenuto suddiviso in livelli o un’animazione.

Porzioni di Fireworks esporta le porzioni nel documento. Scegliere questa opzione se si esporta contenuto suddiviso in porzioni o interattivo quali le immagini dei rollover e i pulsanti.

5 Scegliere Taglia immagini per ritagliare automaticamente le immagini esportate in modo che si adattino gli oggetti su ciascun fotogramma.

6 Selezionare Inserisci immagine nella sottocartella per definire una cartella per le immagini.


Importazione di file di Fireworks in Director

Director, permette di importare immagini appiattite esportate da Fireworks, come JPEG, GIF e PNG a 32 bit. Oppure, consente l’importazione di livelli, porzioni ed elementi interattivi di Fireworks mediante l’inserimento di codice HTML di Fireworks.

Per importare un’immagine appiattita di Fireworks:

1 In Director, scegliere File > Importa.

2 Portarsi sul file desiderato, poi fare clic su Importa.

3 Modificare le opzioni secondo necessità nella finestra di dialogo Opzioni immagine. Per ulteriori informazioni su ciascuna opzione, consultare Using Director.

4 Fare clic su OK.

L’elemento grafico importato compare nel cast come una bitmap.

Per importare contenuto di Fireworks suddiviso in livelli e porzioni, o interattivo:

1 In Director, scegliere Inserisci > Fireworks > Immagini da HTML di Fireworks.

Nota: Nome e posizione di questo comando di menu possono essere differenti a seconda della versione di Director.

Capitolo 4128

2 Individuare il file HTML di Fireworks esportato per l’uso in Director.

Compare la finestra di dialogo Apri HTML di Fireworks.

3 Modificare le opzioni secondo necessità:

Colore permette di specificare una profondità di colore per gli elementi grafici importati. Se contengono la trasparenza, scegliere colore a 32 bit.

Registrazione permette di impostare il punto di registrazione per gli elementi grafici importati.

Importa comportamenti dei rollover come Lingo converte i comportamenti di Fireworks in codice Lingo.

Importa nella colonna sonora colloca i membri del cast nella colonna sonora durante l’importazione.

4 Fare clic su Apri.

Vengono importati gli elementi grafici e il codice del file HTML di Fireworks.

Nota: Se si sta importando un’animazione di Fireworks, trascinare i fotogrammi chiave in Director per ridefinire la programmazione di ogni livello importato secondo necessità.

Modifica di membri del cast di Director in Fireworks

Usando l’integrazione di lancio e modifica, si possono apportare modifiche ai membri del cast di Director lanciando Fireworks per modificarli dall’interno dell’applicazione. Inoltre, è possibile lanciare Fireworks dall’interno di Director per ottimizzare i membri del cast.

Per lanciare Fireworks allo scopo di modificare un membro del cast di Director:

1 In Director, fare clic col pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto CONTROLLO (Macintosh) su un elemento grafico selezionato nella finestra del Cast.

2 Scegliere Lancia editor esterno dal menu a comparsa.

Nota: Se non si lancia Fireworks come editor esterno delle immagini, all’interno di Director scegliere File > Preferenze > Editor e impostare Fireworks come editor esterno per i tipi di file grafico bitmap.


Il file si apre in Fireworks e la finestra del documento indica che si sta modificando un file da Director.

3 Apportare le modifiche all’immagine e fare clic su Completato una volta terminato.

Fireworks esporta un nuovo file grafico a Director.

Ottimizzazione dei membri del cast di Director

È possibile lanciare Fireworks da Director per apportare rapide modifiche di ottimizzazione ai membri del cast selezionati.

Per lanciare Fireworks per la modifica delle impostazioni di ottimizzazione per un membro del cast di Director:

1 In Director, selezionare il membro del cast nella finestra del Cast e fare clic su Ottimizza in Fireworks nella scheda Bitmap della finestra di ispezione Proprietà.

2 In Fireworks, modificare le impostazioni di ottimizzazione come desiderato.

3 Fare clic su Aggiorna una volta terminato. Fare clic su Completato se compare la finestra di dialogo Modifica MIX.

L’immagine viene riesportata a Director usando le nuove impostazioni.

Operazioni con Macromedia HomeSiteÈ possibile usare Fireworks e HomeSite congiuntamente per creare e modificare pagine Web. L’esportazione e l’apertura di HTML di Fireworks in HomeSite è semplice e l’inserimento di elementi grafici di Fireworks nei documenti di HomeSite è altrettanto facile. Inoltre, Fireworks e HomeSite condividono una potente integrazione che permette di lanciare Fireworks da HomeSite per modificare gli elementi grafici Web.

Collocazione di immagini di Fireworks in HomeSite

Le immagini GIF o JPEG generate da Fireworks possono essere inserite in un documento di HomeSite. Per prima cosa è necessario esportare le immagini da Fireworks.Per ulteriori informazioni sull’esportazione di immagini GIF e JPEG, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per inserire un’immagine di Fireworks in un documento di HomeSite:

1 Salvare il documento in HomeSite.

Nota: HomeSite crea tracciati relativi alle immagini, ma non può procedere se il documento non viene salvato.

Capitolo 4130

2 Nella finestra Risorse, passare all’immagine Fireworks esportata.

3 Creare un collegamento all’immagine Fireworks nel documento:

• Trascinare il file dalla finestra Risorse alla posizione desiderata all’interno del codice HTML sulla scheda Modifica della finestra Documento.

• Nella scheda Modifica della finestra Documento, collocare il punto di inserimento dove si intende inserire l’immagine di Fireworks, quindi fare clic con il pulsante destro del mouse sul file nella finestra Risorse e scegliere Inserisci come collegamento.

Nel codice HTML viene creato un collegamento all’immagine di Fireworks. Fare clic sulla scheda Sfoglia per l’anteprima dell’immagine nel documento.

Collocazione del codice HTML di Fireworks in HomeSite

Esistono diversi modi per collocare codice HTML di Fireworks in HomeSite. Il codice HTML di Fireworks può essere esportato o può essere copiato negli Appunti. Inoltre è possibile aprire in HomeSite un file HTML di Fireworks esportato e copiare e incollare sezioni specifiche del codice. Inoltre, si può facilmente aggiornare il codice esportato a HomeSite usando il comando Aggiorna HTML di Fireworks.

Nota: Prima di esportare, copiare o aggiornare l’HTML di Fireworks per l’uso in HomeSite, accertarsi di scegliere Generico come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Esportazione dell’HTML di Fireworks a HomeSite

L’esportazione di HTML da Fireworks genera un file HTML e i file immagine associati nella posizione specificata. Quindi si può aprire il file HTML in HomeSite per ulteriori modifiche.

Nota: Prima di esportare, accertarsi di scegliere Generico come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per esportare codice HTML di Fireworks a HomeSite:

Esportare il documento HTML di Fireworks, quindi aprire il file esportato in HomeSite scegliendo File > Apri. Per ulteriori informazioni, consultare la guida di Fireworks.

Copia dell’HTML di Fireworks negli Appunti per l’uso in HomeSite

Un altro rapido sistema per collocare in HomeSite il codice HTML prodotto con Fireworks consiste nel copiarlo negli Appunti da Fireworks e quindi nell’incollarlo direttamente in un documento di HomeSite. Quando si copia codice HTML di Fireworks negli Appunti, le immagini richieste vengono esportate in una posizione specificata.

Nota: Prima di copiarlo negli Appunti, accertarsi di scegliere Generico come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per copiare il codice HTML di Fireworks e usarlo in HomeSite:

Copiare il codice HTML negli Appunti da Fireworks e quindi incollarlo in un nuovo documento di HomeSite. Per ulteriori informazioni, consultare la guida di Fireworks.

Copia dell’HTML da un file di Fireworks esportato e incollaggio in HomeSite

È possibile aprire in HomeSite un file HTML di Fireworks esportato e quindi copiare e incollare manualmente le sole sezioni desiderate in un altro documento HomeSite.


Nota: Prima di esportare, accertarsi di scegliere Generico come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per copiare codice da un file di Fireworks esportato e incollarlo in HomeSite:

Esportare un file HTML di Fireworks quindi copiare e incollare il codice desiderato in un documento di HomeSite esistente. Per ulteriori informazioni, consultare la guida di Fireworks.

Aggiornamento in HomeSite dell’HTML di Fireworks esportato

Il comando Aggiorna HTML permette di apportare modifiche a un documento HTML di Fireworks precedentemente esportato in HomeSite.

Nota: Prima di aggiornare l’HTML, accertarsi di scegliere Generico come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per aggiornare il codice HTML di Fireworks esportato a HomeSite:

Usare il comando Aggiorna HTML in Fireworks. Per ulteriori informazioni, consultare la guida di Fireworks.

Modifica di immagini di Fireworks in HomeSite

È possibile usare l’integrazione di lancio e modifica per alterare le immagini di un documento di HomeSite. HomeSite lancia automaticamente Fireworks e permette di apportare le modifiche desiderate all’immagine. Quando si abbandona Fireworks, gli aggiornamenti effettuati vengono applicati automaticamente all’immagine collocata in HomeSite. Se combinate, le due applicazioni garantiscono un flusso di lavoro ottimizzato per la modifica degli elementi grafici Web nelle pagine HTML.

Per lanciare e modificare le immagini di Fireworks collocate in HomeSite:

1 In HomeSite, salvare il documento.


• Fare clic col pulsante destro del mouse sul file immagine in una delle schede File della finestra Risorse.

• Fare clic col pulsante destro del mouse sull’immagine nella scheda Miniature della finestra Risultati.

• Fare clic col pulsante destro del mouse sull’etichetta <img> nel codice HTML della scheda Modifica nella finestra del documento.

3 Scegliere Modifica in Macromedia Fireworks dal menu a comparsa.

HomeSite lancia Fireworks, qualora quest’ultimo non sia già aperto.

4 Qualora richiesto, specificare se individuare un file sorgente di Fireworks per l’immagine collocata. Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare “Salvataggio dei file di Fireworks” a pagina 81.

5 Modificare l’immagine in Fireworks.

La finestra del documento indica che si sta modificando un’immagine di Fireworks da un’altra applicazione.


L’immagine aggiornata viene riesportata a HomeSite e, se selezionato, viene salvato anche il file sorgente PNG.

Capitolo 4132

Operazioni con Microsoft FrontPageLe straordinarie capacità di integrazione di Fireworks ne consentono l’uso in sinergia con numerose applicazioni non necessariamente prodotte da Macromedia. Fireworks semplifica la creazione e la modifica di pagine Web con Microsoft FrontPage. Grazie a Roundtrip HTML è possibile lanciare facilmente Fireworks da FrontPage per creare o modificare elementi grafici e tabelle HTML. Roundtrip HTML, una potente funzione di integrazione che Fireworks condivide con FrontPage e Macromedia Dreamweaver, permette di apportare modifiche in un’applicazione e fare in modo che quelle modifiche vengano riflesse senza soluzione di continuità nell’altra.

Collocazione di immagini Fireworks in FrontPage

Gli elementi grafici di Fireworks possono collocati in un documento di Frontpage in due diversi modi. Si può collocare un elemento grafico completo di Fireworks utilizzando il menu Inserisci in FrontPage, oppure è possibile creare un nuovo elemento grafico di Fireworks facendo clic sul pulsante Modifica in Fireworks nella barra degli strumenti principale di FrontPage.

Inserimento di immagini di Fireworks in FrontPage

Le immagini GIF o JPEG generate da Fireworks possono essere inserite direttamente in un documento di FrontPage. Per prima cosa è necessario esportare le immagini da Fireworks. Per ulteriori informazioni sull’esportazione di immagini GIF e JPEG, consultare la guida di Fireworks Help (Guida > Uso di Fireworks).

Per inserire un’immagine di Fireworks in un documento di FrontPage:

1 In vista Modifica o Codice, collocare il punto di inserimento dove si intende far comparire l’immagine.

2 Scegliere Inserisci > Immagine > Da file.

3 Portarsi sul file di Fireworks desiderato, poi fare clic su OK.

Creazione di nuove immagini di Fireworks in FrontPage

Fireworks può essere lanciato dall’interno di FrontPage per creare un’immagine senza porzioni.

Nota: Se si intende creare un’immagine suddivisa in porzioni, occorre prima creare ed esportare una singola immagine non suddivisa in porzioni. Quindi è possibile lanciare e modificare nuovamente l’elemento grafico all’interno di Fireworks per aggiungere porzioni e interattività. Per ulteriori informazioni sul lancio e sulla modifica di elementi grafici esistenti da FrontPage, consultare “Modifica dei file di Fireworks in FrontPage” a pagina 135.

Per creare un’immagine di Fireworks non suddivisa in porzioni in FrontPage:

1 Fare clic sul pulsante Lancia e modifica l’elemento grafico selezionato in Fireworks nella barra degli strumenti principale di FrontPage.

2 Quando compare un messaggio che richiede l’eventuale creazione di una nuova immagine, fare clic su Sì. Fireworks lancia, qualora quest’ultimo non sia già aperto.

3 Aprire un nuovo documento in Fireworks e creare un’immagine.

4 Scegliere File > Salva una volta terminato. Specificare un nome e una posizione per il file PNG sorgente nella finestra di dialogo Salva con nome, quindi fare clic su Salva.

Per ulteriori informazioni sul salvataggio dei file PNG di Fireworks, consultare “Salvataggio dei file di Fireworks” a pagina 81.


5 Scegliere File > Esporta. Specificare un nome e una posizione per il file immagine esportato nella finestra di dialogo Esportazione.

6 Fare clic su Salva nella finestra di dialogo Esporta per esportare il file.

7 Ritornare a FrontPage.

8 In vista Modifica o Codice, collocare il punto di inserimento dove si intende far comparire l’immagine.

9 Scegliere Inserisci > Immagine > Da file.

10 Passare al file immagine appena esportato e fare clic su Inserisci.

Collocazione dell’HTML di Fireworks in FrontPage

Sono disponibili diversi metodi per collocare l’HTML di Fireworks in FrontPage. Il codice HTML di Fireworks può essere esportato oppure copiato negli Appunti. Si può anche optare per l’apertura di un file HTML di Fireworks esportato in FrontPage e per la successiva copia e incollaggio di sezioni specifiche del codice. Infine, è possibile aggiornare facilmente il codice esportato a FrontPage utilizzando il comando Aggiorna HTML di Fireworks.

Nota: Prima di esportare, copiare o aggiornare l’HTML di Fireworks per l’uso in FrontPage, accertarsi di scegliere FrontPage come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Esportazione dell’HTML di Fireworks a FrontPage

L’esportazione di HTML da Fireworks genera un file HTML e i file immagine associati nella posizione specificata. Il file HTML può essere aperto in FrontPage per ulteriori modifiche.

Nota: Prima di esportare l’HTML di Fireworks per l’uso in FrontPage, accertarsi di scegliere FrontPage come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per esportare il codice HTML di Fireworks a FrontPage:

Esportare il documento Fireworks in HTML, quindi aprire il file HTML esportato in FrontPage scegliendo File > Apri. Per ulteriori informazioni, consultare la guida di Fireworks.

Copia dell’HTML di Fireworks negli Appunti per l’uso in FrontPage

Un altro rapido sistema per collocare in FrontPage il codice HTML prodotto con Fireworks consiste nel copiarlo negli Appunti da Fireworks e quindi nell’incollarlo direttamente in un documento di FrontPage. Tutto il codice HTML e JavaScript associato con il documento Fireworks viene copiato nel documento FrontPage e tutte le immagini vengono esportate in una posizione specificata dall’utente.

Nota: Prima di copiare l’HTML di Fireworks per l’uso in FrontPage, accertarsi di scegliere FrontPage come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per copiare il codice HTML di Fireworks negli Appunti e usarlo in FrontPage:

Copiare il codice HTML negli Appunti da Fireworks e quindi incollarlo in un nuovo documento di FrontPage. Per ulteriori informazioni, consultare la guida di Fireworks.

Nota: Questo metodo non è raccomandato se il documento di Fireworks contiene pulsanti o altri elementi interattivi che richiedono codice JavaScript, perché il codice HTML e JavaScript devono essere modificati una volta incollati in FrontPage. Per ulteriori informazioni, consultare la guida di Fireworks.

Capitolo 4134

Copia dell’HTML da un file di Fireworks esportato e incollaggio in FrontPage

È possibile aprire in FrontPage un file HTML di Fireworks esportato e quindi copiare e incollare manualmente le sole sezioni desiderate in un altro documento FrontPage.

Nota: Prima di esportare da Fireworks, accertarsi di scegliere FrontPage come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per copiare codice da un file di Fireworks esportato e incollarlo in FrontPage:

Esportare un file HTML di Fireworks, quindi copiare e incollare il codice desiderato in un documento di FrontPage esistente. Per ulteriori informazioni, consultare la guida di Fireworks.

Aggiornamento in FrontPage dell’HTML di Fireworks esportato

Il comando Aggiorna HTML permette di apportare modifiche a un documento HTML di Fireworks precedentemente esportato in FrontPage.

Nota: Prima di aggiornare l’HTML di Fireworks, accertarsi di scegliere FrontPage come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks.

Per aggiornare l’HTML di Fireworks esportato in FrontPage:

Usare il comando Aggiorna HTML in Fireworks. Per ulteriori informazioni, consultare la guida di Fireworks.

Modifica dei file di Fireworks in FrontPage

L’uso congiunto di Fireworks e FrontPage è semplificato da Roundtrip HTML, una funzionalità che permette di apportare modifiche in un’applicazione e fare in modo che queste variazioni si riflettano senza soluzione di continuità anche nell’altra.

Con Roundtrip HTML, si utilizza l’integrazione lancia e modifica per modificare immagini generate da Fireworks e tabelle poste in un documento di FrontPage. FrontPage lancia automaticamente Fireworks, consentendo così di apportare le modifiche desiderate all’immagine direttamente da Fireworks. Gli aggiornamenti effettuati in Fireworks vengono applicati automaticamente anche all’immagine collocata in FrontPage. Utilizzate assieme, le due applicazioni garantiscono un flusso di lavoro ottimizzato per la modifica, l’ottimizzazione e la collocazione dei file grafici per il Web nelle pagine HTML.

Per lanciare e modificare le immagini e le tabelle di Fireworks collocate in FrontPage:

1 In FrontPage, salvare il documento.

2 Selezionare l’immagine o la porzione della tabella da modificare e fare clic sul pulsante Lancia e modifica l’elemento grafico selezionato in Fireworks.

FrontPage lancia Fireworks, qualora quest’ultimo non sia già aperto.

3 Qualora richiesto, specificare se lanciare un file sorgente di Fireworks per l’immagine o la porzione di tabella collocata. Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare “Salvataggio dei file di Fireworks” a pagina 81.

Nota: Al lancio e modifica di una porzione di immagine che fa parte di una tabella di Fireworks, questa applicazione lancia automaticamente il file PNG sorgente per tutta la tabella.

4 Modificare l’immagine in Fireworks. La finestra del documento indica che si sta modificando un’immagine di Fireworks da FrontPage.



L’immagine o HTML viene esportata usando le impostazioni di ottimizzazione correnti, gli elementi grafici usati da FrontPage vengono aggiornati e, se viene selezionato un file sorgente PNG, viene salvato.

Operazioni con Adobe PhotoshopFireworks offre l’importazione ottimizzata dei file nativi di Photoshop (PSD) grazie ad opzioni che permettono di mantenere molte proprietà dei file importati, tra cui livelli, maschere e testo modificabile. Di conseguenza, è possibile importare le immagini di Photoshop in Fireworks per ulteriori interventi di modifica e ottimizzazione finalizzati alla visualizzazione sul Web, senza per questo perdere la capacità di riesportare successivamente le immagini in Photoshop.

Collocazione di elementi grafici di Photoshop in Fireworks

È possibile trascinare e rilasciare singoli elementi grafici di Photoshop in Fireworks, o importare un intero file di Photoshop.

Trascina e rilascia di singoli elementi grafici di Photoshop in Fireworks

Gli elementi grafici di Photoshop possono essere collocati in Fireworks trascinandoli e rilasciandoli.

Per trascinare e rilasciare un elemento grafico di Photoshop in Fireworks:

Trascinare l’elemento grafico di Photoshop in un documento aperto di Fireworks.

Ogni elemento grafico trascinato diventa un nuovo oggetto bitmap. Il testo viene importato come oggetto bitmap e diventa non modificabile. Per ulteriori informazioni, consultare “Informazioni sull’importazione di testo da Photoshop” a pagina 137.

Importazione in Fireworks dei file di Photoshop

Quando si importa o si apre un file di Photoshop in Fireworks, il file di Photoshop viene importato in un file PNG usando le preferenze di importazione specificate. Oltre a mantenere i livelli e il testo come specificato dalle opzioni di importazione, Fireworks conserva e converte le seguenti funzionalità di Photoshop:

• Le maschere livelli vengono convertite in maschere di Fireworks.

• Gli effetti dei livelli vengono convertiti in effetti dal vivo di Fireworks, sempre che sia disponibile un effetto corrispondente. Ad esempio, l’effetto livello Drop Shadow (ombra) di Photoshop viene convertito nell’effetto dal vivo Ombra di Fireworks.

Nota: L’aspetto degli effetti Livello e degli effetti dal vivo può variare leggermente.

• Le modalità di fusione per i livelli, se supportate da Fireworks, vengono convertite in modalità fusione di Fireworks per gli oggetti corrispondenti.

• Il primo canale alfa della tavolozza dei canali viene convertito in aree trasparenti nell’immagine di Fireworks. Fireworks non supporta ulteriori canali alfa di Photoshop.

I livelli di regolazione di Photoshop, i gruppi di clipping, i tracciati e i canali alfa non sono supportati da Fireworks. All’importazione in Fireworks dei file di Photoshop, tali caratteristiche verranno pertanto ignorate.

Nota: In Windows, i nomi dei file di Photoshop devono includere l’estensione PSD perché Fireworks possa riconoscere il tipo di file.

Capitolo 4136

Per importare in Fireworks un file di Photoshop:

1 Scegliere File > Importa o File > Apri e passare a un file Photoshop (PSD).

2 Fare clic su Apri.

Il file Photoshop viene importato in un file PNG. Se si apportano modifiche e si desidera salvare un file come PSD, è necessario esportarlo in quel formato. Per ulteriori informazioni, consultare “Collocazione di elementi grafici di Fireworks in Photoshop” a pagina 139.

Informazioni sull’importazione di testo da Photoshop

È possibile aprire o importare un file di Photoshop che contiene del testo.

Quando si aprono i file di Photoshop che contengono testo, Fireworks verifica che il sistema disponga dei caratteri necessari. In caso negativo, è possibile sostituire i caratteri con altri disponibili oppure conservarne l’aspetto. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Se al testo del file di Photoshop sono stati applicati effetti supportati da Fireworks, questi saranno presenti anche dopo l’importazione in Fireworks. Tuttavia, dal momento che Fireworks e Photoshop applicano gli effetti in modo diverso, questi possono avere un aspetto differente in ciascuna applicazione.

Quando i file di Photoshop 6 o 7 che contengono testo vengono aperti o importati in Fireworks, viene visualizzata un’immagine in cache del testo in modo che il suo aspetto rimanga identico a quello che aveva in Photoshop. Una volta modificato il testo, l’immagine contenuta nella cache viene sostituita da testo effettivo che può avere un aspetto diverso dal testo originale.

Nota: Fireworks non può esportare il testo in formato Photoshop 6 o 7. Se si modifica un documento che contiene testo in questo formato e lo si riesporta a Photoshop, il file viene esportato in formato Photoshop 5.5. Se invece non si effettuano modifiche al testo, il file viene esportato in formato Photoshop 6. Per ulteriori informazioni sull’esportazione di file Photoshop, consultare “Collocazione di elementi grafici di Fireworks in Photoshop” a pagina 139.

Specifica delle opzioni di importazione dei file di Photoshop

Le preferenze di importazione disponibili in Fireworks permettono di specificare come gestire i livelli e il testo importato nei file di Photoshop importati. A seconda delle opzioni prescelte, è possibile controllare il livello di conservazione dell’aspetto e di modificabilità mantenuto dai file importati.

Per specificare le opzioni di importazione per i file di Photoshop:



2 Fare clic sulla scheda Importa (Windows) o scegliere Importa dal menu a comparsa (Macintosh).

3 Specificare le opzioni di importazione:

Livelli: Converti in oggetti Fireworks importa ogni livello del file di Photoshop come un oggetto bitmap separato su un singolo livello di Fireworks.

Livelli: Condividi livello tra fotogrammi rende visibili i livelli importati su tutti i fotogrammi del file di Fireworks.

Livelli: Converti in fotogrammi importa ogni livello del file di Photoshop come oggetto separato su un fotogramma diverso di Fireworks. Questa opzione è utile per importare i file da utilizzare come animazioni.


Testo: Modificabile converte il testo contenuto nel file di Photoshop in testo modificabile in Fireworks. Questa opzione permette di modificare il testo importato utilizzando lo strumento testo e la finestra di ispezione Proprietà di Fireworks. L’aspetto del testo convertito può variare dall’originale.

Testo: Mantieni aspetto converte il testo contenuto nel file di Photoshop in un oggetto bitmap di Fireworks. Questa opzione mantiene l’aspetto originale del testo ma non consente di modificarlo con lo strumento Testo di Fireworks.

Usa immagine composita e piatta importa il file di Photoshop come immagine appiattita priva di livelli.

4 Fare clic su OK.

Importazione di filtri e plug-in di Photoshop

Fireworks consente di importare filtri e plug-in di Photoshop e di altre terze parti. I filtri possono essere importati dalla finestra Effetti dal vivo o dal menu Filtri. L’importazione di filtri da una delle posizioni indicate li rende comunque disponibili in entrambe.

Nota: I filtri e i plug-in di Photoshop 6 e 7 non sono compatibili con Fireworks MX. Su Macintosh, Fireworks MX supporta solo i filtri di terze parti progettati per l’esecuzione su Mac OS 9 o Mac OS X a seconda del sistema operativo effettivamente eseguito.

Per ulteriori informazioni sulla finestra Effetti dal vivo e sul menu Filtri, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per importare Photoshop e altri filtri e plug-in di terze parti usando la finestra di dialogo Preferenze:



2 Fare clic sulla scheda Cartelle (Windows) o scegliere Cartelle dal menu a comparsa (Macintosh).

3 Scegliere l’opzione Plug-in Photoshop.

Si apre la finestra di dialogo Seleziona una cartella (Windows) o Scegli una cartella (Macintosh).

Nota: Se la finestra di dialogo non si apre automaticamente, fare clic su Sfoglia.

4 Portarsi sulla cartella nella quale sono installati i filtri e i plug-in di Photoshop o altri programmi, quindi fare clic su Seleziona (Windows) o Scegli (Macintosh).

5 Fare clic su OK per chiudere la finestra di dialogo Preferenze.

6 Riavviare Fireworks per caricare i filtri e i plug-in.

Per importare Photoshop e altri filtri e plug-in di terze parti usando la finestra Effetti dal vivo:

1 Selezionare qualsiasi oggetto vettoriale, oggetto bitmap o blocco di testo sull’area di lavoro e fare clic sul pulsante Aggiungi effetti nella finestra di ispezione Proprietà.

Nota: Il pulsante Aggiungi effetti è disponibile solo quando si seleziona un oggetto nell’area di lavoro.

2 Scegliere Opzioni > Individua plug-in dal menu a comparsa che viene visualizzato.

3 Portarsi sulla cartella nella quale sono installati i filtri e i plug-in di Photoshop o altri programmi, quindi fare clic su Seleziona (Windows) o Scegli (Macintosh). Se compare un messaggio che richiede di riavviare Fireworks, fare clic su OK.

4 Riavviare Fireworks per caricare i filtri e i plug-in.

Capitolo 4138

Collocazione di elementi grafici di Fireworks in Photoshop

Fireworks garantisce un supporto esteso per l’esportazione dei file in formato Photoshop (PSD). Le impostazioni di esportazione permettono di controllare quali elementi del file rimangono modificabili una volta riaperti in Photoshop.

Le immagini di Fireworks esportate in Photoshop mantengono le stesse caratteristiche di modificabilità una volta riaperte in Fireworks, così come gli altri elementi grafici di Photoshop. Le opzioni di esportazione relative alla modificabilità, all’aspetto e alle dimensioni dei file permettono di determinare la migliore procedura di esportazione possibile per l’immagine data. Gli utenti di Photoshop possono intervenire sulle immagini in Fireworks e quindi proseguire la fase di modifica in Photoshop.

Per esportare un file in formato Photoshop:

1 Scegliere File > Esporta o fare clic sul pulsante Esportazione rapida e scegliere Altro > Esporta a Photoshop.

2 Nella finestra di dialogo Esporta, assegnare un nome al file e scegliere Photoshop PSD dal menu Salva con nome.

3 Per specificare le impostazioni di esportazione raggruppate, scegliere un’opzione dal menu Impostazioni. Queste impostazioni offrono combinazioni predefinite delle opzioni di esportazione individuali di oggetti, effetti e testo nel file di Fireworks. Le singole opzioni di esportazione sono descritte nel dettaglio in “Personalizzazione dei file per l’esportazione in Photoshop” a pagina 139.

• Mantieni modificabilità dell’aspetto converte gli oggetti in livelli, conserva la modificabilità degli effetti e converte il testo in livelli di testo modificabili di Photoshop. Scegliere questa opzione se si prevedono interventi importanti sulle immagini di Photoshop e non è quindi necessario conservare l’aspetto preciso dell’immagine di Fireworks.

• Mantieni aspetto di Fireworks converte ciascun oggetto in un singolo livello Photoshop, gli effetti e il testo in immagini diventano quindi non modificabili. Scegliere questa opzione per mantenere il controllo sugli oggetti di Fireworks in Photoshop e conservare contemporaneamente l’aspetto originale dell’immagine di Fireworks.

• File Photoshop di dimensioni inferiori appiattisce ciascun livello in un’immagine pienamente renderizzata. Scegliere questa opzione se si esporta un file contenente un alto numero di oggetti Fireworks.

• Personalizza consente di specificare impostazioni specifiche per oggetti, effetti e testo.

4 Fare clic su Salva per esportare il file di Photoshop.

Nota: Photoshop 5.5 e versioni precedenti non possono aprire i file contenenti più di 100 livelli. È necessario eliminare o fondere gli oggetti se il documento di Fireworks che si sta esportando contiene più di 100 oggetti.

Personalizzazione dei file per l’esportazione in Photoshop

Quando si esporta un file in Photoshop, è possibile definire impostazioni personalizzate per l’esportazione di oggetti, effetti e testo.

Per personalizzare le impostazioni per l’esportazione in Photoshop:

1 Nella finestra di dialogo Esporta, selezionare Photoshop PSD come tipo di file di esportazione, quindi scegliere Personalizza dal menu a comparsa Impostazioni.


2 Nel menu a comparsa Oggetti, scegliere una delle opzioni seguenti:

Converti in livelli di Photoshop converte oggetti singoli di Fireworks in livelli di Photoshop e le maschere di Fireworks in maschere livello di Photoshop.

Appiattisci tutti i livelli di Fireworks appiattisce ciascun livello di Fireworks in un livello di Photoshop. Quando si sceglie questa opzione, si perde la capacità di modificare gli oggetti di Fireworks in Photoshop. Andranno perse anche altre caratteristiche associate agli oggetti di Fireworks, come le modalità di fusione.

3 Nel menu a comparsa Effetti, scegliere una delle opzioni seguenti:

Mantieni modificabilità converte gli effetti dal vivo di Fireworks nel loro equivalente Photoshop. Gli eventuali effetti privi di corrispondenti in Photoshop verranno scartati.

Effetti di rendering appiattisce gli effetti in oggetti. Quando si sceglie questa opzione, si mantiene l’aspetto degli effetti, a spese della capacità di modificarli in PhotoShop.

4 Nel menu a comparsa Testo, scegliere una delle opzioni seguenti:

Mantieni modificabilità converte il testo in un livello modificabile di Photoshop. Le caratteristiche di formattazione del testo non supportate in Photoshop andranno perse.

Rendering del testo trasforma il testo in un oggetto immagine. Quando si sceglie questa opzione, si mantiene l’aspetto del testo, a spese della capacità di modificarlo.

Informazioni sulle operazioni con Adobe GoLiveÈ possibile usare Fireworks e Adobe® GoLive® congiuntamente per creare e modificare pagine Web. Si può esportare e copiare HTML di Fireworks in Adobe GoLive in modo analogo alla maggior parte degli editor di HTML. La sola eccezione è che occorre scegliere GoLive HTML come stile HTML prima di esportare o copiare l’HTML da Fireworks.

Per ulteriori informazioni sulla scelta di uno stile HTML e sull’esportazione dell’HTML di Fireworks, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Nota: Lo stile dell’HTML di Adobe GoLive non supporta il codice dei menu a comparsa. Se il documento di Fireworks contiene menu a comparsa, prima dell’esportazione si dovrebbe scegliere HTML generico come stile HTML.

Informazioni sulle operazioni con gli editor di HTMLFireworks genera HTML puro che può essere letto da tutti gli editor di HTML. Per informazioni generali sulla collocazione di codice HTML di Fireworks in editor di HTML, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Fireworks offre speciali caratteristiche di integrazione per Macromedia Dreamweaver, Macromedia HomeSite e Microsoft FrontPage. Per dettagli sulle operazioni con queste applicazioni, consultare Capitolo 4, “Uso di Fireworks con altre applicazioni”, a pagina 103.

Fireworks può inoltre importare contenuto HTML. Si tratta di una potente funzionalità che permette di aprire e modificare la maggior parte dei documenti HTML all’interno di Fireworks. Per ulteriori informazioni, consultare “Creazione di file PNG di Fireworks da file HTML” a pagina 77.

Capitolo 4140

INDICE

A

Adobe Type Manager 5aggancio dei pannelli 86ambiente di lavoro 16animazione, modifica 114annullamento 101apertura

documenti 75file recenti 75GIF animati 75immagini grafiche create in altre applicazioni 75viste multiple del documento 92

appiattimento di bitmap 25apprendimento di Fireworks

newsgroup 7risorse 6

area di disegno, vedi area di lavoroarea di lavoro

modifica caratteristiche 94modifica risoluzione 94ritaglio 97rotazione 96

B

barra di stato (Windows) 93barre degli strumenti

aggancio 89sblocco 89visualizzazione e occultamento 89

browser, visualizzazione di file Fireworks 69

C

comandiAggiorna HTML 108Nascondi pannelli 87Ottimizza immagine in Fireworks 112salvataggio 102

combinazione, vedi unionecopia e incolla di oggetti da altre applicazioni 78

creazione di barre di navigazione (nav) 50

D

denominazione di oggetti 26descrizione comandi 7Design Note per l’integrazione di Macromedia

Dreamweaver e Fireworks 117documenti

affiancamento delle viste 92apertura 75recenti 75salvataggio 81viste multiple 92

DPI, vedi risoluzione

E

effetti dal vivo 23esercitazioni 7

esercitazione di progettazione grafica di base 13esercitazione di progettazione grafica Web 41

espansione di Fireworks 7esportazione 38

elementi grafici 73file Fireworks in Dreamweaver 131, 134HTML 65in Illustrator 125in Macromedia Director 127in Macromedia Dreamweaver 108in Macromedia Flash 118, 120in Macromedia FreeHand 125in Photoshop 139per Photoshop 139personalizzazione dei file per Photoshop 139

Esportazione rapida, pulsante 89

F

file EPS, apertura in Fireworks 76file WBMP 76filtri 23

141

finestra di ispezione Proprietà 84aggancio 85espansione 85riduzione 85sgancio 85

flusso di lavoro in Fireworks 72formato file PNG, trasparenza 122forme, vedi grafica vettorialeFrontPage

collocazione del codice HTML di Fireworks in 134collocazione delle immagini di Fireworks in 133creazione di immagini di Fireworks in 133modifica dei file di Fireworks in 135

G

GoLive 140grafica bitmap 72grafica bitmap, vedi bitmapgrafica orientata agli oggetti, vedi grafica vettorialegrafica per telefonia cellulare, vedi file WBMPgrafica vettoriale 71griglia

aggancio di oggetti 101modifica del colore predefinito 101modifica delle dimensioni delle celle 101visualizzazione/occultamento 101

gruppo di discussione, Fireworks 7guida Fireworks 6guida Macromedia 6guide

aggancio di oggetti 101blocco 101

H

HomeSitecollocazione del codice HTML di Fireworks in 131collocazione di immagini di Fireworks in 130

HTMLaggiornamento dell’HTML di Fireworks collocato

in Macromedia Dreamweaver 108apertura di tabelle 77esportazione 65inserimento da Fireworks a Dreamweaver 106operazioni con gli editor 140ottimizzato 110preferenze per l’esportazione 65

I

Illustrator, esportazione in 125immagini

incollate 79

WAP 76importazione

da fotocamera digitale 80file di Photoshop 137file PNG 79immagini 20, 43

importazione di testo, file di Photoshop 137ingrandimento di un’area specifica 91inserimento

HTML di Fireworks in Dreamweaver 106immagini di Fireworks in Dreamweaver 104

installazione di Fireworks 6integrazione di Dreamweaver e Fireworks

aggiornamento dell’HTML di Fireworks 108comando Ottimizza immagine in Fireworks 112Design Note 117lancio e modifica delle immagini di Fireworks 110lancio e modifica delle tabelle di Fireworks 111lancio e ottimizzazione delle immagini di Fireworks

113modifica animazioni di Fireworks 114preferenza editor esterno 116preferenza Lancia e modifica 117ridimensionamento immagini di Fireworks 114

interattività 73istanze multiple di un pulsante 52

J

JavaScript 5

L

lancio di Fireworks da Dreamweaver, vedi integrazione di Dreamweaver e Fireworks

livelli 24Log progetti 86

M

Macintosh 5requisiti di sistema per 5

Macromedia Director 5collocazione dei file di Fireworks in 127esportazione in 127membri del cast 129

Macromedia Dreamweaver 5comportamenti 112esportazione in 108file 104impostazione di Fireworks come editor di immagini

predefinito 115librerie 108modifica delle immagini di Fireworks in 109

Indice142

segnaposto 104Macromedia Flash 5

esportazione in 118, 120importazione dei PNG Fireworks in 118

Macromedia FreeHand 5collocazione degli elementi grafici di Macromedia

Fireworks in 123esportazione in 125

maschere 28applicazione 28

menu a comparsacreazione 56modifica 60personalizzazione 58

menu di collegamento 98menu Opzioni nei pannelli 88Mini-Launcher 93Mixer colori 85modalità

a tutto schermo con menu 91di visualizzazione, commutazione 93inserimento bitmap 72inserimento vettori 72Schermo standard 91visualizzazione 91

modalità bitmap 72applicazione con gli strumenti 83

modalità vettoriale 72modifica

di una maschera 28simboli pulsante 54

N

newsgroup, Fireworks 7nuove funzionalità 8nuovo documento

corrispondenza con la dimensione degli Appunti 74creazione 74

O

occultamentobarre degli strumenti 89pannelli 87

occultamento di pannelli 87oggetti 24

denominazione 26incollati, collocazione 78ordine di impilamento 27proprietà 19vettoriali 17

oggetti vettoriali 17

creazione 18ombre 36opzione Vincola proporzioni 76ottimizzazione 36, 62

elementi grafici 73immagini di Fireworks da Dreamweaver 112

P

pannelli 85aggancio 86apertura dei layout personalizzati 88Campioni colore 85Comportamenti 86Cronologia 86, 102Fotogrammi 85Info 85Libreria 86Livelli 85Log progetti 86menu Opzioni in 88occultamento 87organizzazione 86Ottimizza 86rimozione da un gruppo 87ripristino delle posizioni predefinite 87Risposte 7, 86salvataggio dei layout personalizzati 88sgancio 86spostamento 86Stili 86Strumenti 83Trova e sostituisci 86URL 86

pannello Campioni colore 85pannello Cronologia 86, 102panoramica 91perimetri di selezione 21Photoshop

esportazione in 139importazione di file in Fireworks 136personalizzazione dei file per l’esportazione 139plug-in 138plug-in, installazione di Acquire 80

Photoshop e Fireworksesportazione dei file PSD da Fireworks 139importazione dei file PSD in Fireworks 137

pixel, selezione 21plug-in 23, 138porzioni 73

modifica porzioni tabella di Fireworks da Macromedia Dreamweaver 111

Indice 143

preferenzeeditor esterno 116Importa 137Lancia e modifica 117per l’esportazione HTML 65

proprietàoggetto 19testo 34visualizzazione nella finestra di ispezione Proprietà

84pulsanti

assegnazione di URL 54creazione 50istanze 52stati 51testo dell’istanza 53

punti attivi 73puntini, vedi pixel

R

RAM, vedi requisiti di sistemarequisiti di sistema per Fireworks 5rettangoli di selezione, vedi perimetri di selezioneridefinizione

con ampliamento 96con riduzione 96descrizione 96oggetti bitmap 96oggetti vettoriali 96

ridimensionamento immagini di Fireworks da Dreamweaver 114

righelli 99ripetizione di azioni 102risoluzione 5risorse per l’apprendimento di Fireworks 6ritaglio

area di lavoro 97documenti 98

ritardo fotogramma, preimpostazione 75rollover 73

creazione 46

S

salvataggio dei documenti 81scorrimento dell’area di lavoro, vedi panoramicaselezione, pixel 21separazione di un documento 44simboli pulsante

creazione 50modifica 54

sito Web Fireworks Support Center (Centro di supporto Fireworks) 7

spazio di lavoro 16, 82spostamento all’interno di un documento 89strumenti

menu a comparsa dei gruppi di strumenti 84modifica opzioni 83Zoom 90

suddivisione 44

T

test dei file 68testo

creazione 30, 32istanze dei pulsanti 53proprietà 34

tracciati, copia e incolla 126trascina e rilascia 78trasparenza nei file PNG 122

U

unione bitmap 25URL, assegnazione ai pulsanti 54

V

visualizzazionebarre degli strumenti 89in anteprima, documenti su piattaforme diverse 92pannelli 87righelli 99

visualizzazione di file Fireworks in un browser 69

W

Windows, requisiti di sistema per 5

X

Xtradi importazione per Director 127Vedi filtri

Z

zoom 89uso di incrementi preimpostati 90

Indice144

Documents

Guida Introduttiva Di FW MX