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

Transcript

1 INTRODUZIONE Fireworks 3 è la soluzione per la progettazione e la realizzazione di grafici Web di qualità professionale. Si tratta del primo ambiente di produzione in grado di risolvere i problemi specifici dei progettisti e dei professionisti della grafica per il Web. Fireworks permette di progettare rapidamente grafici Web e animazioni. Fireworks unisce strumenti di modifica per immagini bitmap e grafici vettoriali. In Fireworks, ogni elemento rimane pienamente modificabile in qualsiasi momento. Inoltre, è garantita l automazione del workflow per soddisfare le esigenze poste dal costante processo di rielaborazione, aggiornamento e modifica. Fireworks si integra agli altri prodotti Macromedia, quali Dreamweaver e Flash, nonché con le applicazioni grafiche e gli editor di HTML preferiti, in modo da fornire una soluzione Web davvero integrata. I grafici realizzati con Fireworks possono essere esportati facilmente corredati del codice HTML e JavaScript personalizzato per l editor di HTML in uso. 11

2 Requisiti di sistema Per la corretta esecuzione di Fireworks è necessario attenersi ai seguenti requisiti hardware e software: Per Microsoft Windows : processore Intel Pentium 120 o equivalente (consigliato Pentium II o superiore); Windows 95, 98, o Windows NT 4 (con Service Pack 3) o successivo; 64 MB di RAM; 60 MB di spazio libero su disco (consigliati 100 MB); monitor a colori, risoluzione (consigliati 1024 x 768, milioni di colori); mouse o tavoletta grafica; unità CD-ROM Per Macintosh : processore Power Macintosh (consigliato G3, G4 per ottimizzazione delle prestazioni Altivec); System 8.1 o successivo; 64 MB di RAM; 60 MB di spazio libero su disco (consigliati 100 MB); Adobe Type Manager 4 o successivo per l uso dei caratteri Type 1; monitor a colori, risoluzione (consigliati 1024 x 768, milioni di colori); mouse o tavoletta grafica; unità CD-ROM. Installazione e avvio di Fireworks Prima di installare Fireworks, accertarsi che il computer soddisfi i requisiti di sistema elencati in Requisiti di sistema on page 12. Leggere il documento Leggimi nel CD-ROM di Fireworks per mettersi al corrente delle informazioni più recenti. Per installare Fireworks su Windows: 1 Inserire il CD di Fireworks 3 nell'unità CD-ROM. 2 Scegliere una delle opzioni seguenti: In Windows, il programma di installazione di Fireworks parte automaticamente. Se ciò non si verificasse, scegliere Avvio (Start) > Esegui. Fare clic su Sfoglia e scegliere il file Setup.exe nel CD Fireworks 3. Fare clic su OK nella finestra di dialogo Esegui. Su Macintosh, fare doppio clic sull icona del programma di installazione di Fireworks 3. 3 Seguire le istruzioni riportate a video. Il programma di installazione richiederà di immettere le informazioni necessarie. 4 Se richiesto dal sistema, riavviare il computer. Risorse per imparare a usare Fireworks Per imparare a usare Fireworks sono disponibili una varietà di risorse, fra cui la guida stampata, un sistema di guida che può essere lanciato dall'applicazione e diverse fonti di informazione basate sul Web. La Guida di Fireworks, disponibile quando è attiva l'applicazione, corrisponde al manuale Guida all'uso di Fireworks in formato HTML. Scegliendo la funzione di ricerca nella guida in linea di Fireworks, potrebbe comparire una finestra di sicurezza Java, in cui si richiede l autorizzazione per la lettura dei file sul disco rigido del sistema. Per abilitare la funzione di ricerca, è necessario concedere tale autorizzazione. L applet non scriverà informazioni sul disco rigido, né leggerà altri file ad eccezione delle pagine HTML della guida in linea. Presentazione multimediale: si tratta di un filmato Shockwave incluso nella guida in linea di Fireworks. Questa introduzione animata alle funzionalità principali di Fireworks è reperibile all argomento Panoramica dell Esercitazione. Il filmato richiede il lettore Shockwave 7 per il browser Web. È possibile scaricare il lettore Shockwave più recente dal sito Web Macromedia all'indirizzo shockwave/download/. 12 Introduzione

3 Esercitazione di Fireworks: si tratta di un introduzione interattiva alle funzionalità principali di Fireworks, completabile in meno di un ora. La sua esecuzione consente ai nuovi utenti di acquisire rapidamente dimestichezza con il programma. L'esercitazione include alcune delle più comuni operazioni di Fireworks, tra cui l'ottimizzazione di GIF e JPEG e la creazione di animazioni e rollover. Applicazione Fireworks: l'applicazione Fireworks contiene molte finestre di dialogo e descrizioni comandi progettate specificatamente per assistere l'utente nell'utilizzo del programma. Le descrizioni comandi vengono visualizzate quando si ferma il puntatore su uno degli elementi dell'interfaccia utente. Quando si tenta di usare alcuni strumenti in modo errato compaiono messaggi di aiuto. Manuale Guida all'uso di Fireworks: contiene informazioni che coprono le funzioni base e avanzate di Fireworks. Expanding Fireworks: questo documento contiene informazioni su come scrivere codice JavaScript per automatizzare operazioni di Fireworks. È possibile controllare quasi ogni comando o impostazione di Fireworks grazie a speciali comandi JavaScript che Fireworks è in grado di interpretare. Sito Web Fireworks e Support Center: questo sito Web contiene informazioni sempre aggiornate su Fireworks nonché consigli dagli utenti esperti, argomenti per un uso avanzato del programma, esempi, suggerimenti e update. Si consiglia di accedere spesso al Support Center all'indirizzo per ricavare notizie su Fireworks e su come sfruttarne appieno tutte le potenzialità. Gruppo di discussione Fireworks: per scambiare informazioni su Fireworks con gli utenti del programma, i rappresentanti dell'assistenza tecnica e il team di sviluppo di Fireworks è possibile accedere all'indirizzo news://forums.macromedia.com/macromedia.fireworks. Nuove funzionalità di Fireworks 3 Fireworks 3 presenta numerose nuove funzioni concepite per ottimizzare la realizzazione di immagini Web. Integrazione con Dreamweaver L'integrazione di Fireworks 3 e Dreamweaver 3 è stata resa più efficiente per aiutare l'utente a spostare i propri grafici in ambiente Web: I comportamenti ottimizzati di Fireworks vengono interpretati come comportamenti nativi di Dreamweaver. Dreamweaver individua automaticamente il file sorgente di Fireworks quando si lanciano e ottimizzano le immagini di Fireworks dall'interno di Dreamweaver. Scegliendo il comando di Dreamweaver Inserisci in Fireworks si possono spostare i grafici suddivisi in porzioni e assemblati da Fireworks a Dreamweaver. Le operazioni di posizionamento dei grafici Fireworks e dell'html associato e di aggiornamento dei loro collegamenti si svolgono del tutto automaticamente. Per maggiori informazioni, vedere Pianificazione del sito Web on page 234. Anteprima dell'esportazione nello spazio di lavoro È possibile visualizzare l'anteprima di un intero lavoro, inclusi i rollover, senza lasciare lo spazio di lavoro, si possono quindi confrontare i file come se fossero stati esportati: La nuova finestra Anteprima visualizza il grafico ottimizzato nello spazio di lavoro. Il nuovo pannello Ottimizza permette di modificare le impostazioni di ottimizzazione per il grafico nell'anteprima. 13

4 Le finestre 2-alto e 4-alto consentono di confrontare due o quattro diverse versioni ottimizzate di un grafico, o di confrontare l'originale con le versioni ottimizzate. Possibilità di selezionare e ottimizzare singole porzioni nella finestra Anteprima. Possibilità di esecuzione di un'anteprima di rollover e animazioni in azione senza alcuna necessità di avviare un browser Web. Per maggiori informazioni sulle anteprime nello spazio di lavoro, vedere Ottimizzazione nell'area di lavoro on page 154. Pannello Cronologia Il pannello Cronologia permette una completa flessibilità grazie a livelli multipli di annullamento e di ripristino istantaneo. Questa funzionalità registra tutte le operazioni e visualizza un elenco completo dei passaggi recenti. La visualizzazione e lo spostamento tra questi passaggi differenti è possibile trascinando il dispositivo di scorrimento del pannello Cronologia. Fireworks consente di salvare gruppi di passaggi come comandi e quindi di applicarli ad altre immagini. In alternativa è possibile copiarli e incollarli. In questo modo si possono salvare comandi che consentono di ricreare i grafici che si ripetono all interno di un sito. I comandi sono indipendenti dalla piattaforma, quindi è possibile condividerli con persone che collaborino su uno stesso progetto o intendano conferire lo stesso aspetto ai propri grafici. Per maggiori informazioni, vedere Creazione di script di comandi usando il pannello Cronologia on page 229. Automazione con JavaScript Le operazioni di Fireworks 3 e Dreamweaver 3 possono essere automatizzate mediante l uso di JavaScript. Questo linguaggio consente persino di creare script per controllare Fireworks da Dreamweaver. Gestione migliorata degli effetti e dei file di Photoshop Questi miglioramenti facilitano le operazioni con i file di Adobe Photoshop all'interno di Fireworks: È possibile modificare gli effetti livello di Photoshop usando il pannello Effetto. Molti filtri di Photoshop con funzionalità di scripting sono utilizzabili come Live Effects (Effetti dal vivo). I livelli di testo dei file di Photoshop importati sono comunque modificabili. Per maggiori informazioni, vedere le sezioni Applicazione di un Effetto dal vivo on page 140 e Apertura di file di Photoshop on page 51. Esportazione di Illustrator e Flash È possibile modificare lo scopo dei grafici creati con Fireworks per adattarli alla stampa o all'animazione: L'esportazione di documenti di Fireworks in formato vettoriale consente l'importazione in FreeHand 8 e Illustrator. L'esportazione di documenti di Fireworks come file SWF consente invece di importarli in Macromedia Flash. Per maggiori informazioni, vedere Esportazione di un'immagine on page 166. Funzionalità perfezionate di porzione, rollover e animazione Ora Fireworks consente di creare barre di navigazione, rollover e file GIF animati di grande effetto e di collocarli in HTML in modo molto più agevole: 14 Introduzione

5 La creazione di barre di navigazione è davvero più semplice con i nuovi comportamenti compatibili con Dreamweaver, quali Imposta immagine barra nav. Inoltre, è possibile creare rapidamente barre di navigazione usando i simboli pulsante. Aggiornamento delle tabelle di Fireworks 3 in qualsiasi file HTML. Creazione di porzioni poligonali che consentono di scambiare immagini collegate di forma irregolare. Creazione di porzioni sovrapposte senza errori HTML. Uso della libreria di Fireworks, che appare e si comporta proprio come la Libreria di Flash. È possibile creare librerie di simboli riutilizzabili per aggiornare diversi grafici Web simultaneamente. Per maggiori informazioni, vedere le sezioni Pianificazione del sito Web on page 234, Raffronto delle porzioni con i punti attivi on page 182 e Selezione degli oggetti on page 66. Perfezionamenti del pulsante Rollover Usare il nuovo Editor di pulsanti per creare pulsanti rollover senza alcuna precedente esperienza di progettazione Web. Gli utenti più esperti possono trarre vantaggio dalla praticità dell'editor di pulsanti e dei simboli dei pulsanti: L'editor di pulsanti semplifica la creazione di pulsanti offrendo suggerimenti durante ogni passaggio della procedura di creazione. È possibile modificare il simbolo del pulsante in qualsiasi momento grazie all'editor di pulsanti. Usando la finestra di ispezione Oggetto è possibile modificare contemporaneamente Il testo di tutti gli stati di un pulsante. Quando si riposiziona un simbolo di pulsante sul grafico, tutti gli stati si spostano contemporaneamente, eliminando la tediosa operazione di riposizionamento e riallineamento manuale dei singoli stati. Si può modificare l'aspetto di un gruppo di pulsanti senza influenzare il testo di ogni pulsante grazie a un simbolo di pulsante nidificato. Per maggiori informazioni, vedere Cos'è un pulsante? on page 192. Nuove opzioni di modifica delle bitmap Con le nuove opzioni di modifica delle bitmap, è possibile correggere immagini senza abbandonare Fireworks: Regolazione del contrasto e della luminosità. Regolazione di tonalità e saturazione. Correzione della gamma tonale con Livelli, Livelli auto e Curve. Tutti questi effetti sono applicabili come Live Effects (effetti dal vivo). Per maggiori informazioni, vedere Uso dei filtri e dei plug-in on page 129. Anteprima gamma L'anteprima gamma permette di vedere quale aspetto assumerà un'immagine su una piattaforma computer diversa. Quando si opera su una piattaforma Windows, visualizza l'aspetto di un'immagine su una piattaforma Macintosh e vice versa. Per maggiori informazioni, vedere Cos'è Fireworks? on page 33 15

6 Accesso istantaneo a texture e motivi Usare texture e motivi per espandere le opzioni creative a propria disposizione per i tratti e i riempimenti. Fireworks 3 permette di applicare texture o motivi basati su file bitmap di ogni tipo, posti su tutti i dischi accessibili al computer. Per maggiori informazioni, vedere Selezione degli oggetti on page 66. Comandi di scalatura e rotazione Queste nuove funzioni aggiungono il controllo della trasformazione: Scegliere tra le opzioni di scalatura e interpolazione bicubico, bilineare, più vicino o morbida. Ruotare l'area di lavoro e tutti gli oggetti che contiene. Per maggiori informazioni, vedere Selezione degli oggetti on page 66. Live Effects (Effetti dal vivo) Questa funzionalità consente di visualizzare numerosi filtri di terze parti e come Live Effects (Effetti dal vivo). Fra gli effetti applicabili sono inclusi i filtri di Photoshop e alcuni favoriti degli utenti quali Alien Skin Eye Candy. Puntare sulla cartella dei plug-in o caricarli direttamente in Fireworks per creare istantaneamente l'effetto voluto su qualsiasi oggetto. È possibile applicare più Effetti dal vivo a porzioni di testo, immagini, grafici, tracciati e tratti. Aggiungere il numero di effetti desiderato è davvero facile. Gli effetti sono totalmente modificabili. Se si apporta una modifica a un oggetto, l'effetto viene aggiornato automaticamente. Le impostazioni preferite possono essere salvate e applicate ad altri oggetti. Miglioramenti del testo Nuove funzionalità testo e caratteri espandono il controllo dell'utente: Quando si inserisce del testo, è possibile ridimensionarlo in modo automatico in senso orizzontale o verticale. Si può visualizzare un carattere prima di applicarlo al testo usando l'anteprima caratteri. I caratteri mancanti possono essere sostituiti con altri installati sul computer. Alla successiva apertura del documento, Fireworks ricorda il nuovo carattere indicato. Per maggiori informazioni, vedere Immissione di testo on page Introduzione

7 1 CAPITOLO 1 Esercitazione... Questa esercitazione presenta le funzioni più importanti di Macromedia Fireworks e richiede circa un'ora. Per informazioni dettagliate sulle funzionalità coperte da questa esercitazione, vedere l'indice del presente manuale. Per un'introduzione animata a Fireworks, vedere anche l'argomento Panoramica dell'esercitazione nelle pagine della guida in linea di Fireworks. Nel corso dell'esercitazione, si apprenderà come completare una home page per un'azienda fittizia produttrice di caffè. Prima di procedere, aprire il file completato per osservare in anteprima quale sarà il risultato di creazione finale. 1 In Fireworks, scegliere File > Apri per aprire il file Finale_esercitazione.png ubicato nella cartella Esercitazione all'interno della cartella dell'applicazione di Fireworks 3. 17

8 2 Fare clic sul pulsante Mostra punti attivi e porzioni posto in fondo agli Strumenti. I rettangoli verdi e blu che compaiono sull'immagine definiscono i punti attivi e le porzioni. In questa esercitazione si apprenderà come creare e utilizzare i punti attivi e le porzioni. 2 Per assicurarsi che il puntatore si agganci alle guide, scegliere Visualizza > Opzioni guide > Aggancia alle guide. 3 Posizionare il puntatore sopra allo strumento Rettangolo in Strumenti e fare clic per sceglierlo. Pulsante Mostra punti attivi e porzioni Pulsante Nascondi punti attivi e porzioni 3 Fare clic sul pulsante Nascondi punti attivi e porzioni. 4 Se lo si desidera, scegliere Visualizza > Riduci per ridurre la vista dell'opera prodotta e lasciare il file aperto durante il lavoro. Se non si desidera aprire il file, scegliere invece File > Chiudi. Aprire ora il file su cui si interverrà durante l'esercitazione. 5 Scegliere File > Apri per aprire il file Inizio_esercitazione.png collocato nella cartella Esercitazione all'interno della cartella dell'applicazione Fireworks 3. 6 Scegliere File > Salva con nome. Assegnare al file il nome my_work quindi fare clic su Salva. Strumenti di disegno Fireworks mette a disposizione un'ampia gamma di strumenti per creare forme geometriche di base, nonché di strumenti per il disegno di precisione di forme irregolari. Disegno di un rettangolo Si inizierà disegnando un rettangolo con l'ausilio delle guide. 1 Qualora le guide (di colore verde brillante) non fossero visualizzate, scegliere Vista > Guide. 4 Posizionare lo strumento rettangolo vicino a uno degli angoli del rettangolo formati dalle guide e trascinare verso l'angolo opposto. Grafica pittorica del tratto e del riempimento In Fireworks, il colore applicato su un linea viene definito tratto, mentre il colore all'interno dell'oggetto è noto come riempimento. I colori del tratto e del riempimento correnti vengono visualizzati nelle vaschette colore degli Strumenti. I colori di tratto e riempimento possono essere impostati anche avvalendosi dei pannelli Tratto e Riempimento. 1 Con il rettangolo ancora selezionato, fare clic sul triangolo a fianco della vaschetta del colore di riempimento per aprire il menu a comparsa della vaschetta colori. Vaschetta dei colori Riempimento Per impostazione predefinita, i menu a comparsa dei colori visualizzano i 216 colori della tavolozza web-safe. 18 Capitolo 1

9 2 Spostare il puntatore sui vari campioni di colore e osservare che il valore esadecimale corrispondente a ogni campione di colore compare in cima al menu a comparsa. Fare clic su un campione per selezionare tale colore per il riempimento (nell'esempio si è utilizzato il bianco). È inoltre possibile digitare un valore esadecimale per il colore direttamente nella casella di testo posta in cima al menu a comparsa. 3 Se il pannello Tratto non risultasse visualizzata, scegliere Finestra > Tratto. Il pannello Tratto consente di scegliere un'ampia gamma di impostazioni di tratto, comprese le dimensioni e la forma del pennello nonché il colore e la texture del tratto. 4 Scelta delle impostazioni per il tratto. Sperimentare le diverse impostazioni disponibili per osservare i vari effetti ottenibili. Nell'esempio sono state utilizzate le impostazioni riportate sotto. Pulsanti JavaScript Fireworks consente di creare facilmente pulsanti interattivi senza dover scrivere una sola riga di codice JavaScript. Creazione di un pulsante Si procederà a convertire il rettangolo in un pulsante e quindi si utilizzerà l'editor di pulsanti per completarlo. 1 Con il rettangolo ancora selezionato, scegliere Inserisci > Converti in simbolo. In Fireworks, i pulsanti costituiscono un tipo speciale di oggetti, definiti simboli, che vengono memorizzati nella libreria del documento. Per maggiori informazioni sull'uso dei simboli e del pannello Libreria, vedere Simboli e istanze a pagina Digitare Button nella casella di testo Nome, selezionare l'opzione Pulsanti, quindi fare clic su OK. Si noti che il rettangolo sembra ora disporre di un riempimento verde chiaro ed è presente una piccola freccia nell'angolo inferiore sinistro. In realtà, il riempimento non ha subito alcuna modifica. Il verde chiaro rappresenta un oggetto porzione. La freccia indica che il rettangolo è un'istanza del pulsante. L'immagine originale per il pulsante è memorizzata nella libreria del documento. Esercitazione 19

10 3 Fare doppio clic sul pulsante per aprire l'editor di pulsanti, oppure scegliere Elabora > Simbolo > Modifica simbolo. Nell'Editor di pulsanti è possibile creare i grafici da assegnare a ognuno degli stati del pulsante. La prima modifica da apportare sarà l'aggiunta di testo al pulsante. 6 Digitare our story nella casella di testo posta in fondo alla finestra di dialogo e fare clic su OK. 4 Selezionare lo strumento Testo e fare clic vicino al centro del rettangolo nell'editor di pulsanti. A questo punto, avvalersi dei comandi di allineamento per centrare il testo all'interno del rettangolo. 7 Con lo strumento Puntatore, selezionare il rettangolo, quindi tenere premuto il tasto Maiusc e fare clic sul testo. 5 Scegliere un carattere dall'apposito menu a comparsa nella finestra di dialogo Editor di testo, immettere le dimensioni in punti, selezionare un colore dal menu a comparsa dei colori, quindi fare clic sul pulsante di allineamento al centro (nell'esempio si è utilizzato il carattere Arial, 14 punti, grassetto, allineato al centro). 20 Capitolo 1

11 8 Scegliere Elabora > Allinea > Centrato verticale e quindi Elabora > Allinea > Centrato orizzontale. 10 Avvalersi dello strumento Puntatore per selezionare il rettangolo. Fare clic sulla vaschetta dei colori del riempimento negli Strumenti, selezionare il contagocce, quindi fare clic sul rettangolo marrone dietro al messaggio di benvenuto. Il contagocce permette di prelevare dallo schermo un campione di qualsiasi colore. Fireworks ha spostato il testo per allinearlo all'interno del rettangolo senza spostare il rettangolo stesso. I comandi di allineamento mantengono la posizione del primo oggetto selezionato, alla quale allineano successivamente tutti gli oggetti selezionati. 9 Fare clic sulla scheda Sopra nell Editor di pulsanti e sul pulsante Copia grafico Su. L'immagine riportata nella scheda Sopra è quella che comparirà quando il puntatore passerà sopra al pulsante nella pagina Web completata. Per distinguere questa immagine da quella dello stato Su, si procederà a cambiare il colore di riempimento mediante il campionamento di un colore prelevato dall'immagine. Ogni pulsante creato deve collegarsi a un indirizzo Internet, quale un URL. 11 Fare clic sulla scheda Area attiva nell'editor dei pulsanti, quindi fare clic su Autocomposizione Collegamento nell'angolo inferiore destro. 12 Fare clic sulla scheda Collegamento. Immettere l'url nella casella di testo posta nella parte superiore della finestra di dialogo. Utilizzare un URL valido (come in modo da potere poi testare il funzionamento del pulsante in un browser. 13 Fare clic su OK. 14 Chiudere l'editor di pulsanti. Esercitazione 21

12 Duplicazione del pulsante Fireworks permette di creare facilmente un numero a piacere di pulsanti di aspetto simile, ma contenenti collegamenti e testi diversi. 1 Tenere premuto il tasto Alt (Windows) od Opzione (Macintosh) e trascinare il pulsante verso la parte inferiore della pagina. Con questa operazione, si sposta una copia della selezione. 5 Fare clic sul pulsante Autocomposizione Collegamento nella finestra di ispezione Oggetto. 6 Fare clic sulla scheda Collegamento e modificare l'url. Utilizzare un URL valido in modo da potere poi testare il funzionamento del pulsante nell'anteprima della pagina in un browser. 7 Fare clic su OK. Si noti che il testo sul pulsante è stato aggiornato. 2 Se la finestra di ispezione Oggetto non è visualizzata, scegliere Finestra > Oggetto. 3 Nella casella di testo Testo pulsante, digitare gifts quindi premere Invio. Comparirà un messaggio che richiede se modificare solo l'istanza attiva oppure tutte le istanze del pulsante. Poiché il pulsante Our Story è stato duplicato, si dispone di due istanze dello stesso pulsante. Quando si modifica un pulsante, Fireworks ne aggiorna anche tutte le istanze. In questo caso, è necessario disporre di due pulsanti distinti, quindi si sceglierà di modificare il pulsante corrente. 4 Fare clic su Corrente. Rollover sofisticati Oltre alla creazione di pulsanti, Fireworks semplifica anche la realizzazione di effetti rollover JavaScript sofisticati. Ad esempio, quando il puntatore passa sopra a un pulsante, oltre a modificare l'aspetto del pulsante, è possibile modificare anche l'aspetto di un'altra area della pagina. In Fireworks, questo tipo di effetto rollover viene definito rollover disgiunto. 1 Qualora il pannello Livelli non sia visualizzato, scegliere Finestra > Livelli. Fare clic sul Livello 1 per impostarlo come livello attivo. Le modifiche da apportare ora interesseranno solo il Livello 1. 2 Visualizzare il pannello Fotogrammi (scegliere Finestra > Fotogrammi se non fosse già a video). Pulsante Nuovo fotogramma 22 Capitolo 1

13 3 Fare clic sul pulsante Fotogramma nuovo/ duplicato posto in fondo al pannello Fotogrammi. 4 Fare clic sul Fotogramma 2 nel pannello Fotogrammi. Tutti gli elementi scompariranno ad eccezione dei pulsanti, perché l'immagine si trova nel Fotogramma 1. I pulsanti, tuttavia, si trovano su un livello condiviso tra tutti i fotogrammi. A questo punto, collocare l'immagine nel Fotogramma 2 che funge da sorgente per il rollover. È necessario attivare la tecnica Onion skin per facilitare l'allineamento dell'immagine nel Fotogramma 2 con l'immagine contenuta nel Fotogramma 1. La tecnica Onion skin permette di visualizzare versioni non selezionabili di più fotogrammi alla volta. 5 Fare clic nella colonna a sinistra del Fotogramma 1 nel pannello Fotogrammi. Fireworks visualizzerà i contenuti del Fotogramma 1 come se si trattasse di lucidi sovrapposti. 7 Dall'elenco degli elementi, fare clic su Swap Text. In cima al pannello Libreria comparirà un'anteprima dell'immagine. 8 Trascinare l'immagine Swap Text dall'area di anteprima nel pannello Libreria e allinearla con il testo del messaggio di benvenuto. 9 Rendere attivo il fotogramma 1 facendo clic su suo nome nel pannello Fotogrammi. Per risparmiare tempo, l'immagina da usare per il rollover è già stata creata. 6 Qualora il pannello Libreria non fosse visualizzato, scegliere Finestra > Libreria. Il pannello Libreria visualizza i pulsanti e altre immagini per consentirne il riutilizzo durante il lavoro di progettazione. Per maggiori informazioni sull'uso del pannello Libreria, vedere Simboli e istanze a pagina 94. Esercitazione 23

14 10 Avvalersi dello strumento Puntatore per selezionare il rettangolo marrone dietro al testo del messaggio di benvenuto e scegliere Inserisci > Porzione. Fireworks inserirà un rettangolo trasparente verde chiaro sopra l'immagine per rappresentare la porzione. 12 Selezionare il pulsante Gifts. 13 Nella finestra di ispezione Comportamenti (scegliere Finestra > Comportamenti se non fosse già a video), fare clic sul pulsante contraddistinto da un segno più (+) e scegliere Scambia immagine dal menu a comparsa. 11 Nella finestra di ispezione Oggetto (scegliere Finestra > Oggetto se non fosse già a video), deselezionare l'opzione di assegnazione automatica del nome alle porzioni e digitare text_slice nella casella di testo posta in fondo al pannello. L'assegnazione di nomi diversi alle porzioni facilita l'identificazione delle immagini porzione durante le operazioni di manutenzione e aggiornamento del sito Web. Comparirà la finestra di dialogo Scambia immagine. 14 Accertarsi che nell'elenco delle porzioni sul lato sinistro della finestra di dialogo sia selezionato l'elemento text_slice, quindi fare clic su OK. Ora si procederà a collegare un comportamento detto anche behavior, vale a dire codice JavaScript prescritto al pulsante Gifts che individua questa porzione come area da modificare quando il puntatore del mouse passa sul pulsante. 15 Fare clic sul pulsante Nascondi punti attivi e porzioni negli Strumenti. Fare clic sulla scheda Anteprima nello spazio di lavoro e portare il puntatore sui pulsanti. Puntare sul pulsante Gifts: si noti il modificarsi del messaggio sulla destra. La scheda Anteprima visualizza l'immagine, i pulsanti e i comportamenti JavaScript come compariranno in un browser Web. 16 Fare clic sulla scheda Originale e salvare l'immagine. 24 Capitolo 1

15 Effetti dal vivo Fireworks comprende effetti speciali e comandi di regolazione delle immagini utilizzabili su tracciati e immagini bitmap. Quando si usa il pannello Effetto, gli effetti rimangono modificabili anche dopo essere stati applicati a un oggetto. Potranno persino venire eliminati. 1 Selezionare il pulsante Our Story. 4 Impostare su 3 pixel il valore dello spessore del bordo smussato (facendo soffermare il puntatore su ogni opzione del pannello Effetto, Fireworks visualizzerà il nome dell'effetto stesso a fianco del puntatore). Impostare qui lo spessore dello smusso 2 Visualizzazione del pannello Effetto. Si procederà ad applicare gli effetti smusso e ombra per conferire un aspetto tridimensionale al pulsante. 3 Fare clic sul menu a comparsa in cima al pannello e scegliere Smusso e Rilievo > Smusso interno. Fireworks visualizzerà un gruppo di opzioni per l'impostazione dello smusso. 5 Fare clic sul menu a comparsa in cima al pannello Effetto e scegliere Ombra e luce > Ombra. 6 Fare clic all'esterno delle opzioni del menu a comparsa per accettare le impostazioni predefinite. Esercitazione 25

16 Automazione Durante la sessione di lavoro, Fireworks registra le operazioni effettuate nel pannello Cronologia. Il pannello Cronologia può essere utilizzato per annullare le operazioni eseguite e riportare il documento allo stato precedente. Il pannello permette inoltre di automatizzare le operazioni ripetendo i passaggi registrati. 1 Selezionare il pulsante Gifts. 2 Nel pannello Cronologia, fare clic tenendo premuto il tasto Maiusc sugli ultimi due passaggi registrati, entrambi denominati Effetto. Essi rappresentano gli effetti Smusso e Ombra applicati al pulsante Our Story. 3 Fare clic sul pulsante Riproduci di nuovo nel pannello Cronologia. Fireworks applicherà gli effetti Smusso e Ombra al pulsante Gifts. Maschere Le maschere coprono gli oggetti in modo che solo la parte dell'oggetto a cui non è applicata la maschera compaia nel documento. Si procederà all'uso del rettangolo bianco per applicare una maschera all'immagine della tazza di caffè, applicando un bordo nero alla tazza di caffè. 1 Usare lo strumento Puntatore e trascinare il rettangolo bianco sopra alla tazza di caffè. 2 Tenendo premuto il tasto Maiusc, fare clic sull'immagine della tazza di caffè in modo che risultino selezionati sia la tazza di caffè che il rettangolo. 3 Scegliere Elabora > Raggruppa maschere > Applica maschera a tracciato. Il rettangolo maschererà la tazza di caffè. La maniglia della maschera è quella a forma di rombo al centro della tazza di caffè. 4 Trascinare la maniglia della maschera con lo strumento Puntatore per posizionare la tazza di caffè all'interno della maschera. 26 Capitolo 1

17 Punti attivi In Fireworks, è possibile associare un'area dell'immagine a un URL con la massima facilità. È possibile creare i punti attivi ogni volta che si desideri creare un collegamento ma non sono richiesti gli stati interattivi dei pulsanti. Per creare i punti attivi si procedere come per la creazione di una mappa dell'immagine in Fireworks. 1 Selezionare il rettangolo contenente il testo "order our". Assicurarsi di selezionare tutto il rettangolo e non solo il testo 2 Scegliere Inserisci > Punto attivo. Fireworks Inserirà un rettangolo blu trasparente per rappresentare il punto attivo. 3 Immettere l'url prescelto nella casella di testo posta in cima alla finestra di ispezione Oggetto. Si noti che la finestra di ispezione Oggetto visualizza il tipo di oggetto selezionato nella barra del titolo. Ottimizzazione delle immagini Fireworks permette di ottimizzare individualmente le diverse parti di un documento. Ogni documento dispone di un'impostazione di ottimizzazione predefinita, ma avvalendosi delle porzioni è possibile ottimizzare anche le singole aree del documento. Ad esempio, la maggior parte del documento su cui si sta lavorando può essere ottimizzata come file GIF, ma l'immagine della tazza di caffè sarà visualizzata al meglio se ottimizzata come file JPEG. Per prima cosa, confermare le impostazioni di ottimizzazione del documento. Queste impostazioni sono utilizzate per qualsiasi parte dell'immagine che non si trovi sotto a un oggetto porzione. 1 Deselezionare tutti gli oggetti scegliendo Modifica > Deseleziona. 2 Visualizzare il pannello Ottimizza. Si noti che la barra del titolo di questo pannello mostra le impostazioni per la selezione attiva. In questo caso, visto che non è selezionato nessun elemento, la barra visualizzerà le impostazioni per il documento. Esercitazione 27

18 3 Accertarsi che GIF WebSnap 128 sia la selezione impostata nel menu a comparsa Impostazioni posto in cima al pannello. Per personalizzare le impostazioni di ottimizzazione selezionate si possono utilizzare le opzioni poste in fondo al pannello. Per maggiori informazioni sull'uso delle impostazioni di ottimizzazione, vedere il Capitolo 11, "Optimizing Graphics." A questo punto si procederà a creare una porzione sopra alla tazza di caffè. Avvalersi dello strumento Puntatore per selezionare l'immagine della tazza di caffè e scegliere Inserisci > Porzione. Fireworks creerà un oggetto porzione delle stesse dimensioni dell'oggetto selezionato. 4 Scegliere JPEG - File più piccoli dal menu a comparsa Impostazioni posto in fondo al pannello Ottimizza. 5 Fare clic sulla scheda 2-alto in cima allo spazio di lavoro. Se necessario, selezionare lo strumento Mano e trascinare nel riquadro di sinistra in modo da rendere visibile la tazza di caffè. Fireworks visualizzerà due versioni del documento. Nel riquadro di sinistra si trova l'immagine originale, mentre in quello di destra la versione ottimizzata. Apportando modifiche all'immagine originale, Fireworks aggiornerà quella ottimizzata. Se sono visualizzati gli oggetti Web (punti attivi e porzioni), selezionando una porzione sulla sinistra, il resto dell'immagine risulterà non selezionabile, permettendo quindi di concentrarsi sull'ottimizzazione della porzione selezionata. 6 Con la porzione della tazza di caffè selezionata, apportare le modifiche alle impostazioni di ottimizzazione nel pannello Ottimizza: si notino le variazioni dell'immagine sulla destra. 7 Salvare il file. 28 Capitolo 1

19 Esportazioni di immagini, HTML e JavaScript All'esportazione del documento, Fireworks esporta i singoli file corrispondenti a tutte le porzioni. Genera inoltre tutto il codice HTML e JavaScript necessario a visualizzare il documento in un browser Web. Fireworks semplifica l'esportazione delle immagini e del codice HTML e JavaScript da incorporare nel sito in fase di creazione e gestione con Macromedia Dreamweaver. 1 Scegliere File > Esporta. L'esportazione del documento crea una serie di file di immagini, uno per ogni porzione, nonché un file HTML. Per semplificare la rimozione di questi file in un secondo momento, esportarli in una nuova cartella. 2 Scegliere la collocazione, fare clic sul pulsante Nuova cartella e assegnare un nome alla cartella. Accertarsi che il nome della nuova cartella compaia nell'argomento della finestra di dialogo. 3 Accettare l'impostazione predefinita per il nome base. Fireworks utilizza questo nome per il file HTML che crea e come base per l'assegnazione del nome a tutti i file GIF e JPEG creati in seguito alla suddivisione in porzioni. 4 Facendo clic sul pulsante Impostazione, è possibile modificare le modalità di assegnazione dei nomi da parte di Fireworks, nonché impostare altre proprietà dell'html esportato. Per maggiori informazioni, vedere Esportazione di un'immagine a pagina Scegliere Usa oggetti porzione dal menu a comparsa In porzioni. Ciò garantisce che tutti i pulsanti, i comportamenti e le ottimizzazioni funzionino una volta visualizzati in un browser. 6 Scegliere Dreamweaver 3 dal menu a comparsa Stile. Ciò permette di creare il codice HTML ottimizzato per l'uso in Dreamweaver 3. 7 Accertarsi che il menu a comparsa Posizione sia impostato su Stessa directory. Questa opzione permette di specificare dove salvare il file HTML in relazione alle immagini esportate. È persino possibile copiare tutto il codice HTML negli Appunti per incollarlo poi direttamente in un file di Dreamweaver. 8 Fare clic su Salva (Windows) o Esporta (Macintosh) per esportare i file. Il file HTML può ora essere visualizzato in un browser o aperto in Dreamweaver per ulteriori modifiche. Se lo si desidera, effettuare un'anteprima del documento in un browser Web per controllarne l'aspetto e testare il funzionamento dei pulsanti creati. 9 Aprire un browser Web, scegliere File > Apri pagina (Netscape Navigator) o File > Apri (Microsoft Internet Explorer) e selezionare il file HTML esportato. Il browser può anche essere aperto direttamente da Fireworks scegliendo File > Anteprima nel browser e scegliendo uno dei browser disponibili. Qualora quello desiderato non sia in elenco, scegliere Imposta browser primario o secondario per aggiungerli all'elenco. 10 Una volta testato il codice HTML esportato, tornare a Fireworks e chiudere il file. Esercitazione 29

20 Animazione In Fireworks è possibile creare GIF animati usando i fotogrammi. Ogni fotogramma contiene un'immagine diversa. Gli elementi da far comparire in tutti i fotogrammi sono collocati su un livello separato, condiviso da tutti i fotogrammi. La sequenza dei fotogrammi, una volta visualizzata nell'ordine corretto, crea l'illusione del movimento. 1 Aprire il documento Inizio_animato.png ubicato nella cartella Esercitazione all'interno della cartella dell'applicazione di Fireworks. 3 Selezionare le quattro miniature facendo clic su ogni immagine con lo strumento Puntatore e tenendo contemporaneamente premuto il tasto Maiusc. Il quadrato blu contenuto nella colonna a destra del Livello 1 nel pannello Livelli indica che la selezione è sul quel livello. 4 Trascinare il quadrato blu a fianco del Livello 1 su un nuovo livello, il Livello 2. 2 Visualizzare il pannello Livello e fare clic sul pulsante Livello nuovo/duplicato posto in fondo al pannello. È ora possibile condividere il Livello 1 tra i fotogrammi in modo che il testo compaia in ogni fotogramma dell'animazione. 5 Nel pannello Livelli, selezionare Livello 1. Si procederà ora a spostare le immagini in miniatura sul nuovo livello. 30 Capitolo 1

21 6 Aprire il menu a comparsa delle opzioni sul pannello Livelli (fare clic sul triangolo posto in cima al pannello) e scegliere Condividi livello. Si noti che a destra del nome del livello comparirà un'icona a forma di pellicola, ad indicare che tale livello è condiviso tra i fotogrammi. 9 Visualizzare il pannello Fotogrammi e fare clic sul pulsante Distribuisci sui fotogrammi posto in fondo al pannello. 10 Visualizzare il pannello Ottimizza e scegliere GIF animato dal menu a comparsa per la scelta del formato di esportazione. Il formato GIF animato deve essere utilizzato per l'esportazione su file di tutti i fotogrammi. Scegliendo il formato GIF si esporterebbe infatti solo il primo fotogramma. 7 Fare clic sulle miniature tenendo contemporaneamente premuto il tasto Maiusc per selezionarle di nuovo. 8 Trascinare le miniature sul testo e allinearle sulle ultime quattro lettere del logo. 11 Fare clic tenendo contemporaneamente premuto il tasto Maiusc su tutti i fotogrammi del pannello Fotogrammi e scegliere Proprietà dal menu opzioni del pannello (fare clic sul triangolo posto in cima al pannello). A questo punto si dovranno distribuire le miniature su fotogrammi separati per creare l'animazione. Esercitazione 31

22 12 Impostare il ritardo dei fotogrammi su 50 (pari a mezzo secondo) e premere Invio. Il ritardo fotogrammi definisce la velocità dell'animazione. 13 Fare clic sul pulsante Esegui posto in fondo alla finestra dell'applicazione (Windows) o alla finestra del documento (Macintosh). si noti che il pulsante Esegui si trasforma nel pulsante Termina una volta terminata la riproduzione dell'animazione. Fare clic sul pulsante Termina per interrompere l'animazione. 14 Scegliere File > Salva con nome, assegnare un nome al documento my_animation e fare clic su Salva. Se lo si desidera, esportare il file ed effettuarne una prova nel browser. Si è così completata l'esercitazione di Fireworks. Si può ora passare alla creazione di opere personali originali con l'ausilio di Fireworks. 32 Capitolo 1

23 2 CAPITOLO 2 Informazioni di base su Fireworks... Per iniziare ad acquisire dimestichezza con le funzioni fondamentali del programma è possibile avvalersi di una rapida presentazione del suo spazio di lavoro. Questo capitolo contiene un elenco delle funzionalità per i siti Web che si possono creare in Fireworks, alcune delle quali non sono universalmente note. Cos'è Fireworks? L'avvento di Fireworks ha liberato i progettisti Web dalla necessità di usare applicazioni diverse per ogni operazione, con frequenti passaggi da una all'altra. I suoi Effetti dal vivo non distruttivi eliminano la frustrazione legata alla necessità di ricreare grafici Web da zero dopo ogni semplice modifica. Fireworks genera JavaScript, semplificando la creazione di rollover. Le sue funzioni di ottimizzazione riducono le dimensioni dei file di grafica Web senza sacrificare la qualità. Di seguito sono illustrate alcune delle possibilità del programma: Fireworks riunisce in una sola applicazione alcune delle più interessanti funzioni dei programmi di modifica della grafica vettoriale e bitmap. La flessibilità tipica degli oggetti vettoriali consente di apportare modifiche e applicare effetti bitmap, fra cui smussi, luci, ombre e ora anche i filtri di Photoshop, che vengono ridisegnati durante le operazioni di modifica. I grafici Web di Fireworks possono essere ottimizzati per minimizzare le dimensioni dei file, con una conseguente maggiore rapidità di caricamento dei siti Web. In Fireworks è possibile aggiungere interattività alle immagini Web per creare mappe delle immagini, pulsanti rollover JavaScript, banner pubblicitari animati e persino intere pagine Web. 33

24 L applicazione permette di risparmiare grandi quantità di tempo in ogni singola fase del processo di progettazione Web grazie a funzionalità quali l elaborazione in batch, gli stili e le impostazioni di esportazione salvabili, l ottimizzazione dello spazio di lavoro, gli script delle sequenze di comandi e la compatibilità con Macromedia Dreamweaver e altri software di progettazione Web. Fireworks è in primo luogo un'applicazione di disegno di grafici a schermo. Tuttavia, grazie all'abilità di esportare in applicazioni quali FreeHand e Illustrator, i grafici disegnati in Fireworks possono essere usati anche per la stampa. Ottimizzazione dei siti Web con Fireworks Molti utenti iniziano a usare Fireworks per le sue eccellenti caratteristiche di ottimizzazione di grafici o come applicazione per la realizzazione di pulsanti e mappe di immagini. Questa sezione evidenzia alcune operazioni possibili con Fireworks non universalmente note. Illustrazioni Web Un estesa raccolta di strumenti ed effetti artistici, capacità di controllo del colore e di ottimizzazione rendono Fireworks una straordinaria applicazione per la creazione di logo e altre illustrazioni. Immagini ottimizzate Prima di caricare fotografie o qualsiasi altro tipo di illustrazioni in un sito Web, eseguire l'ottimizzazione di Fireworks per minimizzarne le dimensioni senza sacrificarne la qualità. L anteprima 2-alto confronta un immagine JPEG ottimizzata al 100 percento della qualità con un immagine al 60 percent o della qualità. Miniature Per inserire sul Web un numero di immagini consistente, può essere opportuno creare delle miniature. Queste immagini sono dotate di punti attivi che consentono l apertura della versione a dimensioni complete dell immagine facendo clic su di esse. Per maggiori informazioni, vedere Creazione miniature sul Fireworks Support Center. 34 Capitolo 2

25 Banner pubblicitari animati Fireworks consente di usare cornici, simboli e ottimizzazione per creare GIF animati o banner pubblicitari Flash di dimensioni compatte. Rollover per pulsanti e JavaScript Fireworks consente di creare i pulsanti che attivano eventi nella pagina Web. Inoltre, è possibile enfatizzare l'interattività grazie ai rollover JavaScript, che modificano l'aspetto a seconda dello stato corrente del pulsante. Mappe d'immagine L applicazione consente di trasformare un grafico in una mappa interattiva per la navigazione del sito Web. Si possono inoltre collocare punti attivi sulle aree del grafico che saranno più probabilmente visitate dagli utenti e assegnare loro degli URL. Barre di navigazione JavaScript L applicazione consente di creare un intero gruppo di pulsanti JavaScript come un grafico singolo, quindi usare porzioni per esportarlo come un gruppo di grafici di dimensioni inferiori con URL univoci. Informazioni di base su Fireworks 35

26 Rollover disgiunti Fireworks consente di creare rollover che attivano una modifica su un'altra parte della pagina Web. Per esempio, fare clic su un pulsante su una barra di navigazione può dare luogo alla sostituzione di un grafico con un altro. Pagine Web complete L applicazione consente di creare un'intera pagina Web in Fireworks, oppure di creare una barra di navigazione, un banner pubblicitario, immagini JPEG e illustrazioni GIF. Si possono anche usare per suddividere la pagina in regioni separate che possono essere ottimizzate in modo efficiente. All'esportazione, Fireworks provvede a scrivere il codice HTML che permette il reinserimento della pagina nel browser. Quando si sposta il puntatore sul pulsante, questo e l area del testo cambiano aspetto. Introduzione allo spazio di lavoro di Fireworks All'apertura, Fireworks 3 mostra i menu di comandi occupano la parte superiore della finestra. Gli Strumenti sono agganciati alla sinistra dello schermo. Diversi pannelli mobili a schede multiple e flottanti sono disposti sulla parte destra dello schermo. L'apertura di un documento colloca una finestra del documento al centro dello spazio di lavoro. Con ogni probabilità l'utente userà questi componenti con grande frequenza: La finestra del documento originale visualizza il documento PNG corrente di Fireworks. Grazie alle finestre Anteprima, 2-alto e 4-alto e ai pannelli Ottimizza e Tavola colore, è possibile effettuare operazioni di ottimizzazione all interno dello spazio di lavoro. Le anteprime visualizzano l'aspetto dei grafici nei browser e consentono di confrontare sino a quattro diverse ottimizzazioni dello stesso grafico. Le impostazioni possono essere visualizzate e ottimizzate usando il pannello Ottimizza e il pannello Tavola colore. 36 Capitolo 2

27 Gli Strumenti contengono gli strumenti di selezione, disegno e modifica, lo strumento Ingrandimento, lo strumento Punto attivo, lo strumento Porzione e i comandi dei colori del tratto e di riempimento. Le finestre di ispezione Oggetto, Tratto, Riempimento ed Effetto controllano un ampio spettro di caratteristiche degli oggetti selezionati. Il Mixer colori, il pannello Campioni colore e il pannello Tavola colore gestiscono la tavolozza colore del documento corrente. I pannelli Livelli e Fotogrammi consentono di organizzare la struttura dei documenti e contengono opzioni per la creazione, l'eliminazione e la manipolazione dei livelli e dei fotogrammi. Il pannello Fotogrammi contiene opzioni per la creazione di animazioni. La finestra di ispezione 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 più recenti in modo da poterli annulla e ripristinare con rapidità. Inoltre, è possibile scegliere comandi da ripetere e salvare sequenze di comandi da riutilizzare come se si trattasse di un comando singolo. L'Editor di pulsanti consente di creare con grande rapidità pulsanti rollover di JavaScript e barre di navigazione. I menu di contesto permettono di accedere rapidamente ai comandi relativi alla selezione corrente. Il pannello Libreria contiene simboli grafici e simboli per pulsanti. È possibile trascinare facilmente istanze dalla Libreria nel documento. Visualizzazione di un documento Fireworks La finestra del documento Originale visualizza il documento PNG corrente di Fireworks. La barra del titolo visualizza il nome del documento e la percentuale di ingrandimento corrente. La scheda Originale e le tre schede anteprima si trovano nell angolo superiore sinistro dello spazio di lavoro. Per visualizzare il documento PNG originale: Fare clic sulla scheda Originale nella finestra del documento. Ottimizzazione nello spazio di lavoro La vista Anteprima visualizza il grafico come apparirà in un browser Web, sulla base delle impostazioni di esportazione correnti. Le viste 2- alto e 4-alto confrontano le anteprime di esportazione sulla base di varie impostazioni. Nelle viste 2-alto e 4-alto, è possibile anche confrontare versioni ottimizzate con il documento originale. Per visualizzare un'anteprima delle esportazioni: Fare clic sulle schede Anteprima, 2-alto, o 4-alto nella finestra del documento. Usare il pannello Ottimizza e il pannello Tavola colore per modificare le impostazioni di esportazione. Questi pannelli e l'anteprima riproducono la finestra di dialogo Anteprima esportazione delle versioni precedenti di Fireworks, portando l'ottimizzazione direttamente nello spazio di lavoro. Informazioni di base su Fireworks 37

28 All'interno della vista Anteprima, è possibile eseguire un'anteprima dei comportamenti di rollover e navigazione, oltre alle animazioni. Per maggiori informazioni sull'ottimizzazione e l'esportazione di grafici in Fireworks, vedere le sezioni Ottimizzazione nell'area di lavoro a pagina 154 e Esportazione di un'immagine a pagina 166. Visualizzazione e scelta degli strumenti Gli Strumenti contengono gli strumenti da usare per creare, selezionare e modificare gli oggetti. In Windows, le barre degli strumenti Principale, Elabora e Comandi vista offrono un accesso agevole a vari comandi. Gli utenti Macintosh possono scegliere questi comandi dai menu. La funzione di alcuni strumenti varia a seconda che li si usi per modificare oggetti o pixel. Per maggiori informazioni sugli strumenti di Fireworks, vedere Scelta degli strumenti di disegno e modifica a pagina 56. Per scegliere uno strumento alternativo da un gruppo di strumenti: 1 Fare clic e tenere premuto qualsiasi strumento che ha un triangolo nell'angolo inferiore sinistro. 2 Trascinare il puntatore sullo strumento desiderato e rilasciare il pulsante del mouse. Lo strumento scelto compare negli Strumenti. Riordino delle barre degli strumenti (solo per Windows) È possibile mostrare e nascondere le barre degli strumenti, sbloccarle, o spostarle nella parte superiore, inferiore, o laterale del documento. Per mostrare o nascondere gli Strumenti o una barra degli strumenti: Scegliere Finestra > Strumenti o scegliere una barra degli strumenti dal sottomenu Finestra > Barre degli strumenti. Se gli Strumenti o una barra degli strumenti viene sbloccata, è possibile fare clic sul pulsante Chiudi nella parte superiore destra della barra del titolo. Gli Strumenti contengono 37 strumenti, alcuni dei quali sono contenuti in gruppi di strumenti, come illustrato. Fare clic su uno strumento per sceglierlo. Alternativamente, premere i tasti di scelta rapida per passare velocemente da uno strumento a un altro. Per maggiori informazioni sui tasti di scelta rapida, vedere Appendice, Scelte rapide da tastiera. Per sbloccare gli Strumenti o una barra degli strumenti: 1 Spostare lo strumento corrente su un'area tra i pulsanti degli strumenti. Lo strumento si trasforma nello strumento Puntatore. 2 Trascinare gli Strumenti o la barra degli strumenti lontano dalla posizione di aggancio. Gli Strumenti o la barra degli strumenti diventano un pannello flottante. 38 Capitolo 2