Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag14.02.2015 um 15:05 (UTC)    
Titel: Seiten ohne Editor erstellen

Seiten ohne Editor erstellen
Tutorial von clean-test.de.tl

Den Editor ausschalten:
- auf "Einstellungen"
- dort auf "Eigene Seiten"
- den Haken setzen bei "den HTML-Editor nicht anzeigen"

Nun haben wir keine Werkzeugleiste mehr beim bearbeiten unserer Seiten.
Unsere Texte im Seiteninhalt gestalten wir nun mit Hilfe von (wenigen) HTML-Codes.

Die Überschrift im Seiteninhalt
Eine Überschrift ist gerade für die Suchmaschinen wichtig. Den schreiben wir zwischen <h2> und </h2>
Wir geben einen Klassennamen. Zum Beispiel class="seitentitel"

Wenn wir weitere Überschriften für die Absätze (Textblöcke) benötigen, setzen wir diese zwischen <h3> und </h3>
Auch diesem geben wir einen Klassennamen. Zum Beispiel class="ueberschrift"

Textblocke im Seiteninhalt
Um den Inhalt übersichtlich zu gestalten, fassen wir unsere Texte zwischen <p> und </p> zusammen.
Bei viel Text ist es sinnvoll, diesen in <p> Absätze / Abschnitte zu fassen.
<p> ist ein Blockelement, innerhalb eines p-Tags dürfen nur Inline-Elemente wie <strong>, <span> und <img> verwendet werden.
Andere Blockelemente wie <div>, <form> oder <table> dürfen nicht innerhalb von <p> liegen.
Auch dem <p> geben wir einen Klassennamen, zum Beispiel class="absatz"
Dann kann es so eim Seiteninhalt aussehen :
Zitat:

<h2 class="seitentitel"> Hier steht die Überschrift </h2>

<h3 class="ueberschrift"> Überschrift für Textblock 1 </h3>
<p class="absatz"> Hier steht der Text für den ersten Abschnitt . Zum Beispiel für eine kurze Einleitung</p>

<h3 class="ueberschrift"> Überschrift für Textblock 2 </h3>
<p class="absatz"> Hier steht der zweite Textabschnitt , zum Beispiel für den Haupteil </p>

<h3 class="ueberschrift"> Überschrift für Textblock 3 </h3>
<p class="absatz"> Und hier der dritte Textabschnitt. Zum Beispiel für den Abschluss zum Thema.</p>



Gewünschtes Aussehen mit CSS:
Nun bekommen Überschriften und Absätze gewünschte Eigenschaften - | Textfarbe | Schriftgröße | Außenabstand |
Einfügen im Feld "Text ÜBER Design :
Zitat:

<style type="text/css">
<!--
/* Grosse Ueberschrift */
h2.seitentitel {
color: #800000;
font-size: 22px;
margin: 10px 0px 20px 0px; }

/* kleine Ueberschrift */
h3.ueberschrift {
color: #000000;
font-size: 17px;
font-weight: bold;
margin: 10px 0px 10px 20px; }

/* Text Absätze */
p.absatz {
color: #000000;
font-size: 14px;
margin: 15px 0px 15px 20px; }

/* Text unterstrichen */
.unterstrichen { text-decoration: underline; }

/* Text kursiv */
.kursiv {font-style: italic; }

/* Textfarbe blau */
.blue {color: #000080; }
-->
</style>


Einzelne Worte im Textabsatz gestalten:
Wir möchten nun einen Text unterstreichen
Zitat:

<span class="unterstrichen"> TEXT </span>


Wir möchten einen Text Blau darstellen:
Zitat:

<span class="blue"> TEXT </span>


Wir möchten einen Text KURSIV darstellen:
Zitat:

<span class="kursiv"> TEXT </span>


Ich möchte einen Text kursiv, Blau und unterstrichen darstellen:
Zitat:

<span class="kursiv blue unterstrichen"> TEXT </span>


Den CSS-Code könnt Ihr um beliebige Klassen und Eigenschaften erweitern.

Noch 2 Beispiele :
- Ihr möchtet noch die Möglichkeit für Rote Textfarbe.
- wir nehmen den Klassennamen "red", damit wissen wir auch gleich, wofür er ist
- Rote Textfarbe bekommen wir mit color: #800000;
- einfügen im CSS-Code: .red { color: #800000; }
- und im Seiteninhalt schreiben wir dann <span class="red> TEXT </span>

- Ihr möchtet noch die Möglichkeit, Text mit Fettschrift darzustellen
- wir nehmen den klassennamen "fett", wir wissen dann gleich wofür der Code ist
- Fettschrift wäre die Eigenschaft font-weight: bold;
- im CSS Code fügen wir also ein: .fett { font-weight: bold;}
- und im Seiteninhalt schreiben wir dann <span class="fett"> TEXT </span>


Gruß Wolle


Zuletzt bearbeitet von matsk am 14.02.2015, 16:07, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de