E-Book Startseite Karteikarten-Programm
0

Bilder

In XSL-FO ist es auch kein Problem Grafiken einzubauen. Um Grafiken einzubauen benötigt man das einteilige Element fo:external-graphic. Dieses Element besitzt 3 Attribute: src, content-width und content-height. Im src-Attribut wird die Pfadangabe zu einem Bild angegeben. Dieses Attribut ist ein Pflichtattribut. content-width und content-height ist dagegen kein Pflichtfeld. Werden die 2 Attribute nicht angegeben, wird das Bild in der Original-Größe angezeigt. Es besteht auch die Möglichkeit nur content-width oder nur content-height anzugeben. Das Bild wird jedoch trotzdem in dem richtigen Seitenverhältnis angezeigt. Diese Funktion erspart Arbeit. Natürlich kann auch content-width und content-height angegeben werden. Durch die Angabe von beiden Attributen kann unter anderem auch eine Verzerrung vorgenommen werden.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="fobild.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block><fo:external-graphic src="/Bilder/Logo.jpg" content-height="5cm" /></fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Hintergrundfarbe

Auf manchen Webseiten werden Hintergrundfarben verwendet. In XSL-FO kann man nun mit dem Attribut background-color die Hintergrundfarbe angeben. Als Wert für das Attribut background-color können englische Farbangaben und Hex-Dezimal-Werte verwendet werden. Verwendet wird dieses Attribut meistens in fo:block-Elementen.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="fohintergrund.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block background-color="#C0C0C0">Dieser Block hat eine Hintergrundfarbe!</fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Hintergrundbild

Oft wird aber statt einer Hintergrundfarbe auch ein Hintergrundbild verwendet. Die Pfadangabe zu einem Hintergrundbild wird mit dem Attribut background-image vorgenommen. Die Größe des Hintergrundbildes ist nicht beeinflussbar. Das Bild wird immer in der vollen Größe verwendet und unendlich oft vertikal und horizontal wiederholt. Um die Wiederholung des Hintergrundbildes zu steuern gibt es noch zusätzlich das Attribut background-repeat. Als Wert gibt es 4 verschiedene Möglichkeiten: repeat (Wiederholung für x- und y-Achse - Standard), x-repeat (Wiederholung für x-Achse), y-repeat (Wiederholung für y-Achse) und no-repeat (keine Wiederholung). Es ist auch möglich die Position eines Hintergrundes zu bestimmen. So ist es möglich dem Bild ein gewissen Abstand zum oberen und / oder linken Rand zu verpassen. Durch die Angabe dieses Attributs, ohne die Wiederholungs-Funktion abzuschalten, können ebenfalls interessante Funktionen ermöglicht werden. Um die Position zu bestimmten gibt es die Attribute background-position-vertical und background-position-horizontal. Als Werte sind sowohl absolute als auch relative Maßeinheiten gültig. Möchte man für die Positionsbestimmung keine 2 Attribute verwenden, kann man das Attribut background-position verwenden. Der 1. Wert entspricht der vertikalen Achse, der 2. Wert der horizontalen Achse. Getrennt werden due Werte durch ein Leerzeichen.

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet href="fohintergrund2.xsl" type="text/xsl"?>
 
<wurzel>Test<wurzel>
<?xml version="1.0" encoding="ISO-8859-1"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
  <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
      <fo:simple-page-master master-name="seite" page-height="29.7cm" page-width="21cm" margin-top="1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
        <fo:region-body margin-top="2.5cm" margin-bottom="2cm" margin-left="5.5cm" margin-right="1.5cm" />
        <fo:region-before region-name="top" extent="2cm" precedence="true" background-color="#FF0000" />
        <fo:region-after region-name="bottom" extent="1.5cm" precedence="true" background-color="#00FFFF" />
        <fo:region-start region-name="left" extent="5cm" background-color="#FFFF00" />
        <fo:region-end region-name="right" extent="1cm" background-color="#0000FF" />
      </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="seite">
      <fo:static-content flow-name="top">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="left">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="right">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:static-content flow-name="bottom">
        <fo:block></fo:block>
      </fo:static-content>
      <fo:flow flow-name="xsl-region-body">
        <fo:block><xsl:value-of select="." /></fo:block>
        <fo:block background-image="/Bilder/Logo_FW.jpg" background-repeat="x-repeat" color="red">
        Dieser Block hat ein Hintergrundbild! - Dieser Block hat ein Hintergrundbild! - Dieser Block hat ein 
        Hintergrundbild! - Dieser Block hat ein Hintergrundbild! - Dieser Block hat ein Hintergrundbild!
        </fo:block>
      </fo:flow>
    </fo:page-sequence>
  </fo:root>
</xsl:template>
</xsl:stylesheet>
Anzeigebeispiel
Anzeigebeispiel (XML-Datei)



Anzeigebeispiel
Anzeigebeispiel (PDF-Datei)



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de