Fließtext


Das Symbol für das Text-Element in der Objektpalette

Das Text-Element ist für längere Textpassagen gedacht - zB. Produktbeschreibungen oder auch ganze Webseiten. Wenn Sie also eine längere Textstelle einer Webseite bearbeitbar machen wollen, können Sie dieses WebYep-Element verwenden.

Die Formatierungsmöglichkeiten des Text-Elementes sind limitiert (siehe auch weiter unten) – desshalb ist es besonders gut geeignet, wenn Sie als WebDesignerIn möglichst viel Kontrolle über das Aussehen der Texte behalten wollen.

Wenn Sie mehr Kontrolle über das Aussehen der Texte an die RedakteurInnen abgeben möchten, ist das HTML-Text-Element besser geeignet.

Dieses WebYep Element wird durch folgenden PHP Code repräsentiert:

<?php webyep_longText("Feldname", false, "", false); ?> Details...

Parameter der PHP Funktion webyep_longText():
(siehe auch "Eigenschaften des Text-Elementes" weiter unten)
  1. "Feldname": Ein Text – der Name für dieses Element.
  2. true/false: Ein boolscher Wert – der Gültigkeitsbereich dieses Elementes.
    true wenn das Element in allen Seiten den selben Inhalt haben soll (global).
    false wenn es auf jeder Seite, auf der es platziert ist, andere Inhalte haben soll.
  3. "": Ein Text – nicht mehr verwendet. Geben Sie einen Leertext ("") an.
  4. true/false: Ein boolscher Wert – gibt an, ob E-Mail-Links im Text kodiert werden sollen.
    true wenn E-Mail-Adressen im Text mittels JavaScript kodiert werden sollen.
    false wenn sie als normaler HTML Code ausgegeben werden sollen.


Das Text-Element in Aktion - durch Klicken auf den Bearbeiten-Knopf ("Beschreibung bearbeiten")
öffnet sich das Text-Bearbeiten-Fenster


Das Text-Bearbeiten-Fenster


Seitenanfang

Das Besondere am Text-Element ist, dass der von den BenutzerInnen eingegebene Text von WebYep untersucht und interpretiert wird. Bestimmte Zeichenfolgen haben eine bestimmte Formatierung des Textes zur Folge:

bei Eingabe von

erscheint in der Seite

sieht zB. so aus:

http://www.test.com

Der Text "http://www.test.com" als Link auf diese Website - es wird ein neues Browserfenster geöffnet! (target="_blank")

http://www.test.com

test@firma.com

Der Text "test@firma.com" als Link auf diese E-Mail-Adresse (mailto:test@firma.com)

Siehe auch E-Mail-Links kodieren weiter unten.

test@firma.com

<LINK:andereseite.html Zur anderen Seite>

Der Text "Zur anderen Seite" als Link auf die Datei andereseite.html - es wird kein neues Browserfenster geöffnet! Es können auch vollständige URLs (inkl. "http://...") angegeben werden.

Zur anderen Seite

<FETT Ein dicker Text>

Der Text "Ein dicker Text" in Fettschrift (mittels <strong>-Tag)

Ein dicker Text

<BEISPIEL Ein Text in spezieller Form>

Der Text "Ein Text in spezieller Form" in dem CSS-Stil "BEISPIEL" formatiert (mittels <span class="BEISPIEL">).

Sie können in Ihren Webseiten beliebige CSS-Stile anlegen, die von den BenutzerInnen dann auf diese Art angewendet werden können.

Bitte beachten Sie aber dabei, dass die Stilnamen ausschließlich aus Großbuchstaben bestehen!

Ein Text in spezieller Form

---

Eine horizontale Trennlinie. Die Zeichenfolge "---" muss dazu in einer eigenen Zeile stehen!


* Erster Listenpunkt
** Ein Unterpunkt
* Zweiter Listenpunkt mit einem langen Text
* Dritter Listenpunkt

Durch Voranstellen eines oder mehrerer Sterne (oder des Listen-Symbols) werden die Zeilen als Liste formatiert. Statt dem Punkt-Symbol kann bei der Anzeige auch ein Bild (zB. GIF oder JPG) verwendet werden - siehe "Listenformatierung" weiter unten.

  • Erster Listenpunkt
    • Ein Unterpunkt
  • Zweiter Listenpunkt mit einem langen Text
  • Dritter Listenpunkt

+ Erster Listenpunkt
++ Ein Unterpunkt
+ Zweiter Listenpunkt mit einem langen Text
+ Dritter Listenpunkt

Durch Voranstellen eines oder mehrerer Plus-Zeichen werden die Zeilen als Aufzählungs-Liste formatiert. Welche Art der Numerierung verwendet wird, kann über entsprechende CSS-Stile für den <ol>- und <li>-Tag im Stylesheet der Seite beeinflusst werden - siehe "Listenformatierung" weiter unten.

  1. Erster Listenpunkt
    1. Ein Unterpunkt
  2. Zweiter Listenpunkt mit einem langen Text
  3. Dritter Listenpunkt

aaa | bbb | ccc
111 | 222 | 333

Durch verwenden des "|"-Symbols (links unten auf der Tastatur neben dem "Y", dabei AltGr gedrückt halten), können einfache Tabellen erzeugt werden. Das "|"-Symbol dient dabei als Spalten-Trenner.

Das Aussehen der Tabelle muss durch entsprechende CSS-Stile festgelegt werden - siehe "Tabellenformatierung" weiter unten.

aaa bbb ccc
111 222 333

Die Formatierungsnotation "<BEISPIEL Ein Text in spezieller Form>" setzt voraus, dass Sie in der Seite einen CSS-Stil namens ".BEISPIEL" definiert haben! Wichtig ist dabei, dass der Stilname nur aus Großbuchstaben bestehen darf!

Platzierung des Text-Elementes

Beachten Sie bitte, dass das Text-Element außer Text auch diversen HTML-Code generiert (wie horizontale Linien oder Listen – siehe nächster Absatz). Daher ist es wichtig innerhalb welches HTML-Tags sie das Text-Element platzieren!

Am sichersten ist es, wenn Sie es in einen <DIV>-Tag platzieren. Problematisch kann hingegen zB. das Setzen in einen <P>-Tag (Absatz) werden, da Listen (<UL>) oder Linien (<HR>) in einem Absatz laut HTML-Spezifikation nicht erlaubt sind.

Um zu ermitteln, innerhalb welchen Tags sich ein WebYep Text-Element befindet, selektieren Sie es im Dreamweaver und betrachten Sie dann den Tag-Selektor (am linken unteren Fensterrand): Die Reihe von dort gelisteten Tags gibt an, in welche Tags das Element eingebettet ist. Lautet der letzte in der Reihe <p>, so sollten Sie diesen mit der rechten Maustaste anklicken, "Tag bearbeiten" wählen und aus dem <p> ein <div> machen.

Listenformatierung

Listen (Bullet Lists) werden von WebYep durch die HTML-Tags <ul> und <li> realisiert. Somit kann durch Erstellen entsprechender CSS-Stile das Aussehen dieser Listen wie gewohnt beeinflusst werden.

So können Sie zum Beispiel durch den Stil:

ul { list-style-position: outside; list-style-image: url(bullet.gif); }

eine Grafik (bullet.gif) als Symbol für die Listenpunkte definieren. Sie können einen derartigen Stil im Dreamweaver einfach erzeugen - legen Sie einen neuen Stil an:

Selektor-Typ: Tag
Tag: ul

und vergeben Sie in der Kategorie "Liste" die gewünschten Eigenschaften (Listenpunkt-Bild, Position, etc.)

Wenn Sie mit dem Stil nicht alle Listen in der Seite sondern nur die im Text-Element beeinflussen möchten, stellen Sie dass Text-Element einfach in einen <div>-Tag, geben diesem eine CSS-Klasse (class="klassenname") und ändern den Namen des obigen Stils von "ul" in ".klassenname ul".

Um nur Listenpunkte einer bestimmten Ebene (Einrückung) zu beeinflussen, muss bei der Stildefinition nur der Tag-Name (das "ul") entsprechend oft wiederholt werden:

.klassenname ul ul { .....; }

beeinflusst beispielsweise nur Punkte der zweiten Ebene und tiefer, nicht aber die Haupt-Punkte.

Um die mittels "+" erzeugten Aufzählungslisten zu beeinflussen, gilt obiges entsprechend für den <ol>-Tag statt den <ul>-Tag.

Tabellenformatierung

Um das Aussehen von in den Text eingebetteten Tabellen festzulegen, können ebenfalls entsprechende CSS-Stile erzeugt werden - zB.:

table {
margin: 0px;
padding: 0px;
border-top: 1px solid black;
border-left: 1px solid black;
}

td {
margin: 0px;
padding: 6px;
border-bottom: 1px solid black;
border-right: 1px solid black;
}

Wenn Sie mit den Stilen nicht alle Tabellen in der Seite sondern nur die im Text-Element beeinflussen möchten, stellen Sie dass Text-Element einfach in einen <div>-Tag, geben diesem eine CSS-Klasse (class="klassenname") und ändern die Namen der obigen Stile von "table" in ".klassenname table" bzw. von "td" in ".klassenname td".


Seitenanfang

Eigenschaften des Text-Elementes


Das Eigenschaftsfenster für das Text-Element

Feldname

Eine Bezeichnung für das Text-Element. Der Feldname wird in der Webseite im "Bearbeiten"-Modus angezeigt, damit die BenutzerInnen bei der Eingabe die verschiedenen Text-Elemente unterscheiden können.

Inhalte

Ist hier "für diese Seite" eingestellt, so ist dieses Text-Element von den Text-Elementen anderer Seiten unabhängig, auch wenn diese den gleichen Feldnamen aufweisen. Wenn Sie möchten, dass die Text-Elemente mit diesem Feldnamen auf allen Seiten den gleichen Inhalt aufweisen, ist dieses Popupmenü auf "für alle Seiten" zu setzen.

E-Mail-Links kodieren

E-Mail-Adressen, die von den BenutzerInnen in ein WebYep-Text-Element eingegeben werden, zeigt WebYep als E-Mail-Links in der Seite an. Dies könnte (zB. von SPAM-Spidern) dazu missbraucht werden, diese E-Mail-Adressen zum Zwecke des Versendens von SPAMs zu sammeln.

Um das zu verhindern, können Sie diese Option auf "Ja" stellen - damit werden die eingegebenen E-Mail-Adressen weiter als Links dargestellt, aber mittels JavaScript verschlüsselt, sodass sie kaum mehr missbraucht werden können.

Da diese Verschlüsselung aber auf JavaScript basiert, können die E-Mail-Adressen bei den wenigen BesucherInnen der Website, die JavaScript deaktiviert haben, nur in der Form:

name(_AT_)adresse.com

angezeigt werden.


Seitenanfang

© 2009, Objective Development