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