Guida introduttiva di Fireworks MX

Transcript

1 Guida introduttiva di Fireworks MX macromedia

2 Marchi Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer s Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind ed Xtra sono marchi di Macromedia, Inc. e possono essere registrati negli Stati Uniti o presso altre giurisdizioni, anche a livello internazionale. Altri nomi di prodotti, logo, progetti, titoli, parole o frasi riportati in questa pubblicazione possono essere marchi, nomi di servizi o denominazioni commerciali di Macromedia, Inc. o di altre società registrati presso alcune giurisdizioni, anche a livello internazionale. Questo manuale contiene collegamenti ai siti Web di terze parti che non sono sotto il controllo di Macromedia. Macromedia non potrà quindi essere ritenuta responsabile per i contenuti di qualsiasi sito collegato. Qualora si decida di accedere a un sito Web di terze parti menzionato in questo documento, lo si farà sotto la propria completa responsabilità e a proprio rischio. Macromedia fornisce questi collegamenti solo per comodità dell utente e l inclusione del collegamento non implica che Macromedia sottoscriva o accetti qualsiasi responsabilità per i contenuti di tali siti di terze parti. Limitazioni di responsabilità Apple LA APPLE COMPUTER, INC. NON FORNISCE ALCUNA GARANZIA, ESPLICITA O IMPLICITA, RIGUARDO AL PAC- CHETTO SOFTWARE ACCLUSO, ALLA SUA COMMERCIABILITÀ O ALLA SUA IDONEITÀ PER SCOPI SPECIFICI. L ESCLUSIONE DELLE GARANZIE IMPLICITE NON È CONSENTITA IN ALCUNI STATI. TALE ESCLUSIONE PUÒ NON RIFERIRSI AL CASO SPECIFICO. LA PRESENTE GARANZIA ASSICURA ALL UTENTE ALCUNI DIRITTI LEGALI SPECIFICI. L UTENTE PUÒ GODERE DI ALTRI DIRITTI CHE VARIANO DA STATO A STATO. Fireworks è una creazione della Macromedia, Inc Tutti i diritti riservati. Brevetti U.S.A , , , , , e Parti del software concesse in licenza con il brevetto U.S.A. n. 4,558,302 e controparti straniere. Altri brevetti in corso. Copyright parziale 1988, 2000 Aladdin Enterprises. Tutti i diritti riservati. Questo software è basato in parte sul lavoro dell Independent JPEG Group. Copyright parziale 1998 Soft Horizons. Tutti i diritti riservati. Nessuna parte del presente manuale, singola o completa, può essere copiata, fotocopiata, riprodotta, tradotta o convertita in forma elettronica o leggibile da apparecchiature apposite senza previa autorizzazione scritta da parte di Macromedia, Inc. Numero di parte ZFW60M100IT Riconoscimenti Scritto da Dale Crawford, Tonya Estes, David Jacowitz, Kenneth Price Editor: Rosana Francescato Gestione progetto di Stuart Manning Produzione di Caroline Branch, John Francis, Patrice O'Neill Responsabile produzione versioni localizzate: Masayo Noda Responsabile di localizzazione: Sami Kaied Project manager di localizzazione: Gloria Figueroa Fotografia di Chris Basmajian Multimedia: Aaron Begley Prima edizione: giugno 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA

3 SOMMARIO INTRODUZIONE Guida introduttiva Requisiti di sistema Installazione di Fireworks Nuove funzionalità di Fireworks CAPITOLO 1 Esercitazione di progettazione grafica di base Argomenti trattati È bene sapere che Copia del file Tutorials Visualizzazione del file dell esercitazione nella sua forma completa Creazione e salvataggio di un nuovo documento Introduzione all ambiente di lavoro di Fireworks Creazione e modifica di oggetti vettoriali Importazione di una bitmap e selezione di pixel Aggiunta e modifica di effetti dal vivo Operazioni con livelli e oggetti Creazione e modifica di una maschera Creazione e modifica di un testo Esportazione del documento Argomenti successivi CAPITOLO 2 Esercitazione di progettazione grafica Web Argomenti trattati È bene sapere che Copia del file Tutorials Vista della pagina Web completata Apertura del file di origine Importazione di un immagine Suddivisione in porzioni di un documento Creazione di un rollover trascina e rilascia Creazione e modifica di pulsanti per la creazione di una barra di navigazione Creazione e modifica di un menu a comparsa Ottimizzazione del documento Esportazione HTML Test del file completato Argomenti successivi

4 CAPITOLO 3 Informazioni di base su Fireworks Informazioni sulla grafica vettoriale e bitmap Informazioni sulle operazioni in Fireworks Creazione di un nuovo documento Apertura e importazione dei file Salvataggio dei file di Fireworks Lo spazio di lavoro di Fireworks Modifica dell area di lavoro CAPITOLO 4 Uso di Fireworks con altre applicazioni Operazioni con Macromedia Dreamweaver MX Operazioni con Macromedia Flash MX Operazioni con Macromedia FreeHand Operazioni con Macromedia Director Operazioni con Macromedia HomeSite Operazioni con Microsoft FrontPage Operazioni con Adobe Photoshop Informazioni sulle operazioni con Adobe GoLive Informazioni sulle operazioni con gli editor di HTML INDICE Sommario

5 INTRODUZIONE Guida introduttiva Macromedia Fireworks MX è la soluzione per la progettazione e la realizzazione di elementi grafici Web di qualità professionale. Si tratta del primo ambiente di produzione in grado di affrontare e risolvere i problemi specifici dei Web designer e degli sviluppatori. Fireworks permette infatti di creare, modificare e animare gli elementi grafici per il Web, aggiungere interattività avanzata e ottimizzare le immagini in un ambiente professionale. In Fireworks è possibile creare e modificare immagini di grafica bitmap e vettoriale utilizzando un unica applicazione. In Fireworks, qualsiasi elemento è modificabile, in ogni momento. Inoltre si può automatizzare il flusso di lavoro per rispondere alle esigenze degli aggiornamenti e delle modifiche. Fireworks si integra con gli altri prodotti Macromedia come Dreamweaver, Flash, FreeHand e Director, nonché altre diffuse applicazioni grafiche ed editor di HTML, per fornire una soluzione Web realmente integrata. È possibile esportare agevolmente gli elementi grafici di Fireworks con codice personalizzato per l editor HTML in uso e JavaScript. Requisiti di sistema Prima di installare Fireworks, accertarsi che il computer soddisfi i seguenti requisiti hardware e software. Per Microsoft Windows Processore Intel Pentium II a 300 MHz Windows 98 SE, ME, NT 4 (con Service Pack 6), 2000 o XP 64 MB di RAM (consigliati 128 MB) più 80 MB di spazio disponibile su disco Risoluzione 800 x 600 pixel, monitor con 256 colori o migliore Adobe Type Manager Versione 4 o versione successiva per l uso dei caratteri Type 1 Unità CD-ROM Per Macintosh Processore Power Macintosh G3, con OS 9.1 o versione successiva o OS X versione 10.1 o versione successiva 64 MB di RAM (consigliati 128 MB) più 80 MB di spazio disponibile su disco Risoluzione 800 x 600 pixel, monitor con 256 colori o migliore Adobe Type Manager 4 o versione successiva per l uso dei caratteri Type 1 (solo OS 9.x) Unità CD-ROM 5

6 Installazione di Fireworks Leggere il documento Leggimi nel CD-ROM di Fireworks per mettersi al corrente sulle informazioni e istruzioni più recenti. Per installare Fireworks: 1 Inserire il CD-ROM di Fireworks nell unità CD-ROM del computer. 2 Eseguire una delle seguenti procedure: In Windows, il programma di installazione di Fireworks si avvia in genere automaticamente. In caso contrario, scegliere Start > Esegui. Fare clic su Sfoglia e scegliere il file Setup.exe sul CD di Fireworks. Fare clic su OK nella finestra di dialogo Esegui. In ambiente Macintosh, fare doppio clic sull icona del programma di installazione di Fireworks. 3 Seguire le istruzioni a video. Il programma di installazione richiederà di immettere le informazioni necessarie. 4 Se richiesto, riavviare il computer. Esecuzione di Fireworks su sistemi connessi in rete Macromedia utilizza la funzione di rilevamento delle licenze di rete per impedire l esecuzione di copie di Fireworks con lo stesso numero di serie supiù sistemi collegati in rete locale. Se si tenta di eseguire Fireworks quando un numero di utenti maggiore di quello consentito dalla licenza sta eseguendo Fireworks sulla stessa rete, si riceverà un messaggio che informa sulla limitazione della licenza. Se si ritiene che tale messaggio sia stato ricevuto per errore, oppure si desidera richiedere licenze supplementari per il prodotto, contattare l assistenza tecnica Macromedia all indirizzo Visualizzazione dei file installati con Fireworks A un certo punto può risultare necessario visualizzare o accedere ai file installati con Fireworks. Durante l installazione, Fireworks colloca i file in varie ubicazioni del sistema. È importante capire dove tali file risiedono e il motivo. Per ulteriori informazioni, consultare la guida in linea di Fireworks selezionando Guida > Uso di Fireworks. In Mac OS X, scegliere Guida > Guida Fireworks). Gli utenti Macintosh devono prestare particolare attenzione al nuovo formato adottato da Fireworks per memorizzare l applicazione e i relativi file di configurazione predefiniti. Per ulteriori informazioni, consultare la Guida Fireworks. Apprendimento di Fireworks Per imparare a usare Fireworks sono disponibili numerose risorse, fra cui il manuale rapido su supporto cartaceo (Guida introduttiva di Fireworks MX), un sistema di guida in linea che può essere lanciato dall applicazione, una versione PDF della documentazione completa di Fireworks e diverse fonti di informazione basate sul Web. La guida in linea di Fireworks è disponibile quando l applicazione è attiva e contiene la documentazione completa del programma. Per aprire la guida in linea di Fireworks, scegliere Guida > Uso di Fireworks. In Mac OS X, scegliere Guida > Guida Fireworks. 6 Introduzione

7 Le esercitazioni di Fireworks sono un introduzione interattiva alle funzionalità principali di Fireworks, che richiedono circa un ora di tempo ciascuna. Includono le operazioni maggiormente utilizzate di Fireworks come l uso di strumenti di disegno e di editing, l ottimizzazione delle immagini e la creazione di elementi interattivi come rollover e barre di navigazione. Nel pannello Risposte è possibile trovare in un unica ubicazione le esercitazioni, le Note tecniche e le informazioni più aggiornate su Fireworks. Il pannello Risposte è dinamico: con un semplice clic su un pulsante è possibile visualizzare gli aggiornamenti e le informazioni più recenti su Fireworks direttamente da Macromedia. L applicazione Fireworks contiene molte finestre di dialogo e descrizioni comandi progettate specificamente per assistere l utente nell utilizzo del programma. Le descrizioni comandi vengono visualizzate quando si arresta il puntatore su uno degli elementi dell interfaccia utente. Guida introduttiva di Fireworks MX è composto da una serie di capitoli che riguardano le funzioni base di Fireworks. Il PDF Uso di Fireworks MX è un documento contenente la documentazione completa di Fireworks, che può essere stampato e permette la ricerca. Il PDF è disponibile sul CD di installazione e sul sito Web Macromedia all indirizzo Il sito Web Macromedia viene aggiornato regolarmente per rendere sempre disponibili le ultime informazioni su Fireworks, oltre a consigli di utenti esperti, argomenti avanzati, esempi, suggerimenti e aggiornamenti. Entrare nel sito Web Macromedia per reperire notizie su Fireworks e su come sfruttare al massimo le funzionalità offerte dal programma all indirizzo Il gruppo di discussione su Fireworks consente di scambiare informazioni con gli utenti di Fireworks, i rappresentanti dell assistenza tecnica e il team di sviluppo di Fireworks. Avvalersi di un lettore di newsgroup e accedere all indirizzo news://forums.macromedia.com/ macromedia.fireworks. Il documento Extending Fireworks MX comprende informazioni su come scrivere codice JavaScript per automatizzare le operazioni in Fireworks. È possibile controllare ogni comando o impostazione di Fireworks con speciali comandi JavaScript che Fireworks è in grado di interpretare. Una versione PDF di Extending Fireworks MX è disponibile sul CD e sul sito Web Macromedia all indirizzo 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 sugli aggiornamenti ai prodotti e sulle novità visualizzate presso i siti e www-euro.macromedia.com. Per registrare la propria copia di Fireworks, eseguire una delle seguenti procedure: Scegliere Guida > Registrazione in linea e compilare il modulo elettronico. Scegliere Guida > Stampa registrazione, stampare il modulo e inviarlo all indirizzo indicato su di esso. Guida introduttiva 7

8 Nuove funzionalità di Fireworks Grazie alle nuove funzionalità presenti, Fireworks MX risulta sempre più un applicazione 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 un interfaccia utente semplificata, pulsanti e menu a comparsa più potenti e strumenti bitmap e vettoriali intuitivi. L integrazione con altre applicazioni Macromedia, oltre che con applicazioni di terze parti, consente di riportare agevolmente in Fireworks file di formati diversi e di inviarli facilmente ad altre applicazioni mentre si lavora. Un altra novità di Fireworks è rappresentata dalla capacità di creazione di comandi JavaScript con Macromedia Flash, che appaiono in Fireworks MX come pannelli o finestre di dialogo. Funzionalità di facile utilizzo Grazie ad un ambiente semplice e intuitivo, composto da una finestra di ispezione Proprietà e da strumenti le cui funzioni corrispondono esattamente alle esigenze dei professionisti, Fireworks MX risulta un applicazione semplice e rapida da imparare e da utilizzare. Fireworks MX si presenta con un aspetto rinnovato, meglio organizzato e più coerente con le altre applicazioni di Macromedia MX Studio. Il miglioramento della gestione pannelli comprende la capacità di collocare i pannelli in gruppi e quindi di comprimere i gruppi in modo che sia visibile solo la barra del titolo del gruppo di pannelli, finché sarà necessario utilizzare i pannelli. È possibile agganciare il gruppo di pannelli a un apposita area di aggancio per organizzare lo spazio di lavoro, oppure trascinare gruppi o singoli pannelli da un punto all altro dello spazio di lavoro. Per ulteriori informazioni, consultare Organizzazione dei gruppi di pannelli e dei pannelli a pagina 86. La finestra di ispezione Proprietà è un pannello dinamico contenente numerose opzioni che variano a seconda delle operazioni eseguite. Aprendo un documento, la finestra di ispezione Proprietà visualizza le proprietà del documento in oggetto, come ad esempio il colore e le dimensioni dell area di lavoro. Scegliendo uno strumento del pannello Strumenti, la finestra di ispezione Proprietà visualizza le opzioni dello strumento. Selezionando un oggetto vettoriale, essa visualizza informazioni di tratto e riempimento. È possibile modificare tali opzioni ed altre, tra cui gli effetti dal vivo, le modalità di fusione e l opacità, direttamente dalla finestra di ispezione Proprietà, anziché dover fare clic per aprire o attivare un pannello dopo l altro. La finestra di ispezione Proprietà, già conosciuta dagli utenti di Macromedia Dreamweaver e Flash, riduce il numero di pannelli presenti nello spazio di lavoro. Per ulteriori informazioni, consultare Uso della finestra di ispezione Proprietà a pagina 84. La modifica bitmap e vettoriale indipendente dalla modalità elimina la necessità di passare costantemente tra modalità bitmap e modalità vettoriale. Scegliendo uno strumento o selezionando un tipo di oggetto, il programma stabilisce automaticamente se verranno creati e modificati vettori, bitmap o testo. I miglioramenti della modifica bitmap consentono di usufruire di funzionalità intuitive per la creazione di immagini bitmap mediante le funzioni di taglio o di copia e incolla, per lo spostamento di selezioni perimetro tra le bitmap e per la messa a punto delle immagini con un nuovo gruppo di strumenti di ritocco. Inoltre, i tradizionali comandi di selezione sono organizzati in un nuovo menu Selezione. 8 Introduzione

9 Le sezioni del pannello Strumenti, che separano gli strumenti utilizzati per la creazione e la modifica di bitmap, vettori e oggetti per il Web, offrono suggerimenti per la scelta intuitiva dello strumento più appropriato e per ottenere risultati creativi senza imprevisti. Altri strumenti e funzioni sono raggruppati nelle categorie Seleziona, Colori e Visualizza. Per ulteriori informazioni, consultare Uso del pannello Strumenti a pagina 83. Il pulsante Esportazione rapida consente di visualizzare pratiche opzioni per l esportazione in una serie di formati di file o stili HTML, oppure per lanciare altri prodotti Macromedia dalla finestra del documento, eliminando i tempi di configurazione e semplificando le operazioni. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Il testo a video consente di integrare visivamente testo ed elementi grafici senza dover utilizzare l Editor di testo. È sufficiente selezionare lo strumento Testo, fare clic sull area di lavoro e iniziare a digitare. Nella finestra di ispezione Proprietà, è possibile impostare gli attributi del testo per lo strumento Testo prima di iniziare a digitare, oppure evidenziare il testo esistente e formattarlo. Fireworks MX dispone di una serie di nuovi comandi di testo e paragrafo che consentono di formattare il testo. Per ulteriori informazioni, consultare la guida in linea di Fireworks. Lo zoom variabile permette di trascinare lo strumento Ingrandimento in modo da determinare la precisa entità dell ingrandimento. Dopo aver trascinato lo strumento per ingrandire il documento, l entità dell ingrandimento viene visualizzata nella casella di testo Imposta ingrandimento nella parte inferiore del documento. La compatibilità con Windows XP e Macintosh OS X sfrutta i sistemi operativi più recenti. Fireworks MX è specificamente ottimizzato per supportare tutti i miglioramenti dell interfaccia utente OS X. L esportazione XHTML consente di esportare, aggiornare e reimportare XHTML con gli stessi stili offerti da Fireworks per HTML. È possibile gestire documenti legacy che sono stati convertiti in XHTML in Dreamweaver MX. Il pannello Risposte, una nuova funzione di Fireworks MX, Dreamweaver MX e Flash MX, è un link aggiornabile in base al contenuto del Web, collocato nello spazio di lavoro di Fireworks per una maggiore praticità. È possibile fare clic sul pulsante Aggiorna quando si è in linea e scaricare le più recenti informazioni di riferimento da Macromedia, oppure ricercare all interno di database in linea documentazioni come Note tecniche. Il controllo ortografico permette di ricercare all interno di ogni blocco di testo del documento parole con ortografia errata. Se viene individuata una parola non riconosciuta, il programma propone suggerimenti per correggerla o permette di aggiungerla al proprio dizionario personale. La memorizzazione nella cache dei caratteri di più piattaforme agevola la condivisione di file tra gruppi di lavoro e client, senza doversi preoccupare dei problemi derivanti dall uso di caratteri di vari sistemi. Fireworks mantiene inalterato l aspetto di tutto il testo di un documento nei sistemi in cui non sono installati i caratteri all interno del documento. Funzionalità potenziate Fireworks MX dispone di una serie di nuove e potenti funzioni di creatività e automatizzazione di grande utilità sia per i nuovi Web designer che per gli sviluppatori più esperti. Grazie a tali funzioni, Fireworks risulta essenziale per il lavoro del designer del Web e dello sviluppatore, dalla fase di concetto alla fase di integrazione. La procedura guidata per la grafica basata sui dati consente di assegnare variabili a testo, immagini, punti attivi e porzioni e quindi di generare documenti multipli basati sull originale, ciascuno con informazioni esclusive ricavate da un file delimitato da una virgola o da un file di database XML. Guida introduttiva 9

10 La funzione di creazione di barre di navigazione nel menu Comandi permette di automatizzare il processo di creazione rapida delle barre di navigazione con l uso di pratici simboli di pulsanti di Fireworks MX. È possibile selezionare un esempio di simbolo di pulsante e quindi scegliere il numero di copie da realizzare, l orientamento verticale o orizzontale e la spaziatura, quindi assegnare etichette di pulsanti e indirizzi URL in una finestra di dialogo integrata. I miglioramenti apportati all Editor menu a comparsa hanno permesso di aggiungere un controllo creativo alle nuove e più comuni funzioni di Fireworks 4. Ora è possibile creare un menu a comparsa orizzontale o verticale e determinare le caratteristiche dei margini, la spaziatura e le dimensioni delle celle indipendentemente dalla dimensione del testo. È possibile inoltre impostare il posizionamento dei menu in base all oggetto di innesco, nonché il posizionamento dei sottomenu in base alla voce di menu di innesco o al menu a comparsa principale. Fireworks genera automaticamente il codice JavaScript; i menu esportati sono completamente compatibili con Dreamweaver MX. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). La modifica dei simboli dei pulsanti a livello di istanza consente di creare un simbolo di pulsante e quindi di differenziare facilmente tra un pulsante e l altro con l inserimento di testo esclusivo, URL e obiettivi mediante la finestra di ispezione Proprietà. Allo stesso tempo, è possibile modificare altre caratteristiche grafiche a livello di simbolo e fare in modo che le modifiche vengano apportate a tutte le istanze di pulsanti senza compromettere le proprietà a livello istanza. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Flusso di lavoro aperto È importante non essere vincolati dal flusso di lavoro di altri utenti. Con Fireworks MX, è possibile integrare la produzione grafica nel processo di sviluppo grazie a un flusso di lavoro aperto ed efficiente, che riconosce e supporta i formati di file, le applicazioni e gli standard utilizzati. I comandi JavaScript con interfaccia SWF fanno sì che la creazione dei comandi JavaScript raggiunga livelli più elevati. Gli sviluppatori possono creare ed eseguire comandi complessi in modo da estendere ed automatizzare Fireworks MX combinando l API di estensibilità JavaScript di Fireworks con interfacce sviluppate in Flash MX utilizzando componenti e ActionScript. Per ulteriori informazioni, consultare Extending Fireworks MX, disponibile in formato PDF sul CD di installazione e all indirizzo Il supporto Macromedia Exchange indica che è possibile scaricare comandi creati dagli utenti da Exchange, anche se non si è interessati alla creazione di comandi JavaScript. I comandi appaiono nello spazio di lavoro di Fireworks MX come pannelli o finestre di dialogo di semplice utilizzo. Fireworks MX viene fornito con numerosi comandi creati dall utente nel menu Comandi e un pannello Allineamento creato dall utente nel menu Finestra. I comandi di layout delle tabella di porzioni consentono di definire e ottimizzare i layout delle tabelle di porzioni trascinando le guide porzione. Fireworks ridimensiona automaticamente le porzioni collegate, aggiungendo ed eliminando porzioni a seconda delle necessità. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). La funzione Ricostituisci tabella crea immediatamente un nuovo file sorgente PNG di Fireworks ogni volta che si orienta il puntatore su un qualsiasi file HTML contenente tabelle con porzioni di immagini. I comportamenti di Macromedia Fireworks e Dreamweaver come i rollover immagini e i menu a comparsa vengono importati e collegati alle porzioni appropriate. 10 Introduzione

11 Questa funzione risulta di particolare utilità quando si lavora su progetti di siti Web già esistenti e i soli file disponibili sono le pagine HTML disponibili online. È possibile portare i file HTML in Fireworks e creare file sorgente PNG da essi. Per ulteriori informazioni, consultare Creazione di file PNG di Fireworks da file HTML a pagina 77. La piena compatibilità e modificabilità del testo di Photoshop 6 permette di aprire un file di Photoshop 6 o 7 lasciando intatto il testo modificabile. In tal modo è possibile modificare e quindi riesportare gli elementi grafici nel formato Photoshop, pur mantenendo l aspetto corretto del testo e la sua piena modificabilità. Per ulteriori informazioni, consultare Informazioni sull importazione di testo da Photoshop a pagina 137. La piena compatibilità con Microsoft FrontPage è disponibile con un semplice clic sul pulsante Esportazione rapida. Le tabelle di avvio e modifica intervengono sul file originale in Fireworks: le tabelle vengono aggiornate in FrontPage senza che le modifiche di codici apportate in FrontPage vadano perdute. Per ulteriori informazioni, consultare Esportazione dell HTML di Fireworks a FrontPage a pagina 134. L integrazione di Macromedia Sitespring consente di introdurre nello spazio di lavoro di Fireworks MX le migliori pratiche di produzione e gestione dei clienti. È sufficiente scegliere Finestra > Sitespring per aprire la finestra Sitespring. Per ulteriori informazioni, consultare la documentazione Sitespring. Guida introduttiva 11

12 12 Introduzione

13 CAPITOLO 1 Esercitazione di progettazione grafica di base Questa esercitazione guida l utente nell applicazione delle funzioni base della progettazione grafica con Macromedia Fireworks MX. Con l uso dell applicazione leader nel settore della grafica Web l utente acquista esperienza pratica e apprende i concetti base di progettazione grafica. Se si è già in possesso di una certa esperienza con la progettazione grafica di Fireworks, è possibile passare al capitolo Esercitazione di progettazione grafica Web a pagina 41, attraverso il quale si apprenderà a disegnare pagine Web con Fireworks. Argomenti trattati L esercitazione insegna, in meno di un ora, ad eseguire le operazioni necessarie per creare con Fireworks un messaggio pubblicitario per il noleggio di auto d epoca. L utente apprenderà ad eseguire le seguenti operazioni: Copia del file Tutorials Visualizzazione del file dell esercitazione nella sua forma completa Creazione e salvataggio di un nuovo documento Introduzione all ambiente di lavoro di Fireworks Creazione e modifica di oggetti vettoriali Importazione di una bitmap e selezione di pixel Aggiunta e modifica di effetti dal vivo Operazioni con livelli e oggetti Creazione e modifica di una maschera Creazione e modifica di un testo Esportazione del documento È bene sapere che Pur essendo destinata ai nuovi utenti di Fireworks, l esercitazione tratta numerose nuove funzioni del programma quindi può essere di vantaggio anche agli utenti già esperti di Fireworks. Per seguire questa esercitazione non occorre essere graphic designer professionisti, tuttavia è necessario essere in possesso delle capacità di base nell uso del computer e delle comuni applicazioni desktop. Con questo si intende essere in grado di eseguire ricerche di file e cartelle nel disco fisso. 13

14 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 dell applicazione Fireworks sul disco fisso del computer. Nota: Se la cartella dell applicazione Fireworks non è visualizzata è possibile che l utente abbia accesso limitato ai file sul sistema. I file necessari per eseguire questa esercitazione possono essere scaricati dal sito Fireworks Support Center all indirizzo 2 Trascinare sul desktop una copia della cartella Tutorials. Visualizzazione del file dell esercitazione nella sua forma completa Visualizzare il file dell esercitazione nella sua forma completa per osservare l aspetto che avrà il progetto una volta ultimato. 1 Aprire il browser Web. 2 Portarsi sulla cartella dell applicazione Fireworks copiata sul deskktop e selezionare Tutorial1/Complete. Nota: Alcune versioni di Microsoft Windows non visualizzano, per impostazione predefinita, le estensioni per alcuni tipi di file comuni. Se questa impostazione non è stata modificata, l estensione dei file nella cartella Complete non verrà visualizzata. Quando si opera in grafica Web, è consigliabile poter visualizzare l estensione dei file. Per informazioni su come ripristinare la visualizzazione dell estensione dei file consultare la Guida di Windows. 3 Selezionare il file final.jpg e trascinarlo sulla finestra aperta del browser. Nel corso di questa esercitazione si utilizzerà Fireworks per disegnare ed esportare una copia del messaggio pubblicitario per il noleggio di auto d epoca. Nota: La cartella Complete comprende anche il documento Fireworks dal quale questo file JPEG file è stato generato. Per visualizzare il documento, fare doppio clic su final.png. Creazione e salvataggio di un nuovo 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

15 2 Immettere 480 per la larghezza e 214 per l altezza. Controllare che entrambe le misure siano espresse in pixel e che il colore dell area di lavoro sia bianco, quindi premere OK. Si aprirà una finestra documento, nella quale la barra del titolo riporta Senza titolo-1.png (Windows) o Senza titolo-1 (Macintosh). 3 Se la finestra del documento non è visualizzata nella dimensione massima, vale a dire se la finestra non ricopre totalmente lo schermo, ingrandire la finestra facendo clic sul pulsante di ingrandimento (Windows) o sulla casella zoom (Macintosh) nella parte superiore della finestra documento. In questo modo si disporrà di un ampio spazio sul quale lavorare. 4 Scegliere File > Salva con nome. Si aprirà la finestra di dialogo Salva con nome (Windows) oppure la finestra Salva (Macintosh). 5 Portarsi sulla cartella Tutorials/Tutorial1 sul proprio desktop. 6 Denominare il file vintage. 7 Se non ancora selezionata, scegliere l opzione Aggiungi estensione nome file (solo Macintosh). 8 Fare clic su Salva. La barra del titolo visualizza il nuovo nome file con estensione PNG. PNG è il formato nativo di Fireworks. Il file PNG sarà il file sorgente, dove verranno eseguite tutte le operazioni con Fireworks. Alla fine di questa esercitazione, si apprenderà come esportare il documento in un altro formato per l uso sul Web. Durante la sessione di esercitazione, si consiglia di salvare il lavoro di frequente, selezionando File > Salva. Nota: Durante l esercitazione, può risultare utile annullare alcune modifiche apportate. Fireworks consente di annullare diverse modifiche eseguite di recente, a seconda del numero di operazioni di annullamento impostato nelle Preferenze. Per annullare l ultima modifica apportata, scegliere Modifica > Annulla. Esercitazione di progettazione grafica di base 15

16 Introduzione all ambiente di lavoro di Fireworks Prima di continuare, esaminare le funzioni dell ambiente di lavoro di Fireworks: Al centro dello schermo si trova la finestra documento. Al centro della finestra documento si trova l area di lavoro. L area di lavoro è il punto in cui vengono visualizzati il documento di Fireworks e i disegni creati. Sulla parte superiore dello schermo si trova la barra del menu. La maggior parte dei comandi di Fireworks sono accessibili dalla barra dei menu. Sul lato sinistro dello schermo si trova il pannello Strumenti. Se il pannello Strumenti non è visualizzato, scegliere Finestra > Strumenti. Il pannello Strumenti contiene gli strumenti per selezionare, creare e modificare gli elementi grafici nonché gli oggetti per il Web. Nella parte inferiore dello schermo si trova la finestra di ispezione Proprietà. Se la finestra di ispezione Proprietà non è visualizzata scegliere Finestra > Proprietà. La finestra di ispezione Proprietà visualizza le proprietà di un oggetto o uno strumento selezionato, modificabili a piacere. Se non sono selezionati oggetti o strumenti, la finestra di ispezione Proprietà visualizza le proprietà del documento. La finestra di ispezione Proprietà visualizza due o quattro righe di proprietà. Se la finestra di ispezione Proprietà è visualizzata a metà, vale a dire se visualizza solo due righe, è possibile fare clic sulla freccia di espansione nell angolo inferiore destro, per vedere tutte le proprietà. Freccia di espansione a metà altezza 16 Capitolo 1

17 Sul lato destro dello schermo sono visualizzati un certo numero di pannelli, come il pannello Livelli o il pannello Ottimizza. Questi e gli altri pannelli possono essere aperti dal menu Finestra. Spostare il puntatore sui vari elementi dell interfaccia. Se il puntatore viene tenuto per alcuni secondi su una voce dell interfaccia, verrà visualizzata la descrizione dell elemento selezionato. Le descrizioni identificano gli strumenti, i menu, i pulsanti e altre funzioni dell interfaccia in tutto il programma. Le descrizioni scompaiono quando il puntatore viene allontanato dagli elementi dell interfaccia che identificano. Più avanti nel corso dell esercitazione si apprenderanno ulteriori informazioni su questi elementi. Creazione e modifica di oggetti 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 nell immagine riportata sotto è un insieme di oggetti vettoriali. Si noti l uniformità dei bordi della foglia anche quando si esegue uno zoom. Al contrario, una immagine bitmap è composta da una griglia di pixel colorati. Le immagini con variazioni complesse di colore, come le fotografie, sono spesso immagini bitmap. Esercitazione di progettazione grafica di base 17

18 La maggior parte delle applicazioni permettono di modificare o le forme vettoriali o le immagini bitmap, mentre Fireworks permette di intervenire su entrambi i tipi di elementi grafici. In questa sezione si opererà con la grafica vettoriale. Creazione di oggetti vettoriali Si procederà ora con la creazione di due degli elementi grafici necessari per il progetto. Per prima cosa si creerà un rettangolo blu che verrà collocato in fondo al documento. Quindi si creerà un rettangolo che racchiuderà come un bordo il contenuto dell area di lavoro. 1 Scegliere lo strumento Rettangolo nella sezione Vettore del pannello Strumenti. 2 Nella finestra di ispezione Proprietà, fare clic sulla casella Colore riempimento. Si apre la finestra a comparsa Colore riempimento. 3 Immettere nella casella di testo nella parte superiore della finestra, quindi premere INVIO. La casella Colore riempimento cambia dal blu scuro al colore scelto. 4 Nella finestra documento, collocare il puntatore sull area di lavoro e trascinare verso il basso a destra per creare un rettangolo. Il rettangolo può essere trascinato in qualsiasi punto dell area di lavoro. Più avanti nel corso dell esercitazione il rettangolo verrà ridimensionato e collocato nella posizione corretta. 18 Capitolo 1

19 5 Quando si rilascia il pulsante del mouse, compare nell area definita un rettangolo blu selezionato. Un oggetto selezionato si riconosce dai punti di angolo evidenziati in blu. La maggior parte degli oggetti sono evidenziati in blu anche intorno ai bordi esterni, ma i rettangoli costituiscono un eccezione. 6 Nell angolo sinistro inferiore della finestra di ispezione Proprietà, digitare 480 nella casella della larghezza e 15 nella casella dell altezza, quindi premere INVIO. Il rettangolo viene ridimensionato alle dimensioni specificate. 7 Scegliere lo strumento Puntatore nella sezione Seleziona del pannello Strumenti. 8 Trascinare il rettangolo in modo che risulti collocato in fondo all area di lavoro, come indicato sotto. Per una collocazione più precisa usare i tasti freccia. 9 Selezionare di nuovo lo strumento Rettangolo e disegnare un secondo rettangolo. Trascinarlo in un punto qualsiasi dell area di lavoro e specificare le dimensioni desiderate. Nella sezione successiva dell esercitazione si modificheranno le proprietà e la posizione del rettangolo. Impostazione delle proprietà di un oggetto In questa sezione dell esercitazione si eseguiranno modifiche sul secondo rettangolo creato, cambiandone la dimensione, la posizione e il colore dalla finestra di ispezione Proprietà. 1 Con il rettangolo ancora selezionato, fare clic sulla casella Colore tratto nella finestra di ispezione Proprietà e digitare CCCCCC come valore del colore. Premere INVIO per applicare la modifica. 2 Impostare Dimensioni punta su 1 trascinando il cursore a comparsa oppure digitando 1 nella casella di testo. Esercitazione di progettazione grafica di base 19

20 3 Fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà e fare clic sul pulsante Trasparente. 4 Nella finestra di ispezione Proprietà, immettere i seguenti valori nelle caselle dell altezza, della larghezza, e delle coordinate. Quindi fare clic all esterno della finestra di ispezione Proprietà per applicare le modifiche. Larghezza: 480 Altezza: 215 X: 0 Y: 0 Il rettangolo diventa un bordo grigio che circonda l area di lavoro. Se il sistema usa il colore grigio come colore per lo sfondo della finestra, potrebbe risultare difficile vedere chiaramente il rettangolo a questo punto della procedura. Tuttavia, anche se non chiaramente visibile, il rettangolo è presente. 5 Selezionare lo strumento Puntatore e fare clic in un punto qualunque fuori dal rettangolo per deselezionarlo. Le proprietà nella finestra di ispezione Proprietà risultano modificate. Poichè non vi sono oggetti selezionati, la finestra mostra le proprietà del documento. Importazione di una bitmap e selezione di 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 dell immagine di una auto d epoca. Per prima cosa occorre importare l immagine. 1 Scegliere File > Importa e portarsi sulla cartella Esercitazioni del computer. Portarsi sulla cartella Tutorial1/Assets. 2 Selezionare car.jpg e fare clic su Apri. 20 Capitolo 1

21 3 Allineare il puntatore di inserzione all angolo superiore sinistro dell area di lavoro e fare clic, come mostrato nell illustrazione seguente. L immagine compare selezionata sull area di lavoro. 4 Fare clic all esterno dell immagine selezionata per deselezionarla. Creazione di una selezione di pixel Si procederà ora a selezionare i pixel che compongono l automobile nell immagine importata e a copiarli e incollarli come un nuovo oggetto. 1 Scegliere lo strumento Ingrandisci nella sezione Visualizza del pannello Strumenti. Strumento Ingrandisci 2 Fare clic sull immagine. La vista viene ingrandita al 150%. L ingrandimento della vista consente di vedere meglio quanto selezionato e consente un controllo più preciso sulla selezione. 3 Fare clic e tenere premuto il pulsante del mouse sullo strumento Lazo nella sezione Bitmap del pannello Strumenti. Scegliere lo strumento Lazo poligonale dal menu a comparsa visualizzato. Lo strumento Lazo poligonale consente di disegnare una selezione intorno ai pixel usando una serie di linee diritte. Usare lo strumento Lazo poligonale per selezionare i pixel che compongono l immagine dell auto. 4 Nella finestra di ispezione Proprietà, impostare l opzione Bordo su Antialiasing. Esercitazione di progettazione grafica di base 21

22 5 Fare clic con lo strumento Lazo poligonale sul bordo superiore dell auto, quindi fare clic ripetutamente attorno al bordo dell auto per continuare la selezione. 6 Completare la selezione spostando il puntatore sul punto in cui si è iniziata la selezione. Di fianco al puntatore Lazo poligonale compare un quadratino grigio che indica che la selezione sta per essere completata. Fare clic per completare la selezione. Un bordo perimetrale compare attorno ai pixel selezionati. 7 Scegliere Modifica > Copia. La selezione viene copiata negli Appunti. 8 Scegliere Modifica > Incolla. L immagine dell auto viene incollata nel documento come nuovo oggetto bitmap. 9 Scegliere lo strumento Puntatore e fare doppio clic in qualunque punto esterno alla bitmap per deselezionarla. 10 Fare clic sul menu a comparsa Imposta ingrandimento nella parte inferiore della finestra documento e riportare la vista al 100%. 22 Capitolo 1

23 Aggiunta e modifica di effetti dal vivo Si procederà ora ad applicare effetti dal vivo all immagine bitmap originale. Si modificherà la tonalità e la saturazione dell immagine e si applicherà una sfumatura. 1 Fare clic in un punto qualunque dell immagine. (Prestare attenzione a non fare clic sull auto). 2 Nella finestra di ispezione Proprietà, fare clic sul pulsante Aggiungi effetti (il pulsante con il segno più (+)). 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. 4 Scegliere l opzione Colorizza e fare clic su OK. L immagine sull area di lavoro si colora e l effetto viene aggiunto all elenco Effetti dal vivo nella finestra di ispezione Proprietà. Gli effetti dal vivo possono essere aggiunti, modificati o eliminati dall elenco. Esercitazione di progettazione grafica di base 23

24 5 Fare doppio clic sull effetto Tonalità/Saturazione per modificarlo. Suggerimento: In alternativa, è possibile fare clic sul pulsante Info di fianco all effetto. Si aprirà di nuovo la finestra di dialogo Tonalità/Saturazione. 6 Cambiare la tonalità in 25 e la saturazione in 20, quindi fare clic su OK. I livelli di tonalità e saturazione dell immagine cambiano e l immagine si mostra con un colore seppia, come da vecchia fotografia. 7 Fare di nuovo clic sul pulsante Aggiungi effetti per aggiungere un altro effetto dal vivo all elenco. 8 Scegliere Sfocatura > Ulteriore sfocatura dal menu a comparsa Effetti. I pixel della bitmap selezionata diventano sfocati e il nuovo effetto viene aggiunto all elenco Effetti dal vivo nella finestra di ispezione Proprietà. Operazioni con livelli e 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 l ordine di impilamento di livelli e di oggetti, nonchè unire bitmap e applicare maschere bitmap. Il pannello Livelli consente inoltre di aggiungere ed eliminare Livelli. In questa parte dell esercitazione si userà il pannello Livelli per unire due immagini bitmap. Quindi si assegnerà un nome agli oggetti del documento. Il pannello Livelli verrà usato anche per modificare l ordine di impilamento degli oggetti. Più avanti nel corso dell esercitazione il pannello Livelli verrà usato per applicare una maschera ad una immagine unita. 24 Capitolo 1

25 Unione di bitmap Dopo aver applicato gli effetti dal vivo all immagine di sfondo, questa verrà unita all immagine dell auto in scala dei grigi per creare una unica bitmap. 1 Se il pannello Livelli è minimizzato o non è visibile, fare clic sulla freccia di espansione oppure scegliere Finestra > Livelli. Freccia di espansione 2 Fare clic sulla miniatura dell immagine dell auto in scala dei grigi nel pannello Livelli. 3 Con l immagine dell auto selezionata, fare clic sull icona del menu a comparsa Opzioni nella parte superiore destra del pannello Livelli. Icona del menu a comparsa Opzioni 4 Scegliere Unisci a sottostante I due oggetti bitmap nel pannello Livelli si uniscono in una sola bitmap. Nella finestra di ispezione Proprietà non sono più presenti effetti nell elenco degli effetti dal vivo. Ciò risulta perché l unione ad un oggetto sottostante combina i pixel di ciascuna bitmap e le rende non modificabili come immagini separate. Gli effetti dal vivo applicati ad un oggetto o ad una bitmap non sono più modificabili dopo aver eseguito l unione ad un altra bitmap sottostante. Esercitazione di progettazione grafica di base 25

26 Denominazione di oggetti È consigliabile definire un nome per gli oggetti per facilitarne l uso e il riconoscimento. Se il documento contiene numerosi oggetti, può risultare complicato gestirlo se gli oggetti non hanno ciascuno un nome esclusivo. A questo punto si provvederà a denominare gli oggetti del documento usando sia il pannello Livelli che la finestra di ispezione Proprietà. 1 Fare doppio clic sul termine Bitmap di fianco alla vista in miniatura nel pannello Livelli. Comparirà una casella di testo. 2 Digitare Classic Car nella casella di testo e premere INVIO. Il nuovo nome viene applicato all oggetto bitmap. 3 Nella finestra del documento, selezionare il rettangolo grigio che contorna il documento. Se non è facilmente identificabile nell area di lavoro, selezionarlo nel pannello Livelli. Ora si denominerà l oggetto usando la finestra di ispezione Proprietà. 4 Digitare Border nella casella di testo Nome oggetto della finestra di ispezione Proprietà e premere INVIO. Il nome digitato viene visualizzato anche di fianco alla miniatura dell oggetto nel pannello Livelli. 5 Immettere un nome per il restante oggetto rettangolo tramite il pannello Livelli o la finestra di ispezione Proprietà. Ê possibile usare un nome qualunque ma è consigliabile usare un nome significativo, tale da poter in futuro identificare e gestire facilmente l oggetto nel documento. 26 Capitolo 1

27 Modifica dell ordine di impilamento degli oggetti L immagine bitmap unita si sovrappone all oggetto bordo e al rettangolo blu. Per poter usare il pannello Livelli e cambiare l ordine di impilamento degli oggetti nel documento, il rettangolo che costituisce il bordo e il rettangolo blu devono trovarsi al livello superiore. 1 Fare clic sulla miniatura del rettangolo blu nel pannello Livelli per selezionarlo. 2 Trascinare sul livello 1, al di sopra della miniatura dell auto d epoca (Classic Car). Nota: Il livello superiore nel pannello livelli è sempre il livello Web. Ulteriori informazioni sul livello Web sono contenute in Esercitazione di progettazione grafica di base a pagina 13. Mentre si trascina la miniatura, il puntatore cambia per indicare che si sta trascinando un oggetto (solo Windows). Una linea scura nel pannello Livelli indica il punto in cui l oggetto verrà rilasciato quando si rilascia il pulsante del mouse. 3 Rilasciare il pulsante del mouse. Il rettangolo blu viene rilasciato sopra l oggetto bitmap nel pannello Livelli. Anche l ordine di impilamento degli oggetti nell area di lavoro cambia. ll rettangolo blu si trova ora sovrapposto all oggetto bitmap e all oggetto bordo. 4 Per avere l oggetto bordo al livello superiore, selezionare la sua miniatura e trascinarla nella parte superiore del pannello Livelli, sopra il rettangolo blu. Esercitazione di progettazione grafica di base 27

28 Creazione e modifica di una maschera Dopo aver eseguito varie modifiche all immagine dell auto d epoca, si eseguirà l ultima procedura per conferirle gradatamente l aspetto di trasparenza. In Fireworks è possibile applicare due tipi di maschere: maschere vettoriali e maschere bitmap. In questa esercitazione, si applicherà una semplice maschera bitrmap all immagine dell auto. L immagine verrà modificata aggiungendole un riempimento sfumato. A seconda del valore della scala dei grigi, i pixel della maschera faranno si che l immagine dell auto sia visibile o nascosta. Applicazione di una maschera Per prima cosa si applica una maschera bitmap bianca e vuota all immagine dell auto. Una maschera bianca mostra l oggetto o l immagine selezionata, mentre una maschera di pixel neri li nasconde. Alla maschera verrà inoltre applicato colore per far sì che l auto appaia sfumata nello sfondo. 1 Selezionare l immagine bitmap con lo strumento Puntatore. 2 Fare clic sul pulsante Aggiungi maschera in fondo al pannello Livelli. All immagine selezionata viene aggiunta una maschera trasparente vuota. Osservando la miniatura nel pannello Livelli si può capire che è stata aggiunta la maschera. L evidenziazione in giallo della miniatura indica che la maschera è selezionata. Miniatura della maschera Oggetto maschera Modifica di una maschera Si conferisce ora l aspetto trasparenza alla maschera, aggiungendo un riempimento sfumato. 1 Con la miniatura della maschera selezionata nel pannello Livelli, fare clic e tenere premuto il pulsante del mouse sullo strumento Secchio di vernice nella sezione Bitmap del pannello Strumenti. Scegliere lo strumento Sfumato dal menu a comparsa. 28 Capitolo 1

29 2 Fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà. Si apre la finestra a comparsa Modifica sfumatura. 3 Scegliere Bianco, Nero in fondo al menu a comparsa Preimpostazione. La gamma dei colori e dei campioni cambia riflettendo la nuova impostazione. I campioni di colore che si trovano sotto la gamma consentono di modificare i colori nella sfumatura. Gamma colori Campioni colore 4 Trascinare per circa un 1/4 del percorso verso destra il campione di colore di sinistra (bianco), per regolare la sfumatura. 5 Fare clic all esterno della finestra a comparsa Modifica sfumatura per chiuderla. 6 Nell area di lavoro, trascinare il puntatore Sfumatura attraverso l immagine bitmap, come mostrato nella illustrazione seguente. Mentre si trascina compare a schermo un segnale visivo che consente di definire l angolo e la distanza alla quale viene applicata la sfumatura. 7 Rilasciare il pulsante del mouse. La maschera è stata modificata con il riempimento sfumato creato. La maschera modifica l immagine dell auto fornendole un aspetto di trasparenza. La miniatura della maschera nel pannello Livelli visualizza il riempimento sfumato applicato. Esercitazione di progettazione grafica di base 29

30 8 Scegliere lo strumento Puntatore e fare clic sulla miniatura della maschera nel pannello Livelli. La finestra di ispezione Proprietà indica che la maschera è stata applicata con l aspetto scala dei grigi. I pixel più scuri della maschera nascondono l immagine dell auto mentre i pixel chiari la lasciano trasparire. Creazione e modifica di un 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. Carattere Dimensioni Colore riempimento Pulsanti stile Interlinea Scala orizzontale Pulsanti di allineamento 2 Nella finestra di ispezione Proprietà, eseguire quanto segue: Scegliere Times New Roman dal menu a comparsa Carattere. Immettere 85 come dimensione del carattere. Fare clic sulla casella Colore riempimento. Il puntatore si trasforma in un contagocce. Fare clic con il contagocce nel rettangolo blu nell area di lavoro. La finestra a comparsa del colore si chiude e la casella colore riflette il colore scelto. 30 Capitolo 1

31 Controllare che non siano selezionati gli attributi dello stile come Grassetto, Corsivo e Sottolineato. Fare clic sul pulsante di Allineamento a sinistra. 3 Con il puntatore ad I, fare clic una volta al centro dell area di lavoro. Si crea un blocco di testo vuoto. Il circoletto vuoto nell angolo superiore destro del blocco di testo indica che il blocco di testo si dimensiona automaticamente. Un blocco di testo a dimensionamento automatico in Fireworks regola la propria larghezza basandosi sulla linea di testo più lunga del blocco. Indicatore di ridimensionamento automatico 4 Digitare Vintage nel blocco di testo. Il blocco di testo si espande in larghezza man mano che si immette del testo. 5 Fare clic una volta all esterno del blocco di testo per applicare il testo. Il blocco di testo rimane selezionato e lo strumento selezionato è ancora lo strumento Testo. Il circoletto vuoto nel blocco di testo a questo punto non è più visibile. L indicatore è visibile solo quando si sta immettendo o modificando un testo. 6 Scegliere lo strumento Puntatore e trascinare il testo nella posizione indicata nella seguente illustrazione. 7 Fare clic all esterno del blocco di testo per deselezionarlo e scegliere di nuovo lo strumento Testo. 8 Nella finestra di ispezione Proprietà, scegliere Arial come carattere e 12 come dimensione del carattere. Esercitazione di progettazione grafica di base 31

32 9 Fare clic di nuovo nell area di lavoro, in qualche punto sotto il blocco di testo creato e digitare CLASSIC RENTALS in lettere maiuscole. 10 Scegliere lo strumento Puntatore per applicare il testo. Cambiando lo strumento nel pannello Strumenti, i testi vengono applicati e modificati nello stesso modo in cui avviene quando si fa clic all esterno del blocco di testo. Gli stessi risultati si ottengono premendo il tasto Esc. 11 Trascinare il nuovo blocco di testo per collocarlo proprio sotto il blocco di testo Vintage, come indicato nella illustrazione seguente. 12 Fare clic all esterno del blocco di testo per deselezionarlo. Creazione del testo del corpo del messaggio Si proceda a creare ora due blocchi di testo che compongono il corpo del messaggio pubblicitario. 1 Scegliere lo strumento Testo. 2 Questa volta, anzichè fare solo clic nell area di lavoro, trascinare per disegnare un perimetro con il puntatore a I, come mostrato nella illustrazione seguente. Comparirà un blocco di testo. Il quadratino vuoto nell angolo superiore sinistro indica che il blocco di testo ha dimensione fissa definita dal perimetro disegnato. I blocchi di testo a larghezza fissa mantengono la larghezza specificata qualunque sia la lunghezza del testo immesso. La maniglia d angolo ha la funzione di commutazione. Per cambiare la proprietà da ridimensionamento automatico del blocco di testo in lunghezza fissa è necessario fare doppio clic. 32 Capitolo 1

33 3 Immettere il seguente testo senza inserire interruzioni di linea: Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you to any destination. Suggerimento: Se l esercitazione viene eseguita in linea, è possibile copiare e incollare direttamente il testo nel blocco di testo di Fireworks. Il testo scorre all interno del blocco di testo creato. Il blocco di testo incrementa in senso verticale ma non in senso orizzontale. 4 Scegliere lo strumento Puntatore e fare clic all esterno del blocco di testo per deselezionalo. Scegliere di nuovo lo strumento Testo. 5 Nella finestra di ispezione Proprietà, fare clic sulla casella Colore riempimento e scegliere bianco come colore del testo. 6 Fare clic nell angolo inferiore sinistro dell area di lavoro. Compare un nuovo blocco di testo in cima al rettangolo blu. 7 Digitare il seguente testo in lettere maiuscole senza interruzioni di linea: SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROADSTER Suggerimento: Se l esercitazione viene eseguita in linea è possibile copiare e incollare direttamente il testo sopra. 8 Scegliere lo strumento Puntatore e riposizionare il blocco di testo come mostrato sotto: Qualunque testo creato in Fireworks può essere modificato come in un normale editor di testi. Per modificare un testo, fare doppio clic su un blocco di testo con lo strumento Puntatore, evidenziare il testo che si desidera modificare e digitare il nuovo testo. Oppure fare clic con il puntatore a I in un punto qualunque del blocco di testo, per aggiungere nuovo testo. Esercitazione di progettazione grafica di base 33

34 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. 2 Nella finestra di ispezione Proprietà, eseguire quanto segue: Se non ancora selezionato, scegliere Antialiasing attenuato dal menu a comparsa Livello antialiasing. L antialiasing attenua i bordi del testo in modo da rendere i caratteri più chiari e leggibili. In generale, i caratteri serif come Times New Roman impostati con l opzione Antialiasng attenuato appaiono migliori se la dimensione è maggiore di 45 punti. Allo stesso modo i caratteri sans serif come Arial impostati con Antialiasing attenuato appaiono migliori se la loro dimensione è superiore a 32 punti. Suggerimento: Il termine serif si riferisce alle sottili linee (a cui si fa spesso riferimento come piedi ) fissate ai caratteri di testo di tipi di caratteri come Times New Roman. Arial è considerato un carattere sans serif perché i suoi caratteri di testo non contengono serif. Impostare l opzione Scala orizzontale nella finestra di ispezione Proprietà su 89% e premere INVIO. I caratteri nel blocco di testo Vintage si assottigliano. L opzione Scala orizzontale allunga o restringe orizzontalmente i caratteri nel testo selezionato. L impostazione predefinita è 100%. Qualunque impostazione superiore allunga il testo in orizzontale, mentre le impostazioni inferiori ne accorciano la lunghezza. 3 Trascinare il blocco di testo Vintage in modo da posizionarlo come illustrato nella figura seguente. 4 Selezionare il blocco di testo Classic Rentals. 5 Nella finestra di ispezione Proprietà, eseguire quanto segue: Fare clic sulla casella Colore riempimento, immettere FF6600 per il valore del colore e premere INVIO. 34 Capitolo 1

35 Fare clic sul pulsante Grassetto. Scegliere Antialiasing netto dal menu a comparsa Livello antialiasing. In generale i caratteri sans serif come Arial impostati con Antialiasing netto appaiono migliori se la loro dimensione è compresa tra 12 e 18 punti. Allo stesso modo i caratteri serif impostati con Antialiasing netto appaiono migliori se la loro dimensione è compresa tra 24 e 32 punti. 6 Trascinare il blocco di testo per riposizionarlo come indicato sotto. 7 Selezionare il blocco di testo Indulge. 8 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 l opzione Scala orizzontale all 89%. Impostare l opzione Interlinea al 150% e premere INVIO. Interlinea imposta lo spazio tra le linee di testo. L interlinea normale per il testo è 100%. I valori superiori al 100% aumentano lo spazio tra le linee, i valori inferiori lo diminuiscono. 9 Trascinare una delle maniglie d angolo del blocco di testo per ridimensionare il blocco, in modo che il testo scorra come mostrato sotto. Se necessario, trascinare l intero blocco di testo. Esercitazione di progettazione grafica di base 35

36 10 Selezionare il blocco di testo in fondo al documento. 11 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 l opzione Scala orizzontale a 89% e premere INVIO. 12 Se necessario riposizionare il blocco di testo. Aggiunta di un ombra In Fireworks è possibile applicare Effetti dal vivo anche ai testi. Si provvederà ora ad aggiungere un ombra al testo Vintage usando i comandi Effetti dal vivo nella finestra di ispezione Proprietà. 1 Selezionare il blocco di testo Vintage. 2 Fare clic sul pulsante Aggiungi effetti nella finestra di ispezione Proprietà. Scegliere Ombra e luce > Ombra, dal menu a comparsa Effetti. Le opzioni disponibili per il nuovo effetto appaiono in un menu a comparsa. 3 Immettere 5 per la Distanza e 60% per Opacità. Fare clic all esterno della finestra a comparsa per chiuderla. Un effetto ombra viene aggiunto al blocco di testo Vintage. 4 Fare clic in un area vuota della finestra del documento per deselezionare il blocco di testo. Esportazione del documento Ê stato creato un oggetto vettoriale, ne sono state modificate le proprietà quindi è stata importata una immagine bitmap, sono state apportate modifiche ai pixel, creato e formattato un testo. Si è ora pronti per ottimizzare ed esportare il documento. Ottimizzazione dell immagine grafica Prima di esportare un documento da Fireworks, si raccomanda di ottimizzarlo. L ottimizzazione assicura l esportazione dell immagine grafica con il massimo equilibrio di compressione e qualità. 1 Se non ancora aperto, eseguire una delle seguenti procedure per aprire il pannello Ottimizza: Scegliere Finestra > Ottimizza. Se il pannello è minimizzato a destra dello schermo, fare clic sulla freccia di espansione per visualizzare il pannello intero. 36 Capitolo 1

37 2 Scegliere JPEG - Qualità migliore dal menu a comparsa Impostazioni. Le opzioni nel pannello cambiano per riflettere la nuova impostazione. Queste impostazioni possono essere modificate, ma per questa esercitazione si useranno le impostazioni predefinite. 3 Fare clic sulla scheda Anteprima in cima alla finestra del documento. La finestra di Anteprima visualizza l aspetto che avrà il documento una volta esportato, sulla base delle impostazioni correnti. Dimensione file Tempo di scaricamento Nella parte superiore destra della finestra, Fireworks visualizza la dimensione del file per l esportazione e il tempo stimato necessario per visualizzare l immagine sul Web. Esercitazione di progettazione grafica di base 37

38 Esportazione di una immagine grafica Dopo aver ottimizzato l immagine, si è pronti a esportarla come file JPEG. 1 Scegliere File > Esporta. Si apre la finestra di dialogo Esporta. Il nome file ha estensione.jpg. Fireworks sceglie questo formato perché è stato selezionato precedentemente nel pannello Ottimizza. 2 Portarsi sulla cartella Tutorials sul pc, quindi scegliere Tutorial1/Export. 3 Accertarsi che il menu a comparsa Salva come tipo (Windows) oppure Salva con nome (Macintosh) indichino Solo immagini, quindi fare clic su Salva. Il file JPEG viene esportato nella ubicazione specificata. Si rammenti che il file PNG è il file sorgente, o il file di lavoro. Malgrado si sia esportato il documento in un formato JPEG, occorre sempre salvare il PNG in modo che le modifiche eseguite vengano riflesse anche nel file sorgente. 4 Scegliere File > Salva per salvare le modifiche apportate al file PNG. 5 Scegliere File > Chiudi. Visualizzazione del documento esportato Il nuovo file creato durante il processo di esportazione viene collocata nella cartella specificata. 1 In Fireworks, scegliere File > Apri e selezionare la cartella Esporta. Fireworks ha creato in questa collocazione un file denominato vintage.jpg. 38 Capitolo 1

39 2 Selezionare vintage.jpg e fare clic su Apri. L immagine si apre in una nuova finestra di documento in Fireworks. Nel pannello Livelli tutti gli oggetti sono stati appiattiti. Quando gli oggetti vengono appiattiti vengono uniti in un unico oggetto e non sono più modificabili come oggetti separati. La finestra di ispezione Proprietà visualizza le proprietà per una bitmap. Tutti gli effetti dal vivo e altri attributi applicati tramite la finestra di ispezione Proprietà non sono più disponibili per la bitmap selezionata. Il documento appare in questo modo perché Fireworks ha appiattito l immagine e tutte le sue proprietà, quando è stata eseguita l esportazione nel formato JPEG. Tuttavia il file di origine PNG è sempre disponibile. Pertanto, se occorre apportare altre modifiche al disegno, è sempre possibile aprire il file PNG, nel quale tutti gli oggetti sono ancora modificabili. 3 Scegliere File > Apri e selezionare vintage.png nella cartella Tutorial1. Fare clic su Apri. Nel pannello Livelli, tutti gli oggetti sono di nuovo disponibili come oggetti separati. Ciascun oggetto è modificabile, così come tutte le proprietà. 4 Fare clic su ciascun oggetto. La finestra di ispezione Proprietà visualizza le varie opzioni per ciascun oggetto selezionato. 5 Selezionare il testo Vintage nell area di lavoro. L effetto dal vivo Ombra per questo oggetto di testo compare nella finestra di ispezione Proprietà. Il vantaggio dell uso del file PNG di Fireworks come file di origine è quindi evidente. Ê infatti possibile eseguire modifiche ad un documento, che resta modificabile anche se si sceglie di esportare il documento ad un altro formato come JPEG. Esercitazione di progettazione grafica di base 39

40 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 l immagine completata. Per informazioni dettagliate sulle funzioni trattate in questa esercitazione e altre funzioni di Fireworks, fare riferimento all indice di Uso di Fireworks oppure consultare gli argomenti della Guida Fireworks. Per altre esercitazioni di Fireworks, visitare il sito Web Macromedia all indirizzo Si consiglia di visitare inoltre l acclamato sito Centro di supporto di Macromedia all indirizzo Per apprendere l uso di Fireworks nella creazione di pagine Web interattive, consultare Esercitazione di progettazione grafica di base a pagina 13. Nel corso dell esercitazione si utilizzerà l immagine JPEG esportata in questo documento e la si importerà in una pagina Web. Si apprenderà inoltre a creare elementi Web interattivi quali pulsanti, rollover e menu a comparsa. 40 Capitolo 1

41 CAPITOLO 2 Esercitazione di progettazione grafica Web Questa esercitazione guida l utente attraverso le operazioni di base della progettazione grafica Web e interattività con Macromedia Fireworks MX. Con l uso dell applicazione leader nel settore della grafica Web, l utente acquista esperienza pratica e apprende i concetti base della progettazione grafica. Argomenti trattati Grazie all esercitazione, sarà possibile ricostruire il workflow di produzione tipico di Fireworks per la realizzazione di una pagina Web. L utente apprenderà ad eseguire le seguenti operazioni: Copia del file Tutorials Vista della pagina Web completata Apertura del file di origine Importazione di un immagine Suddivisione in porzioni di un documento Creazione di un rollover trascina e rilascia Creazione e modifica di pulsanti per la creazione di una barra di navigazione Creazione e modifica di un menu a comparsa Ottimizzazione del documento Esportazione HTML Test del file completato È bene sapere 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

42 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 l esercitazione di base di progettazione grafica e la copia della cartella Tutorials è già stata eseguita, questo punto della procedura può essere tralasciato. 1 Portarsi sulla cartella dell applicazione Fireworks sul disco fisso del computer. Nota: Se la cartella dell applicazione Fireworks non è visualizzata è possibile che l utente abbia accesso limitato ai file sul sistema. I file necessari per eseguire questa esercitazione possono essere scaricati dal sito del Centro di supporto di Fireworks all indirizzo 2 Trascinare sul desktop una copia della cartella Tutorials. Vista della pagina Web completata Prima di iniziare l esercitazione, visualizzare il file dell esercitazione nella sua forma completa per osservare l aspetto che avrà il progetto una volta ultimato ed esportato come file HTML. 1 Apertura del browser Web. 2 Portarsi sulla cartella dell applicazione Fireworks copiata sul desktop e selezionare Tutorial2/ Complete. Nota: Per impostazione predefinita, alcune versioni di Microsoft Windows non visualizzano le estensioni per alcuni tipi di file comuni. Se questa impostazione non è stata modificata, l estensione dei file nella cartella Complete non verrà visualizzata. Quando si opera in grafica Web, è consigliabile poter visualizzare l estensione dei file. Per informazioni su come ripristinare la visualizzazione dell estensione dei file, consultare la Guida di Windows. 3 Selezionare il file Final.htm e trascinarlo nella finestra di un browser aperto. Nel corso dell esercitazione, si procederà a completare la versione parziale della pagina per la Global, società per il noleggio di auto. 4 Portare il puntatore sull immagine Vintage. Quando il puntatore si sposta sull immagine Vintage, l immagine sulla pagina cambia. Questo è dovuto all effetto di un rollover disgiunto. 5 Portare il puntatore sulla barra di navigazione lungo la parte superiore della pagina Web. Si noti come i pulsanti si modificano quando vengono attraversati dal puntatore del mouse. Fare clic sul pulsante dei valori delle velocità per testare il collegamento. Il collegamento porta alla pagina Fireworks nel sito ma l utente dovrà selezionare la propria URL per questo ed altri elementi nel corso dell esercitazione. 6 Utilizzare il pulsante Back (Indietro) del browser per tornare alla pagina final.htm. 7 Portare il puntatore sull immagine Worldwide Airports. Si apre un menu a comparsa. Attraversare con il puntatore ciascuna voce del menu, compresa la prima, contenente un menu secondario. 8 Fare clic su United States per testare il collegamento, quindi ritornare alla pagina final.htm. 9 Dopo aver visualizzato la pagina Web, si può chiuderla o lasciarla aperta come riferimento durante l esecuzione dell esercitazione. Nota: La cartella Complete include anche il documento di Fireworks dal quale è stato generato il file HTML. Per visualizzare il documento, fare doppio clic su final.png. 42 Capitolo 2

43 Apertura del file di origine A questo punto, dopo aver visualizzato il file final.jpg nel browser si è pronti a iniziare il progetto. 1 In Fireworks, scegliere File > Apri. 2 Portarsi sulla cartella Tutorials copiata sul desktop. Portarsi su Tutorial2/Start ed aprire il file global.png. Nota: Durante la sessione di esercitazione, si consiglia di salvare il lavoro di frequente, selezionando File > Salva. Importazione di un immagine Dopo aver aperto il disegno non finito per la pagina Web della Global, si procede ad importare una immagine grafica. Se l esercitazione di base di progettazione grafica è già stata completata, si utilizzerà l immagine JPEG. Se l esercitazione di base non è stata eseguita, l utente troverà in questa esercitazione una immagine completata. 1 Scegliere File > Importa ed eseguire una delle seguenti operazioni: Se è stata completata l esercitazione di base di progettazione grafica, portarsi sulla cartella Tutorial1/Export. Se al contrario non è stata completata l esercitazione di base di progettazione grafica, portarsi sulla cartella Tutorial2/Assets. 2 Selezionare vintage.jpg e fare clic su Apri. 3 Fare clic in un punto vuoto e bianco dell area di lavoro. L immagine compare sullo schermo selezionata. 4 Trascinare l immagine per collocarla come mostrato nell illustrazione seguente. Esercitazione di progettazione grafica Web 43

44 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 l aggiunta di elementi interattivi. Si provvederà ora a creare suddivisioni in porzioni per alcuni degli elementi grafici della pagina Web. In seguito, durante l esercitazione si aggiungeranno gli elementi interattivi alle porzioni, insieme alle impostazioni per l ottimizzazione e la compressione di tali elementi. 1 Con l immagine Vintage ancora selezionata, scegliere Modifica > Inserisci > Porzione. Sull immagine viene inserita una porzione. Per impostazione predefinita le porzioni presentano una sovrapposizione verde. 2 Fare clic all esterno della porzione per deselezionarla. La porzione è definita da guide di colore rosso, che si estendono per tutta la larghezza e la lunghezza del documento. Al momento della creazione della porzione, Fireworks sottopone automaticamente a suddivisione il resto del documento. Nota: Se le guide rosse non sono visibili, scegliere Visualizza > Guide porzione. 3 Fare clic tenendo premuto il tasto MAIUSC sull immagine Worldwide Airports e sull immagine Great Weekend Rates, alla sinistra del documento, per selezionare contemporaneamente entrambe le immagini. 44 Capitolo 2

45 4 Scegliere Modifica > Inserisci > Porzione. Nella finestra messaggio che compare, scegliere Multiplo. Questa funzione consente di inserire più porzioni contemporaneamente. Le porzioni vengono inserite sulle immagini selezionate. L aggiunta di porzioni modifica il layout delle porzioni automatiche nel resto del documento. 5 Fare clic in un punto qualsiasi all esterno delle porzioni per deselezionarle. Si crea uno spazio tra la porzione Vintage e la porzione Great Weekend Rates. Questo spazio rappresenta una sottile porzione automatica. 6 Portare il puntatore sulla guida sinistra dell immagine Vintage. Il puntatore si trasforma in puntatore di movimento guida, indicando che è possibile catturare la guida porzione e trascinarla. Trascinando una guida porzione è possibile modificare la forma della relativa porzione. 7 Trascinare la guida porzione a sinistra fino a che non si aggancia alla guida destra sull immagine Great Weekend Rates, come mostrato nell illustrazione sotto riportata. Esercitazione di progettazione grafica Web 45

46 8 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. 9 Se il pannello Livelli non è visibile, fare clic sulla freccia di espansione oppure scegliere Finestra > Livelli. Nella parte superiore del pannello è localizzato il Livello Web, che contiene tutti gli oggetti Web di un documento. Le tre porzioni create sono elencate in questo livello. In qualsiasi documento il Livello Web è sempre il livello superiore e non può essere spostato, ridenominato o eliminato. Creazione di un rollover trascina e 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 un altra parte dello schermo quando il puntatore lo attraversa. In questa esercitazione, si creerà un rollover disgiunto. 46 Capitolo 2

47 1 Selezionare la porzione che copre l immagine Vintage. Il cerchietto al centro della porzione è la maniglia del comportamento. Consente di aggiungere comportamenti o elementi interattivi ad una porzione. Se si ha una certa esperienza con i comportamenti di Macromedia Dreamweaver, si riconosceranno in Fireworks molti degli stessi comportamenti. 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 all angolo della porzione e compare la finestra di dialogo Scambia immagine. Esercitazione di progettazione grafica Web 47

48 3 Assicurarsi che nel menu a comparsa Immagine di scambio da, sia selezionato Fotogramma 2 e fare clic su OK. Quando nel browser il puntatore passa attraverso la porzione Vintage, l immagine del Fotogramma 2 sostituisce l immagine Great Weekend Rates. L immagine Vintage è quella che innesca l effetto rollover mentre l immagine che sostituisce l immagine Great Weekend Rates è considerata l immagine di scambio. 4 Se il pannello Fotogrammi non è visibile, fare clic sulla freccia di espansione del gruppo Fotogrammi e Cronologia e fare clic sulla scheda Fotogrammi, oppure scegliere Finestra > Fotogrammi. Il pannello Fotogrammi elenca i fotogrammi disponibili nel documento corrente. Attualmente nel documento è presente un solo fotogramma. Il pannello Fotogrammi è usato generalmente per l animazione. Nel caso dei rollover, il pannello è utilizzato per contenere le immagini di scambio. 5 Fare clic sul pulsante Fotogramma nuovo/duplicato in fondo al pannello. Nel pannello Fotogrammi viene creato un nuovo fotogramma denominato Fotogramma 2. L area di lavoro è ora vuota, con l eccezione delle porzioni inserite. Nessun oggetto è elencato nel pannello Livelli, ad eccezione degli elementi contenuti nel Livello Web. Questo avviene perché, per impostazione predefinita, i livelli in Fireworks non sono condivisi tra tutti i fotogrammi, con l eccezione del Livello Web, che è sempre condiviso. Gli oggetti nel Livello Web appaiono in ogni fotogramma del documento, pertanto le modifiche che si eseguono ad oggetti Web come le porzioni, interessano tutti i fotogrammi. 48 Capitolo 2

49 6 Scegliere File > Importa e portarsi sulla cartella Tutorial2/Assets. Selezionare il file denominato rates.gif e fare clic su Apri. 7 Collocare il puntatore di inserzione sulla porzione in cui era collocata l immagine Great Weekend Rates nel Fotogramma 1. Allineare il puntatore di inserzione all angolo superiore sinistro della porzione. 8 Fare clic per inserire l immagine. Compare l immagine Vintage Classic Rates. 9 Fare clic sulla scheda Anteprima in cima alla finestra del documento e nascondere le porzioni nel documento facendo clic sul pulsante Nascondi porzioni e punti attivi nella sezione Web del pannello Strumenti. Spostare il puntatore sull immagine Vintage. L immagine Great Weekend Rates cambia quando il puntatore passa sopra l immagine Vintage. Suggerimento: Se l immagine non sembra ferma oppure se la transizione da una immagine all altra non è uniforme, regolare la posizione dell immagine di scambio nel Fotogramma 2 sulla vista Originale. Per un posizionamento di precisione, attivare l opzione Onion skin nel pannello Fotogrammi oppure verificare che le coordinate X e Y dell immagine Vintage Classic Rates siano le stesse dell immagine Great Weekend Rates nella finestra di ispezione Proprietà. Conclusa questa operazione, ritornare al Fotogramma 1 e disattivare, se necessario, l opzione Onion skin. Per informazioni dettagliate su queste opzioni, fare riferimento all indice di Uso di Fireworks oppure consultare gli argomenti della Guida di Fireworks. 10 Fare clic sulla scheda Originale in cima alla finestra del documento per ritornare alla vista normale, quindi riportare indietro le porzioni facendo clic sul pulsante Mostra porzioni e punti attivi nel pannello Strumenti. In questo modo, con la massima rapidità, si è creato un rollover disgiunto. I rollover semplici vengono creati in modo simile: quando si trascina la maniglia del comportamento di una porzione, come si è appena fatto al punto 2, la si riporta direttamente sulla stessa porzione. Esercitazione di progettazione grafica Web 49

50 Normalmente l effetto rollover viene aggiunto ad una immagine per indicare agli utenti che è possibile fare clic sull immagine. Se il sito Global fosse un sito Internet reale, sarebbe utile un collegamento dalle immagini Vintage e Rates ad altre pagine di approfondimento delle informazioni. Ai fini di questa esercitazione, non è necessario modificare il rollover disgiunto. Nella sezione successiva di questa esercitazione si avranno altre opportunità di aggiungere collegamenti ad altri oggetti Web. Creazione e modifica di pulsanti per la creazione di una barra di navigazione I pulsanti sono oggetti Web che si collegano ad altre pagine Web. L aspetto dei pulsanti cambia secondo il movimento o il clic del mouse e rappresenta una indicazione visiva dell interattività. Ad esempio, il pulsante visualizza un effetto rollover diverso se viene attraversato dal puntatore o se viene selezionato con il clic del mouse. La barra di navigazione è un gruppo di pulsanti che compaiono su uno o più pagine di un sito Web. Generalmente i pulsanti delle barre di navigazione sono identici, ad eccezione del testo in essi contenuto. Si provvederà ora a creare una barra di navigazione per il sito Web Global. Creazione di un simbolo di pulsante L immagine iniziale e il testo per un pulsante sono già stati creati per l esercitazione. L immagine creata verrà convertita in un simbolo di pulsante. 1 In Fireworks, selezionare l immagine del pulsante (con etichetta BUTTON TEXT) nell angolo sinistro superiore del documento. 2 Scegliere Modifica > Simbolo > Converti in simbolo. Compare la finestra di dialogo Proprietà simbolo. 3 Immettere My Button nel campo Nome, scegliere Pulsante come tipo di simbolo e fare clic su OK. Comparirà una porzione sopra l immagine del pulsante e una icona di scelta rapida a sinistra della porzione. Ciò indica che la selezione nell area di lavoro è un istanza del simbolo appena creato. I simboli sono copie master dell immagine. Quando si cambia un simbolo tutte le istanze di quel simbolo nel documento cambiano automaticamente. I simboli sono contenuti nella libreria. 50 Capitolo 2

51 4 Se il pannello Libreria non è visibile, fare clic sulla freccia di espansione del gruppo Assets e sulla scheda Libreria oppure scegliere Finestra > Libreria. Il simbolo viene incluso nel pannello Libreria. Creazione di stati dei pulsanti. Si creeranno ora vari stati per il simbolo del pulsante. Gli stati dei pulsanti sono i vari modi in cui un pulsante compare quando il mouse lo attraversa o lo seleziona in un browser Web. 1 Fare doppio clic sull istanza del pulsante creata. Suggerimento: In alternativa è possibile fare doppio clic sull anteprima del pulsante nel pannello Libreria oppure sull icona del simbolo nell elenco dei simboli del pannello Libreria. Si aprirà l Editor di pulsanti con l immagine del pulsante visualizzata nello spazio di lavoro. Esercitazione di progettazione grafica Web 51

52 2 Fare clic sulle schede dell Editor di pulsanti. Le prime quattro schede rappresentano gli stati dei pulsanti. L ultima scheda, Area attiva, rappresenta l area sensibile del pulsante o il punto in cui l utente deve fare clic o attraversare con il mouse per attivare gli stati del pulsante. L area attiva è anche l area che cambia con ciascun stato del pulsante. Attualmente non ci sono altri stati per il pulsante se non lo stato Su, corrispondente all aspetto del pulsante prima che l utente faccia clic su di esso o vi passi sopra il puntatore. 3 Fare clic sulla scheda Sopra in cima all Editor di pulsanti, quindi fare clic sul pulsante Copia grafico Su. L immagine del pulsante viene copiata dalla scheda Su. Lo stato Sopra corrisponde all aspetto del pulsante quando il puntatore è su di esso. Per consentire all utente la visualizzazione occorre cambiare il colore del rettangolo dietro il testo. 4 Selezionare il rettangolo. Accertarsi di selezionare solo il rettangolo e non il testo. Se non si è sicuri di questo, controllare nel pannello Livelli quale livello risulta selezionato. 5 Fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà e scegliere il colore nero. Il rettangolo ora si presenta nero. 6 Fare clic sulla scheda Giù dell Editor di pulsanti, quindi sul pulsante Copia grafico Sopra. L immagine del pulsante viene copiata dalla scheda Sopra. Lo stato Giù corrisponde all aspetto assunto dal pulsante quando si è fatto clic su di esso. In questa esercitazione il colore del rettangolo non verrà cambiato. 7 Fare clic su Completato nell Editor di pulsanti per applicare le modifiche al simbolo del pulsante. 8 Fare clic sulla scheda Anteprima nella finestra del documento e provare gli stati del pulsante. Se necessario disattivare le porzioni. A operazione conclusa, fare clic sulla scheda Originale e riportare indietro le porzioni. Creazione di più istanze di un pulsante In questa sezione si creeranno più istanze di un simbolo di pulsante. 1 Se non ancora selezionato, selezionare il pulsante nello spazio di lavoro. 2 Scegliere Modifica > Clona. Sopra il pulsante originale compare una nuova istanza del pulsante. 52 Capitolo 2

53 3 Premere ripetutamente il tasto MAIUSC insieme al tasto freccia destra, per spostare a destra la nuova istanza. L istanza si sposta con incrementi di 10 pixel. Se necessario, usare i tasti freccia da soli per spostare la selezione di un pixel alla volta. Posizionare l istanza immediatamente a destra dell istanza originale, ma non sovrapposta, come mostrato nell illustrazione riportata sotto. 4 Clonare altre due istanze del pulsante e collocarle entrambe a destra dell istanza precedente. Suggerimento: Come scelta rapida, premere Alt (Windows) o Opzione (Macintosh), trascinando l istanza selezionata con il puntatore per farne una copia. Dopo aver posizionato la nuova istanza all immediata destra della precedente istanza, scegliere Modifica > Ripeti duplica, per creare e collocare automaticamente un altra copia dell istanza. Modifica del testo di un istanza del pulsante Dopo aver creato tutti i pulsanti della barra di navigazione è necessario fornire un singolo testo a ciascun pulsante. Il testo su una istanza di pulsante può essere modificato in modo semplice dalla finestra di ispezione Proprietà. 1 Selezionare l ultima istanza verso sinistra. Le proprietà per l istanza del pulsante vengono visualizzate nella finestra di ispezione Proprietà. Con l eccezione del menu a comparsa Esporta impostazioni, queste proprietà si applicano solo all istanza selezionata. Le modifiche eseguite qui non interessano il simbolo originale del pulsante nella Libreria. 2 Nella finestra di ispezione Proprietà, sostituire il testo presente nella casella Testo con la parola HOME in maiuscolo, quindi premere INVIO. Il testo sul pulsante cambia e riflette la nuova immissione. 3 Per i rimanenti tre pulsanti, modificare rispettivamente il testo in VEHICLES, RATES e CONTACT US. Esercitazione di progettazione grafica Web 53

54 Assegnazione di URL ai pulsanti Si provvederà ad assegnare ora una URL esclusiva, o collegamento, a ciascuna istanza del pulsante. URL, acronimo di Uniform Resource Locator, è l indirizzo di una pagina Web. È possibile assegnare URL ai pulsanti usando la finestra di ispezione Proprietà. 1 Selezionare l istanza del pulsante con l etichetta Home. 2 Immettere index.htm nella casella di testo Collegamento della finestra di ispezione Proprietà. Premendo il pulsante Home in un browser Web, si apre una pagina denominata index.htm. Si osserverà più avanti nell esercitazione perché il pulsante Home è stato collegato a questa pagina. 3 Selezionare l istanza del pulsante Vehicles ed inserire la URL preferita nella casella di testo Collegamento della finestra di ispezione Proprietà. Ai fini di questa esercitazione non è importante scegliere una URL specifica. Se la creazione del sito fosse reale, a questo punto si dovrebbe digitare la URL alla quale far collegare il pulsante Vehicles. Nota: Immettere comunque una URL esistente, in modo da poter provare successivamente il collegamento del pulsante. 4 Assegnare una URL a ciascuna delle rimanenti istanze del pulsante. Come per la prima, assegnare una URL indefinita. 5 Scegliere File > Anteprima nel browser > Anteprima in [browser preferito]. Per provare i collegamenti dei pulsanti, visualizzare in anteprima il documento nel browser. Nota: Se il browser prescelto non è elencato, occorre prima selezionare un browser scegliendo File > Anteprima nel browser > Imposta browser primario. Quando il documento si apre nel browser, testare i pulsanti creati. Ad eccezione del pulsante Home, che si collega ad un file non ancora creato, ciascun pulsante dovrebbe passare al collegamento specificato in Fireworks. Modifica del simbolo di un pulsante Si vedrà ora come modificare il simbolo originale di un pulsante. Le modifiche verranno apportate automaticamente a tutte le istanze del pulsante nella barra di navigazione. Per osservare come risulta il simbolo originale del pulsante dopo che ne è stato modificato il testo su molte delle sue istanze, 1 Fare doppio clic su una istanza qualunque nello spazio di lavoro. Si aprirà l Editor di pulsanti con il simbolo originale e il testo visualizzato nello spazio di lavoro. Il simbolo originale del pulsante è rimasto invariato e visualizza il testo originale. Quando è stato cambiato il testo di ciascun pulsante nello spazio di lavoro, sono state modificate soltanto le istanze del pulsante. Se si eseguono ora modifiche al rettangolo o all aspetto del testo, si interviene sul simbolo originale, in modo che le modifiche vengano applicate a tutte le istanze nello spazio di lavoro. 54 Capitolo 2

55 2 Fare clic sulla scheda Sopra. 3 Selezionare il rettangolo nero. 4 Con il rettangolo ancora selezionato, fare clic sulla casella Colore riempimento nella finestra di ispezione Proprietà e immettere FF6633 come valore del colore. Premere INVIO per applicare la modifica del colore. Il rettangolo ora si presenta di colore arancio. 5 Fare clic su Completato nell Editor di pulsanti per applicare la modifica al simbolo del pulsante. 6 Fare clic sulla scheda Anteprima nella finestra del documento e provare il pulsante. Lo stato Sopra di ciascun pulsante è ora di colore arancio. Ê stato modificato solo il simbolo del pulsante, ma la modifica è stata applicata a tutte le istanze del pulsante nella barra di navigazione. 7 Fare clic sulla scheda Originale e doppio clic su una qualsiasi istanza nello spazio di lavoro. Ora si cambierà il testo nel simbolo del pulsante. 8 Selezionare il testo del pulsante nell Editor di pulsanti e scegliere il carattere Arial nella finestra di ispezione Proprietà. Ripetere per ognuno degli stati del pulsante. 9 Fare doppio clic sul blocco di testo nell Editor di pulsanti e cancellare la parola BUTTON. 10 Fare clic su Sì nella finestra di messaggio dove si chiede all utente di modificare il testo negli altri stati del pulsante. Esaminare i vari stati del pulsante nell Editor di pulsanti. Le modifiche di testo in uno stato del pulsante si riflettono su tutti gli altri stati del pulsante. Osservare la differenza con la modifica applicata al carattere; in quell occasione è stato necessario modificare tutti gli stati. Questo avviene perché sia possibile applicare attributi grafici e di testo diversi ad ognuno degli stati del pulsante. Questa funzione risulta utile se si desidera che il colore del testo cambi quando, ad esempio, si passa con il mouse su un pulsante. 11 Fare clic su Completato per uscire dall Editor di pulsanti. Il carattere su ciascuna istanza del pulsante cambia e riflette la nuova selezione di carattere ma il testo è rimasto identico. Le istanze dei pulsanti riflettono solo le modifiche applicate all aspetto grafico di un simbolo di pulsante, inclusi i suoi attributi di testo, ma non le modifiche apportate al testo stesso. I simboli di pulsante consentono di modificare rapidamente l aspetto grafico di tutte le istanze del pulsante nella barra di navigazione, mantenendo il testo unico di ciascuna istanza. Esercitazione di progettazione grafica Web 55

56 Creazione e modifica di un menu a comparsa Il menu a comparsa è un menu che compare quando si sposta il puntatore sopra una immagine di innesco in un browser. Contiene un elenco degli elementi che collegano ad altre pagine Web. Si procederà a creare e a modificare un menu a comparsa che riporta l elenco delle sedi Global degli aeroporti. Creazione degli elementi di un elenco del menu a comparsa Per prima cosa si creeranno gli elementi di un elenco di un menu a comparsa tramite l Editor menu a comparsa. 1 Selezionare la porzione che copre l immagine Worldwide Airports. 2 Scegliere Modifica > Menu a comparsa > Aggiungi menu a comparsa. Si apre l Editor menu a comparsa. 3 Fare doppio clic sulla casella di testo nell angolo superiore sinistro (solo Windows). 4 Immettere North America nella casella di testo e premere INVIO. La casella di testo successiva si evidenzia ed è disponibile per creare una nuova voce. 56 Capitolo 2

57 5 Digitare Europe e premere INVIO. 6 Creare altre voci per Africa, Middle East e Asia/Pacific. 7 Fare doppio clic sulla casella di testo Collega per la nuova voce North America. 8 Immettere un URL esistente e premere INVIO. Ai fini di questa esercitazione non è importante scegliere una URL specifica. Immettere comunque un URL esistente, in modo da poter provare successivamente il collegamento del pulsante. 9 Immettere gli URL per gli elementi restanti. Nota: In fondo all elenco degli elementi nell Editor dei menu a comparsa rimane sempre un riga vuota. Ê disponibile per l aggiunta di nuovi elementi senza dover fare clic sul pulsante Aggiungi menu. 10 Fare clic su Completato per chiudere l Editor menu a comparsa. Nello spazio di lavoro compare un profilo del menu a comparsa, attaccato alla porzione. 11 Per testare il menu creato, scegliere File > Anteprima nel browser > Anteprima in (browser favorito) in modo da visualizzare il documento nel browser. Nota: I menu a comparsa devono essere visualizzati in anteprima nel browser; in Fireworks non sono visibili tramite la scheda Anteprima. Quando il documento si apre nel browser, spostare il puntatore sull immagine Worldwide Airports. Compare il menu a comparsa creato. Fare clic su ciascuno degli elementi per testare i collegamenti. Esercitazione di progettazione grafica Web 57

58 Personalizzazione di un menu a comparsa Tornare all Editor menu a comparsa per modificare l aspetto del menu a comparsa. 1 In Fireworks, fare doppio clic sul profilo del menu a comparsa. Si apre l Editor menu a comparsa che visualizza le voci inserite. 2 Fare clic sul pulsante Successivo. Compare la scheda Aspetto. La scheda Aspetto consente di modificare i colori e i caratteri utilizzati nei menu a comparsa. 3 Scegliere HTML per il tipo di cella e Menu verticale per l allineamento. 4 Scegliere Arial, Helvetica, sans-serif come carattere e 12 come dimensione del carattere. 5 Nella sezione Stato Su, impostare, se non ancora selezionato, il colore nero. Quindi fare clic sulla casella Colore cella. Se CCCCCC non è già visualizzato nella casella di testo in cima alla finestra a comparsa colori, inserire CCCCCC e premere INVIO. Se non è mai stato creato prima un nuovo menu a comparsa, questi sono i valori predefiniti del colore selezionati nell Editor menu a comparsa, Una volta modificati, questi colori verranno utilizzati ogni volta che si crea un nuovo menu a comparsa, fino a che non si scelgono colori diversi. 58 Capitolo 2

59 6 Nella sezione Stato Sopra impostare il colore del testo su Bianco e fare clic sulla casella Colore cella. Fare clic con il contagocce nel rettangolo blu che circonda l immagine Worldwide Airports nell area di lavoro, come mostrato sotto. 7 Fare clic sul pulsante Successivo. Compare la scheda Avanzate. La scheda Avanzate consente di modificare varie proprietà delle celle e del bordo. Consente inoltre di incrementare la larghezza della cella e quindi del menu a comparsa. 8 Scegliere Pixel dal menu Larghezza cella. Si apre la finestra Larghezza cella. 9 Immettere 137 per la larghezza della cella. Esercitazione di progettazione grafica Web 59

60 10 Scegliere Automatica dal menu a comparsa Altezza cella e fare clic sul pulsante Successivo. Compare la scheda Posizione. La scheda Posizione consente di specificare la posizione di comparsa del menu sullo schermo. Le coordinate 0,0 indicano che l angolo superiore sinistro del menu a comparsa verrà allineato all angolo superiore sinistro della porzione che lo attiva. In questa scheda sono disponibili altre posizioni di impostazione. 11 Immettere 3 nelle caselle Posizioni menu X e Y, quindi fare clic su Completato. Nota: Il menu a comparsa può essere riposizionato anche trascinandone il contorno nello spazio di lavoro. 12 Visualizzare in anteprima in un browser le modifiche apportate al menu a comparsa. Spostare il puntatore sull immagine Worldwide Airports. Il menu a comparsa si apre in una altra posizione e risulta più grande. Attraversare ciascuna voce del menu con il puntatore per osservare come cambiano i colori. Modifica del menu a comparsa Si utilizzerà nuovamente l Editor menu a comparsa per aggiungere un altra voce al menu a comparsa. Si cambierà anche l ordine delle voci e si aggiungerà un menu secondario. 1 In Fireworks, fare doppio clic sul profilo del menu a comparsa. 2 Fare clic sulla voce Europe per selezionarla. 3 Fare clic sul pulsante Aggiungi menu in cima all elenco delle voci. Viene inserita una riga vuota. 60 Capitolo 2

61 4 Fare doppio clic sul campo Testo della nuova voce ed immettere Latin/South America. Fare clic all esterno del campo Testo per confermare la voce. Si noti che America Settentrionale e meridionale sono due voci distinte dell elenco. 5 Trascinare la voce Latin/South America una riga sopra e rilasciare il pulsante del mouse. Mentre si trascina, una linea nera indica il punto di rilascio della voce nel momento in cui si rilascia il pulsante del mouse. La voce viene rilasciata dove specificato. 6 Selezionare la voce North America e fare clic sul pulsante Aggiungi menu. 7 Fare doppio clic sul campo Testo della nuova voce ed immettere United States, quindi fare clic all esterno dei campi delle voci. Prestare attenzione a non selezionare un altra voce. 8 Selezionare la voce United States, se non ancora selezionata e fare clic sul pulsante Menu rientrato. La voce rientra al di sotto della voce North America. Esercitazione di progettazione grafica Web 61

62 9 Fare clic di nuovo sul pulsante Aggiungi menu e creare una nuova voce per il Canada. Ê stato creato un menu secondario che comparirà quando nel browser si passa con il mouse sulla voce North America. 10 Assegnare URL a tutte le nuove voci. Ê possibile anche eliminare il collegamento per la voce North America, perché gli utenti hanno ora la possibilità di selezionare le voci dal menu secondario. 11 Fare clic su Completato per chiudere l Editor menu a comparsa quindi visualizzare in anteprima nel browser le modifiche apportate al menu a comparsa. Ottimizzazione del documento Il documento è a questo punto quasi pronto per la pubblicazione sul Web. L unica operazione che resta prima di esportarlo è l ottimizzazione per il Web. Prima di esportare un documento da Fireworks, si raccomanda di eseguire la procedura di ottimizzazione. L ottimizzazione assicura l esportazione dell immagine grafica con il massimo equilibrio di compressione e qualità. Quando il documento contiene diversi tipi di immagini è consigliabile scegliere un formato di file appropriato e le impostazioni di compressione più opportune per ciascun tipo. La pagina Web Global è composta da numerosi elementi: bitmap, oggetti vettoriali e testo. 1 Se il pannello Ottimizza non è visibile, fare clic sulla freccia di espansione oppure scegliere Finestra > Ottimizza. 62 Capitolo 2

63 Fireworks seleziona GIF come formato di file di esportazione predefinito e Websnap Adaptive come tavolozza colori predefinita. Queste impostazioni sono idonee alla maggior parte delle immagini create per la pagina Web Global Rental Cars. L immagine bitmap Vintage contiene, tuttavia, una fotografia e una sfumatura. A causa delle complesse variazioni di colore è preferibile esportarla in un altro formato. 2 Fare clic sulla scheda di anteprima 2-alto nella finestra del documento. La scheda 2-alto consente di visionare i risultati dell ottimizzazione e di confrontarli all originale. A questo punto si sarà probabilmente notata la presenza della porzione bianca sovrapposta ogni volta che si visualizza una delle schede Anteprima. La sovrapposizione consente di concentrare l attenzione sull area da ottimizzare. 3 Fare clic sulla porzione per l immagine Vintage nell anteprima a destra. La sovrapposizione della porzione scompare e rende visibile l immagine. In fondo all anteprima è visualizzato il formato del file di esportazione per la porzione selezionata, oltre alla dimensione stimata del file e il tempo di download stimato. Suggerimento: Usare lo strumento Mano nella sezione Visualizza del pannello Strumenti per vedere una parte maggiore dell immagine se questa non è completamente visibile. 4 Nascondere temporaneamente le porzioni facendo clic sul pulsante Nascondi porzioni e punti attivi nella sezione Web del pannello Strumenti. Ciò consente di confrontare l anteprima all originale e di osservare le differenze tra le due immagini. L anteprima a destra mostra delle strisce nella sfumatura. 5 Riattivare le porzioni e fare clic sull immagine Vintage con lo strumento Puntatore. Esercitazione di progettazione grafica Web 63

64 6 Nel pannello Ottimizza scegliere JPEG - File più piccoli dal menu a comparsa Impostazioni. Le strisce sono scomparse e la dimensione del file risulta significativamente diminuita. Questo avviene perché le fotografie e le immagini con variazioni complesse del colore risultano ottimizzate e compresse meglio come immagini JPEG che come immagini GIF. Con la riduzione della dimensione del file l immagine risulta meno dettagliata. 7 Per migliorare l aspetto della bitmap, trascinare sul valore 77 il cursore Qualità nel pannello Ottimizza e impostare l opzione Attenuazione su 0. La bitmap è molto più chiara, tuttavia la dimensione del file è aumentata. La dimensione del file è comunque inferiore alla dimensione del file quando l immagine viene ottimizzata come GIF. 8 Fare clic sulla scheda Originale per ritornare alla vista normale. 64 Capitolo 2

65 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 all esportazione diventano celle di una tabella HTML. L esercitazione prevede ora l esportazione e la visualizzazione del documento finito nel browser Web. Si esaminerà inoltre il codice HTML esportato da Fireworks. Impostazione delle preferenze HTML Prima di esportare il documento occorre impostare le preferenze di esportazione. 1 Scegliere File > Imposta HTML. Si apre la finestra di dialogo Imposta HTML. Le opzioni impostate in questa finestra di dialogo modificano tutti i futuri documenti Fireworks, con l eccezione delle opzioni nella scheda Specifico del documento. 2 Nella scheda Generale scegliere uno stile HTML. Se si usa un editor HTML come Macromedia Dreamweaver o Microsoft FrontPage, selezionarli dal menu a comparsa. Questo consente di aprire e modificare il file esportato nell editor HTML selezionato. Se non si usa un editor HTML particolare oppure se l editor che si usa non è compreso nell elenco, scegliere HTML generico. 3 Scegliere.htm come estensione file. Esercitazione di progettazione grafica Web 65

66 4 Fare clic sulla scheda Tabella. La scheda Tabella consente di modificare le proprietà della tabella HTML. 5 Nel menu a comparsa Spazio con, scegliere Spaziatore trasparente da 1 pixel. La scelta di questa opzione fa sì che Fireworks esporti un file grafico denominato spacer.gif, che corrisponde ad una immagine trasparente da 1 pixel. Gli spaziatori sono utilizzati dai disegnatori grafici per risolvere i problemi di spazio nel layout di pagina in quanto mantengono aperte le celle HTML vuote. Senza questi spaziatori le celle vuote della tabella HTML andrebbero perse, alterando il layout di pagina progettato. In seguito, durante la visualizzazione dei file esportati, si potrà osservare il file spacer.gif. A questo punto dell esercitazione non occorre conoscere il meccanismo degli spaziatori, ma è utile essere a conoscenza di questa opzione, per un eventuale uso futuro. 6 Fare clic sulla scheda Specifico del documento. 66 Capitolo 2

67 La scheda Specifico del documento consente di scegliere varie preferenze per il documento, tra cui una convenzione di assegnazione del nome per i file esportati. Si noti che le opzioni impostate in questa scheda si applicano solo al documento Fireworks corrente. Suggerimento: Le impostazioni della scheda Specifico del documento possono essere applicate a tutti i nuovi documenti facendo clic sul pulsante Imposta predefiniti. 7 Fare clic su OK per confermare le impostazioni nella scheda Specifico del documento e chiudere la finestra di dialogo Imposta HTML. Esportazione del documento nel formato HTML Il documento è ora pronto per l esportazione. 1 Scegliere File > Esporta. Si apre la finestra di dialogo Esporta. 2 Nella finestra di dialogo Importa, portarsi nella cartella Tutorial2/Export. 3 Verificare che HTML e immagini sia selezionato come tipo file e immettere index.htm come nome file. La denominazione della home page con index.htm è una convezione diffusa nel Web. Molti browser aprono automaticamente la pagina index.htm quando l URL presenta una ubicazione e non il nome di una pagina. Inoltre durante l esercitazione è stato assegnato al pulsante Home la URL di index.htm. Attualmente esiste solo una pagina nel sito Global, pertanto non è opportuno collegare una pagina a sé stessa. Se in realtà si creassero altre pagine per questo sito, sarebbe possibile usare questa barra di navigazione su tutte le pagine, fornendo agli utenti un metodo di navigazione uniforme. 4 Verificare che nel menu a comparsa HTML sia selezionato Esporta file HTML e che nel menu a comparsa Porzioni sia selezionato Esporta porzioni. Esercitazione di progettazione grafica Web 67

68 5 Selezionare le seguenti opzioni e lasciare tutte le altre non selezionate: Includi aree senza porzioni Inserisci immagine nella sottocartella Selezionando questa opzione, Fireworks consente di scegliere una cartella nella quale memorizzare i file grafici esportati. Fireworks crea automaticamente la cartella se questa non esiste ancora. Se non si seleziona una cartella, Fireworks sceglie per impostazione predefinita una cartella denominata images. Per questa esercitazione confermare le impostazioni predefinite. 6 Fare clic su Salva. I file sono stati esportati alla collocazione specificata. 7 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 dell elenco dei file esportati Per prima cosa si esamini l elenco dei file esportati da Fireworks. I nuovi file creati durante il processo di esportazione compaiono nella cartella Export. 1 Portarsi alla cartella Export e aprirla. Fireworks ha creato nella cartella Export un file HTML denominato index.htm. Questo file è la home page del sito Global. Ê stato inoltre creato un file denominato mm_menu.js, che contiene il codice necessario per visualizzare i menu a comparsa. 2 Aprire la sottocartella Immagini. Fireworks ha esportato file grafici per tutte le immagini. Ogni porzione di Fireworks viene esportata sotto forma di un file grafico separato. Sono presenti numerosi file GIF ed un file JPEG. Il file JPEG è l immagine bitmap ottimizzata precedentemente. Il file spacer.gif è il risultato dell opzione spaziatura selezionata nella finestra di dialogo Imposta HTML e verrà usato per il layout di pagina. 68 Capitolo 2

69 Visualizzazione del file Fireworks HTML nel browser Dopo aver esaminato i file esportati, è possibile testare la pagina Web nel browser. 1 Dalla cartella Export, trascinare il file index.htm in un browser Web aperto. 2 Nel browser, fare clic sui pulsanti aggiunti per testare i collegamenti, quindi ritornare al file index.htm. 3 Testare anche le altre funzioni aggiunte. 4 La maggior parte dei browser Web permette di visualizzare il codice sorgente per mezzo di un comando come Visualizza > Sorgente. Individuare ed eseguire il comando che consente di visualizzare il codice. 5 Far scorrere il codice sorgente. Gli utenti che hanno esperienza di HTML e JavaScript, riconosceranno il codice creato automaticamente da Fireworks. Chi non ha esperienza di HTML e JavaScript, apprezzerà particolarmente il fatto che Fireworks non richieda di doverne necessariamente apprendere l uso. Esercitazione di progettazione grafica Web 69

70 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 all indice di Uso di Fireworks oppure consultare gli argomenti della Guida Fireworks. Per altre esercitazioni, visitare il sito Si consiglia di visitare inoltre l acclamato sito Centro di supporto di Macromedia all indirizzo 70 Capitolo 2

71 CAPITOLO 3 Informazioni di base su Fireworks Macromedia Fireworks è un applicazione per la progettazione di elementi grafici per il Web. Le sue soluzioni innovative affrontano i principali problemi dei designer di grafica e dei webmaster. Utilizzando la vasta gamma di strumenti di Fireworks, è possibile creare e modificare elementi grafici vettoriali e bitmap all interno di un solo file. L avvento di Fireworks ha liberato i progettisti Web dalla necessità di usare applicazioni diverse per ogni operazione, con frequenti passaggi da una all altra. I suoi effetti dal vivo non distruttivi eliminano la frustrazione legata alla necessità di ricreare grafici Web da zero dopo ogni semplice modifica. Inoltre, Fireworks genera JavaScript, semplificando la creazione di rollover e le sue efficienti funzioni di ottimizzazione riducono le dimensioni dei file di grafica Web senza sacrificare la qualità. Per coloro che utilizzano Fireworks per la prima volta, sarebbe utile comprendere i concetti generali di Fireworks come l apertura, l importazione e il salvataggio dei file, lo spostamento agevole nell ambiente Fireworks e l esecuzione di operazioni con un file. Una volta creato un nuovo file o aperto un file esistente, l ambiente operativo di Fireworks è disponibile. In Fireworks MX sono stati apportati numerosi miglioramenti allo spazio di lavoro, tra cui la finestra di ispezione Proprietà, un pannello Strumenti segmentato e gruppi di pannelli. Informazioni sulla grafica vettoriale e 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, l immagine di una foglia può essere descritta da una serie di punti, il cui risultato è il contorno della foglia. Il colore della foglia è determinato dal colore del contorno, o tratto, e dal colore dell area in esso racchiusa, o riempimento. Quando si modifica un elemento grafico vettoriale, si modificano in effetti le proprietà delle linee e delle curve che ne descrivono la forma. Gli elementi grafici vettoriali sono indipendenti dalla risoluzione, il che significa che è possibile spostare, ridimensionare, riformare o modificare il colore di un elemento grafico vettoriale, nonché visualizzarlo su dispositivi di output con varie risoluzioni, senza alterarne la qualità dell aspetto. 71

72 Informazioni sulla grafica bitmap Gli elementi grafici bitmap sono costituiti da puntini, denominati pixel, disposti su una griglia. Lo schermo stesso del computer è costituito da una grande griglia di pixel. In una versione bitmap della foglia, l immagine sarebbe determinata dalla posizione e dal valore del colore di ciascun pixel della griglia. Ad ogni puntino viene assegnato un colore. Se visualizzati alla risoluzione corretta, i puntini si uniscono come le tessere di un mosaico per formare l immagine. Quando si modifica un elemento grafico bitmap, si interviene sui pixel anziché sulle linee e sulle curve. Tali elementi grafici bitmap sono dipendenti dalla risoluzione, in quanto i dati che descrivono l immagine sono fissati in base a una griglia di una dimensione specifica. Ingrandendo un elemento grafico bitmap, i bordi dell immagine risultano frastagliati in quanto i pixel vengono ridistribuiti all interno della griglia. Visualizzando un elemento grafico bitmap su un dispositivo di output con una risoluzione inferiore a quella dell immagine, anche la qualità dell immagine stessa ne risulta degradata. Informazioni sulle operazioni in Fireworks Fireworks è un applicazione versatile per la creazione, la modifica e l ottimizzazione degli elementi grafici per il Web. È possibile creare e modificare immagini bitmap e vettoriali, progettare effetti Web come rollover e menu a comparsa, ritagliare e ottimizzare gli elementi grafici per ridurre la dimensione del file ed evitare la ripetizione automatizzando le operazioni più frequenti. Quando il documento è completo, è possibile esportarlo come file JPEG, GIF o altro formato, insieme a file HTML contenenti tabelle HTML e codici JavaScript, da utilizzare sul Web. È possibile inoltre esportare un tipo di file specifico di un altra applicazione come Photoshop o Macromedia Flash, se si desidera continuare a lavorare nell altra applicazione. Oggetti vettoriali e bitmap Il pannello Strumenti di Fireworks è composto da sezioni distinte contenenti strumenti di disegno e modifica di vettori e bitmap. In Fireworks MX, lo strumento che si seleziona determina se l oggetto che viene creato è un oggetto vettoriale o bitmap. Ad esempio, scegliendo lo strumento Penna nella sezione Vettore del pannello Strumenti, è possibile iniziare a disegnare tracciati vettoriali tracciando dei punti. Scegliendo lo strumento Pennello, è possibile trascinare il mouse per dipingere un oggetto bitmap. Scegliendo lo strumento Testo, è possibile iniziare a digitare. Dopo aver disegnato oggetti vettoriali, oggetti bitmap o testo, è possibile utilizzare una vasta serie di strumenti, effetti, comandi e tecniche per migliorare e completare le immagini grafiche. È possibile utilizzare gli strumenti di Fireworks nell editor di pulsanti per creare pulsanti di navigazione interattivi. Gli strumenti di Fireworks possono essere utilizzati inoltre per modificare le immagini grafiche importate. È possibile importare e modificare file in formato JPEG, GIF, PNG, PSD e molti altri formati di file. Una volta importata un immagine grafica, è possibile regolarne il colore e la tonalità, oltre che ritagliarla, ritoccarla e mascherarla. 72 Capitolo 3

73 Elementi grafici interattivi Le porzioni e i punti attivi sono oggetti per il Web che specificano aree interattive in un immagine grafica per il Web. Le porzioni tagliano un immagine in varie sezioni e permettono di applicare comportamenti rollover, animazioni e collegamenti URL (Uniform Resource Locator) a parti dell immagine complessiva. Le porzioni inoltre consentono di esportare le sezioni utilizzando impostazioni diverse. In una pagina Web, ciascuna porzione appare in una cella di tabella. I punti attivi consentono di assegnare collegamenti URL e comportamenti a un intero elemento grafico o a una parte di esso. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Le porzioni e i punti attivi sono dotati di maniglie rollover trascina e rilascia che consentono di assegnare rapidamente immagini di scambio e comportamenti rollover agli elementi grafici direttamente nell area di lavoro. L Editor di pulsanti e l Editor di menu a comparsa sono pratiche funzioni di Fireworks che consentono di creare speciali elementi grafici interattivi per navigare nei siti Web. Informazioni sull ottimizzazione e l esportazione di elementi grafici Fireworks è dotato di potenti funzioni di ottimizzazione che consentono di trovare l equilibrio tra le dimensioni e una qualità accettabile del file nel caso in cui si debbano esportare elementi grafici. In Fireworks è possibile ottimizzare le immagini grafiche Web per ridurre al minimo le dimensioni dei file relativi, in modo che le immagini vengano caricate rapidamente quando si visualizzano i siti Web, mentre si confronta la qualità delle immagini grafiche nella vista Anteprima, 2-alto o 4-alto nello spazio di lavoro. È possibile dividere un immagine in parti più piccole e quindi ottimizzare ciascuna di esse nel formato più idoneo per il contenuto. Per una maggiore flessibilità di ottimizzazione, è possibile utilizzare la compressione selettiva JPEG per mettere a fuoco la parte più importante di un file JPEG riducendo al tempo stesso la qualità dello sfondo. Dopo aver ottimizzato gli elementi grafici, il passaggio successivo consiste nell esportarli per utilizzarli sul Web. Dal documento PNG sorgente di Fireworks, è possibile esportare in una serie di formati, tra cui JPEG, GIF, GIF animati e tabelle HTML, contenenti immagini porzione in tipi di file multipli. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Creazione di un nuovo 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

74 Per creare un nuovo documento: 1 Scegliere File > Nuovo. Si aprirà la finestra di dialogo Nuovo documento. 2 Immettere i valori di altezza e larghezza dell area di lavoro in pixel, pollici, o centimetri. 3 Immettere il valore per la risoluzione in pixel per pollice o pixel per centimetro. 4 Selezionare il colore bianco, trasparente o personalizzato per l area di lavoro. Nota: Avvalersi del menu a comparsa vaschetta dei colori Personalizza per scegliere un colore personalizzato per l area di lavoro. 5 Fare clic su OK per creare il nuovo documento. Per creare un nuovo documento della stessa dimensione di un oggetto esistente negli Appunti: 1 Copiare negli Appunti l oggetto prescelto proveniente da: Un altro documento di Fireworks Un browser Web Una delle applicazioni riportate in Incollaggio in Fireworks a pagina 78 2 Scegliere File > Nuovo. Si aprirà la finestra di dialogo Nuovo documento, implementando le dimensioni di altezza e larghezza dell oggetto contenuto negli Appunti. 3 Impostare la risoluzione e il colore dell area di lavoro, quindi fare clic su OK. 4 Scegliere Modifica > Incolla per incollare nel nuovo documento l oggetto contenuto negli Appunti. 74 Capitolo 3

75 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 sull importazione degli elementi grafici da Photoshop, Macromedia FreeHand, CorelDraw, o Illustrator, consultare Uso di Fireworks con altre applicazioni a pagina 103. Per aprire un documento di Fireworks: 1 Scegliere File > Apri. Comparirà la finestra di dialogo Apri. 2 Selezionare il file e fare clic su Apri. Suggerimento: Per aprire un file senza sovrascrivere la versione precedente, scegliere Apri come "Senza nome", quindi salvare il file con un altro nome. Apertura dei documenti chiusi di recente Il menu File contiene un elenco di un massimo di 10 documenti chiusi di recente nel sottomenu Apri recente. Per aprire un file chiuso di recente: 1 Scegliere File > Apri recente. 2 Scegliere un file nel sottomenu visualizzato. Apertura di immagini grafiche create in altre applicazioni Fireworks permette di aprire file creati con altre applicazioni o di altri formati, tra cui Photoshop, Macromedia FreeHand, Illustrator, CorelDRAW non compressi, WBMP, EPS, JPEG, GIF e GIF animati. All apertura di un file di formato diverso da PNG con File > Apri, viene creato un nuovo documento PNG di Fireworks basato sul file aperto. Il nuovo documento è un file PNG, mentre il file originale rimane invariato. Per ulteriori informazioni sulle operazioni con FreeHand, Photoshop, Illustrator e CorelDraw, consultare Uso di Fireworks con altre applicazioni a pagina 103. GIF animati Per trasferire in Fireworks i file GIF animati è possibile procedere in due modi: È possibile importare un file GIF animato come simbolo di animazione, che consente di modificare e spostare tutti gli elementi dell animazione come una sola unità e utilizzare il pannello Libreria per creare nuove istanze del simbolo. Nota: Quando si importa un GIF animato, l impostazione di ritardo fotogramma assume il valore di default di 7 centesimi di secondo. Se necessario, utilizzare il pannello Fotogrammi per ripristinare l impostazione di tempo originale. È possibile aprire un GIF animato come se si trattasse di un file GIF normale. Ogni elemento del GIF viene collocato come un immagine separata sul fotogramma di Fireworks corrispondente. Se lo si desidera, è possibile convertire il grafico in un simbolo di animazione. Informazioni di base su Fireworks 75

76 File EPS Fireworks consente di aprire la maggior parte dei file EPS, come i file EPS di PhotoShop, come immagini bitmap appiattite, nelle quali tutti gli oggetti sono combinati su un unico livello. Alcuni file EPS esportati da Illustrator, tuttavia, mantengono le proprie informazioni vettoriali. Quando si apre o si importa la maggior parte dei file EPS, si apre la finestra di dialogo Opzioni file EPS. Dimensioni immagine definisce le dimensioni dell immagine e le unità di visualizzazione delle proporzioni dell immagine. È possibile scegliere tra pixel, percentuali, pollici e centimetri. Risoluzione indica i pixel per pollice che si desidera impostare per la risoluzione. Vincola proporzioni apre il file con proporzioni di dimensioni uguali a quelle originali. Antialiasing smussa i bordi scalettati nel file EPS aperto. Quando si aprono o si importano file EPS di Illustrator contenenti informazioni vettoriali, si apre la finestra di dialogo Opzioni file vettoriali. Si tratta della stessa finestra di dialogo che appare aprendo o importando file di FreeHand. Per informazioni sulle opzioni di questa finestra di dialogo, consultare Importazione di elementi grafici di FreeHand in Fireworks a pagina 123. File WBMP Fireworks è in grado di aprire file WBMP, cioè file da 1 bit (monocromi) ottimizzati per dispositivi di calcolo mobili. Questo formato deve essere utilizzato per le pagine WAP (Wireless Application Protocol). È possibile aprire un file WBMP direttamente utilizzando File > Apri o importare un file WBMP utilizzando File > Importa. 76 Capitolo 3

77 Creazione di file PNG di Fireworks da file HTML Fireworks è in grado di aprire e importare un contenuto HTML creato in altre applicazioni. Quando si apre o si importa un file HTML, Fireworks ricostruisce il layout e i comportamenti definiti dal codice HTML, consentendo di ricreare le pagine Web che contengono elementi grafici porzione, pulsanti JavaScript e altri tipi di interattività. In tal modo, è possibile salvare siti Web ereditati anche se non si possiedono i file PNG sorgente. Con questa funzione è possibile aprire o importare rapidamente una pagina Web per aggiornare immagini grafiche, cambiare i layout di documenti o modificare i collegamenti di navigazione, i pulsanti e altri elementi interattivi, senza dover ricostruire la pagina da zero o modificarne lo script. Poiché Fireworks esporta il contenuto HTML in forma di tabella HTML, esso determina inoltre il layout del documento per il contenuto HTML importato sulla base delle tabelle HTML. Un file HTML deve contenere almeno una tabella affinché Fireworks sia in grado di ricostruirlo. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Per ottenere un contenuto HTML in Fireworks è possibile procedere in vari modi: È possibile aprire tutte le tabelle HTML in un file HTML. È possibile aprire la prima tabella HTML incontrata da Fireworks in un file HTML. È possibile importare la prima tabella HTML incontrata da Fireworks in un documento di Fireworks esistente. Nota: Fireworks è in grado inoltre di importare documenti che utilizzano la codifica UTF-8 e i documenti scritti in XHTML. In genere i file XHTML hanno estensione.xhtm o.xhtml. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Per aprire tutte le tabelle di un file HTML: 1 Scegliere File > Ricostituisci tabella. 2 Selezionare il file HTML contenente le tabelle che si desidera aprire e fare clic su Apri. Ciascuna tabella si apre nella propria finestra del documento. Per aprire solo la prima tabella di un file HTML: 1 Scegliere File > Apri. 2 Selezionare il file HTML contenente la tabella che si desidera aprire e fare clic su Apri. La prima tabella del file HTML si apre in una nuova finestra del documento. Per importare la prima tabella di un file HTML in un documento di Fireworks aperto: 1 Scegliere File > Importa. 2 Selezionare il file HTML dal quale si desidera effettuare l importazione e fare clic su Apri. 3 Fare clic sul puntatore di inserimento nel punto in cui si desidera che appaia la tabella importata. Inserimento di oggetti in un documento di Fireworks Nei documenti di Fireworks è possibile importare, trascinare e rilasciare o copiare e incollare oggetti vettoriali, immagini bitmap o testo creati in altre applicazioni. Inoltre si possono importare in Fireworks immagini da scanner o fotocamere digitali. Informazioni di base su Fireworks 77

78 Trascina e rilascia In Fireworks si possono trascinare e rilasciare oggetti vettoriali, immagini bitmap o testi provenienti da qualsiasi applicazione che supporti le funzionalità di trascinamento e rilascio: FreeHand 7 o versioni successive Flash 3 o versioni successive Photoshop 4 o versioni successive Illustrator 7 o versioni successive Microsoft Office 97 o versioni successive Microsoft Internet Explorer 3 o versioni successive Netscape Navigator 3 o versioni successive CorelDRAW 7 o versioni successive Per trascinare e rilasciare gli elementi prescelti in Fireworks: Dall altra applicazione, trascinare e rilasciare l oggetto o il testo in Fireworks. Incollaggio in Fireworks Incollando in Fireworks un oggetto copiato proveniente da un altra applicazione, l oggetto viene collocato al centro del documento attivo. È possibile copiare e incollare dagli Appunti un oggetto o un testo nei formati seguenti: FreeHand 7 o versioni successive Illustrator PNG PICT (Macintosh) DIB (Windows) BMP (Windows) Testo ASCII EPS WBMP TXT RTF Per incollare gli elementi prescelti in Fireworks: 1 Nell altra applicazione, copiare l oggetto o il testo che si desidera incollare. 2 In Fireworks, incollare l oggetto o il testo nel proprio documento. Collocazione degli oggetti incollati Quando si incolla un oggetto in Fireworks, la collocazione dell oggetto incollato dipende dalla selezione attiva: 78 Capitolo 3

79 Se è selezionato almeno un oggetto su un solo livello, l oggetto incollato viene collocato davanti all oggetto selezionato o impilato direttamente sopra di esso sullo stesso livello. Se è selezionato il livello e non è selezionato alcun oggetto o sono selezionati tutti gli oggetti, l oggetto incollato viene collocato davanti all oggetto superiore o impilato direttamente sopra di esso sullo stesso livello. Se sono selezionati due o più oggetti su più di un livello, l oggetto incollato viene collocato davanti all oggetto superiore o impilato direttamente sopra di esso sul livello più alto. Se è selezionato il livello Web o un oggetto sul livello Web, l oggetto incollato viene collocato davanti a tutti gli altri oggetti o impilato sopra di essi sul livello inferiore. Nota: Il livello Web è uno speciale livello che contiene tutti gli oggetti Web e rimane sempre nella parte superiore del pannello Livelli. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Ridefinizione di oggetti incollati Quando si incolla una bitmap con risoluzione diversa da quella impostata per il documento Fireworks di destinazione, Fireworks richiede se procedere alla sua ridefinizione. La ridefinizione aggiunge o sottrae pixel dall immagine ridimensionata in modo da farla corrispondere il più possibile all aspetto dell immagine originale. La ridefinizione di una bitmap a una risoluzione superiore causa in genere una perdita ridotta di qualità. La ridefinizione a una risoluzione inferiore causa invece sempre una perdita rilevante di dati e una caduta in termini di qualità. Per ridefinire un oggetto bitmap mediante incollaggio: 1 Copiare la bitmap negli appunti in Fireworks o in un altro programma. 2 Scegliere Modifica > Incolla in Fireworks. Se la risoluzione dell immagine bitmap negli appunti è diversa da quella del documento corrente, viene visualizzata una finestra di dialogo che richiede di scegliere se eseguire o meno la ridefinizione. 3 Scegliere una delle seguenti opzioni: Ridefinisci mantiene larghezza e altezza originali della bitmap incollata, aggiungendo o sottraendo pixel se necessario. Non ridefinire mantiene tutti i pixel originali, il che potrebbe rendere le dimensioni relative dell immagine incollata maggiori o minori di quanto previsto. Importazione di file PNG È possibile importare file PNG di Fireworks nel livello corrente del documento di Fireworks attivo. Gli oggetti punto attivo e porzione vengono collocati sul Livello Web del documento. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Per importare un file PNG in un livello del documento di Fireworks: 1 Nel pannello Livelli, selezionare il livello in cui si desidera importare il file. 2 Scegliere File > Importa per aprire la finestra di dialogo Importa. 3 Individuare il file da importare e fare clic su Apri. 4 Nell area di lavoro, posizionare il cursore di importazione nel punto in cui si desidera collocare l angolo superiore sinistro dell immagine. Informazioni di base su Fireworks 79

80 5 Importare il file: Fare clic per importare l immagine completa. Trascinare il cursore di importazione per ridimensionare l immagine mentre viene importata. Fireworks manterrà le proporzioni dell immagine. Importazione da uno scanner o fotocamera digitale Per permettere l importazione di immagini, uno scanner o una fotocamera digitale devono essere compatibili TWAIN (Windows) o supportare i plug-in di Photoshop Acquire (Macintosh). Le immagini importate in Fireworks da uno scanner o fotocamera digitale vengono aperte sotto forma di un nuovo documento. Nota: Fireworks non è in grado di importare immagini da scanner o fotocamere digitali, a meno che non siano stati installati i driver software, i moduli e i plug-in appropriati. Per istruzioni specifiche su installazione, impostazioni e opzioni, consultare la documentazione relativa al modulo TWAIN o al plug-in Photoshop Acquire. In ambiente Macintosh, Fireworks ricerca automaticamente i plug-in di Photoshop Acquire nella cartella Plug-in all interno della cartella delle applicazioni Fireworks. Se non si desidera collocare i plug-in in questa posizione, occorre indirizzare Fireworks a una collocazione alternativa. Nota: La collocazione esatta della cartella Plug-in varia a seconda del sistema operativo. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Per indirizzare Fireworks ai plug-in di Photoshop Acquire: 1 In Fireworks, scegliere Modifica > Preferenze. Nota: In Mac OS X, scegliere Fireworks > Preferenze. 2 Fare clic sulla scheda Cartelle. 3 Scegliere Plug-in Photoshop. 4 Fare clic su Sfoglia se la finestra di dialogo Seleziona la cartella di plug-in Photoshop (Windows) o Scegliere una cartella (Macintosh) non si apre automaticamente. 5 Portarsi sulla cartella contenente i plug-in di Photoshop. Per importare un immagine da uno scanner o da una fotocamera digitale, procedere come segue: 1 Collegare lo scanner o la fotocamera al computer. 2 Installare il software che accompagna lo scanner o la fotocamera, se tale operazione non è già stata eseguita. 3 In Fireworks, scegliere File > Scansione e selezionare un modulo TWAIN o il plug-in Photoshop Acquire corrispondente al dispositivo scelto per l importazione dell immagine. Nota: Per la maggior parte dei moduli TWAIN o dei plug-in di Photoshop Acquire, compariranno delle finestre di dialogo aggiuntive che richiedono di impostare altre opzioni. 4 Seguire le istruzioni indicate per procedere alle impostazioni dei parametri desiderati. L immagine importata viene aperta sotto forma di un nuovo documento di Fireworks. 80 Capitolo 3

81 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. L uso di un file PNG di Fireworks come file sorgente presenta i seguenti vantaggi: Il file PNG sorgente è sempre modificabile. È possibile tornare indietro e apportare modifiche ulteriori anche dopo aver esportato il file da utilizzare sul Web. Se si apre un file esistente di formato diverso, come JPEG, e quindi vi si apportano modifiche, il file originale è protetto. In effetti, le modifiche vengono apportate a un file PNG di Fireworks, lasciando invariato il file originale. Le immagini grafiche complesse possono essere sezionate in pezzi nel file PNG e quindi esportate come file multipli con formati e impostazioni di ottimizzazione diversi. I documenti di Fireworks vengono sempre salvati in formato PNG. Per salvare le modifiche apportate a un file JPEG, GIF o grafico di altro tipo nel formato originale, occorre esportare il file. Nota: In ambiente Windows, quando si apre un file non PNG in Fireworks, il file viene ancora identificato con la sua estensione originale nella finestra del documento di Fireworks. Tuttavia, ogni modifica apportata viene effettivamente eseguita sul file PNG di Fireworks. Per salvare un nuovo documento di Fireworks: 1 Scegliere File > Salva con nome. Si apre la finestra di dialogo Salva con nome. 2 Ricercare la collocazione desiderata e inserire il nome del file. Non occorre immettere un estensione, in quanto Fireworks la propone automaticamente. 3 Fare clic su Salva. Per salvare un documento di Fireworks esistente: Scegliere File > Salva. Per salvare (esportare) un documento in un altro formato: 1 Scegliere un formato di file nel pannello Ottimizza. 2 Scegliere File > Esporta per esportare il documento. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Informazioni di base su Fireworks 81

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

83 Uso del pannello Strumenti Il pannello Strumenti è organizzato in sei categorie: Seleziona, Bitmap, Vettore, Web, Colori e Visualizza. Nelle versioni precedenti di Fireworks, occorreva passare dalla modalità vettoriale alla modalità bitmap e viceversa. Ora è sufficiente scegliere uno strumento e iniziare ad utilizzarlo: è l applicazione ad applicare automaticamente lo strumento in modo appropriato. Modifica delle opzioni dello strumento Quando si sceglie uno strumento, la finestra di ispezione Proprietà visualizza le opzioni dello strumento. Alcune opzioni dello strumento rimangono visualizzate mentre si utilizza lo strumento. Per altri strumenti, come Penna, Linea e gli strumenti delle forme di base, la finestra di ispezione Proprietà visualizza le proprietà degli oggetti selezionati. Per ulteriori informazioni sulla finestra di ispezione Proprietà, consultare Uso della finestra di ispezione Proprietà a pagina 84. Per visualizzare le opzioni dello strumento nella finestra di ispezione Proprietà per uno strumento che si sta già utilizzando: Scegliere Seleziona > Deseleziona per deselezionare tutti gli oggetti. Informazioni di base su Fireworks 83

84 Per ulteriori informazioni sulle opzioni strumenti specifiche, consultare le sezioni del manuale Uso di Fireworks che presentano i vari strumenti o la guida in linea di Fireworks. Selezione di uno strumento da un gruppo di strumenti Un piccolo triangolo nell angolo inferiore destro di uno strumento del pannello Strumenti indica che esso fa parte di un gruppo di strumenti. Ad esempio, lo strumento Rettangolo fa parte del gruppo di strumenti delle forme di base, che comprende inoltre gli strumenti Rettangolo arrotondato, Ellisse e Poligono. Per scegliere uno strumento alternativo da un gruppo di strumenti: 1 Fare clic sull icona dello strumento e tenere premuto il pulsante del mouse. Appare un menu a comparsa contenente le icone degli strumenti, i nomi degli strumenti e i tasti di scelta rapida. A sinistra del nome dello strumento correntemente selezionato è presente un segno di spunta. 2 Trascinare il puntatore per evidenziare lo strumento desiderato e rilasciare il pulsante del mouse. Lo strumento appare nel pannello Strumenti, mentre le opzioni dello strumento appaiono nella finestra di ispezione Proprietà. Uso della finestra di ispezione Proprietà La finestra di ispezione Proprietà è un pannello sensibile al contesto che visualizza le proprietà della selezione corrente, le opzioni dello strumento corrente o le proprietà del documento. Per impostazione predefinita, la finestra di ispezione Proprietà è agganciata nella parte inferiore dello spazio di lavoro. La finestra di ispezione Proprietà può essere aperta a metà altezza, visualizzando solo due file di proprietà, o ad altezza completa, visualizzando quattro file. È possibile inoltre comprimere completamente la finestra di ispezione Proprietà pur lasciandola nello spazio di lavoro. Nota: Nella maggior parte delle procedure contenute nel manuale Uso di Fireworks si presume che la finestra di ispezione Proprietà sia visualizzata ad altezza completa. 84 Capitolo 3

85 Per sganciare la finestra di ispezione Proprietà: Trascinare il dispositivo di aggancio situato nell angolo superiore sinistro in un altro punto dello spazio di lavoro. Per agganciare la finestra di ispezione Proprietà alla parte inferiore dello spazio di lavoro (solo Windows): Trascinare la barra laterale della finestra di ispezione Proprietà nella parte inferiore dello schermo. Per espandere una finestra di ispezione Proprietà da metà altezza ad altezza completa, rivelando opzioni supplementari: Fare clic sulla freccia dell espansore nell angolo inferiore destro della finestra di ispezione Proprietà. Fare clic sull icona nella parte superiore destra della finestra di ispezione Proprietà e scegliere Altezza completa nel menu Opzioni della finestra di ispezione Proprietà. Nota: In ambiente Windows, il menu Opzioni è disponibile solo se la finestra di ispezione Proprietà è agganciata. Per ridurre la finestra di ispezione Proprietà a metà altezza: Fare clic sulla freccia dell espansore nell angolo inferiore destro della finestra di ispezione Proprietà. Scegliere Metà altezza nel menu Opzioni della finestra di ispezione Proprietà. Nota: In ambiente Windows, il menu Opzioni è disponibile solo se la finestra di ispezione Proprietà è agganciata. Per ridurre la finestra di ispezione Proprietà quando è agganciata: Fare clic sull icona dell espansore o sul titolo della finestra di ispezione Proprietà. Scegliere Riduci gruppo pannelli nel menu Opzioni della finestra di ispezione Proprietà agganciata. Per ulteriori informazioni sulle opzioni specifiche della finestra di ispezione Proprietà, consultare le sezioni appropriate del manuale Uso di Fireworks o la guida in linea di Fireworks. Uso dei pannelli I pannelli sono comandi flottanti che consentono di modificare vari aspetti di un oggetto selezionato o elementi del documento. I pannelli permettono di lavorare su fotogrammi, livelli, simboli, campioni colore e altro ancora. Ogni pannello può essere trascinato, in modo da consentire il raggruppamento dei pannelli in disposizioni personalizzate. Il Mixer colori e il pannello Campioni colore gestiscono la tavolozza colori del documento corrente. I pannelli Livelli e Fotogrammi consentono di organizzare la struttura dei documenti e contengono opzioni per la creazione, l eliminazione e la manipolazione dei livelli e dei fotogrammi. Il pannello Fotogrammi contiene opzioni per la creazione di animazioni. Il pannello Info fornisce informazioni sulle dimensioni degli oggetti selezionati e sulle coordinate esatte del puntatore mentre lo si sposta da un punto all altro dell area di lavoro. Informazioni di base su Fireworks 85

86 Il pannello Comportamenti permette di gestire i comportamenti, che determinano cosa avviene quando i punti attivi o le porzioni rispondono al movimento del mouse. Il pannello Cronologia elenca i comandi utilizzati più di recente, consentendo così di annullarli o ripristinarli con rapidità. È inoltre possibile selezionare più azioni e quindi salvarle e riutilizzarle come comandi. Per ulteriori informazioni, consultare Uso del pannello Cronologia per annullare e ripristinare operazioni multiple a pagina 101. Il pannello Libreria contiene simboli grafici e simboli per pulsanti e animazioni. È possibile trascinare con facilità istanze di questi simboli dal pannello Libreria al documento. È possibile effettuare modifiche globali a tutte le istanze semplicemente modificando il simbolo. Per ulteriori informazioni, consultare la Guida di Fireworks (Guida > Uso di Fireworks). Il pannello Ottimizza consente di gestire le impostazioni che controllano le dimensioni di un oggetto e il tipo di file e di lavorare con la tavolozza colori del file o della porzione da esportare. Il pannello Stili consente di memorizzare e riutilizzare le combinazioni di caratteristiche di oggetti oppure scegliere uno stile predefinito. Il pannello URL consente di creare librerie contenenti URL frequentemente utilizzati. Il pannello Trova e sostituisci consente di cercare e sostituire elementi come testo, URL, caratteri e colori in uno o più documenti. Il pannello Log progetti permette di tenere traccia e di controllare le modifiche apportate a più file quando si utilizza la funzione Trova e sostituisci o l elaborazione batch. Il pannello Risposte è una nuova risorsa in grado di scaricare dinamicamente ampie e utili informazioni dal sito Web Macromedia. Il pannello è dotato di funzioni di ricerca da tastiera per la ricerca di informazioni basate sul Web da una varietà di risorse. Organizzazione dei gruppi di pannelli e dei pannelli Per impostazione predefinita, i pannelli di Fireworks MX sono agganciati in gruppi nell area di aggancio sul lato destro dello spazio di lavoro. È possibile sganciare i gruppi di pannelli, aggiungere pannelli a un gruppo, sganciare singoli pannelli, riorganizzare l ordine dei gruppi di pannelli agganciati, nonché ridurre e chiudere i gruppi di pannelli. È possibile inoltre aprire e chiudere singoli pannelli. Per sganciare o spostare un gruppo di pannelli o un pannello: Trascinare il dispositivo di aggancio del pannello situato nell angolo superiore sinistro, allontanandolo dall area di aggancio del pannello posto sul lato destro dello schermo. Per agganciare un gruppo di pannelli o un pannello: Trascinare il dispositivo di aggancio del pannello sull area di aggancio del pannello. Mentre si trascina un pannello o un gruppo di pannelli sull area di aggancio, una riga o un rettangolo di anteprima del posizionamento mostra la sua collocazione tra i gruppi. Per ridurre o espandere un gruppo di pannelli o un pannello, eseguire una delle seguenti procedure: Fare clic sul titolo del gruppo di pannelli o del pannello. Nota: Quando il gruppo di pannelli o il pannello sono ridotti, la barra del titolo è ancora visibile. Fare clic sulla freccia dell espansore nell angolo superiore sinistro del gruppo di pannelli o del pannello. 86 Capitolo 3

87 Per separare un pannello da un gruppo di pannelli: Trascinare la scheda del pannello allontanandola dal gruppo di pannelli. Per aggiungere un pannello a un gruppo di pannelli aperto: Trascinare il dispositivo di aggancio del pannello sull area sottostante il nome del gruppo di pannelli. Per rinominare un gruppo di pannelli: 1 Fare clic sull icona nella parte superiore destra del gruppo di pannelli e scegliere Rinomina gruppo pannelli nel menu Opzioni. 2 Immettere il nuovo nome. Per riportare i pannelli alle posizioni predefinite per la risoluzione dello schermo, eseguire una delle seguenti procedure: Scegliere Comandi > Impostazioni layout pannelli > 800 x 600. Scegliere Comandi > Impostazioni layout pannelli > 1024 x 768. Scegliere Comandi > Impostazioni layout pannelli > 1280 x Per aprire un pannello: Scegliere il nome del pannello nel menu Finestra. Suggerimento: Un segno di spunta accanto al nome di un pannello nel menu Finestra indica che il pannello è aperto. Per chiudere un pannello, eseguire una delle seguenti procedure: Scegliere il nome del pannello nel menu Finestra. Fare clic sul pulsante Chiudi nella barra del titolo del pannello quando il pannello è sganciato. Per nascondere tutti i pannelli e la finestra di ispezione Proprietà: Scegliere Visualizza > Nascondi pannelli. Per visualizzare i pannelli nascosti, scegliere nuovamente Visualizza > Nascondi pannelli. Nota: I pannelli nascosti nel momento in cui si seleziona Nascondi pannelli rimangono nascosti quando si deseleziona il comando. Impostazione delle opzioni dei pannelli In genere, è possibile impostare le opzioni di un pannello utilizzando i menu a comparsa, le tavolozze colori, i dispositivi di scorrimento o di selezione. Ad alcune opzioni sono associate caselle di testo nelle quali è possibile immettere testo o valori. Per modificare un opzione utilizzando un menu a comparsa: 1 Fare clic sull opzione. 2 Modificare il valore: Scegliere un opzione o un campione colore. Trascinare il dispositivo di scorrimento o di selezione. Digitare la prima lettera dell opzione che si desidera scegliere e premerla ripetutamente per scorrere tutte le opzioni che iniziano con la lettera digitata (solo per Windows). Informazioni di base su Fireworks 87

88 Per inserire informazioni in una casella di testo di un pannello: 1 Fare clic nella casella di testo. 2 Digitare un valore. 3 Premere Invio. Uso di un gruppo di pannelli o del menu Opzioni di un pannello Ogni pannello o gruppo di pannelli presenta un menu Opzioni contenente un elenco di scelte specifiche per il pannello o gruppo di pannelli attivo. Un menu Opzioni appare inoltre nella finestra di ispezione Proprietà (tranne in Windows quando la finestra di ispezione Proprietà non è agganciata). Per scegliere un opzione dal menu Opzioni di un pannello o gruppo di pannelli: 1 Fare clic sull icona del menu Opzioni nell angolo superiore destro del pannello o del gruppo di pannelli per aprire il menu. 2 Fare clic per scegliere una voce di menu. Salvataggio del layout dei pannelli È possibile salvare il layout dei pannelli utilizzando il menu Comandi. La volta successiva che si apre Fireworks, i pannelli saranno disposti nella stessa posizione. Per salvare il layout di un pannello: 1 Scegliere Comandi > Salva layout pannelli. 2 Attribuire un nome al layout del pannello e fare clic su OK. Per aprire il layout salvato di un pannello: Scegliere Comandi > Impostazioni layout pannelli, quindi scegliere un layout di pannello nel sottomenu. 88 Capitolo 3

89 Informazioni sul pulsante Esportazione rapida Il pulsante Esportazione rapida consente di esportare i file di Fireworks in una serie di applicazioni Macromedia, tra cui Dreamweaver, Flash, Director e FreeHand. Inoltre, è possibile esportare i file in Photoshop, FrontPage, Adobe GoLive e Illustrator, oppure visualizzarli in anteprima nel browser prescelto. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Apertura e spostamento delle barre degli strumenti (solo per Windows) Fireworks MX per Windows comprende due barre degli strumenti contenenti i comandi comuni di Fireworks. Per visualizzare o nascondere una barra degli strumenti: Scegliere Finestra > Barre degli strumenti, quindi selezionare una barra degli strumenti. Per sganciare una barra degli strumenti: Trascinare la barra degli strumenti allontanandola dalla sua posizione di aggancio. Nota: Se una barra degli strumenti non è agganciata, è possibile fare clic sul pulsante Chiudi nell angolo superiore destro della barra del titolo per chiuderla. Per agganciare una barra degli strumenti: Trascinare la barra degli strumenti su un area di aggancio nella parte superiore, inferiore, sinistra o destra della finestra dell applicazione finché non compare il rettangolo di anteprima del posizionamento. Spostamento all interno dei documenti e loro visualizzazione È possibile controllare il rapporto di ingrandimento, il numero di viste e la modalità di visualizzazione del documento. Inoltre, è possibile effettuare una panoramica della vista del documento, che risulta particolarmente utile se, una volta effettuato un ingrandimento, l intera area di lavoro non risultasse più visibile nella sua interezza. Informazioni di base su Fireworks 89

90 Zoom e panoramica Fireworks consente di ingrandire o ridurre un documento a una percentuale di ingrandimento predefinita o stabilita dall utente. Strumento Zoom Menu a comparsa Zoom Strumento Mano Per ingrandire utilizzando incrementi preimpostati, eseguire una delle seguenti procedure: Scegliere lo strumento Zoom e fare clic all interno della finestra del documento per definire il nuovo punto centrale. Ad ogni clic l immagine viene ingrandita alla percentuale preimpostata successiva. Scegliere un impostazione di zoom nel menu a comparsa Imposta l ingrandimento situato nella parte inferiore della finestra del documento. Scegliere Ingrandisci o una percentuale di ingrandimento preimpostata nel menu Visualizza. Per ridurre utilizzando incrementi preimpostati, eseguire una delle seguenti procedure: Scegliere lo strumento Zoom e fare clic all interno della finestra del documento tenendo premuto il tasto Alt (Windows) o Opzione (Macintosh). Ad ogni clic la vista viene ridotta alla percentuale preimpostata successiva. 90 Capitolo 3

91 Scegliere un impostazione di zoom nel menu a comparsa Imposta l ingrandimento situato nella parte inferiore della finestra del documento. Scegliere Riduci o una percentuale di ingrandimento preimpostata nel menu Visualizza. Per ingrandire un area specifica senza essere vincolati a incrementi di ingrandimento preimpostati: 1 Scegliere lo strumento Zoom. 2 Trascinare il mouse sulla parte dell immagine che si desidera ingrandire. La dimensione della casella di selezione dello zoom definisce la percentuale di ingrandimento precisa, visualizzata nella casella di testo Imposta l ingrandimento. Nota: Non è possibile immettere una percentuale di ingrandimento nella casella di testo Imposta l ingrandimento. Per effettuare una riduzione basata su un area specifica: Tenere premuto il tasto ALT (Windows) o OPZIONE (Macintosh) e trascinare un area di selezione con lo strumento Zoom. Per ritornare alla percentuale di ingrandimento 100%: Fare doppio clic sullo strumento Zoom nel pannello Strumenti. Per effettuare una panoramica all interno del documento: 1 Scegliere lo strumento Mano. 2 Trascinare il puntatore Mano. Mentre si esegue la panoramica oltre l area di lavoro, la vista continua ad eseguire la panoramica consentendo di continuare a lavorare con i pixel sul bordo dell area di lavoro. Per adattare il documento alla vista corrente: Fare doppio clic sullo strumento Mano. Uso delle modalità di visualizzazione per gestire lo spazio di lavoro I pulsanti delle modalità di visualizzazione nell area Visualizza del pannello Strumenti consentono di scegliere tra una delle tre modalità di visualizzazione per controllare il layout dello spazio di lavoro: La Modalità schermo standard è la vista predefinita della finestra del documento. La Modalità a tutto schermo con menu è una vista a tutto schermo della finestra del documento impostata su uno sfondo grigio con menu, barre degli strumenti, barre di scorrimento e pannelli visibili. La Modalità a tutto schermo è una vista a tutto schermo della finestra del documento impostata su uno sfondo nero senza menu, barre degli strumenti o barre del titolo visibili. Per modificare le modalità di visualizzazione, eseguire una delle seguenti procedure: Per passare alla modalità a tutto schermo con menu, fare clic sul pulsante Modalità a tutto schermo con menu nel pannello Strumenti. Per passare alla modalità a tutto schermo, fare clic sul pulsante Modalità a tutto schermo nel pannello strumenti. Informazioni di base su Fireworks 91

92 Per tornare alla modalità Schermo standard, fare clic col pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto CONTROLLO (Macintosh) nella finestra del documento e selezionare Esci da Modalità a tutto schermo, oppure fare clic sul pulsante Modalità schermo standard nel pannello Strumenti. Visualizzazione di viste documento multiple Le viste multiple permettono di vedere contemporaneamente un documento a ingrandimenti differenti. Le modifiche apportate in una vista appariranno automaticamente in tutte le altre viste dello stesso documento. Per aprire una vista addizionale del documento a una diversa impostazione di zoom: 1 Scegliere Finestra > Nuova finestra. 2 Scegliere un impostazione di zoom per la nuova finestra. Per affiancare le viste del documento: Scegliere Finestra > Affianca in orizzontale o Finestra > Affianca in verticale. Per chiudere la finestra di una vista del documento: Fare clic sul pulsante Chiudi della finestra. Controllo del ridisegno del documento Le modalità di visualizzazione incidono sulla rappresentazione a video dei documenti, ma non sui dati degli oggetti o sulla qualità dell output. Per controllare il ridisegno del documento: Scegliere Visualizza > Completa. Quando è selezionato Completa, Fireworks visualizza il documento in tutti i colori disponibili con tutti i dettagli. Se Completa è deselezionato, Fireworks visualizza le tracce con un ampiezza di 1 pixel senza riempimento e visualizza le immagini barrate da una X. Modalità di visualizzazione e bozza Per visualizzare un documento nel modo in cui apparirebbe su una piattaforma diversa: In ambiente Windows, scegliere Visualizza > Gamma Macintosh. 92 Capitolo 3

93 In ambiente Macintosh, scegliere Visualizza > Gamma Windows. Fireworks visualizza in anteprima il modo in cui il documento apparirebbe sulla piattaforma dell altro computer. Ad esempio, se si lavora sulla piattaforma Windows, è possibile utilizzare questo comando per visualizzare in anteprima il modo in cui un documento apparirebbe sulla piattaforma Macintosh. Uso del Mini-Launcher Il Mini-Launcher contiene delle icone per aprire e chiudere i pannelli più frequentemente utilizzati, compresi i pannelli Mixer colori e Info, Ottimizza, Livelli, Libreria, Stili e Comportamenti. Se è attivo, il Mini-Launcher è situato nella parte inferiore della finestra del documento. Per impostazione predefinita il Mini-Launcher non è visibile. Per visualizzare il Mini-Launcher: 1 Scegliere Modifica > Preferenze. 2 Nella scheda Generale, scegliere Mostra icone schede nella sezione Spazio di lavoro e fare clic su OK. Per aprire o chiudere un pannello dal Mini-Launcher: Fare clic sull icona corrispondente del pannello. Nota: Lo sfondo dell icona del pannello è evidenziato mentre il pannello è aperto. Uso della barra di stato (solo per Windows) Se è attiva, la barra di stato è visualizzata nella parte inferiore della finestra dell applicazione di Fireworks. Essa offre utili suggerimenti e informazioni sugli oggetti e gli strumenti selezionati. Per impostazione predefinita la barra di stato è disattivata. Per attivare o disattivare la barra di stato: Scegliere Visualizza > Barra di stato. Per utilizzare la barra di stato: Selezionare un oggetto o uno strumento, oppure spostare il puntatore su uno strumento nel pannello Strumenti. Le informazioni sull oggetto o sull operazione selezionati vengono visualizzate nella barra di stato. Informazioni di base su Fireworks 93

94 Modifica dell area 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 dell area di lavoro nonché la risoluzione dell immagine. Mentre si lavora sul documento, è inoltre possibile ruotare l area di lavoro e tagliare parti non desiderate di esso. Modifica delle dimensioni, del colore e della risoluzione dell area di lavoro Fireworks semplifica la modifica delle dimensioni e del colore dell area di lavoro, nonché della risoluzione dell immagine. Per modificare le dimensioni dell area di lavoro: 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 Immettere le nuove dimensioni nelle caselle di testo Larghezza e Altezza. 3 Fare clic su un pulsante Aggancio per specificare quali lati dell area di lavoro di Fireworks aggiungere o eliminare, quindi fare clic su OK. Nota: Per impostazione predefinita, l aggancio centrale è selezionato, indicando che le modifiche alle dimensioni dell area di lavoro vengono effettuate su tutti i lati. Per modificare il colore dell area di lavoro dal menu Elabora: 1 Scegliere Elabora > Area di lavoro > Colore area di lavoro. 2 Scegliere Bianco, Trasparente o Personalizzato. Se si sceglie Personalizzato, fare clic su un colore nella finestra a comparsa dei campioni colore. Per selezionare il colore dell area di lavoro dalla finestra di ispezione Proprietà: 1 Scegliere Seleziona > Deseleziona, fare clic sullo strumento Puntatore per visualizzare le proprietà del documento nella finestra di ispezione Proprietà, quindi fare clic sulla casella Colore area di lavoro. 2 Selezionare un colore nella finestra a comparsa dei campioni colore, oppure fare clic con il contagocce su uno dei colori presenti sullo schermo. Per scegliere un area di lavoro trasparente, fare clic sul pulsante Nessuno nella finestra a comparsa dei campioni colore. Per ridimensionare un documento e il relativo contenuto: 1 Eseguire una delle seguenti procedure: Scegliere Seleziona > Deseleziona, fare clic sullo strumento Puntatore per visualizzare le proprietà del documento nella finestra di ispezione Proprietà, quindi fare clic sul pulsante Dimensioni immagine nella finestra di ispezione Proprietà. 94 Capitolo 3

95 Scegliere Elabora > Area di lavoro > Dimensioni immagine. Si aprirà la finestra di dialogo Dimensioni immagine. 2 Nelle caselle di testo Dimensioni in pixel, immettere le nuove dimensioni orizzontale e verticale per l immagine. È possibile modificare le unità di misura. Se l opzione Ridefinisci immagine non è selezionata, potranno essere modificati solo la risoluzione o le dimensioni di stampa, ma non le dimensioni in pixel. 3 Immettere i valori nelle caselle di testo Dimensioni di stampa per impostare le nuove dimensioni orizzontali e verticali dell immagine stampata. 4 Immettere i nuovi valori per la risoluzione dell immagine nella casella di testo Risoluzione. È possibile scegliere l unità pixel/pollice o pixel/cm, oppure selezionare Ridefinisci immagine. Modificando la risoluzione cambiano anche le dimensioni in pixel. 5 Eseguire una delle seguenti procedure: Per mantenere lo stesso rapporto tra le dimensioni orizzontale e verticale del documento, selezionare Vincola proporzioni. Deselezionare invece Vincola proporzioni per ridimensionare larghezza e altezza in modo indipendente. 6 Selezionare Ridefinisci immagine per aggiungere o eliminare pixel durante il ridimensionamento dell immagine e approssimare così lo stesso aspetto anche con dimensioni diverse. 7 Fare clic su OK. Informazioni di base su Fireworks 95

96 Informazioni sulla ridefinizione La ridefinizione in Fireworks differisce dalla maggior parte delle applicazioni di modifica immagini. Fireworks contiene infatti oggetti immagine basati su pixel e oggetti tracciati basati su vettori. Durante la ridefinizione della bitmap, è necessario aggiungere o eliminare pixel per ingrandire o ridurre l immagine. Durante la ridefinizione di un vettore, si verifica solo una ridotta perdita di qualità, in quanto il tracciato viene ridisegnato matematicamente nelle dimensioni maggiori o inferiori. Poiché gli oggetti vettoriali in Fireworks sono composti di pixel, alcuni tratti o riempimenti possono comparire leggermente diversi in seguito alla ridefinizione, in quanto i pixel che compongono il tratto o il riempimento devono essere ridisegnati. Nota: Durante la modifica delle dimensioni dell immagine, le guide, gli oggetti punto attivo e gli oggetti porzione vengono anch essi ridimensionati. Il ridimensionamento delle immagini bitmap presenta sempre il problema se aggiungere o rimuovere pixel per ridimensionare l immagine o piuttosto modificare il numero dei pixel per pollice o centimetro. È possibile modificare le dimensioni di un immagine bitmap regolando la risoluzione o ridefinendo l immagine. Regolando la risoluzione, si modificano le dimensioni dei pixel nell immagine, in modo che in un dato spazio possa essere contenuto un numero maggiore o minore di pixel. Regolando la risoluzione senza effettuare il ridimensionamento non si verifica una perdita di dati. La ridefinizione con ampliamento, vale a dire l aggiunta di pixel all immagine per ingrandirla, può a sua volta produrre una perdita di qualità perché i pixel aggiunti non sempre corrispondono all immagine originale. La ridefinizione con riduzione, vale a dire l eliminazione di pixel per ridurre l immagine, produce sempre una perdita di qualità, in quanto per ridimensionare l immagine vengono scartati dei pixel. La perdita di dati nell immagine è un altro effetto collaterale della ridefinizione con riduzione. Rotazione dell area di lavoro La rotazione dell area di lavoro è particolarmente utile quando l immagine importata risulta capovolta o posizionata lateralmente. L area di lavoro può essere ruotata di 180 gradi oppure di 90 gradi in senso orario e antiorario. Durante la rotazione dell area di lavoro, vengono ruotati anche tutti gli oggetti presenti nel documento. Per ruotare l area di lavoro, eseguire una delle seguenti procedure: Scegliere Elabora > Area di lavoro > Rotazione 180. Scegliere Elabora > Area di lavoro > Rotazione 90 in senso orario. Scegliere Elabora > Area di lavoro > Rotazione 90 in senso antiorario. 96 Capitolo 3

97 Ritaglio dell area di lavoro Se il documento contiene spazio vuoto in eccesso intorno al contenuto dell area di lavoro, è possibile ritagliare l area di lavoro. È inoltre possibile rimuovere lo spazio vuoto dell area di lavoro ritagliando il documento. Per ulteriori informazioni sul ritaglio, consultare Ritaglio di un documento a pagina 97. Originale; Area di lavoro ritagliata Per ritagliare l area di lavoro: Scegliere Elabora > Area di lavoro > Taglia area di lavoro. Le porzioni dell area di lavoro che si estendono oltre i pixel più esterni del documento vengono eliminate automaticamente. Ogni bordo dell area di lavoro è ritagliato in base ai bordi dell oggetto o degli oggetti del documento. Se il documento è formato da più fotogrammi, il comando Taglia area di lavoro opererà in modo da includere tutti gli oggetti di tutti i fotogrammi e non solo di quello corrente. Adattamento dell area di lavoro È possibile modificare l area di lavoro espandendola per adattarla agli oggetti che si estendono oltre i suoi margini. Per adattare l area di lavoro: Scegliere Elabora > Area di lavoro > Adatta area di lavoro. Ritaglio di un documento Con la funzione di ritaglio è possibile eliminare le porzioni indesiderate di un documento. L area di lavoro si ridimensiona per adattarsi all area definita dall utente. Per impostazione predefinita, il ritaglio consente di eliminare gli oggetti che si estendono oltre i margini dell area di lavoro. Per conservare gli oggetti all esterno dell area di lavoro, occorre modificare una preferenza prima del ritaglio. Informazioni di base su Fireworks 97

98 Per ritagliare un documento: 1 Scegliere lo strumento Ritaglio nel pannello Strumenti oppure selezionare Modifica > Ritaglia documento. 2 Trascinare una casella di delimitazione nell area di lavoro. Regolare le maniglie di ritaglio fino a quando la casella di delimitazione non circonda l area del documento da conservare. 3 Fare doppio clic all interno della casella di delimitazione o premere Invio per ritagliare il documento. L area di lavoro si ridimensiona in base all area definita e gli oggetti oltre i bordi dell area di lavoro vengono cancellati. Suggerimento: È possibile conservare gli oggetti esterni all area di lavoro deselezionando Elimina oggetti durante ritaglio nella scheda Modifica della finestra di dialogo Preferenze prima del ritaglio. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Uso di menu di contesto I menu di contesto permettono di accedere rapidamente ai comandi di rilievo per la selezione corrente. Per visualizzare un menu di contesto: Fare clic col pulsante destro del mouse (Windows) o fare clic tenendo premuto il tasto CONTROLLO (Macintosh) su un elemento selezionato nella finestra del documento. 98 Capitolo 3

99 Uso dei righelli, delle guide e della griglia Per creare un layout il più preciso possibile degli oggetti e agevolare le operazioni di disegno, utilizzare i righelli e le guide. È possibile collocare le guide nel documento e agganciarvi gli oggetti, oppure attivare la griglia di Fireworks e agganciarvi gli oggetti. Uso dei righelli I righelli consentono di misurare, organizzare e pianificare il layout del lavoro. Poiché le immagini di Fireworks sono destinate al Web dove gli elementi grafici vengono misurati in pixel, l unità di misura dei righelli in Fireworks è sempre il pixel, indipendentemente dall unità di misura utilizzata per creare il documento. Per visualizzare e nascondere i righelli: Scegliere Visualizza > Righelli. Informazioni di base su Fireworks 99

100 Appaiono i righelli verticali e orizzontali lungo i margini della finestra del documento. Uso delle guide Le guide sono linee che vengono trascinate dai righelli all area di lavoro del documento. Esse sono ausili di disegno che agevolano il posizionamento e l allineamento degli oggetti. Utilizzare le guide per contrassegnare parti importanti del documento, come i margini, il punto centrale e le aree in cui si desidera eseguire operazioni precise. Per agevolare l allineamento degli oggetti, Fireworks consente di agganciare questi ultimi alle guide. È possibile prevenire lo spostamento accidentale delle guide bloccandole. Nota: Le guide non risiedono su un livello o non vengono esportate con un documento. Esse sono unicamente strumenti di disegno. Fireworks dispone inoltre di guide porzione, che consentono di sezionare un documento da utilizzare sul Web. Tuttavia, le tradizionali guide immagine differiscono dalle guide porzione. Per ulteriori informazioni sulle guide porzione, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Per creare una guida orizzontale o verticale: 1 Fare clic e trascinare il mouse dal righello corrispondente. 2 Posizionare la guida sull area di lavoro e rilasciare il pulsante del mouse. Nota: Per riposizionare la guida è possibile trascinarla nuovamente. Per spostare una guida in una posizione specifica: 1 Fare doppio clic sulla guida. 100 Capitolo 3

101 2 Immettere la nuova posizione nella finestra di dialogo Sposta guida e fare clic su OK. Per mostrare o nascondere le guide: Scegliere Visualizza > Guide > Mostra guide. Per agganciare gli oggetti alle guide: Scegliere Visualizza > Guide > Aggancia alle guide. Per modificare i colori delle guide: 1 Scegliere Visualizza > Guide > Modifica guide. 2 Selezionare il nuovo colore della guida dall apposita finestra a comparsa e fare clic su OK. Per bloccare o sbloccare tutte le guide: Scegliere Visualizza > Guide > Blocca guide. Per rimuovere una guida: Trascinare la guida all esterno dell area di lavoro. Uso della griglia La griglia di Fireworks consente di visualizzare un sistema di linee orizzontali e verticali sull area di lavoro. La griglia è utile per posizionare con precisione gli oggetti. È possibile inoltre visualizzare, modificare, ridimensionare e modificare il colore della griglia. Nota: La griglia non risiede su un livello o non viene esportata con un documento. Si tratta di un semplice strumento di disegno. Per visualizzare e nascondere la griglia: Scegliere Visualizza > Griglia > Mostra griglia. Per agganciare gli oggetti alla griglia: Scegliere Visualizza > Griglia > Aggancia alla griglia. Per modificare il colore della griglia: 1 Scegliere Visualizza > Griglia > Modifica griglia. 2 Selezionare il nuovo colore della griglia dall apposita finestra a comparsa e fare clic su OK. Per modificare le dimensioni delle celle della griglia: 1 Scegliere Visualizza > Griglia > Modifica griglia. 2 Immettere i valori appropriati nelle caselle di testo della spaziatura orizzontale e verticale e fare clic su OK. Uso del pannello Cronologia per annullare e ripristinare operazioni multiple Con il pannello Cronologia è possibile visualizzare, modificare e ripetere le operazioni eseguite per creare il documento. Il pannello Cronologia riporta le operazioni più recenti eseguite in Fireworks, fino al numero specificato nel campo Livelli annullamento della finestra di dialogo Preferenze. Informazioni di base su Fireworks 101

102 Con il pannello Cronologia è possibile eseguire le seguenti operazioni: Annullare e ripristinare rapidamente le azioni recenti. Scegliere i comandi eseguiti di recente dal pannello Cronologia e ripeterli. Copiare negli Appunti i comandi selezionati come equivalente di testo JavaScript. Salvare un gruppo di azioni eseguite di recente come comando personalizzato, quindi scegliere quest ultimo dal menu Comando per riutilizzare il gruppo come comando unico. Per ulteriori informazioni, consultare la guida in linea di Fireworks (Guida > Uso di Fireworks). Per annullare e ripetere le azioni: 1 Scegliere Finestra > Cronologia per aprire il pannello Cronologia. 2 Trascinare il marcatore Annulla in alto o in basso. Per ripetere le azioni: 1 Eseguire le azioni. 2 Nel pannello Cronologia, eseguire una delle seguenti procedure per evidenziare le azioni da ripetere: Fare clic su un azione per evidenziarla. Fare clic tenendo premuto il tasto Ctrl (Windows) o il tasto COMANDO (Macintosh) per evidenziare più azioni singole. Fare clic tenendo premuto MAIUSC per evidenziare un intervallo continuo di azioni. 3 Fare clic sul pulsante Riproduci nella parte inferiore del pannello Cronologia. Per salvare le azioni da riutilizzare: 1 Evidenziare le azioni da salvare nel pannello Cronologia. 2 Fare clic sul pulsante Salva nella parte inferiore del pannello. 3 Inserire il nome di un comando e fare clic su OK. Per usare il comando personalizzato salvato: Scegliere il nome del comando desiderato dal menu Comandi. 102 Capitolo 3

103 CAPITOLO 4 Uso di Fireworks con altre applicazioni Macromedia Fireworks MX è un componente essenziale per lo sviluppo di contenuto destinato al Web o multimediale. L ampia gamma di funzionalità di integrazione di Fireworks permette di snellire la procedura di progettazione e di ottimizzarne l utilizzo con altre applicazioni. È possibile esportare elementi grafici di Fireworks in numerose applicazioni, ad inclusione di diversi altri prodotti di Macromedia. Se usato congiuntamente ad altre applicazioni Macromedia, Fireworks offre potenti caratteristiche di integrazione: Fireworks può essere lanciato per modificare elementi grafici selezionati dall interno di numerose applicazioni Macromedia, quali Dreamweaver, Flash, HomeSite, FreeHand e Director. I comportamenti di Fireworks sono preservati all esportazione verso numerose applicazioni Macromedia, permettendo l esportazione di elementi interattivi quali i pulsanti e i rollover. Dreamweaver e Fireworks condividono una funzionalità di integrazione nota come Roundtrip HTML che permette di apportare modifiche al file in un applicazione e fare in modo che quelle modifiche si riflettano perfettamente nell altra. Fireworks è strettamente integrato anche a Flash. Infatti, è possibile importare file sorgente PNG di Fireworks direttamente in Flash senza che sia necessario passare per nessun altro formato grafico intermedio. Flash offre una varietà di opzioni che permettono di controllare le modalità di importazione degli oggetti e dei livelli di Fireworks. Inoltre, Fireworks semplifica le attività di collaborazione con le applicazioni non Macromedia. L applicazione permette di lanciare e modificare facilmente elementi grafici e tabelle in Microsoft FrontPage, per esempio, oppure di importare ed esportare elementi grafici di Photoshop come file completamente modificabili. Operazioni con Macromedia Dreamweaver 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, l ottimizzazione e la collocazione dei file grafici per il Web nelle pagine HTML. Se si desidera elaborare le immagini e le tabelle di Fireworks all interno di un file di Dreamweaver, è possibile lanciare Fireworks per apportare le modifiche, quindi tornare al documento aggiornato in Dreamweaver. Per apportare rapidi interventi di ottimizzazione alle immagini e alle animazioni create con Fireworks, si può lanciare la finestra di dialogo di ottimizzazione di Fireworks e quindi immettere le impostazioni aggiornate. In entrambi i casi, gli aggiornamenti interesseranno sia i file collocati in Dreamweaver, che i file sorgente in Fireworks, qualora questi ultimi siano stati lanciati. 103

104 Per snellire ulteriormente il workflow del Web design, Dreamweaver consente di creare segnaposto per le immagini future di Fireworks. In seguito, è possibile selezionare questi segnaposto e lanciare Fireworks per creare elementi grafici desiderati nelle dimensioni specificate dalle immagini segnaposto di Dreamweaver. Una volta in Fireworks, le dimensioni dell immagine possono essere modificate a piacimento. Collocazione di immagini di Fireworks nei file di Dreamweaver Esistono due procedure alternative per collocare gli elementi grafici di Fireworks in un documento di Dreamweaver. È possibile collocare un elemento grafico completo di Fireworks utilizzando il menu Inserisci di Dreamweaver, oppure si può creare un nuovo documento di Fireworks da un immagine segnaposto di Dreamweaver. Inserimento delle immagini di Fireworks in Dreamweaver È possibile inserire immagini GIF o JPEG generate da Fireworks direttamente in un documento di Dreamweaver. Per prima cosa è necessario esportare le immagini da Fireworks. Per ulteriori informazioni sull esportazione di immagini GIF e JPEG, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per inserire un immagine di Fireworks in un documento di Dreamweaver: 1 Posizionare il punto di inserimento dove si intende far comparire l immagine nella finestra del documento di Dreamweaver. 2 Eseguire una delle seguenti procedure: Scegliere Inserisci > Immagine. Fare clic sul pulsante Inserisci immagine nella categoria Comune del pannello Oggetti. 3 Passare all immagine esportata da Fireworks, quindi fare clic su Apri. Se il file immagine non è nel sito corrente di Dreamweaver, compare un messaggio che richiede se si desidera copiare il file nella cartella del sito. Creazione di nuovi file di Fireworks dai segnaposto di Dreamweaver I segnaposto immagine combinano la potenza di Fireworks e Dreamweaver permettendo di sperimentare vari layout della pagina Web prima di creare l illustrazione finale. I segnaposto immagine permettono di specificare le dimensioni e la posizione di future immagini Fireworks da collocare in Dreamweaver. Quando si crea un immagine Fireworks da un segnaposto immagine Dreamweaver, viene creato un nuovo documento Fireworks con un area di lavoro delle stesse dimensioni del segnaposto selezionato. All interno di Fireworks, è possibile usare ogni strumento Fireworks per creare l elemento grafico. I documenti possono essere suddivisi in porzioni e resi interattivi con l aggiunta di pulsanti, rollover e altri comportamenti. Nota: Tutti i comportamenti applicati all interno di Fireworks sono conservati al ritorno a Dreamweaver. Allo stesso modo, la maggior parte dei comportamenti di Dreamweaver applicati a segnaposto immagine sono anch essi conservati durante il lancio e la modifica con Fireworks. Esiste una eccezione: i rollover disgiunti applicati ai segnaposto immagine di Dreamweaver non vengono conservati durante il lancio e la modifica in Fireworks. Una volta terminata la sessione di Fireworks e ritornati a Dreamweaver, il nuovo elemento grafico di Fireworks creato prende il posto del segnaposto immagine originariamente selezionato. 104 Capitolo 4

105 Per creare un immagine di Fireworks da un segnaposto immagine di Dreamweaver: 1 In Dreamweaver, salvare il documento HTML desiderato in una posizione all interno della cartella sito di Dreamweaver. 2 Posizionare il punto di inserimento nella posizione desiderata del documento e scegliere Inserisci > Segnaposto immagine. Nel documento Dreamweaver viene inserita un immagine segnaposto. 3 Eseguire una delle seguenti procedure: Selezionare l immagine segnaposto e fare clic su Crea nella finestra di ispezione Proprietà. Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic sull immagine segnaposto. Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO (Macintosh) e scegliere Crea immagine in Fireworks. Dreamweaver lancerà Fireworks, qualora quest ultimo non sia già aperto. La finestra del documento indica che si sta modificando un immagine da Dreamweaver. 4 Creare un immagine in Fireworks, quindi fare clic su Completato una volta ultimata. 5 Specificare un nome e una posizione per il file PNG sorgente nella finestra di dialogo Salva con nome, quindi fare clic su Salva. Nota: Il nome dell immagine segnaposto immesso dalla finestra di ispezione Proprietà in Dreamweaver viene usato come nome di file predefinito di Fireworks. Per ulteriori informazioni sul salvataggio dei file PNG di Fireworks, consultare Salvataggio dei file di Fireworks a pagina Specificare un nome per il file immagine esportato nella finestra di dialogo Esportazione. Queste sono le JPEG o le GIF che vengono visualizzate in Dreamweaver. 7 Specificare una posizione per il file o i file immagine esportati. La posizione scelta dovrebbe essere all interno della cartella del sito di Dreamweaver. Per ulteriori informazioni sull esportazione, consultare la guida di Fireworks (Guida > Uso di Fireworks). Uso di Fireworks con altre applicazioni 105

106 8 Fare clic su Salva. Quando si ritorna a Dreamweaver, l immagine segnaposto originariamente selezionata viene sostituita con la nuova immagine o tabella di Fireworks creata dall utente. Collocazione del codice HTML di Fireworks in Dreamweaver Esistono diversi metodi per collocare il codice HTML di Fireworks in Dreamweaver. L HTML di Fireworks può essere esportato, oppure copiato negli Appunti. Inoltre si può aprire in Dreamweaver un file HTML di Fireworks esportato e copiare e incollare sezioni specifiche del codice. Il codice esportato in Dreamweaver può essere facilmente aggiornato utilizzando il comando Aggiorna HTML in Fireworks. In alternativa, si può anche esportare il codice HTML come elemento della libreria di Dreamweaver. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks) Nota: Prima di esportare, copiare o aggiornare l HTML di Fireworks per l uso in Dreamweaver, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks. Esportazione dell HTML di Fireworks a Dreamweaver L esportazione di file di Fireworks a Dreamweaver è un processo in due fasi. Fireworks permette di esportare i file direttamente in una cartella sito di Dreamweaver, generando un file HTML e i file immagine associati nella posizione specificata. Il codice HTML viene poi collocato in Dreamweaver con la funzionalità Inserisci. Nota: Prima di esportare, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per esportare il codice HTML di Fireworks: Esportare il documento in formato HTML. Per ulteriori informazioni, consultare la guida di Fireworks. Per inserire in un documento di Dreamweaver il codice HTML creato con Fireworks: 1 In Dreamweaver, salvare il documento in un sito definito. 2 Inserire nel documento il punto iniziale del codice HTML. 3 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

107 5 Scegliere Cancella il file dopo l inserimento per spostare il file HTML nel Cestino (Windows e Macintosh) al termine dell operazione. Avvalersi di questa opzione qualora il file HTML di Fireworks non sia più necessario dopo l inserimento. Questa opzione non ha effetto sul file PNG sorgente associato al file HTML. Nota: Se il file HTML si trova su un unità di rete, questo verrà eliminato in modo permanente e non semplicemente spostato nel Cestino. 6 Fare clic su OK per inserire nel documento di Dreamweaver il codice HTML assieme alle immagini, alle porzioni e al JavaScript ad esso associati. Copia dell HTML di Fireworks negli Appunti per l uso in Dreamweaver Un sistema alternativo per collocare in Dreamweaver il codice HTML di Fireworks consiste nel copiarlo negli Appunti da Fireworks e quindi nell incollarlo direttamente in un documento di Dreamweaver. Tutto il codice HTML e JavaScript associato con il documento Fireworks viene copiato nel documento Dreamweaver, le immagini vengono esportate in una posizione specificata dall utente e Dreamweaver aggiorna l HTML con collegamenti a queste immagini correlati al sito. Nota: Prima di copiare l HTML negli appunti, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per copiare il codice HTML di Fireworks negli Appunti per utilizzarlo in Dreamweaver: Copiare il codice HTML negli Appunti da Fireworks e quindi incollarlo in un nuovo documento di Dreamweaver. Per ulteriori informazioni, consultare la guida di Fireworks. Copia dell HTML da un file di Fireworks esportato e incollaggio in Dreamweaver È possibile aprire in Dreamweaver un file HTML di Fireworks esportato e quindi copiare e incollare manualmente le sole sezioni desiderate in un altro documento di Dreamweaver. Nota: Prima di eseguire l esportazione da Fireworks, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per copiare il codice da un file di Fireworks esportato e incollarlo in Dreamweaver: Esportare un file HTML di Fireworks, quindi copiare e incollare il codice in un documento di Dreamweaver esistente. Per ulteriori informazioni, consultare la guida di Fireworks. Aggiornamento in Dreamweaver dell HTML di Fireworks esportato Il comando Aggiorna HTML di Fireworks permette di modificare un documento HTML precedentemente esportato in Dreamweaver. Nota: Sebbene Aggiorna HTML possa dimostrarsi utile per aggiornare il codice HTML precedentemente esportato a Dreamweaver, Roundtrip HTML offre vantaggi nettamente superiori. Per ulteriori informazioni, consultare Modifica dei file di Fireworks da Dreamweaver a pagina 109. Con il comando Aggiorna HTML, è possibile modificare un immagine PNG sorgente in Fireworks, poi aggiornare automaticamente tutto il codice HTML esportato e i file delle immagini collocati all interno di un documento di Dreamweaver. Questo comando permette di aggiornare i file di Dreamweaver anche qualora questo programma non sia in esecuzione. Nota: Prima di aggiornare l HTML di Fireworks, accertarsi di scegliere Dreamweaver come tipo di HTML nella finestra di dialogo Imposta HTML. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). Uso di Fireworks con altre applicazioni 107

108 Per aggiornare il codice HTML di Fireworks collocato in Dreamweaver: 1 Apportare modifiche al documento PNG desiderato in Fireworks. 2 Scegliere File > Aggiorna HTML, o fare clic sul pulsante Esportazione rapida e scegliere Aggiorna HTML dal menu a comparsa Dreamweaver. 3 Portarsi nel file di Dreamweaver contenente il codice HTML da aggiornare, quindi fare clic su Apri. 4 Portarsi nella cartella di destinazione in cui si intendono collocare i file delle immagini aggiornati, quindi fare clic su Apri. Fireworks aggiornerà il codice HTML e JavaScript nel documento di Dreamweaver. Inoltre, Fireworks esporterà le immagini associate al codice HTML e le collocherà nella cartella di destinazione specificata. Qualora Fireworks non riuscisse a reperire il codice HTML corrispondente da aggiornare, offrirà comunque la possibilità di inserire il nuovo codice HTML nel documento di Dreamweaver. Fireworks colloca la sezione JavaScript del nuovo codice all inizio del documento, mentre la tabella HTML o il collegamento all immagine vengono inseriti alla fine del file. Esportazione dei file di Fireworks nelle librerie di Dreamweaver Gli elementi della libreria di Dreamweaver semplificano la procedura di modifica e aggiornamento dei componenti più utilizzati del sito Web, quali i logo della società o altri elementi grafici che compaiono in tutte le pagine di un sito. Le voci di libreria costituiscono una parte del file HTML ubicata in una cartella Libreria al livello radice del sito. Le voci di libreria compaiono nella tavolozza Libreria di Dreamweaver. È possibile trascinare una copia dalla tavolozza della Libreria in qualsiasi pagina del sito Web. È impossibile modificare un elemento della libreria direttamente nel documento di Dreamweaver. Dal documento si può modificare solo l elemento libreria principale. Successivamente, Dreamweaver può aggiornare ogni copia di quell elemento presente nell intero sito Web. Gli elementi della libreria di Dreamweaver sono del tutto simili ai simboli di Fireworks; le modifiche al documento libreria principale (LBI) si riflettono in tutte le istanze della libreria del sito. Per esportare un documento di Fireworks come elemento della libreria di Dreamweaver: 1 Scegliere File > Esporta. 108 Capitolo 4

109 2 Scegliere Libreria Dreamweaver dal menu a comparsa Salva come tipo. Scegliere la cartella Libreria nel sito di Dreamweaver come posizione nella quale collocare i file. Se questa cartella non esiste, usare la finestra di dialogo Seleziona cartella per creare o individuare la cartella. La cartella deve avere il nome Libreria, dato che Dreamweaver è sensibile alla differenza fra maiuscole e minuscole. Nota: Dreamweaver non riconosce il file esportato come elemento di libreria a meno che non sia salvato nella cartella Libreria. 3 Nella finestra di dialogo Esporta, digitare un nome per il file. 4 Se l immagine contiene delle porzioni, scegliere le opzioni relative. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). 5 Selezionare Inserisci immagine nella sottocartella per scegliere una cartella separata per il salvataggio delle immagini. 6 Fare clic su Salva. Modifica dei file di Fireworks da Dreamweaver Roundtrip HTML è una potente funzionalità che ottimizza l integrazione tra Fireworks e Dreamweaver. Questa caratteristica permette di apportare modifiche in un applicazione e fare in modo che queste variazioni si riflettano senza soluzione di continuità anche nell altra. Roundtrip HTML utilizza la funzione di lancio e modifica integrata per intervenire su immagini e tabelle di Fireworks direttamente dal documento di Dreamweaver in cui sono inserite. Dreamweaver lancia automaticamente il file PNG sorgente di Fireworks per l immagine o la tabella collocata e permette di apportare le modifiche desiderate all interno di Fireworks. Gli aggiornamenti effettuati in Fireworks vengono applicati all immagine o tabella collocata quando il file viene riaperto con Dreamweaver. Nota: Prima di operare con Roundtrip HTML è necessario eseguire alcune operazioni preliminari. Per ulteriori informazioni, consultare Impostazione delle opzioni di lancio e modifica a pagina 115. Uso di Fireworks con altre applicazioni 109

110 Informazioni su Roundtrip HTML Fireworks riconosce e conserva la maggior parte dei tipi di modifiche apportate a un documento di Dreamweaver, incluse le variazioni dei collegamenti, le mappe immagine modificate, il testo e il codice HTML modificato nelle porzioni HTML, nonché i comportamenti condivisi tra Fireworks e Dreamweaver. La finestra di ispezione Proprietà di Dreamweaver permette di identificare le immagini, le porzioni in tabelle e le tabelle generate da Fireworks e presenti nel documento. Sebbene Fireworks supporti la maggior parte delle modifiche di Dreamweaver, l applicazione di variazioni di rilievo alla struttura di una tabella all interno di Dreamweaver può creare differenze inconciliabili tra le due applicazioni. Se si apportano modifiche di rilievo al layout di tabella di Dreamweaver e poi si tenta di lanciare e modificare la tabella in Fireworks, l utente viene informato che le modifiche effettuate da Fireworks sovrascriveranno qualsiasi precedente variazione alla tabella eseguita con Dreamweaver. Se si intendono apportare modifiche considerevoli a un layout di tabella, usare la funzionalità di lancio e modifica di Dreamweaver all interno di Fireworks. Modifica delle immagini di Fireworks È possibile lanciare Fireworks per modificare le singole immagini collocate all interno di un documento di Dreamweaver. Nota: Prima di modificare gli elementi grafici di Fireworks da Dreamweaver, è necessario eseguire alcune operazioni preliminari. Per ulteriori informazioni, consultare Impostazione delle opzioni di lancio e modifica a pagina 115. Per lanciare e modificare un immagine di Fireworks collocata in Dreamweaver: 1 In Dreamweaver, scegliere Finestra > Proprietà per aprire la finestra di ispezione Proprietà, se necessario. 2 Eseguire una delle seguenti procedure: Selezionare l immagine desiderata. (La finestra di ispezione Proprietà identifica la selezione come immagine di Fireworks e visualizza il nome del file PNG sorgente noto per l immagine). Quindi fare clic su Modifica nella finestra di ispezione Proprietà. Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic sull immagine da modificare. Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO (Macintosh) sull immagine desiderata e scegliere Modifica con Fireworks dal menu di collegamento. Dreamweaver lancerà Fireworks, qualora quest ultimo non sia già aperto. 3 Se richiesto, specificare se individuare un file sorgente di Fireworks per l immagine collocata. Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare Salvataggio dei file di Fireworks a pagina Modificare l immagine in Fireworks. La finestra del documento indica che si sta modificando un immagine da Dreamweaver. Dreamweaver riconosce e mantiene tutte le modifiche applicate a un immagine in Fireworks. 5 Al termine delle modifiche, fare clic su Fine nella finestra del documento. L immagine viene esportata utilizzando le impostazioni di ottimizzazione correnti. Viene aggiornato il file GIF o JPEG utilizzato da Dreamweaver e viene salvato il file PNG sorgente eventualmente selezionato. 110 Capitolo 4

111 Nota: Quando si apre un immagine nella finestra Sito di Dreamweaver, le funzioni di integrazione di Fireworks descritte in precedenza non sono operative e Fireworks non apre il file PNG originale. Per poter utilizzare le funzioni di integrazione di Fireworks, è necessario aprire le immagini dall interno della finestra del documento di Dreamweaver. Modifica delle tabelle di Fireworks Al lancio e modifica di una porzione di immagine che fa parte di una tabella di Fireworks collocata, Dreamweaver lancia automaticamente il file PNG sorgente per tutta la tabella. Nota: Prima di modificare le tabelle di Fireworks da Dreamweaver, è necessario eseguire alcune operazioni preliminari. Per ulteriori informazioni, consultare Impostazione delle opzioni di lancio e modifica a pagina 115. Per lanciare e modificare una tabella di Fireworks collocata in Dreamweaver: 1 In Dreamweaver, scegliere Finestra > Proprietà per aprire la finestra di ispezione Proprietà, se necessario. 2 Eseguire una delle seguenti procedure: Fare clic all interno della tabella, fare clic sul tag TABLE nella barra di stato per selezionare tutta la tabella. (La finestra di ispezione Proprietà identifica la selezione come immagine di Fireworks e visualizza il nome del file PNG sorgente noto per l immagine). Quindi fare clic su Modifica nella finestra di ispezione Proprietà Fare clic sull angolo superiore sinistro della tabella per selezionarla, quindi fare clic su Modifica nella finestra di ispezione Proprietà. Selezionare un immagine nella tabella, quindi fare clic su Modifica nella finestra di ispezione Proprietà. Tenere premuto il tasto CTRL (Windows) o COMANDO (Macintosh) e fare doppio clic sull immagine da modificare. Fare clic col pulsante destro del mouse (Windows) o tenendo premuto il tasto CONTROLLO (Macintosh) sull immagine, quindi scegliere Modifica con Fireworks dal menu di collegamento. Dreamweaver lancerà Fireworks, qualora quest ultimo non sia già aperto. Nella finestra del documento comparirà il file PNG sorgente per l intera tabella. Nota: Per ulteriori informazioni sui file sorgente PNG di Fireworks, consultare Salvataggio dei file di Fireworks a pagina In Fireworks, apportare le modifiche desiderate. Dreamweaver riconosce e mantiene tutte le modifiche applicate a un immagine in Fireworks. 4 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

112 Informazioni sui comportamenti di Dreamweaver Se un singolo elemento grafico non suddiviso in porzioni di Fireworks viene inserito in un documento di Dreamweaver e gli viene applicato un comportamento di Dreamweaver, al momento del lancio e modifica in Fireworks all elemento grafico viene sovrapposta una porzione. La porzione non è inizialmente visibile, dato che le porzioni sono automaticamente disattivate quando si lanciano e modificano elementi grafici singoli e non suddivisi ai quali siano stati applicati comportamenti di Dreamweaver. La porzione può essere visualizzata attivandone la visibilità dal livello Web del pannello Livelli. Quando si visualizzano le proprietà di una porzione di Fireworks dotata di un comportamento di Dreamweaver, la casella di testo del collegamento nella finestra di ispezione Proprietà può visualizzare javascript:;. L eliminazione di questo testo è assolutamente priva di conseguenze negative. Anche sovrapponendovi un URL, il comportamento rimarrà comunque intatto alla riapertura del file in Dreamweaver. Dreamweaver supporta tutti i comportamenti applicati a Fireworks, inclusi quelli richiesti per i rollover e i pulsanti. Durante una sessione di lancio e modifica Fireworks supporta i seguenti comportamenti di Dreamweaver: Rollover semplice Scambio di immagine Ripristino di immagini scambiate Impostazione del testo della barra di stato Impostazione dell immagine della barra di navigazione Menu a comparsa Ottimizzazione in Dreamweaver di immagini e animazioni di Fireworksr Dreamweaver permette di lanciare la finestra di dialogo Anteprima esportazione di Fireworks per apportare rapidi ritocchi alle immagini e alle animazioni di Fireworks collocate, come ad esempio la ridefinizione o la modifica del tipo di file. Fireworks permette di modificare le impostazioni di ottimizzazione, le impostazioni di animazione e le dimensioni e l area dell immagine esportata. Per modificare le impostazioni di ottimizzazione per un immagine di Fireworks collocata in Dreamweaver: 1 In Dreamweaver, selezionare l immagine desiderata e scegliere Comandi > Ottimizza immagine in Fireworks. 112 Capitolo 4

113 2 Qualora richiesto, specificare se lanciare un file sorgente di Fireworks per l immagine collocata. Si apre una finestra di dialogo. Sebbene la barra del titolo non visualizzi questo nome, si tratta della finestra di dialogo Anteprima esportazione di Fireworks. 3 Apportare le modifiche desiderate nella finestra di dialogo Anteprima esportazione: Per modificare le impostazioni di ottimizzazione, fare clic sulla scheda Opzioni. Per ulteriori informazioni, consultare la guida di Fireworks (Guida > Uso di Fireworks). Per modificare le dimensioni e l area dell immagine esportate, fare clic sulla scheda File e modificare le impostazioni desiderate. Se si modificano le dimensioni dell immagine in Fireworks, è necessario reimpostare le dimensioni dell immagine nella finestra di ispezione Proprietà quando si riapre il file in Dreamweaver. Per modificare le impostazioni dell animazione per l immagine, fare clic sulla scheda Animazione e variare i parametri definiti. 4 Al termine delle modifiche sull immagine, fare clic su Aggiorna. L immagine viene esportata utilizzando le nuove impostazioni di ottimizzazione. Di conseguenza, viene aggiornata l immagine GIF o JPEG posizionata in Dreamweaver e viene salvato l eventuale file sorgente PNG. Se è stato modificato il formato dell immagine, la funzione Controllo collegamenti di Dreamweaver richiederà di aggiornare i riferimenti all immagine. Ad esempio, se si è modificato il formato di un immagine denominata mia_immagine da GIF a JPEG, fare clic su OK quando richiesto per modificare tutti i riferimenti a mia_immagine.gif nel sito e cambiarli in mia_immagine.jpg. Uso di Fireworks con altre applicazioni 113