Kopf- und Fußzeile hinzufügen bei Druck der Bildschirmausgabe

Aufgabe

Wenn auf der Nutzerseite ein Topic aus der Bildschirmausgabe gedruckt wird, sollen Kopf- und Fußzeile enthalten sein.

Die hier beschriebene Lösung funktioniert nur, wenn die Topics im Druck auf eine Seite passen. Bei längeren Topics wird die Kopf- und Fußzeile ignoriert, bzw. mit dem Topic-Inhalt überschrieben.

Lösung

Die folgenden Einstellungen können Sie in einzelnen Topics oder in der Template Page hinterlegen.

angaben zu den Styles im Bereich Head hinterlegen

Mit der Angabe @page hinterlegen Sie die Angaben zur Seite, z. B. Seitenränder. Kopf- und Fußzeile werden für die Bildschirmausgabe ausgeblendet und für die Druckausgabe im Bereich @media.print definiert.

Kopieren

<head>
    <style>
        @page {
            margin-top: 0cm;
            margin-bottom: 2cm;
            margin-left: 2cm;
            margin-right: 2cm;
            }
            #footer
            {
            display:none;
            }
            #header
            {
            display: none;
            }
            @media print {
            #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            }
            #footer
            {
            display: block;
            border-top: 1px solid black;
            padding-top: 1em
            }
            #header
            {
            display: block;
            width: 100%;
            padding-bottom: 1em
            }
            }
    </style>
</head>

Im Bereich Body Inhalte für Kopf- und Fußzeile definieren :

Im Body-Tag werden die Inhalte für die Kopf- und Fußzeile in div-Elemente mit der jeweiligen Bezeichnung aus den Styles geschrieben. Im folgenden Beispiel einer Template Page verwenden wir in der Kopfzeile ein Logo, in der Fußzeile Text und eine Variable.

Kopieren

<body>
    <div id="header">
        <p style="text-align: right;">
            <img src="../Images/HelpDesign_Logo.png" class="logo_heading" />
        </p>
    </div>
    <MadCap:breadcrumbsProxy />
    <MadCap:bodyProxy />
    <div id="footer">
        <p>Informationen in der Fußzeile <MadCap:variable name="Variables.Produktbezeichnung" /></p>
    </div>
</body>

Zum Vergrößern / Verkleinern auf das Bild klicken

Thanks to Scott DeLoach for that great template.

Autor: Birgit Becker / Letzte Änderung: 28.2.2025