Hvordan lage Utvidbart tekst i Dreamweaver

Hvordan lage Utvidbart tekst i Dreamweaver


Profesjonelle webutviklere ofte avhengige av atferd og hendelser for å skape mange av de interaktive sidene du ser på Internett. En oppførsel er en handling som skjer med et objekt på en webside. En hendelse fører til at handlingen skal skje. Adobes Dreamweaver programmet kan hjelpe deg legge til nyttige atferd og hendelser til dine egne websider. Ved å feste en "onclick" event til tekst på siden din, kan du opprette utvid tekst som vises, og forsvinner på forespørsel.

Bruksanvisning

1 Åpne Dreamweaver og klikk "Design". Velg "Sett inn" og deretter "Layout Objects." Velg "Div Tag." Dreamweaver plasserer en div element på siden. Div ID verdien er "div1." En stiplet boks vises rundt div. Skriv "Toggle Text" inne i div.

2 Høyreklikk på div, klikk på "CSS Styles", og deretter "Ny". Type "skjult" i "Selector Name" tekstboksen, og velg deretter "OK". Klikk "Block", velg "Display", og trykk deretter på "None". Disse handlingene opprette en ny CSS-klasse som heter "skjult". Denne klassen har en skjerm attributt som har en verdi er "Ingen". Klikk på "OK".

Høyreklikk på div igjen, velger du "CSS Styles" og deretter "skjult". Div vil forsvinne fordi du har brukt den skjulte klassen til div.

3 Trykk "Shift" og "F4" for å åpne Behaviors panel. Dette panelet lar deg knytte hendelser og atferd med sideelementer. Velg "plusstegn," og deretter "Call Javascript." Skriv "toggleText ()" i "Javascript" tekstboksen, og klikk deretter "OK". Dreamweaver skaper en ny atferd for div-elementet. Denne atferden er et kall til en Javascript-funksjon som heter "toggleText ()."

4 Klikk på rullegardinpilen til venstre for ordene "Ring Javascript," og velg deretter "onClick." Dette legger en onClick hendelse til atferd.

5 Velg en tom plass under div, og klikk deretter på "Sett inn". Velg "Layout Objects" for å åpne "Insert Div Tag" -vinduet. Type "DIV2" i "ID" tekstboksen, og klikk deretter "OK". En ny div - hvis ID er "DIV2" - vises under forrige div. Skriv en kort setning i den nye div. Denne teksten vil komme og forsvinne når brukere klikker ordene "Toggle tekst."

6 Klikk "Code" for å se koden vinduet, og finne følgende tekst øverst i vinduet:

<Script type = "text / javascript">

7 Lim denne Javascript-funksjonen etter at tekstlinjen:

fungere toggleText () {

Var div = document.getElementById ( "DIV2");

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

Var currentDisplay = div.style.display;

if (currentDisplay! = "block")

div.style.display = "block"

ellers

div.style.display = "none";

}

Denne koden skaper toggleText funksjon. Funksjonen henter en referanse til DIV2 element og setter sin skjerm attributt til "ingen" hvis DIV2 er skjult. Ellers setter funksjon DIV2 verdi til "block".

8 Klikk på "Live View" for å se websiden i Live View-modus. Ordene "Toggle tekst" vises. Klikk ordene flere ganger. Som du gjør, vil setningen du skrev inn i DIV2 utvide og kontrakt.

Hint

  • Dette eksemplet brukt ordene "Toggle tekst" i div1, avtrekkeren som forårsaker teksten i DIV2 å utvide. Du kan også erstatte teksten i div1 med en knapp som utfører samme oppgave. Mange nettsteder bruker små "plusstegnet" knapper som forårsaker tekst i en annen div å utvide.