Fabionetwork Inviato 28 Giugno 2003 Segnala Condividi Inviato 28 Giugno 2003 Creare un Menu a comparsa in Dreamweaver MX Introduzione Benvenuti al mio secondo tutorial per ItaliaMac. Sempre di Dreamweaver si parla: questa volta impareremo a costruire un menu a tendina realizzato in JavaScript. Un grande aiuto ci viene dato dal programma stesso nella sua ultima versione, la MX, che ci permette di eseguire l'intera operazione tramite un wizard di facile utilizzo, ma che non tutti conoscono. Se avete seguito il mio primo tutorial, non dovreste avere problemi poiché darò per scontati passaggi già spiegati. Detto questo, possiamo finalmente iniziare! Apriamo subito Dreamwaver. E' sempre la stessa icona nel Dock... Come siamo già abituati a fare, salviamo prima di tutto il documento. Ora nel menu Modify scegliamo Page Proprieties. Nel campo Title si imposta il titolo che comparirà nella barra del browser, ma ora noi ci dedichiamo ai colori. Come background io ho scelto un #000066 mentre come Text (e intendo tutti i tipi di text, compresi links, visited liks ecc.) ho scelto il bianco, #FFFFFF. Diamo pure ok. Nel menu Insert scegliamo Table ed inseriamo i seguenti valori: Rows 1, Columns 5, Cell Padding 3 e Cell Spacing 2. Come Width scegliamo 75 Percent e Border 0. Questi sono i valori ottimali per creare una tabella precisa e pulita, naturalmente voi potete scegliere ciò che più si adatta allo stile del vostro sito... Decoriamo ora la tabella come più ci piace. io l'ho fatta di un blu un po' più chiaro del precedente e ho messo qualche scritta in arancione, carattere Verdana dimensione 2, in grassetto. Ora selezioniamo una scritta all'interno della tabella che diventerà un menu: io desidero crearne uno alla voce Download. A questo punto, assicuriamoci che nel menu Window sia selezionata la voce Behaviors. Se così non fosse, attiviamola. Dovrebbe apparire da qualche parte una finestra simile questa: Ora, assicurandoci che il testo che dovrà diventare un menu sia ancora selezionato, andiamo nella finestra delle proprietà ed assegnamo il valore # nel campo link: E' un piccolo trucco che inganna Dreamweaver, poiché JavaScript, in questo caso, fnziona solo sul testo che contiene un link. Visto che noi non vogliamo andare in un'altra pagina cliccando Download ma semplicemente aprire un menu, con il valore # inganniamo JavaScript e Browser :wink: Tornando nella finestra behaviors, clicchiamo sul segno + e selezioniamo nella tendina che si apre la voce Pop-Up Menu. Si aprirà una finestra come la seguente. Qui possiamo decidere gli elementi del menu. Basta inserire il nome nel campo Text, il link nell'omonimo campo, mentre nel target va messo il frame di destinazione. Se il nostro sito non usa i frame, lasciamolo vuoto. Con il segno + aggiungiamo i campi, mentre col tasto Indent Item possiamo realizzare comodi sottomenu. Ecco come ho costruito il mio: In Appearance scegliamo lo stile del menu: io ho scelto il Verdana dimensione 12, mentre le celle selezionate di colore Blu con testo bianco, le altre celle Blu scuro con testo grigio. In advanced, se vogliamo possiamo mettere il bordo. Io l'ho fatto grigio di dimensione 1. Per quanto riguarda la posizione (scheda position), io preferisco metterlo subito sotto al link: asse X 0 e asse Y 18. Se selezioniamo il campo "Hide menu.." il menu scomparirà da solo quando il mouse si allontanerà dallo stesso. Diamo OK... Fatto! Ora possiamo salvare il nostro lavoro (Mela + S) e visualizzarlo in Safari. Questo è quello che abbiamo ottenuto: http://utenti.lycos.it/fabionetwork/italia...p/testmenu.html Spero di esservi stato utile con questo nuovo tutorial su Dreamweaver... un saluto e... al prossimo tutorial :wink: Fabio "Fabionetwork" Lanzone Link al commento Condividi su altri siti Altre opzioni di condivisione...
Guybrush Inviato 22 Giugno 2004 Segnala Condividi Inviato 22 Giugno 2004 Originally posted by FabionetworkCreare un Menu a comparsa in Dreamweaver MX Introduzione Benvenuti al mio secondo tutorial per ItaliaMac. Sempre di Dreamweaver si parla: questa volta impareremo a costruire un menu a tendina realizzato in JavaScript. Un grande aiuto ci viene dato dal programma stesso nella sua ultima versione, la MX, che ci permette di eseguire l'intera operazione tramite un wizard di facile utilizzo, ma che non tutti conoscono. Se avete seguito il mio primo tutorial, non dovreste avere problemi poiché darò per scontati passaggi già spiegati. Detto questo, possiamo finalmente iniziare! Apriamo subito Dreamwaver. E' sempre la stessa icona nel Dock... Come siamo già abituati a fare, salviamo prima di tutto il documento. Ora nel menu Modify scegliamo Page Proprieties. Nel campo Title si imposta il titolo che comparirà nella barra del browser, ma ora noi ci dedichiamo ai colori. Come background io ho scelto un #000066 mentre come Text (e intendo tutti i tipi di text, compresi links, visited liks ecc.) ho scelto il bianco, #FFFFFF. Diamo pure ok. Nel menu Insert scegliamo Table ed inseriamo i seguenti valori: Rows 1, Columns 5, Cell Padding 3 e Cell Spacing 2. Come Width scegliamo 75 Percent e Border 0. Questi sono i valori ottimali per creare una tabella precisa e pulita, naturalmente voi potete scegliere ciò che più si adatta allo stile del vostro sito... Decoriamo ora la tabella come più ci piace. io l'ho fatta di un blu un po' più chiaro del precedente e ho messo qualche scritta in arancione, carattere Verdana dimensione 2, in grassetto. Ora selezioniamo una scritta all'interno della tabella che diventerà un menu: io desidero crearne uno alla voce Download. A questo punto, assicuriamoci che nel menu Window sia selezionata la voce Behaviors. Se così non fosse, attiviamola. Dovrebbe apparire da qualche parte una finestra simile questa: Ora, assicurandoci che il testo che dovrà diventare un menu sia ancora selezionato, andiamo nella finestra delle proprietà ed assegnamo il valore # nel campo link: E' un piccolo trucco che inganna Dreamweaver, poiché JavaScript, in questo caso, fnziona solo sul testo che contiene un link. Visto che noi non vogliamo andare in un'altra pagina cliccando Download ma semplicemente aprire un menu, con il valore # inganniamo JavaScript e Browser :wink: Tornando nella finestra behaviors, clicchiamo sul segno + e selezioniamo nella tendina che si apre la voce Pop-Up Menu. Si aprirà una finestra come la seguente. Qui possiamo decidere gli elementi del menu. Basta inserire il nome nel campo Text, il link nell'omonimo campo, mentre nel target va messo il frame di destinazione. Se il nostro sito non usa i frame, lasciamolo vuoto. Con il segno + aggiungiamo i campi, mentre col tasto Indent Item possiamo realizzare comodi sottomenu. Ecco come ho costruito il mio: In Appearance scegliamo lo stile del menu: io ho scelto il Verdana dimensione 12, mentre le celle selezionate di colore Blu con testo bianco, le altre celle Blu scuro con testo grigio. In advanced, se vogliamo possiamo mettere il bordo. Io l'ho fatto grigio di dimensione 1. Per quanto riguarda la posizione (scheda position), io preferisco metterlo subito sotto al link: asse X 0 e asse Y 18. Se selezioniamo il campo \"Hide menu..\" il menu scomparirà da solo quando il mouse si allontanerà dallo stesso. Diamo OK... Fatto! Ora possiamo salvare il nostro lavoro (Mela + S) e visualizzarlo in Safari. Questo è quello che abbiamo ottenuto: http://utenti.lycos.it/fabionetwork/italia...p/testmenu.html Spero di esservi stato utile con questo nuovo tutorial su Dreamweaver... un saluto e... al prossimo tutorial :wink: Fabio \"Fabionetwork\" Lanzone è possibile che da utente ad utente le finestre siano aperte in posizioni diverse dipendentemente dal tipo di risoluzione dello schermo?? Cmq bel lavoro... sarà utile a molti. Guybrush "Sometimes everything is wrong [..] When your day is night alone/If you feel like letting go/When you think you've had too much of this life, well hang on" ..dedicato a chi ne sente il bisogno Link al commento Condividi su altri siti Altre opzioni di condivisione...
Messaggi raccomandati
Archiviato
Questa discussione è archiviata e chiusa a future risposte.