So erstellen Sie erweiterbaren Text in Dreamweaver

Wenn Sie Dreamweaver zum Verwalten des Inhalts Ihrer Unternehmenswebsite verwenden, können Sie HTML- und JavaScript-Code hinzufügen und ändern, um einen erweiterbaren Textabschnitt zu erstellen. Wenn die Seiten einer Website sehr viel Text enthalten, kann das Erweitern und Minimieren von Teilen davon ein wirksames Mittel sein, mit dem Benutzer ihre Erfahrung steuern können. Für Business-Sites kann dies besonders nützlich sein, da potenzielle Kunden das Interesse an Seiten mit einer übermäßigen Textmenge verlieren können.

Dreamweaver-HTML-Bearbeitung

Sobald Sie sich in Dreamweaver befinden, können Sie die entsprechende HTML- oder andere Datei öffnen. Über die Dreamweaver-Benutzeroberfläche können Benutzer Seitenentwürfe visuell innerhalb einer grafischen Benutzeroberfläche bearbeiten. Um Textelemente zu erstellen, die erweitert werden können, müssen Sie jedoch Code eingeben und bearbeiten. Aus diesem Grund müssen Sie in Dreamweaver zur Codeansicht wechseln. Dies kann entweder durch Drücken der Schaltfläche "Code" in der Symbolleiste Dokument oder durch Auswahl von "Ansicht" und Auswahl von "Code" aus dem Menü erreicht werden.

Textelement

In HTML-Webseiten kann Text in verschiedenen Elementtypen angezeigt werden. Absätze und "divs" gehören zu den häufigsten. Wenn eine Seite bereits ein Textelement enthält, kann der Entwickler Code hinzufügen, um diesen Text erweiterbar zu machen. Alternativ können Sie ein Textelement mit dem folgenden Beispiel-HTML-Markup-Code erstellen:

Hier ist der Text.

Der sichtbare Text ist das, was zwischen den einleitenden und dem schließenden Absatz-Tag erscheint. Das öffnende Absatz-Tag verfügt über ein ID-Attribut, sodass das Element in JavaScript gesteuert werden kann. Der Text ist mit der Stilanzeige-Eigenschaft zunächst unsichtbar.

Interaktives Element

Damit Benutzer steuern können, ob ein Textelement erweitert oder reduziert ist, enthalten Webseiten ein interaktives Element, z. B. eine Schaltfläche. Der folgende Beispielcode veranschaulicht dies und sollte in der Nähe des zu erweiternden Textelements enthalten sein:

Der Ereignis-Listener "onclick" bewirkt, dass eine JavaScript-Funktion ausgeführt wird, wenn der Benutzer auf die Schaltfläche klickt. Das Click-Event-Listener-Attribut kann in anderen Elementtypen angezeigt werden, sodass keine Schaltfläche verwendet werden muss.

JavaScript

Um ein Textelement auf einer Dreamweaver-Webseite ein- und auszublenden, ist JavaScript-Code erforderlich. Der folgende Code stellt einen Skriptabschnitt dar, der sich im Kopfabschnitt der HTML-Seite befindet:

Innerhalb dieses Abschnitts kann eine Funktion den Text beim Klicken der Schaltfläche durch Klicken des Benutzers erweitern und reduzieren. Zunächst muss das Skript nachverfolgen, ob der Text sichtbar ist:

var angezeigt = false;

Als Nächstes muss das Skript die im Click-Ereignislistener-Attribut angegebene Funktion enthalten:

Funktion showOrHide () {

}

Erweitern und reduzieren

Innerhalb einer Funktion kann JavaScript prüfen, ob der Text derzeit sichtbar ist (erweitert) oder nicht, und dann seine Stilanzeigeeigenschaft entsprechend ändern:

var textElement = document.getElementById ("the_content"); if (angezeigt) {textElement.style.display = "none"; angezeigt = falsch; } else {textElement.style.display = "block"; angezeigt = wahr; }

Das Skript verwendet die Textelement-ID, um das Erscheinungsbild zu steuern und die Variable zu aktualisieren, um den aktuellen Sichtbarkeitsstatus zu verfolgen.