Tutorial 1
Codes zum kopieren anbietenUm Besuchern das kopieren eurer Banner- oder Design-Codes zu ermöglichen,
gibt es 2 Möglichkeiten. Einmal mit dem <textarea> Feld, oder dem <pre> Feld.
Nachteil mit dem <textarea> Feld :
------------------------------------------------------------
- die Codes lassen sich nicht übersichtlich anbieten (alles wird nebeneinander angezeigt)
- der Baukasten-Editor wirft beim speichern jede Verlinkung im Code um (das "_fcksavedurl, siehe Beispielgrafik)
- sehr viele User haben diesen Fehler in ihren "textarea" Feldern stehen
Codes anbieten mit dem pre-Element
Schritt 1 : CSS Code für das Aussehen des Feldes
Das <pre> Element hat in diesem Beispiel die Klasse codebox bekommen.
Mit CSS bekommt das Feld nun gewünschte Eigenschaften (Breite, Rahmen, Hintergrundfarbe)
| Zitat: |
pre.codebox { width: 400px; height: 80px; font-family: arial; font-size: 11px; display: block; padding: 10px; background-color: #FFFFB2; border: 1px solid #c9c9c9; overflow: auto; } |
overflow: auto; = Feld wird scrollbar, wenn Inhalt die Höhe height: 80px; überschreitet
User mit Baukasten-Design "CSS" : Code einfügen im Feld "css ohne style tags"
Alle anderen Baukasten-Designs: Einfügen im Feld "Text über Design" , vor dem --></style>
Wer im Feld "Text über Design" noch keine CSS Codes stehen hat, benötigt die style tags dazu.
Schreibe VOR dem CSS-Code: <style type="text/css"><!-- und NACH dem Code --></style>
Schritt 2: HTML-Code für Seiteninhalt
- auf "Eigene Seiten editieren"
- Seite wählen, wo Codes zum kopieren angeboten werden sollen
- im Editor nun oben links auf "Quellcode" klicken
- das Feld wird nun so eingefügt :
| Zitat: |
<pre class="codebox"> <code> Hier fügst du den Code ein, den du zum kopieren anbieten möchtest. </code> </pre> |
Beachte bitte:
Das <pre> Element führt HTML Codes aus, wenn der Code spitze Klammern enthält.
- ersetze im Code zum kopieren alle < durch <
- ersetze im Code zum kopieren alle > durch >
Ein fertiges Beispiel
- wir möchten den eigenen Banner-Code zum kopieren anbieten
- die Klammer < und > wurden hier "maskiert"
- im Code den Homepage-Link einfügen
- und die Grafikadresse vom Banner einfügen
- Beispiel für Grafikadresse: https://img.webme.com/pic/../name.jpg
Zitat:
<pre class="codebox">
<code>
<a href="LINK";img src="Grafikadresse" border="0" alt="banner" />
</code>
</pre>
Die Besucher auf der Homepage sehen dann euren Banner- Code zum kopieren.
Seite druckenMehr zu diesen Thema?
Kein Problem, schau doch mal in dem Forum nach ob du mehr Infos und Daten zu diesen Thema findest.
