Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

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

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

  2. #2
    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.