Sei sulla pagina 1di 144

Guida introduttiva di Fireworks MX

macromedia

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 Developers 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 dellutente e linclusione 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 PACCHETTO SOFTWARE ACCLUSO, ALLA SUA COMMERCIABILIT O ALLA SUA IDONEIT PER SCOPI SPECIFICI. LESCLUSIONE DELLE GARANZIE IMPLICITE NON CONSENTITA IN ALCUNI STATI. TALE ESCLUSIONE PU NON RIFERIRSI AL CASO SPECIFICO. LA PRESENTE GARANZIA ASSICURA ALLUTENTE ALCUNI DIRITTI LEGALI SPECIFICI. LUTENTE 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 dellIndependent 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Requisiti di sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Installazione di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Nuove funzionalit di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8


CAPITOLO 1 Esercitazione di progettazione grafica di base . . . . . . . . . . . . . . . . . . . . . . . . 13

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

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

CAPITOLO 3 Informazioni di base su Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Informazioni sulla grafica vettoriale e bitmap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Informazioni sulle operazioni in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Creazione di un nuovo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Apertura e importazione dei file. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Salvataggio dei file di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Lo spazio di lavoro di Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Modifica dellarea di lavoro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
CAPITOLO 4 Uso di Fireworks con altre applicazioni. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

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

Sommario

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 ununica 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 leditor 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 luso 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 luso dei caratteri Type 1 (solo OS 9.x) Unit CD-ROM

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 2

Inserire il CD-ROM di Fireworks nellunit CD-ROM del computer. Eseguire una delle seguenti procedure: 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 Windows, il programma di installazione di Fireworks si avvia in genere automaticamente. In In ambiente Macintosh, fare doppio clic sullicona del programma di installazione di
Fireworks.
3

Seguire le istruzioni a video. Il programma di installazione richieder di immettere le informazioni necessarie. 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 lesecuzione 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 lassistenza tecnica Macromedia allindirizzo 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 linstallazione, 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 lapplicazione 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 dallapplicazione, una versione PDF della documentazione completa di Fireworks e diverse fonti di informazione basate sul Web.
La guida in linea di Fireworks disponibile quando lapplicazione 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.

Introduzione

Le esercitazioni di Fireworks sono

unintroduzione interattiva alle funzionalit principali di Fireworks, che richiedono circa unora di tempo ciascuna. Includono le operazioni maggiormente utilizzate di Fireworks come luso di strumenti di disegno e di editing, lottimizzazione delle immagini e la creazione di elementi interattivi come rollover e barre di navigazione.

Nel pannello Risposte possibile trovare in ununica 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. Lapplicazione Fireworks contiene molte finestre di dialogo e descrizioni comandi progettate specificamente per assistere lutente nellutilizzo del programma. Le descrizioni comandi vengono visualizzate quando si arresta il puntatore su uno degli elementi dellinterfaccia 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 allindirizzo 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 allindirizzo http://www.macromedia.com/it/support/.

Il gruppo di discussione su Fireworks consente di scambiare informazioni con gli utenti di Fireworks, i rappresentanti dellassistenza tecnica e il team di sviluppo di Fireworks. Avvalersi di un lettore di newsgroup e accedere allindirizzo 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 allindirizzo 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 allindirizzo indicato su di esso.

Guida introduttiva

Nuove funzionalit di Fireworks


Grazie alle nuove funzionalit presenti, Fireworks MX risulta sempre pi unapplicazione userfriendly 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 uninterfaccia utente semplificata, pulsanti e menu a comparsa pi potenti e strumenti bitmap e vettoriali intuitivi. Lintegrazione 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. Unaltra 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 unapplicazione 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 unapposita area di aggancio per organizzare lo spazio di lavoro, oppure trascinare gruppi o singoli pannelli da un punto allaltro 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 dellarea 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 lopacit, direttamente dalla finestra di ispezione Propriet, anzich dover fare clic per aprire o attivare un pannello dopo laltro. 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.

Introduzione

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 lesportazione 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). di integrare visivamente testo ed elementi grafici senza dover utilizzare lEditor di testo. sufficiente selezionare lo strumento Testo, fare clic sullarea 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.

Il testo a video consente

Lo zoom variabile permette di trascinare lo strumento Ingrandimento in modo da determinare la precisa entit dellingrandimento. Dopo aver trascinato lo strumento per ingrandire il documento, lentit dellingrandimento 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 dellinterfaccia utente OS X. Lesportazione 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 allinterno di database in linea documentazioni come Note tecniche. Il controllo ortografico permette di ricercare allinterno 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 dalluso di caratteri di vari sistemi. Fireworks mantiene inalterato laspetto di tutto il testo di un documento nei sistemi in cui non sono installati i caratteri allinterno 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 sulloriginale, ciascuno con informazioni esclusive ricavate da un file delimitato da una virgola o da un file di database XML.

Guida introduttiva

La funzione di creazione di barre di navigazione nel menu Comandi permette di automatizzare il processo di creazione rapida delle barre di navigazione con luso 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, lorientamento verticale o orizzontale e la spaziatura, quindi assegnare etichette di pulsanti e indirizzi URL in una finestra di dialogo integrata. I miglioramenti apportati allEditor 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 alloggetto 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 laltro con linserimento 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 lAPI 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 allindirizzo 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 dallutente nel menu Comandi e un pannello Allineamento creato dallutente 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.

10

Introduzione

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 laspetto corretto del testo e la sua piena modificabilit. Per ulteriori informazioni, consultare Informazioni sullimportazione 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 dellHTML di Fireworks a FrontPage a pagina 134. Lintegrazione 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.

Guida introduttiva

11

12

Introduzione

CAPITOLO 1 Esercitazione di progettazione grafica di base

Questa esercitazione guida lutente nellapplicazione delle funzioni base della progettazione grafica con Macromedia Fireworks MX. Con luso dellapplicazione leader nel settore della grafica Web lutente 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 trattati
Lesercitazione insegna, in meno di unora, ad eseguire le operazioni necessarie per creare con Fireworks un messaggio pubblicitario per il noleggio di auto depoca. Lutente apprender ad eseguire le seguenti operazioni:

Copia del file Tutorials Visualizzazione del file dellesercitazione nella sua forma completa Creazione e salvataggio di un nuovo documento Introduzione allambiente 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 che


Pur essendo destinata ai nuovi utenti di Fireworks, lesercitazione 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 nelluso 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 Tutorials


Prima 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 dellapplicazione Fireworks sul disco fisso del computer.
Nota: Se la cartella dellapplicazione Fireworks non visualizzata possibile che lutente abbia accesso limitato ai file sul sistema. I file necessari per eseguire questa esercitazione possono essere scaricati dal sito Fireworks Support Center allindirizzo http://www.macromedia.com/it/support/.

Trascinare sul desktop una copia della cartella Tutorials.

Visualizzazione del file dellesercitazione nella sua forma completa


Visualizzare il file dellesercitazione nella sua forma completa per osservare laspetto che avr il progetto una volta ultimato.
1 2

Aprire il browser Web. Portarsi sulla cartella dellapplicazione 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, lestensione dei file nella cartella Complete non verr visualizzata. Quando si opera in grafica Web, consigliabile poter visualizzare lestensione dei file. Per informazioni su come ripristinare la visualizzazione dellestensione dei file consultare la Guida di Windows.

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 depoca.
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 documento


A 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.

14

Capitolo 1

Immettere 480 per la larghezza e 214 per laltezza. Controllare che entrambe le misure siano espresse in pixel e che il colore dellarea 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).

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. Scegliere File > Salva con nome. Si aprir la finestra di dialogo Salva con nome (Windows) oppure la finestra Salva (Macintosh).

5 6 7 8

Portarsi sulla cartella Tutorials/Tutorial1 sul proprio desktop. Denominare il file vintage. Se non ancora selezionata, scegliere lopzione Aggiungi estensione nome file (solo Macintosh). 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 luso sul Web.

Durante la sessione di esercitazione, si consiglia di salvare il lavoro di frequente, selezionando File > Salva.
Nota: Durante lesercitazione, 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 lultima modifica apportata, scegliere Modifica > Annulla.

Esercitazione di progettazione grafica di base

15

Introduzione allambiente di lavoro di Fireworks


Prima di continuare, esaminare le funzioni dellambiente di lavoro di Fireworks:

Al centro dello schermo si trova la finestra documento. Al centro della finestra documento si
trova larea di lavoro. Larea 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 nellangolo inferiore destro, per vedere tutte le propriet.

Freccia di espansione a met altezza

16

Capitolo 1

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 dellinterfaccia. Se il puntatore viene tenuto per alcuni
secondi su una voce dellinterfaccia, verr visualizzata la descrizione dellelemento selezionato. Le descrizioni identificano gli strumenti, i menu, i pulsanti e altre funzioni dellinterfaccia in tutto il programma. Le descrizioni scompaiono quando il puntatore viene allontanato dagli elementi dellinterfaccia che identificano. Pi avanti nel corso dellesercitazione si apprenderanno ulteriori informazioni su questi elementi.

Creazione e modifica di oggetti vettoriali


Con 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 nellimmagine riportata sotto un insieme di oggetti vettoriali. Si noti luniformit 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.

Esercitazione di progettazione grafica di base

17

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 dellarea di lavoro.
1

Scegliere lo strumento Rettangolo nella sezione Vettore del pannello Strumenti.

Nella finestra di ispezione Propriet, fare clic sulla casella Colore riempimento.

Si apre la finestra a comparsa Colore riempimento.

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. Nella finestra documento, collocare il puntatore sullarea di lavoro e trascinare verso il basso a destra per creare un rettangolo. Il rettangolo pu essere trascinato in qualsiasi punto dellarea di lavoro. Pi avanti nel corso dellesercitazione il rettangolo verr ridimensionato e collocato nella posizione corretta.

18

Capitolo 1

Quando si rilascia il pulsante del mouse, compare nellarea 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 uneccezione.

Nellangolo sinistro inferiore della finestra di ispezione Propriet, digitare 480 nella casella della larghezza e 15 nella casella dellaltezza, quindi premere INVIO. Il rettangolo viene ridimensionato alle dimensioni specificate. Scegliere lo strumento Puntatore nella sezione Seleziona del pannello Strumenti. Trascinare il rettangolo in modo che risulti collocato in fondo allarea di lavoro, come indicato sotto. Per una collocazione pi precisa usare i tasti freccia.

7 8

Selezionare di nuovo lo strumento Rettangolo e disegnare un secondo rettangolo. Trascinarlo in un punto qualsiasi dellarea di lavoro e specificare le dimensioni desiderate. Nella sezione successiva dellesercitazione si modificheranno le propriet e la posizione del rettangolo.

Impostazione delle propriet di un oggetto In questa sezione dellesercitazione 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.

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

Esercitazione di progettazione grafica di base

19

3 4

Fare clic sulla casella Colore riempimento nella finestra di ispezione Propriet e fare clic sul pulsante Trasparente. Nella finestra di ispezione Propriet, immettere i seguenti valori nelle caselle dellaltezza, della larghezza, e delle coordinate. Quindi fare clic allesterno 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 larea 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 pixel


In questa sezione si proceder ad importare una immagine bitmap e a creare una selezione flottante dai suoi pixel. Importazione di una immagine Modifica dellimmagine di una auto depoca. Per prima cosa occorre importare limmagine.
1 2

Scegliere File > Importa e portarsi sulla cartella Esercitazioni del computer. Portarsi sulla cartella Tutorial1/Assets. Selezionare car.jpg e fare clic su Apri.

20

Capitolo 1

Allineare il puntatore di inserzione allangolo superiore sinistro dellarea di lavoro e fare clic, come mostrato nellillustrazione seguente.

Limmagine compare selezionata sullarea di lavoro.


4

Fare clic allesterno dellimmagine selezionata per deselezionarla.

Creazione di una selezione di pixel Si proceder ora a selezionare i pixel che compongono lautomobile nellimmagine importata e a copiarli e incollarli come un nuovo oggetto.
1

Scegliere lo strumento Ingrandisci nella sezione Visualizza del pannello Strumenti.

Strumento Ingrandisci

Fare clic sullimmagine. La vista viene ingrandita al 150%. Lingrandimento della vista consente di vedere meglio quanto selezionato e consente un controllo pi preciso sulla selezione.

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 limmagine dellauto.
4

Nella finestra di ispezione Propriet, impostare lopzione Bordo su Antialiasing.

Esercitazione di progettazione grafica di base

21

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

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. Scegliere Modifica > Incolla. Limmagine dellauto viene incollata nel documento come nuovo oggetto bitmap. Scegliere lo strumento Puntatore e fare doppio clic in qualunque punto esterno alla bitmap per deselezionarla. Fare clic sul menu a comparsa Imposta ingrandimento nella parte inferiore della finestra documento e riportare la vista al 100%.

9 10

22

Capitolo 1

Aggiunta e modifica di effetti dal vivo


Si proceder ora ad applicare effetti dal vivo allimmagine bitmap originale. Si modificher la tonalit e la saturazione dellimmagine e si applicher una sfumatura.
1

Fare clic in un punto qualunque dellimmagine. (Prestare attenzione a non fare clic sullauto).

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

Pulsante Elimina effetti Pulsante Aggiungi effetti 3

Selezionare Regola colore > Tonalit/Saturazione dal menu a comparsa Effetti. Si aprir la finestra di dialogo Tonalit/Saturazione.

Scegliere lopzione Colorizza e fare clic su OK. Limmagine sullarea di lavoro si colora e leffetto viene aggiunto allelenco Effetti dal vivo nella finestra di ispezione Propriet. Gli effetti dal vivo possono essere aggiunti, modificati o eliminati dallelenco.

Esercitazione di progettazione grafica di base

23

Fare doppio clic sulleffetto Tonalit/Saturazione per modificarlo.


Suggerimento: In alternativa, possibile fare clic sul pulsante Info di fianco alleffetto.

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 dellimmagine cambiano e limmagine si mostra con un colore seppia, come da vecchia fotografia.

7 8

Fare di nuovo clic sul pulsante Aggiungi effetti per aggiungere un altro effetto dal vivo allelenco. Scegliere Sfocatura > Ulteriore sfocatura dal menu a comparsa Effetti. I pixel della bitmap selezionata diventano sfocati e il nuovo effetto viene aggiunto allelenco Effetti dal vivo nella finestra di ispezione Propriet.

Operazioni con livelli e oggetti


I 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 lordine 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 dellesercitazione 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 lordine di impilamento degli oggetti. Pi avanti nel corso dellesercitazione il pannello Livelli verr usato per applicare una maschera ad una immagine unita.

24

Capitolo 1

Unione di bitmap Dopo aver applicato gli effetti dal vivo allimmagine di sfondo, questa verr unita allimmagine dellauto 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.
Freccia di espansione

2 3

Fare clic sulla miniatura dellimmagine dellauto in scala dei grigi nel pannello Livelli. Con limmagine dellauto selezionata, fare clic sullicona del menu a comparsa Opzioni nella parte superiore destra del pannello Livelli.
Icona del menu a comparsa Opzioni

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 nellelenco degli effetti dal vivo. Ci risulta perch lunione 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 lunione ad unaltra bitmap sottostante.

Esercitazione di progettazione grafica di base

25

Denominazione di oggetti consigliabile definire un nome per gli oggetti per facilitarne luso 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.

Digitare Classic Car nella casella di testo e premere INVIO. Il nuovo nome viene applicato alloggetto bitmap.

Nella finestra del documento, selezionare il rettangolo grigio che contorna il documento. Se non facilmente identificabile nellarea di lavoro, selezionarlo nel pannello Livelli. Ora si denominer loggetto usando la finestra di ispezione Propriet. 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 delloggetto 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 loggetto nel documento.

26

Capitolo 1

Modifica dellordine di impilamento degli oggetti Limmagine bitmap unita si sovrappone alloggetto bordo e al rettangolo blu. Per poter usare il pannello Livelli e cambiare lordine di impilamento degli oggetti nel documento, il rettangolo che costituisce il bordo e il rettangolo blu devono trovarsi al livello superiore.
1 2

Fare clic sulla miniatura del rettangolo blu nel pannello Livelli per selezionarlo. Trascinare sul livello 1, al di sopra della miniatura dellauto depoca (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 loggetto verr rilasciato quando si rilascia il pulsante del mouse.
3

Rilasciare il pulsante del mouse. Il rettangolo blu viene rilasciato sopra loggetto bitmap nel pannello Livelli. Anche lordine di impilamento degli oggetti nellarea di lavoro cambia. ll rettangolo blu si trova ora sovrapposto alloggetto bitmap e alloggetto bordo.

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

Esercitazione di progettazione grafica di base

27

Creazione e modifica di una maschera


Dopo aver eseguito varie modifiche allimmagine dellauto depoca, si eseguir lultima procedura per conferirle gradatamente laspetto di trasparenza. In Fireworks possibile applicare due tipi di maschere: maschere vettoriali e maschere bitmap. In questa esercitazione, si applicher una semplice maschera bitrmap allimmagine dellauto. Limmagine verr modificata aggiungendole un riempimento sfumato. A seconda del valore della scala dei grigi, i pixel della maschera faranno si che limmagine dellauto sia visibile o nascosta. Applicazione di una maschera Per prima cosa si applica una maschera bitmap bianca e vuota allimmagine dellauto. Una maschera bianca mostra loggetto o limmagine selezionata, mentre una maschera di pixel neri li nasconde. Alla maschera verr inoltre applicato colore per far s che lauto appaia sfumata nello sfondo.
1 2

Selezionare limmagine bitmap con lo strumento Puntatore. Fare clic sul pulsante Aggiungi maschera in fondo al pannello Livelli. Allimmagine selezionata viene aggiunta una maschera trasparente vuota. Osservando la miniatura nel pannello Livelli si pu capire che stata aggiunta la maschera. Levidenziazione in giallo della miniatura indica che la maschera selezionata.

Miniatura della maschera Oggetto maschera

Modifica di una maschera Si conferisce ora laspetto 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.

28

Capitolo 1

Fare clic sulla casella Colore riempimento nella finestra di ispezione Propriet. Si apre la finestra a comparsa Modifica sfumatura. 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.
Gamma colori Campioni colore

4 5 6

Trascinare per circa un 1/4 del percorso verso destra il campione di colore di sinistra (bianco), per regolare la sfumatura. Fare clic allesterno della finestra a comparsa Modifica sfumatura per chiuderla. Nellarea di lavoro, trascinare il puntatore Sfumatura attraverso limmagine bitmap, come mostrato nella illustrazione seguente. Mentre si trascina compare a schermo un segnale visivo che consente di definire langolo e la distanza alla quale viene applicata la sfumatura.

Rilasciare il pulsante del mouse. La maschera stata modificata con il riempimento sfumato creato. La maschera modifica limmagine dellauto fornendole un aspetto di trasparenza. La miniatura della maschera nel pannello Livelli visualizza il riempimento sfumato applicato.

Esercitazione di progettazione grafica di base

29

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 laspetto scala dei grigi. I pixel pi scuri della maschera nascondono limmagine dellauto mentre i pixel chiari la lasciano trasparire.

Creazione e modifica di un testo


Si 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.
Dimensioni Colore riempimento Carattere Pulsanti stile

Interlinea Scala orizzontale Pulsanti di allineamento

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 nellarea di lavoro.

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

30

Capitolo 1

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 dellarea di lavoro. Si crea un blocco di testo vuoto. Il circoletto vuoto nellangolo 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.
Indicatore di ridimensionamento automatico

Digitare Vintage nel blocco di testo. Il blocco di testo si espande in larghezza man mano che si immette del testo. Fare clic una volta allesterno 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. Lindicatore visibile solo quando si sta immettendo o modificando un testo.

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

7 8

Fare clic allesterno del blocco di testo per deselezionarlo e scegliere di nuovo lo strumento Testo. Nella finestra di ispezione Propriet, scegliere Arial come carattere e 12 come dimensione del carattere.

Esercitazione di progettazione grafica di base

31

9 10

Fare clic di nuovo nellarea di lavoro, in qualche punto sotto il blocco di testo creato e digitare CLASSIC RENTALS in lettere maiuscole. 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 allesterno 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 allesterno 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 2

Scegliere lo strumento Testo. Questa volta, anzich fare solo clic nellarea 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 nellangolo 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 dangolo ha la funzione di commutazione. Per cambiare la propriet da ridimensionamento automatico del blocco di testo in lunghezza fissa necessario fare doppio clic.

32

Capitolo 1

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 lesercitazione viene eseguita in linea, possibile copiare e incollare direttamente il testo nel blocco di testo di Fireworks.

Il testo scorre allinterno del blocco di testo creato. Il blocco di testo incrementa in senso verticale ma non in senso orizzontale.
4 5 6

Scegliere lo strumento Puntatore e fare clic allesterno del blocco di testo per deselezionalo. Scegliere di nuovo lo strumento Testo. Nella finestra di ispezione Propriet, fare clic sulla casella Colore riempimento e scegliere bianco come colore del testo. Fare clic nellangolo inferiore sinistro dellarea di lavoro. Compare un nuovo blocco di testo in cima al rettangolo blu. Digitare il seguente testo in lettere maiuscole senza interruzioni di linea: SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC EXOTIC - ROADSTER
Suggerimento: Se lesercitazione viene eseguita in linea possibile copiare e incollare direttamente il testo sopra.

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.

Esercitazione di progettazione grafica di base

33

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.

Nella finestra di ispezione Propriet, eseguire quanto segue: antialiasing. Lantialiasing 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 lopzione 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.

Se non ancora selezionato, scegliere Antialiasing attenuato dal menu a comparsa Livello

Impostare lopzione Scala orizzontale nella finestra di ispezione Propriet su 89% e premere INVIO.

I caratteri nel blocco di testo Vintage si assottigliano. Lopzione Scala orizzontale allunga o restringe orizzontalmente i caratteri nel testo selezionato. Limpostazione 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 5

Selezionare il blocco di testo Classic Rentals. Nella finestra di ispezione Propriet, eseguire quanto segue: INVIO.

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

34

Capitolo 1

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 8

Selezionare il blocco di testo Indulge. Nella finestra di ispezione Propriet, eseguire quanto segue: Impostare la dimensione del carattere a 13. Selezionare nero come colore del testo. Fare clic sul pulsante Allineamento a destra. Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing. Impostare lopzione Scala orizzontale all89%. Impostare lopzione Interlinea al 150% e premere INVIO. Interlinea imposta lo spazio tra le linee di testo. Linterlinea normale per il testo 100%. I valori superiori al 100% aumentano lo spazio tra le linee, i valori inferiori lo diminuiscono.

Trascinare una delle maniglie dangolo del blocco di testo per ridimensionare il blocco, in modo che il testo scorra come mostrato sotto. Se necessario, trascinare lintero blocco di testo.

Esercitazione di progettazione grafica di base

35

10 11

Selezionare il blocco di testo in fondo al documento. Nella finestra di ispezione Propriet, eseguire quanto segue:

Impostare la dimensione del carattere a 13. Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing. Impostare lopzione Scala orizzontale a 89% e premere INVIO.
12

Se necessario riposizionare il blocco di testo.

Aggiunta di unombra In Fireworks possibile applicare Effetti dal vivo anche ai testi. Si provveder ora ad aggiungere unombra al testo Vintage usando i comandi Effetti dal vivo nella finestra di ispezione Propriet.
1 2

Selezionare il blocco di testo Vintage. 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.

Immettere 5 per la Distanza e 60% per Opacit. Fare clic allesterno della finestra a comparsa per chiuderla. Un effetto ombra viene aggiunto al blocco di testo Vintage. 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 dellimmagine grafica Prima di esportare un documento da Fireworks, si raccomanda di ottimizzarlo. Lottimizzazione assicura lesportazione dellimmagine 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.

36

Capitolo 1

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 laspetto che avr il documento una volta esportato, sulla base delle impostazioni correnti.
Dimensione file Tempo di scaricamento

Nella parte superiore destra della finestra, Fireworks visualizza la dimensione del file per lesportazione e il tempo stimato necessario per visualizzare limmagine sul Web.

Esercitazione di progettazione grafica di base

37

Esportazione di una immagine grafica Dopo aver ottimizzato limmagine, 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 3

Portarsi sulla cartella Tutorials sul pc, quindi scegliere Tutorial1/Export. 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 5

Scegliere File > Salva per salvare le modifiche apportate al file PNG. 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.

38

Capitolo 1

Selezionare vintage.jpg e fare clic su Apri. Limmagine 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 limmagine e tutte le sue propriet, quando stata eseguita lesportazione 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.

Fare clic su ciascun oggetto. La finestra di ispezione Propriet visualizza le varie opzioni per ciascun oggetto selezionato. Selezionare il testo Vintage nellarea di lavoro. Leffetto dal vivo Ombra per questo oggetto di testo compare nella finestra di ispezione Propriet. Il vantaggio delluso 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.

Esercitazione di progettazione grafica di base

39

Argomenti successivi
A 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 limmagine completata. Per informazioni dettagliate sulle funzioni trattate in questa esercitazione e altre funzioni di Fireworks, fare riferimento allindice di Uso di Fireworks oppure consultare gli argomenti della Guida Fireworks. Per altre esercitazioni di Fireworks, visitare il sito Web Macromedia allindirizzo http://www.macromedia.com/it/. Si consiglia di visitare inoltre lacclamato sito Centro di supporto di Macromedia allindirizzo http://www.macromedia.com/it/support/. Per apprendere luso di Fireworks nella creazione di pagine Web interattive, consultare Esercitazione di progettazione grafica di base a pagina 13. Nel corso dellesercitazione si utilizzer limmagine 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.

40

Capitolo 1

CAPITOLO 2 Esercitazione di progettazione grafica Web

Questa esercitazione guida lutente attraverso le operazioni di base della progettazione grafica Web e interattivit con Macromedia Fireworks MX. Con luso dellapplicazione leader nel settore della grafica Web, lutente acquista esperienza pratica e apprende i concetti base della progettazione grafica.

Argomenti trattati
Grazie allesercitazione, sar possibile ricostruire il workflow di produzione tipico di Fireworks per la realizzazione di una pagina Web. Lutente apprender ad eseguire le seguenti operazioni:

Copia del file Tutorials Vista della pagina Web completata Apertura del file di origine Importazione di unimmagine 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 che


Per 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 Tutorials


Prima 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 lesercitazione 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 dellapplicazione Fireworks sul disco fisso del computer.
Nota: Se la cartella dellapplicazione Fireworks non visualizzata possibile che lutente 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 allindirizzo http://www.macromedia.com/it/support.

Trascinare sul desktop una copia della cartella Tutorials.

Vista della pagina Web completata


Prima di iniziare lesercitazione, visualizzare il file dellesercitazione nella sua forma completa per osservare laspetto che avr il progetto una volta ultimato ed esportato come file HTML.
1 2

Apertura del browser Web. Portarsi sulla cartella dellapplicazione 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, lestensione dei file nella cartella Complete non verr visualizzata. Quando si opera in grafica Web, consigliabile poter visualizzare lestensione dei file. Per informazioni su come ripristinare la visualizzazione dellestensione dei file, consultare la Guida di Windows.

Selezionare il file Final.htm e trascinarlo nella finestra di un browser aperto. Nel corso dellesercitazione, si proceder a completare la versione parziale della pagina per la Global, societ per il noleggio di auto.

Portare il puntatore sullimmagine Vintage. Quando il puntatore si sposta sullimmagine Vintage, limmagine sulla pagina cambia. Questo dovuto alleffetto di un rollover disgiunto.

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 lutente dovr selezionare la propria URL per questo ed altri elementi nel corso dellesercitazione.

6 7 8 9

Utilizzare il pulsante Back (Indietro) del browser per tornare alla pagina final.htm. Portare il puntatore sullimmagine Worldwide Airports. Si apre un menu a comparsa. Attraversare con il puntatore ciascuna voce del menu, compresa la prima, contenente un menu secondario. Fare clic su United States per testare il collegamento, quindi ritornare alla pagina final.htm. Dopo aver visualizzato la pagina Web, si pu chiuderla o lasciarla aperta come riferimento durante lesecuzione dellesercitazione.
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.

42

Capitolo 2

Apertura del file di origine


A questo punto, dopo aver visualizzato il file final.jpg nel browser si pronti a iniziare il progetto.
1 2

In Fireworks, scegliere File > Apri. 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 unimmagine
Dopo aver aperto il disegno non finito per la pagina Web della Global, si procede ad importare una immagine grafica. Se lesercitazione di base di progettazione grafica gi stata completata, si utilizzer limmagine JPEG. Se lesercitazione di base non stata eseguita, lutente trover in questa esercitazione una immagine completata.
1

Scegliere File > Importa ed eseguire una delle seguenti operazioni: Tutorial1/Export.

Se stata completata lesercitazione di base di progettazione grafica, portarsi sulla cartella Se al contrario non stata completata lesercitazione di base di progettazione grafica, portarsi
sulla cartella Tutorial2/Assets.
2 3

Selezionare vintage.jpg e fare clic su Apri. Fare clic in un punto vuoto e bianco dellarea di lavoro. Limmagine compare sullo schermo selezionata. Trascinare limmagine per collocarla come mostrato nellillustrazione seguente.

Esercitazione di progettazione grafica Web

43

Suddivisione in porzioni di un documento


Per 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 laggiunta di elementi interattivi. Si provveder ora a creare suddivisioni in porzioni per alcuni degli elementi grafici della pagina Web. In seguito, durante lesercitazione si aggiungeranno gli elementi interattivi alle porzioni, insieme alle impostazioni per lottimizzazione e la compressione di tali elementi.
1

Con limmagine Vintage ancora selezionata, scegliere Modifica > Inserisci > Porzione. Sullimmagine viene inserita una porzione. Per impostazione predefinita le porzioni presentano una sovrapposizione verde.

Fare clic allesterno 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.

Fare clic tenendo premuto il tasto MAIUSC sullimmagine Worldwide Airports e sullimmagine Great Weekend Rates, alla sinistra del documento, per selezionare contemporaneamente entrambe le immagini.

44

Capitolo 2

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. Laggiunta di porzioni modifica il layout delle porzioni automatiche nel resto del documento.

Fare clic in un punto qualsiasi allesterno 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.

Portare il puntatore sulla guida sinistra dellimmagine 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 sullimmagine Great Weekend Rates, come mostrato nellillustrazione sotto riportata.

Esercitazione di progettazione grafica Web

45

Rilasciare il pulsante del mouse. 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.

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 rilascia


Dopo 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 unaltra parte dello schermo quando il puntatore lo attraversa. In questa esercitazione, si creer un rollover disgiunto.

46

Capitolo 2

Selezionare la porzione che copre limmagine 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.

Maniglia del comportamento

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 allangolo della porzione e compare la finestra di dialogo Scambia immagine.

Esercitazione di progettazione grafica Web

47

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, limmagine del Fotogramma 2 sostituisce limmagine Great Weekend Rates. Limmagine Vintage quella che innesca leffetto rollover mentre limmagine che sostituisce limmagine Great Weekend Rates considerata limmagine di scambio.

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 lanimazione. 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. Larea di lavoro ora vuota, con leccezione 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 leccezione 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.

48

Capitolo 2

6 7

Scegliere File > Importa e portarsi sulla cartella Tutorial2/Assets. Selezionare il file denominato rates .gif e fare clic su Apri. Collocare il puntatore di inserzione sulla porzione in cui era collocata limmagine Great Weekend Rates nel Fotogramma 1. Allineare il puntatore di inserzione allangolo superiore sinistro della porzione.

Fare clic per inserire limmagine. Compare limmagine Vintage Classic Rates.

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 sullimmagine Vintage. Limmagine Great Weekend Rates cambia quando il puntatore passa sopra limmagine Vintage.
Suggerimento: Se limmagine non sembra ferma oppure se la transizione da una immagine allaltra non uniforme, regolare la posizione dellimmagine di scambio nel Fotogramma 2 sulla vista Originale. Per un posizionamento di precisione, attivare lopzione Onion skin nel pannello Fotogrammi oppure verificare che le coordinate X e Y dellimmagine Vintage Classic Rates siano le stesse dellimmagine Great Weekend Rates nella finestra di ispezione Propriet. Conclusa questa operazione, ritornare al Fotogramma 1 e disattivare, se necessario, lopzione Onion skin. Per informazioni dettagliate su queste opzioni, fare riferimento allindice 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.

Esercitazione di progettazione grafica Web

49

Normalmente leffetto rollover viene aggiunto ad una immagine per indicare agli utenti che possibile fare clic sullimmagine. 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. Laspetto dei pulsanti cambia secondo il movimento o il clic del mouse e rappresenta una indicazione visiva dellinterattivit. 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 Limmagine iniziale e il testo per un pulsante sono gi stati creati per lesercitazione. Limmagine creata verr convertita in un simbolo di pulsante.
1 2

In Fireworks, selezionare limmagine del pulsante (con etichetta BUTTON TEXT) nellangolo sinistro superiore del documento. Scegliere Modifica > Simbolo > Converti in simbolo. Compare la finestra di dialogo Propriet simbolo. Immettere My Button nel campo Nome, scegliere Pulsante come tipo di simbolo e fare clic su OK.

Comparir una porzione sopra limmagine del pulsante e una icona di scelta rapida a sinistra della porzione. Ci indica che la selezione nellarea di lavoro unistanza del simbolo appena creato. I simboli sono copie master dellimmagine. Quando si cambia un simbolo tutte le istanze di quel simbolo nel documento cambiano automaticamente. I simboli sono contenuti nella libreria.

50

Capitolo 2

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 sullistanza del pulsante creata.


Suggerimento: In alternativa possibile fare doppio clic sullanteprima del pulsante nel pannello Libreria oppure sullicona del simbolo nellelenco dei simboli del pannello Libreria.

Si aprir lEditor di pulsanti con limmagine del pulsante visualizzata nello spazio di lavoro.

Esercitazione di progettazione grafica Web

51

Fare clic sulle schede dellEditor di pulsanti. Le prime quattro schede rappresentano gli stati dei pulsanti. Lultima scheda, Area attiva, rappresenta larea sensibile del pulsante o il punto in cui lutente deve fare clic o attraversare con il mouse per attivare gli stati del pulsante. Larea attiva anche larea che cambia con ciascun stato del pulsante. Attualmente non ci sono altri stati per il pulsante se non lo stato Su, corrispondente allaspetto del pulsante prima che lutente faccia clic su di esso o vi passi sopra il puntatore.

Fare clic sulla scheda Sopra in cima allEditor di pulsanti, quindi fare clic sul pulsante Copia grafico Su. Limmagine del pulsante viene copiata dalla scheda Su. Lo stato Sopra corrisponde allaspetto del pulsante quando il puntatore su di esso. Per consentire allutente la visualizzazione occorre cambiare il colore del rettangolo dietro il testo.

4 5

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. 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 dellEditor di pulsanti, quindi sul pulsante Copia grafico Sopra. Limmagine del pulsante viene copiata dalla scheda Sopra. Lo stato Gi corrisponde allaspetto assunto dal pulsante quando si fatto clic su di esso. In questa esercitazione il colore del rettangolo non verr cambiato.

7 8

Fare clic su Completato nellEditor di pulsanti per applicare le modifiche al simbolo del pulsante. 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 2

Se non ancora selezionato, selezionare il pulsante nello spazio di lavoro. Scegliere Modifica > Clona. Sopra il pulsante originale compare una nuova istanza del pulsante.

52

Capitolo 2

Premere ripetutamente il tasto MAIUSC insieme al tasto freccia destra, per spostare a destra la nuova istanza. Listanza 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 listanza immediatamente a destra dellistanza originale, ma non sovrapposta, come mostrato nellillustrazione riportata sotto.

Clonare altre due istanze del pulsante e collocarle entrambe a destra dellistanza precedente.
Suggerimento: Come scelta rapida, premere Alt (Windows) o Opzione (Macintosh), trascinando listanza selezionata con il puntatore per farne una copia. Dopo aver posizionato la nuova istanza allimmediata destra della precedente istanza, scegliere Modifica > Ripeti duplica, per creare e collocare automaticamente unaltra copia dellistanza.

Modifica del testo di unistanza 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 lultima istanza verso sinistra. Le propriet per listanza del pulsante vengono visualizzate nella finestra di ispezione Propriet. Con leccezione del menu a comparsa Esporta impostazioni, queste propriet si applicano solo allistanza selezionata. Le modifiche eseguite qui non interessano il simbolo originale del pulsante nella Libreria.

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.

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

Esercitazione di progettazione grafica Web

53

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, lindirizzo di una pagina Web. possibile assegnare URL ai pulsanti usando la finestra di ispezione Propriet. 1 Selezionare listanza del pulsante con letichetta 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 nellesercitazione perch il pulsante Home stato collegato a questa pagina. Selezionare listanza 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 5

Assegnare una URL a ciascuna delle rimanenti istanze del pulsante. Come per la prima, assegnare una URL indefinita. 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 lEditor 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 allaspetto del testo, si interviene sul simbolo originale, in modo che le modifiche vengano applicate a tutte le istanze nello spazio di lavoro.

54

Capitolo 2

2 3 4

Fare clic sulla scheda Sopra. Selezionare il rettangolo nero. 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. Fare clic su Completato nellEditor di pulsanti per applicare la modifica al simbolo del pulsante. 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.

5 6

7 8

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. Selezionare il testo del pulsante nellEditor di pulsanti e scegliere il carattere Arial nella finestra di ispezione Propriet. Ripetere per ognuno degli stati del pulsante.

Fare doppio clic sul blocco di testo nellEditor di pulsanti e cancellare la parola BUTTON.

10

Fare clic su S nella finestra di messaggio dove si chiede allutente di modificare il testo negli altri stati del pulsante. Esaminare i vari stati del pulsante nellEditor 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 quelloccasione 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 dallEditor 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 allaspetto 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 laspetto grafico di tutte le istanze del pulsante nella barra di navigazione, mantenendo il testo unico di ciascuna istanza.

Esercitazione di progettazione grafica Web

55

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 lelenco 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 lEditor menu a comparsa.
1 2

Selezionare la porzione che copre limmagine Worldwide Airports. Scegliere Modifica > Menu a comparsa > Aggiungi menu a comparsa. Si apre lEditor menu a comparsa.

3 4

Fare doppio clic sulla casella di testo nellangolo superiore sinistro (solo Windows). Immettere North America nella casella di testo e premere INVIO. La casella di testo successiva si evidenzia ed disponibile per creare una nuova voce.

56

Capitolo 2

5 6

Digitare Europe e premere INVIO. Creare altre voci per Africa, Middle East e Asia/Pacific.

7 8

Fare doppio clic sulla casella di testo Collega per la nuova voce North America. 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.

Immettere gli URL per gli elementi restanti.


Nota: In fondo allelenco degli elementi nellEditor dei menu a comparsa rimane sempre un riga vuota. disponibile per laggiunta di nuovi elementi senza dover fare clic sul pulsante Aggiungi menu.

10

Fare clic su Completato per chiudere lEditor 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 sullimmagine Worldwide Airports. Compare il menu a comparsa creato. Fare clic su ciascuno degli elementi per testare i collegamenti.

Esercitazione di progettazione grafica Web

57

Personalizzazione di un menu a comparsa Tornare allEditor menu a comparsa per modificare laspetto del menu a comparsa.
1

In Fireworks, fare doppio clic sul profilo del menu a comparsa. Si apre lEditor menu a comparsa che visualizza le voci inserite. 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 4 5

Scegliere HTML per il tipo di cella e Menu verticale per lallineamento. Scegliere Arial, Helvetica, sans-serif come carattere e 12 come dimensione del carattere. 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 nellEditor 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.

58

Capitolo 2

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 limmagine Worldwide Airports nellarea di lavoro, come mostrato sotto.

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.

Scegliere Pixel dal menu Larghezza cella. Si apre la finestra Larghezza cella. Immettere 137 per la larghezza della cella.

Esercitazione di progettazione grafica Web

59

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 langolo superiore sinistro del menu a comparsa verr allineato allangolo 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 sullimmagine 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 lEditor menu a comparsa per aggiungere unaltra voce al menu a comparsa. Si cambier anche lordine delle voci e si aggiunger un menu secondario.
1 2 3

In Fireworks, fare doppio clic sul profilo del menu a comparsa. Fare clic sulla voce Europe per selezionarla. Fare clic sul pulsante Aggiungi menu in cima allelenco delle voci. Viene inserita una riga vuota.

60

Capitolo 2

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

Si noti che America Settentrionale e meridionale sono due voci distinte dellelenco.
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 7 8

Selezionare la voce North America e fare clic sul pulsante Aggiungi menu. Fare doppio clic sul campo Testo della nuova voce ed immettere United States, quindi fare clic allesterno dei campi delle voci. Prestare attenzione a non selezionare unaltra voce. 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.

Esercitazione di progettazione grafica Web

61

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. Fare clic su Completato per chiudere lEditor menu a comparsa quindi visualizzare in anteprima nel browser le modifiche apportate al menu a comparsa.

11

Ottimizzazione del documento


Il documento a questo punto quasi pronto per la pubblicazione sul Web. Lunica operazione che resta prima di esportarlo lottimizzazione per il Web. Prima di esportare un documento da Fireworks, si raccomanda di eseguire la procedura di ottimizzazione. Lottimizzazione assicura lesportazione dellimmagine 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.

62

Capitolo 2

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. Limmagine 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 dellottimizzazione e di confrontarli alloriginale. 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 lattenzione sullarea da ottimizzare.
3

Fare clic sulla porzione per limmagine Vintage nellanteprima a destra. La sovrapposizione della porzione scompare e rende visibile limmagine. In fondo allanteprima 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 dellimmagine se questa non completamente visibile.

Nascondere temporaneamente le porzioni facendo clic sul pulsante Nascondi porzioni e punti attivi nella sezione Web del pannello Strumenti. Ci consente di confrontare lanteprima alloriginale e di osservare le differenze tra le due immagini. Lanteprima a destra mostra delle strisce nella sfumatura.

Riattivare le porzioni e fare clic sullimmagine Vintage con lo strumento Puntatore.

Esercitazione di progettazione grafica Web

63

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 limmagine risulta meno dettagliata.

Per migliorare laspetto della bitmap, trascinare sul valore 77 il cursore Qualit nel pannello Ottimizza e impostare lopzione 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 limmagine viene ottimizzata come GIF.

Fare clic sulla scheda Originale per ritornare alla vista normale.

64

Capitolo 2

Esportazione HTML
HTML, 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 allesportazione diventano celle di una tabella HTML. Lesercitazione prevede ora lesportazione 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 leccezione delle opzioni nella scheda Specifico del documento.

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 nelleditor HTML selezionato. Se non si usa un editor HTML particolare oppure se leditor che si usa non compreso nellelenco, scegliere HTML generico.

Scegliere .htm come estensione file.

Esercitazione di progettazione grafica Web

65

Fare clic sulla scheda Tabella. La scheda Tabella consente di modificare le propriet della tabella HTML.

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 dellesercitazione non occorre conoscere il meccanismo degli spaziatori, ma utile essere a conoscenza di questa opzione, per un eventuale uso futuro.

Fare clic sulla scheda Specifico del documento.

66

Capitolo 2

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.

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 lesportazione.
1

Scegliere File > Esporta. Si apre la finestra di dialogo Esporta.

2 3

Nella finestra di dialogo Importa, portarsi nella cartella Tutorial2/Export. 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 lURL presenta una ubicazione e non il nome di una pagina. Inoltre durante lesercitazione 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.

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

Esercitazione di progettazione grafica Web

67

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.
6

Fare clic su Salva. I file sono stati esportati alla collocazione specificata. Scegliere File > Salva per salvare il file PNG.

Test del file completato


Dopo aver concluso le operazioni di esportazione il file pronto per essere testato. Visualizzazione dellelenco dei file esportati Per prima cosa si esamini lelenco 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.

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 limmagine bitmap ottimizzata precedentemente. Il file spacer.gif il risultato dellopzione spaziatura selezionata nella finestra di dialogo Imposta HTML e verr usato per il layout di pagina.

68

Capitolo 2

Visualizzazione del file Fireworks HTML nel browser Dopo aver esaminato i file esportati, possibile testare la pagina Web nel browser.
1 2 3 4

Dalla cartella Export, trascinare il file index.htm in un browser Web aperto. Nel browser, fare clic sui pulsanti aggiunti per testare i collegamenti, quindi ritornare al file index.htm. Testare anche le altre funzioni aggiunte. 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.

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 luso.

Esercitazione di progettazione grafica Web

69

Argomenti successivi
A 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 allindice 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 lacclamato sito Centro di supporto di Macromedia allindirizzo http://www.macromedia.com/it/support.

70

Capitolo 2

CAPITOLO 3 Informazioni di base su Fireworks

Macromedia Fireworks unapplicazione 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 allinterno di un solo file. Lavvento di Fireworks ha liberato i progettisti Web dalla necessit di usare applicazioni diverse per ogni operazione, con frequenti passaggi da una allaltra. 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 lapertura, limportazione e il salvataggio dei file, lo spostamento agevole nellambiente Fireworks e lesecuzione di operazioni con un file. Una volta creato un nuovo file o aperto un file esistente, lambiente 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 bitmap


I 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, limmagine 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 dellarea 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 dellaspetto.

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, limmagine 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 limmagine. 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 limmagine sono fissati in base a una griglia di una dimensione specifica. Ingrandendo un elemento grafico bitmap, i bordi dellimmagine risultano frastagliati in quanto i pixel vengono ridistribuiti allinterno della griglia. Visualizzando un elemento grafico bitmap su un dispositivo di output con una risoluzione inferiore a quella dellimmagine, anche la qualit dellimmagine stessa ne risulta degradata.

Informazioni sulle operazioni in Fireworks


Fireworks unapplicazione versatile per la creazione, la modifica e lottimizzazione 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 unaltra applicazione come Photoshop o Macromedia Flash, se si desidera continuare a lavorare nellaltra 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 loggetto 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 nelleditor 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 unimmagine grafica, possibile regolarne il colore e la tonalit, oltre che ritagliarla, ritoccarla e mascherarla.

72

Capitolo 3

Elementi grafici interattivi Le porzioni e i punti attivi sono oggetti per il Web che specificano aree interattive in unimmagine grafica per il Web. Le porzioni tagliano unimmagine in varie sezioni e permettono di applicare comportamenti rollover, animazioni e collegamenti URL (Uniform Resource Locator) a parti dellimmagine 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 nellarea di lavoro. LEditor di pulsanti e lEditor di menu a comparsa sono pratiche funzioni di Fireworks che consentono di creare speciali elementi grafici interattivi per navigare nei siti Web. Informazioni sullottimizzazione e lesportazione di elementi grafici Fireworks dotato di potenti funzioni di ottimizzazione che consentono di trovare lequilibrio 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 unimmagine 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 nellesportarli 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 documento


Scegliendo 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 3 4

Immettere i valori di altezza e larghezza dellarea di lavoro in pixel, pollici, o centimetri. Immettere il valore per la risoluzione in pixel per pollice o pixel per centimetro. Selezionare il colore bianco, trasparente o personalizzato per larea di lavoro.
Nota: Avvalersi del menu a comparsa vaschetta dei colori Personalizza per scegliere un colore personalizzato per larea di lavoro.

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 loggetto 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 delloggetto contenuto negli Appunti.

3 4

Impostare la risoluzione e il colore dellarea di lavoro, quindi fare clic su OK. Scegliere Modifica > Incolla per incollare nel nuovo documento loggetto contenuto negli Appunti.

74

Capitolo 3

Apertura e importazione dei file


Fireworks 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 sullimportazione 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. 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 2

Scegliere File > Apri recente. 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. Allapertura 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 dellanimazione come una sola unit e utilizzare il pannello Libreria per creare nuove istanze del simbolo.
Nota: Quando si importa un GIF animato, limpostazione di ritardo fotogramma assume il valore di default di 7 centesimi di secondo. Se necessario, utilizzare il pannello Fotogrammi per ripristinare limpostazione di tempo originale.

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

Informazioni di base su Fireworks

75

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 dellimmagine e le unit di visualizzazione delle proporzioni dellimmagine. possibile scegliere tra pixel, percentuali, pollici e centimetri. Risoluzione indica

i pixel per pollice che si desidera impostare per la risoluzione. il file con proporzioni di dimensioni uguali a quelle originali. i bordi scalettati nel file EPS aperto.

Vincola proporzioni apre Antialiasing smussa

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.

76

Capitolo 3

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 2

Scegliere File > Ricostituisci tabella. 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 2

Scegliere File > Apri. 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 2 3

Scegliere File > Importa. Selezionare il file HTML dal quale si desidera effettuare limportazione e fare clic su Apri. 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.

Informazioni di base su Fireworks

77

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:

Dallaltra applicazione, trascinare e rilasciare loggetto o il testo in Fireworks. Incollaggio in Fireworks Incollando in Fireworks un oggetto copiato proveniente da unaltra applicazione, loggetto viene collocato al centro del documento attivo. possibile copiare e incollare dagli Appunti un oggetto o un testo nei formati seguenti:


1 2

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:

Nellaltra applicazione, copiare loggetto o il testo che si desidera incollare. In Fireworks, incollare loggetto o il testo nel proprio documento.

Collocazione degli oggetti incollati Quando si incolla un oggetto in Fireworks, la collocazione delloggetto incollato dipende dalla selezione attiva:

78

Capitolo 3

Se selezionato almeno un oggetto su un solo livello, loggetto incollato viene collocato davanti
alloggetto 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,
loggetto incollato viene collocato davanti alloggetto superiore o impilato direttamente sopra di esso sullo stesso livello.

Se sono selezionati due o pi oggetti su pi di un livello, loggetto incollato viene collocato


davanti alloggetto superiore o impilato direttamente sopra di esso sul livello pi alto.

Se selezionato il livello Web o un oggetto sul livello Web, loggetto 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 dallimmagine ridimensionata in modo da farla corrispondere il pi possibile allaspetto dellimmagine 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 2

Copiare la bitmap negli appunti in Fireworks o in un altro programma. Scegliere Modifica > Incolla in Fireworks. Se la risoluzione dellimmagine 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.

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 dellimmagine 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 2 3 4

Nel pannello Livelli, selezionare il livello in cui si desidera importare il file. Scegliere File > Importa per aprire la finestra di dialogo Importa. Individuare il file da importare e fare clic su Apri. Nellarea di lavoro, posizionare il cursore di importazione nel punto in cui si desidera collocare langolo superiore sinistro dellimmagine.

Informazioni di base su Fireworks

79

Importare il file:

Fare clic per importare limmagine completa. Trascinare il cursore di importazione per ridimensionare limmagine mentre viene importata.
Fireworks manterr le proporzioni dellimmagine. Importazione da uno scanner o fotocamera digitale Per permettere limportazione 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 allinterno 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 3 4 5

Fare clic sulla scheda Cartelle. Scegliere Plug-in Photoshop. 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. Portarsi sulla cartella contenente i plug-in di Photoshop.

Per importare unimmagine da uno scanner o da una fotocamera digitale, procedere come segue: 1 2 3

Collegare lo scanner o la fotocamera al computer. Installare il software che accompagna lo scanner o la fotocamera, se tale operazione non gi stata eseguita. In Fireworks, scegliere File > Scansione e selezionare un modulo TWAIN o il plug-in Photoshop Acquire corrispondente al dispositivo scelto per limportazione dellimmagine.
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.

Seguire le istruzioni indicate per procedere alle impostazioni dei parametri desiderati. Limmagine importata viene aperta sotto forma di un nuovo documento di Fireworks.

80

Capitolo 3

Salvataggio dei file di Fireworks


Quando 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. Luso 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. Ricercare la collocazione desiderata e inserire il nome del file. Non occorre immettere unestensione, in quanto Fireworks la propone automaticamente. Fare clic su Salva.

Per salvare un documento di Fireworks esistente:

Scegliere File > Salva.


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

Scegliere un formato di file nel pannello Ottimizza. Scegliere File > Esporta per esportare il documento. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks).

Informazioni di base su Fireworks

81

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 loggetto correntemente selezionato man mano che si lavora allinterno del documento. I pannelli sono inizialmente agganciati in gruppi sul lato sinistro dello schermo. La finestra del documento appare al centro dellapplicazione.

82

Capitolo 3

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: lapplicazione 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.

Informazioni di base su Fireworks

83

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 nellangolo 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 sullicona 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.

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.

84

Capitolo 3

Per sganciare la finestra di ispezione Propriet:

Trascinare il dispositivo di aggancio situato nellangolo 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 dellespansore nellangolo inferiore destro della finestra di ispezione Propriet. Fare clic sullicona 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 dellespansore nellangolo 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 sullicona dellespansore 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, leliminazione 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 allaltro dellarea di lavoro.

Informazioni di base su Fireworks

85

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 lelaborazione 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 nellarea di aggancio sul lato destro dello spazio di lavoro. possibile sganciare i gruppi di pannelli, aggiungere pannelli a un gruppo, sganciare singoli pannelli, riorganizzare lordine 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 nellangolo superiore sinistro, allontanandolo dallarea 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 sullarea di aggancio del pannello. Mentre si trascina un pannello o un gruppo di pannelli sullarea 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 dellespansore nellangolo superiore sinistro del gruppo di pannelli o del
pannello.

86

Capitolo 3

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 sullarea sottostante il nome del gruppo di pannelli.
Per rinominare un gruppo di pannelli: 1 2

Fare clic sullicona nella parte superiore destra del gruppo di pannelli e scegliere Rinomina gruppo pannelli nel menu Opzioni. 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. Scegliere Comandi > Impostazioni layout pannelli > 1024 x 768. Scegliere Comandi > Impostazioni layout pannelli > 1280 x 1024.
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 unopzione utilizzando un menu a comparsa: 1 2

Fare clic sullopzione. Modificare il valore:

Scegliere unopzione o un campione colore. Trascinare il dispositivo di scorrimento o di selezione. Digitare la prima lettera dellopzione che si desidera scegliere e premerla ripetutamente per
scorrere tutte le opzioni che iniziano con la lettera digitata (solo per Windows).

Informazioni di base su Fireworks

87

Per inserire informazioni in una casella di testo di un pannello: 1 2 3

Fare clic nella casella di testo. Digitare un valore. 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 unopzione dal menu Opzioni di un pannello o gruppo di pannelli: 1 2

Fare clic sullicona del menu Opzioni nellangolo superiore destro del pannello o del gruppo di pannelli per aprire il menu. 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 2

Scegliere Comandi > Salva layout pannelli. 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.

88

Capitolo 3

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 nellangolo superiore destro della barra del titolo per chiuderla.

Per agganciare una barra degli strumenti:

Trascinare la barra degli strumenti su unarea di aggancio nella parte superiore, inferiore, sinistra o destra della finestra dellapplicazione finch non compare il rettangolo di anteprima del posizionamento. Spostamento allinterno 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, lintera area di lavoro non risultasse pi visibile nella sua interezza.

Informazioni di base su Fireworks

89

Zoom e panoramica Fireworks consente di ingrandire o ridurre un documento a una percentuale di ingrandimento predefinita o stabilita dallutente.

Strumento Zoom Strumento Mano

Menu a comparsa Zoom

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

Scegliere lo strumento Zoom e fare clic allinterno della finestra del documento per definire il
nuovo punto centrale. Ad ogni clic limmagine viene ingrandita alla percentuale preimpostata successiva.

Scegliere unimpostazione di zoom nel menu a comparsa Imposta lingrandimento 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 allinterno della finestra del documento tenendo
premuto il tasto Alt (Windows) o Opzione (Macintosh). Ad ogni clic la vista viene ridotta alla percentuale preimpostata successiva.

90

Capitolo 3

Scegliere unimpostazione di zoom nel menu a comparsa Imposta lingrandimento situato nella
parte inferiore della finestra del documento.

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


Per ingrandire unarea specifica senza essere vincolati a incrementi di ingrandimento preimpostati: 1 2

Scegliere lo strumento Zoom. Trascinare il mouse sulla parte dellimmagine che si desidera ingrandire. La dimensione della casella di selezione dello zoom definisce la percentuale di ingrandimento precisa, visualizzata nella casella di testo Imposta lingrandimento.
Nota: Non possibile immettere una percentuale di ingrandimento nella casella di testo Imposta lingrandimento.

Per effettuare una riduzione basata su unarea specifica:

Tenere premuto il tasto ALT (Windows) o OPZIONE (Macintosh) e trascinare unarea 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 allinterno del documento: 1 2

Scegliere lo strumento Mano. Trascinare il puntatore Mano. Mentre si esegue la panoramica oltre larea di lavoro, la vista continua ad eseguire la panoramica consentendo di continuare a lavorare con i pixel sul bordo dellarea 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 nellarea 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.

Informazioni di base su Fireworks

91

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 2

Scegliere Finestra > Nuova finestra. Scegliere unimpostazione 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 delloutput.
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 unampiezza 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.

92

Capitolo 3

In ambiente Macintosh, scegliere Visualizza > Gamma Windows.


Fireworks visualizza in anteprima il modo in cui il documento apparirebbe sulla piattaforma dellaltro 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 2

Scegliere Modifica > Preferenze. 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 sullicona corrispondente del pannello.


Nota: Lo sfondo dellicona 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 dellapplicazione 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 sulloggetto o sulloperazione selezionati vengono visualizzate nella barra di stato.

Informazioni di base su Fireworks

93

Modifica dellarea di lavoro


Quando 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 dellarea di lavoro nonch la risoluzione dellimmagine. Mentre si lavora sul documento, inoltre possibile ruotare larea di lavoro e tagliare parti non desiderate di esso. Modifica delle dimensioni, del colore e della risoluzione dellarea di lavoro Fireworks semplifica la modifica delle dimensioni e del colore dellarea di lavoro, nonch della risoluzione dellimmagine.
Per modificare le dimensioni dellarea di lavoro: 1

Eseguire una delle seguenti procedure:

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 3

Immettere le nuove dimensioni nelle caselle di testo Larghezza e Altezza. Fare clic su un pulsante Aggancio per specificare quali lati dellarea di lavoro di Fireworks aggiungere o eliminare, quindi fare clic su OK.
Nota: Per impostazione predefinita, laggancio centrale selezionato, indicando che le modifiche alle dimensioni dellarea di lavoro vengono effettuate su tutti i lati.

Per modificare il colore dellarea di lavoro dal menu Elabora: 1 2

Scegliere Elabora > Area di lavoro > Colore area di lavoro. 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 dellarea 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. 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 unarea di lavoro trasparente, fare clic sul pulsante Nessuno nella finestra a comparsa dei campioni colore.

Per ridimensionare un documento e il relativo contenuto: 1

Eseguire una delle seguenti procedure: propriet del documento nella finestra di ispezione Propriet, quindi fare clic sul pulsante Dimensioni immagine nella finestra di ispezione Propriet.

Scegliere Seleziona > Deseleziona, fare clic sullo strumento Puntatore per visualizzare le

94

Capitolo 3

Scegliere Elabora > Area di lavoro > Dimensioni immagine.


Si aprir la finestra di dialogo Dimensioni immagine.

Nelle caselle di testo Dimensioni in pixel, immettere le nuove dimensioni orizzontale e verticale per limmagine. possibile modificare le unit di misura. Se lopzione Ridefinisci immagine non selezionata, potranno essere modificati solo la risoluzione o le dimensioni di stampa, ma non le dimensioni in pixel.

3 4

Immettere i valori nelle caselle di testo Dimensioni di stampa per impostare le nuove dimensioni orizzontali e verticali dellimmagine stampata. Immettere i nuovi valori per la risoluzione dellimmagine nella casella di testo Risoluzione. possibile scegliere lunit pixel/pollice o pixel/cm, oppure selezionare Ridefinisci immagine. Modificando la risoluzione cambiano anche le dimensioni in pixel.

Eseguire una delle seguenti procedure: selezionare Vincola proporzioni.

Per mantenere lo stesso rapporto tra le dimensioni orizzontale e verticale del documento, Deselezionare invece Vincola proporzioni per ridimensionare larghezza e altezza in modo
indipendente.
6 7

Selezionare Ridefinisci immagine per aggiungere o eliminare pixel durante il ridimensionamento dellimmagine e approssimare cos lo stesso aspetto anche con dimensioni diverse. Fare clic su OK.

Informazioni di base su Fireworks

95

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 limmagine.

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 dellimmagine, le guide, gli oggetti punto attivo e gli oggetti porzione vengono anchessi ridimensionati.

Il ridimensionamento delle immagini bitmap presenta sempre il problema se aggiungere o rimuovere pixel per ridimensionare limmagine o piuttosto modificare il numero dei pixel per pollice o centimetro. possibile modificare le dimensioni di unimmagine bitmap regolando la risoluzione o ridefinendo limmagine. Regolando la risoluzione, si modificano le dimensioni dei pixel nellimmagine, 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 laggiunta di pixel allimmagine per ingrandirla, pu

a sua volta produrre una perdita di qualit perch i pixel aggiunti non sempre corrispondono allimmagine originale.
La ridefinizione con riduzione,

vale a dire leliminazione di pixel per ridurre limmagine, produce sempre una perdita di qualit, in quanto per ridimensionare limmagine vengono scartati dei pixel. La perdita di dati nellimmagine un altro effetto collaterale della ridefinizione con riduzione.

Rotazione dellarea di lavoro La rotazione dellarea di lavoro particolarmente utile quando limmagine importata risulta capovolta o posizionata lateralmente. Larea di lavoro pu essere ruotata di 180 gradi oppure di 90 gradi in senso orario e antiorario. Durante la rotazione dellarea di lavoro, vengono ruotati anche tutti gli oggetti presenti nel documento.
Per ruotare larea 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.

96

Capitolo 3

Ritaglio dellarea di lavoro Se il documento contiene spazio vuoto in eccesso intorno al contenuto dellarea di lavoro, possibile ritagliare larea di lavoro. inoltre possibile rimuovere lo spazio vuoto dellarea 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 larea di lavoro:

Scegliere Elabora > Area di lavoro > Taglia area di lavoro. Le porzioni dellarea di lavoro che si estendono oltre i pixel pi esterni del documento vengono eliminate automaticamente. Ogni bordo dellarea di lavoro ritagliato in base ai bordi delloggetto 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 dellarea di lavoro possibile modificare larea di lavoro espandendola per adattarla agli oggetti che si estendono oltre i suoi margini.
Per adattare larea 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. Larea di lavoro si ridimensiona per adattarsi allarea definita dallutente. Per impostazione predefinita, il ritaglio consente di eliminare gli oggetti che si estendono oltre i margini dellarea di lavoro. Per conservare gli oggetti allesterno dellarea di lavoro, occorre modificare una preferenza prima del ritaglio.

Informazioni di base su Fireworks

97

Per ritagliare un documento: 1 2 3

Scegliere lo strumento Ritaglio nel pannello Strumenti oppure selezionare Modifica > Ritaglia documento. Trascinare una casella di delimitazione nellarea di lavoro. Regolare le maniglie di ritaglio fino a quando la casella di delimitazione non circonda larea del documento da conservare. Fare doppio clic allinterno della casella di delimitazione o premere Invio per ritagliare il documento. Larea di lavoro si ridimensiona in base allarea definita e gli oggetti oltre i bordi dellarea di lavoro vengono cancellati.
Suggerimento: possibile conservare gli oggetti esterni allarea 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.

98

Capitolo 3

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, lunit di misura dei righelli in Fireworks sempre il pixel, indipendentemente dallunit di misura utilizzata per creare il documento.
Per visualizzare e nascondere i righelli:

Scegliere Visualizza > Righelli.

Informazioni di base su Fireworks

99

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 allarea di lavoro del documento. Esse sono ausili di disegno che agevolano il posizionamento e lallineamento 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 lallineamento 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 2

Fare clic e trascinare il mouse dal righello corrispondente. Posizionare la guida sullarea 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.

100 Capitolo 3

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 2

Scegliere Visualizza > Guide > Modifica guide. Selezionare il nuovo colore della guida dallapposita 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 allesterno dellarea di lavoro. Uso della griglia La griglia di Fireworks consente di visualizzare un sistema di linee orizzontali e verticali sullarea 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 2

Scegliere Visualizza > Griglia > Modifica griglia. Selezionare il nuovo colore della griglia dallapposita finestra a comparsa e fare clic su OK.

Per modificare le dimensioni delle celle della griglia: 1 2

Scegliere Visualizza > Griglia > Modifica griglia. 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.

Informazioni di base su Fireworks 101

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 questultimo 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 2

Scegliere Finestra > Cronologia per aprire il pannello Cronologia. Trascinare il marcatore Annulla in alto o in basso.

Per ripetere le azioni: 1 2

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

Fare clic su unazione 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 2 3

Evidenziare le azioni da salvare nel pannello Cronologia. Fare clic sul pulsante Salva nella parte inferiore del pannello. 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.

102 Capitolo 3

CAPITOLO 4 Uso di Fireworks con altre applicazioni

Macromedia Fireworks MX un componente essenziale per lo sviluppo di contenuto destinato al Web o multimediale. Lampia gamma di funzionalit di integrazione di Fireworks permette di snellire la procedura di progettazione e di ottimizzarne lutilizzo 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 dallinterno di numerose
applicazioni Macromedia, quali Dreamweaver, Flash, HomeSite, FreeHand e Director.

I comportamenti di Fireworks sono preservati allesportazione verso numerose applicazioni


Macromedia, permettendo lesportazione 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 unapplicazione e fare in modo che quelle modifiche si riflettano perfettamente nellaltra. 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. Lapplicazione 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 MX


Le 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, lottimizzazione e la collocazione dei file grafici per il Web nelle pagine HTML. Se si desidera elaborare le immagini e le tabelle di Fireworks allinterno 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 dellimmagine 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 unimmagine 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 sullesportazione di immagini GIF e JPEG, consultare la guida di Fireworks (Guida > Uso di Fireworks).
Per inserire unimmagine di Fireworks in un documento di Dreamweaver: 1 2

Posizionare il punto di inserimento dove si intende far comparire limmagine nella finestra del documento di Dreamweaver. Eseguire una delle seguenti procedure:

Scegliere Inserisci > Immagine. Fare clic sul pulsante Inserisci immagine nella categoria Comune del pannello Oggetti.
3

Passare allimmagine 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 lillustrazione finale. I segnaposto immagine permettono di specificare le dimensioni e la posizione di future immagini Fireworks da collocare in Dreamweaver. Quando si crea unimmagine Fireworks da un segnaposto immagine Dreamweaver, viene creato un nuovo documento Fireworks con unarea di lavoro delle stesse dimensioni del segnaposto selezionato. Allinterno di Fireworks, possibile usare ogni strumento Fireworks per creare lelemento grafico. I documenti possono essere suddivisi in porzioni e resi interattivi con laggiunta di pulsanti, rollover e altri comportamenti.
Nota: Tutti i comportamenti applicati allinterno di Fireworks sono conservati al ritorno a Dreamweaver. Allo stesso modo, la maggior parte dei comportamenti di Dreamweaver applicati a segnaposto immagine sono anchessi 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.

104 Capitolo 4

Per creare unimmagine di Fireworks da un segnaposto immagine di Dreamweaver: 1 2

In Dreamweaver, salvare il documento HTML desiderato in una posizione allinterno della cartella sito di Dreamweaver. Posizionare il punto di inserimento nella posizione desiderata del documento e scegliere Inserisci > Segnaposto immagine. Nel documento Dreamweaver viene inserita unimmagine segnaposto.

Eseguire una delle seguenti procedure:

Selezionare limmagine segnaposto e fare clic su Crea nella finestra di ispezione Propriet. Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic
sullimmagine 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 questultimo non sia gi aperto. La finestra del documento indica che si sta modificando unimmagine da Dreamweaver.

4 5

Creare unimmagine in Fireworks, quindi fare clic su Completato una volta ultimata. 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 dellimmagine 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 7

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. Specificare una posizione per il file o i file immagine esportati. La posizione scelta dovrebbe essere allinterno della cartella del sito di Dreamweaver. Per ulteriori informazioni sullesportazione, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Uso di Fireworks con altre applicazioni 105

Fare clic su Salva. Quando si ritorna a Dreamweaver, limmagine segnaposto originariamente selezionata viene sostituita con la nuova immagine o tabella di Fireworks creata dallutente.

Collocazione del codice HTML di Fireworks in Dreamweaver Esistono diversi metodi per collocare il codice HTML di Fireworks in Dreamweaver. LHTML 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 lHTML di Fireworks per luso 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 dellHTML di Fireworks a Dreamweaver Lesportazione 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 2 3

In Dreamweaver, salvare il documento in un sito definito. Inserire nel documento il punto iniziale del codice HTML. Eseguire una delle seguenti procedure:

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.

106 Capitolo 4

Scegliere Cancella il file dopo linserimento per spostare il file HTML nel Cestino (Windows e Macintosh) al termine delloperazione. Avvalersi di questa opzione qualora il file HTML di Fireworks non sia pi necessario dopo linserimento. Questa opzione non ha effetto sul file PNG sorgente associato al file HTML.
Nota: Se il file HTML si trova su ununit di rete, questo verr eliminato in modo permanente e non semplicemente spostato nel Cestino.

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 dellHTML di Fireworks negli Appunti per luso in Dreamweaver Un sistema alternativo per collocare in Dreamweaver il codice HTML di Fireworks consiste nel copiarlo negli Appunti da Fireworks e quindi nellincollarlo 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 dallutente e Dreamweaver aggiorna lHTML con collegamenti a queste immagini correlati al sito.
Nota: Prima di copiare lHTML 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 dellHTML 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 lesportazione 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 dellHTML 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 unimmagine PNG sorgente in Fireworks, poi aggiornare automaticamente tutto il codice HTML esportato e i file delle immagini collocati allinterno 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 lHTML 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).

Uso di Fireworks con altre applicazioni 107

Per aggiornare il codice HTML di Fireworks collocato in Dreamweaver: 1 2 3 4

Apportare modifiche al documento PNG desiderato in Fireworks. Scegliere File > Aggiorna HTML, o fare clic sul pulsante Esportazione rapida e scegliere Aggiorna HTML dal menu a comparsa Dreamweaver. Portarsi nel file di Dreamweaver contenente il codice HTML da aggiornare, quindi fare clic su Apri. 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 allinizio del documento, mentre la tabella HTML o il collegamento allimmagine 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 lelemento libreria principale. Successivamente, Dreamweaver pu aggiornare ogni copia di quellelemento presente nellintero 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: 1

Scegliere File > Esporta.

108 Capitolo 4

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 4 5 6

Nella finestra di dialogo Esporta, digitare un nome per il file. Se limmagine contiene delle porzioni, scegliere le opzioni relative. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). Selezionare Inserisci immagine nella sottocartella per scegliere una cartella separata per il salvataggio delle immagini. Fare clic su Salva.

Modifica dei file di Fireworks da Dreamweaver Roundtrip HTML una potente funzionalit che ottimizza lintegrazione tra Fireworks e Dreamweaver. Questa caratteristica permette di apportare modifiche in unapplicazione e fare in modo che queste variazioni si riflettano senza soluzione di continuit anche nellaltra. 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 limmagine o la tabella collocata e permette di apportare le modifiche desiderate allinterno di Fireworks. Gli aggiornamenti effettuati in Fireworks vengono applicati allimmagine 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.

Uso di Fireworks con altre applicazioni 109

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, lapplicazione di variazioni di rilievo alla struttura di una tabella allinterno 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, lutente 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 allinterno di Fireworks. Modifica delle immagini di Fireworks possibile lanciare Fireworks per modificare le singole immagini collocate allinterno 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 unimmagine di Fireworks collocata in Dreamweaver: 1 2

In Dreamweaver, scegliere Finestra > Propriet per aprire la finestra di ispezione Propriet, se necessario. Eseguire una delle seguenti procedure: come immagine di Fireworks e visualizza il nome del file PNG sorgente noto per limmagine). Quindi fare clic su Modifica nella finestra di ispezione Propriet.

Selezionare limmagine desiderata. (La finestra di ispezione Propriet identifica la selezione Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic
sullimmagine da modificare.

Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO
(Macintosh) sullimmagine desiderata e scegliere Modifica con Fireworks dal menu di collegamento. Dreamweaver lancer Fireworks, qualora questultimo non sia gi aperto.
3

Se richiesto, specificare se individuare un file sorgente di Fireworks per limmagine collocata. Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare Salvataggio dei file di Fireworks a pagina 81. Modificare limmagine in Fireworks. La finestra del documento indica che si sta modificando unimmagine da Dreamweaver. Dreamweaver riconosce e mantiene tutte le modifiche applicate a unimmagine in Fireworks. Al termine delle modifiche, fare clic su Fine nella finestra del documento. Limmagine 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.

110 Capitolo 4

Nota: Quando si apre unimmagine 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 dallinterno 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 2

In Dreamweaver, scegliere Finestra > Propriet per aprire la finestra di ispezione Propriet, se necessario. Eseguire una delle seguenti procedure: la tabella. (La finestra di ispezione Propriet identifica la selezione come immagine di Fireworks e visualizza il nome del file PNG sorgente noto per limmagine). Quindi fare clic su Modifica nella finestra di ispezione Propriet

Fare clic allinterno della tabella, fare clic sul tag TABLE nella barra di stato per selezionare tutta

Fare clic sullangolo superiore sinistro della tabella per selezionarla, quindi fare clic su Modifica
nella finestra di ispezione Propriet.

Selezionare unimmagine 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
sullimmagine da modificare.

Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO
(Macintosh) sullimmagine, quindi scegliere Modifica con Fireworks dal menu di collegamento. Dreamweaver lancer Fireworks, qualora questultimo non sia gi aperto. Nella finestra del documento comparir il file PNG sorgente per lintera tabella.
Nota: Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare Salvataggio dei file di Fireworks a pagina 81.

In Fireworks, apportare le modifiche desiderate. Dreamweaver riconosce e mantiene tutte le modifiche applicate a unimmagine in Fireworks. Al termine delle modifiche, fare clic su Fine nella finestra del documento. 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.

Uso di Fireworks con altre applicazioni

111

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 allelemento 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:;. Leliminazione 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 dellimmagine 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 larea dellimmagine esportata.
Per modificare le impostazioni di ottimizzazione per unimmagine di Fireworks collocata in Dreamweaver: 1

In Dreamweaver, selezionare limmagine desiderata e scegliere Comandi > Ottimizza immagine in Fireworks.

112

Capitolo 4

Qualora richiesto, specificare se lanciare un file sorgente di Fireworks per limmagine 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.

Apportare le modifiche desiderate nella finestra di dialogo Anteprima esportazione: informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks).

Per modificare le impostazioni di ottimizzazione, fare clic sulla scheda Opzioni. Per ulteriori Per modificare le dimensioni e larea dellimmagine esportate, fare clic sulla scheda File e
modificare le impostazioni desiderate. Se si modificano le dimensioni dellimmagine in Fireworks, necessario reimpostare le dimensioni dellimmagine nella finestra di ispezione Propriet quando si riapre il file in Dreamweaver.

Per modificare le impostazioni dellanimazione per limmagine, fare clic sulla scheda Animazione e
variare i parametri definiti.
4

Al termine delle modifiche sullimmagine, fare clic su Aggiorna. Limmagine viene esportata utilizzando le nuove impostazioni di ottimizzazione. Di conseguenza, viene aggiornata limmagine GIF o JPEG posizionata in Dreamweaver e viene salvato leventuale file sorgente PNG. Se stato modificato il formato dellimmagine, la funzione Controllo collegamenti di Dreamweaver richieder di aggiornare i riferimenti allimmagine. Ad esempio, se si modificato il formato di unimmagine 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.

Uso di Fireworks con altre applicazioni 113

Ridimensionamento delle immagini di Fireworks Quando si lancia e modifica da Dreamweaver unimmagine creata con Fireworks, possibile ridimensionare limmagine e selezionare unarea specifica da esportare.
Nota: Se si modificano le dimensioni dellimmagine in Fireworks, inoltre necessario reimpostare le dimensioni dellimmagine nella finestra di ispezione Propriet quando si ritorna a Dreamweaver.

Per specificare le dimensioni dellimmagine esportata: 1 2

In Fireworks, nella finestra di dialogo Anteprima esportazione, fare clic sulla scheda File. Per scalare limmagine durante lesportazione, specificare un valore percentuale oppure immettere i parametri della larghezza e delle altezza desiderate in pixel. Selezionare Vincola per scalare la larghezza e laltezza in modo proporzionale.

Per esportare unarea selezionata dellimmagine, selezionare lopzione Area di esportazione ed eseguire una delle operazioni seguenti per specificare larea da esportare: esportazione desiderata. (Trascinare allinterno dellanteprima per far rientrare le aree nascoste nel campo visibile).

Trascinare il bordo punteggiato che compare attorno allanteprima fino a racchiudere larea di Immettere le coordinate in pixel dei confini dellarea di esportazione.

Modifica delle impostazioni dellanimazione In caso di lancio e ottimizzazione di unanimazione 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 allinterno di unanimazione di Fireworks durante una sessione di ottimizzazione lanciata da Dreamweaver. Per modificare gli elementi grafici di unanimazione, necessario lanciare e modificare lanimazione di Fireworks. Per ulteriori informazioni, consultare Modifica dei file di Fireworks da Dreamweaver a pagina 109.

Per modificare unimmagine animata: 1

In Fireworks, nella finestra di dialogo Anteprima esportazione, fare clic sulla scheda Animazione.

114

Capitolo 4

Avvalersi delle tecniche seguenti per visualizzare in anteprima i fotogrammi dellanimazione in qualsiasi momento: sinistra della finestra di dialogo, oppure utilizzare i comandi del fotogramma posti nellarea inferiore destra della finestra di dialogo.

Per visualizzare un fotogramma singolo, selezionare il fotogramma desiderato dallelenco sulla Per riprodurre lanimazione, fare clic sul comando Esegui/Termina nellarea inferiore destra
della finestra di dialogo.
3

Per apportare le modifiche allanimazione: scegliere unopzione dal menu a comparsa (indicato da unicona che raffigura un cestino).

Per specificare il metodo di eliminazione, selezionare il fotogramma desiderato dallelenco e Per impostare il ritardo, selezionare il fotogramma desiderato dallelenco e immettere il valore
del ritardo in centesimi di secondo.

Per impostare la riproduzione ripetuta dellanimazione, fare clic sul pulsante Ripetizione
continua e scegliere il numero di ripetizioni desiderato dal menu a comparsa.

Scegliere lopzione Ritaglio automatico per ritagliare ogni fotogramma conferendogli unarea
rettangolare, in modo che lunica area dellimmagine che differisce tra i fotogrammi sia loutput. Selezionando questa opzione possibile ridurre le dimensioni del file.

Scegliere lopzione Differenza automatica per produrre loutput 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 allinterno di Dreamweaver.

Uso di Fireworks con altre applicazioni 115

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 allinterno 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 2 3

In Dreamweaver, scegliere Modifica > Preferenze e quindi scegliere Tipi di file/Editor. Nellelenco Estensioni, selezionare unestensione per il file Web (.gif, .jpg, o .png). Se Fireworks compare nellelenco Editor, selezionarlo. Se Fireworks non si trova nellelenco, fare clic sul pulsante Pi (+), individuare lapplicazione Fireworks sul disco rigido, quindi fare clic su Apri.

4 5

Fare clic su Rendi principale. Ripetere i passaggi da 2 a 4 per impostare Fireworks come editor principale per le altre estensioni dei file immagine Web.

116

Capitolo 4

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 unimmagine creata con Fireworks, Dreamweaver si avvale della nota di progettazione per individuare il PNG sorgente per il file dellimmagine. 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 unaltra applicazione. Dreamweaver riconosce le preferenze di lancio e modifica di Fireworks solo in certi casi. In particolare, necessario lanciare e ottimizzare unimmagine 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.


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

2 3

Fare clic sulla scheda Lancia e modifica (Windows) o scegliere Lancia e modifica dal menu a comparsa (Macintosh). Specificare le opzioni di preferenza da usare per la modifica o lottimizzazione delle immagini di Fireworks collocate in unapplicazione esterna:
Usa sempre PNG sorgente lancia automaticamente il file PNG di Fireworks definito nella nota

di progettazione come sorgente per limmagine collocata. In questo caso verranno aggiornati sia il PNG sorgente che limmagine collocata corrispondente.
Non usare mai PNG sorgente lancia automaticamente limmagine collocata di Fireworks, indipendentemente dalleventuale esistenza di un file PNG sorgente. In questo caso verr aggiornata solo limmagine collocata. Richiedi al lancio permette di specificare ogni volta se lanciare o meno il file PNG sorgente. Quando si modifica o ottimizza unimmagine 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.

Uso di Fireworks con altre applicazioni

117

Operazioni con Macromedia Flash MX


Fireworks 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 dallinterno 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 nellimportazione 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 allimportazione 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 laspetto 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 3

Passare a un documento aperto di Flash. (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). Scegliere File > Importa.

118

Capitolo 4

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.

Scegliere unopzione 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 dellimportazione, 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 laspetto 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 laspetto di tale testo, Flash lo converte in unimmagine bitmap non modificabile. la modificabilit di tutti il testo. Se il testo ha riempimenti, tratti, o effetti speciali non supportati da Flash, queste propriet vanno perdute.

Mantieni modificabile tutto il testo conserva 9

Scegliere lopzione 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.

Uso di Fireworks con altre applicazioni 119

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 2 3

Selezionare loggetto o gli oggetti da copiare. Scegliere Modifica > Copia o fare clic sul pulsante Esportazione rapida e scegliere Copia dal menu a comparsa Macromedia Flash. 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 allinterno 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 sullesportazione di JPEG e GIF, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per ulteriori informazioni sullesportazione nel formato PNG, consultare Esportazione di PNG con trasparenza a pagina 122. Per ulteriori informazioni sullimportazione 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, linterattivit, 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 lesportazione al formato SWF include quanto segue:

Effetti dal vivo Categorie tratto e riempimento, texture e bordi ammorbiditi Antialiasing sugli oggetti (il lettore Flash applica lantialiasing a livello del documento, quindi,
in fase di esportazione lantialiasing viene applicato al documento).

Modalit di opacit e fusione (gli oggetti con opacit diventano provvisti di canale alfa). Livelli Maschere
120 Capitolo 4

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 unanimazione di Fireworks come file SWF: 1 2 3 4

Scegliere File > Esporta o fare clic sul pulsante Esportazione rapida e scegliere Esporta SWF dal menu a comparsa Macromedia Flash. Nella finestra di dialogo Esporta, digitare un nome per il file e scegliere una cartella di destinazione. Scegliere Macromedia Flash SWF dal menu a comparsa Salva con nome. Fare clic sul pulsante Opzioni. Compare la finestra di dialogo Opzioni esportazione in Macromedia Flash SWF.

Nella sezione Oggetti, scegliere una delle opzioni seguenti:


Mantieni tracciati permette Mantieni aspetto permette

di mantenere la modificabilit dei tracciati. Gli effetti e la formattazione andranno perduti. di convertire gli oggetti vettoriali in oggetti bitmap e conservare laspetto dei tratti e dei riempimenti applicati. La modificabilit andr perduta.

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 8 9

Impostare la qualit delle immagini utilizzando il dispositivo di scorrimento a comparsa Qualit JPEG. Selezionare i fotogrammi da esportare e la frequenza fotogrammi in secondi. Fare clic su OK.

Uso di Fireworks con altre applicazioni 121

10

Fare clic su Salva nella finestra di dialogo Esporta.

Per ulteriori informazioni sullimportazione 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 linserimento in Flash.
Per esportare un PNG a 8 bit con trasparenza. 1 2 3 4

In Fireworks, scegliere Finestra > Ottimizza per aprire il pannello Ottimizza qualora non fosse gi aperto. Scegliere PNG 8 come formato di file di esportazione e Trasparenza alfa dal menu a comparsa Trasparenza. Scegliere File > Esporta. Selezionare Solo immagini dal menu a comparsa Salva come tipo. Definire il nome del file, quindi fare clic su Salva.

Per ulteriori informazioni sullimportazione 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 2 3

Creare un nuovo documento in Flash. Scegliere File > Importa e individuare lelemento grafico o il file animazione. Fare clic su Apri per importare il file.

Uso di Fireworks per modificare immagini importate in Flash Grazie allintegrazione 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 questultimo non stato esportato da Fireworks.
Nota: I file PNG nativi di Fireworks importati in Flash sono uneccezione, a meno che si importino i PNG come immagine bitmap appiattita.

Se lelemento 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 dallinterno 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.

122 Capitolo 4

Scegliere Modifica con Fireworks dal menu a comparsa.


Nota: Se Modifica con Fireworks non compare nel menu a comparsa, scegliere Modifica con e individuare lapplicazione Fireworks.

Fare clic su S nella casella Trova sorgente se si desidera individuare il file PNG originale per lelemento 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 allimmagine 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 FreeHand


Dato che entrambe le applicazioni supportano elementi vettoriali, la grafica vettoriale pu essere facilmente condivisa tra Fireworks e Macromedia FreeHand. Tuttavia, laspetto 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 alluso di Fireworks con FreeHand ma anche alluso 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. la risoluzione del file importato.

Larghezza e Altezza specificano la larghezza e laltezza in pixel, pollici o centimetri del file importato. Risoluzione specifica Antialiasing attenua

gli oggetti importati per evitare la formazione di bordi acuti. possibile scegliere questa opzione separatamente per i tracciati o il testo.

Uso di Fireworks con altre applicazioni 123

Nota: Per modificare gli oggetti selezionati in Antialiasing o Bordo rigido, utilizzare Elabora > Modifica tracciato > Riempimento rigido, Riempimento con antialiasing o Riempimento morbido dopo limportazione.

Conversione file specifica

le modalit di gestione dei documenti multipagina allimportazione:

Lopzione Apri una pagina importa solo la pagina specificata. Lopzione Apri pagine come fotogrammi importa tutte le pagine dal documento e le posiziona
ognuna su un fotogramma separato.

Lopzione Ignora livelli importa tutti gli oggetti su un singolo livello. Lopzione Ricorda livelli mantiene la struttura dei livelli del file importato. Lopzione 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. livello di sfondo viene ignorato.

Includi livelli di sfondo importa gli oggetti dal livello di sfondo del documento. In caso contrario, il 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 limportazione.

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 3

Scegliere le opzioni desiderate. Fare clic su OK.

124 Capitolo 4

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 2 3

In FreeHand, scegliere Modifica > Copia. Creare un nuovo documento in Fireworks o aprirne uno esistente. Scegliere Modifica > Incolla.

Per trascinare e rilasciare un elemento grafico di FreeHand in Fireworks:

Trascinare lelemento 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 2 3

In Fireworks, scegliere File > Esporta o fare clic sul pulsante Esportazione rapida e scegliere Esporta in FreeHand dal menu a comparsa FreeHand. Nella finestra di dialogo Esporta, digitare un nome per il file e scegliere una cartella di destinazione. 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 5

Fare clic sul pulsante Opzioni. Nella finestra di dialogo Opzioni esportazione Illustrator, scegliere una delle opzioni seguenti: corrente.

Esporta solo fotogramma corrente conserva i nomi dei livelli ed esporta il solo fotogramma Converti fotogrammi in livelli permette di esportare ciascun fotogramma di Fireworks come
livello.
6

Scegliere Compatibile con FreeHand per esportare il file per luso in FreeHand. La scelta di Compatibile con FreeHand omette le immagini e converte i riempimenti sfumati in riempimenti uniformi.

7 8

Fare clic su OK. Fare clic su Salva nella finestra di dialogo Esporta.
Nota: Allesportazione, i bordi degli oggetti di Fireworks sono impostati come rigidi.

9 10

Passare a un documento aperto di FreeHand. Scegliere File > Apri o File > Importa per passare al file esportato da Fireworks, quindi fare clic su Apri.

Uso di Fireworks con altre applicazioni 125

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: Linserimento 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 2 3

Scegliere Modifica > Copia contorni tracciati o fare clic sul pulsante Esportazione rapida e scegliere Copia contorni tracciati dal menu a comparsa FreeHand. Passare a un documento aperto di FreeHand. 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, laspetto 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 dellarea 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 allesportazione 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 limportazione.

Le dimensioni vengono convertite in oggetti vettoriali.

126 Capitolo 4

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 nellimmagine. 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 linstallazione dellXtra gratuito di importazione da Fireworks per Director, reperibile allindirizzo 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 sullesportazione 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 lesportazione di elementi grafici PNG a 32 bit con trasparenza.
Per esportare una PNG a 32 bit con trasparenza: 1 2 3

In Fireworks, scegliere Finestra > Ottimizza, modificare il formato di file di esportazione a PNG 32 e impostare Effetto mat su trasparente. Scegliere File > Esporta. 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 lesportazione delle porzioni di Fireworks a Director, si pu esportare contenuto suddiviso in porzioni e interattivo quali le immagini dei pulsanti e dei rollover. Lesportazione 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 unanimazione e Sorgente come porzioni se si sta esportando il contenuto interattivo quali i pulsanti.

Uso di Fireworks con altre applicazioni 127

2 3 4

Nella finestra di dialogo Esporta, digitare un nome per il file e scegliere una cartella di destinazione. Scegliere Director dal menu a comparsa Salva con nome. Scegliere unopzione 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 unanimazione. 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 6 7

Scegliere Taglia immagini per ritagliare automaticamente le immagini esportate in modo che si adattino gli oggetti su ciascun fotogramma. Selezionare Inserisci immagine nella sottocartella per definire una cartella per le immagini. Fare clic su Salva.

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 limportazione di livelli, porzioni ed elementi interattivi di Fireworks mediante linserimento di codice HTML di Fireworks.
Per importare unimmagine appiattita di Fireworks: 1 2 3 4

In Director, scegliere File > Importa. Portarsi sul file desiderato, poi fare clic su Importa. Modificare le opzioni secondo necessit nella finestra di dialogo Opzioni immagine. Per ulteriori informazioni su ciascuna opzione, consultare Using Director. Fare clic su OK. Lelemento 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.

128 Capitolo 4

Individuare il file HTML di Fireworks esportato per luso in Director. Compare la finestra di dialogo Apri HTML di Fireworks.

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 limportazione. Fare clic su Apri. Vengono importati gli elementi grafici e il codice del file HTML di Fireworks.
Nota: Se si sta importando unanimazione 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 lintegrazione di lancio e modifica, si possono apportare modifiche ai membri del cast di Director lanciando Fireworks per modificarli dallinterno dellapplicazione. Inoltre, possibile lanciare Fireworks dallinterno di Director per ottimizzare i membri del cast.
Per lanciare Fireworks allo scopo di modificare un membro del cast di Director: 1 2

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. Scegliere Lancia editor esterno dal menu a comparsa.
Nota: Se non si lancia Fireworks come editor esterno delle immagini, allinterno di Director scegliere File > Preferenze > Editor e impostare Fireworks come editor esterno per i tipi di file grafico bitmap.

Uso di Fireworks con altre applicazioni 129

Il file si apre in Fireworks e la finestra del documento indica che si sta modificando un file da Director.

Apportare le modifiche allimmagine 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 2 3

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. In Fireworks, modificare le impostazioni di ottimizzazione come desiderato. Fare clic su Aggiorna una volta terminato. Fare clic su Completato se compare la finestra di dialogo Modifica MIX. Limmagine viene riesportata a Director usando le nuove impostazioni.

Operazioni con Macromedia HomeSite


possibile usare Fireworks e HomeSite congiuntamente per creare e modificare pagine Web. Lesportazione e lapertura di HTML di Fireworks in HomeSite semplice e linserimento 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 sullesportazione di immagini GIF e JPEG, consultare la guida di Fireworks (Guida > Uso di Fireworks).
Per inserire unimmagine 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.

130 Capitolo 4

2 3

Nella finestra Risorse, passare allimmagine Fireworks esportata. Creare un collegamento allimmagine Fireworks nel documento: sulla scheda Modifica della finestra Documento.

Trascinare il file dalla finestra Risorse alla posizione desiderata allinterno del codice HTML Nella scheda Modifica della finestra Documento, collocare il punto di inserimento dove si
intende inserire limmagine 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 allimmagine di Fireworks. Fare clic sulla scheda Sfoglia per lanteprima dellimmagine 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 lHTML di Fireworks per luso 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 dellHTML di Fireworks a HomeSite Lesportazione 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 dellHTML di Fireworks negli Appunti per luso 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 nellincollarlo 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 dellHTML 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.

Uso di Fireworks con altre applicazioni 131

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 dellHTML 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 lHTML, 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 lintegrazione di lancio e modifica per alterare le immagini di un documento di HomeSite. HomeSite lancia automaticamente Fireworks e permette di apportare le modifiche desiderate allimmagine. Quando si abbandona Fireworks, gli aggiornamenti effettuati vengono applicati automaticamente allimmagine 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:

In HomeSite, salvare il documento. 2 Eseguire una delle seguenti procedure: 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 sullimmagine nella scheda Miniature della finestra Risultati. Fare clic col pulsante destro del mouse sulletichetta <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 questultimo non sia gi aperto. 4 Qualora richiesto, specificare se individuare un file sorgente di Fireworks per limmagine collocata. Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare Salvataggio dei file di Fireworks a pagina 81. 5 Modificare limmagine in Fireworks. La finestra del documento indica che si sta modificando unimmagine di Fireworks da unaltra applicazione. 6 Al termine delle modifiche, fare clic su Fine nella finestra del documento.
1

Limmagine aggiornata viene riesportata a HomeSite e, se selezionato, viene salvato anche il file sorgente PNG.

132 Capitolo 4

Operazioni con Microsoft FrontPage


Le straordinarie capacit di integrazione di Fireworks ne consentono luso 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 unapplicazione e fare in modo che quelle modifiche vengano riflesse senza soluzione di continuit nellaltra. 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 sullesportazione di immagini GIF e JPEG, consultare la guida di Fireworks Help (Guida > Uso di Fireworks).
Per inserire unimmagine di Fireworks in un documento di FrontPage: 1 2 3

In vista Modifica o Codice, collocare il punto di inserimento dove si intende far comparire limmagine. Scegliere Inserisci > Immagine > Da file. Portarsi sul file di Fireworks desiderato, poi fare clic su OK.

Creazione di nuove immagini di Fireworks in FrontPage Fireworks pu essere lanciato dallinterno di FrontPage per creare unimmagine senza porzioni.
Nota: Se si intende creare unimmagine suddivisa in porzioni, occorre prima creare ed esportare una singola immagine non suddivisa in porzioni. Quindi possibile lanciare e modificare nuovamente lelemento grafico allinterno 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 unimmagine di Fireworks non suddivisa in porzioni in FrontPage: 1 2 3 4

Fare clic sul pulsante Lancia e modifica lelemento grafico selezionato in Fireworks nella barra degli strumenti principale di FrontPage. Quando compare un messaggio che richiede leventuale creazione di una nuova immagine, fare clic su S. Fireworks lancia, qualora questultimo non sia gi aperto. Aprire un nuovo documento in Fireworks e creare unimmagine. 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.

Uso di Fireworks con altre applicazioni 133

5 6 7 8 9 10

Scegliere File > Esporta. Specificare un nome e una posizione per il file immagine esportato nella finestra di dialogo Esportazione. Fare clic su Salva nella finestra di dialogo Esporta per esportare il file. Ritornare a FrontPage. In vista Modifica o Codice, collocare il punto di inserimento dove si intende far comparire limmagine. Scegliere Inserisci > Immagine > Da file. Passare al file immagine appena esportato e fare clic su Inserisci.

Collocazione dellHTML di Fireworks in FrontPage Sono disponibili diversi metodi per collocare lHTML di Fireworks in FrontPage. Il codice HTML di Fireworks pu essere esportato oppure copiato negli Appunti. Si pu anche optare per lapertura 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 lHTML di Fireworks per luso 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 dellHTML di Fireworks a FrontPage Lesportazione 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 lHTML di Fireworks per luso 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 dellHTML di Fireworks negli Appunti per luso 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 nellincollarlo 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 dallutente.
Nota: Prima di copiare lHTML di Fireworks per luso 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.

134 Capitolo 4

Copia dellHTML 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 dellHTML 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 lHTML 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 lHTML 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 Luso congiunto di Fireworks e FrontPage semplificato da Roundtrip HTML, una funzionalit che permette di apportare modifiche in unapplicazione e fare in modo che queste variazioni si riflettano senza soluzione di continuit anche nellaltra. Con Roundtrip HTML, si utilizza lintegrazione 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 allimmagine direttamente da Fireworks. Gli aggiornamenti effettuati in Fireworks vengono applicati automaticamente anche allimmagine collocata in FrontPage. Utilizzate assieme, le due applicazioni garantiscono un flusso di lavoro ottimizzato per la modifica, lottimizzazione 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 2

In FrontPage, salvare il documento. Selezionare limmagine o la porzione della tabella da modificare e fare clic sul pulsante Lancia e modifica lelemento grafico selezionato in Fireworks. FrontPage lancia Fireworks, qualora questultimo non sia gi aperto. Qualora richiesto, specificare se lanciare un file sorgente di Fireworks per limmagine 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.

Modificare limmagine in Fireworks. La finestra del documento indica che si sta modificando unimmagine di Fireworks da FrontPage.

Uso di Fireworks con altre applicazioni 135

Al termine delle modifiche, fare clic su Fine nella finestra del documento. Limmagine 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 Photoshop


Fireworks offre limportazione 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 lelemento 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 sullimportazione 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, leffetto livello Drop Shadow (ombra) di Photoshop viene convertito nelleffetto dal vivo Ombra di Fireworks.
Nota: Laspetto 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 nellimmagine
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. Allimportazione in Fireworks dei file di Photoshop, tali caratteristiche verranno pertanto ignorate.
Nota: In Windows, i nomi dei file di Photoshop devono includere lestensione PSD perch Fireworks possa riconoscere il tipo di file.

136 Capitolo 4

Per importare in Fireworks un file di Photoshop: 1 2

Scegliere File > Importa o File > Apri e passare a un file Photoshop (PSD). 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 sullimportazione 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 laspetto. 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 limportazione 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 unimmagine in cache del testo in modo che il suo aspetto rimanga identico a quello che aveva in Photoshop. Una volta modificato il testo, limmagine 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 sullesportazione 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 dellaspetto e di modificabilit mantenuto dai file importati.
Per specificare le opzioni di importazione per i file di Photoshop: 1

Scegliere Modifica > Preferenze.


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

2 3

Fare clic sulla scheda Importa (Windows) o scegliere Importa dal menu a comparsa (Macintosh). 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.

Uso di Fireworks con altre applicazioni 137

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. Laspetto del testo convertito pu variare dalloriginale. Testo: Mantieni aspetto converte il testo contenuto nel file di Photoshop in un oggetto bitmap di Fireworks. Questa opzione mantiene laspetto 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. 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. Limportazione 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 lesecuzione 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: 1

Scegliere Modifica > Preferenze.


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

2 3

Fare clic sulla scheda Cartelle (Windows) o scegliere Cartelle dal menu a comparsa (Macintosh). Scegliere lopzione 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 5 6

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). Fare clic su OK per chiudere la finestra di dialogo Preferenze. 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 sullarea 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 nellarea di lavoro.

2 3

Scegliere Opzioni > Individua plug-in dal menu a comparsa che viene visualizzato. 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. Riavviare Fireworks per caricare i filtri e i plug-in.

138 Capitolo 4

Collocazione di elementi grafici di Fireworks in Photoshop Fireworks garantisce un supporto esteso per lesportazione 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, allaspetto e alle dimensioni dei file permettono di determinare la migliore procedura di esportazione possibile per limmagine 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 2 3

Scegliere File > Esporta o fare clic sul pulsante Esportazione rapida e scegliere Altro > Esporta a Photoshop. Nella finestra di dialogo Esporta, assegnare un nome al file e scegliere Photoshop PSD dal menu Salva con nome. Per specificare le impostazioni di esportazione raggruppate, scegliere unopzione 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 lesportazione in Photoshop a pagina 139. 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 laspetto preciso dellimmagine di Fireworks.

Mantieni modificabilit dellaspetto converte gli oggetti in livelli, conserva la modificabilit

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 laspetto originale dellimmagine di Fireworks.

File Photoshop di dimensioni inferiori appiattisce ciascun livello in unimmagine 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 lesportazione in Photoshop Quando si esporta un file in Photoshop, possibile definire impostazioni personalizzate per lesportazione di oggetti, effetti e testo.
Per personalizzare le impostazioni per lesportazione 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.

Uso di Fireworks con altre applicazioni 139

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.

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 laspetto degli effetti, a spese della capacit di modificarli in PhotoShop.

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 laspetto 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 lHTML da Fireworks. Per ulteriori informazioni sulla scelta di uno stile HTML e sullesportazione dellHTML di Fireworks, consultare la guida di Fireworks (Guida > Uso di Fireworks).
Nota: Lo stile dellHTML di Adobe GoLive non supporta il codice dei menu a comparsa. Se il documento di Fireworks contiene menu a comparsa, prima dellesportazione si dovrebbe scegliere HTML generico come stile HTML.

Informazioni sulle operazioni con gli editor di HTML


Fireworks 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 allinterno di Fireworks. Per ulteriori informazioni, consultare Creazione di file PNG di Fireworks da file HTML a pagina 77.

140 Capitolo 4

INDICE

creazione di barre di navigazione (nav) 50


D

Adobe Type Manager 5 aggancio dei pannelli 86 ambiente di lavoro 16 animazione, modifica 114 annullamento 101 apertura documenti 75 file recenti 75 GIF animati 75 immagini grafiche create in altre applicazioni 75 viste multiple del documento 92 appiattimento di bitmap 25 apprendimento di Fireworks newsgroup 7 risorse 6 area di disegno, vedi area di lavoro area di lavoro modifica caratteristiche 94 modifica risoluzione 94 ritaglio 97 rotazione 96
B

denominazione di oggetti 26 descrizione comandi 7 Design Note per lintegrazione di Macromedia Dreamweaver e Fireworks 117 documenti affiancamento delle viste 92 apertura 75 recenti 75 salvataggio 81 viste multiple 92 DPI, vedi risoluzione
E

barra di stato (Windows) 93 barre degli strumenti aggancio 89 sblocco 89 visualizzazione e occultamento 89 browser, visualizzazione di file Fireworks 69
C

comandi Aggiorna HTML 108 Nascondi pannelli 87 Ottimizza immagine in Fireworks 112 salvataggio 102 combinazione, vedi unione copia e incolla di oggetti da altre applicazioni 78

effetti dal vivo 23 esercitazioni 7 esercitazione di progettazione grafica di base 13 esercitazione di progettazione grafica Web 41 espansione di Fireworks 7 esportazione 38 elementi grafici 73 file Fireworks in Dreamweaver 131, 134 HTML 65 in Illustrator 125 in Macromedia Director 127 in Macromedia Dreamweaver 108 in Macromedia Flash 118, 120 in Macromedia FreeHand 125 in Photoshop 139 per Photoshop 139 personalizzazione dei file per Photoshop 139 Esportazione rapida, pulsante 89
F

file EPS, apertura in Fireworks 76 file WBMP 76 filtri 23

141

finestra di ispezione Propriet 84 aggancio 85 espansione 85 riduzione 85 sgancio 85 flusso di lavoro in Fireworks 72 formato file PNG, trasparenza 122 forme, vedi grafica vettoriale FrontPage collocazione del codice HTML di Fireworks in 134 collocazione delle immagini di Fireworks in 133 creazione di immagini di Fireworks in 133 modifica dei file di Fireworks in 135
G

GoLive 140 grafica bitmap 72 grafica bitmap, vedi bitmap grafica orientata agli oggetti, vedi grafica vettoriale grafica per telefonia cellulare, vedi file WBMP grafica vettoriale 71 griglia aggancio di oggetti 101 modifica del colore predefinito 101 modifica delle dimensioni delle celle 101 visualizzazione/occultamento 101 gruppo di discussione, Fireworks 7 guida Fireworks 6 guida Macromedia 6 guide aggancio di oggetti 101 blocco 101
H

WAP 76 importazione da fotocamera digitale 80 file di Photoshop 137 file PNG 79 immagini 20, 43 importazione di testo, file di Photoshop 137 ingrandimento di unarea specifica 91 inserimento HTML di Fireworks in Dreamweaver 106 immagini di Fireworks in Dreamweaver 104 installazione di Fireworks 6 integrazione di Dreamweaver e Fireworks aggiornamento dellHTML di Fireworks 108 comando Ottimizza immagine in Fireworks 112 Design Note 117 lancio e modifica delle immagini di Fireworks 110 lancio e modifica delle tabelle di Fireworks 111 lancio e ottimizzazione delle immagini di Fireworks 113 modifica animazioni di Fireworks 114 preferenza editor esterno 116 preferenza Lancia e modifica 117 ridimensionamento immagini di Fireworks 114 interattivit 73 istanze multiple di un pulsante 52
J

JavaScript 5
L

HomeSite collocazione del codice HTML di Fireworks in 131 collocazione di immagini di Fireworks in 130 HTML aggiornamento dellHTML di Fireworks collocato in Macromedia Dreamweaver 108 apertura di tabelle 77 esportazione 65 inserimento da Fireworks a Dreamweaver 106 operazioni con gli editor 140 ottimizzato 110 preferenze per lesportazione 65
I

lancio di Fireworks da Dreamweaver, vedi integrazione di Dreamweaver e Fireworks livelli 24 Log progetti 86
M

Illustrator, esportazione in 125 immagini incollate 79

Macintosh 5 requisiti di sistema per 5 Macromedia Director 5 collocazione dei file di Fireworks in 127 esportazione in 127 membri del cast 129 Macromedia Dreamweaver 5 comportamenti 112 esportazione in 108 file 104 impostazione di Fireworks come editor di immagini predefinito 115 librerie 108 modifica delle immagini di Fireworks in 109

142 Indice

segnaposto 104 Macromedia Flash 5 esportazione in 118, 120 importazione dei PNG Fireworks in 118 Macromedia FreeHand 5 collocazione degli elementi grafici di Macromedia Fireworks in 123 esportazione in 125 maschere 28 applicazione 28 menu a comparsa creazione 56 modifica 60 personalizzazione 58 menu di collegamento 98 menu Opzioni nei pannelli 88 Mini-Launcher 93 Mixer colori 85 modalit a tutto schermo con menu 91 di visualizzazione, commutazione 93 inserimento bitmap 72 inserimento vettori 72 Schermo standard 91 visualizzazione 91 modalit bitmap 72 applicazione con gli strumenti 83 modalit vettoriale 72 modifica di una maschera 28 simboli pulsante 54
N

creazione 18 ombre 36 opzione Vincola proporzioni 76 ottimizzazione 36, 62 elementi grafici 73 immagini di Fireworks da Dreamweaver 112
P

newsgroup, Fireworks 7 nuove funzionalit 8 nuovo documento corrispondenza con la dimensione degli Appunti 74 creazione 74
O

occultamento barre degli strumenti 89 pannelli 87 occultamento di pannelli 87 oggetti 24 denominazione 26 incollati, collocazione 78 ordine di impilamento 27 propriet 19 vettoriali 17 oggetti vettoriali 17

pannelli 85 aggancio 86 apertura dei layout personalizzati 88 Campioni colore 85 Comportamenti 86 Cronologia 86, 102 Fotogrammi 85 Info 85 Libreria 86 Livelli 85 Log progetti 86 menu Opzioni in 88 occultamento 87 organizzazione 86 Ottimizza 86 rimozione da un gruppo 87 ripristino delle posizioni predefinite 87 Risposte 7, 86 salvataggio dei layout personalizzati 88 sgancio 86 spostamento 86 Stili 86 Strumenti 83 Trova e sostituisci 86 URL 86 pannello Campioni colore 85 pannello Cronologia 86, 102 panoramica 91 perimetri di selezione 21 Photoshop esportazione in 139 importazione di file in Fireworks 136 personalizzazione dei file per lesportazione 139 plug-in 138 plug-in, installazione di Acquire 80 Photoshop e Fireworks esportazione dei file PSD da Fireworks 139 importazione dei file PSD in Fireworks 137 pixel, selezione 21 plug-in 23, 138 porzioni 73 modifica porzioni tabella di Fireworks da Macromedia Dreamweaver 111

Indice 143

preferenze editor esterno 116 Importa 137 Lancia e modifica 117 per lesportazione HTML 65 propriet oggetto 19 testo 34 visualizzazione nella finestra di ispezione Propriet 84 pulsanti assegnazione di URL 54 creazione 50 istanze 52 stati 51 testo dellistanza 53 punti attivi 73 puntini, vedi pixel
R

sito Web Fireworks Support Center (Centro di supporto Fireworks) 7 spazio di lavoro 16, 82 spostamento allinterno di un documento 89 strumenti menu a comparsa dei gruppi di strumenti 84 modifica opzioni 83 Zoom 90 suddivisione 44
T

test dei file 68 testo creazione 30, 32 istanze dei pulsanti 53 propriet 34 tracciati, copia e incolla 126 trascina e rilascia 78 trasparenza nei file PNG 122
U

RAM, vedi requisiti di sistema requisiti di sistema per Fireworks 5 rettangoli di selezione, vedi perimetri di selezione ridefinizione con ampliamento 96 con riduzione 96 descrizione 96 oggetti bitmap 96 oggetti vettoriali 96 ridimensionamento immagini di Fireworks da Dreamweaver 114 righelli 99 ripetizione di azioni 102 risoluzione 5 risorse per lapprendimento di Fireworks 6 ritaglio area di lavoro 97 documenti 98 ritardo fotogramma, preimpostazione 75 rollover 73 creazione 46
S

unione bitmap 25 URL, assegnazione ai pulsanti 54


V

visualizzazione barre degli strumenti 89 in anteprima, documenti su piattaforme diverse 92 pannelli 87 righelli 99 visualizzazione di file Fireworks in un browser 69
W

Windows, requisiti di sistema per 5


X

Xtra di importazione per Director 127 Vedi filtri


Z

zoom 89 uso di incrementi preimpostati 90

salvataggio dei documenti 81 scorrimento dellarea di lavoro, vedi panoramica selezione, pixel 21 separazione di un documento 44 simboli pulsante creazione 50 modifica 54

144 Indice