Le barre di navigazione Web personalizzate offrono un luogo altamente visibile per il marchio della tua azienda. L’applicazione dei colori e del carattere del logo alla barra di navigazione consente ai potenziali clienti di trovarti più facilmente. Inoltre integra visivamente la barra con il design del tuo sito. Sebbene le barre di navigazione contengano più collegamenti, è più facile progettare una singola immagine piuttosto che più di una. Un modo pratico per dividere l’immagine in parti cliccabili è dividerla in immagini separate, quindi riassemblarla con istruzioni CSS e HTML. I programmi che possono eseguire sia la divisione che i passaggi di riassemblaggio includono GIMP e Adobe Illustrator.
Pixlr: Design Navigation Bar
1
Vai al sito web Pixlr e crea una nuova immagine, quindi premi “T” per eseguire lo strumento Testo. Fare clic sulla tela, quindi fare clic sul colore bianco o nero dal controllo Colore visualizzato. Fare clic sul carattere desiderato dal controllo Carattere.
2
Digita il testo della barra di navigazione nell’area Testo, incluso un carattere separatore come “|”. Ad esempio, digita “Home | Chi siamo | Prodotti” quindi fai clic su “OK” per finalizzare il testo.
3
Premi “Ctrl-S”, quindi segui le istruzioni per salvare l’immagine sul tuo PC.
Fetta con GIMP
1
Scarica e installa GIMP.
2
Apri l’immagine della barra di navigazione che hai creato in GIMP, quindi fai clic sul righello verticale sul bordo della finestra dell’applicazione di GIMP. Trascina il righello in modo che sia allineato al carattere separatore digitato, ad esempio “|”, per separare un collegamento da un altro. GIMP mostra una linea guida in cui hai lasciato cadere il righello. Trascina un’altra linea guida a sinistra del collegamento più a sinistra e un’altra a destra del collegamento più a destra.
3
Trascina le linee guida per separare i link rimanenti, quindi fai clic sul sottomenu “Web” del menu Filtro. Fare clic sul comando “Sezione”, quindi annotare il nome del file HTML visualizzato nel controllo “Nome file per esportazione”.
4
Fare clic su “OK” per accettare le impostazioni di esportazione predefinite. Il comando Sezione taglia l’immagine originale nelle posizioni in cui hai posizionato una linea guida del righello. Ciò si traduce in diversi file di immagine esportati i cui nomi iniziano con “slice_”. GIMP colloca questi file nella stessa cartella della pagina HTML di cui hai annotato il nome. Quando vengono riassemblati da quella pagina, i file di immagine vengono visualizzati come barra di navigazione Web.
5
Apri in WordPad il file HTML creato dal comando Slice. Digita sopra la prima istanza del testo “#” con l’URL del primo collegamento nella barra di navigazione web. Ad esempio, se desideri che il primo link apra la home page del tuo sito web, digita sopra il “#” con l’URL della tua home page, ad esempio “http://www.MySite.com”. L’inserimento manuale degli URL è necessario perché il comando Slice non offre un mezzo per specificare gli URL. Digita le restanti istanze di “#” con gli URL che desideri assegnare agli altri link della barra di navigazione. Salva e chiudi il file HTML.
6
Apri nel tuo browser Web il file HTML contenente la barra di navigazione esportata i cui link hai appena inserito. Fare clic su uno dei collegamenti della barra per accedere all’URL specificato per quel collegamento. Ad esempio, fai clic sul link “Home” per accedere alla home page del tuo sito web.
Fetta Con Illustrator
1
Acquista, scarica e installa Adobe Illustrator.
2
Apri in Illustrator l’immagine della barra di navigazione che hai creato, quindi fai clic sul pulsante “Fetta” a forma di coltello dal pannello Strumenti. Fare clic e trascinare per disegnare rettangoli attorno a ciascun collegamento nella barra di navigazione, quindi fare clic sul pulsante “Selezione sezioni” da sotto il pulsante Sezione.
3
Fare clic su una delle sezioni per selezionarla, quindi fare clic sul comando “Opzioni sezione” del sottomenu Sezione del menu Oggetto. Digitare un URL nel controllo URL della finestra di dialogo visualizzata, quindi fare clic su “OK” per chiudere questa finestra di dialogo. Immettere gli URL per le sezioni rimanenti nella barra di navigazione.
4
Fare clic sul comando “Salva per Web” del menu File, quindi fare clic sul comando “Anteprima”. Illustrator visualizza una pagina HTML di esempio. Copia questa pagina negli appunti, quindi incollala in un nuovo documento di Blocco note. Non salvare ancora il documento.
5
Fare clic sul pulsante “Salva” nella finestra di dialogo “Salva per Web” di Illustrator, quindi annotare il nome della cartella che appare nella barra degli indirizzi della finestra di dialogo Salva. Fai clic su “Salva” per dire a Illustrator di salvare le immagini suddivise in una cartella chiamata “Immagini”. Questa nuova cartella si trova sotto il nome della cartella che hai annotato.
6
Torna al Blocco note, quindi vai alla cartella Immagini osservata in Illustrator. Salva il documento con qualsiasi nome che termini con “HTM”. Apri questo file nel tuo browser Web, che mostra la barra di navigazione. Fare clic su uno dei collegamenti della barra per accedere all’URL specificato per la sezione del collegamento.