Wie Erweiterbar Text in Dreamweaver Stellen

Erweiterbar Text ermöglicht es Benutzern, um es zu sehen, nur bei Bedarf.

 

EXPANDABLE DREAMWEAVER

Professionelle Web-Entwickler verlassen sich oft auf Verhaltensweisen und Ereignisse, um viele der interaktiven Seiten sehen Sie auf dem Internet erstellen. Ein Verhalten ist eine Aktion, die auf ein Objekt auf einer Webseite passiert. Ein Ereignis verursacht, dass Maßnahmen zu geschehen. Adobe Dreamweaver Programm kann helfen, fügen Sie nützliche Verhaltensweisen und Ereignisse, um Ihre eigene Web-Seiten. Durch das Anbringen eines "onClick"-Ereignis, um Text auf Ihrer Seite können Sie erweiterbare Text, der erscheint und verschwindet auf Anfrage.

 

Offene Dreamweaver und klicken Sie auf "Entwurf." Wählen Sie "Einfügen", und klicken Sie dann auf "Layout-Objekte." Wählen Sie "Div-Tag." Dreamweaver stellt ein div-Element auf der Seite. Die div ID ist "div1." Eine gepunktete Box erscheint um das div. Geben Sie "Toggle Text" innerhalb des div.

 

Rechten Maustaste auf das div, klicken Sie auf "CSS-Stile", und klicken Sie dann auf "Neu." Type "versteckt" in der "Selektor-Name" Textfeld, und wählen Sie dann "OK". Klicken Sie auf "Blockieren", wählen Sie "Display", und drücken Sie dann "Keine." Diese Maßnahmen schaffen eine neue CSS-Klasse namens "hidden". Diese Klasse verfügt über ein Display Attribut, dessen Wert "None". Klicken Sie auf "OK".

 

Rechten Maustaste auf das div wieder, wählen Sie "CSS-Stile" und klicken Sie dann auf "hidden". Die div verschwinden, weil Sie die versteckten Klasse der div angewendet.

 

Drücken Sie die "Shift" und "F4", um das Verhalten zu öffnen. In diesem Bereich können Sie Ereignisse und Verhaltensweisen mit Seitenelemente verbinden. Wählen Sie den "Plus-Zeichen", und klicken Sie dann auf "JavaScript aufrufen." Type "toggleText ()" in der "JavaScript" Textfeld, klicken Sie dann auf "OK". Dreamweaver erstellt ein neues Verhalten für das div-Element. Dieses Verhalten ist ein Aufruf einer JavaScript-Funktion namens "toggleText ()."

 

Klicken Sie auf den Dropdown-Pfeil auf der linken Seite mit den Worten "Rufen Sie JavaScript", und wählen Sie dann "onClick." Dies legt eine onClick-Ereignis auf das Verhalten.

 

Wählen Sie einen leeren Raum unterhalb des div, und klicken Sie dann auf "Einfügen". Wählen Sie "Layout-Objekte", um die "Div-Tag einfügen"-Fenster wieder zu öffnen. Type "div2" in der "ID" Textfeld ein, und klicken Sie dann auf "OK". Ein neues div - dessen ID "div2" - wird unter dem vorherigen div. Geben Sie einen kurzen Satz in der neuen div. Dieser Text wird erscheinen und verschwinden, wenn Benutzer die Worte auf "Toggle Text."

 

Klicken Sie "Code" um den Code-Fenster zu sehen, und finden Sie den folgenden Text in der Nähe des oberen Rand des Fensters:

 

script type = "text / javascript"

 

Fügen Sie diesen JavaScript-Funktion nach dieser Textzeile:

 

Funktion toggleText () {

 

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

 

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

 

var currentDisplay = div.style.display;

 

if (currentDisplay! = "block")

 

div.style.display = "block"

 

sonst

 

div.style.display = "none";

 

}

 

Dieser Code erstellt die toggleText Funktion. Die Funktion ruft einen Verweis auf die div2 Element und setzt seine Display-Attribut auf "none", wenn div2 verborgen ist. Ansonsten setzt die Funktion den Wert div2 zu "blockieren".

 

Klicken Sie auf den "Live View"-Taste, um Ihre Web-Seite im Live-View-Modus zu sehen. Die Wörter "sehen Text" angezeigt. Klicken Sie auf die Worte mehrere Male. Wie Sie das tun, wird der Satz, den Sie in div2 eingegeben ausdehnen und zusammenziehen.

 

Tipps und Warnungen

Dieses Beispiel verwendet die Worte "Toggle Text" in div1, der Auslöser, die den Text in div2 verursacht zu erweitern. Man könnte auch ersetzen Sie den Text in div1 mit einer Taste, die die gleiche Aufgabe erfüllt. Viele Websites verwenden kleine "Plus-Zeichen"-Tasten, die Text in einem anderen verursachen div zu erweitern.