Formatierungsbeispiele

(Auszug aus "DocBook-XML: Medienneutrales und plattformunabhängiges Publizieren" von Thomas Schraitle)

Die folgenden Beispiele zeigen Ihnen die Handhabung von CSS. Sollten Sie die DocBook-Stylesheets angepasst haben, empfiehlt es sich, die genaue Struktur der erzeugten (X)HTML-Dateien mit Ihren CSS-Regeln zu vergleichen.

Buch-, Kapitel- und Abschnittsformatierung

Das folgende Beispiel ist ein Buch, das nach HTML transformiert wurde. Grundlage ist diese Codesequenz:

<book id="book" lang="de">
    <title>DocBook + CSS</title>
    <bookinfo>
        <author>
            <firstname>Tux</firstname><surname>Pinguin</surname>
        </author>
    </bookinfo>
    ...
</book>

Wird nach HTML transformiert, ergibt dies:

<div class="book" lang="de">
 <div class="titlepage">
 <div><div>
   <h1 class="title"><a name="book"></a>DocBook + CSS</h1>
  </div>
  <div>
  <div class="author">
    <h3 class="author">
      <span class="firstname">Tux</span>
      <span class="surname">Pinguin</span>
    </h3>
 </div></div></div>
 <div></div>
 <hr>
</div>

Die CSS-Datei verwendet zwei Selektoren:

body { 
  font-family: serif; 
} 
div.book > div.titlepage { 
  text-align: center; 
  color: navy; 
} 
div.chapter > div.titlepage { 
  border-bottom: gray 2px dashed; 
}

Beim Element body wird eine Serifenschrift ausgewählt. Die Titelseite eines Buches wird zentriert ausgerichtet, Farbe ist ein dunkles Blau. Auf der Titelseite eines Kapitels wird eine gestrichelte Linie unterhalb des Textes erzeugt. Das Ergebnis sehen Sie in der folgenden Abbildung:

Formatierung von Buch- und Kapitel-Elementen (links Mozilla, rechts Konqueror)

Abbildung: Formatierung von Buch- und Kapitel-Elementen (links Mozilla, rechts Konqueror)

Auf dieselbe Art werden auch Titelseiten für Buchteile, Artikel, Abschnitte usw. erzeugt und gehandhabt.

Formatierung von example-Elementen

Grundlage ist der folgende Codeblock:

<example>
    <title>Ein kleines Shell-Skript</title>
    <screen>#!/bin/bash
echo "Hallo Welt"</screen></example>

Nach der Transformation sieht dieser Teil wie folgt aus:

<div class="example">
    <a name="id2799898"></a>
    <p class="title"><b>Beispiel 1.1. Ein kleines Shell-Skript</b></p>
    <pre class="screen">#!/bin/bash
echo "Hallo Welt"</pre>
</div>

Als CSS-Datei wird verwendet:

div.example { 
  margin-left:      .5ex; 
  margin-right:     .5ex; 
  border:           medium solid black; 
  background-color: #FEFFEA; 
  padding-left:     5px; 
  padding-right:    5px; 
} 

div.example > p.title { 
  line-height:      150%; 
  border-bottom:    thin solid black; 
  padding-top:      0px; 
} 

div.example pre { 
  margin: 2ex; 
}

Das Ergebnis sehen Sie in der folgenden Abbildung.

Formatierung von example (links Mozilla, rechts Konqueror)

Abbildung: Formatierung von example (links Mozilla, rechts Konqueror)

Formatierung von Randnotizen

Randnotizen haben Sie in Randnotizen kennengelernt. Als Grundlage dient das dortige Beispiel. Nach der Transformation erhalten Sie:

<div class="sidebar">
    <p>Eine Randnotiz, erzeugt mit dem Element sidebar.</p>
</div>
<p>Dies ist ein Blindtext. ...</p>

Die Regeln für sidebar sehen so aus:

div.sidebar { 
  float:right; 
  clear:right; 
  align:right; 
  width:150px; 
  background:#EBFFE2; 
  border:1px ridge #EBFFF2; 
  margin-top:1px; margin-bottom:1px; margin-left:5px; 
  padding-top:2px; padding-bottom:2px; padding-left:1px; 
} 

div.sidebar > p { 
   margin:0px; 
   padding:0px; 
}

Durch den Parameter float wird die Ausrichtung bestimmt. Möchten Sie die Randnotiz lieber auf der linken Seite, geben Sie float:left; ein. Das Ergebnis ist in der folgenden Abbildung zu sehen.

Formatierung von sidebar (links Mozilla, rechts Konqueror)

Abbildung: Formatierung von sidebar (links Mozilla, rechts Konqueror)

  

<< zurück vor >>
Tipp der data2type-Redaktion:
Zum Thema DocBook bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2009 Millin Verlag
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "DocBook-XML: Medienneutrales und plattformunabhängiges Publizieren" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Millin Verlag, Siebengebirgsring 36, 53797 Lohmar, info(at)millin.de