[tutorial] barra di navigazione con mouse-over in xaraX

[jamesvalue]

Creazione di una barra di navigazione con effetti di mouse-over , in XaraX

1 - prendete il tool rectangle (rettangolo) e create un rettangolo , con le segg. caratteristiche:
larghezza = 90px , altezza =30px , colore = rgb 73 , 37 , 180 , senza contorno esterno = line width = none



2 - Col rettangolo selezionato, prendiamo il tool "bevel" e dragghiamo una delle doppie freccie verso l'interno , per imporre un bevel interno , quindi nella info bar , immettiamo i valori come da immagine:



3 - prendiamo il tool text (testo) e clicchiamo dentro il pulsante per immettere la scritta alla quale poi daremo un colore grigio chiaro (10% nero) , l'immagine quì sotto chiarificherà i settaggi da impostare nella info bar.



Per assegnare i parametri al testo , basterà evidenziarlo col tool testo , e poi nella infobar assegnare i valori come :
carattere (impact) , dimensioni (14pt) , giustificazione , che deve essere assolutamente al centro (center justify) .
Cambiamo quindi colore al testo , prendiamo la freccia , e clicchiamo in un punto vuoto per deselezionare , quindi clicchiamo sul testo (non sul pulsante ) , avremo la conferma di avere selezionato il testo , da un messaggio che ci apparirà in basso a sinistra e che dirà "1 text object on layer1" , col testo selezionato , clicchiamo sinistro sulla casellina colore (grigio chiara) , posta in basso nella tavolozza dei colori , ed automaticamente il testo diventerà grigio.



Dobbiamo centrare il testo nel pulsante , con il tool freccia , tracciamo una finestra che comprenda sia il pulsante che la scritta ,
quindi dal menù "arrange" , clicchiamo su "alignment" , impostiamo i parametri dell'immagine quì sotto , quindi clicchiamo sul pulsante apply.




4 - E' arrivato il momento di costruire la barra di navigazione!

Prendiamo il tool "button and navigation bar" , disegnamo una finestra che comprenda sia il pulsante che la scritta , quindi nella info bar in alto , cliccliamo sul pulsante "new" , si aprirà una finestra comprendente alcune voci , configurando le quali , potrete personalizzare la barra al meglio , non è scopo di questo tutorial entrare nei dettagli per configurare le barre di navigazione , quindi semplicemente inserite i valori che vi vengono suggeriti quì sotto:




Prendete il tool text (testo) evidenziate la scitta nel secondo bottone , ed immettete il testo : HTML.it , evidenziate la scritta nel terzo bottone ed immettete il testo : Babylon , evidenziate quindi la scritta nel quarto ed ultimo bottone ed immettete la scitta : Xara



Continua...............

[jamesvalue]

Parte2................


Riprendiamo il tool "button and navigation bar" , tracciamo una finestra attorno a tutta la barra per selezionarla, quindi nella info bar , clicchiamo sul pulsante "create delete states"

Si aprirà una finestra che ci permetterà di creare deli stati di rollover sui pulsanti , senza dover toccare un solo tool per disegnare i pulsanti che servono!
Cioè in pratica XaraX si preoccuperà di disegnare automaticamente i pulsanti , per ogni stato che andremo ad utilizzare.
Analizzando bene la finestra , notiamo che di fianco a "mouse off" (cioè pulsante a riposo) , c'è una scritta (created) , il chè significa che i pulsanti per quello stato sono già stati creati , e difatti i 4 pulsanti blù che occupano il foglio , sono quelli che verranno utilizzati per lo stato di "mouse off"

Attiviamo il campo "mouse down" e clicchiamo "create"
Questo è lo stato che assumeranno i pulsanti , quando verranno cliccati (mouse down):



Attiviamo il campo "mouse over" e clicchiamo "create"
Questo è lo stato che assumeranno i pulsanti , quando il mouse ci passa sopra:



il campo "selected" è lo stato che assumeranno i pulsanti ,
quando attiviamo quel pulsante (la creazione di tale pulsante , comporta anche la creazione di 1 pagina HTML , per ogni pulsante , quindi nel nostro caso 4 pagine HTML .)
Per cui non creeremo tale stato


5 - Oh! , finalmente la barra è pronta , mancano solo alcuni piccoli ritocchi , dobbiamo innanzitutto inserire gli URL che si attiveranno quando i pulsanti verranno cliccati.

Disegnamo una finestra attorno al pulsante "Google" (solo al primo), per selezionare sia il pulsante che la scritta.
Poi eseguiamo il comando utilities>web adress , e inseriamo nel campo URL , il seg. link:
http://www.google.com/intl/it/
(il link del motore di ricerca "google")
Nel campo target frame for URL , potrete scegliere fra i soliti:
self , parent ,top , blank oppure none (non specificato) , per la barra io ho scelto "blank" (nuova finestra)
Quindi cliccate sul pulsante "add" per assegnare l'indirizzo.




Ripetiamo l'assegnazione degli URL anche per gli altri pulsanti , usando la stessa procedura usata per il primo pulsante , questa volta però gli URL saranno:

HTML.it = http://forum.html.it/forum/forumdisplay.php?forumid=27
Babylon = http://www.babylon.com/
Xara = http://www.xara.com/


6 - Tracciamo una finestra attorno alla barra (tutti e 4 i pulsanti), quindi clicchiamo sul pulsante "export" della info bar (non file>export!).
si aprirà una finestra di salvataggio della pagina HTML.
Inseriamo un nome per la pagina , e troviamogli una destinazione.
quindi clicchiamo su "ok" , si aprirà una finestra di ottimizzazione delle immagini , per le caratteristiche della barra , io ho scelto formato = GIF n.colori=16




Clicchiamo su "export" (dopo avere ottimizzato la barra) et voilà!
La barra è pronta e può essere vista quì:

http://www.sfondo.com/psp/Tutorials/...bar/navbar.htm

Possiamo aggiungere attraverso il pulsante "button and navigation bar" , anche una immagine di sfondo per la barra , come potete vedere quì:

http://www.sfondo.com/psp/Tutorials/...r1/navbar1.htm

Se siete interessati allo sfondo , scrivetemi in privato.