Gli sviluppatori Web professionali spesso si basano sui comportamenti e sugli 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 accada. Il programma di Adobe Dreamweaver consente di aggiungere eventi e comportamenti utili per le tue pagine Web. Collegando un evento "onClick" al testo sulla tua pagina, è possibile creare testo espandibile che appare e scompare a richiesta.

Istruzioni

1

Aprire Dreamweaver e fare clic su "Design". Selezionare "Inserisci" e quindi fare clic su "Gli oggetti del formato." Scegliere "Tag Div." Dreamweaver inserisce un elemento div nella pagina. Valore ID del div è "div1." Apparirà un riquadro tratteggiato intorno div. tipo "Toggle Text" all'interno del div.

2

Pulsante destro del mouse il div, fare clic su "Gli stili CSS" e quindi fare clic su "Nuovo". Digitare "nascosti" nella casella di testo "Nome del selettore", quindi selezionare "OK". Fare clic su "Blocco", scegliere "Visualizza" e quindi premere "None". Queste azioni creano una nuova classe CSS denominata "nascosti". Questa classe dispone di un attributo di visualizzazione in cui valore è "None". Fare clic su "OK".

Destro dell'elemento div nuovamente, selezionare "Stili CSS" e quindi fare clic su "hidden". Il div scompariranno perché è stato applicato la classe nascosta per div.

3

Premi il pulsante "Shift" e "F4" per aprire il pannello comportamenti. Questo pannello consente di associare eventi e comportamenti di elementi della pagina. Selezionare il "segno più" e quindi fare clic su "Chiamata JavaScript." Digitare "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 a sinistra delle parole "Chiama JavaScript" e scegli "onClick". Questo associa un evento onClick al comportamento.

5

Selezionate uno spazio vuoto sotto il tag div e quindi fare clic su "Inserisci". Scegliere "Gli oggetti del formato" riaprire la finestra "Inserisci Tag Div". Digitare "div2" nella casella di testo "ID" e quindi fare clic su "OK". Un nuovo div - il cui ID è "div2" - appare sotto il precedente div. tipo una breve frase in nuovo div. Questo testo verrà appaiono e scompaiono quando gli utenti fare clic sulle parole "Attiva/disattiva testo."

6

Clicca su "Code" per visualizzare la finestra del codice e individuare il seguente testo nella parte superiore della finestra:

< script type = "text/javascript" >

7

Incollare questa funzione JavaScript dopo quella riga di testo:

Function toggleText() () {

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

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

var currentDisplay = div.style.display;

Se (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 l'attributo display su "none" se div2 è nascosto. In caso contrario, la funzione imposta il valore di div2 per "bloccare".

8

Fare clic sul pulsante "Live View" per visualizzare la pagina Web in modalità Live View. Vengono visualizzate le parole "Testo di Toggle". Fare clic sulle parole più volte. Come si fa, la frase digitata in div2 sarà espandersi e contrarsi.

Consigli & Avvertenze

• In questo esempio viene utilizzato le parole "Testo di Toggle" in div1, il trigger che causa il testo in div2 per espandere. Si potrebbe anche sostituire il testo in div1 con un pulsante che esegue la stessa attività. Molti siti Web utilizzano piccoli pulsanti di "Segno" che causano il testo in un altro div per espandere.