Beispiele zur Beitragsgestaltung

Antworten
Benutzeravatar
Berthold
TReam Team
TReam Team
Beiträge: 964
Registriert: 12.06.2013, 23:00
Wohnort: Bergisch Gladbach
Hat sich bedankt: 15 Mal
Danksagung erhalten: 260 Mal
Kontaktdaten:

Beispiele zur Beitragsgestaltung

#1

Beitrag von Berthold » 06.11.2015, 09:40

Dieser Beitrag wird bei Bedarf aktualisiert. Immer wieder reinschauen kann sich also lohnen.

Beiträge können mit sogenannten BBCodes gestaltet werden. Diese BBCodes sind zum kleinen Teil über die Iconleiste im Beitragseditor erreichbar oder werden direkt als Text in den Beitrag geschrieben.
Capture 2015-06-17_09-06-09_nachm.png
Bleibt der Mauszeiger auf einem der Icons stehen, so erscheint nach kurzer Zeit ein mehr oder weniger aussagekräftiger Tooltipp.

Ist ein Wort oder Bereich im Beitrag selektiert und wird dann ein Icon angeklickt, so wird das selektierte Wort bzw. der Bereich von dem ausgewählten BBCode eingeschlossen. BBCodes, für die es kein Icon gibt, müssen als Text direkt im Beitrag geschrieben werden.
Die meisten aber nicht alle Codes können miteinander kombiniert werden. Hier hilft nur ausprobieren.

Nachfolgend einige Beispiele. Den Eigentlichen Text des Beitrag bzw. den BBCode seht ihr, wenn Text anzeigen auswählt.


Links

Link zu den TR-Freun.den im gleichen Fenster.
► Text zeigen
Link zu den TR-Freun.den in neuem Tab oder Fenster.
► Text zeigen
Link auf ein externes Bild ohne Größenanpassung. Bild anklicken.
Bild
► Text zeigen
Eine Lightbox mit 320 Pixel Breite zur Darstellung externer Bilder. Bild anklicken.
*
► Text zeigen
Eine Lightbox mit variabler Breite (hier 160 Pixel) zur Darstellung externer Bilder. Bild anklicken.
*
► Text zeigen
Eine Lightbox mit variabler Breite (hier 480 Pixel) zur Darstellung externer Bilder. Bild anklicken.
*
► Text zeigen
Text um ein externes Bild herum.
Und hier steht nun der Text neben dem Bild. Das Bild kann leider nicht mit der Lightbox in der Größe skaliert werden. Dieser Code eignet sich also nur für Bilder, die bereits eine passende Größe haben.














Um den Text unter dem Bild fortzusetzen, ist eine entsprechende Anzahl von Leerzeilen einzufügen.
► Text zeigen

Um Videos zu verlinken, reicht es den Link im Beitrag zu platzieren.
► Text zeigen
Um Videos aus der Foto Galerie zu verlinken muss zunächst der Pfad zur Videodatei ermittelt werden. Dazu klickt man auf das markierte Icon oberhalb des Videos.
Capture 2016-01-27_02-10-06_PM.png
Es öffnet sich ein neues Fenster oder ein neuer Tab in dem nur noch das Video dargestellt wird. Aus der Adresszeile des Browsers wird nun die Adresse kopiert und in den BBCode video eingefügt.
https://tr-freun.de/_albums/userpics/13 ... ediumX.mp4
► Text zeigen

Textformatierung

Unterstrichener roter Text.
► Text zeigen
Ein Text mit mehreren Attributen.
► Text zeigen
Glühender Text.
► Text zeigen
Blauer Text mit Schatten.
► Text zeigen
Nochmal blauer Text mit Schatten
► Text zeigen
Unscharfer blauer Text.
► Text zeigen
Text in gelben Feld.
► Text zeigen
Jetzt mal im roten Balken.
► Text zeigen
Brennender Text
► Text zeigen
Flammender Text
► Text zeigen
Eiskalter Text
► Text zeigen
Grüner Text
► Text zeigen
Blümchen Text
► Text zeigen
Laufschrift geht natürlich auch in allen Richtungen.
► Text zeigen
Texte können auch aus- und eingeblendet werden.
► Text zeigen

Textmarkierungen

!
Dies ist eine Warnung
► Text zeigen
 ! Wichtige Information
Hier gibt es was zu beachten
► Text zeigen
Auch Tooltipps sind natürlich möglich.
► Text zeigen
Text bzw. Inhalte aus- und einklappen
► Text zeigen
► Text zeigen
[+] Hier gibt es einen Titel
und wieder einen verborgenen Text
► Text zeigen
[+] Hier verbirgt sich ein Bild
BildBild mit Untertitel
► Text zeigen

Tabellen
Monospaced Text in weißem Feld. Ideal für Tabellen:
--------|--------|--------
 111111 | 222222 | 333333
 iiiiii | wwwwww | ääääää
► Text zeigen
 
Tabellen mit bis zu 7 Spalten und 10 Zeilen lassen sich auch mit einem Tabellengenerator erstellen. Dazu ist auf dieses Symbol zu klicken.
Tabelle.png
 
Im daraufhin erscheinenden Dialog die Größe der Tabelle auswählen. Dazu das entsprechende Kästchen anklicken.
Größe auswählen.png
Es wird eine entsprechend der Eingabe dimensionierte Tabelle generiert. Es müssen nur noch die Standardtexte durch die eigenen Texte ersetzt werden.
 
Title1 Title2 Title3
Text11 Text21 Text31
Text12 Text22 Text32
Text13 Text23 Text33
 
► Text zeigen
Auch Tabellen mit mehr als 10 Zeilen können erstellt werden. Dazu wird zunächst eine Tabelle mit 10 Zeilen erzeugt. Direkt danach wird dann eine weitere Tabelle erzeugt. Es muss dann bei jedem neuem Tabellenblock folgender Teil entfernt werden.
► Text zeigen
 
Bei Bedarf können auch Tabellen mit mehr als 7 Spalten händisch erstellt werden. Zunächst eine Tabelle mit 7 Spalten und 2 Zeilen (wegen der wechselnden Hintergrundfarbe) mit dem Generator erzeugen. Dann die benötigten Spalten hinzufügen. Anschließend die beiden Zeilen so oft kopieren bis die Anzahl der benötigten Zeilen erreicht ist. Immer darauf achten, dass die Summe der Spaltenbreiten im Bereich [thead] [/thead] 100% beträgt.


Sonstiges

PDF-Dokumente können auch einfach eingebunden werden.
► Text zeigen
Beachtet bitte die Ladezeit bei größeren Dokumenten. Hier kann es durchaus sinnvoll sein nur einen Link auf das Dokument bereitzustellen und es nicht in den Beitrag einzubinden.

Mit dem gleichen BBCode können auch ganze Webseiten eingebunden werden.
► Text zeigen
Auch eine individuelle Größe (hier 360* 480) ist möglich
► Text zeigen
Leider funktioniert diese Form der Einbindung aktuell weder mit Google Maps noch einem anderen mir bekannten Kartendienst.

Aber für die Routendarstellung mittels Motoplaner ist diese Funktion geeignet. Am besten man schaltet sofort in den Vollbildmodus um,
Capture 2015-08-03_06-28-26_nachm.png
dann werden die Bedienelemente ausgeblendet. Und nicht den Link zur Karte vergessen, für den Fall das die Darstellung innerhalb des Beitrags nicht ausreichend ist.
► Text zeigen
Anmerkungen

Zum Abschluss noch ein paar Hinweise. Viele aber nicht alle BBCodes lassen sich kombinieren. Teilweise kommt es zu Fehlfunktionen, wenn z. B. Umlaute an bestimmten Stellen auftauchen. Auch Leerzeichen können stören. Wenn etwas nicht klappt am besten zunächst mit simplen Text wie ABC ausprobieren und dann nach und nach die gewünschten Texte und Formatierungen einbringen.
Bei Links muss darauf geachtet werden, das der echte Link zur Datei angegeben wird, dieser ist nicht zwingend identisch mit der Adresszeile des Browsers. Dort steht häufig der Link zu einem Skript welches den Link zur eigentlichen Datei erzeugt. Solche Links auf Skripte funktionieren in der Regel nicht mit BBCode. Links auf Skripte erkennt ihr daran, dass sich Zeichen wie : ? php oder cli im Link befinden.
Den richtigen Link zur Datei findet ihr über Quelltext anzeigen im Browser.
Capture 2015-08-02_09-26-02_nachm2.png
Falls das so nicht klappt müsst ihr die Doku eures Browser bemühen. Eventuell sind auch Entwicklertools oder Firebug von Nöten.

Ganz wichtig: Wenn ihr komplexe Beiträge wie diesen hier gestaltet solltet ihr in jedem Fall den Text zwischenzeitlich sichern. Es kann beim ausprobieren von BBCodes Kombinationen dazu kommen, dass die Vorschau nichts anzeigt und man keine Chance mehr hat an den bereits eingegebenen Beitragstext zu gelangen. Man kann z. B. in die Titelzeile schreiben - Beitrag noch unvollständig - und den Inhalt einklappen. Wenn der Beitrag fertig ist entfernt man sowohl den Hinweis als auch die Einklappoption.

Und nun viel Spaß bei der Gestaltung von Beiträgen mit BBCode.

Gruß Berthold
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Benutzeravatar
tr_tom
Institution
Institution
Beiträge: 5487
Registriert: 30.04.2009, 23:00
Wohnort: Duisburg TR4A IRS '65
Hat sich bedankt: 46 Mal
Danksagung erhalten: 114 Mal
Kontaktdaten:

Re: Beispiele zur Beitragsgestaltung

#2

Beitrag von tr_tom » 06.11.2015, 10:11

Wow, das sind aber mächtige Werkzeuge !
» Carpe diem - nutze den Tag... «

Benutzeravatar
Garfield
TReam Team
TReam Team
Beiträge: 4884
Registriert: 07.05.2004, 23:00
Wohnort: Holzwickede, Wasserfohr 5a, 0172-2312602
Hat sich bedankt: 201 Mal
Danksagung erhalten: 166 Mal
Kontaktdaten:

Re: Beispiele zur Beitragsgestaltung

#3

Beitrag von Garfield » 06.11.2015, 12:47

Nachdem ich ein wenig Muße hatte, endlich auch mal hier zu stöbern: Hut ab! Da werden die TR-Freun.de viel bunter!

Ich denke,, das wird eine Herausforderung für den einen oder anderen werden, seine Liste o.ä. etwas farbiger zu gestalten... ;D

Gruß, Peter


Zuletzt als neu markiert von Berthold am 06.11.2015, 12:47.
Der Westfale versteht nichts, guckt aber interessiert.

Antworten

Zurück zu „Rund um den Internetauftritt“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast