PULSANTI WEB PER IL SITO
La separazione tra contenuto e presentazione, in ambito web, sta diventando una condizione indispensabile per il corretto sviluppo di software e, ancor di più, di siti e portali. La reazione di una struttura software che consenta di separare in maniera netta i dati dalla loro rappresentazione grafica consente di fruire degli stessi anche utilizzando mezzi non convenzionali di consultazione, come potrebbero essere i PDA e i telefoni cellulari. Usare i fogli di stile, poi, accelera il lavoro di mantenimento di un sito. Pensate, per esempio, al tempo che serve per sviluppare un pulsante con effetto rollover, ossia che cambi aspetto al passaggio del mouse, utilizzando la tecnica classica.
Dovreste innanzitutto preparare due immagini grafiche con un programma apposito, come Photoshop, quindi scrivere o recuperare del codice Javascript che vi consenta l’applicazione dell’effetto desiderato, con i noti problemi di compatibilità con le varie versioni di browser. Quello che complica però è il fatto che ogni ulteriore modifica del bottone comporta la creazione ex-novo di tutto l’impianto grafico.
TUTTA LA POTENZA DEI CSS
Utilizzando le potenzialità dei CSS tutto risulterà più semplice. Per applicare questo metodo dovrete sfruttare il sistema che prevede l’utilizzo delle voci LINK, VISITED, HOVER e ACTIVE, che rappresentano lo stato di un collegamento ipertestuale. Userete le funzionalità specifiche di Dreamweaver per la creazione di fogli di stile e pertanto inizierete facendo clic sul percorso FINESTRA/STILI CSS. In quella PROGETTAZIONE selezionate il comando NUOVO STILE CSS e create uno STILE PERSONALIZZATO (classe) che chiamerete BOTTONE1.
Nella categoria TIPO, impostate il font che desiderate e mettete il segno di spunta accanto alla voce NESSUNO nella sezione EFFETTI. Passate poi alla categoria SFONDO e impostate il colore dello sfondo che dovrà avere il vostro bottone. Quindi andate alla categoria BLOCCO DI TESTO, scegliendo come allineamentodel testo quello centrato e, cosa molto importante, impostate la voce VISUALIZZA con l’opzione BLOCCO.
Nella categoria ELEMENTI DI PAGINA, nella sezione MARGINE, mettete quindi un segno di spunta accanto alla voce UGUALE PER TUTTO e impostate la spaziatura che dovrà separare il nuovo pulsante dagli altri elementi contigui. Come ultimo sforzo passate poi alla categoria BORDO, mettete un segno di spunta accanto alla voce UGUALE PER TUTTO sia nella sezione STILE sia in quella LARGHEZZA, quindi impostate i colori che dovranno delineare i bordi del bottone, selezionandoli a coppie. Se il pulsante non viene premuto avrà il bordo superiore e quello di sinistra chiari, mentre gli altri due bordi saranno di colore scuro. UN’OCCHIATA AL CODICE Una volta impostato il primo pulsante, fate clic su OK e passate in VISUALIZZAZIONE CODICE. Vedrete che ci sarà, solitamente subito dopo il tag , il codice che gestisce la visualizzazione del bottone. Ricopiate il codice tre volte, in modo da potere rappresentare i quattro aspetti del pulsante, quindi aggiungete, a seguire per ogni singola voce BOTTONE1, queste indicazioni:
a: link a: visited a: hover a: active
In questo modo avrete cambiato il codice del bottone nello stato HOVER, invertendo il colore dei bordi. Adesso vi basterà richiamare il vostro pulsante, all’interno del body della pagina, con la semplice sintassi:
<div class="bottone1"><a href="[l’indirizzo a cui il link deve puntare]">Bottone 1</a></div>e vedrete premiati i vostri sforzi. Come potrete notare, ogni modifica all’aspetto del pulsante avverrà semplicemente intervenendo sul codice del CSS e se poi avrete intenzione di cambiare la scritta del bottone vi basterà modificare la sola stringa di testo del codice di pagina.
GENERATORI DI BOTTONI E PULSANTI ONLINE
As Button Generator – Creare bottoni editabili. È possibile modificare l’icona che vedete, allocare un’ immagine personalizzata scegliendo il testo digitato, i pulsanti sono mobili dal trascinamento del mouse. È possibile inserire questo servizio per il tuo sito
Button Maker – Chiamalo come meglio preferisci: antipixel, distintivo, adesivo, pulsante o bottone divisi in due parti. Puoi personalizzarlo come meglio credi scegliendo colore e testo.
Button Factory – Creare dei pulsanti bei bottoni. Progetta la tua tasto molto personale (tutto è sintonizzabile,dal testo e font alla dimensione e il colore) o adattare uno degli esempi predefiniti!
Cool Archivio – Generatore di pulsanti, generatore di logo on-line e Button Maker per creare la propria grafica! Pulsanti animati.
Cool Text – Generatore di pulsanti, logo e grafica
CSS Trick Button Maker – genera bottoni web 2.0 utilizzando il con codice CSS.
DevDude CSS Button Generator – Pulsanti personalizzati utilizzando i CSS.