ADOBE FIREWORKS

                         ADOBE FIREWORKS

 

Fireworks permette di realizzare immagini, di ottimizzarle e di integrarle negli editor HTML. La guida guiderà nella creazione di un’interfaccia grafica per qualsiasi sito web.

 

Introduzione

 

Nota introduttiva: quanto diremo fa  specifico riferimento alla versione 4 del programma della Macromedia. Rispetto alla precedente ha una interfaccia utente un po’ modificata, ma non così tanto da renderne impossibile l’uso ai possessori della versione 3.  Sarà comunque indicato se l’argomento trattato fa riferimento alla sola versione 4.  Saranno riportati i nomi dei comandi, di tutte le opzioni citate ecc. nel tentativo di facilitarne l’uso  anche a chi stia valutando il programma usandone la versione trial.

Le caratteristiche di Fireworks 4 rendono il programma particolarmente adatto alla realizzazione grafica di siti internet. Con esso è possibile creare, per esempio, immagini statiche o animate, ma anche intere interfacce web complete di effetti ed interattività come rollover, barre di navigazione o menu a discesa. Il programma penserà poi ad esportare il tutto in formato HTML completo del codice JavaScript necessario e raccogliendo, se richiesto, tutte le immagini in una cartella.

 

Fireworks 4 comprende una vasta gamma di strumenti che permettono di elaborare sia immagini vettoriali che bitmap ed è dotato di funzioni che consentono la loro ottimizzazione riducendone le dimensioni senza per questo alterarne la qualità.

Fireworks si integra perfettamente con tutti gli altri programmi della Macromedia quali FreeHand o Director e, in modo particolare, con Flash 5 e Dreamweaver 4 con i quali condivide l’interfaccia utente. Ciò non toglie che sia possibile importare, o esportare, documenti da e per altri applicativi come, per esempio, Photoshop, Illustrator o CorelDraw.

Prima di entrare nel vivo può essere utile riassumere brevemente le differenze esistenti fra le immagini vettoriali e quelle bitmap:

 

 

L’ambiente di lavoro

 

All’apertura Fireworks, oltre alla classica barra dei menu nella parte superiore dello schermo, presenta un pannello Strumenti sul lato sinistro ed alcuni pannelli a schede sovrapposte nella parte destra. Tutti i pannelli sono mobili all’interno dello schermo e possono essere richiamati dal menu Finestra.

La finestra del documento, al centro dello schermo, risulta anch’essa composta da quattro schede sovrapposte:

Originale – è l’effettiva area di lavoro.

Anteprima – consente di visualizzare il documento come apparirà in un browser in base alle impostazioni di esportazione predefinite.

2-alto e 4-alto – permettono di confrontare anteprime basate su impostazioni di esportazione diverse.

Nella parte bassa della finestra del documento si trovano:

 

# I comandi per muoversi fra i vari frames (attivi nel caso si stia lavorando su una animazione)

# L’indicazione delle dimensioni (in pixel) del documento. Cliccando su questa area è possibile visualizzare la posizione dell’immagine all’interno di una pagina A4 e la risoluzione impostata.

# Il fattore di zoom che può essere variato aprendo il menu a discesa.

# Alcune icone che consentono di aprire o chiudere i pannelli di uso più frequente.

Il pannello degli strumenti contiene vari pulsanti, alcuni associati a singoli strumenti, altri a gruppi di strumenti riconoscibili per la presenza di una piccola freccia nera in basso a destra nel pulsante.

È importante notare che alcuni strumenti possono avere funzionalità diverse se si sta lavorando su immagini bitmap o vettoriali.

Nota: ogni volta che  verrà introdotto l’uso di un nuovo strumento sarà riportata l’immagine del pulsante corrispondente.

 

 

Creare, aprire ed importare documenti

 

Quando si crea un nuovo documento in Fireworks 4 si apre una finestra di dialogo in cui possiamo specificare le dimensioni, la risoluzione e il colore di sfondo del documento.

L’unità di misura proposta dal programma per le dimensioni è il pixel, ma è possibile scegliere anche centimetri o pollici. Per la risoluzione invece l’impostazione di default è pixels/pollice e l’alternativa è pixels/cm.

 

Per quanto riguarda il colore di sfondo dell’area di lavoro le opzioni proposte sono Bianco, trasparente o Personalizza.

Nota: lo sfondo potrà comunque essere reso trasparente al momento di esportare l’immagine in formato GIF (vedi Salvare ed esportare documenti)

Scegliendo di personalizzare il colore di sfondo si accede alla finestra a comparsa Vaschetta dei Colori nella quale è visualizzata la tavolozza predefinita di Fireworks (per maggiori dettagli riguardo alla Vaschetta dei Colori vedere la trattazione corrispondente)

Le dimensioni e il colore di sfondo del documento possono essere cambiate in qualunque momento mediante i comandi Elabora > Dimensioni area di lavoro e Elabora > Colore area di lavoro. Quando si modificano le dimensioni è possibile, cliccando sul pulsante Aggancio, scegliere su quali lati del documento verranno aggiunti o tolti pixel.

 

Nel menu Elabora è presente anche il comando Dimensioni immagine tramite cui si può ridimensionare il documento e il suo contenuto e/o modificare la risoluzione scelta.

Per quanto riguarda l’apertura di documenti esistenti Fireworks, oltre al proprio formato nativo PNG (acronimo di Portable Network Graphic), è in grado di aprire anche documenti provenienti da altre applicazioni quali per esempio Photoshop, FreeHand, Illustrator, CorelDraw.

 

Nota: per quanto riguarda i file di CorelDraw Fireworks gestisce solo documenti provenienti dalle versioni 7 e 8 e salvati in formato non compresso.

In ogni caso all’apertura del documento ne viene creato uno nuovo con estensione PNG lasciando in tal modo inalterato il file originale.

Gli stessi tipi di immagini oltre ad essere aperti con Fireworks possono anche essere importati, in tal caso l’immagine verrà inserita all’interno di un documento esistente e in uno specifico livello.

 

 

Salvare ed esportare documenti

 

Fireworks è in grado di salvare i documenti solo in formato PNG mantenendo tutti i livelli e gli oggetti vettoriali inseriti. Questo formato però non visualizzabile nei browser e occorre quindi esportare i documenti come immagini bitmap ad un unico livello nei formati JPG o GIF.

Nota: il programma è in grado di eseguire anche altri tipi di esportazione di cui ci occuperemo nella parte avanzata .

Per l’esportazione delle immagini risulta molto valido l’uso del comando File > Autocomposizione esporta che consente, rispondendo a una serie di domande, di scegliere il tipo di file e di ottimizzarlo per l’uso cui è destinato.

In particolare la prima finestra di dialogo permette, se necessario, di inserire le dimensioni massime in kbyte che deve avere il file.

 

Prima dell’effettiva esportazione compare la finestra di Anteprima Esportazione (ottenibile anche direttamente con il comando File > Anteprima esportazione). Nella parte destra della finestra vengono visualizzate le due opzioni di esportazione consigliate, per scegliere una delle due è sufficiente cliccare sul riquadro corrispondente. Volendo è sempre possibile effettuare delle modifiche alle impostazioni proposte.

Di particolare interesse nelle due finestre di anteprima, sono le indicazioni riguardanti le dimensioni dell’immagine che si otterrà e il tempo impiegato per scaricarla da un utente che usi un modem a 28,8 kbps.

Sempre dalla finestra Anteprima esportazione è possibile, nel caso che il formato scelto sia GIF, rendere trasparente lo sfondo scegliendo, dal menu a discesa che si trova in basso a sinistra, trasparenza indice. I tre pulsanti a destra del menu a discesa servono invece per selezionare il colore che si vuole rendere trasparente e per aggiungere o sottrarre colori alla trasparenza.

 

 

Righelli linee guida e griglia

 

Per ottenere un posizionamento più preciso degli oggetti all’interno del documento, Fireworks mette a disposizione tre strumenti di disegno: i righelli, le linee guida e la griglia.

Righelli – Possono essere visualizzati (o nascosti) con il comando Visualizza > Righello e sono sempre suddivisi in pixel, indipendentemente dall’unità di misura scelta al momento della creazione del documento.

 

Linee guida – Risultano molto utili per posizionare e allineare gli oggetti o per contrassegnare punti particolari dell’area di lavoro. Per inserirle è sufficiente cliccare sul righello (orizzontale o verticale) e trascinare il mouse all’interno dell’area di lavoro. Il movimento opposto le elimina dal documento mentre il comando Visualizza > Guide > Mostra guide le rende invisibili. Una volta inserite le linee guida i righelli possono essere nascosti.

Per ottenere un posizionamento più preciso delle linee guida basta fare doppio clic su di esse e impostare il valore scelto (in pixel), mentre, per evitare uno spostamento accidentale, è possibile bloccarle scegliendo Visualizza > Guide > Blocca guide.

Il colore di default delle linee guida è verde chiaro e può essere modificato con il comando Visualizza > Guide > Modifica guide.

Per semplificare l’allineamento degli oggetti è possibile agganciarli alle linee guida scegliendo Visualizza > Guide > Aggancia alle guide

 

Griglia – Si tratta di un insieme di linee orizzontali e verticali che suddividono l’area di lavoro in celle e che può essere visualizzato o nascosto scegliendo Visualizza > Griglia > Mostra griglia. Di default le celle hanno dimensioni 36×36 pixel e colore nero, ma entrambe le impostazioni possono essere modificate mediante il comando Visualizza > Griglia > Modifica griglia.

Gli oggetti possono essere agganciati alla griglia scegliendo Visualizza > Griglia > Aggancia alla griglia.

 

 

Uso della vaschetta dei colori

 

Il pannello della Vaschetta dei colori è, forse, quello con cui si ha più frequentemente a che fare in Fireworks. Compare ogni volta che si deve selezionare un colore, sia esso per lo sfondo del documento, per il riempimento o per il contorno di un oggetto, per un testo o altri effetti particolari.

Si accede alla Vaschetta dei colori cliccando sul quadratino che riporta il colore correntemente selezionato. Nella parte bassa del Pannello degli Strumenti si trovano, per esempio, i selettori del colore di contorno e di riempimento degli oggetti vettoriali:

 

 

 

In alto a partire da sinistra abbiamo: un campione del colore selezionato, il suo codice esadecimale, il pulsante per impostare nessun colore (in alcune vaschette non è presente), il pulsante per la creazione di colori personalizzati e una freccia, cui corrisponde un menu a discesa, che permette di cambiare la tavolozza dei colori.

I colori possono essere scelti cliccando sui quadratini corrispondenti nella tavolozza o inserendo direttamente il codice esadecimale da tastiera.

Quando il cursore del mouse esce dall’area del pannello della vaschetta diventa un contagocce in grado di prelevare il colore da qualunque punto dello schermo.

La tavolozza di colori impostata di default è Web-Safe a 216 colori. Questo significa che i colori riportati sono “colori sicuri”, cioè colori che saranno riprodotti fedelmente da qualsiasi browser anche con vecchie schede video che supportino al massimo 256 colori.

 

 

Disegnare forme semplici

 

Quelli riportati sono gli strumenti di disegno di Fireworks che si trovano nel pannello degli Strumenti e mediante i quali è possibile tracciare rapidamente linee, rettangoli, ellissi, poligoni equilateri con un numero di lati compreso fra 3 e 360, o stelle.

L’uso degli strumenti è immediato: una volta scelta la forma basta spostarsi nell’area di lavoro cliccare e trascinare fino alle dimensioni scelte. In tal modo si ottiene una figura con riempimento e contorno dei colori riportati sul Pannello degli Strumenti.

Per ottenere dimensioni e posizione precise si può utilizzare il pannello Info (Finestra > Info) in cui sono riportate, in pixel, larghezza e altezza e la distanza dell’angolo in alto a sinistra rispetto ai margini sinistro e superiore dell’area di lavoro.

Tenendo premuto il tasto MAIUSC durante il trascinamento si ottengono:

 

# linee orizzontali, verticali o inclinate di 45 rispetto all’orizzontale se si sta usando lo strumento Linea;

# quadrati o cerchi se si stanno usando gli strumenti Rettangolo, Rettangolo arrotondato o Ellisse.

Tenendo premuto il tasto ALT durante il trascinamento si ottengono forme disegnate a partire dal punto centrale.

Mediante lo strumento Rettangolo arrotondato è possibile disegnare rettangoli con angoli arrotondati e il valore dell’arrotondamento (numero compreso fra 0 e 100) può essere variato in modo dinamico, mentre si trascina il mouse, premendo i tasti Freccia Su e Giù.

Una volta tracciato il rettangolo il valore dell’arrotondamento può essere modificato dal pannello Oggetto (Finestra > Oggetto).

Per disegnare un poligono o una stella occorre fare doppio clic sullo strumento Poligono. In questo modo si apre il pannello Opzioni in cui:

 

# dal menu a discesa Forma si sceglie se tracciare un poligono o una stella;

# nella casella Lati si imposta il numero dei lati (o di punte nel caso della stella)

# nella casella Angolo (attiva solo se si è scelto Stella) si può scegliere Acutezza automatica o inserire un valore (compreso fra 0 e 100) per l’ampiezza delle punte. Valori piccoli danno luogo a punte lunghe e sottili, mentre con valori grandi si ottengono punte corte e smussate.

I poligoni e le stelle vengono sempre disegnati partendo dal punto centrale, mentre tenendo premuto il tasto MAIUSC durante il trascinamento si vincola la figura ad avere un orientamento di 45° rispetto all’orizzontale.

 

 

Gli strumenti di selezione

 

Fireworks mette a disposizione diversi strumenti di selezione in grado di selezionare forme, blocchi di testo o immagini bitmap.

 

 

Suggerimento: questa operazione, eseguita mentre si tiene premuto il tasto ALT, consente di creare rapidamente una copia degli oggetti selezionati anche se si tratta di immagini bitmap.

 

 

Lo strumento Esporta area consente di selezionare una parte dell’area di lavoro e inviarla direttamente (con un doppio clic all’interno della selezione) alla finestra Anteprima esportazione, lasciando inalterato il documento originale.

Dal pannello Info è possibile specificare le dimensioni e la posizione rispetto ai margini del documento dell’area da esportare.

 

 

Suggerimento: per disegnare un triangolo rettangolo è sufficiente tracciare un rettangolo poi, con lo strumento Sottoselezione, cliccare su uno dei nodi in corrispondenza degli angoli e premere Canc.

Nota: lo spostamento degli oggetti, oltre che per trascinamento con gli strumenti Puntatore, Seleziona dietro e Sottoselezione, può essere fatto mediante i tasti freccia. Ogni pressione dei tasti corrisponde a uno spostamento di 1 pixel, mentre se si tiene premuto il tasto MAIUSC si ottengono spostamenti di 10 pixel.

 

 

Copiare, duplicare e clonare

 

Abbiamo già visto  che si può ottenere rapidamente una copia degli oggetti selezionati tenendo premuto il tasto ALT mentre si trascina il mouse. In Fireworks esistono anche i comandi Modifica > Duplica e Modifica > Clona. Entrambe le operazioni producono oggetti identici all’originale che diventano automaticamente gli oggetti selezionati. La differenza fra i due comandi sta solo nella posizione del nuovo oggetto. Gli oggetti duplicati vengono parzialmente sovrapposti all’originale, mentre quelli clonati risultano impilati esattamente davanti all’originale consentendo un controllo più preciso riguardo alle posizioni relative dei due oggetti.

Un risultato perfettamente identico alla clonazione si ottiene con il tradizionale metodo Modifica > Copia, Modifica > Incolla.

Nota: nel menu modifica esistono anche i comandi Incolla come maschera, Incolla dentro  e Incolla attributi che consente di assegnare ad un oggetto informazioni riguardanti riempimento, contorno ed effetti dal vivo prelevati da un altro.

# Selezionare l’oggetto origine e scegliere Modifica > Copia

# Selezionare l’oggetto destinazione e scegliere Modifica > Incolla attributi

 

 

trasformare e distorcere

 

Dopo aver selezionato un oggetto è possibile modificarne l’aspetto scegliendo uno dei tre strumenti di trasformazione messi a disposizione di Fireworks.

Effettuata la scelta, compariranno intorno all’oggetto le maniglie di trasformazione e in mezzo il centro di rotazione.

L’oggetto può essere ruotato indifferentemente con tutti gli strumenti: una volta spostato il centro di rotazione, se necessario, portando il mouse appena fuori dal perimetro di selezione appare il cursore di rotazione. Cliccando e trascinando in quel punto si ottiene la rotazione della forma.

Nota: la posizione del centro di rotazione può essere letta in basso a destra sul pannello Info; il centro di rotazione può essere riportato in mezzo alla figura con un doppio clic su di esso.

 

Strumento di trasformazione Scala: consente di modificare indipendentemente altezza e larghezza se si usano le maniglie al centro dei lati, e di scalare le dimensioni dell’oggetto in modo proporzionale se si usano quelle posizionate agli angoli.

 

 

Se si ha necessità di controllare in modo preciso le operazioni di scalatura, ridimensionamento o rotazione è preferibile usare il comando Elabora > trasformazione > trasformazione numerica. Nel menu a discesa della finestra di dialogo si può scegliere il tipo di trasformazione desiderata impostando poi i valori numerici in pixel nelle caselle corrispondenti. L’opzione Scala attributi permette di trasformare insieme all’oggetto anche il riempimento, il contorno e gli effetti dal vivo. L’opzione Vincola proporzioni consente invece di mantenere un rapporto costante fra le dimensioni dell’oggetto.

Per riflettere un oggetto orizzontalmente o verticalmente senza modificarne la posizione scegliere Elabora > trasformazione > Rifletti in orizzontale o Rifletti in verticale.

Per dividere in due parti una forma si può usare lo strumento Coltello. Basta cliccare e trascinare lo strumento attraverso l’oggetto per ottenerne due parti modificabili separatamente.

 

 

Raggruppare, impilare e allineare

 

In Fireworks gli oggetti, siano essi vettoriali o bitmap, possono essere raggruppati in modo da poterli trattare come se fossero un unico oggetto scegliendo Elabora > Raggruppa (il gruppo creato può essere separato in qualsiasi momento con il comando Elabora > Separa).

 

Come abbiamo già visto all’interno di un gruppo è comunque possibile selezionare un singolo elemento (e quindi modificarlo) con lo strumento Sottoselezione.

 

Oggetti diversi, creati sullo stesso livello, risulteranno impilati uno sull’altro in base all’ordine con cui sono stati creati (quello creato per ultimo sarà sopra a tutti gli altri). L’ordine di impilamento può essere modificato mediante i comandi:

 

# Elabora > Disponi > In primo piano o Sullo sfondo: portano l’oggetto selezionato davanti o dietro a tutti gli altri

# Elabora > Disponi > Avanti o Indietro: spostano l’oggetto di una posizione in avanti o indietro.

Sempre nel menu Elabora si trovano i comandi che consentono di allineare più oggetti, preventivamente selezionati, uno rispetto all’altro:

# Allinea > A sinistra o A destra: allinea tutti gli oggetti a quello che si trova più a sinistra (a destra)

# Allinea > Centrato verticale o Centrato orizzontale: allinea i punti centrali dei vari oggetti lungo l’asse verticale (orizzontale) che passa per il punto di mezzo del gruppo di oggetti

# Allinea > In basso o In alto: allinea gli oggetti a quello che si trova più in basso (alto).

 

 

Riempimenti

 

Ogni oggetto vettoriale, quando viene tracciato, avrà come colore di riempimento quello indicato nella Vaschetta dei colori sul pannello degli Strumenti.

Nota: questo non vale per le forme disegnate con gli strumenti Pennello, Matita o Penna che, una volta terminato il disegno, vengono visualizzati senza riempimento.

In Fireworks la personalizzazione di un riempimento avviene tramite il pannello Riempimento.

Partendo dall’alto nel pannello troviamo il menu a comparsa Categoria riempimento in cui possiamo scegliere fra Motivo, Dithering Web o uno dei diversi tipi di sfumatura.

Riempimento sfumato – compaiono un altro menu a tendina (Nome sfumatura) che ci presenta varie sfumature preimpostate e il pulsante Modifica che ci permette di accedere alla finestra Modifica sfumatura. In questa finestra troviamo la sfumatura scelta, i campioni dei colori che la compongono e un’anteprima del risultato. Le modifiche che possono essere apportate a una sfumatura sono:

 

# regolazione della transizione fra i colori: cliccare su un campione di colore e trascinarlo nella posizione scelta;

# modifica di un colore: cliccare sul campione e scegliere il nuovo colore nella Vaschetta dei colori che compare;

# aggiunta un colore: cliccare nell’area della finestra che sta fra i campioni di colore già esistenti

# eliminazione di colore: trascinare il campione di colore fuori dalla finestra.

 

Riempimento a motivo – consente di riempire l’oggetto con una immagine bitmap. Nel menu a tendina che compare (Nome motivo) si può impostare uno dei motivi messi a disposizione da Fireworks o un file esterno, scegliendo Altro alla fine dell’elenco.

Sia che si sia scelto un riempimento sfumato o uno a motivo sull’oggetto selezionato compaiono delle maniglie che permettono di regolare in modo interattivo il riempimento stesso. La maniglia a forma di cerchio indica in centro del riempimento, con quelle quadrate invece è possibile ruotarlo o deformarlo.

 

Riempimento Dithering Web – in modo molto conciso possiamo dire che si tratta di un metodo che permette, unendo due colori della tavolozza Web Safe, di riprodurre al meglio possibile un colore che non fa parte della tavolozza. Si adotta questo metodo quando c’è la necessità di usare un colore non web safe ma questo può comportare un aumento delle dimensioni del file.

Per ogni tipo di riempimento è poi possibile impostare aspetti diversi per il suo bordo scegliendo, dal menu a tendina Bordo fra:

 

# Bordo rigido

# Anti-Alias: impostazione predefinita che attenua leggermente i bordi irregolari

# Morbidezza: in questo caso nella casella a destra si può impostare un valore (compreso fra 0 e 100) che rappresenta il numero di pixel su cui deve essere applicata la sfumatura.

Ad ogni tipo di riempimento si può applicare anche una texture scegliendo, dal menu a tendina corrispondente, fra quelle messe a disposizione dal programma o prelevandola da un file esterno (si possono usare anche immagini bitmap).

Nella casella a destra deve essere inserito il valore, in percentuale, dell’intensità delle texture che, con l’opzione trasparente, può essere resa trasparente.

 

 

Contorni e tratti

Sia il contorno degli oggetti che i tratti ottenuti con gli strumenti Linea, Pennello, Matita e Penna possono essere personalizzati con il pannello tratto.

 

 

Fireworks mette a disposizione una decina di categorie di tratto fra cui scegliere (Matita, Acquarelle, Olio, Aerografo, ecc.) e ad ognuna di esse sono associabili varie forme della punta, dimensioni e morbidezza diverse nonché texture analoghe a quelle dei riempimenti.

Con un doppio clic in corrispondenza dell’anteprima Punte si accede alla finestra di dialogo Modifica tratto mediante la quale si possono fare ulteriori scelte rendendo la gamma di combinazioni possibili davvero enorme.

 

Per quanto riguarda i contorni degli oggetti è possibile decidere, usando il pannello Oggetto, la posizione del tratto rispetto ai margini dell’oggetto. I tre pulsanti di posizionamento, partendo da sinistra corrispondono a: tratto interno, centrato ed esterno al tracciato.

Sotto compare l’opzione che stabilisce se il colore di riempimento deve coprire o meno la parte di tratto che si trova all’interno del tracciato.

Nota: l’applicazione di texture ai tratti risulta più efficace se i tratti sono spessi.

 

 

Effetti dal vivo

 

In Fireworks l’applicazione di effetti, quali per esempio l’aggiunta di un’ombra, di un bordo smussato o di un rilievo, è estremamente versatile. I vari effetti, una volta applicati, possono essere attivati e disattivati rapidamente e ogni volta che si modifica l’oggetto il programma li calcola di nuovo in modo da visualizzare immediatamente i risultati (da qui il nome effetti dal vivo).

Si possono applicare come effetti dal vivo anche i filtri Xtra e molti dei plug-in di Photoshop.

Nota: l’applicazione dei filtri Xtra (Sfocatura gaussiana, Precisione, ecc.) e di eventuali plug-in di Photoshop importati oltre che dal pannello Effetto può avvenire anche dal menu Xtra, ma in questo caso il filtro non sarà più trattato come effetto dal vivo (potrà, per esempio, essere eliminato solo se presente nel pannello Cronologia).

 

Il pannello Effetto è molto semplice. Contiene un menu a tendina dal quale si possono scegliere gli effetti da applicare e, se ce ne sono, una lista degli effetti già applicati all’oggetto selezionato.

Accanto al nome dell’effetto compaiono:

# il simbolo della spunta che permette di attivarlo e disattivarlo;

# il pulsante Info con il quale si accede al pannello delle modifiche.

Ogni effetto può essere eliminato selezionandolo e cliccando poi sul pulsante in basso a destra nel pannello.

Gli effetti più usati per la creazione di interfacce web sono quelli che si trovano nei menu Smusso e rilievo e Ombra e luce.

Scegliendo uno degli effetti Smusso e rilievo compare una finestra di dialogo nella quale si possono impostare i vari parametri che agiscono sull’aspetto dell’effetto (vedi immagine seguente):

 

 

Le combinazioni ottenibili sono davvero molte; data l’interattività con cui si applicano la cosa migliore è provare a modificare i vari parametri fino ad ottenere il risultato voluto.

Nota: la finestra risulta un po’ diversa se riscelgono Rilievo concentrico e Rilievo sollevato.

 

Per l’applicazione di ombre e luci la finestra di dialogo è molto simile anche se, a parità di posizione cambiano i parametri:

 

# profondità dello smusso diventa distanza dell’ombra (o luce) dall’oggetto

# contrasto diventa opacità, cioè il grado di trasparenza dell’ombra

# angolo dello smusso diventa direzione di incidenza della luce

# compare poi l’opzione Scava che, se selezionata, nasconde l’oggetto visualizzandone solo l’ombra.

Per installare i plug-in di Photoshop dal pannello Effetto bisogna aprire il menu a tendina Opzioni (freccia in alto a destra) e scegliere Individua plug-in. Dopo aver selezionato la cartella che contiene i plug-in di Photoshop basta cliccare su OK. I filtri verranno caricati al successivo avvio di Fireworks e compariranno sia nel menu Xtra che nel pannello Effetto.

 

 

Combinazioni di più oggetti

 

Nel menu Elabora si trovano diversi comandi che permettono di combinare fra loro vari oggetti in modo da ottenere forme più complesse. Vediamo, partendo da un gruppo di tre oggetti, quali sono i possibili risultati.

 

 

 

 

 

Gli strumenti Matita, Pennello e Penna

 

Gli strumenti Matita e Pennello si usano per disegnare tracciati vettoriali a mano libera. Per disegnare è sufficiente cliccare e trascinare; per ottenere un tracciato chiuso occorre avvicinarsi al punto iniziale e rilasciare il tasto del mouse quando a destra del cursore compare un quadratino nero.

Lo strumento Matita disegna sempre un tratto di 1 pixel modificabile solo in seguito mediante il pannello tratto.

In modalità vettoriale in effetti i due strumenti lavorano in modo praticamente identico e una volta eseguito il disegno è sempre possibile scegliere una delle diverse categorie disponibili per lo strumento Matita (Matita colorata, Grafite ecc.) o per lo strumento Pennello (Aerografo, Pittura spray, Calligrafia, Pastello colorato, Innaturale ecc.) e i relativi tratti a disposizione (fra i più particolari  ci sono Dentifricio e Vernice aliena viscosa).

Lo strumento Penna invece consente di disegnare quei tracciati conosciuti anche come curve di Bezier. In pratica con la Penna si lavora come se si stesse risolvendo uno di quei giochi del tipo “unisci i punti” con la differenza che lo strumento Penna è in grado di unire i punti non solo con segmenti rettilinei ma anche con tratti curvilinei.

Quando si lavora con le curve di Bezier esistono due tipi di punti che determinano la natura dei tratti adiacenti:

 

# punti angolo: almeno uno dei due segmenti adiacenti deve essere rettilineo

# punti curva: almeno uno dei due segmenti adiacenti deve essere curvilineo

 

I punti curva sono dotati di maniglie di controllo che diventano visibili quando si seleziona il punto con lo strumento Sottoselezione, trascinandole si modifica la forma dei tratti adiacenti.

Punti angolo e curva esistono in ogni tracciato, sia che sia stato fatto con gli strumenti Matita o Pennello, sia che si tratti di una forma semplice come per esempio un rettangolo.

 

# per convertire un punto angolo in un punto curva scegliere lo strumento Penna, cliccare sul punto (accanto al cursore compare un segno meno) e trascinare;

# per convertire un punto curva in un punto angolo scegliere lo strumento Penna e cliccare sul punto (accanto al cursore compare una piccola punta).

 

È possibile aggiungere punti ad un tracciato cliccando su una sua porzione con lo strumento Penna (accanto al cursore compare un segno più); per eliminare un punto dal tracciato selezionarlo con lo strumento Sottoselezione e premere Canc oppure, se si tratta di un punto angolo, cliccare con lo strumento Penna.

L’uso delle curve di Bezier diventa indispensabile se si vuole riprodurre in forma vettoriale una immagine bitmap ottenuta magari dalla scansione di uno schizzo a mano libera.

Con un po’ di pratica e molta pazienza si ottengo risultati notevoli. Per iniziare un buon esercizio consiste nel “ricalcare” le lettere dell’alfabeto. Dopo aver letto, se necessario, la lezione sull’editor di testo e quella sui livelli provate a scrivere, usando un colore chiaro, un carattere di grandi dimensioni servendosi di un font graziato (il Times New Roman in grassetto va benissimo). Bloccate il livello e su un altro provate a riprodurre la lettera usando lo strumento Penna.

 

 

Creazione di una interfaccia. Parte I: progettare l’interfaccia

 

Questo è il primo di una serie di tutorial che vi aiuteranno a realizzare una vera e propria interfaccia web con tanto di effetti rollover disgiunti e link come quella che potete vedere cliccando qui.

Ho cercato di essere il più chiaro possibile nella spiegazione senza dover ricorrere a immagini e per riuscirci ho usato alcune convenzioni che dovrete tenere presenti durante tutte le spiegazioni:

 

# le dimensioni delle figure verranno date nella forma 150×50 dove il primo numero si riferisce sempre alla larghezza e il secondo all’altezza;

# AR indica il valore della rotondità degli angoli dei rettangoli arrotondati;

# per indicare i punti di riferimento nei tracciati uso l’intersezione delle linee guida verticali e orizzontali: per esempio V3O5 indica il punto in cui si incontrano la terza linea verticale (da sinistra) e la quinta orizzontale (dall’alto);

# Per brevità i parametri degli Effetti dal vivo vengono riportati uno di seguito all’altro come si presentano nella finestra partendo dall’alto a sinistra.

 

1) Creare un documento 500×300 con sfondo bianco.

2) Impostare le seguenti linee guida e bloccarle

 

# Verticali: 10 – 30 – 150 – 160 – 170 – 220 (pixel dal bordo sinistro)

# Orizzontali:10 – 32 – 40 – 50 – 85 – 95 – 125 – 188 – 210

3) Disegnare un rettangolo 160x 200 con AR 30 px a partire dal punto V1O1 verso destra Il colore può essere qualunque.

4) Disegnare un rettangolo 120×156 a partire dal punto V2O2 verso destra.

5) Selezionare entrambi i rettangoli sovrapposti e scegliere Elabora > Unisci > Ritaglio interno

6) Disegnare un rettangolo 335×55 con AR 50 px a partire dal V4O3 verso destra

7) Selezionare il rettangolo forato e quello appena tracciato e scegliere Elabora > Unisci > Insieme

8) Selezionare lo strumento Penna: cliccare su V6O6 e trascinare, tenendo premuto MAIUSC, fino al punto V5O6. Rilasciare il mouse. Spostarsi su V5O7 e cliccare. Spostarsi su V5O6 e cliccare. Spostarsi su V6O6 e cliccare. La forma si chiude. Togliere il contorno e, se necessario riempire di colore.

9) Sempre con lo strumento Penna: cliccare su V5O2 e trascinare, tenendo premuto MAIUSC, fino al punto V5O3. Rilasciare il mouse. Spostarsi su V6O3 e cliccare. Spostarsi su V5O3 e cliccare. Spostarsi su V5O2 e cliccare. La forma si chiude. Togliere il contorno e, se necessario riempire di colore.

10) Selezionare tutto e scegliere Elabora > Unisci > Insieme.

11) Applicare alla figura ottenuta un riempimento Satin scegliendo il gradiente Rame.

12) Attribuirle poi un effetto dal vivo Smusso interno Attenuato con parametri 5 – 75% – 3 – 135 – sollevato.

13) Disegnare un rettangolo 260×35 AR 50 px a partire dal punto V6O4 verso destra.

14) Applicare a questo rettangolo un effetto dal vivo Rilievo concentrico con parametri 2 – 75% – 2 – 135 deselezionando Mostra oggetto.

15) Eliminare le linee guida e salvare il documento.

 

Abbiamo imparato a creare la struttura. Nella seconda parte impareremo a creare i pulsanti da inserire.

 

 

I livelli (parte I)

 

Brevemente ricordiamo che i livelli possono essere paragonati a fogli di acetato trasparenti su cui risiedono parti diverse di una immagine composta. Come vedremo in seguito, l’uso dei livelli consente di agire per esempio sulla trasparenza dei vari elementi o sul modo in cui i loro colori di riempimento si fondono. In questa lezione verrà analizzata la struttura del pannello Livelli e i principali comandi ad esso associati. L’argomento sarà ulteriormente approfondito nella sezione del corso riguardante la modalità bitmap.

Fireworks impila i livelli in base al loro ordine di creazione (l’ultimo si troverà quindi sopra a tutti). Il pannello Livelli, oltre a visualizzare l’ordine di sovrapposizione, presenta varie funzionalità. Diamo una breve descrizione di quelle principali facendo riferimento alla numerazione riportata nell’immagine seguente:

 

 

1 – Blocca/sblocca livello: cliccando sul riquadro compare l’immagine di un lucchetto in questo modo gli oggetti risultano protetti da modifiche accidentali. Per bloccare tutti i livelli ad eccezione di quello attivo scegliere Modifica livello singolo dal menu a comparsa Opzioni (freccia in alto a destra).

2 – Mostra/nascondi livello

3 – Espandi/contrai livello: consente di vedere una miniatura di tutti gli oggetti presenti nel livello.

4 – Livello nuovo/duplicato: cliccando sul pulsante si introduce un nuovo livello vuoto sopra a tutti; trascinando un livello sul pulsante si ottiene un duplicato del livello scelto. Gli stessi risultati si ottengono scegliendo il comando corrispondente nel menu a comparsa Opzioni.

5 – Aggiungi maschera: vedi lezione sulle maschere

6 – Nuova immagine bitmap

7 – Elimina livello

8 – Livello attivo

9 – Modalità di fusione

10 – Opacità

 

Sia ai livelli che agli oggetti tracciati su di essi viene assegnato un nome generico che può essere modificato facendo doppio clic sul nome stesso nel pannello livelli.

Sempre all’interno del pannello è possibile spostare un livello, o trasferire un oggetto da un livello a un altro, trascinandoli nella posizione voluta

Livello Web – si tratta di un livello particolare che si trova sempre al di sopra di tutti gli altri e che contiene oggetti, come punti attivi o porzioni, usati per aggiungere interattività alle interfacce. Non può essere né eliminato né rinominato.

 

 

illusioni 3D

 

Lavorando con riempimenti sfumati ed effetti dal vivo è possibile rappresentare oggetti tridimensionali come quelli riportati in figura. Lo sfondo nero mette in risalto l’effetto 3D ma non è indispensabile:

 

 

Sfera: disegnare un cerchio e scegliere un riempimento radiale (i colori scelti devono essere due tonalità dello stesso colore con quello più chiaro al centro; nell’esempio i codici esadecimali dei colori usati sono #FFDFDF e #FF0000). Spostare il centro del riempimento (cerchietto) in alto a destra, vicino al contorno dell’oggetto, e la maniglia quadrata in basso a destra.

 

Cono: disegnare un triangolo e una ellisse piuttosto schiacciata che abbia una larghezza di un paio di pixel più piccola rispetto a quella del triangolo. Posizionarli come mostrato nell’immagine, selezionarli entrambi e unirli (Elabora > Unisci > Insieme). Applicare alla figura ottenuta un riempimento conico con un gradiente a tre colori (nell’esempio i tre colori sono, partendo da sinistra: #0033CC, #0000FF e #CECEFF):

 

 

Spostare poi il centro del riempimento in corrispondenza del vertice del cono e la maniglia quadrata in alto (fuori dalla figura) leggermente verso sinistra rispetto all’asse verticale della figura.

Anello: è la figura più elaborata da tracciare e richiede l’uso dei livelli.

 

# trascinare una linea guida orizzontale e una verticale.

# tracciare un cerchio con il centro sull’intersezione delle linee guida di diametro 160 px (colore di riempimento #CC00FF).

# Disegnare un altro cerchio concentrico al primo di diametro 120 px e colore qualsiasi.

# Selezionarli entrambi e scegliere Elabora > Unisci >Ritaglio interno.

# Duplicare il livello.

# Riempire l’anello nel Livello 2 di bianco e applicare un effetto Sfocatura Gaussiana con raggio 5,5 (sono adatti valori compresi fra 4 e 6; usare valori maggiori per anelli più grandi o più spessi).

# Spostare l’anello bianco in alto e a destra di 1 pixel.

# All’anello nel Livello 1 applicare un effetto Smusso interno attenuato e sollevato con: profondità = 10, contrasto = 75%, morbidezza = 3, angolo smusso = 60.

# Portare il Livello 2 sotto al Livello 1

 

 

Gli stili

 

Con il termine stile in Fireworks si intende un insieme di impostazioni riguardanti riempimento, tratto, effetti dal vivo e testo da poter memorizzate in modo da essere applicate tutte in una volta all’oggetto selezionato.

Il programma mette a disposizione diversi stili predefiniti, sia per gli oggetti sia per il testo, visualizzabili dal pannello Stili. La loro applicazione è banale: basta cliccare nel pannello sull’icona corrispondente allo stile scelto.

È possibile aggiungere stili personali a quelli esistenti. Dopo aver creato un oggetto con le impostazioni desiderate cliccare sul pulsante Nuovo stile che si trova nell’angolo in basso a destra del pannello. La finestra di dialogo che si apre, oltre a chiedere un nome, permette di decidere quali proprietà associare allo stile; ogni volta che si seleziona o deseleziona una proprietà è possibile vedere l’effetto della modifica nell’immagine di anteprima.

Gli stili esistenti possono essere modificati scegliendo Modifica stile dal menu a tendina Opzioni che si apre cliccando sulla freccia in alto a destra.

 

 

L’editor di testo

 

Scegliendo lo strumento testo e cliccando nell’area di lavoro si apre automaticamente la finestra dell’editor di testo:

 

 

Nella finestra sono raccolti tutti i comandi che consentono di impostare i consueti attributi del testo (carattere, dimensione, colore, stile e allineamento del paragrafo), più altri di uso meno frequente di cui diamo una breve spiegazione

# Allungamento: è il fattore di scala orizzontale, cioè la possibilità di aumentare o diminuire la larghezza dei caratteri rispetto alle dimensioni normali.

# Crenatura: permette di aumentare o diminuire lo spazio fra determinate coppie di lettere (per esempio AV oppure Va).

# Spostamento riga base: serve per impostare apici e pedici.

# Interlinea: è la distanza fra le righe di un paragrafo.

# Attenuazione: applicare l’antialiasing al testo fa si che i bordi si sfumino con lo sfondo rendendolo più leggibile soprattutto in caso di grosse dimensioni.

# Orientamento: determina se il testo sarà scritto in orizzontale (impostazione predefinita) o in verticale.

# Direzione: indica se il testo risulterà scritto da sinistra verso destra o viceversa (le lettere non vengono ribaltate).

Il testo viene sempre inserito all’interno di un blocco di testo rettangolare che può essere spostato, ridimensionato, ruotato o distorto come un qualunque altro oggetto.

 

 

Modificare il testo

 

Oltre alla possibilità di distorcere il blocco di testo Fireworks consente di agire anche sulle singole lettere trasformando il blocco in un tracciato con il comando Testo > Converti in tracciato.

L’esempio qui sotto è stato scritto con il carattere arial Black grassetto, dopo averlo convertito in tracciato sono state deformate le singole lettere con lo strumento Sottoselezione e al gruppo delle lettere è stato applicato uno degli stili messi a disposizione dal programma:

 

 

Nota: il blocco, una volta convertito, non sarà più modificabile come testo.

Testo sul tracciato – in Fireworks è possibile collegare un blocco di testo ad un tracciato in modo da farlo scorrere sopra pur rimanendo modificabile come testo. Il tracciato può essere una linea aperta ma anche una delle figure di base. In ogni caso per ottenere questo effetto è sufficiente selezionare sia il blocco di testo che il tracciato (tenendo premuto il tasto MAIUSC) e scegliere Testo > Collega al tracciato.

Il tracciato cui viene collegato un testo perde ogni impostazione di tratto, riempimento, ecc. diventando invisibile.

Un doppio clic sul testo apre l’editor di testo, mentre se si vuole modificare il tracciato è necessario prima separarlo dal testo (Testo > Separa dal tracciato).

Sempre dal menù testo è anche possibile modificare direzione e orientamento del testo (Ruotato intorno al tracciato, Verticale, Inclinato in verticale, Inclinato in orizzontale):

 

 

Se si collega un testo a un tracciato aperto le lettere che eccedono la lunghezza del tratto andranno a capo continuando a seguire la forma del tracciato.

Attenzione: la direzione in cui viene disegnato un tracciato influisce sulla direzione del testo, cioè su un tracciato disegnato da destra a sinistra il testo risulterà scritto all’indietro e rovesciato.

 

 

Incisione

Ora spiegheremo come ottenere una specie di medaglione inciso. La tecnica però è applicabile a qualsiasi tipo di sfondo.

 

 

1) Creare un nuovo documento di dimensioni 300×300 px.

2) tracciare al centro dell’area di lavoro un cerchio 200×200 px privo di contorno e applicargli un riempimento Lineare con un gradiente Rame e una texture Metallo al 30%.

3) Dal pannello Effetti impostare Smusso interno, Cornice 1,10 – 75% – 3 – 135, Sollevato.

4) Selezionare lo strumento Testo, nella finestra di editor scegliere il carattere Wingdings, grassetto, 150 pt, nero e digitare la lettera Z maiuscola.

5) Dal pannello Info posizionare il carattere in x=84, y=84.

6) Eseguire una copia del testo e cambiare il colore in un grigio chiaro (#EAEAEA).

7) Eseguire un’altra copia del testo e applicargli un riempimento uguale a quello del cerchio e un effetto Ombra interna 2 – 65% – 4 – 315, colore #666666.

8) Aiutandosi con il pannelli Livelli e Info selezionare prima il carattere grigio e spostarlo in posizione x=85, y=85; poi il carattere nero e portarlo in posizione x=83, y=83.

 

 

Generalità sulla modalità bitmap

 

In Fireworks è possibile lavorare in modalità bitmap ogni volta che nel documento è presente almeno una immagine bitmap. È importante ricordare che quando si lavora in questa modalità si agisce direttamente sui singoli pixel che compongono l’immagine e quindi le modifche potranno essere annullate solo se ancora presenti nel pannello Cronologia (la lista delle operazione presenti nel pannello Cronologia viene azzerata ogni volta che si chiude il documento).

Si passa alla modalità bitmap con un doppio clic su una immagine bitmap. In questa modalità compare intono all’area di lavoro un sottile bordo a strisce azzurre e nere. Per tornare alla modalità vettoriale si può fare clic sul pulsante Termina (cerchio rosso con una x bianca che si trova nella parte bassa della finestra di lavoro), cliccare fuori dall’area di lavoro, selezionare un oggetto vettoriale dal pannello Livelli oppure premere il tasto ESC.

Nota: se nel documento sono presenti più immagini bitmap passando alla modalità bitmap si può lavorare solo sull’immagine su cui è stato fatto doppio clic. Per cambiare immagine occorre tornare alla modalità vettoriale e poi selezionare una nuova bitmap.

È possibile convertire gli oggetti vettoriali in bitmap oppure raggruppare più immagini bitmap in una sola scegliendo Elabora > Converti in bitmap. Anche questo tipo di operazione può essere annullata solo dal pannello Cronologia.

 

 

Le selezioni

 

Gli strumenti di selezione che Fireworks mette a disposizione sono Perimetro di selezione Rettangolo, Perimetro di selezione Ellisse, Lazo (selezione a mano libera), Lazo poligonale e Bacchetta magica.

 

Con un doppio clic sugli strumenti di selezione si visualizza il pannello Opzioni.

Le scelte relative al Bordo sono disponibili per tutti gli strumenti di selezione e le alternative sono:

 

# Rigido: selezioni con contorno ben definito.

# Antialiasing: i bordi delle selezioni irregolari non presentano effetti di calettatura.

# Morbidezza: consente di impostare un numero di pixel su cui il bordo della selezione verrà sfumato.

 

Le opzioni relative allo Stile sono presenti sono per i perimetri di selezione Rettangolo e Ellisse e le alternative sono:

 

# Normale: dimensioni scelte dall’utente durante il trascinamento.

# Rapporto fisso: altezza e larghezza vengono vincolate ad avere un particolare rapporto.

# Dimensioni fisse: permette all’utente di definire a priori le dimensioni in pixel dell’area selezionata.

 

Lo strumento bacchetta magica presenta anche l’opzione Tolleranza il cui valore imposta la gamma di colori simili a quello del pixel su cui si clicca che verranno selezionati.

Dopo aver eseguito una selezione, l’area selezionata può essere spostata con lo strumento Puntatore, o ridimensionata o distorta con gli strumenti corrispondenti; quando si esce dalla modalità bitmap i pixel contenuti nella selezione vengono fissati in modo definitivo nella nuova posizione.

Un perimetro di selezione può anche essere spostato, senza interessare i pixel sottostanti, trascinandolo con lo strumento di selezione, usando i tasti freccia (spostamenti di 1 pixel) oppure usando i tasti freccia tenendo premuto il tasto MAIUSC (spostamenti di 10 pixel).

Per aggiungere pixel a una selezione esistente selezionare l’area scelta tenendo premuto il tasto MAIUSC; per eliminare pixel da una selezione ripetere l’operazione di selezione tenendo premuto il tasto ALT.

È anche possibile espandere o contrarre il bordo di una selezione scegliendo i comandi Elabora > Perimetro di selezione > Espandi oppure Contrai e impostando poi il numero di pixel necessari.

Per effetti grafici particolari come, per esempio, la creazione di un bordo sfumato, è utile poter selezionare un’area intorno a una selezione esistente. Per ottenere questo risultato scegliere Elabora > Perimetro di selezione > Margine e inserire la larghezza del perimetro in pixel.

Per eliminare una selezione si può cliccare fuori dall’area selezionata o scegliere Modifica > Deseleziona.

 

 

Gli strumenti in modalità bitmap

 

Gli strumenti Linea, Matita e Pennello (ma anche la figura di base) funzionano in modalità bitmap come in quella vettoriale; però è importante ricordarsi di impostare tutti i loro attributi prima di iniziare a disegnare perché dopo non saranno più modificabili.

 

Gomma – compare in modalità bitmap al posto dello strumento Coltello e permette di cancellare pixel o di coprirli con un colore diverso.

Un doppio clic sullo strumento visualizza il relativo pannello Opzioni in cui si può impostare la forma (rotonda o quadrata), la morbidezza del bordo, le dimensioni e, dal menù a comparsa Cancello fino a, il colore. Per quest’ultimo le alternative possibili sono: trasparente, Colore riempimento, Colore tratto, Colore area di lavoro.

Timbro di gomma – consente di riprodurre parti di una immagine bitmap. Lo strumento è formato da due cursori diversi: uno circolare (puntatore sorgente) che deve essere posizionato sulla parte di immagine che si vuole copiare, e uno a forma di timbro (puntatore destinazione) che si posiziona dove si vuole copiare l’immagine. Quando si seleziona lo strumento i due puntatori coincidono quindi è necessario posizionarsi sulla parte di immagine da copiare e fare clic, poi spostarsi nella zona di destinazione cliccare e trascinare. Durante la copia i due puntatori si muovono insieme; per riposizionare il puntatore sorgente durante la clonazione fare clic sull’immagine tenendo premuto il tasto ALT.

Nel pannello Opzioni, oltre alla Morbidezza e alle Dimensioni dello strumento, si può scegliere di impostare la Sorgente su Fisso in modo da poter copiare l’area scelta più volte. Nel menù a discesa Campioni le alternative sono: Immagine (si clonano solo aree appartenenti all’immagine selezionata) e Documento (si può clonare qualunque parte del documento, compresi eventuali oggetti vettoriali). Gli oggetti vettoriali e le parti di immagine bitmap riprodotti con lo strumento Timbro diventeranno parte integrante dell’immagine bitmap inizialmente selezionata.

 

 

Combinare immagini bitmap e vettoriali

 

Le immagini usate per le varie parti del punto interrogativo non sono allegate all’esercizio, ognuno può usare quelle che preferisce:

 

 

1) Creare un nuovo documento di dimensioni 300×500 con sfondo bianco.

2) tracciare un cerchio 240×240 senza contorno e con un riempimento qualunque e dal pannello Info posizionarlo in alto a sinistra (x=30, y=30).

3) trascinare due linee guida, una orizzontale e una verticale, entrambe in posizione 150 px e bloccarle.

4) Doppio clic sullo strumento Poligono, dal pannello Oggetto impostare stella, 4 lati, angolo = 1 e tracciare la figura partendo dall’intersezione delle linee guida e trascinando il mouse (tasto MAIUSC premuto) oltre i bordi del cerchio (non più di una decina di pixel).

5) Selezionare tutto e scegliere Elabora > Unisci > Ritaglio interno e poi Elabora > Dividi. Il cerchio risulta diviso in quattro parti ma in corrispondenza del centro ci sono degli spazi vuoti.

6) Aiutandosi con un fattore di zoom piuttosto alto e usando lo strumento SottoSelezione, trascinare i nodi dei quattro settori a coincidere con il punto di intersezione delle linee guida.

7) tracciare un altro cerchio 100x100px concentrico con il primo (tasti ALT e MAIUSC premuti) senza contorno e con un riempimento qualsiasi.

8) Selezionare tutto e scegliere Elabora > Unisci > Ritaglio interno.

9) Cancellare il settore in basso a sinistra.

10) Spostare le linee guida: quella orizzontale a 200 px e quella verticale a 115 px.

11) A partire dal punto d’intersezione e movendosi verso destra e verso il basso tracciare un rettangolo con gli angoli arrotondati (50 px) di dimensioni 80×180 px.

12) Selezionare il rettangolo e il settore in basso a destra e scegliere Elabora > Unisci > Insieme.

13) tracciare in basso un cerchio di dimensioni 80×80.

14) Importare la prima immagine bitmap.

15) Portarla in secondo piano e metterla dietro al settore corrispondente, ingrandirla, ridurla o ruotarla in modo che si adatti alla figura.

16) Scegliere Modifica > Taglia.

17) Selezionare la parte di punto interrogativo che interessa e scegliere Modifica > Incolla dentro.

18) Ripetere i punti 14-17 per tutti i settori della figura.

19) Selezionare tutto e impostare l’effetto Smusso interno, Piatto, 5 – 75% – 3 – 135 Sollevato.

20)  Spostare i vari settori in modo da separarli un po’.

21) Selezionare tutto, raggruppare le immagini e applicare un effetto Ombra discendente.

 

 

Le maschere

 

L’uso delle maschere permette di creare interessanti effetti di ritaglio e/o di sfumatura. Come maschere possono essere usati sia oggetti vettoriali che immagini bitmap.

In Fireworks si possono applicare due tipi di maschere:

 

# Maschere vettoriali: il contorno di un oggetto vettoriale definisce il contorno di un altro oggetto o immagine cui sia stato sovrapposto. Per ottenere questo effetto tracciare un oggetto (anche complesso) sopra l’immagine che si vuole mascherare (il colore di riempimento e il tratto non influiscono sul risultato); scegliere Modifica > Taglia (o Copia), selezionare l’immagine, rimanendo in modalità vettoriale, e scegliere Modifica > Incolla come maschera oppure Elabora > Maschera > Incolla come maschera.

# Maschere bitmap: il colore dei pixel della maschera incide sulla visibilità dell’immagine sottostante (il nero corrisponde alla trasparenza, il bianco all’opacità). Per ottenere questo effetto tracciare un oggetto sopra l’immagine da mascherare (i colori di riempimento e tratto influiranno sul risultato finale); selezionare sia l’immagine sottostante che la maschera e scegliere Elabora > Maschera > Raggruppa come maschera.

 

Nell’esempio seguente la maschera è costituita da una ellisse con riempimento lineare da nero a bianco e un tratto Base, Arrotondato morbido di colore #666666:

 

 

 

Nota: se come maschera si usano immagini bitmap il risultato ottenuto sarà in entrambi i casi quello della maschera bitmap.

 

 

I livelli (parte II)

 

Dal pannello Livelli è possibile impostare la modalità di Fusione, cioè il modo in cui interagiscono i colori di due oggetti sovrapposti. Il colore dell’oggetto sovrastante (quello a cui si applica la modalità di fusione), detto colore di fusione, e quello dell’oggetto sottostante, colore di base si possono cioè “mescolare” in modi diversi.

Oggetti che si trovano su uno stesso livello o su livelli diversi possono avere modalità di fusione diverse.

Con la casella che si trova in alto a sinistra nel pannello Livelli si imposta la trasparenza di un oggetto. I valori possibili vanno da 0 (oggetto completamente trasparente), a 100 (oggetto del tutto opaco)

In Fireworks ci sono diverse modalità di fusione differenti, la più interessante è Tonalità che permette di modificare i colori di una immagine.

Gli esempi seguenti sono ottenuti con modalità di Fusione Tonalità e opacità 100. La prima immagine è l’originale, le altre due sono state ottenute sovrapponendo due rettangoli di colori, rispettivamente, #0000FF e #FFCCFF:

 

 

Lo stesso risultato si può ottenere direttamente sull’immagine applicandole l’effetto dal vivo Colore riempimento che si trova nel sottomenù Regola colore. Anche in questo caso gli attributi da impostare sono il colore, la modalità di fusione e l’opacità.

Nota: se si sta lavorando su una immagine bitmap l’effetto Colore riempimento può essere applicato solo su tutta l’immagine. Se si vuole agire su una porzione di essa sarà necessario creare un oggetto che copra la parte che ci interessa e applicargli la modalità di fusione e l’opacità necessaria.

 

 

Simboli e istanze

 

Con il termine simbolo si intende un oggetto, più o meno complesso (i simboli possono a loro volta essere formati da simboli), come per esempio una immagine, un pulsante o una animazione. Istanze sono invece dei “duplicati” del simbolo che si modificano automaticamente ogni volta che al simbolo vengono apportate delle variazioni.

Qualunque oggetto può diventare un simbolo ed essere archiviato nel pannello Libreria scegliendo Inserisci > Converti in simbolo; ma si può anche creare un simbolo partendo da zero con il comando Inserisci > Nuovo simbolo.

In entrambi i casi si apre una finestra di dialogo in cui digitare il nome del simbolo e sceglierne il tipo fra Elemento grafico, Animazione o Pulsante. Nel caso poi si stia realizzando un nuovo simbolo si aprirà l’editor di simboli (o di pulsanti, vedi lezione relativa); si tratta in pratica di una finestra del tutto simile a quella di un nuovo documento su cui si andrà a realizzare il simbolo.

Alla chiusura dell’editor il simbolo comparirà nel documento corrente, contornato da un rettangolo tratteggiato e con una piccola freccia nera in basso a sinistra, e anche nel pannello Libreria.

In un documento è possibile inserire più istanze diverse di uno stesso simbolo semplicemente trascinando il simbolo dal pannello Libreria nell’area di lavoro.

Come abbiamo già detto, se si modifica un simbolo (doppio clic sulla sua immagine nel pannello Libreria), tutte le istanze riflettono i cambiamenti; in generale vale anche il viceversa, cioè modificando una istanza, le variazioni influenzano tutte le altre istanze presenti e il simbolo stesso. È però possibile interrompere il collegamento fra istanza e simbolo scegliendo Elabora > Simbolo > Disgiungi; l’istanza diventa in questo modo un normale oggetto.

 

Nota: la libreria dei simboli viene memorizzata insieme al documento in cui i simboli stessi sono stati creati. È comunque possibile usare i simboli di una libreria anche in un documento diverso scegliendo, dal menù opzioni del pannello Libreria, Importa simboli e aprendo il file che li contiene.

In questo caso, ogni modifica al simbolo effettuata nel documento di origine, si riflette in quello in cui il simbolo è stato importato quando dal menù Opzioni si sceglie Aggiorna. Viceversa modificando un simbolo importato lo si rende indipendente da quello d’origine..

Come vedremo l’uso dei simboli diventa praticamente indispensabile quando si vogliono realizzare delle barre di navigazione.

 

 

L’editor di pulsanti

 

Con Fireworks è possibile creare, in modo rapido e semplice, pulsanti controllati da codice Javascript. Il processo di creazione è gestito dall’Editor di pulsanti e genera un simbolo che può essere duplicato e riposizionato all’interno del documento in modo da ottenere barre di navigazione.

Il documento ottenuto potrà poi essere esportato direttamente come pagina HTM completa di grafica e codice, ma è anche possibile copiare e incollare il codice necessario in una pagina già esistente.

 

Fireworks è in grado di gestire pulsanti di tipo rollover a quattro stati:

 

# stato Su: aspetto del pulsante quando non è toccato dal cursore;

# stato Sopra: aspetto del pulsante quando il puntatore viene portato su di esso;

# stato Giù: aspetto del pulsante premuto (viene visualizzato normalmente nella pagina di destinazione);

# stato Sopra e premuto: aspetto del pulsante premuto quando il cursore ci torna sopra.

 

Nota: gli stati Giù e Sopra e premuto si usano di solito se il pulsante fa parte di una barra di navigazione. Per il loro uso si rimanda alla seconda parte  sulla creazione di una interfaccia.

Per creare un pulsante scegliere Inserisci > Nuovo pulsante; l’editor di pulsanti si apre sulla scheda Su. Nell’area di lavoro si possono usare tutti gli strumenti di disegno e di modifica, compreso lo strumento Testo:

 

 

Quando si crea un pulsante è utile inserire il testo direttamente dall’editor di pulsanti perché poi risulta più semplice cambiare i termini alle varie istanze usando il pannello Oggetto. L’importante è scrivere la parole più ingombrante fra tutte quelle da usare perché dal pannello Oggetto non è possibile modificare gli attributi del testo.

Completato lo stato Su si può passare alla scheda Sopra. Qui è possibile disegnare una nuova immagine oppure usare il pulsante Copia grafico che compare in basso a destra e che permette di incollare una copia di quanto disegnato nella scheda precedente per poi modificarla. L’opzione Tecnica Onion skin rende semitrasparenti tutti gli stati e torna utile per verificare l’allineamento delle varie immagini.

 

Le schede Giù e Sopra e premuto sono praticamente identiche alla scheda Sopra ad eccezione della presenza dell’opzione Mostra stato Giù al caricamento (solo nella scheda Giù) e dell’opzione Includi come appropriato, in alto a sinistra, che deve essere selezionata nel caso il pulsante debba far parte di una barra di navigazione.

La scheda Area attiva mostra le dimensioni di quella che sarà l’area attiva del pulsante, cioè la zona che innesca il rollover quando il puntatore la raggiunge. Le sue dimensioni saranno tali da coprire tutte le immagini utilizzate nei vari stati.

In basso compare il pulsante Autocomposizione collegamento URL che permette di collegare al pulsante un URL e di digitare il testo alternativo (testo che viene visualizzato quando il puntatore si ferma sul pulsante) e un messaggio da far apparire nella barra di stato.

Nota: l’inserimento dell’URL, del testo alternativo e del massaggio per la barra di stato può essere effettuato direttamente sulle varie istanze usando il pulsante corrispondente nel pannello Oggetto.

 

 

Creazione di una interfaccia. Parte II: creare una barra di navigazione

 

Adesso  aggiungeremo i pulsanti all’interno dell’interfaccia facendoli diventare una barra di navigazione completa.

 

1) Aprire il documento creato durante la prima parte del tutorial.

2) Scegliere Inserisci > Nuovo pulsante e disegnare un rettangolo 120×26 applicandogli un riempimento Lineare con gradiente Rame e l’effetto Smusso interno Attenuato 10 – 75% – 3 – 135 Sollevato.

3) Scrivere, al centro del pulsante, “gif animate” (Verdana, 16 pt, grassetto, bianco)

4) Copiare la grafica sui quattro stati apportando poi le seguenti modifiche all’effetto dal vivo:

# Sopra: preimpostazione pulsante = Evidenziato

# Giù: preimpostazione pulsante = Concentrico (controllare che siano selezionate le opzioni Mostra stato Giù al caricamento e Includi come appropriato).

# Sopra e premuto: preimpostazione pulsante = Inverso

5) Chiudere l’editor di pulsanti.

6) Aggiungere al documento 5 istanze del pulsante appena creato e posizionare tutto all’interno dell’interfaccia. Per ottenere un lavoro accurato può essere utile non visualizzare le aree attive cliccando sul pulsante in basso a sinistra nel pannello degli Strumenti.

7) Dal pannello Oggetti cambiare il testo dove serve e associare ad ogni pulsante l’URL corrispondente (nell’esempio ho usato come URL pag_1.htm, pag_2.htm, ecc.), il testo alternativo e il messaggio da barra di stato.

8) Chiudere e salvare il documento.

Premendo F12 è possibile vedere un’anteprima nel browser.

 

Nota: può succedere che i pulsanti nell’anteprima sembrino nella posizione corrispondente allo stato Sopra e premuto. Si tratta di una visualizzazione difettosa che comunque non pregiudica il risultato che si ottiene al momento dell’esportazione.

Nelle pagine web sono spesso presenti mappe immagini, cioè immagini in cui zone diverse (dette punti attivi) risultano collegate a URL diversi.

Fireworks mette a disposizione tre strumenti per tracciare queste aree nel modo più preciso possibile: Punto attivo rettangolare, Punto attivo circolare e Punto attivo poligonale.

È anche possibile tracciare rapidamente un punto attivo che comprenda uno o più oggetti selezionati scegliendo Inserisci > Punto attivo. I punti attivi sono evidenziati con un colore azzurro semitrasparente e al centro compare un cerchietto con il quale si gestiscono i comportamenti di “trascina e rilascia”. Per attivare o disattivare la visualizzazione dei punti attivi si possono usare i due pulsanti in basso nel pannello degli strumenti oppure agire sulla visibilità del Livello Web.

Ad ogni punto attivo, mediante il pannello Oggetto, è possibile associare un URL, un testo alternativo e un obiettivo (cioè specificare se la pagina di destinazione deve aprirsi in un frame particolare, in una nuova finestra del browser ecc.).

Una volta creata, la mappa immagine deve essere esportata con il comando File > Esporta. Nella finestra di dialogo le impostazioni da utilizzare sono le seguenti:

 

# Casella Salva con nome: scegliere HTML e immagini

# Casella HTML: scegliere Esporta file HTML

# Casella Porzioni: scegliere nessuna

 

Volendo si può selezionare l’opzione Inserisci immagine nella sottocartella per salvare il file HTML e l’immagine in due cartelle diverse.

Nota: se nella casella HTML della finestra Esporta si sceglie Copia negli Appunti è possibile incollare il solo codice in un qualsiasi editor HTML.

 

 

I punti attivi

 

Nelle pagine web sono spesso presenti mappe immagini, cioè immagini in cui zone diverse (dette punti attivi) risultano collegate a URL diversi.

Fireworks mette a disposizione tre strumenti per tracciare queste aree nel modo più preciso possibile: Punto attivo rettangolare, Punto attivo circolare e Punto attivo poligonale.

È anche possibile tracciare rapidamente un punto attivo che comprenda uno o più oggetti selezionati scegliendo Inserisci > Punto attivo. I punti attivi sono evidenziati con un colore azzurro semitrasparente e al centro compare un cerchietto con il quale si gestiscono i comportamenti di “trascina e rilascia”. Per attivare o disattivare la visualizzazione dei punti attivi si possono usare i due pulsanti in basso nel pannello degli strumenti oppure agire sulla visibilità del Livello Web.

Ad ogni punto attivo, mediante il pannello Oggetto, è possibile associare un URL, un testo alternativo e un obiettivo (cioè specificare se la pagina di destinazione deve aprirsi in un frame particolare, in una nuova finestra del browser ecc.).

Una volta creata, la mappa immagine deve essere esportata con il comando File > Esporta. Nella finestra di dialogo le impostazioni da utilizzare sono le seguenti:

 

# Casella Salva con nome: scegliere HTML e immagini

# Casella HTML: scegliere Esporta file HTML

# Casella Porzioni: scegliere nessuna

 

Volendo si può selezionare l’opzione Inserisci immagine nella sottocartella per salvare il file HTML e l’immagine in due cartelle diverse.

Nota: se nella casella HTML della finestra Esporta si sceglie Copia negli Appunti è possibile incollare il solo codice in un qualsiasi editor HTML.

 

 

Le porzioni

 

La possibilità di suddividere una immagine in parti più piccole (porzioni) consente di avere un download più rapido delle pagine. Con Fireworks questa suddivisione viene effettuata in modo semplice e intuitivo, inoltre alle porzioni possono essere associate funzionalità interattive, come effetti rollover più o meno complessi, esattamente come per i punti attivi. Infatti un punto attivo può essere convertito in porzione con il comando Inserisci > Porzione.

Le porzioni vengono visualizzate a schermo come aree verdi semitrasparenti da cui fuoriescono delle linee rosse che individuano le linee di taglio lungo cui verrà suddivisa l’immagine complessiva al momento dell’esportazione. Anche qui è presente il cerchietto per i comportamenti “trascina e rilascia”.

Nel pannello Oggetto, oltre alle caselle per associare URL e testo alternativo, compare anche l’opzione Porzioni con auto nom.; deselezionandola è possibile inserire un nome (senza aggiungere l’estensione) personalizzato che verrà attribuito, in fase di esportazione, all’immagine corrispondente. Agli altri pezzi in cui risulterà divisa l’immagine verrà attribuito il nome scelto al momento dell’esportazione seguito da un suffisso che Fireworks associa automaticamente.

Esempio: se in fase di esportazione si sceglie per l’immagine il nome “prova” le varie porzioni avranno nomi del tipo prova_r#_c# dove r# e c# fanno riferimento alle righe e colonne della tabella che dovrà essere usata nel browser per ricostruire l’iimmagine.

Può capitare che porzioni molto vicine in effetti si sovrappongano, in tal caso Fireworks per la zona di sovrapposizione prende in considerazione la porzione in primo piano. È comunque opportuno cercare di evitare sovrapposizioni e per questo ci viene in aiuto lo strumento Porzione poligonale.

Nota: oggetti che siano prima convertiti in punti attivi e poi in porzioni danno luogo a porzioni poligonali.

 

 

Creazione di una interfaccia. Parte III: creare un rollover disgiunto

 

Attenzione: con la versione precedente di Fireworks è possibile creare rollover disgiunti ma non in modo così semplice. I comportamenti “trascina e rilascia” sono una delle novità della versione 4; si tratta di un modo veloce e agevole di determinare cosa succede quando il puntatore passo spra una porzione o un punto attivo.

La creazione di un rollover disgiunto (effetto con il quale quando il puntatore passa sull’area di innesco si verifica uno scambio d’immagine in un’altra zona) si compone di due parti: la preparazione delle immagini da scambiare e la creazione del collegamento.

Le immagini collegate ai rollover dei vari pulsanti devono risiedere ognuna su un fotogramma diverso.

 

1) Aprire il documento salvato nel tutorial precedente

2) Visualizzare il pannello Fotogrammi

3) Dal menù a discesa Opzioni scegliere Duplica fotogramma e aggiungere sei fotogrammi dopo il fotogramma corrente.

4) Selezionare il fotogramma 2; con lo strumento di testo posizionarsi al centro del rettangolo incassato e scrivere “Risorse per il Webmaster” (Verdina, 14 pt, grassetto, bianco).

5) Ripetere le istruzioni del punto 4 per gli altri fotogrammi scrivendo ogni volta la frase corrispondente.

6) Tornare al fotogramma 1 e tracciare una porzione rettangolare che copra il rettangolo incassato.

7) Sempre nel fotogramma 1 selezionare il primo pulsante.

8) Cliccare sulla maniglia del comportamento “trascina e rilascia” (il puntatore diventa un pugno).

9) trascinare il pugno sulla porzione che copre il rettangolo incassato.

10) Dal menù a comparsa Immagine di scambio selezionare il fotogramma 2.

11) Ripetere le istruzioni da 7 a 10 per tutti gli altri pulsanti scegliendo ogni volta il fotogramma corrispondente al pulsante.

Premete F12 per visualizzare un’anteprima nel browser.

Adesso che il lavoro è terminato non resta che esportarlo

Nota: selezionando con lo strumento Puntatore la porzione che copre il rettangolo incassato vengono visualizzati, sotto forma di linee blu, tutti i comportamenti “trascina e rilascia” ad essa associati. Per eliminarne uno è sufficiente cliccarci sopra e confermare l’eliminazione.

 Suggerimento: dato che le immagini da scambiare nei rollover risiedono in fotogrammi diversi viene spontaneo chiedersi dove siano le immagini relative ai rollover dei pulsanti. Si trovano effettivamente in quattro fotogrammi diversi, ma i fotogrammi relativi ai pulsanti diventano visibili solo quando l’editor pulsanti è attivo.

 

 

Esportare pagine HTML

 

Abbiamo già accennato al fatto che Fireworks è in grado di produrre tutti i file HTML e le immagini necessari al funzionamento delle interfacce. È necessario però definire le modalità di esportazione del codice HTML. Questo può essere fatto dalla finestra di dialogo Imposta HTML cui si accede con il comando File > Imposta HTML o cliccando sul pulsante Opzioni nella finestra Esporta.

La finestra Imposta HMTL è composta da tre schede sovrapposte: Generale e Tabella contengono impostazioni di tipo globale, cioè preferenze che possono essere usate come valori predefiniti per tutte le esportazioni, mentre dalla scheda Specifico del documento si effettuano scelte che influenzano solo il documento corrente.

 

Generale – permette di scegliere:

 

# uno stile per il codice HTML (in base a quale editor verrà utilizzato in seguito per modificare le pagine generate);

# l’estensione da attribuire al file;

# se inserire o meno i commenti nel codice (riguardanti i punti dove tagliare e incollare);

# se i nomi di tutti i file generati devono contenere solo caratteri minuscoli.

 

Tabella – permette di modificare le impostazioni per le tabelle che serviranno a ricomporre le immagini. Per Spazio si può scegliere tra:

 

# Tabelle nidificate – Nessun spaziatore: le tabelle nidificate sono più lente da scaricare nel browser ma, non contenendo spaziatori, è più semplice modificare il codice.

# Tabella singola – Nessuno spaziatore: questa scelta può produrre risultati non soddisfacenti.

# Spaziatore trasparente da 1 pixel: gli spaziatori sono piccole immagini trasparenti che vengono usate per ottenere un allineamento ottimale all’interno delle tabelle.

 

Inoltre si può selezionare Usa colore area di lavoro per fare in modo che il colore delle celle sia lo stesso dell’area di lavoro.

Il menù a comparsa Contenuto consente di scegliere cosa deve essere inserito nelle celle che risultano vuote.

 

Specifico del documento – è possibile:

 

# modificare le regole per la composizione del suffisso che viene apposto al nome delle varie porzioni delle immagini;

# inserire una descrizione alternativa che comparirà al posto dell’immagine mentre viene scaricata dal browser. Si tratta di una funzione estremamente importante per consentire l’accesso alle pagine agli utenti non vedenti (vedi guida all’accessibilità);

# selezionare Pagine HTML con barre di navigazione multiple. Questa opzione risulta utile quando la pagina HTML non deve contenere frame; Fireworks genererà tante pagine quanti sono i pulsanti più una con la barra “a riposo”

 

Nota: quando si seleziona quest’ultima opzione non è necessario usare come nome del documento quello usato nei link dei pulsanti. Se, per esempio, al momento di esportare l’esercizio, si chiama il documento “interfaccia” Fireworks genererà le pagine interfaccia.htm, interfaccia_1.htm, ecc., e i pulsanti richiameranno le pagine giuste, anche se nell’Autocomposizione collegamento URL abbiamo inserito come URL pag_1.htm, pag_2.html ecc.

 

 

Menù a comparsa

 

Attenzione: questa è una delle novità della versione 4. Con la versione precedente non è possibile creare niente di simile.

Questa nuova funzionalità di Fireworks viene gestita da un’autocomposizione. Rispetto alla notevole versatilità delle altre funzioni del programma, questa risulta decisamente schematica e non lascia molto campo alla personalizzazione, fermo restano la semplicità di esecuzione.

Si ha completa libertà di scelta riguardo all’aspetto dell’area di innesco del menù a discesa ma lo stesso non si può dire per le voci del menù.

Vediamo in dettaglio le fasi di creazione.

 

# Selezionare l’oggetto che individuerà l’area di innesco del menù.

# Inserire una porzione o un punto attivo e scegliere Inserisci > Menù a comparsa; si aprirà la finestra di dialogo dell’autocomposizione Imposta menù a comparsa.

 

L’autocomposizione e suddivisa in due fasi: la prima in cui si inseriscono le voci di menù e sottomenù e i relativi collegamenti URL; la seconda in cui si definisce l’aspetto del menù.

 

Prima fase:

 

# nel campo Testo digitare la voce del menù;

# nel campo Collega impostare l’indirizzo URL e, se necessario, specificare un Obiettivo;

# cliccare sul pulsante Aggiungi menù (+);

# ripetere i passaggi descritti per aggiungere le altre voci di menù.

 

Per cambiare l’ordine delle voci cliccare e trascinare all’interno dell’area di anteprima.

Per creare eventuali voci di sottomenù selezionare la voce nell’area di anteprima e cliccare sui pulsanti Menù rientrato (Menù sporgente per tornare indietro).

 

Nota: la prima voce non può essere spostata in un sottomenù.

Una volta terminato di impostare la struttura del menù cliccare sul pulsante Avanti.

 

Seconda fase:

 

per i pulsanti del menù sono previsti gli stati Su e Sopra, inoltre il menù può essere impostato come HTML o Immagine. Nel primo caso i due stati si differenziano solo per il colore dello sfondo e del testo. Se invece si è preferito Immagine sarà possibile scegliere anche fra alcuni stili diversi.

Le dimensioni dei pulsanti non sono gestibili direttamente: dipendono dalla lunghezza delle voci di menù e dal formato scelto per il carattere.

Una volta completata l’autocomposizione, nel documento compiono i contorni blu dei pulsanti relativi alle voci di menù (i sottomenù non vengono visualizzati). Un doppio clic sul contorno consente di tornare all’autocomposizione per apportarvi delle modifiche.

Per trascinamento è possibile spostare il menù a comparsa in qualunque punto del documento, mentre è impossibile agire sulla posizione delle voci dei sottomenù che si aprono sempre a destra della voce principale.

Attenzione: quando si esporta un menù a discesa il programma crea anche un file di nome fw_menu.js che deve necessariamente risiedere nella stessa cartella dove viene memorizzata la pagina HTML. Se il menù contiene dei sottomenù viene creato anche un file di nome arrows.gif.

 

 

Creare animazioni

 

In Fireworks le animazioni possono essere create disegnando direttamente i singoli fotogrammi ma, soprattutto, realizzando dei simboli le cui proprietà, modificate nel tempo, diano l’illusione del movimento. Il fatto che all’interno di uno stesso documento possano coesistere non solo simboli diversi, ma anche varie istanze delle stesso simbolo, consente di creare animazioni complesse contenenti più azioni contemporanee.

Riassumendo si può dire che per creare una animazione i passi necessari sono i seguenti:

 

# creare i simboli (che a loro volta possono essere animati) che dovranno comparire nell’animazione;

# impostare le proprietà dei vari simboli, inserendo se necessario anche più istanze di uno stesso simbolo in fotogrammi diversi;

# decidere la durata dei vari fotogrammi e se l’animazione deve essere ciclica o meno;

# ottimizzare ed esportare l’animazione (Fireworks è in grado di esportare le animazioni sia in formato GIF che in formato SWF per Flash).

 

Per creare un simbolo è sufficiente scegliere Inserisci > Nuovo simbolo e nella finestra di dialogo selezionare Animazione. Nell’area di lavoro che si apre si lavora normalmente e dal pannello Fotogrammi si possono inserire o duplicare fotogrammi per ottenere un simbolo che contenga già una animazione.

 

Nota: quando si inserisce un simbolo formato da più fotogrammi in un documento questo risulterà comunque composto da un solo fotogramma, come accade per i pulsanti a più stati.

Per modificare le proprietà di un simbolo si può scegliere Elabora > anima > Impostazioni oppure visualizzare il pannello Oggetto. Le proprietà su cui si può agire sono:

 

# fotogrammi: rappresenta il numero di fotogrammi nei quali deve comparire quel simbolo;

# spostamento: distanza (in pixel) che deve percorrere il simbolo all’interno dell’animazione;

# direzione: direzione (in grado) verso cui deve spostarsi il simbolo;

# scalatura: variazione delle dimensioni del simbolo. È espressa in percentuale e può essere compresa fra 0 e 250;

# opacità: grado di trasparenza, espresso in percentuale;

# rotazione: angolo (espresso in gradi) di cui deve ruotare il simbolo durante l’animazione;

# oraria e antioraria: indicano ovviamente la direzione di rotazione.

 

Quando si inserisce un simbolo animato in un documento, questo risulta evidenziato da un contorno tratteggiato e al suo interno è visibile un pallino rosso. Cliccando e trascinando si modifica il tracciato del simbolo, cioè il percorso lungo cui deve muoversi durante l’animazione. Il tragitto è individuato da un segmento su cui si sono dei pallini colorati: quello verde e quello rosso rappresentano rispettivamente il punto di partenza e quello di arrivo, mentre quelli azzurri indicano le posizioni del simbolo nei vari fotogrammi.

 

Nota: nelle animazioni è possibile importare GIF animate, in questo caso il programma le converte in simboli animati ai quali è possibile modificare le proprietà.

Dal pannello Fotogrammi si può impostare il ritardo, cioè per quanto tempo verrà visualizzato quel fotogramma. Il valore impostato di default si trova nella colonna a destra del pannello ed è espresso in centesimi di secondo. Per modificarlo è sufficiente farci doppio clic sopra e impostare il nuovo valore.

In basso a sinistra nel pannello compare il pulsante che permette di attivare o disattivare la tecnica Onion Skin. In questo modo è possibile visualizzare i fotogrammi che precedono o seguono quello selezionato. Si tratta di un metodo molto valido quando, ad esempio, ci sia la necessità di far coincidere le posizioni di due simboli in fotogrammi diversi.

Accanto al pulsante Onion Skin si trova il pulsante Ripetizione che permette di impostare quante volte il gruppo di fotogrammi deve essere ripetuto durante la riproduzione dell’animazione. L’opzione sempre permette di ottenere una animazione continua.

Nota: il valore che si sceglie indica il numero di ripetizioni successive alla prima riproduzione, quindi, se si imposta per esempio il valore 2, la sequenza sarà riprodotta tre volte.

Dal pannello Ottimizza scegliendo trasparenza indice o trasparenza alfa è possibile impostare uno o più colori da rendere trasparenti all’interno del browser. Sempre da questo pannello è importante scegliere come formato di esportazione GIF Animata. A questo punto sarà possibile vedere anche una anteprima nel browser (tasto F12) dell’animazione che altrimenti risulterebbe una immagine fissa.

Al momento dell’esportazione (File > Anteprima esportazione) controllare che il campo Formato, in alto a destra nella finestra, sia impostato su GIF Animata. Dopo aver cliccato su Esporta impostare Salva come su Solo immagine per ottenere un file GIF, scegliere invece Flash SWF per avere un documento che potrà poi essere aperto in Flash per ulteriori modifiche.

 

 

Generalità

 

Questa è una guida di aggiornamento a Fireworks MX per chi ha già avuto modo di seguire la Guida a Fireworks 4 . Consigliamo dunque la lettura, o per lo meno uno sguardo veloce, alla guida precedente.

Da pochi giorni, dopo l’uscita della prerelease, Macromedia ha reso disponibile la ormai consueta versione trial di Fireworks MX che è possibile scaricare (anche in versione italiana, e questa è la prima novità!) all’indirizzo:

http://www.macromedia.com/

La nuova versione di Fireworks mostra tutta la sua versatilità soprattutto se usata insieme alle altre applicazioni del gruppo Macromedia Studio MX (Flash MX, Dreamweaver MX, ColdFusion MX e FreeHand 10).  Ci limiteremo ad analizzare le differenze e le novità di Fireworks MX rispetto alla versione precedente, accennando comunque anche alle funzionalità che coinvolgono l’uso di altri programmi.

 

 

L’interfaccia e I menu

 

L’interfaccia

Sicuramente è la cosa che colpisce di più al primo impatto. L’ambiente di lavoro è stato razionalizzato e uniformato a quello degli altri programmi del gruppo Macromedia Studio MX:

 

 

Come si può vedere (cliccando sulla miniatura è possibile vedere l’immagine ingrandita) ci sono diverse novità che saltano all’occhio come per esempio la presenza della Finestra Ispezione e un’impostazione diversa dei consueti pannelli.

Ma esistono anche variazioni meno evidenti a prima vista come per esempio le modifiche nei menù.

 

I Menu

Già nel menù File troviamo una novità della versione MX che è costituita dal comando Ricostruisci tabella. Si tratta in pratica della possibilità di ricostruire un file sorgente PNG corrispondente a una pagina HTML, in questa maniera vengono importati gli eventuali comportamenti presenti (menù pop-up, effetti rollover, ecc.) e collegati automaticamente alle porzioni corrispondenti.

Nel menù Modifica spariscono i comandi relativi alla selezione di oggetti che ritroviamo nel menù Selezione. Quest’ultimo rappresenta una voce nuova dei menù e raccoglie, oltre ai comandi citati prima, anche quelli relativi alle selezioni di pixel nelle bitmap che nella vecchia versione si trovavano nel menù Elabora sotto la voce Perimetro di selezione.

Rispetto a Fireworks 4 scompare il menù Inserisci i cui comandi trovano posto nel menù Modifica sotto le voci Inserisci e Librerie.

Il menù Elabora risulta meglio organizzato mediante i sottomenù Area di lavoro, Animazione, Simbolo, Menù a comparsa, ecc. alcuni dei quali erano presenti anche nella versione precedente.

Nel menù Testo oltre ai normali comandi, compaiono i due comandi per l’esecuzione del controllo ortografico del testo e per impostarne le caratteristiche di funzionamento:

 

 

Il menù Comandi è stato ampliato con alcune nuove funzionalità come per esempio la Procedura Guidata Grafica che permette di associare delle variabili a immagini, testo, porzioni e punti attivi in modo da poter generare dei documenti multipli prelevando informazioni da file di database XML. Mediante il comando Gestisci estensioni si semplificano le procedure di installazione ed eliminazione delle estensioni (script di comandi, libreria, filtro, motivo o texture che possono essere aggiunti per aggiungere nuove funzionalità a una applicazione Macromedia). Scompare invece il comando Centra nel documento che però ritroviamo nell’utile pannello Allinea. In questo menù ho trovato una cosa strana che a mio parere vale la pena di evidenziare: sia nella prerelease che nella versione inglese di Fireworks MX nel menu Comandi esiste la voce Creative in cui sono raccolti alcuni comandi già esistenti nella vecchia versione e tre nuovi (Add Arrohead, Fade Image e Twist and Fade). Ma nella versione italiana tutto il sottomenu è misteriosamente sparito!

Quello che in Fireworks si chiamava Xtras nella nuova versione prende il nome di menù Filtri, ma rimane sostanzialmente invariato per il nuovo filtro Alien Skin Splat LE > Edge.

Per finire diamo un’occhiata al menù Finestra nel quale non troviamo più i pannelli Contorno, Riempimento ed Effetti che vengono inglobati nella finestra Ispezione Proprietà. Fa invece la sua comparsa il pannello Allinea:

 

 

Del tutto simile all’analogo pannello già presente in Flash5, è un esempio della nuova caratteristica di Fireworks MX che permette di estendere il programma creando comandi JavaScript anche complessi con interfacce sviluppate in Flash MX.

 

 

Il pannello Strumenti

 

Il pannello degli strumenti è stato ampliato e razionalizzato. Come si vede dall’immagine i vari strumenti sono stati suddivisi in categorie in base al loro uso: strumenti di Selezione, strumenti per creare e modificare immagini Bitmap e Vettoriali, strumenti necessari per esportare ed aggiungere funzionalità Web, strumenti per la gestione del Colore e per la Visualizzazione:

 

 

Nella sezione Bitmap troviamo una serie di strumenti nuovi e che sono (andando da destra verso sinistra nell’immagine):

 

# Sfocatura

# Precisione: modifica la definizione delle arre dell’immagine su cui si trascina

# Schiarisci

# Scurisci

# Sfumino: preleva il colore dal punto di partenza e lo spande nella direzione in cui si trascina

 

Affiancato allo strumento Secchio di vernice troviamo anche Sfumatura. Cliccando su di esso la finestra Ispezione Proprietà presenta tutti gli strumenti in grado di definire il tipo di sfumatura che si vuole usare come riempimento.

 

 

Come si vede è possibile scegliere il tipo di sfumatura, le caratteristiche del bordo e un’eventuale texture da applicare al riempimento. Cliccando poi sul quadratino accanto al secchiello si apre la finestra che permette di impostare la sfumatura:

 

 

Non è molto diversa da quella già presente nella versione 4 ad eccezione dei riquadri in alto che rappresentano i campioni di opacità della sfumatura. Sono indipendenti dai campioni di colore che si trovano sotto sia per quantità che per posizione e permettono di applicare effetti di trasparenza al riempimento impostato.

Gli strumenti Pennello e Matita, che nella versione 4, producevano tracciati vettoriali adesso sono diventati strumenti di disegno bitmap. Al loro posto sono stati introdotti gli strumenti tracciato vettoriale e Ridisegna tracciato che fanno parte del gruppo di strumenti delle Penna. In particolare lo strumento Ridisegna tracciato consente di ridisegnare o prolungare un tracciato mantenendo tutte le caratteristiche impostate per il tracciato di partenza.

 

 

Gli altri pannelli

 

All’apertura del programma i pannelli di Fireworks MX sono raggruppati nell’area di aggancio che si trova sul lato destro dello spazio di lavoro. I gruppi possono essere compressi in modo che sia visibile solo la barra del titolo. A sinistra del titolo del pannello ci sono cinque puntini che rappresentano il dispositivo di aggancio del pannello. trascinandolo lontano dal gruppo si ottiene la separazione del pannello. Viceversa per reinserire un pannello nel gruppo basta trascinarlo nell’area di aggancio:

 

 

Nell’immagine si vedono, per esempio, alcuni pannelli raggruppati e il pannello livelli isolato.

Quando un pannello è sganciato dal gruppo può essere spostato normalmente senza reinserirlo nel gruppo semplicemente trascinandolo dalla barra blu sopra il titolo.

È possibile liberare l’area di lavoro da tutti i pannelli (compresa la finestra Ispezione Proprietà e la barra degli Strumenti) scegliendo Visualizza > Nascondi pannelli (oppure premendo F4). Il pannello Risposte è un’altra delle novità di Fireworks MX. Mediante esso si può accedere alle esercitazioni  ma, soprattutto, connettersi (cliccando sul pulsante Aggiorna) al sito della Macromedia e scaricare documenti di vario genere come informazioni e note tecniche.

 

 

La Finestra Ispezione Proprietà

 

La Finestra Ispezione Proprietà è una novità assoluta di Fireworks MX ma se avete lavorato con Dreamweaver 4 o Flash MX ne apprenderete rapidamente l’uso. Normalmente si trova nella parte bassa dello schermo ma, come gli altri pannelli, all’occorrenza può essere spostata in qualsiasi punto utilizzando il dispositivo di sgancio. Può anche essere chiusa in modo che rimanga visibile solo la barra del titolo (cliccando direttamente sul titolo) oppure può essere ridotta a metà (cliccando sulla piccola freccia bianca che si trova nell’angolo in basso a destra) lasciando visibili soltanto due delle quattro righe su cui normalmente sono disposte le varie opzioni. In pratica si tratta di una finestra dinamica il cui contenuto varia in base all’oggetto o allo strumento selezionato in quel momento. Questa evita di dover tenere aperti contemporaneamente diversi pannelli. Per esempio la finestra proprietà che viene visualizzata quando nel documento è selezionato una forma vettoriale è la seguente (è stata divisa in due parti per migliorarne la visualizzazione):

 

 

Come si può vedere in un’unica finestra vengono riprodotti più di quattro dei pannelli di Fireworks 4. In particolare, andando da sinistra verso destra, troviamo i pannelli Info, Riempimento, Contorno, Effetti e la parte del pannello Livelli che regola la trasparenza e la modalità di sovrapposizione.

Anche la finestra Ispezione Proprietà associata allo strumento Testo risulta particolarmente utile e funzionale. In Fireworks MX non esiste più l’editor di testo; il testo viene inserito direttamente nel documento consentendo un’integrazione più diretta con la grafica esistente:

 

 

Come si vede nell’immagine la finestra Ispezione Proprietà in questo caso mette a disposizione in un’unica soluzione tutte le impostazioni dei formati testo e paragrafo.

 

 

Creazione di menu comparsa

 

La creazione di menu a comparsa è stata una delle novità più interessanti della versione 4 e in Fireworks MX risulta potenziata e resa più flessibile.

Il modo di procedere per la creazione di menu pop-up è sostanzialmente sempre lo stesso e per prima cosa occorre creare un’area di innesco. A questo proposito è sufficiente disegnare un pulsante o inserire un’immagine o più semplicemente individuare una parte del documento inserendo una porzione (Modifica > Inserisci> Porzione).

A questo punto con la porzione selezionata si sceglie Elabora > Menu a comparsa > Aggiungi menu a comparsa. Questo ci permette di accedere alla finestra dell’Editor di menù a comparsa.

La finestra risulta suddivisa in quattro schede che rappresentano le varie fasi della creazione del menu e che sono raggiungibili cliccando sulla corrispondente linguetta in alto o, in successione, cliccando sul pulsante Avanti che si trova in basso a destra.

 

 

Scheda Contenuto: permette di definire la struttura di base del menu inserendo le voci (campo Testo) il collegamento URL (campo Collega) e il target nel caso si sia deciso di usare i frame (campo Obiettivo).

Per aggiungere o eliminare le voci del menu si usano i pulsanti + e – mentre per creare le voci di sottomenu, dopo aver digitato il testo si preme il pulsante Aumenta rientro.

 

Scheda Aspetto: consente di decidere se si vuol creare un menu orizzontale o verticale e se deve essere composto dal celle HTML o avere come sfondo una immagine (selezionabile soltanto fra quelle proposte). È possibile inoltre impostare dimensione, stile e allineamento del testo all’interno delle celle e decidere il colore del testo e dello sfondo separatamente per gli stati Su e Sopra.

 

Scheda Avanzate: permette di determinare le dimensioni della cella (normalmente è impostato su Automatica, cioè tutte le celle hanno la dimensione necessaria a contenere la voce di dimensioni maggiori) esprimendole in pixel. È anche possibile regolare la spaziatura interna ed esterna fra celle, l’ampiezza del bordo e il suo colore, il rientro del testo e il ritardo con cui compare il menu (in millisecondi).

 

Scheda Posizione: contiene varie scelte che permettono di decidere la posizione del menu (rispetto alla posizione dell’area d’innesco) e dei sottomenu rispetto alla posizione del menu.

Oltre alle scelte proposte è consentito inserire posizioni personalizzate impostando i valori (in pixel) delle distanze x e y rispetto alla posizione di riferimento.

L’opzione Colloca nella stessa posizione fa si che tutti i sottomenu si aprano nello stesso punto indipendentemente dalla voce di menu che li genera.

 

Attenzione: è possibile impostare la posizione dei sottomenu in basso rispetto alla corrispondente voce di menu ma questo può creare delle difficoltà soprattutto nei menu verticali. I menu  comparsa che si generano con Fireworks sono menu “statici”, ben lontani dei menu ottenibili con Flash. Quando le voci dei sottomenu si aprono sotto la voce di menu vanno a sostituire le eventuali altre voci presenti al disotto che ritorneranno visibili soltanto se l’utente torna con il mouse sull’area di innesco.

 

 

Opzioni di esportazione

 

Le opzioni di esportazione (File > Imposta HTML) consentono di definire le modalità con cui Fireworks esporta il codice HTML. Normalmente il codice HTML generico funziona con qualunque editor HTML ma se nel documento si sono impostati comportamenti o contenuti interatti è consigliabile impostare nella scheda Generale della finestra Imposta HMTL l’editor usato se compare fra quelli riportati nella lista (Dreamweaver, FrontPage o GoLive).

Una novità di Fireworks MX è la possibilità di esportare i documenti usando lo standard XHTML. Inoltre per l’esportazione in XHTML Fireworks usa la codifica UTF-8 un metodo di codifica del testo che permette ai browser di visualizzare set di caratteri diversi (per esempio caratteri cinesi e inglesi) sulla stessa pagina HTML.

Nella scheda Specifico del documento è possibile decidere se le impostazioni scelte devono essere applicate al solo documento in uso o risultare valide per tutti i documenti (pulsante Imposta predefiniti).

 

 

Fireworks e Photoshop

 

È possibile importare in Fireworks file di Photoshop che contengono del testo. In questo caso per prima cosa Fireworks verifica la disponibilità del carattere nel sistema e in caso contrario chiede se si vuole sostituire il carattere oppure conservarne l’aspetto.

Questa nuova funzionalità della versione MX è molto utile se si condividono documenti con utenti di altri computer. Se si sceglie di mantenere l’aspetto il testo viene sostituito con una bitmap che lo rappresenta ma rimane comunque modificabile (fermo restando che quando si decide di modificarlo il carattere viene sostituito con uno disponibile).

Se al testo di Photoshop sono stati applicati degli effetti riconosciuti da Fireworks questi vengono riprodotti e il tutto risulta comunque modificabile (effetti analoghi possono però avere aspetti diversi perché i due programmi li applicano in modo differente).

Fireworks permette anche l’esportazione in formato PDS consentendo di controllare quali elementi risulteranno modificabili una volta riaperti in Photoshop. Per far questo si può usare il pulsante Esportazione rapida che si trova in alto a destra nella finestra del documento e scegliere Altro > Esporta in Photoshop.

Dal menu Impostazioni è possibile scegliere fra:

 

# Mantieni modificabilità dell’aspetto converte gli oggetti e il testo in livelli, conservando la modificabilità degli effetti. Non conserva invece l’aspetto preciso dell’immagine di Fireworks. Utile quando si prevedono notevoli modifiche in Photoshop.

# Mantieni aspetto di Fireworks converte gli oggetto in un singolo livello, gli effetti e il testo non modificabili. Consente di mantenere il controllo sugli oggetti e conservare l’aspetto originale dell’immagine di Fireworks.

# File Photoshop di dimensioni inferiori appiattisce ciascun livello in un’immagine pienamente renderizzata. Conviene usare questa impostazione quando si esportano file contenenti un grosso numero di oggetti Fireworks.

# Personalizza consente di specificare impostazioni specifiche separatamente per gli oggetti, gli effetti e il testo.

 

 

La funzione Ricostruisci tabella

 

Un’altra nuova funzionalità molto interessante di Fireworks MX è la possibilità aprire o importare un file HTML ricostruendo la struttura grafica e i comportamenti in esso contenuti (la stessa cosa può essere ottenuta con il comando File > Ricostruisci tabella).

Si tratta di una funzionalità molto utile soprattutto perché permette di aggiornare immagini, modificare il layout, i collegamenti, i pulsanti e/o altri elementi interattivi senza dover ricostruire l’intera pagina.

Attenzione: ricostruendo le pagine vengono persi tutti gli sfondi (sia di pagina che di tabelle o celle) e si incontrano difficoltà se nella pagina sono presenti immagini posizionate in celle di dimensioni maggiori a quelle dell’immagine stessa.

 

 

Introduzione

 

Adesso sarete guidati passo per passo nella realizzazione del layout grafico di sito internet, fittizio ma perfettamente funzionante, utilizzando Fireworks.

Ci rivolgiamo  ad  utenti con un minimo di conoscenza del programma. Verranno analizzate tutte le varie fasi della produzione a partire dalla progettazione della struttura, alla realizzazione del logo e delle varie immagini necessarie, fino ad arrivare all’ottimizzazione e all’esportazione delle pagine principali che serviranno poi come modelli per tutte le pagine interne.

Alla fine mostreremo  brevemente l’uso di Dreamweaver per apportare piccole modifiche e ritocchi alle pagine create con Fireworks.

Il sito che ho scelto , come ben si capisce dal nome (Cartoline dal Mondo), ricalca lo schema di quei siti in cui è possibile scaricare immagini. In particolare in questo caso, per semplificare la struttura dei menù, mi sono limitato ad una raccolta di immagini provenienti da varie parti del mondo; questo però, come vedrete, ci permetterà di utilizzare tutte le principali funzioni di Fireworks che normalmente si usano nella realizzazione dei layout.

Per avere un’idea di quello che otterremo alla fine ,potete scaricare l’intero sito già finito qui.

Il nome del sito e del logo sono un prodotto della mia fantasia e quindi qualunque riferimento a siti o aziende realmente esistenti è da ritenersi puramente casuale.

Tutte le immagini utilizzate invece sono di tipo free e sono state prelevate dai seguenti siti:

 

www.freefoto.com

stock.d2.hu

www.graphicmaps.com

 

Nota: facciamo  riferimento all’ultima versione del programma (Fireworks MX) ma praticamente tutte le funzioni usate sono reperibili anche nella versione precedente, salvo che potrebbero essere diversi i menù in cui si trovano i vari comandi. Comunque nelle varie lezioni sarete avvertiti se verranno usate funzionalità disponibili soltanto nella nuova versione.

 

 

Progettazione

 

Prima di iniziare a realizzare un sito è importante avere le idee chiare sulla sua struttura.

Il sito dovrà contenere una serie di immagini provenienti da varie parti del mondo. Per semplificare la ricerca le foto saranno suddivise per continente, per stato e per città.

Al fine di rendere più agevole la navigazione le pagine presenteranno un menù principale, contente i link ai cinque continenti, che risulterà visibile in ogni sezione. Le pagine relative ai singoli continenti conterranno ognuna un menù a discesa dal quale si potrà accedere alle sezioni relative alle varie città raggruppate per stato di appartenenza.

Le varie sezioni del sito saranno strutturate su due frame:

 

# Il frame in alto, che avrà una altezza di 155 pixel, sarà fisso e conterrà il logo e i cinque pulsanti di navigazione principali (Africa, America, Asia, Australia e Europa). Ad ognuno dei pulsanti sarà associato un effetto rollover disgiunto che mostrerà una piccola immagine relativa al continente selezionato.

# Il frame in basso conterrà le pagine che costituiranno le varie sezioni del sito. Ogni pagina avrà sulla sinistra un menù a discesa contenete una lista delle città per le quali sono disponibili le immagini, raggruppate per stato di appartenenza. La parte destra della pagina sarà invece lasciata libera e potrà ospitare le miniature delle varie immagini. La pagina principale, cioè quella che sarà visualizzata nell’home page conterrà invece una immagine del planisfero con aree sensibili che ricondurranno alle sezioni dei cinque continenti

La grafica sarà ottimizzata per essere visualizzata a una risoluzione 800×600 ma fruibile anche a risoluzioni superiori. Inoltre il sito sarà compatibile con i due browser più diffusi (Explorer 5 o superiori e Netscape 4.5 e superiori).

 

 

Mappa del sito

 

Per agevolare la realizzazione del layuot grafico è opportuno decidere da subito i nomi da dare alle pagine principali e ai due frame.

Il frameset coinciderà con l’home page e quindi sarà chiamato index.htm.

Nel frame superiore (topFrame) verrà visualizzata la pagina menu.htm che conterrà i link alle pagine relative ai vari continenti (africa.htm, america.htm, asia.htm, europa.htm ed oceania.htm) che dovranno aprirsi nel frame sottostante (mainFrame).

Sarà poi necessario creare un’altra pagina (corpo.htm) che sarà quella che verrà visualizzata nel mainFrame all’apertura della pagina index.htm (l’unica che non conterrà alcun menù a discesa).

Per tutte le altre pagine, che non verranno create fisicamente , ma alle quali si farà riferimento nei menù a discesa, i nomi verranno attribuiti usando i nomi delle città a cui fanno riferimento, senza maiuscole né spazi (al cui posto verrà eventualmente usato il trattino di sottolineatura) e con la normale estensione .htm.

Nota: i nomi assegnati ai frame (topFrame e mainFrame) sono quelli che vengono impostati di default da Dreamweaver quando si sceglie di creare un frameset di questo tipo. Questo ci semplificherà il lavoro quando, nelle ultime lezioni, useremo brevemente Dreamweaver per ricostruire il frameset , dare un’ultima rifinitura alle pagine e verificare il funzionamento dell’intero sito.

 

 

Impostazioni preliminari

 

È importante mantenere un certo ordine quando si creano siti internet soprattutto perché i documenti che verranno creati sono molti (pagine, immagini, ecc.) e si rischia poi di perdere tempo per ritrovarli.

Creiamo quindi, in C:/, nella cartella Documenti o nella vostra cartella di lavoro, una cartella di nome “cartoline“. Sarà la cartella principale del nostro sito, quella che conterrà le pagine html e tutti gli elementi che genererà Fireworks durante l’esportazione delle pagine e ai quali non sarà possibile cambiare posizione.

All’interno della cartella “cartoline” creiamo altre due cartelle: “immagini” e “originali“. Nella prima verranno inserite tutte le immagini generate da Fireworks in fase di esportazione.

La cartella “originali” conterrà invece i file sorgente di Fireworks e le immagini necessarie per creare l’interfaccia. Le immagini (scaricabili qui) sono già state preparate per adattarsi al nostro progetto: tutte sono state portate a una risoluzione di 72 dpi, le foto dei continenti sono state ritagliate in modo da avere tutte dimensioni 240×70 e quella della terra è stata ridimensionata a 100×100 e salvata in formato gif con lo sfondo trasparente.

Chiaramente, se si trattasse di un vero sito, la cartella “originali” non dovrebbe essere pubblicata.

 

 

Il logo

 

Cominciamo col realizzare il logo creando un nuovo documento di 350×200 px con sfondo bianco e risoluzione 72 pixel/pollice.

Il font usato per il testo è il Bookman Old Style ma potete usarne altri, l’unica condizione da ricercare è che la lettera O maiuscola sia praticamente un cerchio perfetto.

La scritta è stata fatta a pezzi usando come colore sempre #FF6600, ma con dimensioni diverse e in particolare:

 

“cartoline”, “dal” e “ondo” dimensione 45

“M” dimensione 70

“O” dimensione 150

Selezioniamo “dal”, “M” , “O” e “ondo” e scegliamo Testo > Converti in tracciati (questa operazione serve soltanto per riuscire ad allineare meglio i vari pezzi di testo).

Importiamo poi il file terra.gif e centriamolo nella “O”, selezioniamo entrambi e raggruppiamoli (Elabora > Raggruppa).

Posizioniamo “dal”, “M”, “O” e “ondo” distanziandoli a piacere poi selezioniamo tutto, apriamo il pannello Allinea e scegliamo Allinea al bordo inferiore.

Apriamo il pannello Livelli, creiamo un nuovo livello (Livello2) e trasferiamoci la scritta “cartoline”. Blocchiamo il Livello1 e torniamo a lavorare sul Livello2.,tracciamo un cerchio di 130×130 pixel senza riempimento e con contorno qualsiasi. Mentre il cerchio è selezionato con lo strumento Coltello tracciamo una linea orizzontale che lo divida a metà e cancelliamo la parte di sotto.

Selezioniamo la semicirconferenza e il testo (cartoline) e scegliamo Testo > Collega al tracciato. Se la posizione del testo non fosse simmetrica controllate dal pannello Ispezione Proprietà che l’allineamento sia centrato.

Posizioniamo il testo circolare sopra la “O”, sblocchiamo il Livello1, selezioniamo tutto e raggruppiamo.

Centriamo nel documento usando il pannello Allinea e salviamo il nostro lavoro nella cartella “originali” con il nome di logo.png

 

 

Il layout di base

 

Passiamo a creare la struttura di base del layout, cioè la barra orizzontale e quella verticale in cui troveranno posto i menu. Creiamo un nuovo documento 760×420 pixel con sfondo bianco e risoluzione 72 pixel/pollice. trasciniamo due linee guida orizzontali a 100 px e a 115 px, e una verticale a 150 px. tracciamo poi due rettangoli entrambi senza contorno e con colore di riempimento #FFCC00:

 

1) dimensioni 782×120 px, posizione X = -22, Y = -20

2) dimensioni 172×334 px, posizione X = -22, Y = 85

 

Selezioniamo i due rettangoli e uniamoli (Elabora > Combina tracciato > Insieme).

Spostiamoci in una parte vuota del documento e creiamo la figura di ritaglio al cui interno troverà posto il logo. Per ottenerla tracciamo un cerchio 125×125 senza contorno e con un colore di riempimento qualsiasi. Sempre con il cerchio selezionato, scegliamo lo strumento Coltello e tracciamo una linea orizzontale che lo divida in due. Cancelliamo quindi la parte inferiore.

Tracciamo un rettangolo con gli angoli arrotondati 210×43, smusso 50, senza contorno e con un qualunque colore di riempimento.

Posizioniamo il rettangolo in X = 250, Y = 202 e il semicerchio in X = 313, Y = 140. Selezioniamoli entrambi e scegliamo Elabora > Combina tracciato > Insieme.

La figura ottenuta deve essere spostata in posizione X = 9, Y = 18 (se la figura dovesse risultare sotto ai rettangoli portarla in primo piano usando il pannello Livelli). Selezioniamo tutto e scegliamo Elabora > Combina tracciato > Ritaglio interno. Con la figura gialla ottenuta ancora selezionata dal pannello Ispezione Proprietà impostiamo Effetti > Smusso e rilievo > Smusso interno con i seguenti parametri: forma = Liscio, larghezza = 7, contrasto = 75%, morbidezza = 3, angolo = 135, preimpostazione pulsante = Sollevato.

Salviamo il documento nella cartella “originali” con il nome interfaccia.png

Per finire apriamo il file logo.png, selezioniamo tutto e copiamo. Chiudiamo quindi logo.png e incolliamo in interfaccia.png. Con il logo selezionato scegliamo Elabora > trasformazione > trasformazione numerica > Ridimensiona, verifichiamo che entrambe le opzioni siano attive e impostiamo l’altezza su 90.

Portiamo il logo in posizione X = 17, Y = 23, verifichiamo la riuscita del lavoro controllando l’anteprima nel browser (tasto F12) e salviamo.

 

 

I collegamenti principali

 

Adesso  impareremo a strutturare la barra di navigazione principale, cioè quella che troverà posto nel frame alto. I pulsanti avranno un effetto rollover che farà cambiare il colore del testo da arancione in bianco e rimarranno di quest’ultimo colore se premuti.

Apriamo il file interfaccia.png e in una parte vuota del documento disegnamo un rettangolo 60×20 senza contorno e con riempimento #FFCC00.

Prendiamo lo strumento testo e nel pannello Ispezione Proprietà impostiamo arial, 12, grassetto, allineamento centrato e colore #FF6600 e scriviamo Oceania (è il testo più lungo fra quelli da inserire nei pulsanti).

Selezioniamo il testo e il rettangolo, apriamo il pannello Allinea e centriamo i due oggetti.

Convertiamo i due oggetti in simbolo (Elabora > Simbolo > Converti in simbolo); si tratterà ovviamente di un simbolo di tipo Pulsante a cui daremo proprio il nome “pulsante”.

Apriamo il pannello Libreria e facciamo doppio clic sull’anteprima del simbolo appena creato. In questo modo si aprirà la finestra dell’editor pulsanti. Spostiamoci nella scheda Sopra e clicchiamo sul pulsante Copia grafico Su, selezioniamo il testo e cambiamo il colore in bianco.

Passiamo alla scheda Giù e clicchiamo sul pulsante Copia grafico Sopra. Chiudiamo l’editor dei pulsanti cliccando su Fatto.

Dal pannello Libreria trasciniamo nel documento altre quattro istanze del pulsante e dal pannello Ispezione Proprietà cambiamo i nomi (campo Testo) rispettivamente in Africa, America, Asia, Europa.

Posizioniamo i cinque pulsanti come indicato:

 

Africa: X = 300, Y = 74

America: X = 380, Y = 74

Asia : X = 460, Y = 74

Europa : X = 540, Y = 74

Oceania : X = 620, Y = 74

 

Rimangono da creare i collegamenti alle pagine Selezioniamo il primo pulsante a sinistra e nella parte destra del pannello Ispezione Proprietà riempiamo i tre campi a disposizione come segue:

Colleg. = africa.htm

Alt = Immagini dall’Africa

Obiettivo: = mainFrame

 

Ripetiamo lo stesso procedimento cambiando ovviamente il nome della pagina a cui collegarsi e il testo nel campo Alt.

Testiamo il lavoro premendo F12 (cliccando sui vari pulsanti il browser cerca di aprire una pagina inesistente in una nuova finestra e manda un messaggio d’errore; l’effettivo funzionamento dei link potrà essere testato solo dopo aver esportato tutte le pagine e aver ricostruito i frameset in Dreamweaver).

Salviamo il documento.

 

 

Il rollover disgiunto

 

Nota: in questa lezione si fa uso del filtro Alien Skin Splat LE che non è presente in Fireworks 4, ma il mancato utilizzo di questa caratteristica non compromette il funzionamento dell’effetto e quindi può essere saltato.

I pulsanti di navigazione principale, oltre ad avere un rollover che fa cambiare colore al testo, presentano anche un altro effetto noto con il nome di rollover disgiunto: quando il puntatore del mouse passa sopra di essi nella parte superiore della barra compare un’immagine diversa per ogni pulsante.

Lavoriamo ancora con il file interfaccia.png. Apriamo il pannello Livelli, creiamo un nuovo livello (Livello2) e blocchiamo il Livello1.

Nel nuovo livello disegniamo un rettangolo 240×70 senza bordi, con un riempimento qualsiasi e posizioniamolo in X = 440, Y = 2.

Apriamo il pannello fotogrammi e dal menu Opzioni (attivabile cliccando sul pulsante indicato dalla freccia rossa) scegliamo Duplica fotogramma impostando 5 fotogrammi e selezionando l’opzione Dopo il fotogramma corrente.

 

 

Selezioniamo il fotogramma 2, cancelliamo il rettangolo sopra i pulsanti e importiamo l’immagine africa.jpg dalla cartella “originali”.

Posizioniamo l’immagine in X = 440, Y = 2 e applichiamole uno dei filtri messi a disposizione da Fireworks MX: Filtri > Alien Skin Splat LE > Edges. Nella finestra di dialogo che si apre impostiamo i seguenti parametri:

Edge width = 20.00

Margin = 0.00

Feature size = 40.00

Edge Mode = Halfatone Dots

Color > Definisci colori personalizzati: Rosso = 255, Verde = 204, Blu = 0 (equivalente a #FFCC00).

 

Niente vieta che proviate altre combinazioni dei parametri (soprattutto l’Edge Mode) che potrebbero piacervi di più!

Ripetiamo quanto fatto per il fotogramma 2 anche per i quattro fotogrammi seguenti cambiando, ovviamente, l’immagine da importare; in particolare: nel fotogramma 3 importiamo america.jpg, nel 4 asia.jpg, nel 5 europa.jpg e nel 6 oceania.jpg.

 

Nota: potete cambiare gli effetti da applicare alle varie immagini nei fotogrammi, l’unica cosa importante è che le foto vengano posizionate tutte nello stesso punto.

Una volta terminate queste operazioni torniamo al fotogramma 1, selezioniamo il rettangolo, togliamo il riempimento e scegliamo Modifica > Inserisci > Porzione.

Modifichiamo leggermente dimensioni e posizione della porzione portandoli rispettivamente a 240×74 e X = 440, Y = 0. Capiremo nella prossima lezione il perché di tale modifica.

Siamo adesso alla realizzazione del comportamento da associare ai pulsanti per ottenere l’effetto voluto. Sblocchiamo il Livello1, selezioniamo il primo pulsante a sinistra (Africa), clicchiamo sul cerchietto che compare al centro e, tenendo premuto il tasto del mouse, trasciniamo sulla porzione che abbiamo inserito in corrispondenza del rettangolo trasparente. Si apre una piccola finestra di dialogo, dal menu a discesa selezioniamo Fotogramma 2 e confermiamo cliccando su OK.

Ripetiamo quanto fatto anche per gli altri quattro pulsanti scegliendo ogni volta dal menu a discesa il fotogramma che contiene l’immagine che vogliamo associare al pulsante.

Testiamo il nostro lavoro con l’ormai consueto F12 e se tutto funziona salviamo il documento.

 

 

Il collegamento all’home page

 

Come ultima cosa dobbiamo creare un collegamento all’home page in corrispondenza del logo. Dato che quest’ultimo ha una forma irregolare utilizzeremo due porzioni collegate alla stessa pagina.

Disegniamo quindi quattro porzioni con le dimensioni e la posizione indicate di seguito:

 

1) 228×41 in posizione X = 0, Y = 74

2) 60×74 in X = 0, Y = 0

3) 144×74 in X = 60, Y = 0

4) 24×74 in X = 204, Y = 0

 

Per le porzioni 1 e 3 riempiamo i campi che si trovano nella parte destra del pannello Ispezione Proprietà:

Colleg. = corpo.htm

Alt = Home page

Obiettivo = mainFrame

 

Testiamo e salviamo il nostro documento.

 

Nota: le dimensioni e la posizione di queste porzioni sono state scelte in modo da sfruttare le linee di taglio inserite dai pulsanti e dalle immagini di rollover. È buona norma infatti cercare di inserire meno linee di taglio possibile perché in questo modo le tabelle che verranno create nella pagina html al momento dell’esportazione saranno più semplici e creeranno meno problemi di visualizzazione.

In effetti le porzioni 2 e 4 che abbiamo disegnato non servono ai fini della creazione del link, perché aggiungerle quindi?

È importante tenere sempre presente che Fireworks esporta comunque le parti di immagine che non sono coperte da porzioni (a meno che non gli venga indicato diversamente in fase di esportazione). Per esportare questi pezzi, se non gli diamo delle direttive più precise, il programma fa riferimento soltanto alle linee di taglio già esistenti e questo può costringerlo a dover creare delle tabelle HTML praticamente ingestibili.

Diventa particolarmente utile in queste situazioni l’anteprima nel browser invece che l’anteprima ottenibile dalla scheda presente nella finestra del documento (nella quale questi problemi non vengono visualizzati).

Per aver conferma di quanto detto proviamo a cancellare le porzioni 2 e 4 e a premere F12.

Quella che vedete è una parte del risultato ottenuto:

 

 

Suddivisione del documento

 

Come abbiamo già visto in fase di progettazione le pagine del nostro sito saranno suddivise in due frame: la barra superiore troverà posto nel frame in alto e quella laterale, con i contenuti delle varie pagine, in quello in basso.

Fino ad ora abbiamo costruito il layout come un’unica pagina e questo risulta utile per avere un’idea d’insieme di quello che sarà l’aspetto complessivo del sito. Ma se passassimo alla fase di esportazione in questo momento quello che otterremmo sarebbe logicamente un’unica pagina contenente tutta la grafica realizzata e saremmo costretti a perdere parecchio tempo con Dreamweaver (o qualunque altro editor html) per riuscire a suddividerla nelle due pagine da visualizzare separatamente nei frame. Fireworks anche in questa situazione può aiutarci a risparmiare tempo prezioso.

Apriamo il solito file interfaccia.png e scegliamo Elabora > Area di lavoro > Dimensioni area di lavoro. Nella finestra di dialogo che si apre scegliamo come punto di aggancio quello in alto a sinistra e impostiamo come valore per l’altezza 115 pixel:

 

 

In questo modo abbiamo ottenuto un documento che visualizza soltanto il contenuto della pagina che dovrà essere visualizzata nel frame superiore (Fireworks ignora completamente tutto quello che si trova fuori dall’area di lavoro e quindi la sua presenza non influenzerà minimamente l’esportazione del contenuto); salviamolo nella cartella “originali” con il nome “menu.png”.

Senza chiudere il file scegliamo Modifica > Annulla Ritaglio documento ottenendo di nuovo il documento originale. A questo punto ripetiamo l’operazione precedente (Elabora > Area di lavoro > Dimensioni area di lavoro) scegliendo come punto di ancoraggio quello in basso a sinistra e impostando come altezza 305 pixel. Il documento ottenuto rappresenta la pagina che dovrà trovare posto nel frame in basso, salviamolo nella solita cartella con il nome “pagina.png”.

A questo punto abbiamo a disposizione tre file: interfaccia.png resterà disponibile per avere una visione completa del layout delle pagina, menu.png servirà per esportare la pagina menu.htm mentre corpo.png dovrà ancora essere modificato in modo da ottenere le restanti pagine (corpo.htm, africa.htm, america.htm, ecc.).

 

Realizzazione della pagina corpo.htm

 

Come specificato in fase di progettazione l’home page su lato sinistro del frame basso non presenterà alcun menù ma nella zona centrale sarà presente l’immagine mappata del planisfero dal quale sarà possibile collegarsi alle sezioni relative ai cinque continenti.

Vediamo come incaricare Fireworks di creare una pagina di questo tipo.

Apriamo il file pagina.png, importiamo l’immagine mondo.gif che troviamo nella cartella “originali” e posizioniamola in X = 260, Y = 25.

Dal pannello degli strumenti selezioniamo Punto attivo poligonale e tracciamo un poligono che copra il continente americano. Il poligono si chiude quando si fa clic sul primo punto inserito, comunque una volta chiuso la sua forma è sempre modificabile usando lo strumento Sottoselezione.

Con l’area poligonale selezionata andiamo a riempire i campi che si trovano nella parte destra del pannello Ispezione Proprietà:

 

Colleg. = america.htm

Alt = Immagini dall’America

Obiettivo = _self (selezionabile dal menù a discesa)

 

Creiamo nello stesso modo altri quattro punti attivi, ognuno in corrispondenza di un continente e per ognuno impostiamo in modo appropriato il collegamento alla pagina.

È importante fare attenzione che i vari punti attivi non si soprammettano altrimenti la pagina può non funzionare correttamente.

Verifichiamo il funzionamento (non i link logicamente) del nostro lavoro e salviamo il documento nella cartella “originali” con il nome “corpo.png”

 

 

Realizzazione della pagina europa.htm

 

12. Realizzazione della pagina europa.htm

 

Nota: Fireworks 4 non dà la possibilità di impostare la posizione in cui si aprirà il menù a comparsa, è comunque possibile sistemarlo (anche se in modo meno preciso) trascinando con il mouse le cellette che individuano il menù nella posizione voluta. Anche l’aspetto estetico che si ottiene è leggermente diverso e non può essere modificato, ma questo non compromette il funzionamento della pagina.

Analizziamo adesso passo per passo la realizzazione dell’originale della pagina europa.htm.

Apriamo il file pagina.png. Blocchiamo il Livello1; dovrebbero già essere presenti due livelli dei quali uno (Livello2) vuoto, ma se così non fosse basta crearne uno nuovo.

Nel Livello2 disegniamo un rettangolo 60×20 senza contorno e con riempimento #FFCC00, poi con lo strumento Testo scriviamo “Spagna” usando arial 12, grassetto, allineato a sinistra e di colore #FF6600.

Selezioniamo i due oggetti e mediante il pannello Allinea allineiamoli a bordo sinistro e al centro in verticale.

Scegliamo poi Elabora > Simbolo > Converti in simbolo impostando come tipo pulsante e assegnandogli il nome “nazione”.

Dal pannello Libreria attiviamo l’editor dei simboli per il pulsante appena creato e impostiamo gli stati Sopra e Giù perfettamente uguali allo stato Su.

trasciniamo nel documento altre tre istanze del pulsante sostituendo il testo con Italia, Francia e Austria e quindi posizioniamo i pulsanti come segue:

 

Austria: X = 0, Y = 50

Francia: X = 0, Y = 90

Italia: X = 0, Y = 130

Spagna : X = 0, Y = 170

 

Selezioniamo il primo pulsante (Austria) e scegliamo Elabora > Menu a comparsa > Aggiungi menu a comparsa. Si apre l’editor dei menu a comparsa:

 

 

Scheda Contenuto

Inseriamo le voci del menù che vogliamo associare al pulsante “Austria” impostando anche il nome della pagina a cui collegarsi e l’indicazione del frame in cui far aprire la pagina stessa.

 

Scheda Aspetto

Il nostro menù sarà formato da celle in formato HTML e sarà un menù verticale. Il carattere usato per le singole voci sarà arial 12 (nell’elenco troveremo arial, Helvetica, sans-serif), grassetto e allineamento a sinistra.

Per lo stato Su impostiamo come colore del testo #FF6600 e come colore della cella #FFCC00.

Lo stato Sopra sarà uguale ad eccezione del fatto che il testo avrà colore bianco.

 

Scheda Avanzate

Lasciamo impostate sia la larghezza che l’altezza delle celle su Automatico (Fireworks MX in effetti ci permette di impostare a piacere le dimensioni, ma in questo caso la caratteristica ha scarsa rilevanza nell’aspetto del menù). Settiamo invece la spaziatura interna su 3 e, se necessario, deselezioniamo l’opzione Mostra margini.

 

Scheda Posizione

Clicchiamo sull’ultimo pulsante a destra (Imposta posizione menu nella parte superiore destra della porzione) e poi sul pulsante Completato.

Tutto questo procedimento deve essere ripetuto anche per gli altri tre pulsanti. Fireworks ci viene in aiuto perché, a parte la prima scheda che ovviamente deve essere riempita con le voci e i collegamenti appropriati, tutte le altre ripropongono automaticamente le ultime scelte impostate (comunque dateci sempre un’occhiata, non si sa mai).

Testiamo il nostro lavoro e salviamolo, sempre nella cartella “originali” con il nome “europa.png”.

 

 

Realizzazione delle altre pagine dei continenti

 

13. Realizzazione delle altre pagine dei continenti

 

Il modo più veloce per realizzare le pagine relative agli altri continenti è quello di prendere come riferimento il file europa.png, salvarlo con un nome appropriato e quindi eseguire tutte le modifiche necessarie ai pulsanti e ai vari menù a discesa.

Per le voci da inserire potete far riferimento a quelle usate da me nel sito di esempio o, logicamente, usarne altre a vostro piacere

Ricordatevi che per modificare un menù esistente è sufficiente cliccare sul cerchietto al centro del pulsante d’innesco e dal menù che compare scegliere Modifica menu a comparsa.

Suggerimento: se le voci da inserire nei pulsanti sono troppo lunghe è preferibile modificare il simbolo aumentando l’altezza del rettangolo e scrivendo il testo su due righe. Quando lo fate ricordatevi sempre di aggiornare anche gli stati Sopra e Giù.

Nota: se fate riferimento al mio sito d’esempio vi accorgerete che ci sono alcuni stati che non risultano suddivisi in città: Etiopia nella sezione Africa e Nuova Guinea nella sezione Oceania. Per rimanere in linea con lo stile dei pulsanti questi hanno un effetto rollover che fa diventare il testo bianco mentre questo non succede per gli stati cui è associato un menu a comparsa.

Ricordatevi che i pulsanti inseriti sono istanze di uno stesso simbolo quindi se effettuate una variazione su uno di essa questa si rifletterà su tutti. Il sistema più semplice per risolvere la questione è creare un duplicato del simbolo “nazione”, modificarlo in modo che il colore della scritta cambi al passaggio del mouse e poi usare questo nuovo simbolo per i pulsanti cui non è associato alcun menù.

 

 

Ottimizzazione e preparazione per l’esportazione (I parte)

 

Quando si esporta una pagina contenente delle porzioni Fireworks ci dà la possibilità di decidere per ognuna di esse quale sia il miglior formato di esportazione. Questa caratteristica permette al contempo di ottenere risultati esteticamente migliori ma anche di ridurre il più possibile le immagini senza per questo perdere di qualità.

Il layout del nostro sito non richiede particolari ottimizzazioni, tutte le immagini, provenendo da grafica vettoriale, potranno essere esportate in formato gif e dovremo porre attenzione solo al numero di colori in modo da ridurre le dimensioni.

L’unica parte che verrà esportata in formato jpg sarà quella relativa alle immagini del rollover disgiunto (sebbene anche esportandole come gif i risultati non siano apprezzabilmente diversi).

Apriamo quindi il file menu.png e il pannello Ottimizza.

Per ogni porzione presente nel pannello (ad eccezione di quella che copre l’area di scambio del rollover disgiunto) impostare:

 

Esporta formato file = GIF

Tavolozza indicizzata = Adattata WebSnap

Colori = 32 (per vedere fino a che punto ci si può spingere con la riduzione dei colori senza perdere di qualità occorre far ricorso all’anteprima nel browser).

 

Per la porzione che ricopre l’area di scambio impostare invece Esporta formato file = JPEG lasciando inalterati tutti gli altri parametri.

Un’altra operazione importante da fare prima di esportare un documento è quella di attribuire un nome significativo alle varie porzioni presenti.

Fireworks assegna automaticamente dei nomi alle porzioni che fanno riferimento al nome del documento e alla posizione occupata nella tabella HTML. Niente vieta di usare questi nomi anche in fase di esportazione salvo che in seguito si rischia di perdere molto tempo nella ricerca di una particolare immagine all’interno della cartella del sito.

Il nome che il programma assegna alle porzioni è visualizzato nella casella Porzione che si trova in altro a sinistra nel pannello Ispezione Proprietà e da lì può essere modificata semplicemente digitando il nuovo nome.

I nomi da dare alle porzioni devono seguire le solite regole che si usano normalmente per attribuire i nomi ai file: tutte lettere minuscole, nessuno spazio, nessun carattere particolare ad eccezione del trattino di sottolineatura.

Per amore di sintesi mi limiterò ad indicare i nomi che ho associato alle porzioni presenti nel file menu.png lasciando a voi la scelta per tutte quelle che si trovano nei vari documenti creati fino ad ora.

Delle quattro porzioni che coprono la parte del logo ho chiamato logo1 e logo2 quelle a cui è associato il link, a quelle relative ai pulsanti ho attribuito gli stessi nomi dei link (africa, america, ecc.), mentre alla porzione che copre l’area di scambio, in un eccesso di fantasia, ho dato il nome di “scambio”!

Salviamo il documento.

 

 

Ottimizzazione e preparazione per l’esportazione (II parte)

 

Vediamo adesso come preparare per l’esportazione il file corpo.png.

Non contiene pulsanti né porzioni di altro genere (ricordatevi che i punti attivi non introducono tagli) quindi Fireworks la esporterebbe come un’unica grossa immagine.

La barra laterale data la sua struttura, se esportata con attenzione, ci permetterà di alleggerire ulteriormente la pagina lavorando nell’editor HTML e di renderla anche più versatile.

Per prima cosa inseriamo due linee guida orizzontali a 20 e 295 px e spostiamo quella verticale da 150 a 155 pixel. Verifichiamo che l’opzione Aggancia alle guide sia attivata (Visualizza > Guide) perché ci aiuterà a tracciare porzioni che non si soprammettono.

Tracciamo prima una porzione che parta dalla linea guida superiore e arrivi fino a quella inferiore e che copra l’intera immagine mappata e chiamiamola mondo (campo Porzione nel pannello Ispezione Proprietà).

tracciamo poi altre quattro porzioni che coprano l’intera barra: le dimensioni e le posizioni saranno:

 

 

Verifichiamo con l’anteprima nel browser che non ci siano problemi di visualizzazione,salviamo e chiudiamo il documento.

 

 

Ottimizzazione e preparazione per l’esportazione (III parte)

 

Rimangono da preparare i documenti relativi ai cinque continenti.

Apriamo europa.png. Anche qui impostiamo le stesse linee guida usate per corpo.png (orizzontali a 20 e 295 pixel, verticale a 155). Prepariamo poi le porzioni per la barra:

 

 

Alle porzioni corrispondenti ai pulsanti daremo i nomi dei pulsanti sempre tenendo conto delle regole da usare per l’attribuzione dei nomi ai file.

Il resto della pagina (tutta la parte bianca) dovrà servire per scrivere testo o inserire delle tabelle che potrebbero contenere le miniature delle immagini. Ma se esportiamo la pagina in questo modo Fireworks inserirà al posto dello spazio bianco una immagine e questo creerà dei problemi quando poi dovremo elaborare la pagina nell’editor HTML.

Il metodo a mio parere più semplice per risolvere il problema (non è l’unico, specialmente per chi ha una buona pratica con Dreamwever o con il codice HTML, ma è sicuramente quello che crea minori difficoltà ad utenti poco esperti e che consente di risparmiare più tempo in fase di modifica) è quello di tagliare il documento.

Scegliamo quindi Elabora > Area di lavoro > Dimensioni area di lavoro. Nella finestra di dialogo che si apre scegliamo come punto di aggancio quello in alto a sinistra e impostiamo come valore per la larghezza 155 pixel. Salviamo il documento.

Per le altre pagine il procedimento da ripetere è identico e si creano le stesse porzioni con gli stessi nomi (ad eccezione di quella chiamata “via…” a cui deve essere cambiato il numero ogni volta).

La porzione “sfondo” non avrà sempre la stessa posizione visto che viene creata dopo l’ultimo pulsante ma deve avere sempre la stessa altezza (20 pixel).

Nota:  per questi documenti è inutile impostare l’ottimizzazione per ogni singola porzione dato che saranno tutte uguali, nella prossima lezione vedremo che è possibile impostare un’ottimizzazione globale al momento dell’esportazione.

 

 

Esportazione delle pagine

 

Siamo finalmente giunti al momento di produrre le pagine che andranno a far parte del nostro sito!

Iniziamo aprendo menu.png. e scegliamo File > Anteprima esportazione.

Nella finestra di dialogo che si apre non modifichiamo niente e clicchiamo direttamente sul pulsante Esporta. Ecco come settare le varie impostazioni:

 

# Salva i: cartoline

# Nome: mnu

# Salva: HTML e immagini

# Porzioni: Esporta porzioni

# Delle quattro opzioni a disposizione selezioniamo Includi area senza porzioni e Inserisci immagine nella sottocartella.

# Clicchiamo sul pulsante Sfoglia, doppio clic sulla cartella immagini e poi clic sul pulsante Seleziona “immagini”.

 

Per finire clicchiamo sul pulsante Opzioni. Nella scheda Generale impostiamo Stile HTML su Dreamweaver HML (ma c’è la possibilità di scegliere anche altri editor) e Estensione su .htm:

 

 

Passiamo poi alla scheda Tabella e impostiamo:

 

Spazio con: tabella singola – Nessuno spaziatore

Contenuto: Immagine spaziatore

Clicchiamo su OK e quindi su Salva.

 

La prima pagina del nostro sito è stata generata!

Passiamo ora al file corpo.htm e apriamo di nuovo la finestra Anteprima esportazione.

Come ricorderete per questo file non è stata fatta l’ottimizzazione delle porzioni per sarebbero state tutte uguali, quindi procederemo adesso ad impostare un’ottimizzazione generale.

Nella parte sinistra dell’immagine impostiamo come numero di colori 32 (vedi immagine seguente) e poi clicchiamo su Esporta:

 

 

Controlliamo che tutte le impostazioni siano uguali a quelle usate per la pagina menu.htm e clicchiamo su Salva.

Lo stesso identico procedimento deve essere usato per esportare tutte le pagina relative ai continenti.

A questo punto il lavoro di Fireworks è terminato, rimane da dare dei piccoli ritocchi agendo sul codice o usando un editor HTML.

 

 

Definizione del sito e creazione del frameset

 

Da questo momento in poi, per dare gli ultimi ritocchi alle nostre pagine, useremo Dreamweaver perché è l’editor HTML nato proprio per lavorare in sinergia con Fireworks. In particolare farò riferimento alla versione 4 in inglese.

Le lezioni anche in questo caso si rivolgono a utenti che abbiano un minimo di conoscenza dell’uso del programma, i comandi da utilizzare saranno indicati per esteso ma non ci soffermeremo su descrizioni particolareggiate di finestre o altro.

La prima cosa da fare con Dreamweaver quando si inizia a lavorare con le pagine di un sito è quella di definire il sito stesso.

Da una delle finestre che si aprono scegliamo Site > New site. L’unica sezione che ci interessa settare è Local Info nella quale imposteremo:

Site Name: Cartoline dal Mondo

Local Root Folder: clicchiamo sulla cartellina gialla e andiamo a selezionare la cartella in cui abbiamo memorizzato le pagine.

Verifichiamo poi che entrambe le opzioni siano selezionate e clicchiamo su OK.

Nella finestra Site files compariranno tutte le pagine che abbiamo creato con Fireworks. L’unica che manca è index.htm che ci accingiamo a creare.

 

Nota: noterete la presenza del file mm_menu.js, è quello che si incarica del funzionamento del rollover disgiunto, non cambiategli né nome né posizione.

Scegliamo File > New Window per aprire una pagina vuota (se non ce ne fosse già una aperta, in qual caso potete usare quella).

Clicchiamo sulla freccia accanto alla scritta Common nel pannello degli Oggetti e scegliamo Fames.

Clicchiamo sul secondo pulsante a sinistra partendo dall’alto (Insert Top Frame) e nel pannello Ispezione proprietà nela casella Row digitiamo 115 (è l’altezza del frame superiore):

 

 

Apriamo adesso il pannello Frames e clicchiamo su topFrame, nel pannello Ispezione Proprietà impostare:

borders: No

Scroll: No

Clicchiamo poi sulla cartellina gialla vicino al campo Scr e dall’elenco dei file scegliamo menu.htm.

Selezioniamo ora nel pannello Frames mainFrame e ripetiamo le impostazioni, Scroll questa volta dovrà essere impostato su Default e la pagina da selezionare sarà corpo.htm.

Scegliamo File > Save Frameset e diamogli il nome di index.htm.

 

Se facciamo un’anteprima nel browser (tasto F12 come in Fireworks) non ci troviamo davanti a un gran bel risultato, le varie pagine necessitano ancora di qualche piccolo ritocco!

 

 

Ultimi ritocchi

 

Quella brutta visualizzazione della pagina index dipende dalla presenza dei margini alto e sinistro delle pagine create da Fireworks.

Per eliminare i margini apriamo una delle pagine e scegliamo Modify > Page Properties. In questa impostiamo a zero i campi Top Margin, Left Margin, Margin width e Margin Height (gli ultimi due ci garantiranno la compatibilità con Netscape):

 

 

Cerchiamo ora di alleggerire le pagine. Apriamo la pagina corpo.htm e se già non ci siamo portiamo in Visualizzazione Standard. Cancelliamo dalla tabella le immagini via1 e sfondo. Selezioniamo le entrambe le celle rimaste vuote, clicchiamo sul pulsante Merge selected cells using spans e poi sulla cartellina gialla in corrispondenza del campo Bg scegliendo come immagine di sfondo proprio sfondo.gif.

In effetti in questo caso la differenza di peso della pagina è molto poca ma questa modifica permette di allungare la barra laterale di quanto di vuole nel caso che il contenuto della pagina ecceda una schermata.

La stessa cosa può essere fatta nelle pagine dei continenti l’unica accortezza sarà quella, una volta unite le due celle, di impostare l’altezza della cella ottenuta pari alla somma delle altezze delle immagini via e sfondo (per esempio nella pagina africa sfondo è alta 20 pixel, via è alta 115 pixel quindi l’altezza della cella deve essere impostata su 135 pixel).

Apriamo ora una delle pagine dei continenti per creare lo spazio in cui troveranno posto le miniature, il testo o quello che vorrete metterci.

Attiviamo la visualizzazione Layuot e clicchiamo sull’etichetta verde Layout table. Nel pannello Ispezione Proprietà impostiamo la larghezza della tabella su 760 pixel e riempiamo lo spazio grigio che si è creato a destra della barra con una cella di layout.

Come ultima cosa torniamo in visualizzazione standard selezioniamo l’intera tabella mediante il tag <table> nell’angolo in basso a sinistra della finestra del documento e sempre dal pannello Ispezione Proprietà impostiamo align = Left (in questo modo, quando il sito viene visualizzato a una risoluzione superiore a 800×600, rimane una fascia bianca nella parte destra della pagina che non altera troppo l’aspetto del sito).

Ripetere queste modifiche per tutte le pagine dei continenti e l’allineamento della tabella anche per le pagine corpo.htm e menu.htm.

 

Suggerimento: può essere utile salvare le pagine dei continenti come modelli di Dreamweaver in modo da poterle poi riutilizzare per creare più rapidamente le pagine delle varie nazioni.

A questo punto il nostro lavoro è finito e potete testare il funzionamento anche dei link.

Rimane ovviamente da inserire il contenuto delle varie pagine, lascio a voi la possibilità di sbizzarrirvi come meglio credete!

Io mi sono limitato a scrivere il nome della città, tanto per non avere link spezzati.

7 Risposte a “ADOBE FIREWORKS”

1. Info scrive:

   10 agosto 2019 alle 14:51

   Sicuramente, che blog splendido e post illuminanti, sicuramente aggiungerò il tuo sito ai preferiti. Tutto il meglio!

   Rispondi
2. Kavin scrive:

   13 ottobre 2019 alle 1:27

   Hi i am kavin, its my first time to commenting anywhere, when i read this
   paragraph i thought i could also make comment due
   to this good article.
   —————–
   Ciao sono kavin, è la mia prima volta che commento qui, quando ho letto questo
   paragrafo ho pensato che avrei potuto anche fare un commento, dovuto
   a questo buon articolo.

   Rispondi
3. Barbracheshire scrive:

   19 ottobre 2019 alle 7:20

   Woah! I’m really digging the template/theme of this site.
   It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance” between user friendliness and visual appeal.
   I must say that you’ve done a superb job with this.
   In addition, the blog loads super fast for me on Firefox.
   Superb Blog!
   ————–
   Woah! Sto davvero apprezzando il modello / tema di questo sito.
   È semplice ma efficace. Molte volte è difficile ottenere quel “perfetto equilibrio” tra facilità d’uso e richiamo visivo.
   Devo dire che hai fatto un ottimo lavoro con questo.
   Inoltre, il blog si carica molto velocemente per me su Firefox.
   Blog superbo!

   Rispondi
4. Lele scrive:

   7 febbraio 2020 alle 11:30

   Mi piace quello che vedo,così adesso ti sto seguendo,non vedo l’ora di leggere altro!

   Rispondi
5. Robertina scrive:

   18 aprile 2020 alle 6:06

   Molto bello! Alcuni punti estremamente validi! Apprezzo che tu scriva questo post e che anche il resto del sito web sia molto buono.

   Rispondi
6. Roberto scrive:

   30 aprile 2020 alle 14:21

   Hai fatto alcuni punti davvero positivi. Ho cercato sul web per ulteriori informazioni sul problema
   e ho scoperto che la maggior parte delle persone seguirà le tue opinioni su questo sito.

   Rispondi
7. Artemis scrive:

   22 settembre 2020 alle 20:46

   Very beautiful!

   Rispondi