Thema- Überschrift
Die Texte können ruhig mal etwas aufgelockert eingerichtet sein. Dies erreicht man durch das Verwenden von zwei
BR codes. Normale Absätze sind meißt unübersichtlicher beim lesen.
Verwendung von zwei BR sind auch bei einbinden von Bildern ratsam, da auch dort die Übersicht verbessert wird.
Folgende spezielle Layoutemente stehen standardmäßig zur Verfügung.
Um sie zu nutzen kopieren Sie einfach die entsprechenden Teile aus diesem Muster heraus. Vergessen sie aber die CSS Definitionen im Header nicht!
Hier der Eintrag für den Header:
<head>
<style type="text/css">
p.info { border:1px solid blue; background-color:#e0e0ff; padding:10px; margin:10px;}
p.idee { border:1px solid #ccee00; background-color:#ffffe0; padding:10px; margin:10px;}
p.warnung { border:1px solid orange; background-color:#fff0c0; padding:10px; margin:10px;}
p.achtung { border:1px solid red; background-color:#ffe0e0; padding:10px; margin:10px;}
p.source { border:1px solid grey; background-color:#eeeeee; padding:10px; margin:10px;}
</style>
</head>
 |
Die Information
Sie wird benutzt, wenn Sie Zusatzinformationen anbieten möchten.
Beispielsweise, wenn Sie auf weitere Funktionen eines Tools oder Befehls hinweisen möchten.
|
<p class="info">
<table BORDER="0"><tr>
<td><img src="http://www.besly.de/images/application_x-vnd.be-info.png"></td>
<td><font size="2">
Die Information<br>
Sie wird benutzt, wenn Sie Zusatzinformationen anbieten möchten.
Beispielsweise, wenn Sie auf weitere Funktionen eines Tools oder Befehls hinweisen möchten.
</font></td></tr></table>
</p>
 |
Die Idee
Sie ist für den Fall gedacht, falls Sie dem Leser eine Idee aufzeigen möchten.
Bevorzugt um auf nette Zusatzfunktionen aufmerksam zu machen, die der Leser sebst ausprobieren soll.
z.B. bei Eastereggs
|
<p class="idee">
<table BORDER="0"><tr>
<td><img src="http://www.besly.de/images/application_x-vnd.be-idea.png"></td>
<td><font size="2">
Die Idee<br>
Sie ist für den Fall gedacht, falls Sie dem Leser eine Idee aufzeigen möchten.
Bevorzugt um auf nette Zusatzfunktionen aufmerksam zu machen, die der Leser sebst ausprobieren soll.
z.B. bei Eastereggs
</font></td></tr></table>
</p>
 |
Die Warnung
kommt zum Einsatz, wenn Sie den Leser warnen möchten.
Beispielsweise, wenn es zu einer Verwechslung kommen könnte.
|
<p class="warnung">
<table BORDER="0"><tr>
<td><img src="http://www.besly.de/images/application_x-vnd.be-warn.png"></td>
<td><font size="2">
Die Warnung<br>
kommt zum Einsatz, wenn Sie den Leser warnen möchten.
Beispielsweise, wenn es zu einer Verwechslung kommen könnte.
z.B. bei Eastereggs
</font></td></tr></table>
</p>
 |
Achtung!
Kommt zum Einsatz, wenn Sie die volle Aufmerksamkeit des Lesers brauchen.
Beispielsweise bei einer Abfolge komplizierter Schritte die präzise eingehalten werden muss.
|
<p class="achtung">
<table BORDER="0"><tr>
<td><img src="http://www.besly.de/images/application_x-vnd.be-stop.png"></td>
<td><font size="2">
Achtung!<br>
Kommt zum Einsatz, wenn Sie die volle Aufmerksamkeit des Lesers brauchen.
Beispielsweise bei einer Abfolge komplizierter Schritte die präzise eingehalten werden muss.
z.B. bei Eastereggs
</font></td></tr></table>
</p>
Source
Kommt zum Einsatz, wenn man Sourcecodes in einem Text hervorheben möchte. Hierbei wird wegen der Lesbarkeit auf eine Grafik verzichtet.
|
<p class="source">
<table BORDER="0"><tr>
<td><font size="2">
Source<br>
Kommt zum Einsatz, wenn man Sourcecodes in einem Text hervorheben möchte. Hierbei wird wegen der Lesbarkeit auf eine Grafik verzichtet.
</font></td></tr></table>
</p>
Falls Sie das Tutorial per Hand erstellen hier noch die wichtigsten HTML Tags für Sonderzeichen:
| ä
|
ä
|
Ä
|
Ä
|
| ü
|
ü
|
Ü
|
Ü
|
| ö
|
ö
|
Ö
|
Ö
|
| ß
|
ß
|
<
|
<
|
| >
|
>
|
Leerzeichen
|
|
| &
|
&
|
€
|
€
|
| ©
|
©
|
|
|
Am Ende des Textes kommt das Standard Infofeld, dort steht der Verfasser und ein Link nach BeSly. Hier sollten drei BR
verwendet werden.
<br>
<br>
<br>
<center>
<font size="-2">
Anleitung erstellt durch Mustermann (Nickname) Februar 2005<br>
Bereitgestellt durch <a href="http://www.besly.de" target="_top">BeSly</a>, der BeOS & Zeta Wissensbasis.
</center>
Hier ist eine Musterseite in Form des Quelltextes
|