Wie man erweiterbar Text in Dreamweaver

October 22

Wie man erweiterbar Text in Dreamweaver

Professional Web-Entwickler nutzen häufig Verhaltensweisen und Ereignisse viele der interaktiven Seiten erstellen, die Sie im Internet sehen. Ein Verhalten ist eine Aktion, die auf ein Objekt auf einer Webseite passiert. Ein Ereignis wird die Aktion geschehen. Adobes Dreamweaver-Programm hilft Ihnen Ihre eigenen Webseiten nützliche Verhaltensweisen und Ereignisse hinzufügen. Durch das Befestigen eines Ereignisses "OnClick" Text auf Ihrer Seite, können Sie erweiterbare Text erstellen, der erscheint und verschwindet bei Bedarf.

Anweisungen

1 Öffnen Sie Dreamweaver, und klicken Sie auf "Design". Wählen Sie "Einfügen" und klicken Sie auf "Layout-Objekte." Wählen Sie "Div-Tag." Dreamweaver fügt ein Div-Element auf der Seite. Das Div ID-Wert ist "div1." Ein gepunktetes Feld erscheint um die div. Typ "Toggle Text" innerhalb der div.

2 Maustaste auf das div-Tag, klicken Sie auf "CSS-Stile" und klicken Sie auf "Neu." Geben Sie im Textfeld "Selektor-Name" "versteckten", und wählen Sie "OK". Klicken Sie auf "Block" wählen Sie "Anzeigen", und drücken Sie "None". Diese Aktionen erstellen Sie eine neue CSS-Klasse namens "versteckt." Diese Klasse verfügt über ein Display-Attribut, dessen Wert ist "None". Klicken Sie auf "OK".

Das div-Tag wieder Maustaste, wählen Sie "CSS-Stile" und klicken Sie auf "versteckte". Das div-Tag wird verschwinden, da Sie die verborgene Klasse auf die div. angewendet

3 Drücken Sie die "Shift" und "F4", öffnen Sie das Bedienfeld "Verhalten". In diesem Panel können Sie Seitenelemente Ereignisse und Verhaltensweisen zuordnen. Wählen Sie das "Plus-Zeichen", und klicken Sie auf "JavaScript Aufruf." Geben Sie "toggleText()" im Textfeld "JavaScript" und dann auf "OK." Dreamweaver erstellt ein neues Verhalten für das Div-Element. Dieses Verhalten ist ein Aufruf an eine JavaScript-Funktion namens "toggleText()."

4 Klicken Sie auf den Dropdown-Pfeil auf der linken Seite der Wörter "JavaScript aufrufen", und wählen Sie dann "OnClick". Dies legt ein OnClick-Ereignis, auf das Verhalten.

5 Wählen Sie einen leeren Raum unterhalb des Div, und klicken Sie dann auf "Einfügen". Wählen Sie "Layout-Objekte", das "Div-Tag einfügen" Fenster wieder zu öffnen. Geben Sie "div2" im Feld "ID", und klicken Sie auf "OK". Ein neues Div--dessen ID "div2" ist--erscheint unterhalb der vorherigen div. Typ einen kurzen Satz in die neue div. Dieser Text erscheint und verschwindet, wenn der Benutzer klickt die Worte "Toggle Text."

6 Klicken Sie auf "Code", um das Codefenster anzuzeigen, und suchen Sie den folgenden Text im oberen Bereich des Fensters:

< Skript-Typ = "Text/Javascript" >

7 Fügen Sie diese JavaScript-Funktion nach dieser Textzeile:

Funktion toggleText() {}

Var Div = document.getElementById("div2");

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

Var CurrentDisplay = div.style.display;

Wenn (CurrentDisplay! = "block")

div.style.display = "block"

sonst

div.style.display = "none";

}

Dieser Code erstellt die ToggleText-Funktion. Die Funktion Ruft einen Verweis auf das Element div2 und legt dessen Display-Attribut auf "none", wenn div2 ausgeblendet ist. Andernfalls legt die Funktion div2 den Wert auf "blockieren."

8 Klicken Sie auf "Live View", um Ihre Web-Seite im Live View-Modus zu sehen. Die Worte "Toggle Text" angezeigt. Klicken Sie mehrmals auf die Worte. Wie Sie dies tun, wird der Satz div2 eingegebene erweitern und Vertrag.

Tipps & Warnungen

  • In diesem Beispiel verwendet die Wörter "Toggle Text" div1, die Trigger, die den Text div2 erweitern verursacht. Sie konnte auch den Text in div1 mit einer Schaltfläche ersetzen, die die gleiche Aufgabe ausführt. Viele Websites verwenden kleine "Pluszeichen"-Schaltflächen, mit die Text in ein anderes Div erweitern zu verursachen.