Gli sviluppatori Web professionali spesso si basano su comportamenti ed eventi per creare molte delle pagine interattive che vedete su Internet. Un comportamento è un'azione che accade a un oggetto in una pagina Web. Un evento fa sì che l'azione avvenga. programma di Dreamweaver di Adobe può aiutarvi ad aggiungere i comportamenti e gli eventi utili per le vostre pagine web. Allegando un evento "onClick" al testo sulla pagina, è possibile creare il testo espandibile che appare e scompare su richiesta.

istruzione

1 Aprire Dreamweaver e fare clic su "Progettazione". Selezionare "Inserisci" e poi cliccare su "Oggetti layout". Scegliere "Tag Div." Dreamweaver inserisce un elemento div nella pagina. valore ID del div è "div1". Una casella tratteggiata attorno al div. Tipo "text Toggle" all'interno del div.

2 Fare clic con il div, fai clic su "Stili CSS," e quindi fare clic su "Nuovo". Tipo "nascosto" nella casella di testo "Selettore Nome", quindi selezionare "OK". Fare clic su "Block", selezionare "Display", quindi premere "Nessuno". Queste azioni creare una nuova classe CSS denominato "nascosto". Questa classe ha un attributo di visualizzazione il cui valore è "Nessuno". Fai clic su "OK".

Fare clic con il div, selezionare "Stili CSS" e quindi su "nascosto". Il div scomparirà perché è stato applicato alla classe nascosta al div.

3 Premere il tasto "Shift" e "F4" per aprire il pannello Comportamenti. Questo pannello consente di associare eventi e comportamenti con gli elementi della pagina. Selezionare il "Segno", e quindi fare clic su "Chiama JavaScript." Tipo "toggleText ()" nella casella di testo "JavaScript", quindi fare clic su "OK". Dreamweaver crea un nuovo comportamento per l'elemento div. Questo comportamento è una chiamata a una funzione JavaScript denominata "toggleText ()."

4 Fare clic sulla freccia a discesa alla sinistra delle parole "chiamata JavaScript," e quindi scegliere "onClick". Ciò attribuisce un evento onClick al comportamento.

5 Selezionare uno spazio vuoto al di sotto del div, e quindi fare clic su "Inserisci". Scegliere "Oggetti di layout" per riaprire la finestra "Insert Div Tag". Tipo "div2" nella casella di testo "ID", e quindi fare clic su "OK". Un nuovo div - il cui ID è "div2" - appare sotto il div precedente. Digitare una breve frase nella nuova div. Questo testo apparirà e scomparirà quando gli utenti fanno clic le parole "Testo Toggle".

6 Fai clic su "Codice" per visualizzare la finestra del codice, e trovare il seguente testo nella parte superiore della finestra:

<Script type = "text / javascript">

7 Incolla questo funzione JavaScript dopo che riga di testo:

funzione toggleText () {

var div = document.getElementById ( "div2");

var text = document.getElementById ( "displayText");

var = currentDisplay div.style.display;

if (currentDisplay! = "blocco")

div.style.display = "block"

altro

div.style.display = "none";

}

Questo codice crea la funzione toggleText. La funzione recupera un riferimento all'elemento div2 e imposta il suo attributo display per "nessuno" se div2 è nascosto. In caso contrario, la funzione imposta il valore di div2 di "blocco".

8 Fare clic sul pulsante "Live View" per vedere la pagina Web in modalità Live View. Le parole "Testo Toggle" appaiono. Clicca le parole più volte. Come si fa, la frase digitata nel div2 si espande e contrae.

Consigli e avvertenze

• Questo esempio ha usato le parole "testo Toggle" in div1, il grilletto che fa sì che il testo in div2 di espandersi. Si potrebbe anche sostituire il testo in div1 con un pulsante che esegue la stessa operazione. Molti siti Web utilizzano piccolo "segno più" pulsanti che causano il testo in un altro div ad espandersi.